/* ============================================================
   THEME VARIABLES
   ============================================================ */

:root {
    /* === Branding === */
    --pay-header-bg: #F3F8FF;
    --pay-button-bg: #0D7177;
    --pay-button-hover: #11858C; /* slightly lighter */
    --pay-button-text: #ffffff;
    --pay-accent: #011831;
    /* === Typography === */
    --pay-font-family: 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* === Core UI Colours === */
    --pay-bg: #f6f7fb;
    --pay-card-bg: #ffffff;
    --pay-border: rgba(20, 20, 40, 0.12);
    --pay-text: #1c1f2a;
    --pay-muted: rgba(28, 31, 42, 0.62);
    --pay-focus: rgba(13, 113, 119, 0.25);
}

/* ============================================================
   LAYOUT
   ============================================================ */

html, body {
    height: 100%;
}

body {
    background: var(--pay-bg);
    color: var(--pay-text);
    font-family: var(--pay-font-family);
}

.pay-shell {
    min-height: 100%;
    display: flex;
    align-items: center;
    padding: 3rem 0;
}

.pay-panel {
    background: var(--pay-card-bg);
    border: 1px solid var(--pay-border);
    border-radius: 18px;
    box-shadow: var(--pay-shadow-lg);
    overflow: hidden;
}

/* ============================================================
   HEADER
   ============================================================ */

.pay-header {
    background: var(--pay-header-bg);
    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
    border-bottom: 1px solid var(--pay-border);
}

.pay-header-logo {
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;
}

.pay-logo {
    height: 44px;
    width: auto;
}

.pay-header-text {
    text-align: center;
}

.pay-h1 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 650;
    color: var(--pay-accent);
    letter-spacing: 0.2px;
}

.pay-hint {
    margin: .45rem 0 0 0;
    font-size: .95rem;
    color: var(--pay-muted);
}

/* ============================================================
   BODY CONTENT
   ============================================================ */

.pay-body {
    padding: 1.5rem;
}

.pay-amount {
    text-align: center;
    padding: .75rem 0 1.25rem 0;
}

    .pay-amount .label {
        color: var(--pay-muted);
        font-size: .82rem;
    }

    .pay-amount .value {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 0.2px;
        color: var(--pay-accent);
    }

    .pay-amount .ref {
        margin-top: .25rem;
        color: var(--pay-muted);
        font-size: .82rem;
    }

/* ============================================================
   FORM FIELDS
   ============================================================ */

.pay-field {
    margin-bottom: 0.9rem;
}

.pay-label {
    display: block;
    font-size: .78rem;
    color: var(--pay-muted);
    margin-bottom: .35rem;
}

.pay-input {
    border: 1px solid var(--pay-border);
    border-radius: 12px;
    padding: .78rem .9rem;
    font-size: 1rem;
    background: #fff;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .pay-input:focus {
        border-color: var(--pay-button-bg);
        box-shadow: 0 0 0 .25rem var(--pay-focus);
    }

.pay-input-lg {
    padding: 0.95rem 1rem;
    font-size: 1.05rem;
    letter-spacing: 0.6px;
}

.pay-row {
    display: flex;
    gap: .65rem;
}

    .pay-row > div {
        flex: 1;
    }

.pay-error {
    font-size: .78rem;
}

.pay-help {
    color: var(--pay-muted);
    font-size: .78rem;
    margin-top: .25rem;
}

/* ============================================================
   BUTTON
   ============================================================ */

.pay-btn {
    border-radius: 12px;
    padding: .95rem 1rem;
    font-weight: 600;
    letter-spacing: .2px;
    background: var(--pay-button-bg);
    border: none;
    color: var(--pay-button-text);
    transition: background .2s ease, transform .05s ease;
}

    .pay-btn:hover {
        background: var(--pay-button-hover);
    }

    .pay-btn:active {
        transform: translateY(1px);
    }

    .pay-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* ============================================================
   CARD BRAND ICON
   ============================================================ */

.pay-input-group .input-group-text.pay-cardbrand {
    background: #fff;
    border: 1px solid var(--pay-border);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    padding: .55rem .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
}

.pay-input-group .form-control.pay-input {
    border-left: 0;
    border-radius: 0 12px 12px 0;
}

.pay-cardbrand-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--pay-accent);
    display: inline-block;
}

/* ============================================================
   FOOTER
   ============================================================ */

.pay-footer {
    text-align: center;
    color: var(--pay-muted);
    font-size: .8rem;
    padding: 1rem 0 0 0;
}

/* ============================================================
   LOGO
   ============================================================ */

.pay-logo {
    height: 42px;
    width: auto;
}

