:root {
   --btn-close-color: #dc3545;
   --btn-confirm-color: #1abc9c;
   --btn-neutral-color: #6c757d;
   --btn-warning-color: #fd7e14;
   --btn-print-color: #17a2b8;
   --btn-ghost-color: #999;
   --btn-text-hover: #fff;

   --btn-border-radius: 4px;
   --btn-padding: 6px 12px;
   --btn-font-size: 14px;
}

#btn-modal {
   display: flex;
   justify-content: right;
   gap: 10px;
}

.btn-modal {
   display: inline-block;
   padding: var(--btn-padding);
   margin-bottom: 0;
   font-size: var(--btn-font-size);
   font-weight: 400;
   line-height: 1.4;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   border: 1px solid transparent;
   border-radius: var(--btn-border-radius);
   background-image: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   transition: all 0.2s ease-in-out;
   min-width: 80px;
}

.btn-modal:focus {
   outline: none;
   box-shadow: 0 0 0 2px rgba(100, 100, 255, 0.3);
}

.btn-modal-close {
   color: var(--btn-close-color);
   background-color: transparent;
   border-color: var(--btn-close-color);
}

.btn-modal-close:hover {
   color: var(--btn-text-hover);
   background-color: var(--btn-close-color);
   border-color: var(--btn-close-color);
}

.btn-modal-confirm {
   color: var(--btn-confirm-color);
   background-color: transparent;
   border-color: var(--btn-confirm-color);
}

.btn-modal-confirm:hover {
   color: var(--btn-text-hover);
   background-color: var(--btn-confirm-color);
   border-color: var(--btn-confirm-color);
}

.btn-modal-neutral {
   color: var(--btn-neutral-color);
   background-color: transparent;
   border-color: var(--btn-neutral-color);
}

.btn-modal-neutral:hover {
   color: var(--btn-text-hover);
   background-color: var(--btn-neutral-color);
   border-color: var(--btn-neutral-color);
}

.btn-modal-warning {
   color: var(--btn-warning-color);
   background-color: transparent;
   border-color: var(--btn-warning-color);
}

.btn-modal-warning:hover {
   color: var(--btn-text-hover);
   background-color: var(--btn-warning-color);
   border-color: var(--btn-warning-color);
}

.btn-modal-print {
   color: var(--btn-print-color);
   background-color: transparent;
   border-color: var(--btn-print-color);
}

.btn-modal-print:hover {
   color: var(--btn-text-hover);
   background-color: var(--btn-print-color);
   border-color: var(--btn-print-color);
}

.btn-modal-ghost {
   color: var(--btn-ghost-color);
   background-color: transparent;
   border: 1px dashed var(--btn-ghost-color);
}

.btn-modal-ghost:hover {
   background-color: #f8f9fa;
   border-style: solid;
}

#modal-container {
   position: fixed;
   display: table;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   transform: scale(0);
   z-index: 4;
}

#modal-container.type-modal {
   transform: scale(1);
}

#modal-container.type-modal .modal-background {
   background: rgba(0, 0, 0, 0);
   /* animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; */
   animation: fadeIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#modal-container.type-modal .modal-background .modal {
   display: inline-flex;
   flex-direction: column;
   text-align: left;
   transform: translateY(-1500px);
   /* animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; */
   animation: roadRunnerIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
   width: 400px;
   height: 200px;
}

#modal-container.type-modal.out {
   animation: quickScaleDown 0s 0.5s linear forwards;
}

#modal-container.type-modal.out .modal-background {
   /* animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; */
   animation: fadeOut 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#modal-container.type-modal.out .modal-background .modal {
   /* animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; */
   animation: roadRunnerOut 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#modal-container .modal-background {
   display: table-cell;
   background: rgba(0, 0, 0, 0.8);
   text-align: center;
   padding-top: 150px;
}

#modal-container .modal-background .modal {
   background: white;
   padding: 10px 15px;
   display: inline-block;
   border-radius: 5px;
   font-weight: 300;
   position: relative;
   font-family: helvetica neue, helvetica, arial, sans-serif;
}

#modal-container .modal-background .modal h2 {
   font-size: 1.1rem;
   line-height: 1.4rem;
   margin: 0 0 10px 0;
   padding-bottom: 7px;
   border-bottom: 1px #eeeeee solid;
}
#modal-container .modal-background .modal p {
   font-size: 0.9rem;
   line-height: 1rem;
   margin: 0;
}

