/* ============================================================
   19c-store-checkout.css
   Checkout-Formular, Toasts, Store-Utilities
   Extrahiert aus 19-store.css (Zeile 1380-1952)
   ============================================================ */
/* --- Checkout Form (Screenshot Optimized) --- */
.checkout-content {
    background-color: var(--ivory);
}

.checkout-header {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 64rem) {
    #stageCheckout {
        border-left: none;
    }
    .checkout-content {
        background-color: transparent;
    }
}

.checkout-section-title {
    font-family: var(--font-accent);
    font-size: var(--fs-label);
    font-weight: 300;
    letter-spacing: 0.4em;
    color: var(--text-secondary);
    margin: 1.5rem 0 1rem;
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer.is-checkout .checkout-section-title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.checkout-section-title span {
    position: relative;
}

.form-group {
    margin-bottom: 2.2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer.is-checkout .form-group {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Staggered Delays for Form Groups */
.drawer.is-checkout .form-group:nth-child(2) {
    transition-delay: 0.1s;
}

.drawer.is-checkout .form-group:nth-child(3) {
    transition-delay: 0.15s;
}

.drawer.is-checkout .form-group:nth-child(4) {
    transition-delay: 0.2s;
}

.drawer.is-checkout .form-group:nth-child(5) {
    transition-delay: 0.25s;
}

.drawer.is-checkout .form-group:nth-child(6) {
    transition-delay: 0.3s;
}

.drawer.is-checkout .form-group:nth-child(7) {
    transition-delay: 0.35s;
}

.form-group label {
    position: absolute;
    left: 0.5rem;
    top: 1.1rem;
    font-family: var(--font-accent);
    font-size: var(--fs-form-label);
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--text-dimmed);
    margin-bottom: 0;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-group input {
    width: 100%;
    padding: 1.3rem 0.5rem 0.5rem;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    font-family: var(--font-accent);
    font-size: 1rem;
    /* Mindestens 16px = verhindert iOS Auto-Zoom bei Focus */
    color: var(--text-secondary);
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0;
    /* Reset iOS-Default */
    -webkit-appearance: none;
}

.form-group input::placeholder {
    color: transparent;
}

/* Floating Label Animation */
.form-group input:focus+label,
.form-group input:not(:placeholder-shown)+label,
.form-group input.input-readonly+label {
    transform: translateY(-1.1rem) scale(0.75);
    color: var(--gold-dark);
    letter-spacing: 0.2em;
    font-weight: 500;
}

.form-group input:focus {
    outline: none;
    border-bottom: 1.5px solid var(--gold);
    box-shadow: 0 4px 12px rgba(196, 161, 105, 0.04);
}

/* Checkmark/Pfeil Animation deaktiviert für ein edleres Design (Vermeidung von Verwechslung mit Dropdowns) */
.form-group::after {
    display: none;
}

.phone-input-group:focus-within {
    box-shadow: 0 0 20px rgba(196, 161, 105, 0.2);
    border-color: rgba(196, 161, 105, 0.4);
}

.checkout-form-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zip-city-row {
    display: grid;
    grid-template-columns: 0.35fr 0.65fr;
    gap: 1.5rem;
}

@media (max-width: 22.5rem) {
    .zip-city-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.phone-input-group {
    display: flex;
    align-items: center;
    background: var(--white);
    height: 3.375rem;
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: text;
    /* Zeige an, dass das gesamte Feld klickbar ist */
}

/* --- Validation States --- */
#checkoutForm .form-group input.is-valid {
    border-bottom: 1.5px solid var(--gold-light);
}

#checkoutForm .form-group input.is-invalid {
    border-bottom: 1.5px solid var(--error);
}

/* --- Elegant Error Tooltips --- */
.error-hint {
    font-family: var(--font-accent);
    font-size: var(--fs-micro);
    color: var(--error);
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.error-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
    height: auto;
    margin-bottom: 0.5rem;
}

/* Chrome/Safari specific: hide autofill yellow background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* --- Phone Input Overrides ---
   #checkoutForm erhöht Spezifität auf (1,x,x) und schlägt
   jede .form-group input Regel (0,1,1) sauber ohne !important. --- */
#checkoutForm .phone-input-group .phone-box {
    width: auto;
    background: transparent;
    border: none;
    height: 100%;
    font-family: var(--font-accent);
    font-size: var(--fs-cart-price);
    color: var(--text-secondary);
    padding: 0 1rem;
    letter-spacing: 0.1em;
    transition: color 0.3s ease,
        background-color 0.3s ease;
    box-shadow: none;
}

#checkoutForm .phone-input-group .phone-box--country {
    width: 5.3125rem;
    color: var(--text-secondary);
    font-weight: 400;
    text-align: center;
    position: relative;
}