.pay-header {
    background: var(--pay-header-bg);
    padding: 1.25rem 1.5rem 1rem 1.5rem;
}

/* ================================
   STEP INDICATOR (3 steps)
   ================================ */

.pay-steps {
    margin-top: 1.15rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    align-items: center;
}

.pay-step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem .5rem;
    border: 1px solid var(--pay-border);
    border-radius: 999px;
    background: rgba(255,255,255,.6);
}

.pay-step-label {
    font-size: .83rem;
    font-weight: 600;
    color: var(--pay-muted);
    white-space: nowrap;
}

.pay-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(1, 24, 49, 0.18);
}

/* Active step */
.pay-step.is-active {
    border-color: rgba(13, 113, 119, 0.35);
    background: rgba(13, 113, 119, 0.08);
}

    .pay-step.is-active .pay-step-dot {
        background: var(--pay-button-bg);
    }

    .pay-step.is-active .pay-step-label {
        color: var(--pay-accent);
    }

/* Done step */
.pay-step.is-done {
    border-color: rgba(13, 113, 119, 0.25);
    background: rgba(13, 113, 119, 0.06);
}

    .pay-step.is-done .pay-step-dot {
        background: var(--pay-button-bg);
        box-shadow: 0 0 0 3px rgba(13, 113, 119, 0.12);
    }

    .pay-step.is-done .pay-step-label {
        color: var(--pay-accent);
    }

/* ================================
   MOBILE REFINEMENTS
   ================================ */

@media (max-width: 420px) {
    .pay-header {
        padding: 1.25rem 1.1rem 1.1rem 1.1rem;
    }

    .pay-logo {
        height: 40px;
    }

    .pay-h1 {
        font-size: 1.35rem;
    }

    .pay-steps {
        gap: .5rem;
    }

    .pay-step {
        padding: .5rem .35rem;
    }

    .pay-step-label {
        font-size: .78rem;
    }
}

/* ================================
   PAY GAUGE (Arrears ring)
   ================================ */

:root {
    /* Optional extra tokens (override per customer if you like) */
    --pay-gauge-track: rgba(1, 24, 49, 0.10);
    --pay-gauge-fill: var(--pay-accent); /* dark ring like screenshot */
    --pay-gauge-center-bg: rgba(1, 24, 49, 0.08);
}

.pay-gauge {
    text-align: center;
    padding: 0.75rem 0.5rem;
}

.pay-gauge-title {
    font-weight: 650;
    color: var(--pay-accent);
    margin-bottom: 0.25rem;
}

.pay-gauge-amount {
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--pay-accent);
    margin-bottom: 0.75rem;
}

.pay-gauge-ring {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
}

.pay-gauge-svg {
    width: 100%;
    height: 100%;
}

.pay-gauge-track {
    stroke: var(--pay-gauge-track);
    /* same arc as progress; rotate so arc starts bottom-left */
    stroke-dasharray: 216 999; /* JS sets progress precisely; track can be static */
    stroke-dashoffset: 216;
    transform: rotate(135deg);
    transform-origin: 60px 60px;
}

.pay-gauge-progress {
    stroke: var(--pay-gauge-fill);
    transition: stroke-dashoffset 200ms ease;
}

.pay-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translateY(-10px);
}

    .pay-gauge-center::before {
        content: "";
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: var(--pay-gauge-center-bg);
        position: absolute;
        z-index: -1;
    }

.pay-gauge-center-label {
    font-size: 0.85rem;
    color: var(--pay-muted);
    margin-bottom: 0.25rem;
}

.pay-gauge-center-value {
    font-size: 1.35rem;
    font-weight: 750;
    color: var(--pay-accent);
}

.pay-gauge-remaining {
    margin-top: 0.9rem;
}

.pay-gauge-remaining-value {
    font-size: 1.1rem;
    font-weight: 750;
    color: var(--pay-accent);
}

.pay-gauge-remaining-label {
    margin-top: 0.1rem;
    color: var(--pay-muted);
    font-size: 0.95rem;
}

/* Mobile: shrink ring */
@media (max-width: 420px) {
    .pay-gauge-ring {
        width: 190px;
        height: 190px;
    }

    .pay-gauge-center::before {
        width: 130px;
        height: 130px;
    }
}

/* ================================
   APPLE PAY
   ================================ */

.apple-pay-button {
    -webkit-appearance: -apple-pay-button;
    height: 44px;
    width: 100%;
}

.apple-pay-button-black {
    -apple-pay-button-style: black;
}

.apple-pay-button-white {
    -apple-pay-button-style: white;
}

.apple-pay-button-white-with-line {
    -apple-pay-button-style: white-outline;
}