/* ── Public payment link (/pay/:token) ────────────────────────────────────
   One focused column that carries a student from "here is what you still owe"
   to a settled card payment. Same visual language as the enrolment funnel it
   sits beside - soft brand-tinted glow behind glass cards, exactly one
   brand-gradient hairline in the header, the money as the single dominant
   number - but its own class prefix, so a change here can never reach the
   funnel and a change there can never reach this page.

   Prefix is `payl-` throughout (`enr-` belongs to the funnel, `ep-` to the
   admin enrolment-pages view). The shared form primitives `.field`,
   `.field__input`, `.field__error` and `.server-error` live in
   public/css/contact-view.css and are reused verbatim, exactly as the funnel
   reuses them.

   RTL Hebrew, logical properties, breakpoints 1024 / 767.
   CSS lives here per Chrome Workspaces - no inline styles, no <style> blocks. */

.payl-page {
    min-block-size: 100vh;
    padding: 0 var(--space-md) var(--space-2xl);
    background:
        radial-gradient(1100px 520px at 85% -80px, rgba(8, 148, 255, 0.08), transparent 65%),
        radial-gradient(900px 480px at 8% 200px, rgba(189, 50, 214, 0.05), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F5F9FF 100%);
    color: var(--text-color);
}

/* One reading measure for the whole page. There is no wide screen here: the
   payment link sells nothing and has nothing to lay out side by side. */
.payl-header,
.payl-card,
.payl-head,
.payl-footer {
    max-inline-size: 760px;
    margin-inline: auto;
}

/* ── Buttons ──────────────────────────────────────────────────
   Violet CTA family, matching the funnel. Shadows come from the violet set,
   never the orange-era ones still sitting under .btn-primary in global.css. */

.payl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.payl-btn--primary {
    background: var(--accent-warm);
    color: #fff;
    box-shadow: 0 1px 2px rgba(30, 12, 60, 0.12), 0 6px 18px rgba(105, 53, 216, 0.22);
}

.payl-btn--primary:hover {
    background: var(--accent-warm-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 12, 60, 0.16), 0 10px 26px rgba(105, 53, 216, 0.3);
}

.payl-btn--ghost {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--border-default);
}

.payl-btn--ghost:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.payl-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.payl-btn svg {
    flex: none;
}

/* ── Header ───────────────────────────────────────────────── */

.payl-header {
    padding-block: var(--space-xl) 0;
    text-align: center;
}

.payl-header__mark {
    block-size: 28px;
    display: inline-block;
}

/* The single brand-gradient accent on the page. */
.payl-header__rule {
    inline-size: 56px;
    block-size: 2px;
    margin: 18px auto 0;
    border-radius: 1px;
    background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.payl-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-block-end: 10px;
}

/* ── State screens (loading / closed / verifying / done) ───── */

.payl-state {
    max-inline-size: 560px;
    margin: var(--space-xl) auto 0;
    padding: var(--space-xl) var(--space-lg) var(--space-2xl);
    text-align: center;
    background:
        radial-gradient(ellipse at 25% 0%, rgba(8, 148, 255, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(239, 246, 255, 0.5));
    border: 1px solid rgba(98, 98, 234, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.payl-state--wide {
    max-inline-size: 640px;
}

/* Fixed square box so the artwork never shifts layout while it decodes. The
   aspect ratio and the svg sizing come from .enr-mascot on the component. */
.payl-state__mascot {
    inline-size: 150px;
    margin-inline: auto;
    margin-block-end: var(--space-sm);
}

.payl-state__spinner {
    inline-size: 34px;
    block-size: 34px;
    margin: 0 auto 16px;
    border: 3px solid var(--border-light);
    border-block-start-color: var(--primary-color);
    border-radius: 50%;
    animation: payl-spin 0.9s linear infinite;
}

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

.payl-state__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: clamp(24px, 3.4vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-color);
    line-height: 1.25;
}

.payl-state__text {
    margin: 0 auto var(--space-lg);
    max-inline-size: 46ch;
    font-size: 15.5px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-secondary);
}

.payl-state__text--quiet {
    margin-block-end: 0;
    font-size: 14px;
    color: var(--text-tertiary);
}

.payl-state__text--quiet a {
    color: var(--primary-color);
    text-decoration: none;
}

.payl-state__text--quiet a:hover {
    text-decoration: underline;
}

.payl-contact-sep {
    margin-inline: 4px;
    color: var(--text-tertiary);
}

/* WhatsApp beside the email. Same accessible dark green as the LP footer's
   WhatsApp line (the brand #25d366 fails contrast at this size on near-white). */
.payl-state__text--quiet a.payl-contact-wa {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: #0f7a40;
}

.payl-state__text--quiet a.payl-contact-wa:hover {
    color: #0c6635;
}

.payl-contact-wa .app-icon-svg {
    align-self: center;
    font-size: 15px;
}

/* ── Screen header (amount / checkout) ────────────────────── */

.payl-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block: var(--space-lg);
}

