/**
 * Shared Checkout Payment Block.
 *
 * One component, three consumers: cart inline checkout, shipping checkout
 * (step 5), order additional-payment page. Rendered by
 * assets/templates/partials/checkout-payment-block.php (+ checkout.js
 * injections); each mount container carries the `luna payment-block` root
 * classes so the block is self-sufficient on every surface.
 */

.luna.payment-block {
    /* Wise brand chrome — deliberate specials, not themed tokens. */
    --wise-green: #9FE870;
    --wise-green-hover: #8DD95B;
    --wise-green-pressed: #7BC746;
    --wise-navy: #37517E;
}

/* cards */
.luna.payment-block .discount-card {
    padding: var(--space);
    margin-bottom: var(--space);
}

.luna.payment-block .discount-card h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space) 0;
}

/* coupons */
.luna.payment-block .coupons-section {
    margin-bottom: var(--space);
    padding-bottom: var(--space);
    border-bottom: 1px solid var(--border-soft);
}

.luna.payment-block .coupons-list {
    min-height: var(--field-height);
}

.luna.payment-block .coupons-list .loading {
    color: var(--body-text);
    font-size: var(--font-size-sm);
    margin: 0;
}

.luna.payment-block .coupon-item {
    font-size: var(--font-size-sm);
}

.luna.payment-block .coupon-item > .check {
    flex-wrap: wrap;
}

.luna.payment-block .coupon-item .coupon-discount {
    color: var(--accent);
}

.luna.payment-block .coupon-item .coupon-expiry {
    color: var(--body-text);
}

.luna.payment-block .coupon-qty-selector {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-xs);
    padding-left: var(--space-lg);
    color: var(--body-text);
}

.luna.payment-block .coupon-qty-input {
    width: var(--space-2xl);
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--background);
    font-size: inherit;
    font-family: inherit;
    text-align: center;
}

.luna.payment-block .coupon-qty-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.luna.payment-block .coupon-qty-input::-webkit-outer-spin-button,
.luna.payment-block .coupon-qty-input::-webkit-inner-spin-button {
    margin: 0;
}

.luna.payment-block .coupon-qty-input[type=number] {
    -moz-appearance: textfield;
}

.luna.payment-block .coupon-qty-available {
    font-weight: var(--font-weight-medium);
}

.luna.payment-block .coupon-message {
    display: none;
    margin-top: var(--space);
}

/* points */
.luna.payment-block .points-section {
    display: block;
}

.luna.payment-block .points-section--method {
    margin: var(--space-xs) 0 var(--space) 0;
}

.luna.payment-block .points-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space);
    width: 100%;
}

.luna.payment-block .points-type-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--body-text);
    margin: 0;
    min-width: 8ch;
}

/* Beats .luna .field-input geometry (0,2,0) with (0,3,0) — no !important. */
.luna .payment-block .points-input-field {
    width: 100%;
    flex: 1 1 auto;
    padding-right: 14ch;
    padding-top: 0;
    padding-bottom: 0;
    height: var(--field-height);
    line-height: var(--field-height);
}

.luna.payment-block .points-input-field:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.luna.payment-block .points-suffix {
    position: absolute;
    right: var(--space-sm);
    bottom: 0;
    font-size: var(--font-size-sm);
    color: var(--body-text);
    white-space: nowrap;
    pointer-events: none;
    height: var(--field-height);
    display: flex;
    align-items: center;
}

.luna.payment-block .points-input-field::-webkit-outer-spin-button,
.luna.payment-block .points-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.luna.payment-block .points-input-field[type=number] {
    -moz-appearance: textfield;
}

/* payment layout + method rows */
.luna .checkout-payment-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space);
    margin-bottom: var(--space);
}

.luna .checkout-payment-layout > .basic-container {
    width: 100%;
    flex: 1 1 100%;
}

@media (min-width: 768px) {
    .luna .checkout-payment-layout {
        flex-direction: row;
        align-items: flex-start;
    }
}

.luna.payment-block #payment-method-selector {
    gap: var(--space-xs);
}

.luna.payment-block .payment-method-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    flex-wrap: wrap;
    width: 100%;
}

.luna.payment-block .payment-method-row__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.luna.payment-block .payment-method-row__label input {
    margin-right: var(--space-xs);
}

.luna.payment-block .payment-method-row__value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.luna.payment-block .payment-method-row.is-disabled {
    opacity: 0.55;
}

.luna.payment-block .payment-method-row.is-disabled .payment-method-row__label input {
    cursor: not-allowed;
}

/* secondary hint text (method placeholder) — divs miss the .luna p color */
.luna.payment-block .payment-block__hint {
    color: var(--body-text);
    font-size: var(--font-size-sm);
}

