/* ============================================================
   PAYPAL / DONATION MODULE

   Theme-independent. The PayPal wordmark itself is painted by the theme
   (themes/<theme>/css/override.css, .paypal-gateway-logo) because the image
   lives under that theme's img/ directory.

   This panel used to be a cream box (#fef2da) with black text — PayPal's own
   palette dropped into a dark page. It now uses the site's surface tokens and
   keeps PayPal orange only as an accent, so the flow still reads as PayPal
   without punching a white hole in the layout.
   ============================================================ */

.paypal-gateway-container {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.paypal-gateway-content {
    padding: 22px;
    overflow: auto;
    background: var(--ark-card);
    border: 1px solid var(--ark-border);
    border-top: 3px solid #f79433;   /* PayPal orange, kept as the brand cue */
    border-radius: var(--ark-r-lg);
    box-shadow: var(--ark-inset), var(--ark-shadow-card);
}

.paypal-gateway-logo {
    width: 100%;
    height: 68px;
    margin-bottom: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.paypal-gateway-conversion-rate {
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    color: var(--ark-muted);
    font-size: 15px;
}

.paypal-gateway-form {
    width: 100%;
    margin: 18px auto;
    text-align: center;
}

.paypal-gateway-form div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    color: var(--ark-text);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.paypal-gateway-form input[type=text] {
    width: 84px;
    padding: 8px 10px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: var(--ark-gold-bright);
    background: var(--ark-well);
    border: 1px solid var(--ark-border);
    border-radius: var(--ark-r-sm);
}

.paypal-gateway-form input[type=text]:focus {
    outline: none;
    border-color: var(--ark-gold-a35);
    box-shadow: 0 0 0 3px var(--ark-gold-a12);
}

.paypal-gateway-form #result {
    color: var(--ark-gold-bright);
    font-weight: 700;
}

.paypal-gateway-continue {
    margin: 0 auto;
    text-align: center;
}

/* The submit input previously carried value="" and no styling — an invisible
   button at the end of the donation flow. */
.paypal-gateway-submit {
    min-width: 200px;
    justify-content: center;
    padding: 11px 20px;
    font-size: 14px;
    cursor: pointer;
}