/* Shared visual layer for Dash3 checkout pages. Payment behavior lives in each form. */
body.d3-payment-page {
    --d3-payment-ink: #071b13;
    --d3-payment-green: #10824f;
    --d3-payment-dark: #061a12;
    --d3-payment-lime: #a4ff2f;
    --d3-payment-lime-hover: #b2ff55;
    --d3-payment-muted: #64716a;
    --d3-payment-line: #dbe8df;
    --d3-payment-soft: #f1f7f3;
    background:
        radial-gradient(circle at 8% 10%, rgba(164, 255, 47, .12), transparent 24rem),
        linear-gradient(180deg, #f8fbf9 0%, #edf5f0 100%);
    color: var(--d3-payment-ink);
}

body.d3-payment-page .mt-100 {
    margin-top: clamp(5rem, 8vw, 7rem) !important;
}

body.d3-payment-page h1,
body.d3-payment-page h2,
body.d3-payment-page h3,
body.d3-payment-page h4,
body.d3-payment-page h5,
body.d3-payment-page h6 {
    color: var(--d3-payment-ink);
}

body.d3-payment-page .display-1,
body.d3-payment-page .display-5 {
    font-size: clamp(2.35rem, 5vw, 4.65rem);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .98;
}

body.d3-payment-page .text-success {
    color: var(--d3-payment-green) !important;
}

body.d3-payment-page .text-secondary,
body.d3-payment-page .text-muted {
    color: var(--d3-payment-muted) !important;
}

body.d3-payment-page #order-container,
body.d3-payment-page #order-container_mobile,
body.d3-payment-page .card,
body.d3-payment-page .auction-payment-page-shell > .row > [class*="col-"] > div,
body.d3-payment-page .renewal-recovery {
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--d3-payment-line) !important;
    border-radius: 1.65rem !important;
    box-shadow: 0 1.2rem 3rem rgba(7, 27, 19, .08) !important;
}

body.d3-payment-page #order-container,
body.d3-payment-page #order-container_mobile {
    padding: clamp(1.1rem, 3vw, 2rem);
}

body.d3-payment-page .card {
    overflow: hidden;
}

body.d3-payment-page .card-header,
body.d3-payment-page .bg-success-gradient {
    background: linear-gradient(135deg, #08251a 0%, #0f7047 100%) !important;
    border: 0 !important;
    color: #fff !important;
}

body.d3-payment-page .card-header h1,
body.d3-payment-page .card-header h2,
body.d3-payment-page .card-header h3,
body.d3-payment-page .card-header h4,
body.d3-payment-page .card-header h5,
body.d3-payment-page .card-header h6,
body.d3-payment-page .bg-success-gradient h1,
body.d3-payment-page .bg-success-gradient h2,
body.d3-payment-page .bg-success-gradient h3,
body.d3-payment-page .bg-success-gradient h4,
body.d3-payment-page .bg-success-gradient h5,
body.d3-payment-page .bg-success-gradient h6 {
    color: #fff !important;
}

body.d3-payment-page .card-body {
    padding: clamp(1.25rem, 3vw, 2rem) !important;
}

body.d3-payment-page .bg-light,
body.d3-payment-page [class*="bg-light"] {
    background-color: var(--d3-payment-soft) !important;
}

body.d3-payment-page .form-control,
body.d3-payment-page .form-select,
body.d3-payment-page [id$="-card-element"],
body.d3-payment-page #card-element,
body.d3-payment-page #payment-element,
body.d3-payment-page #auction-payment-element,
body.d3-payment-page #square-card-container {
    min-height: 3.45rem;
    background: #f8fbf9 !important;
    border: 1px solid #ccddd2 !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
    color: var(--d3-payment-ink) !important;
}

body.d3-payment-page .form-control,
body.d3-payment-page .form-select {
    padding: .85rem 1.15rem;
}

/* Stripe Card Elements are single-row controls. Keep a browser or injected
   iframe rule from stretching the secure field to the page height. */
body.d3-payment-page [id$="-card-element"],
body.d3-payment-page #card-element,
.d3-payment-modal [id$="CardElement"],
.d3-payment-modal [id$="card-element"] {
    box-sizing: border-box;
    height: 3.45rem;
    max-height: 3.45rem;
    overflow: hidden;
}

body.d3-payment-page [id$="-card-element"] > iframe,
body.d3-payment-page #card-element > iframe,
.d3-payment-modal [id$="CardElement"] > iframe,
.d3-payment-modal [id$="card-element"] > iframe {
    height: 1.25rem !important;
    max-height: 1.25rem !important;
    min-height: 0 !important;
    width: 100% !important;
}

body.d3-payment-page .form-control:focus,
body.d3-payment-page .form-select:focus,
body.d3-payment-page [id$="-card-element"]:focus-within,
body.d3-payment-page #card-element:focus-within,
body.d3-payment-page #payment-element:focus-within,
body.d3-payment-page #auction-payment-element:focus-within {
    background: #fff !important;
    border-color: var(--d3-payment-green) !important;
    box-shadow: 0 0 0 .22rem rgba(16, 130, 79, .12) !important;
}

body.d3-payment-page .form-label,
body.d3-payment-page label {
    color: var(--d3-payment-ink);
    font-weight: 700;
}

body.d3-payment-page [id$="-saved-section"] {
    background: var(--d3-payment-soft);
    border-color: var(--d3-payment-line) !important;
    border-radius: 1rem !important;
}