/* shipping-checkout payment panel mount */
.luna .payment-block--panel {
    margin-top: var(--space);
}

/* points-only / pay-with-points pads (background was an undefined var before
   the migration, i.e. transparent — kept transparent on purpose). */
.luna.payment-block .payment-block__points-only {
    padding: var(--space-2xl) var(--space);
    border-radius: var(--radius-md);
}

.luna.payment-block .payment-block__points-pad {
    padding: var(--space);
    border-radius: var(--radius-md);
}

.luna.payment-block .payment-block__points-pad--push {
    margin-top: var(--space);
}

.luna.payment-block .payment-block__msg {
    margin-top: var(--space);
}

/* breakdown collapsible */
.luna.payment-block .payment-block__breakdown-head {
    width: 100%;
    border: none;
    padding: var(--space) 0;
    text-align: left;
    cursor: pointer;
    /* buttons do not inherit fonts — without this the head renders in the UA font */
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.luna.payment-block .payment-block__row {
    font-size: var(--font-size-sm);
}

.luna.payment-block .payment-final-total {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.luna.payment-block .payment-block__row--credit {
    color: var(--status-success);
}

.luna .fee-breakdown__row--sub {
    padding-left: var(--space-sm);
}

/* loading overlay */
.luna .checkout-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space);
    z-index: 9999;
    color: white;
}

.luna .loading-spinner {
    width: var(--space-2xl);
    height: var(--space-2xl);
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: payment-spin 0.8s linear infinite;
}

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

/* payment container busy overlay */
.luna #checkout-payment-container {
    position: relative;
}

.luna #checkout-payment-container.checkout-payment-container--loading {
    pointer-events: none;
}

.luna #checkout-payment-container.checkout-payment-container--loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    border-radius: inherit;
    z-index: 2;
}

[data-theme="dark"] .luna #checkout-payment-container.checkout-payment-container--loading::before {
    background: rgba(5, 7, 12, 0.75);
}

.luna #checkout-payment-container.checkout-payment-container--loading::after {
    content: '';
    position: absolute;
    width: var(--space-xl);
    height: var(--space-xl);
    border-radius: var(--radius-pill);
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--accent);
    animation: payment-spin 0.8s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

/* wise fallback (checkout.js-rendered) */
.luna .wise-fallback-container {
    margin-top: var(--space);
    padding: var(--space);
    border: 1.5px solid var(--accent);
    text-align: center;
}

.luna .wise-fallback-container:hover {
    box-shadow: 0 0 0 4px var(--accent-glow), var(--shadow-card-hover);
}

.luna .wise-fallback-text {
    margin: 0 0 var(--space) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.luna .wise-fallback-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space);
    background: var(--gradient-button);
    color: var(--background);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-card);
}

.luna .wise-fallback-button:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
    color: var(--background);
    text-decoration: none;
}

.luna .wise-fallback-button:active {
    transform: translateY(0);
}

/* PayPal / Wise button plates — iframe/vendor geometry, deliberate raw px. */
.luna .dashboard-paypal-button,
.luna .dashboard-wise-button,
.luna #paypal-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 220px;
    min-width: 160px;
    min-height: 42px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    flex-shrink: 0;
}

.luna .dashboard-paypal-button,
.luna #paypal-button-container {
    background-color: var(--surface-strong);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .luna .dashboard-paypal-button,
[data-theme="dark"] .luna #paypal-button-container {
    background-color: var(--surface);
}

@media (max-width: 480px) {
    .luna .dashboard-paypal-button,
    .luna .dashboard-wise-button,
    .luna #paypal-button-container {
        max-width: 100%;
        min-width: 0;
    }
}

/* Wise brand button — vendor chrome, fixed 42px, brand palette. */
.luna .wise-payment-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    background: var(--wise-green);
    color: var(--wise-navy);
    text-decoration: none;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    border: none;
    padding: 0;
}

.luna .wise-payment-button:hover {
    background: var(--wise-green-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(159, 232, 112, 0.4);
    color: var(--wise-navy);
    text-decoration: none;
}

.luna .wise-payment-button:active {
    transform: translateY(0);
    background: var(--wise-green-pressed);
    box-shadow: 0 1px 4px rgba(159, 232, 112, 0.3);
}

.luna .wise-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: var(--font-weight-semibold);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--wise-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .luna .wise-payment-button {
    background: var(--wise-green);
    color: var(--wise-navy);
    border: 1px solid rgba(159, 232, 112, 0.3);
}

[data-theme="dark"] .luna .wise-payment-button:hover {
    background: var(--wise-green-hover);
    box-shadow: 0 3px 8px rgba(159, 232, 112, 0.5);
}