/* HELPER PAYMENT WINDOW V2
   One purchase window for the whole site: the price and what it buys on the
   left, the choice of payment method on the right. Card payment is the route we
   want people to take, so it owns the large glowing card and Boosty collapses
   into one quiet row beneath it.

   Nothing about payments changes here - the YooKassa request, the Boosty link,
   the Discord check and every element id stay exactly as they were. This file
   only decides geometry and appearance, and it is deliberately unscoped so the
   same window appears wherever a tier is bought.

   Selectors are prefixed with #helperPaymentModal so they outrank the older
   modal rules that still live in base.html without needing !important. */

/* --- overlay ---------------------------------------------------------------- */
#helperPaymentModal {
    z-index: 1200;
    padding: clamp(10px, 2vw, 26px);
    background:
        radial-gradient(circle at 16% 26%, rgba(31,160,255,.20), transparent 34rem),
        radial-gradient(circle at 84% 78%, rgba(255,42,72,.15), transparent 36rem),
        linear-gradient(118deg,
            rgba(4,20,34,.97) 0%,
            rgba(4,12,21,.97) 38%,
            rgba(6,8,13,.98) 54%,
            rgba(16,7,12,.98) 72%,
            rgba(32,7,15,.97) 100%);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
}

/* The giant watermark lettering competed with the price for attention and
   clipped on narrow screens. */
#helperPaymentModal::before,
#helperPaymentModal::after {
    content: none;
    display: none;
}

/* --- card ------------------------------------------------------------------- */
#helperPaymentModal .helper-pay-card {
    width: min(1240px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(102,156,196,.24);
    border-radius: 0;
    clip-path: polygon(
        16px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        0 100%,
        0 16px
    );
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(31,160,255,.11), transparent 52%),
        radial-gradient(90% 80% at 100% 100%, rgba(255,45,75,.07), transparent 55%),
        linear-gradient(160deg, rgba(11,22,35,.97), rgba(5,9,15,.98));
    box-shadow:
        0 40px 110px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,255,255,.05);
    animation: helperPayCardIn .26s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes helperPayCardIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

#helperPaymentModal .helper-pay-card::before { opacity: .05; background-size: 72px 72px; }
#helperPaymentModal .helper-pay-card::after { opacity: .9; }

/* --- head ------------------------------------------------------------------- */
#helperPaymentModal .helper-pay-head {
    flex: 0 0 auto;
    min-height: 0;
    padding: 22px 22px 20px 28px;
    border-bottom: 1px solid rgba(102,156,196,.14);
    background:
        radial-gradient(80% 220% at 0% 50%, rgba(31,160,255,.12), transparent 60%),
        transparent;
}

/* The "safe purchase" tab used to float loose in the middle of the header;
   it now sits flush on the seam at the right edge. */
#helperPaymentModal .helper-pay-head::after {
    right: 26px;
    bottom: -1px;
    padding: .4rem .72rem;
}

#helperPaymentModal .helper-pay-kicker { margin-bottom: 8px; }

#helperPaymentModal .helper-pay-title {
    margin-top: 0;
    max-width: none;
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: clamp(2.1rem, 3.4vw, 3rem);
    line-height: 1;
}

/* --- body ------------------------------------------------------------------- */
#helperPaymentModal .helper-pay-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 372px minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
}

#helperPaymentModal .helper-pay-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    padding: 26px 26px 24px;
    border-right: 1px solid rgba(102,156,196,.14);
    background:
        radial-gradient(130% 55% at 50% 0%, rgba(31,160,255,.09), transparent 70%),
        rgba(255,255,255,.012);
    overflow-y: auto;
}

#helperPaymentModal .helper-pay-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 26px 26px 24px;
}

/* --- price ------------------------------------------------------------------ */
#helperPaymentModal .helper-pay-total small {
    display: block;
    margin-bottom: 6px;
    font: 700 .6rem/1 'Segoe UI', sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(126,208,255,.75);
}

#helperPaymentModal .helper-pay-total b {
    display: block;
    font: 800 3.9rem/.95 'Segoe UI', system-ui, sans-serif;
    letter-spacing: -.035em;
    background: linear-gradient(168deg, #ffffff 0%, #dcefff 42%, #7cc4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 6px 26px rgba(46,168,255,.3));
}

/* --- what it buys ----------------------------------------------------------- */
/* These three lines were a bordered label/value table, which read as paperwork.
   They are what the money buys, so each gets its own lit slab. */
#helperPaymentModal .helper-pay-facts {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#helperPaymentModal .helper-pay-facts > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 0;
    border-left: 2px solid rgba(46,168,255,.45);
    background: linear-gradient(96deg, rgba(46,168,255,.09), rgba(255,255,255,.022) 62%);
}