/* Subtile interne Trenner */
.phone-input-group .phone-box--country::after,
.phone-input-group .phone-box--area::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(0, 0, 0, 0.12);
    z-index: 2;
}

#checkoutForm .phone-input-group .phone-box--area {
    width: 5.625rem;
    text-align: center;
    font-weight: 400;
    position: relative;
}

#checkoutForm .phone-input-group .phone-box--number {
    flex: 1;
    width: 100%;
    text-align: left;
    padding-left: 1.5rem;
    font-weight: 400;
}

#checkoutForm .phone-input-group .phone-box:focus {
    outline: none;
    color: var(--black);
    background: transparent;
}

.phone-box::placeholder,
.street-box::placeholder {
    color: var(--text-dimmed);
    font-weight: 200;
    letter-spacing: 0.2em;
}

/* --- Street Row Layout --- */
.street-row {
    display: grid !important;
    grid-template-columns: 3fr 1fr !important;
    gap: 1.5rem !important;
}

@media (max-width: 47.99rem) {
    .street-row {
        gap: 1rem !important;
    }
}

/* --- Trust Badge Styles --- */
.checkout-trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.8rem 0;
    font-family: var(--font-accent);
    font-size: var(--fs-micro);
    color: var(--text-dimmed);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.8;
}

.checkout-trust-badge svg {
    color: var(--gold-dark);
    flex-shrink: 0;
}

/* --- Read-Only Input Overrides --- */
.form-group input.input-readonly {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--text-dimmed);
    cursor: default;
    user-select: none;
}

/* --- Desktop Layout Grid Adjustments --- */
@media (min-width: 48rem) {
    .checkout-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

.field-note {
    font-family: var(--font-accent);
    font-size: var(--fs-form-label);
    color: var(--text-dimmed);
    margin-top: 0.5rem;
}

#checkoutForm .form-group label .optional {
    font-size: var(--fs-form-label);
    font-weight: 500;
    color: var(--text-dimmed);
    opacity: 0.7;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.input-readonly {
    background: white;
    cursor: default;
}

.checkout-checkbox-group {
    margin: 1.5rem 0 0.5rem;
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.4s;
}

.drawer.is-checkout .checkout-checkbox-group {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-family: var(--font-accent);
    font-size: var(--fs-label);
    color: var(--text-secondary);
    user-select: none;
}

/* --- Different Shipping Slide Logic --- */
.diff-shipping-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-premium);
    overflow: hidden;
}

.diff-shipping-container.is-open {
    grid-template-rows: 1fr;
}

.diff-shipping-inner {
    min-height: 0;
    padding-bottom: 1rem;
}

/* Override staggering for fields inside hidden container to ensure they appear smoothly */
.diff-shipping-container .form-group {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity var(--transition-premium),
        transform var(--transition-premium);
}

.diff-shipping-container.is-open .form-group {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.diff-shipping-container.is-open .form-group:nth-child(1) {
    transition-delay: 0.2s;
}

.diff-shipping-container.is-open .form-group:nth-child(2) {
    transition-delay: 0.3s;
}

.diff-shipping-container.is-open .form-group:nth-child(3) {
    transition-delay: 0.4s;
}

.diff-shipping-container.is-open .form-group:nth-child(4) {
    transition-delay: 0.5s;
}

.custom-checkbox input {
    display: none;
}

.checkmark {
    width: 1.375rem;
    height: 1.375rem;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    background: white;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.3s ease;
}

.custom-checkbox input:checked+.checkmark {
    border-color: var(--gold-light);
}

.custom-checkbox input:checked+.checkmark::after {
    content: '';
    position: absolute;
    left: 0.4375rem;
    top: 0.1875rem;
    width: 0.3125rem;
    height: 0.625rem;
    border: solid var(--gold-light);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.order-summary {
    margin-top: 0.5rem;
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.45s;
}

.drawer.is-checkout .order-summary {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.checkout-items-list {
    margin-bottom: 2rem;
}

.checkout-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.36rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.03);
}

.checkout-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.checkout-item__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-family: var(--font-accent);
    font-size: var(--fs-label);
    color: var(--text-secondary);
}

