/*
   CeyPay Payment Gateway Styles
   Modern List Layout - Clean & Professional
*/


:root {
    --ceypay-font: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ceypay-bg: linear-gradient(180deg, #ffffff, #f0f4fc);
    --ceypay-text: #0F172A;
    --ceypay-text-muted: #64748b;
    --ceypay-border: #E2E8F0;
    --ceypay-primary: #3b82f6;
    --ceypay-hover: #F8FAFC;
    --ceypay-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --ceypay-radius: 20px;
    --ceypay-testmode: #f59e0b;

    /* Provider row metrics. The dialog is sized in whole rows rather than a
       round number of pixels, so the list always cuts off mid-gap -- a row is
       either fully visible or clearly clipped, never sliced in half. Keep these
       in step with .ceypay-provider-btn and .ceypay-provider-list. */
    --ceypay-row: 68px;
    --ceypay-row-gap: 12px;
    --ceypay-list-pad-top: 12px;
}

/* --- Test Mode Badge --- */
.ceypay-testmode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
    background: #0F172A;
    color: white;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
    line-height: 1;
}

.ceypay-sandbox-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.ceypay-testmode-badge--checkout {
    font-size: 10px;
    padding: 4px 8px;
    margin-left: 8px;
}

.ceypay-testmode-badge--checkout .ceypay-sandbox-icon {
    width: 12px;
    height: 12px;
}

.ceypay-testmode-badge--modal {
    position: relative;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    margin: 0;
    background: #0f172a;
    color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
}

.ceypay-testmode-badge--modal .ceypay-sandbox-icon {
    width: 12px;
    height: 12px;
}

/* --- Modal Core --- */
.ceypay-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    font-family: var(--ceypay-font);
}

.ceypay-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.ceypay-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}

.ceypay-modal__dialog {
    position: relative;
    width: 100%;
    /* 420 rather than 380: the header is a 36px / 1fr / 36px grid with 16px
       gaps and 24px padding, so a 380px dialog left the centre column only
       228px -- not enough for a title plus the Sandbox badge on one line, so
       the heading wrapped. 420px gives it 268px. */
    max-width: 420px;
    /* Height follows the content so the QR view can be shorter than the
       provider list, and the provider list itself is capped to a whole number
       of rows (see #ceypay-view-provider) rather than growing to fit all six.
       A dialog tall enough for every provider stretched the header, list and
       footer apart and lost the balance of the original fixed-height card.

       min-height is clamped by the same viewport cap as max-height: on a
       landscape phone 90dvh is ~350px, and an unclamped 480px floor would
       otherwise win and push the dialog off both ends of the screen. */
    height: auto;
    min-height: min(480px, 90dvh);
    max-height: 90dvh;
    background: var(--ceypay-bg);
    border-radius: var(--ceypay-radius);
    box-shadow: var(--ceypay-shadow);
    padding: 0;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Height morph between the provider list and the QR view.
   The overshoot in the curve (y2 > 1) is what gives it the elastic, magnetic
   settle rather than a linear stretch. Applied only while morphing, so it
   never fights the open animation or a viewport resize -- morphDialogHeight()
   in ceypay-checkout.js adds the class, sets an explicit height, then hands
   control back to `auto`. */
.ceypay-modal__dialog.is-morphing {
    transition: height 0.52s cubic-bezier(0.34, 1.32, 0.44, 1);
    will-change: height;
}

/* --- View Transition Animations (GPU Optimized) --- */
#ceypay-view-provider,
#ceypay-view-qr {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
}

/* Slide out to left (when going to QR) */
#ceypay-view-provider.ceypay-view--exit {
    animation: ceypay-slide-out-left 0.25s ease-out forwards;
}

/* Slide in from right (QR appearing) */
#ceypay-view-qr.ceypay-view--enter {
    animation: ceypay-slide-in-right 0.25s ease-out forwards;
}

/* Slide out to right (when going back to providers) */
#ceypay-view-qr.ceypay-view--exit {
    animation: ceypay-slide-out-right 0.25s ease-out forwards;
}

/* Slide in from left (providers reappearing) */
#ceypay-view-provider.ceypay-view--enter {
    animation: ceypay-slide-in-left 0.25s ease-out forwards;
}

@keyframes ceypay-slide-out-left {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }
}