#helperPaymentModal .helper-pay-facts > div:last-child {
    border-left-color: rgba(60,230,160,.6);
    background: linear-gradient(96deg, rgba(60,230,160,.09), rgba(255,255,255,.022) 62%);
}

#helperPaymentModal .helper-pay-facts dt {
    font: 600 .66rem/1 'Segoe UI', sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(208,238,255,.45);
}

#helperPaymentModal .helper-pay-facts dd {
    margin: 0;
    font: 700 .95rem/1.2 'Segoe UI', sans-serif;
    text-align: right;
    color: #eaf4fb;
}

#helperPaymentModal .helper-pay-facts dd.helper-pay-role-value {
    color: #5cf0b4;
    text-shadow: 0 0 18px rgba(60,230,160,.35);
}

/* --- discord notice --------------------------------------------------------- */
#helperPaymentModal .helper-pay-important {
    min-height: 0;
    gap: 13px;
    padding: 14px 15px;
    align-items: center;
}

#helperPaymentModal .helper-pay-important i {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

#helperPaymentModal .helper-pay-important strong {
    font-size: .82rem;
    letter-spacing: .04em;
}

#helperPaymentModal .helper-pay-important p {
    margin: 5px 0 0;
    font-size: .76rem;
    line-height: 1.5;
    color: rgba(208,238,255,.6);
}

#helperPaymentModal .helper-pay-important-actions { margin-top: 11px; }

/* --- ordered steps ---------------------------------------------------------- */
#helperPaymentModal .helper-pay-steps { margin-top: auto; padding-top: 6px; }

#helperPaymentModal .helper-pay-steps > p {
    margin: 0 0 13px;
    font: 700 .58rem/1 'Segoe UI', sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(208,238,255,.34);
}

#helperPaymentModal .helper-pay-steps ol {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

/* A hairline threads the numbered dots into one route instead of four
   unrelated rows. */
#helperPaymentModal .helper-pay-steps ol::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 10px;
    width: 1px;
    background: linear-gradient(180deg, rgba(46,168,255,.55), rgba(46,168,255,.06));
}

#helperPaymentModal .helper-pay-steps li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: .78rem;
    line-height: 1.45;
    color: rgba(208,238,255,.62);
}

#helperPaymentModal .helper-pay-steps li b {
    position: relative;
    z-index: 1;
    flex: 0 0 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(46,168,255,.45);
    border-radius: 50%;
    background: #0a1622;
    box-shadow: 0 0 12px rgba(46,168,255,.25);
    color: #8fdcff;
    font: 700 .6rem/1 'Segoe UI', sans-serif;
}

#helperPaymentModal .helper-pay-steps code {
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(46,168,255,.13);
    color: #a5e2ff;
    font-size: .73rem;
}

/* --- footer note ------------------------------------------------------------ */
#helperPaymentModal .helper-pay-note {
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 28px;
    border: 0;
    border-top: 1px solid rgba(102,156,196,.14);
    border-radius: 0;
    background: rgba(255,255,255,.012);
    font-size: .74rem;
    line-height: 1.5;
    color: rgba(208,238,255,.44);
}

/* --- checkout --------------------------------------------------------------- */
#helperPaymentModal .helper-pay-checkout-shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#helperPaymentModal .helper-pay-checkout-shell::before { content: none; display: none; }

#helperPaymentModal .helper-pay-checkout-head {
    margin-bottom: 16px;
    padding: 0;
    border: 0;
}

#helperPaymentModal .helper-pay-checkout-kicker {
    letter-spacing: .22em;
    color: rgba(126,208,255,.7);
}

#helperPaymentModal .helper-pay-checkout-head h3 { font-size: 1.15rem; }
#helperPaymentModal .helper-pay-checkout-note { font-size: .66rem; }

/* Card payment is the route we want people to take, so it gets the room and
   Boosty collapses into a single row beneath it. */
#helperPaymentModal .helper-pay-methods {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 13px;
    min-height: 0;
}

#helperPaymentModal .helper-pay-method {
    min-height: 0;
    border-radius: 0;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* --- primary: YooKassa ------------------------------------------------------ */
#helperPaymentModal .helper-pay-method.is-primary {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 26px 22px;
    border: 1px solid rgba(46,168,255,.34);
    clip-path: polygon(
        14px 0,
        100% 0,
        100% calc(100% - 14px),
        calc(100% - 14px) 100%,
        0 100%,
        0 14px
    );
    background:
        radial-gradient(105% 85% at 0% 0%, rgba(46,168,255,.20), transparent 58%),
        radial-gradient(80% 70% at 100% 100%, rgba(31,123,255,.12), transparent 62%),
        linear-gradient(162deg, rgba(13,29,46,.96), rgba(7,15,25,.96));
    box-shadow:
        inset 0 1px 0 rgba(160,220,255,.12),
        0 22px 52px rgba(8,52,104,.3);
}

