.checkout-global{
    max-width: 1200px;
    margin: 0 auto;
}
.checkout-steps {
    display: flex;
    margin-top: 3rem;
    margin-bottom: 3rem;
}
button#submitApostilleModal {
    margin-top: 15px!important;
}
.checkout-step {
    display: flex; 
    align-items: center;
    gap: 8px;
}
.checkout-step:hover {
    cursor: pointer;
}

.checkout-step:hover .step-circle {
    background: #dae0e8;
}

.cursor-text {
    cursor: text;
}

.loader {
  width: 33px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid #214881;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}
.stripe-field {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
}

.__PrivateStripeElement{
    min-width: 100%;
}

.lang-box {
    position: relative;
    border-radius: 14px;
}

/* label “în interior” */
.lang-label {
    position: absolute;
    left: 16px;
    top: 10px;
    font-size: 11px;
    font-weight: 500;
    color: #6B7280;
    pointer-events: none;
    line-height: 1;
}
input::placeholder,
textarea::placeholder {
    color: #475467 !important;
}
input {
    font-size: 15px!important;
}
.lang-select {
    width: 100%;
    height: 54px;
    padding: 13px 0 0 16px;
    border-radius: 14px;
    border: 1px solid #D4D7DB;
    background-color: #fff;
    appearance: none;
    font-size: 14px;
    font-weight: 300;
    color: #101828;
    outline: none;
    cursor: pointer;

    background-image:
        linear-gradient(#D4D7DB, #D4D7DB), 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat, no-repeat;

    background-size: 
        1px 32px,
        18px 18px;

    background-position: 
        calc(100% - 40px) 50%,
        calc(100% - 16px) 50%;
}


.lang-select:hover {
    border-color: #BFC4CA;
}

.lang-select:focus {
    border-color: #214881;
}


.checkout-step:hover .step-circle.step-active {
    background: #2b60ae;
}

/* Wrapper generic pentru orice select personalizat */
.styled-select-wrapper {
    position: relative;
    border-radius: 14px;
    margin-bottom: 16px;
}

/* Label tip floating-light */
.styled-select-label {
    position: absolute;
    top: 10px;
    left: 16px;
    font-size: 11px;
    font-weight: 500;
    color: #6B7280;
    pointer-events: none;
    line-height: 1;
}

/* Select unificat: liniuța + chevron incluse */
.styled-select {
    width: 100%;
    height: 54px;
    padding: 13px 0 0 16px;
    border-radius: 14px;
    border: 1px solid #D4D7DB;
    background-color: #fff;
    appearance: none;
    outline: none;
    cursor: pointer;

    font-size: 14px;
    font-weight: 300;
    color: #101828;

    /* Icon dropdown + linie verticală */
    background-image:
        linear-gradient(#D4D7DB, #D4D7DB),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    background-repeat: no-repeat, no-repeat;

    background-size:
        1px 28px,    /* linia */
        18px 18px;   /* chevron */

    background-position:
        calc(100% - 40px) 50%,  /* linia verticală */
        calc(100% - 16px) 50%;  /* săgeata */
}

/* Hover */
.styled-select:hover {
    border-color: #BFC4CA;
}

/* Focus */
.styled-select:focus {
    border-color: #214881;
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #C1C7D0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-circle span {
    font-size: 16px;
    font-weight: 600;
    color: #4A4F55;
}

.step-active {
    background: #214881;
}

.step-active span {
    color: white;
}

.step-label {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
}

.step-label-active {
    color: #214881;
}

.step-line {
    width: 64px;
    height: 1px;
    background: #E4E7EB;
    margin: 0 12px;
}

.tab-content {
    display: none;
}

.active-tab {
    display: block;
}

.checkout-title {
    color: #101828;
    margin-bottom: 24px;
    font-size: 36px;
    font-weight: 600;

}

.checkout-subtitle {
    color: #1A1A1A;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
}

.checkout-text {
    color: #6B7280;
    margin-bottom: 32px;
    font-size: 14px;
}

@media (max-width: 640px) {
    .unsupported-file-modal-dialog {
        width: 90% !important;
        padding: 24px 20px !important;
    }
}

.ocr-problem-modal-quote-btn {
    width: 100%;
    height: 52px;
    margin-top: 0;
    border-radius: 12px;
    background: #214881;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.ocr-problem-modal-quote-btn:hover {
    background: #1b3c6d;
    color: #ffffff;
}

.summary-label-column {
    flex: 1 1 auto;
    min-width: 0;
}

.summary-price-column {
    flex: 0 0 96px;
    min-width: 96px;
    text-align: right;
    display: block;
}

.summary-line-item,
.summary-line-price {
    display: block;
    line-height: 1.6;
}

.checkout-title-review {
    color: #101828;
    margin-bottom: 24px;
    font-size: 36px;
    font-weight: 600;
}

.checkout-contact-title {
    color: #1A1A1A;
    font-size: 20px;
    font-weight: 600;
}

.checkout-contact-text {
    color: #6B7280;
    font-size: 14px;
}

.checkout-link {
    color: #214881;
    text-decoration: none;
}

.checkout-link:hover {
    text-decoration: underline;
}


.checkout-start-title {
    color: #101828;
    margin-bottom: 24px;
    font-size: 36px;
    font-weight: 600;
}


.checkout-lang-title {
    color: #101828;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
}

.h-l {
    color: #101828;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
}

.checkout-lang-text {
    color: #475467;
    font-size: 14px;
}

/* Section spacing */
.translation-section {
    margin-bottom: 32px;
}

/* Titles */
.translation-title {
    color: #101828;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
}

.translation-subtitle {
    color: #475467;
    font-size: 14px;
}

/* Cards row */
.translation-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}



/* Card */
.translation-card {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #D0D6DF;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s;
}



.translation-card:hover {
    border-color: #B0B6BF;
}

/* Active card */
.active-card {
    background: #F1F7FD;
    border-color: #D0D6DF;
}

/* Card header */
.translation-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

/* Radio */
.radio {
    width: 20px;
    height: 20px;
    border: 2px solid #9CA3AF;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.radio-active {
    border-color: #214881;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radio-dot {
    width: 12px;
    height: 12px;
    background: #214881;
    border-radius: 50%;
}

/* Card title */
.translation-card-title {
    color: #1A1A1A;
    font-size: 15px;
}

/* Text */
.translation-card-text {
    color: #475467;
    font-size: 13px;
    line-height: 1.5;
    margin-left: 32px;
    font-weight: 300;
    margin-bottom: 16px;
}

/* Price */
.translation-price {
    color: #101828;
    font-size: 14px;
    font-weight: 400;
    margin-left: 32px;
}

.upload-file-main {
    border: 2px solid #d4d7db;
    gap: 2rem;
    display: grid;
    border-radius: 15px;
    margin-top: 1.2rem;
}

.margin-file-costum{
    margin: 1.5rem 1.5rem 0 1.5rem;
}

.total-box {
    background: #F1F7FD;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.total-label {
    color: #1A1A1A;
    font-size: 14px;
    font-weight: 500;
}

.total-value {
    color: #1A1A1A;
    font-size: 14px;
    font-weight: 600;
}

.word-label,
.word-value {
    color: #1A1A1A;
    font-size: 14px;
    font-weight: 400;
}

.word-value {
    margin-left: 20px;
}

.hidden-input {
    display: none;
}

.upload-zone {
    border: 2px dashed #D4D7DB;
    background: #fff;
    border-radius: 12px;
    height: 160px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s;
    margin: 1.5rem 1.5rem 0rem 1.5rem;
}

.upload-zone:hover {
    border-color: #346fc9;
}

.browse-link {
    color: #214881;
    cursor: pointer;
    text-decoration: underline;
}

.file-list {
    margin-top: 16px;
    border: 1px solid #E7E9EC;
    border-radius: 12px;
    overflow: hidden;
}

.file-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #E7E9EC;
    align-items: center;
}

.file-name {
    font-size: 14px;
    font-weight: 600;
    color: #1A1A1A;
}

.file-meta {
    font-size: 12px;
    color: #6B7280;
}

.delete-btn {
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
}

.delete-btn:hover {
    background: #f1f1f1;
}


.btn-next-step {
    width: 100%;
    height: 60px;
    background: #214881;
    cursor: pointer;
    color: #ffffff;
    border-radius: 12px;
    margin-top: 24px;      /* mt-6 */
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.2s;
}



.btn-next-step:hover {
    background: #1a3a68;
}

.addon-card {
    background: #ffffff;
    border: 1px solid #D0D6DF;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.addon-card:hover {
    border-color: #B0B6BF;
}

.addon-active {
    background: #DEF0FE4D;
    border-color: #101828;
}

.addon-check {
    width: 24px;
    height: 24px;
    border: 2px solid #C1C7D0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.addon-check-active {
    background: #000000;
    border-color: #000000;
}

.addon-title {
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.addon-text {
    color: #6B7280;
    font-size: 14px;
    line-height: 1.5;
}

.addon-price {
    color: #101828;
    font-size: 13px;
    font-weight: 400;
    flex-shrink: 0;
}

/* Group label above the certification / delivery cards ("Certification options",
   "Delivery options"). Sized as a real sub-heading so it sits under the 20px
   section title and reads level with the card titles below it, instead of the
   13px/400 caption it used to be. */
.checkbox-label{
    font-size: 20px;
    font-weight: 600;
    color: #1A1A1A;
}

.delivery-card {
    background: #ffffff;
    border: 1px solid #D0D6DF;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.delivery-card:hover {
    border-color: #B0B6BF;
}

.delivery-active {
    background: #DEF0FE4D;
    border-color: #101828;
}

.delivery-check {
    width: 24px;
    height: 24px;
    border: 2px solid #C1C7D0;
    border-radius: 6px;
    margin-top: 4px;
}

.delivery-check-active {
    background: black;
    border-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delivery-name {
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.delivery-text {
    color: #6B7280;
    font-size: 14px;
    line-height: 1.5;
}

.delivery-price {
color: #101828;
    font-size: 13px;
    font-weight: 400;
    flex-shrink: 0;
}
.note-editor {
    border-radius: 12px !important;
    border: 1px solid #D0D6DF !important;
    overflow: hidden;
}

.note-toolbar {
    border-bottom: 1px solid #E4E7EB !important;
}

trix-editor.trix-custom {
    border: 1px solid #D0D6DF;
    border-radius: 12px;
    min-height: 160px;
    padding: 16px;
    font-size: 14px;
    color: #4A4F55;
}

trix-toolbar {
    border: none !important;
    padding: 10px 14px;
}

trix-toolbar .trix-button-group {
    border: none !important;
}

trix-toolbar .trix-button {
    color: #4A4F55;
}

trix-toolbar .trix-button:hover {
    color: #214881;
}

.editor-btn {
    color:#4A4F55;
    font-size:16px;
    padding:2px 4px;
    transition:0.2s;
    cursor: pointer;
}

.editor-btn:hover {
    color:#214881;
}

.editor-area {
    border:0;
    outline:none;
    font-size:14px;
    line-height:1.5;
}

.editor-area.editor-empty::before {
    content: attr(data-placeholder);
    color: #9CA3AF;
    pointer-events: none;
}

.editor-btn {
    color: #6B7280;
    font-size: 17px;
    padding: 6px;
    transition: 0.2s;
}

.editor-btn:hover {
    color: #214881;
}

.editor-btn i {
    pointer-events: none;
}

#specialFilesList{
    gap: 1rem;
    display: grid
}

.h-line-30{
    width: 1.3px;
    background: #c2c2c2;
    height: 30px;
}


.tooltip-label {
    font-size: 14px;
    color: #1A1A1A;
    font-weight: 500;
    text-decoration: underline dotted;
}
#etaValue{
    font-size: 14px;
}


.summ-p{
    padding-left: 1rem;
    padding-right: 1rem;
}

.tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}



.tooltip-icon {
    color: #50627A;
    cursor: pointer;
}

/* tooltip hidden by default */
.tooltip-box {
    position: absolute;
    bottom: 32px;
    left: 0;
    width: 221px;
    background: #3a3a3af2;
    color: white;
    font-size: 11px;
    text-align: center;
    padding: 8px 8px;
    border-radius: 14px;
    line-height: 1.45;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 999;
}

.tooltip-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tooltip-box::after {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 95px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid #3a3a3af2;
}

.after-order {
    font-size: 12px;
    color: #475467;
    gap: 10px;
    text-align: center;
    display: grid;
    padding-top: 2rem;
}

.ata-tls{
    width: 50%;
    margin: 0 auto;
}

div#hardcopyCardSlot {
    background: none;
    margin: 0;
}