@keyframes ceypay-slide-in-right {
    0% {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ceypay-slide-out-right {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(20px, 0, 0);
    }
}

@keyframes ceypay-slide-in-left {
    0% {
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    #ceypay-view-provider,
    #ceypay-view-qr {
        animation-duration: 0.15s !important;
    }

    /* Belt and braces: morphDialogHeight() already skips the animation when
       reduced motion is requested, but if it ever runs, do not animate. */
    .ceypay-modal__dialog.is-morphing {
        transition: none !important;
    }
}

.ceypay-modal.is-visible .ceypay-modal__dialog {
    transform: translateY(0);
}

/* The mobile drawer lives at the end of this file, after every rule it has to
   override. */

.ceypay-modal__close {
    width: 36px;
    height: 36px;
    border: none;
    background: #F1F3F5;
    border-radius: 50%;
    cursor: pointer;
    color: var(--ceypay-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    grid-column: 3;
    grid-row: 1;
}

.ceypay-modal__close:focus {
    outline: none;
}

.ceypay-modal__close:hover {
    background: #e2eaf2;
}

/* --- Header --- */
.ceypay-modal__header {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    gap: 16px;
    align-items: center;
    padding: 20px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ceypay-border);
    position: relative; /* Ensure absolute children are positioned relative to header */
}

.ceypay-back-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #F1F3F5;
    border-radius: 50%;
    cursor: pointer;
    color: var(--ceypay-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    grid-column: 1;
    grid-row: 1;
}

.ceypay-back-btn:hover {
    background: #e2eaf2;
}

.ceypay-back-btn:focus {
    outline: none;
}

.ceypay-help-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #F1F3F5;
    border-radius: 50%;
    cursor: pointer;
    color: var(--ceypay-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    grid-column: 1;
    grid-row: 1;
}

.ceypay-help-btn:hover {
    background: #e2eaf2;
}

.ceypay-help-btn:focus {
    outline: none;
}

/* Hide help button when back button is visible (QR page) */
.ceypay-back-btn:not([style*="display: none"]) ~ .ceypay-header-center ~ .ceypay-help-btn {
    display: none !important;
}

.ceypay-header-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    justify-self: center;
    grid-column: 2;
    grid-row: 1;
    z-index: 5;
    gap: 12px;
}

.ceypay-modal__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ceypay-text);
    margin: 0;
    line-height: 1.2;
    text-align: center;
    /* Keep the heading on one line. Provider titles ("Pay with Binance") sit
       beside the Sandbox badge, and wrapping made the header two lines tall. */
    white-space: nowrap;
}

/* Removed duplicate - see line 44 for the actual badge styles */

/* Hide old pill style */
.ceypay-pill {
    display: none;
}

.ceypay-modal__subtitle {
    font-size: 13px;
    color: var(--ceypay-text-muted);
    margin: 0;
    padding: 16px 24px 8px 24px;
    line-height: 1.3;
    text-align: center;
    font-weight: 400;
}

.ceypay-alert-box {
    margin: 0 24px 4px 24px; /* Reduced bottom margin */
    padding: 8px 12px;
    background-color: #fff7ed; /* Orange 50 */
    border: 1px solid rgba(249, 115, 22, 0.2); /* Subtle orange border */
    border-radius: 6px;
    color: #c2410c; /* Orange 700 */
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.ceypay-alert-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
}

.ceypay-error-message {
    margin: 0 24px 16px 24px;
    padding: 12px 16px;
    background-color: #FEF2F2; /* Red 50 */
    border: 1px solid #FCA5A5; /* Red 300 */
    border-radius: 8px;
    color: #991B1B; /* Red 800 */
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.05);
    animation: ceypay-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: top center;
}

.ceypay-error-message.is-hiding {
    animation: ceypay-fade-out 0.3s ease-in forwards;
}

@keyframes ceypay-slide-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ceypay-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-5px); }
}

.ceypay-alert-icon {
    flex-shrink: 0;
    color: #DC2626; /* Red 600 */
    margin-top: 1px;
}

.ceypay-amount-highlight {
    color: var(--ceypay-text);
    font-weight: 700;
    font-size: 1.1em;
}

.ceypay-amount-secondary {
    color: var(--ceypay-text-muted);
    font-size: 0.9em;
    font-weight: 500;
}

.ceypay-qr-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--ceypay-text);
    width: 100%;
    text-align: center;
}