.modal-custom-content {
   height: 58%;
   padding: 5px 0;
   border-bottom: 1px #eeeeee solid;
   margin-bottom: 10px;
}

/* Modal Endereços */

/* Overlay */
.modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 1;
}

/* Modal container */
.modal-box {
   background: #fff;
   border-radius: 5px;
   width: 90%;
   max-width: 500px;
   padding: 15px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   animation: fadeIn 0.2s ease;
}

/* Cabeçalho */
.modal-box header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
}

.modal-box header h5 {
   margin: 0;
   font-size: 1.1rem;
   color: #333;
}

.modal-box header button {
   background: none;
   border: none;
   font-size: 1.4rem;
   color: #666;
   cursor: pointer;
}

/* Corpo e rodapé */
.modal-body {
   max-height: 350px;
   overflow-y: auto;
   padding: 0 10px;
}

.card-address {
   margin-left: 10px;
   flex-grow: 1;
}

.is-default {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 60px;
}

.card-default {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20px;
}

.card-address-info {
   display: flex;
   flex-direction: row;
}

.address-option {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 10px 15px;
   height: 65px;
}

.modal-footer {
   text-align: right;
   margin-top: 15px;
   padding: 10px;
}

.modal-footer button {
   margin-left: 8px;
   padding: 10px 15px;
   min-width: 100px;
   max-width: 100px;
}

/* Ativo */
.modal-overlay.active {
   display: flex;
}

/* ===== Cartões: lista ===== */
#card-list-container {
   display: grid;
   gap: 10px;
}

.card-option {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 12px;
   align-items: center;
   padding: 12px 14px;
   border: 1px solid #e8e8ee;
   border-radius: 10px;
   background: #fff;
   cursor: pointer;
   transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.card-option:hover {
   border-color: #c8c8d6;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
   background: #fcfcff;
}
.card-option.selected {
   border-color: #6c5ce7;
   box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
   background: #f8f7ff;
}

.card-saved {
   display: flex;
   flex-direction: column;
   margin-left: 10px;
}

.flag-icon {
   display: flex;
   justify-items: center;
   justify-content: center;
   width: 55px;
   min-width: 55px;
   /* border: 1px var(--secondary-gray) solid;
   padding: 4px;
   border-radius: 3px; */
}

.card-saved-name {
   display: flex;
   margin-top: 5px;
}

.card-saved-name small {
   font-size: 12px;
   color: #6c757d;
}

.card-saved-info {
   display: flex;
   flex-direction: row;
}
.card-saved-info .form-check-input {
   margin-right: 6px;
}

.card-mask {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   /* letter-spacing: 0.1px; */
   font-weight: 600;
   color: #2d2d2f;
   margin-left: 10px;
   font-size: 15px;
}

.card-meta small {
   color: #6c757d;
}
.card-flag img {
   display: inline-block;
   vertical-align: middle;
   height: 14px;
}

@keyframes fadeIn {
   0% {
      background: rgba(0, 0, 0, 0);
   }
   100% {
      background: rgba(0, 0, 0, 0.7);
   }
}
@keyframes fadeOut {
   0% {
      background: rgba(0, 0, 0, 0.7);
   }
   100% {
      background: rgba(0, 0, 0, 0);
   }
}

@keyframes quickScaleDown {
   0% {
      transform: scale(1);
   }
   99.9% {
      transform: scale(1);
   }
   100% {
      transform: scale(0);
   }
}

@keyframes roadRunnerIn {
   0% {
      transform: translateY(-1500px);
   }
   100% {
      transform: translateY(0);
   }
}

@keyframes roadRunnerOut {
   0% {
      transform: translateY(0);
   }
   100% {
      transform: translateY(1500px);
   }
}

@keyframes modalFadeIn {
   0% {
      background-color: transparent;
   }
   100% {
      background-color: white;
   }
}
@keyframes modalFadeOut {
   0% {
      background-color: white;
   }
   100% {
      background-color: transparent;
   }
}
@keyframes modalContentFadeIn {
   0% {
      opacity: 0;
      top: -20px;
   }
   100% {
      opacity: 1;
      top: 0;
   }
}
@keyframes modalContentFadeOut {
   0% {
      opacity: 1;
      top: 0px;
   }
   100% {
      opacity: 0;
      top: -20px;
   }
}

@media screen and (max-width: 480px) {
   #modal-container .modal-background .modal {
      width: 85% !important;
      height: 180px !important;
   }

   .btn-modal {
      width: 80px;
   }

   .card-mask {
      font-size: 12px;
   }
}