/* Seller entry buttons carry the Orvelix brand — sp-yellow fill, sp-ink text and
   an animated graffiti-colour border. The modal below stays on the ezkl palette. */

/* All three entry points (utility bar on desktop, utility bar on mobile, mobile
   menu) share one colour block so they cannot drift apart. Colours are fixed,
   not theme-dependent. */
#nav-sellers-btn-desktop,
#nav-sellers-btn-bar-mobile,
#nav-sellers-btn-mobile {
    --sellers-fill: #f7d531;   /* sp-yellow */
    --sellers-text: #1a1a1a;   /* sp-ink */
    box-sizing: border-box;
    color: var(--sellers-text);
    border: 2px solid transparent;
    /* Two layers: fill on padding-box, rainbow on border-box. A pseudo-element
       behind the button is not an option — it sits inside #utility-bar, which
       paints its own background, so z-index: -1 would hide it under the bar. */
    background:
        linear-gradient(var(--sellers-fill), var(--sellers-fill)) padding-box,
        linear-gradient(90deg, #ff1493, #f28b2c, #f7d531, #39ff14, #00d9ff, #ff1493) border-box;
    background-size: auto, 300% 100%;
    background-position: 0 0, 0 0;
    animation: sellers-rainbow 5s linear infinite;
    cursor: pointer;
    transition: background-image 0.18s linear, color 0.18s linear, box-shadow 0.18s linear;
}
#nav-sellers-btn-desktop:hover,
#nav-sellers-btn-desktop:focus-visible,
#nav-sellers-btn-bar-mobile:hover,
#nav-sellers-btn-bar-mobile:focus-visible,
#nav-sellers-btn-mobile:hover,
#nav-sellers-btn-mobile:focus-visible {
    --sellers-fill: #1a1a1a;
    --sellers-text: #f7d531;
}

@keyframes sellers-rainbow {
    to { background-position: 0 0, 300% 0; }
}

/* Motion off — the gradient border stays, so the button is still the loudest
   thing in the bar without any movement. */
@media (prefers-reduced-motion: reduce) {
    #nav-sellers-btn-desktop,
    #nav-sellers-btn-bar-mobile,
    #nav-sellers-btn-mobile {
        animation: none;
    }
}

/* Only one of the two utility-bar entries is ever on screen, so neither should
   pick up the row's space-x-4 left margin — without this the desktop button
   would shift 16px right just because the mobile one precedes it. */
#nav-sellers-btn-desktop,
#nav-sellers-btn-bar-mobile {
    margin-left: 0;
}

/* Utility bar is exactly 32px tall — button plus border must stay within 24px */
#nav-sellers-btn-desktop {
    padding: 0 8px;
    height: 24px;
    line-height: 20px;
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(247, 213, 49, 0.45);
}
#nav-sellers-btn-desktop:hover,
#nav-sellers-btn-desktop:focus-visible {
    box-shadow: 0 0 14px rgba(247, 213, 49, 0.65);
}
#nav-sellers-btn-desktop .nav-sellers-prefix {
    /* 0.6 on yellow drops below AA — raised so the marker still reads */
    opacity: 0.75;
    margin-right: 4px;
}

/* Utility bar on phones — same colours, smaller footprint: 22px including the
   2px border, so the 32px row keeps its height. The glow is softer than the
   desktop one because the bar is narrow and the plate sits close to the flags. */
#nav-sellers-btn-bar-mobile {
    flex: 0 0 auto;
    padding: 0 6px;
    height: 22px;
    line-height: 18px;
    font-family: 'Share Tech Mono', 'VT323', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 8px rgba(247, 213, 49, 0.35);
}
#nav-sellers-btn-bar-mobile:hover,
#nav-sellers-btn-bar-mobile:focus-visible {
    box-shadow: 0 0 12px rgba(247, 213, 49, 0.55);
}

/* The bar had no spare width on phones: flags plus currencies already ran edge
   to edge and the last currency was cut off below ~355px. The plate is paid for
   out of the gaps and the currency buttons' side padding — nothing is hidden,
   and no glyph or flag changes size. */
@media (max-width: 639px) {
    #utility-bar .h-8 > div {
        margin-left: 8px;
    }
    #utility-bar #currency-switcher {
        margin-left: 12px;
    }
    #utility-bar #currency-switcher > button {
        padding-left: 4px;
        padding-right: 4px;
    }
    #utility-bar #currency-switcher > button + button {
        margin-left: 4px;
    }
}

/* Mobile menu entry — same colours, same footprint as before (border grew by
   1px per side, padding lost 1px to compensate) */
#nav-sellers-btn-mobile {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    margin: 10px 0 4px;
    font-family: inherit;
    font-size: inherit;
    box-shadow: 0 0 12px rgba(247, 213, 49, 0.4);
}
#nav-sellers-btn-mobile:hover,
#nav-sellers-btn-mobile:focus-visible {
    box-shadow: 0 0 16px rgba(247, 213, 49, 0.6);
}
#nav-sellers-btn-mobile .nav-sellers-mobile-label {
    display: block;
    font-weight: 700;
    letter-spacing: 0.06em;
}
#nav-sellers-btn-mobile .nav-sellers-mobile-hint {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0.04em;
    opacity: 0.75;
    text-transform: uppercase;
}

/* Modal */
#sellers-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sellers-modal.hidden { display: none; }

.sellers-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

/* Plain theme background — the modal used to carry a 20px grid overlay,
   which on the light theme read as graph paper and made the whole card
   look dirty. Depth now comes from the drop shadow, not from texture. */