/* --- Tooltip --- */
.ceypay-tooltip {
    position: fixed;
    background: #ffffff;
    color: var(--ceypay-text-muted);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-family: var(--ceypay-font);
    font-weight: 400;
    line-height: 1.5;
    z-index: 100000;
    /* Inert until shown, and inert again while fading out, so an invisible
       tooltip can never swallow a click meant for what is underneath it. */
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #E2E8F0;
    text-align: center;
}

.ceypay-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Only a tooltip you are meant to reach into takes the pointer -- currently
   just the help tooltip, which carries a mailto link. The version tooltip on
   the footer logo stays inert on purpose: it overlaps the Terms and Privacy
   links, and capturing the pointer there would block clicks on them. */
.ceypay-tooltip.is-interactive.is-visible {
    pointer-events: auto;
}

.ceypay-tooltip a {
    color: var(--ceypay-primary);
    text-decoration: none;
    font-weight: 400;
}

.ceypay-tooltip a:hover {
    text-decoration: underline;
}

/* Arrow — single rotated square, flush with tooltip body.
   Centred by default, but showTooltip() overrides --ceypay-tooltip-arrow with
   the trigger's centre whenever it has had to shift the tooltip sideways to
   keep it on screen. Without that the arrow keeps pointing at the middle of
   the tooltip, which after a clamp is no longer where the button is. */
.ceypay-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: var(--ceypay-tooltip-arrow, 50%);
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-right: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

/* Flipped below the trigger when there is no room above (landscape phones):
   the arrow moves to the top edge and points the other way. */
.ceypay-tooltip.is-below::after {
    bottom: auto;
    top: -5px;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid #E2E8F0;
    border-top: 1px solid #E2E8F0;
}

/* --- Provider List --- */
.ceypay-modal__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0 24px;
    /* Always reserve the scrollbar track. Without this the bar appears and
       disappears as the dialog height animates between views, changing the
       content width by ~11px mid-transition and shifting every row sideways.
       Browsers without support simply ignore it and behave as before. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
    mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.ceypay-modal__body::-webkit-scrollbar {
    width: 4px;
}

.ceypay-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.ceypay-modal__body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

/* Cap the provider list at five rows and let the sixth scroll.
   Sizing the dialog to fit all six made it 685px tall, which on a laptop is
   most of the window and reads as a page rather than a dialog. Five rows puts
   the dialog back at ~600px -- the proportion the card was designed around --
   and the body's fade mask leaves the sixth row half-visible at the bottom
   edge, which is what tells you the list scrolls.

   Applied to the provider view alone: the QR view is a single centred block
   and must keep sizing itself, or the dialog would stay list-height when the
   morph runs. */
#ceypay-view-provider {
    max-height: calc(5 * var(--ceypay-row) + 5 * var(--ceypay-row-gap) + var(--ceypay-list-pad-top));
}

/* QR view centering */
#ceypay-view-qr {
    justify-content: center;
    align-items: center;
    /* Breathing room around the column. The QR code, the amount, the status
       line and the buttons are spaced only by their own 8-12px margins, so
       without this they sit flush against the header and the buttons. The
       original fixed-height card hid that: it was always taller than this
       view needed, and the centred flex body spread the leftover height out.
       Now that the dialog sizes itself, the spacing has to be stated. */
    padding: 24px 0 8px;
    /* No fade here. The mask on .ceypay-modal__body is a scroll affordance for
       the provider list -- on this view, which never scrolls, it just washes
       out the top edge of the QR code and the bottom of the status line. */
    mask-image: none;
    -webkit-mask-image: none;
}

.ceypay-provider-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    padding-top: 12px; /* Reduced top padding */
    padding-bottom: 20px;
}

.ceypay-provider-btn {
    display: flex;
    align-items: center;
    width: 100%;
    align-self: stretch;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--ceypay-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    position: relative;
    min-height: 68px;
    box-sizing: border-box;
}

.ceypay-provider-btn:hover {
    border-color: var(--ceypay-primary);
    background: #F8FAFC;
}

.ceypay-provider-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    margin-right: 12px;
    flex-shrink: 0;
}

.ceypay-provider-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ceypay-provider-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ceypay-provider-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ceypay-text);
    line-height: 1.3;
}

.ceypay-provider-desc {
    font-size: 12px;
    color: var(--ceypay-text-muted);
    line-height: 1.3;
}

.ceypay-chevron {
    color: #cbd5e1;
    transition: transform 0.2s ease, color 0.2s ease;
    margin-left: auto;
}