.checkout-item__tile-desc {
    font-family: var(--font-accent);
    font-size: 0.62rem;
    color: var(--text-light);
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin-top: 0.05rem;
    margin-bottom: 0.05rem;
    padding-left: 1.2rem;
    position: relative;
    font-weight: 300;
}

.checkout-item__tile-desc::before {
    content: '\25c6'; /* ◆ */
    position: absolute;
    left: 0.2rem;
    color: var(--gold);
    font-size: 0.5rem;
    opacity: 0.7;
    top: 50%;
    transform: translateY(-50%);
}

.checkout-item__delivery-detail-row {
    font-family: var(--font-accent);
    font-size: 0.65rem;
    color: var(--text-dimmed);
    letter-spacing: 0.03em;
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.15;
    margin-top: 0.05rem;
}

.checkout-item__property + .checkout-item__delivery-detail-row {
    margin-top: 0.6rem;
}

.checkout-item__delivery-qty {
    display: block;
    color: var(--text-dimmed);
    margin-top: 0.15rem;
    font-weight: 300;
}

.checkout-item__delivery-detail-row::before {
    content: '\25c6'; /* ◆ */
    position: absolute;
    left: 0.2rem;
    color: var(--gold);
    font-size: 0.5rem;
    opacity: 0.7;
    top: 0.55rem;
    transform: translateY(-50%);
}

.checkout-item__property {
    font-family: var(--font-accent);
    font-size: 0.65rem;
    color: var(--text-dimmed);
    letter-spacing: 0.03em;
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.15;
    margin-top: 0.05rem;
    font-weight: 300;
}

.checkout-item__property::before {
    content: '\21B3'; /* ↳ */
    position: absolute;
    left: 0.2rem;
    color: var(--gold);
    font-size: 0.65rem;
    opacity: 0.7;
    top: 50%;
    transform: translateY(-55%);
}

.summary-totals {
    border-top: none;
    padding-top: 0;
    margin-bottom: 2rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-accent);
    font-size: var(--fs-label);
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
    font-weight: 300;
}

.checkout-item__main .currency-chf,
.summary-row .currency-chf {
    font-size: 1em;
}

/* .gold-text definiert in 01-globals.css (Single Source of Truth) - hier fuer summary-row um 30% verkleinert */
.summary-row .gold-text {
    font-size: 0.7em !important;
}



/* --- Success Toast --- */
.store-toast {
    position: fixed;
    bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--gold);
    color: var(--white);
    padding: 1rem 2rem;
    font-family: var(--font-accent);
    font-size: var(--fs-toast);
    letter-spacing: 0.2em;
    z-index: 5000;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    max-width: calc(100vw - 2rem);
    text-align: center;
}

.store-toast.is-active {
    transform: translateX(-50%) translateY(0);
}

/* --- Utilities --- */
.btn-reset {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    position: relative;
}