div#hardcopyCardSlot .delivery-card {
    border-color: transparent;
    border: none;
}

#hardcopyCardSlot .delivery-card.delivery-active {
    border-color: #ffffff;
    border: 1px solid #D0D6DF;
}

#hardcopyStatusRow,
#hardcopyStatus{
    font-size: 0px!important;
}

.addon-documents-input-custom { 
    text-align: center;
    border-radius: 7px;
    width: 70px;
    height: 26px;
}
.addon-documents-label {
    text-align: left;
    border-radius: 7px;
    color: #4f4f4f;
}
.addon-documents-btn {
    background: #ffffff;
    width: 26px;
    border-radius: 7px;
    cursor: pointer;
}

@media only screen and (max-width: 1250px) {
    .checkout-global{
        width: 100%;
        max-width: 100%;
        padding: 0 3rem;
    }
}

@media (min-width: 640px) {
    .translation-cards {
        flex-direction: row;
        gap: 24px;
    }
    .translation-card {
        padding: 24px;
    }
    .btn-next-step {
        margin-top: 32px;
    }
}

@media only screen and (max-width: 600px) {
    .step-line {
        width: 35px;
    }
    .checkout-global {
        padding: 0 0 0 3%;
        margin: 0;
        width: 97%;
    }
}

@media only screen and (max-width: 550px) {
    .checkout-title-review,
    .checkout-title,
    .checkout-start-title {
        font-size: 27px;
    }
    .checkout-steps {
        margin-bottom: 1rem;
    }

}

