/* HELPER payment window - tier accent V1
   ---------------------------------------------------------------------------
   One purchase window for the whole site (home, /pricing and anywhere a
   [data-helper-buy] button lives). Loaded from base.html right after
   helper-payment-window-v2.css and pricing-payment-applications-style-v1.css.

   The window takes the colour of the plan card that opened it, same palette
   as the /pricing cards:
     Start -> violet, Plus -> cyan, Pro -> pink, Ultra -> gold.
   base.html writes data-tier="start|plus|pro|ultra" on #helperPaymentModal
   when it opens; no other behaviour, ids or state classes change.

   Specificity: rooted at html body #helperPaymentModal.helper-pay-modal, same
   as the applications-style sheet, and loaded after it. */

@property --hpa-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

html body #helperPaymentModal.helper-pay-modal {
    --hpa: #67f6ff;
    --hpa-2: #dfffff;
    --hpa-ink: #071114;
}

html body #helperPaymentModal.helper-pay-modal[data-tier="start"] { --hpa: #b499ff; --hpa-2: #ece4ff; --hpa-ink: #0f0a1c; }
html body #helperPaymentModal.helper-pay-modal[data-tier="plus"]  { --hpa: #67f6ff; --hpa-2: #dfffff; --hpa-ink: #071114; }
html body #helperPaymentModal.helper-pay-modal[data-tier="pro"]   { --hpa: #ff5a78; --hpa-2: #ffd6de; --hpa-ink: #16060a; }
html body #helperPaymentModal.helper-pay-modal[data-tier="ultra"] { --hpa: #ffc85a; --hpa-2: #fff6d8; --hpa-ink: #1a1204; }

/* ----------------------------------------------------------------- card --- */
html body #helperPaymentModal.helper-pay-modal .helper-pay-card {
    border-color: color-mix(in srgb, var(--hpa) 34%, transparent);
    background:
        radial-gradient(circle at 18% -12%, color-mix(in srgb, var(--hpa) 20%, transparent), transparent 30rem),
        radial-gradient(circle at 100% 110%, color-mix(in srgb, var(--hpa) 9%, transparent), transparent 26rem),
        linear-gradient(170deg, rgba(10, 14, 22, .98), rgba(5, 8, 14, .98));
    box-shadow:
        0 42px 120px rgba(0, 0, 0, .6),
        0 0 80px color-mix(in srgb, var(--hpa) 12%, transparent),
        inset 0 1px rgba(255, 255, 255, .04);
}

/* top light line, as on the plan cards */
html body #helperPaymentModal.helper-pay-modal .helper-pay-card::before {
    inset: 0 0 auto 0;
    height: 3px;
    opacity: 1;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, var(--hpa), var(--hpa-2), var(--hpa), transparent);
    background-size: auto;
}

/* running ring around the window, as on the recommended plan card */
html body #helperPaymentModal.helper-pay-modal .helper-pay-card::after {
    opacity: 1;
    padding: 1.5px;
    background: conic-gradient(from var(--hpa-angle), transparent 0 62%, var(--hpa) 76%, var(--hpa-2) 82%, var(--hpa) 88%, transparent 96%);
    animation: hpa-spin 9s linear infinite;
}

@keyframes hpa-spin {
    to { --hpa-angle: 360deg; }
}

/* ----------------------------------------------------------------- head --- */
html body #helperPaymentModal.helper-pay-modal .helper-pay-head {
    background: radial-gradient(70% 200% at 0% 50%, color-mix(in srgb, var(--hpa) 10%, transparent), transparent 62%);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-head::after {
    border: 1px solid color-mix(in srgb, var(--hpa) 30%, transparent);
    background: color-mix(in srgb, var(--hpa) 9%, transparent);
    color: var(--hpa);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-kicker {
    color: var(--hpa-2);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-kicker::before {
    background: var(--hpa);
    box-shadow: 0 0 20px var(--hpa);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-close:hover,
html body #helperPaymentModal.helper-pay-modal .helper-pay-close:focus-visible {
    border-color: color-mix(in srgb, var(--hpa) 45%, transparent);
    background: color-mix(in srgb, var(--hpa) 8%, transparent);
}

/* ------------------------------------------------------------ left side --- */
html body #helperPaymentModal.helper-pay-modal .helper-pay-left {
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--hpa) 7%, transparent), transparent 18rem),
        rgba(255, 255, 255, .012);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-total small,