.payl-head__mascot {
    inline-size: 104px;
}

.payl-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-color);
}

/* ── Glass card ───────────────────────────────────────────── */

.payl-card {
    margin-block-end: var(--space-lg);
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.payl-notice {
    margin: 0 0 var(--space-md);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.6;
}

.payl-notice--retry {
    background: #FFF8EE;
    border: 1px solid #F2DCB8;
    color: #8A5A12;
}

.payl-greeting {
    margin: 0 0 var(--space-md);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
}

/* ── The balance ──────────────────────────────────────────────
   The one number the page is about, so it is the only thing on the card that
   competes with the headline. Solid ink, never the brand gradient: the weight
   here is 600 and the gradient only reads cleanly through light letterforms. */

.payl-balance {
    margin: 0 0 var(--space-md);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(8, 148, 255, 0.07), transparent 65%),
        var(--bg-surface);
}

.payl-balance__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.payl-balance__value {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--primary-color);
}

/* On a fixed link the sale's balance is CONTEXT, not the headline - the figure
   the payer acts on is the one below it. Same box, stepped down so the two
   numbers cannot be mistaken for each other. */
.payl-balance--quiet {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-surface);
}

.payl-balance--quiet .payl-balance__value {
    font-size: clamp(20px, 2.6vw, 24px);
    color: var(--text-secondary);
}

.payl-lead {
    margin: 0 0 var(--space-lg);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* ── The staff-defined amount ──────────────────────────────
   The fixed link's whole form: one figure, stated, with no input. It wears the
   emphasis `.payl-balance` carries on a customer-choice link, because here THIS
   is the number being charged. */

.payl-fixed {
    margin: 0 0 var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(8, 148, 255, 0.07), transparent 65%),
        var(--bg-surface);
}

.payl-fixed__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.payl-fixed__value {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--primary-color);
}

.payl-fixed__rest {
    margin: var(--space-sm) 0 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ── Amount form ──────────────────────────────────────────── */

.payl-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Input and currency mark on one row. In RTL the mark lands to the left of the
   digits, which is where a Hebrew reader expects "4,000 ש״ח" to put it. */
.payl-amount-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.payl-amount-input__control {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding-block: 14px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.payl-amount-input__suffix {
    flex: none;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-secondary);
}

.payl-hint {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.payl-hint--icon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block-end: var(--space-md);
    font-size: 14px;
}

.payl-hint--icon i {
    flex: none;
    margin-block-start: 3px;
    font-size: 16px;
    color: var(--primary-color);
}

.payl-submit {
    inline-size: 100%;
}

/* ── The invoice details ──────────────────────────────────
   The name a tax document is made out to, on both kinds of link. It used to be
   a text link that unfolded two boxes; it is now always open and always shown,
   because it is addressed to every payer rather than to company payers only,
   and it arrives with the name already filled in - a prefill nobody can see is
   a name people pay under without having read it.

   So it is drawn as a real panel above the pay button, in the same family as
   the balance and the fixed-amount boxes (brand-tinted surface, hairline in the
   brand border colour, `--radius-lg`) but one step quieter than them: no
   gradient headline and no large numeral, because the figure stays the single
   dominant number on the page.

   ONLY THE PANEL IS HERE. Everything inside it belongs to the shared
   `InvoiceToChoice` control and is styled in public/css/invoice-choice.css,
   because the same control draws the same three options in the admin dialogs
   too and one of the six surfaces must not be able to drift from the rest. */

.payl-invto {
    margin: 0 0 var(--space-lg);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(8, 148, 255, 0.05), transparent 70%),
        var(--bg-surface);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-lg);
}

@media (max-width: 767px) {
    .payl-invto {
        padding: var(--space-md);
    }
}

.payl-foot-note {
    margin: var(--space-md) 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-tertiary);
}

.payl-foot-note--quiet {
    margin-block-start: 6px;
}