@media only screen and (max-width: 490px) {
    .checkout-global{
        padding: 0 .8rem;
    }
    .step-line {
        width: 5px;
    }
}

@media only screen and (max-width: 440px) {
    .step-circle {
        width: 25px;
        height: 25px;
    }
    .step-circle span {
        font-size: 12px;
    }

}

@media only screen and (max-width: 415px) {
    .checkout-title-review, .checkout-title, .checkout-start-title {
        font-size: 23px;
    }
}

/* ==========================================================================
   Order Summary: Cash Price / Card Price
   --------------------------------------------------------------------------
   Two alternative totals, not two charges. Stacked as label/value rows they
   read like a bill that adds up, so they became one panel split down the
   middle: a single object with two sides, which is what the choice actually
   is. The split is a perforation - the vernacular of the paperwork this
   company handles - and OR sits in the break in it.

   The sides are deliberately not twins: the cash side carries the tint and
   the saving, so the surface itself says which price is lower. Amounts are
   set in tabular figures at one size and on one baseline, because the whole
   job of the block is letting two numbers be compared at a glance.
   ========================================================================== */
/* Section heading for the price pair: on steps 1-2 the customer sees two
   prices before anything is chosen, so the block says what it is and points at
   where the choice is actually made. */
.two-price-head {
    margin-bottom: 10px;
}