.btn-back {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.5rem;
    transition: color 0.3s ease;
    min-width: 2.75rem;
    /* Touch Standard */
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-back:hover {
    color: var(--gold);
}

.cart-empty {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-muted);
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: var(--fs-body-sm);
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.drawer-open {
    overflow: hidden;
}

/* ==========================================================
   BESTELL-BUTTON · Premium Gold Differenzierung
   
   Der finale Kaufbutton bekommt ein dunkleres Gold + Glow-Puls,
   um sich visuell vom "ÜBERSICHT"-Button abzuheben und
   maximale Conversion-Wirkung zu erzielen.
   ========================================================== */
.btn-checkout,
.btn-order {
    background: var(--gold-dark);
    height: 3.8rem;
    font-size: var(--fs-button);
    letter-spacing: 0.25em;
    white-space: nowrap;
    position: relative;
    /* Override: letter-spacing NICHT transitionieren → Text springt nie */
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
        0 4px 20px rgba(166, 133, 78, 0.3),
        0 0 0 0 rgba(166, 133, 78, 0);
    animation: orderButtonGlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Glow-Puls: Subtile, rhythmische Gold-Aura */
@keyframes orderButtonGlow {

    0%,
    100% {
        box-shadow:
            0 4px 20px rgba(166, 133, 78, 0.3),
            0 0 0 0 rgba(196, 161, 105, 0);
    }

    50% {
        box-shadow:
            0 6px 30px rgba(166, 133, 78, 0.45),
            0 0 20px 2px rgba(196, 161, 105, 0.12);
    }
}

/* Hover: Noch intensiverer Glow */
@media (hover: hover) and (pointer: fine) {

    .btn-checkout:hover,
    .btn-order:hover {
        background: #8f7342;
        box-shadow:
            0 8px 35px rgba(166, 133, 78, 0.5),
            0 0 25px 4px rgba(196, 161, 105, 0.2);
        animation: none;
    }
}

/* Active-State: Kurzes Dimmen für taktiles Feedback */
.btn-checkout:active,
.btn-order:active {
    background: #806838;
    box-shadow:
        0 2px 10px rgba(166, 133, 78, 0.2);
    animation: none;
}

/* Mobile: Bestell-Button – Fluid Typography übernimmt Skalierung,
   nur letter-spacing wird für Mobile feinjustiert */
@media (max-width: 47.99rem) {

    .btn-checkout,
    .btn-order {
        height: 3.8rem;
        font-size: var(--fs-button);
        letter-spacing: 0.15em;
        text-indent: 0.15em;
    }
}

/* ==========================================================
   MOBILE CHECKOUT: Sticky Footer auflösen
   
   Auf Mobile wird der Checkout-Footer (TOTAL + Button) aus
   dem sticky Footer gelöst und in den normalen Scroll-Flow
   integriert. Der gesamte #stageCheckout wird zum scrollbaren
   Container. 350px Breathing Room unter dem Button gibt dem
   Kunden volle Scroll-Freiheit.
   
   Desktop bleibt unverändert (Footer sticky am Boden).
   ========================================================== */
@media (max-width: 47.99rem) {

    /* Stage wird zum Scroll-Container */
    #stageCheckout {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Content ist nicht mehr der Scroll-Container */
    #stageCheckout .checkout-content {
        flex: none;
        overflow-y: visible;
    }

    /* Footer löst sich aus dem Sticky-Dock */
    #stageCheckout .checkout-footer {
        border-top: none;
        padding-top: 0.5rem;
        flex-shrink: unset;
    }

    /* 350px Breathing Room unter dem Button.
       Erlaubt dem Kunden frei nach oben/unten zu scrollen,
       der Button landet elegant im oberen Bildschirm-Drittel. */
    #stageCheckout .checkout-footer::after {
        content: '';
        display: block;
        height: 21.875rem;
    }
}

/* ==========================================================
   PAYMENT METHOD SELECTION · Radio Cards
   
   Elegante Zahlungsmethoden-Auswahl als Radio-Cards.
   Gleicher Expand-Pattern (grid-template-rows: 0fr → 1fr)
   wie bei der abweichenden Lieferadresse.
   ========================================================== */
.payment-method-section {
    margin-top: 0.5rem;
    opacity: 0;
    transform: translate3d(30px, 0, 0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.5s;
}

.drawer.is-checkout .payment-method-section {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.payment-method-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* --- Radio Card: Container --- */
.payment-card {
    display: block;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.payment-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.payment-card__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.25rem;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover */
@media (hover: hover) and (pointer: fine) {
    .payment-card:hover .payment-card__inner {
        border-color: rgba(196, 161, 105, 0.35);
        box-shadow: 0 0 20px rgba(196, 161, 105, 0.08);
    }
}

/* Selected State */
.payment-card input[type="radio"]:checked~.payment-card__inner {
    border-color: rgba(196, 161, 105, 0.5);
    box-shadow: 0 0 25px rgba(196, 161, 105, 0.12),
        inset 0 0 0 0.5px rgba(196, 161, 105, 0.3);
    background: linear-gradient(135deg,
            rgba(196, 161, 105, 0.03) 0%,
            rgba(218, 190, 145, 0.06) 100%);
}

/* --- Custom Radio Circle --- */
.payment-card__radio {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.3s ease;
}

.payment-card__radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--gold);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.payment-card input[type="radio"]:checked~.payment-card__inner .payment-card__radio {
    border-color: var(--gold);
}

.payment-card input[type="radio"]:checked~.payment-card__inner .payment-card__radio::after {
    transform: translate(-50%, -50%) scale(1);
}

/* --- Icon --- */
.payment-card__icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--text-dimmed);
    transition: color 0.3s ease;
}