/* Shown once the checkout has moved to a tab of its own and this page's poll is
   the only witness left. Slightly louder than the note it replaces, because it
   is the reason the visitor should leave this tab open. */
.payl-foot-note--live {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text-secondary);
}

.payl-foot-note--live i {
    flex: none;
    margin-block-start: 2px;
    font-size: 14px;
    color: var(--primary-color);
}

/* An action inside a sentence, so it reads as a link rather than a control. */
.payl-recheck {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

.payl-recheck:hover {
    color: var(--primary-hover);
}

/* ── Open-amount instruction (degraded checkout) ──────────────
   In this mode the hosted form arrives with its amount field on zero and the
   visitor has to type the sum. This block is the only thing that tells them,
   so it is sized as a statement rather than a hint, and the arrow ties it to
   the frame directly below. Brand blue, not a warning colour: nothing has gone
   wrong, there is simply a number to enter. */

.payl-amount {
    position: relative;
    margin: 0 0 var(--space-lg);
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    text-align: center;
    border: 2px solid rgba(8, 148, 255, 0.4);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(8, 148, 255, 0.08), transparent 62%),
        var(--bg-surface);
    box-shadow: 0 6px 22px rgba(0, 60, 130, 0.08);
}

.payl-amount__lead {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color);
}

.payl-amount__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--primary-color);
}

.payl-amount__note {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Points at the payment frame immediately below. */
.payl-amount__arrow {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    font-size: 16px;
    color: var(--primary-color);
    opacity: 0.75;
}

/* ── The hosted checkout ──────────────────────────────────── */

.payl-pay__box {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface);
}

.payl-pay__iframe {
    display: block;
    inline-size: 100%;
    block-size: 1150px;
    border: 0;
}

.payl-pay__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
}

/* ── Confirmation figures ─────────────────────────────────── */

.payl-rows {
    max-inline-size: 460px;
    margin: 0 auto var(--space-lg);
    text-align: start;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.payl-rows__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F9FBFF;
    border-block-end: 1px solid var(--border-light);
}

.payl-rows__row:last-child {
    border-block-end: 0;
}

.payl-rows__label {
    flex: none;
    min-inline-size: 140px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.payl-rows__value {
    margin: 0;
    flex: 1 1 auto;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--text-color);
}

/* ── Payment status line on the confirmation ──────────────────
   Its own quiet panel rather than body copy. Neutral by default (blue, "in
   hand"), green only once the balance has actually moved. Never red: a payment
   still awaiting confirmation is not an error the visitor can fix. */

.payl-paynote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-inline-size: 460px;
    margin: 0 auto var(--space-lg);
    padding: 12px 14px;
    text-align: start;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-md);
    background: var(--primary-light);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.payl-paynote i {
    flex: none;
    margin-block-start: 3px;
    font-size: 16px;
    color: var(--primary-color);
}

.payl-paynote--ok {
    border-color: rgba(31, 157, 85, 0.28);
    background: rgba(31, 157, 85, 0.07);
}

.payl-paynote--ok i {
    color: #1F9D55;
}

/* ── Footer ───────────────────────────────────────────────── */

.payl-footer {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-tertiary);
}

.payl-footer a {
    color: var(--text-tertiary);
    text-decoration: none;
}

.payl-footer a:hover {
    color: var(--text-secondary);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .payl-head__mascot {
        inline-size: 100px;
    }
}

@media (max-width: 767px) {
    .payl-page {
        padding-inline: var(--space-sm);
    }

    /* Mascot above the words: at phone width a side-by-side header squeezes
       the headline into a column too narrow to read as a headline. */
    .payl-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-sm);
    }

    /* The brand floor. The pose never renders smaller than this. */
    .payl-head__mascot {
        inline-size: 96px;
    }

    .payl-card {
        padding: var(--space-md);
    }

    .payl-state {
        padding: var(--space-lg) var(--space-md) var(--space-xl);
    }

    .payl-state__mascot {
        inline-size: 128px;
    }

    .payl-balance,
    .payl-fixed {
        padding: var(--space-md);
    }

    /* Re-stated after the rule above, which shares its specificity and would
       otherwise re-inflate the context box back to the headline's padding. */
    .payl-balance--quiet {
        padding: var(--space-sm) var(--space-md);
    }

    /* The hosted form is taller once its own layout stacks. */
    .payl-pay__iframe {
        block-size: 1320px;
    }

    .payl-pay__actions .payl-btn {
        inline-size: 100%;
    }

    .payl-rows__row {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .payl-rows__label {
        flex-basis: 100%;
        min-inline-size: 0;
    }
}