.two-price-head__title {
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.two-price-head__note {
    margin-top: 2px;
    color: #6B7280;
    font-size: 12px;
    line-height: 1.4;
}

.two-price {
    display: flex;
    align-items: stretch;
    margin-bottom: 16px;
    border: 1px solid #D0D6DF;
    border-radius: 16px;
    /* Lets the tinted half run to the rounded edge with no seam. */
    overflow: hidden;
    background: #FFFFFF;
}

.two-price__option {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Each half is a self-contained offer, so it is centred in its own cell. */
    align-items: center;
    text-align: center;
    padding: 18px 16px;
}

/* Sides stay transparent - the panel underneath carries the tint. */
.two-price__option {
    background: transparent;
}

/* checkout.css loads after the tailwind build, so the display:flex above would
   otherwise beat the utility .hidden that the summary JS toggles on the card
   column when card payment is unavailable. */
.two-price__option.hidden {
    display: none;
}

/* The perforation: two dashed runs with the word in the break between them. */
.two-price__or {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px;
    /* The word is a connector, not a value - it stays black at every stage
       instead of borrowing the accent that marks a real price. */
    color: #101828;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.two-price__or::before,
.two-price__or::after {
    content: "";
    flex: 1 1 auto;
    border-left: 1px dashed #A9C0DE;
}

.two-price__or::before { margin-bottom: 10px; }
.two-price__or::after  { margin-top: 10px; }

.two-price__label {
    color: #1A1A1A;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* Zelle is the house price, so its heading carries the brand blue at every
   stage - unlike the amount, which earns the accent only once it is real. */
.two-price__option--cash .two-price__label,
.two-price__option--cash .two-price__meta {
    color: #214881;
}

.two-price__meta {
    color: #6B7280;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.two-price__amount {
    margin-top: 12px;
    color: #101828;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The accent marks a real number. An empty order shows $0.00 in the same black
   as the rest, so nothing reads as a quoted price before there is one. */
.two-price__option--cash .two-price__amount.is-price-set {
    color: #214881;
}

/* The waiting placeholder holds the slot without pretending to be a value. */
.two-price__amount.is-price-pending,
.two-price__option--cash .two-price__amount.is-price-pending {
    color: #C1C7D0;
}

/* The half matching the method chosen on step 3. It sweeps in from a deep blue
   and settles on the soft one, so the summary visibly answers the click at the
   other end of the page. */
@keyframes twoPriceSelectSweep {
    from { background-color: #C7DCF4; }
    to   { background-color: #F1F7FD; }
}

.two-price__option--selected {
    background: #F1F7FD;
    animation: twoPriceSelectSweep .45s ease-out;
}

/* The half not chosen reads as inactive - same grey as an unselected payment
   button, so the two places agree. */
.two-price__option--muted {
    background: #F3F4F6;
}

.two-price__option--muted .two-price__label,
.two-price__option--muted .two-price__meta,
.two-price__option--muted .two-price__amount,
.two-price__option--cash.two-price__option--muted .two-price__amount {
    color: #9CA3AF;
}

.two-price__option--muted .two-price__savings {
    background: #D8DBE0;
    color: #6B7280;
}

@media (prefers-reduced-motion: reduce) {
    .two-price__option--selected {
        animation: none;
    }
}

/* States the difference between the two amounts beside it, rather than
   recommending a payment method. */
.two-price__savings {
    align-self: center;
    margin-top: 8px;
    padding: 5px 11px;
    border-radius: 8px;
    background: #FDE7E7;
    color: #B42318;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.two-price__savings:empty {
    display: none;
}

/* Apostille / notarization / over the card threshold. The Card Price side stays
   on show - the customer asked for it and deserves to know the method exists -
   but it is greyed out and says so, and the word OR goes: there is no choice to
   offer. The perforation stays and closes into one continuous line. */
.two-price__unavailable {
    margin-top: 12px;
    color: #9CA3AF;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.two-price__unavailable.hidden {
    display: none;
}

.two-price.is-cash-only .two-price__or-word {
    display: none;
}

.two-price.is-cash-only .two-price__or::before {
    margin-bottom: 0;
}

.two-price.is-cash-only .two-price__or::after {
    margin-top: 0;
}


@media only screen and (max-width: 400px) {
    .two-price__option {
        padding: 14px 12px;
    }
    .two-price__amount {
        font-size: 22px;
        margin-top: 10px;
    }
    .two-price__or {
        padding: 12px 8px;
    }
}

/* ==========================================================================
   Step 3: Cash / Card payment toggle
   --------------------------------------------------------------------------
   The chosen method is lit in the brand blue; the one not chosen sits back on
   a grey surface. Hover lifts an unchosen button from that grey to the same
   soft blue, so it reads as "this is what you would get" rather than as a
   colour change for its own sake. Appearance lives here rather than in inline
   JS styles so the hover state can be limited to devices that actually hover -
   on a phone, :hover sticks after a tap and would leave a button looking
   chosen when it is not.
   ========================================================================== */
/* Both methods are equally available, so the one not chosen is not greyed out -
   it simply lacks the heavier border that marks the current choice. The tinted
   fill is what keeps them reading as buttons rather than as input fields. */
.pay-method-btn {
    background: #F1F7FD;
    border: 1px solid #C8D9EE;
    color: #1A1A1A;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pay-method-btn--active {
    background: #F1F7FD;
    border: 2px solid #214881;
    color: #214881;
    box-shadow: none;
}

/* The connector between the two buttons - same word and weight as the one in
   the price panel, and just as constant in colour. */
.pay-method-or {
    flex: 0 0 auto;
    color: #101828;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.pay-method-or.hidden {
    display: none;
}

/* Sweeps in from a deep blue and settles on the soft one: the movement is what
   catches the eye, the resting colour is quiet enough to live with. Hover only,
   and only on a real pointer - on a phone :hover sticks after a tap and would
   leave an unchosen button looking chosen. */
@keyframes payMethodHoverSweep {
    from { background-color: #C7DCF4; }
    to   { background-color: #E4EFFA; }
}

@media (hover: hover) and (pointer: fine) {
    .pay-method-btn:not(.pay-method-btn--active):hover {
        background: #E4EFFA;
        border-color: #A9C0DE;
        animation: payMethodHoverSweep .45s ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-method-btn:not(.pay-method-btn--active):hover {
        animation: none;
    }
}

.pay-method-btn:focus-visible {
    outline: 2px solid #214881;
    outline-offset: 2px;
}