.sellers-modal-content {
    position: relative;
    background: var(--bg-primary);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    border: 2px solid var(--text-primary);
    padding: 2rem;
    width: calc(100% - 2rem);
    max-width: 600px;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    font-family: 'Share Tech Mono', 'VT323', monospace;
    color: var(--text-primary);
    z-index: 1;
}

.sellers-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    z-index: 2;
    transition: opacity 0.1s;
}
.sellers-modal-close:hover { opacity: 0.6; }

.sellers-modal-content h2 {
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--text-primary);
    padding-bottom: 0.5rem;
    padding-right: 2rem;
}

.sellers-modal-body p {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Secondary action — outlined, so the Orvelix CTA stays the primary one */
.sellers-contact-link {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: transparent;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1px solid var(--text-primary);
    text-transform: none;
    letter-spacing: 0.04em;
    transition: background 0.1s, color 0.1s;
}
.sellers-contact-link:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
}

/* ── Orvelix route — the card wears the Orvelix brand ──────────────── */

/* Deliberately a div, not a section: style.css forces
   `section { padding-top: 5.5rem !important }` on narrow screens, which
   opened a ~90px empty gap above the logo inside the modal.

   The colours below are Orvelix brand tokens and are intentionally fixed
   in both ezkl themes: this is a card of a different brand, not a themed
   surface. The dark green board is what the Orvelix wordmark is drawn
   for, and it sits equally well on a light and on a dark modal.
   Frame, spacing and the mono typeface stay ezkl's, so the card still
   belongs to the modal. */
.orvelix-block {
    --orvelix-board: #1f4f2c;
    --orvelix-chalk: #f4f1e8;
    --orvelix-chalk-dim: rgba(244, 241, 232, 0.7);
    --orvelix-rule: rgba(244, 241, 232, 0.3);
    --orvelix-yellow: #f7d531;
    --orvelix-ink: #1a1a1a;
    display: block;
    border: 2px solid var(--text-primary);
    background: var(--orvelix-board);
    padding: 1.25rem;
    margin: 0 0 1.5rem;
}

/* No backdrop under the wordmark: it is drawn for exactly this green, and
   a black plate over the board reads as a patch. A full-width chalk rule
   keeps it working as the card header. */
.orvelix-logo-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-bottom: 1px solid var(--orvelix-rule);
    padding: 0.25rem 1.25rem 1rem;
    margin: 0 -1.25rem 1.1rem;
}

.orvelix-logo {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: 76px;
    object-fit: contain;
}

.orvelix-title {
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.75rem;
    color: var(--orvelix-chalk);
}

.sellers-modal-body .orvelix-text {
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 1rem;
    color: var(--orvelix-chalk);
}

.orvelix-facts {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}
.orvelix-facts li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.45rem;
    font-size: 0.88rem;
    line-height: 1.45;
    font-weight: 600;
    color: var(--orvelix-chalk);
}
.orvelix-facts li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--orvelix-chalk-dim);
}

/* Both routes into Orvelix share one button style — same fill, size and
   hover — so neither reads as the lesser of the two */
.orvelix-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.9rem 1rem;
    background: var(--orvelix-yellow);
    color: var(--orvelix-ink);
    border: 2px solid var(--orvelix-ink);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    word-break: break-word;
    transition: background 0.1s, color 0.1s;
}
.orvelix-cta:hover,
.orvelix-cta:focus-visible {
    background: var(--orvelix-chalk);
    color: var(--orvelix-ink);
}

/* Goods from China — separated by a chalk rule, same weight of button */
.orvelix-preorder {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--orvelix-rule);
}

.orvelix-preorder-title {
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 0.5rem;
    color: var(--orvelix-chalk);
}

.sellers-modal-body .orvelix-preorder-text {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.9rem;
    color: var(--orvelix-chalk-dim);
}

.sellers-divider {
    border: 0;
    border-top: 1px solid var(--border-dim);
    margin: 0 0 1.25rem;
}

/* Compact enough that the whole Orvelix block — both buttons included —
   lands inside a 375x812 viewport without scrolling.
   The 68px bottom clearance keeps the modal clear of #promo-popup-tab,
   the site-wide discount tab pinned to the bottom edge at z-index 9999;
   without it the lower part of the modal sits under that tab. */
@media (max-width: 480px) {
    .sellers-modal-content {
        padding: 0.9rem;
        max-height: calc(100vh - 1rem - 68px);
        max-height: calc(100dvh - 1rem - 68px);
        margin-bottom: 68px;
    }
    .sellers-modal-content h2 { font-size: 1.1rem; margin-bottom: 0.6rem; padding-bottom: 0.4rem; }
    .sellers-modal-body p { font-size: 0.88rem; }

    .orvelix-block { padding: 0.8rem; margin-bottom: 1rem; }
    .orvelix-logo-plate { padding: 0.1rem 0.8rem 0.5rem; margin: 0 -0.8rem 0.6rem; }
    .orvelix-logo { max-height: 34px; }
    .orvelix-title { font-size: 0.95rem; letter-spacing: 0.05em; margin-bottom: 0.45rem; }
    .sellers-modal-body .orvelix-text { font-size: 0.8rem; line-height: 1.4; margin-bottom: 0.6rem; }
    .orvelix-facts { margin-bottom: 0.75rem; }
    .orvelix-facts li { font-size: 0.78rem; line-height: 1.35; margin-bottom: 0.28rem; padding-left: 1rem; }
    .orvelix-cta { font-size: 0.88rem; padding: 0.65rem 0.5rem; letter-spacing: 0.04em; }

    .orvelix-preorder { margin-top: 0.7rem; padding-top: 0.6rem; }
    .orvelix-preorder-title { font-size: 0.85rem; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
    .sellers-modal-body .orvelix-preorder-text { font-size: 0.78rem; line-height: 1.35; margin-bottom: 0.55rem; }
}