.ceypay-provider-btn:hover .ceypay-chevron {
    color: var(--ceypay-primary);
    transform: translateX(2px);
}

/* --- Disabled State (Coming Soon) --- */
.ceypay-provider-btn--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.ceypay-provider-btn--disabled:hover {
    border-color: var(--ceypay-border);
    background: #ffffff;
    transform: none;
    box-shadow: none;
}

.ceypay-badge {
    padding: 3px 8px;
    background: #E2E8F0;
    color: #64748b;
    font-size: 9px;
    font-weight: 500;
    border-radius: 20px;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

/* --- Loading State --- */
.ceypay-provider-btn.is-loading {
    pointer-events: none;
    opacity: 0.8;
}

.ceypay-provider-btn.is-loading .ceypay-chevron {
    display: none;
}

.ceypay-provider-btn.is-loading::after {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--ceypay-primary);
    border-radius: 50%;
    animation: ceypay-spin 0.8s linear infinite;
    position: absolute;
    right: 16px;
}

@keyframes ceypay-spin {
    to { transform: rotate(360deg); }
}

/* --- QR View --- */
.ceypay-qr {
    position: relative;
    background: #F8FAFC;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #E2E8F0;
}

.ceypay-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

.ceypay-qr__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    padding: 7px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 8;
    display: none;
    align-items: center;
    justify-content: center;
}

.ceypay-qr__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ceypay-qr__loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    z-index: 5;
    border-radius: 12px;
}

.ceypay-qr__loading .spinner {
    width: 40px;
    height: 40px;
    border-width: 3px;
    border-color: #f1f5f9;
    border-top-color: var(--ceypay-primary);
}

.ceypay-qr__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-radius: 12px;
    z-index: 10;
}

.ceypay-qr.is-success .ceypay-qr__overlay {
    opacity: 1;
    visibility: visible;
}

.ceypay-check {
    width: 64px;
    height: 64px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: ceypay-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ceypay-check svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes ceypay-pop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.ceypay-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--ceypay-text-muted);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

.ceypay-status.is-hidden {
    display: none;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--ceypay-primary);
    border-radius: 50%;
    animation: ceypay-spin 0.8s linear infinite;
    display: inline-block;
}

.ceypay-ripple {
    display: inline-block;
    position: relative;
    width: 8px;
    height: 8px;
    background: var(--ceypay-primary);
    border-radius: 50%;
    vertical-align: middle;
}

/* shared ripple base */
.ceypay-ripple::before,
.ceypay-ripple::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: ceypay-ripple 2s infinite cubic-bezier(0, 0.2, 0.8, 1);
}

.ceypay-ripple::after {
    animation-delay: -1s;
}

@keyframes ceypay-ripple {
    0% {
        box-shadow: 0 0 0 0 var(--ceypay-primary);
        opacity: 0.8;
    }
    100% {
        box-shadow: 0 0 0 12px var(--ceypay-primary);
        opacity: 0;
    }
}

/* User Review State */
.ceypay-status.is-user-review {
    color: #d97706; /* Amber 600 */
}

.ceypay-ripple--review {
    background: #f59e0b; /* Amber 500 */
}

.ceypay-ripple--review::before,
.ceypay-ripple--review::after {
    animation: ceypay-ripple-review 2s infinite cubic-bezier(0, 0.2, 0.8, 1);
}

.ceypay-ripple--review::after {
    animation-delay: -1s;
}

@keyframes ceypay-ripple-review {
    0% {
        box-shadow: 0 0 0 0 #f59e0b;
        opacity: 0.8;
    }
    100% {
        box-shadow: 0 0 0 12px #f59e0b;
        opacity: 0;
    }
}

/* Expired State */
.ceypay-status.is-expired {
    color: #dc2626; /* Red 600 */
}

.ceypay-qr.is-expired {
    position: relative;
}

.ceypay-qr.is-expired::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    z-index: 5;
}

.ceypay-qr.is-expired::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: #dc2626;
    border-radius: 50%;
    z-index: 6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

/* --- Actions --- */
.ceypay-modal__actions {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 24px 12px 24px !important;
    background: transparent !important;
}

.ceypay-modal__actions[style*="display: none"] {
    display: none !important;
}

.ceypay-modal__actions:not([style*="display: none"]) {
    display: flex !important;
}

.ceypay-btn {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
    line-height: 1.4 !important;
    font-family: var(--ceypay-font) !important;
}