/* ── The zero-due declaration screen ──────────────────────────
   Nothing is owed, so there is no amount on this card and nothing competing
   with the text. It reuses `.payl-head` and `.payl-card` wholesale, as arms of
   the same v-if chain as the amount screen - it is the same page in the same
   voice, asking one question instead of taking money - so it adds only the two
   sentences that sit above the invoice fields, and no wrapper of its own (the
   760px measure is set on `.payl-head` / `.payl-card` themselves).

   `.payl-declare__issued` is the honest half of an instalment sale: some
   documents are usually already out by the time the balance reaches zero, and
   those cannot change. It is set quieter than the lead because it qualifies the
   offer rather than making it, and it carries a rule rather than a warning, so
   it gets the neutral surface rather than the amber notice treatment. */

.payl-declare__lead {
    margin: 0 0 var(--space-md);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color);
}

.payl-declare__issued {
    margin: 0 0 var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    border: 1px solid var(--primary-border);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (max-width: 767px) {
    .payl-declare__lead {
        font-size: 15px;
    }

    .payl-declare__issued {
        font-size: 13.5px;
    }
}

/* ── Embed mode (`?embed=1`) ──────────────────────────────────
   The same page inside the student area's own card at students.10xcourse.ai,
   framed rather than linked. The chrome the host has already drawn - the logo
   band, the mascot hero, the company footer - is dropped in the template, by
   `v-if="!embed"` in PayLinkView.vue, so it never reaches this file. What is
   left is only what the frame was opened for: the figure, the security line,
   the hosted checkout, the confirmation and every error slot.

   What this block owns is the page's own SURFACE. A framed document painting
   its own gradient over the card behind it is the giveaway that turns an inline
   form back into a website in a box. `min-block-size: 100vh` goes for a harder
   reason than looks: the frame is sized from the height this page reports, and
   a page that always claims a full viewport reports a number that can never
   shrink back down after the checkout closes.

   The hosted checkout's own heights (1150px, and 1320px under 767px) are
   deliberately untouched. They belong to the provider's form, not to us, and
   this page's height report is what carries them out to the host. */

.payl--embed {
    min-block-size: 0;
    padding: 0;
    background: none;
}

/* The document canvas, not just the page div: html and body carry
   `--bg-primary` from global.css, and inside a frame that faint blue wash sits
   ON TOP of whatever surface the host card drew. `:has()` keeps the override
   scoped to this one page - the selector matches nothing anywhere else, and a
   browser without it degrades to the wash rather than to a broken layout. */
html:has(.payl--embed),
html:has(.payl--embed) body {
    background: transparent;
}

/* The 760/560px reading measures are the standalone page's answer to a wide
   screen. Inside the frame the host has already chosen the width, and a second
   measure within it only strands the content in the middle of a column that is
   narrower still. Each screen draws exactly one of these two, so zeroing the
   outer margins cannot collapse a gap between siblings. */
.payl--embed .payl-card,
.payl--embed .payl-state {
    max-inline-size: none;
    margin-inline: 0;
}

/* THE CARD TREATMENT ITSELF GOES TOO, and this is the whole of it: background,
   border, rounding, shadow, blur and the outer margins. Standalone, these two
   ARE the page - a glass card floating on the gradient. Inside the student area
   the host has already drawn a card, and framed it in a bordered box of its own
   (.stu-pay-frame in student.css owns that border and the rounding, because a
   framed document cannot round its own corners from the inside). Keeping ours
   stacks a card inside a box inside a card, three nested surfaces deep, which is
   what gives away an inline form as a website in a box.

   The PADDING stays: .stu-pay-frame carries none, so this is the only inset
   between the content and the frame's own border. And the checkout's heights
   (.payl-pay__iframe, 1150px and 1320px under 767px) are untouched - they belong
   to the provider's form, and this page's height report carries them out. */
.payl--embed .payl-card,
.payl--embed .payl-state {
    margin-block: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .payl-btn {
        transition: none;
        transform: none;
    }

    .payl-state__spinner {
        animation: none;
    }
}

@media print {
    .payl-state__mascot,
    .payl-head__mascot,
    .payl-pay__box,
    .payl-pay__actions {
        display: none;
    }
}