#helperPaymentModal .helper-pay-method.is-primary:is(:hover, :focus-visible) {
    transform: translateY(-2px);
    border-color: rgba(76,192,255,.62);
    box-shadow:
        inset 0 1px 0 rgba(160,220,255,.18),
        0 26px 62px rgba(10,70,140,.44);
}

#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-top {
    margin-bottom: 20px;
    font-size: .6rem;
}

#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-index {
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(126,208,255,.72);
}

#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-badge {
    padding: .42rem .7rem;
    border: 1px solid rgba(76,192,255,.45);
    background: rgba(46,168,255,.12);
    box-shadow: 0 0 22px rgba(46,168,255,.22);
    color: #b6e6ff;
    letter-spacing: .16em;
}

#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-main {
    gap: 18px;
    margin-bottom: 20px;
    align-items: center;
}

#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-icon {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(145deg, #4ab8ff, #1257d8);
    box-shadow:
        0 12px 30px rgba(20,110,220,.45),
        inset 0 1px 0 rgba(255,255,255,.35);
    color: #fff;
    font: 800 1.6rem/1 'Segoe UI', sans-serif;
}

#helperPaymentModal .helper-pay-method.is-primary strong {
    font-size: 1.55rem;
    letter-spacing: -.01em;
}

#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-main small {
    display: block;
    margin-top: 6px;
    max-width: 46ch;
    font-size: .85rem;
    line-height: 1.5;
    color: rgba(208,238,255,.62);
}

/* The three facts used to be a label/value table too. They are selling points,
   so they read as a checked list and the labels are dropped. */
/* The list takes the card's slack and spreads through it. Left to collapse, the
   button's `margin-top:auto` swept every spare pixel into one dead gap above
   the call to action. */
#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-facts {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 12px;
    margin: 0 0 22px;
}

#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-facts > span {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
}

#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-facts > span::before {
    content: "\2713";
    flex: 0 0 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(76,192,255,.5);
    border-radius: 50%;
    background: rgba(46,168,255,.12);
    box-shadow: 0 0 14px rgba(46,168,255,.28);
    color: #8fdcff;
    font: 700 .7rem/1 'Segoe UI', sans-serif;
}

#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-facts small { display: none; }

#helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-facts b {
    font: 600 .92rem/1.35 'Segoe UI', sans-serif;
    color: #dcecf7;
}

#helperPaymentModal .helper-pay-method.is-primary em {
    margin-top: auto;
    min-height: 60px;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(97deg, #1668e8 0%, #2fa4ff 52%, #52c7ff 100%);
    box-shadow:
        0 16px 38px rgba(20,110,220,.42),
        inset 0 1px 0 rgba(255,255,255,.28);
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-shadow: 0 1px 10px rgba(0,40,90,.5);
    transition: box-shadow .18s ease;
}

#helperPaymentModal .helper-pay-method.is-primary em::after {
    content: "\2192";
    margin-left: .8em;
    font-size: 1.05em;
    letter-spacing: 0;
}

#helperPaymentModal .helper-pay-method.is-primary:hover em {
    box-shadow:
        0 20px 46px rgba(24,126,240,.55),
        inset 0 1px 0 rgba(255,255,255,.34);
}

/* While the payment is being created the script replaces the card's contents
   with just a heading and the button, so the auto margin would strand them at
   opposite ends of a tall card. */
#helperPaymentModal .helper-pay-method.is-primary[data-loading="true"] { justify-content: center; }
#helperPaymentModal .helper-pay-method.is-primary[data-loading="true"] em { margin-top: 24px; }
#helperPaymentModal .helper-pay-method.is-primary[data-loading="true"] em::after { content: none; }

/* Waiting for the payment config, or card payment switched off - the button
   must not look pressable. */
#helperPaymentModal .helper-pay-method.is-primary.is-soon em {
    background: rgba(255,255,255,.06);
    box-shadow: none;
    color: rgba(208,238,255,.5);
    text-shadow: none;
}

#helperPaymentModal .helper-pay-method.is-primary.is-soon em::after { content: none; }

/* --- secondary: Boosty ------------------------------------------------------ */
#helperPaymentModal .helper-pay-method.is-secondary {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    border: 1px solid rgba(102,156,196,.18);
    background: rgba(255,255,255,.022);
}