.ceypay-btn--primary {
    background: var(--ceypay-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
}

.ceypay-btn--primary:hover {
    background: #2563eb !important;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3) !important;
}

.ceypay-btn--ghost {
    background: #ffffff !important;
    color: var(--ceypay-text) !important;
    border: 1px solid var(--ceypay-border) !important;
    box-shadow: none !important;
}

.ceypay-btn--ghost:hover {
    background: var(--ceypay-hover) !important;
}

/* --- Modal Footer --- */
.ceypay-modal__footer {
    padding: 12px 24px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border-top: 1px solid var(--ceypay-border) !important;
}

.ceypay-footer-text {
    margin: 0 0 2px 0 !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    line-height: 1.3 !important;
    font-family: var(--ceypay-font) !important;
}

.ceypay-footer-link {
    color: var(--ceypay-primary) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.ceypay-footer-link:hover {
    text-decoration: none !important;
    opacity: 0.8 !important;
}

.ceypay-footer-powered {
    margin: 0 !important;
    font-size: 10px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
    font-family: var(--ceypay-font) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.ceypay-footer-brand {
    color: #64748b !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}

.ceypay-footer-version {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    font-size: 9px !important;
    letter-spacing: 0.2px !important;
}

.ceypay-footer-logo {
    height: 11px !important;
    width: auto !important;
    opacity: 0.8 !important;
    display: block !important;
}

.ceypay-footer-brand {
    cursor: default !important;
}

/* --- Mobile: bottom drawer ---
   On a phone held upright a centred 420px card wastes the screen and puts the
   action row out of the thumb's reach. Below this breakpoint the same dialog is
   re-anchored to the bottom edge and slides up as a drawer, matching the
   pattern used by other WooCommerce crypto gateways (DePay et al).

   Portrait-only and 600px, so a landscape phone and a small desktop window --
   both short but wide, where a full-width drawer would be worse than the card
   -- keep the centred dialog. Nothing here changes the markup: the drawer is
   the same dialog with different geometry, so every view, the height morph and
   the close handlers carry over untouched.

   Kept at the end of the file deliberately. These selectors are no more
   specific than the desktop ones they override (#ceypay-view-provider against
   #ceypay-view-provider), so source order is what decides -- declared any
   earlier, the desktop row cap further down would win and the drawer would
   quietly show five rows instead of four. */
@media (orientation: portrait) and (max-width: 600px) {
    .ceypay-modal {
        align-items: flex-end;
    }

    .ceypay-modal__dialog {
        width: 100%;
        max-width: none;
        margin: 0;
        /* The bottom corners meet the screen edge, so only the top pair is
           rounded. */
        border-radius: var(--ceypay-radius) var(--ceypay-radius) 0 0;
        /* A floor so a sparse state -- an error, a view still loading -- cannot
           collapse the drawer into a sliver at the bottom of the screen. It is
           below what either view actually needs, so in normal use the content
           decides the height. (Spacing inside the QR view comes from that
           view's own padding, not from slack left over here.) */
        min-height: min(480px, 92dvh);
        max-height: 92dvh;
        /* Off-screen rather than the 20px nudge the centred card uses, so it
           enters from the edge it is anchored to. */
        transform: translateY(100%);
    }

    .ceypay-modal.is-visible .ceypay-modal__dialog {
        transform: translateY(0);
    }

    /* Four rows rather than the five the desktop card shows. A drawer is
       measured against the height of the phone, not the dialog: six rows came
       to ~80% of the screen, which stops reading as a sheet over the checkout
       and starts reading as a new page. Four leaves the page visible above it
       and still scrolls to the rest. */
    #ceypay-view-provider {
        max-height: calc(4 * var(--ceypay-row) + 4 * var(--ceypay-row-gap) + var(--ceypay-list-pad-top));
    }

    /* Clear the home indicator on iOS, where the drawer runs to the very
       bottom of the screen. */
    .ceypay-modal__footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
}

/* A drawer travels the full height of itself on open, which is a lot of motion
   for anyone who has asked for less of it. Fade it in place instead. Declared
   after the drawer block so it wins; the reduced-motion rules further up cannot
   reach these. */
@media (orientation: portrait) and (max-width: 600px) and (prefers-reduced-motion: reduce) {
    .ceypay-modal__dialog {
        transform: none;
        transition: none;
    }
}

/* --- End of Styles --- */