html body #helperPaymentModal.helper-pay-modal .helper-pay-checkout-kicker,
html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary .helper-pay-method-index {
    color: var(--hpa);
}

/* price: white to tier colour, like "500 ₽" on the card */
html body #helperPaymentModal.helper-pay-modal .helper-pay-total b {
    background: linear-gradient(90deg, #fff 0%, var(--hpa-2) 45%, var(--hpa) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--hpa) 22%, transparent));
}

/* Ultra: the same gold shine as the Ultra card */
html body #helperPaymentModal.helper-pay-modal[data-tier="ultra"] .helper-pay-total b {
    background: linear-gradient(90deg, #fff6d8, #ffc85a 30%, #fff 50%, #ffc85a 70%, #fff6d8);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: hpa-shine 5s linear infinite;
}

@keyframes hpa-shine {
    to { background-position: 200% 50%; }
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-facts > div,
html body #helperPaymentModal.helper-pay-modal .helper-pay-facts > div:last-child,
html body #helperPaymentModal.helper-pay-modal .helper-pay-facts > div:nth-child(even) {
    border: 1px solid rgba(255, 255, 255, .06);
    border-left: 3px solid var(--hpa);
    border-radius: 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--hpa) 9%, transparent), rgba(255, 255, 255, .02) 60%);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-facts dd.helper-pay-role-value {
    color: var(--hpa);
    text-shadow: 0 0 18px color-mix(in srgb, var(--hpa) 35%, transparent);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-steps ol::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--hpa) 55%, transparent), transparent);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-steps li b {
    border-color: color-mix(in srgb, var(--hpa) 45%, transparent);
    background: color-mix(in srgb, var(--hpa) 10%, #0a0d12);
    box-shadow: 0 0 12px color-mix(in srgb, var(--hpa) 22%, transparent);
    color: var(--hpa);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-steps code {
    background: color-mix(in srgb, var(--hpa) 10%, transparent);
    color: var(--hpa);
}

/* ------------------------------------------------------------ checkout --- */
html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary {
    border-color: color-mix(in srgb, var(--hpa) 38%, transparent);
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--hpa) 16%, transparent), transparent 48%),
        radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--hpa) 7%, transparent), transparent 48%),
        rgba(9, 12, 18, .96);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--hpa) 60%, transparent);
    box-shadow: 0 42px 120px rgba(0, 0, 0, .5), 0 0 40px color-mix(in srgb, var(--hpa) 16%, transparent);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary .helper-pay-method-badge {
    border-color: var(--hpa-2);
    background: linear-gradient(100deg, #fff, var(--hpa-2) 32%, var(--hpa) 90%);
    box-shadow: 0 12px 34px color-mix(in srgb, var(--hpa) 24%, transparent);
    color: var(--hpa-ink);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary .helper-pay-method-icon {
    background: linear-gradient(145deg, var(--hpa-2), var(--hpa) 70%);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--hpa) 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
    color: var(--hpa-ink);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary .helper-pay-method-facts > span::before {
    border-color: color-mix(in srgb, var(--hpa) 50%, transparent);
    background: color-mix(in srgb, var(--hpa) 10%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--hpa) 20%, transparent);
    color: var(--hpa);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary em {
    border-color: var(--hpa-2);
    background: linear-gradient(100deg, #fff, var(--hpa-2) 30%, var(--hpa) 85%);
    box-shadow: 0 18px 45px color-mix(in srgb, var(--hpa) 22%, transparent);
    color: var(--hpa-ink);
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary:hover em {
    box-shadow: 0 20px 52px color-mix(in srgb, var(--hpa) 34%, transparent);
}

/* not ready yet or switched off: must still not look pressable */
html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-primary.is-soon em {
    border-color: rgba(255, 255, 255, .085);
    background: rgba(255, 255, 255, .03);
    box-shadow: none;
    color: #697682;
}

html body #helperPaymentModal.helper-pay-modal .helper-pay-method.is-secondary:hover em {
    border-color: color-mix(in srgb, var(--hpa) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    html body #helperPaymentModal.helper-pay-modal .helper-pay-card::after,
    html body #helperPaymentModal.helper-pay-modal[data-tier="ultra"] .helper-pay-total b {
        animation: none;
    }
}