.payment-card__icon svg {
    width: 100%;
    height: 100%;
}

/* --- Logo-Bilder (PayPal, Google Pay) --- */
.payment-card__icon--logo {
    width: auto;
    height: 1.5rem;
}

.payment-card__logo {
    height: 100%;
    width: auto;
    max-width: 5rem;
    object-fit: contain;
    opacity: 0.45;
    filter: grayscale(60%);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.payment-card input[type="radio"]:checked~.payment-card__inner .payment-card__logo {
    opacity: 0.85;
    filter: grayscale(0%);
}

/* --- TWINT Logo: Invertierung für weißen Hintergrund --- */
.payment-card__logo--invert {
    filter: grayscale(60%) invert(1) brightness(0.4);
}

.payment-card input[type="radio"]:checked~.payment-card__inner .payment-card__logo--invert {
    filter: grayscale(0%) invert(1) brightness(0.35);
    opacity: 0.85;
}

.payment-card input[type="radio"]:checked~.payment-card__inner .payment-card__icon {
    color: var(--gold);
}

/* --- Text --- */
.payment-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.payment-card__title {
    font-family: var(--font-accent);
    font-size: var(--fs-button);
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.payment-card input[type="radio"]:checked~.payment-card__inner .payment-card__title {
    color: var(--gold);
}

.payment-card__desc {
    font-family: var(--font-accent);
    font-size: var(--fs-micro);
    font-weight: 300;
    color: var(--text-dimmed);
    letter-spacing: 0.04em;
    line-height: 1.5;
}

/* --- Expand Containers (Vorauskasse-Info / Kreditkarten-Felder) --- */
.payment-expand-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.payment-expand-container.is-open {
    grid-template-rows: 1fr;
}

.payment-expand-inner {
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
    transition: padding-top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.payment-expand-container.is-open .payment-expand-inner {
    padding-top: 1rem;
}

/* Felder in Expand-Container starten unsichtbar */
.payment-expand-container .form-group {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.payment-expand-container.is-open .form-group {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.payment-expand-container.is-open .form-group:nth-child(1) {
    transition-delay: 0.15s;
}

.payment-expand-container.is-open .form-group:nth-child(2) {
    transition-delay: 0.25s;
}

.payment-expand-container.is-open .form-group:nth-child(3) {
    transition-delay: 0.35s;
}

/* --- Vorauskasse Info-Box --- */
.prepay-info-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.2rem 1.25rem;
    background: linear-gradient(135deg,
            rgba(196, 161, 105, 0.04) 0%,
            rgba(218, 190, 145, 0.08) 100%);
    border: 0.5px solid rgba(196, 161, 105, 0.2);
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.payment-expand-container.is-open .prepay-info-box {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.prepay-info-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gold);
    margin-top: 0.1rem;
}

.prepay-info-icon svg {
    width: 100%;
    height: 100%;
}

.prepay-info-text {
    font-family: var(--font-accent);
    font-size: var(--fs-button);
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* --- CC Row: Ablaufdatum + CVC nebeneinander --- */
.cc-row {
    display: grid;
    grid-template-columns: 1fr 0.6fr;
    gap: 1.5rem;
}

@media (max-width: 22.5rem) {
    .cc-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* --- Akzeptierte Karten --- */
.cc-accepted-cards {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0 0.5rem;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.payment-expand-container.is-open .cc-accepted-cards {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.cc-accepted-label {
    font-family: var(--font-accent);
    font-size: var(--fs-badge);
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--text-dimmed);
}

.cc-brand-logos {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cc-brand-logo {
    height: 3.125rem;
    width: auto;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    filter: grayscale(30%);
}

.cc-brand-logo:hover {
    opacity: 0.8;
    filter: grayscale(0%);
}

/* --- Validation für CC-Felder --- */


/* Utility entfernt – .cart-badge.is-visible ist in 19a-store-products.css definiert.
   Generische .is-visible-Klasse mit !important war zu gefährlich. */

/* --- Edge-to-Edge Mobile Checkout Overrides --- */
@media (max-width: 47.99rem) {

    /* Zahlungsmethoden-Kacheln edge-to-edge */
    .payment-card {
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
    }

    .payment-card__inner {
        border-left: none !important;
        border-right: none !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Vorauskasse Info-Box edge-to-edge */
    .prepay-info-box {
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        border-left: none !important;
        border-right: none !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}