body.d3-payment-page [id$="-wallet-button"] {
    min-height: 3.5rem;
    background: var(--d3-payment-dark) !important;
    border: 0 !important;
    font-weight: 800 !important;
}

body.d3-payment-page #payment-button,
body.d3-payment-page .renewal-recovery button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: min(100%, 34rem) !important;
    min-height: 3.8rem;
    padding: .95rem 1.75rem !important;
    background: var(--d3-payment-lime) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 .9rem 2rem rgba(111, 191, 27, .2) !important;
    color: var(--d3-payment-ink) !important;
    font-size: 1.05rem;
    font-weight: 900 !important;
    line-height: 1.15;
    text-decoration: none !important;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.d3-payment-page #payment-button::after {
    content: "\2197";
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1;
}

body.d3-payment-page #payment-button:hover:not(:disabled),
body.d3-payment-page #payment-button:focus-visible:not(:disabled),
body.d3-payment-page .renewal-recovery button[type="submit"]:hover:not(:disabled),
body.d3-payment-page .renewal-recovery button[type="submit"]:focus-visible:not(:disabled) {
    background: var(--d3-payment-lime-hover) !important;
    box-shadow: 0 1.1rem 2.4rem rgba(111, 191, 27, .28) !important;
    transform: translateY(-2px);
}

body.d3-payment-page #payment-button:disabled,
body.d3-payment-page .renewal-recovery button[type="submit"]:disabled {
    background: #dbe6df !important;
    box-shadow: none !important;
    color: #748079 !important;
    opacity: 1;
}

body.d3-payment-page .alert {
    border: 1px solid transparent;
    border-radius: 1rem !important;
    padding: 1rem 1.15rem;
}

body.d3-payment-page .alert-warning {
    background: #fff7d6;
    border-color: #f2d77a;
    color: #604b00;
}

body.d3-payment-page .alert-danger {
    background: #fff0f1;
    border-color: #f2b7bc;
    color: #9c2631;
}

body.d3-payment-page .alert-success {
    background: #e9f8ef;
    border-color: #acdabb;
    color: #0a653d;
}

body.d3-payment-page .border-top {
    border-color: var(--d3-payment-line) !important;
}

body.d3-payment-page img.rounded-3,
body.d3-payment-page img.rounded-4 {
    border: 1px solid var(--d3-payment-line);
    background: #fff;
    padding: .35rem;
}

body.d3-payment-page .bi-lock-fill {
    color: var(--d3-payment-green);
}

.d3-payment-modal {
    --d3-payment-ink: #071b13;
    --d3-payment-green: #10824f;
    --d3-payment-dark: #061a12;
    --d3-payment-lime: #a4ff2f;
    --d3-payment-lime-hover: #b2ff55;
    --d3-payment-line: #dbe8df;
    --d3-payment-soft: #f1f7f3;
}

.d3-payment-modal .modal-content,
.beverage-online-checkout.d3-payment-modal {
    background: #fff;
    border: 1px solid var(--d3-payment-line) !important;
    border-radius: 1.6rem !important;
    box-shadow: 0 1.4rem 3.5rem rgba(7, 27, 19, .18) !important;
    color: var(--d3-payment-ink);
    overflow: hidden;
}

.d3-payment-modal .modal-header {
    background: linear-gradient(135deg, #08251a 0%, #0f7047 100%) !important;
    border: 0 !important;
    color: #fff !important;
    padding: 1.1rem 1.35rem;
}

.d3-payment-modal .modal-title {
    color: #fff !important;
    font-weight: 900 !important;
}

.d3-payment-modal .modal-body {
    padding: 1.4rem !important;
}

.d3-payment-modal .form-control,
.d3-payment-modal .form-select,
.d3-payment-modal [id$="CardElement"],
.d3-payment-modal [id$="card-element"] {
    min-height: 3.35rem;
    background: #f8fbf9 !important;
    border: 1px solid #ccddd2 !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
}

.d3-payment-modal [id$="-saved-section"] {
    background: var(--d3-payment-soft);
    border-color: var(--d3-payment-line) !important;
    border-radius: 1rem !important;
}

.d3-payment-modal [id$="-wallet-button"] {
    min-height: 3.45rem;
    background: var(--d3-payment-dark) !important;
    border: 0 !important;
    font-weight: 800 !important;
}

.d3-payment-modal #roundMulliganPayButton,
.d3-payment-modal #holeMulliganPayButton {
    min-height: 3.35rem;
    padding: .8rem 1.5rem !important;
    background: var(--d3-payment-lime) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--d3-payment-ink) !important;
    font-weight: 900 !important;
    transition: background-color .2s ease, transform .2s ease;
}

.d3-payment-modal #roundMulliganPayButton:hover:not(:disabled),
.d3-payment-modal #holeMulliganPayButton:hover:not(:disabled) {
    background: var(--d3-payment-lime-hover) !important;
    transform: translateY(-1px);
}

@media (max-width: 767.98px) {
    body.d3-payment-page .mt-100 {
        margin-top: 4.5rem !important;
    }

    body.d3-payment-page .display-1,
    body.d3-payment-page .display-5 {
        font-size: clamp(2.1rem, 11vw, 3.2rem);
    }

    body.d3-payment-page #order-container,
    body.d3-payment-page #order-container_mobile,
    body.d3-payment-page .card-body {
        padding: 1.1rem !important;
    }

    body.d3-payment-page #payment-button {
        width: 100% !important;
        min-height: 3.65rem;
    }
}