#helperPaymentModal .helper-pay-method.is-secondary:is(:hover, :focus-visible) {
    transform: translateY(-1px);
    border-color: rgba(255,45,75,.4);
    background: linear-gradient(96deg, rgba(255,45,75,.08), rgba(255,255,255,.02) 60%);
}

#helperPaymentModal .helper-pay-method.is-secondary .helper-pay-method-main { display: contents; }

#helperPaymentModal .helper-pay-method.is-secondary .helper-pay-method-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid rgba(255,45,75,.3);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255,45,75,.22), rgba(255,45,75,.06));
    color: #ff9aa9;
    font: 800 1.1rem/1 'Segoe UI', sans-serif;
}

#helperPaymentModal .helper-pay-method.is-secondary strong {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
}

#helperPaymentModal .helper-pay-method.is-secondary strong i {
    padding: 4px 8px;
    border: 1px solid rgba(102,156,196,.24);
    color: rgba(208,238,255,.4);
    font: 600 .54rem/1 'Segoe UI', sans-serif;
    font-style: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
}

#helperPaymentModal .helper-pay-method.is-secondary .helper-pay-method-main small {
    display: block;
    margin-top: 5px;
    font-size: .76rem;
    line-height: 1.45;
    color: rgba(208,238,255,.45);
}

#helperPaymentModal .helper-pay-method.is-secondary em {
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid rgba(255,45,75,.34);
    border-radius: 2px;
    background: transparent;
    color: #ff8a9c;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

#helperPaymentModal .helper-pay-method.is-secondary:hover em {
    background: rgba(255,45,75,.14);
    color: #ffc0c9;
}

/* --- status ----------------------------------------------------------------- */
#helperPaymentModal .helper-pay-status {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    font-size: .74rem;
}

#helperPaymentModal .helper-pay-status:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
    #helperPaymentModal .helper-pay-card { animation: none; }
    #helperPaymentModal .helper-pay-method { transition: none; }
    #helperPaymentModal .helper-pay-method:is(:hover, :focus-visible) { transform: none; }
}

/* --- narrow ----------------------------------------------------------------- */
@media (max-width: 1120px) {
    #helperPaymentModal .helper-pay-card {
        width: min(760px, calc(100vw - 28px));
    }

    /* Stacked, the two columns are sized by their content and the window itself
       scrolls. Without min-content rows the grid would squeeze them below their
       own height and the blocks would overlap. */
    #helperPaymentModal .helper-pay-body {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: min-content;
        overflow-y: auto;
    }

    #helperPaymentModal .helper-pay-left,
    #helperPaymentModal .helper-pay-right {
        min-height: auto;
        overflow: visible;
    }

    #helperPaymentModal .helper-pay-left {
        border-right: 0;
        border-bottom: 1px solid rgba(102,156,196,.14);
    }

    #helperPaymentModal .helper-pay-methods {
        grid-template-rows: auto auto;
    }

    /* Stacked, everything above the payment choice is dead weight, so the price
       block gets tighter and the steps run in two columns. */
    #helperPaymentModal .helper-pay-left { gap: 16px; }
    #helperPaymentModal .helper-pay-total b { font-size: 2.9rem; }
    #helperPaymentModal .helper-pay-steps { margin-top: 0; }

    #helperPaymentModal .helper-pay-steps ol {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px 22px;
    }

    #helperPaymentModal .helper-pay-steps ol::before { content: none; }
}

@media (max-width: 760px) {
    #helperPaymentModal { padding: 8px; }

    #helperPaymentModal .helper-pay-card {
        width: calc(100vw - 14px);
        max-height: calc(100vh - 14px);
    }

    #helperPaymentModal .helper-pay-title { white-space: normal; }

    #helperPaymentModal .helper-pay-left,
    #helperPaymentModal .helper-pay-right { padding: 18px; }

    #helperPaymentModal .helper-pay-total b { font-size: 2.7rem; }

    /* Two columns of steps do not fit a phone. */
    #helperPaymentModal .helper-pay-steps ol { grid-template-columns: minmax(0, 1fr); }

    #helperPaymentModal .helper-pay-method.is-primary { padding: 18px; }
    #helperPaymentModal .helper-pay-method.is-primary strong { font-size: 1.3rem; }
    #helperPaymentModal .helper-pay-method.is-primary .helper-pay-method-icon {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        font-size: 1.35rem;
    }

    #helperPaymentModal .helper-pay-method.is-secondary {
        grid-template-columns: 46px minmax(0, 1fr);
        row-gap: 13px;
    }

    #helperPaymentModal .helper-pay-method.is-secondary em {
        grid-column: 1 / -1;
        justify-content: center;
    }
}