/* ──────────────────────────────────────────────────────────────────────────
   Saree Meter to Piece Rate Converter — Trade Tools
   Mobile-first. Every interactive control is at least 44px tall so the tool
   stays usable one-handed on a phone during a live customer chat.
   ────────────────────────────────────────────────────────────────────────── */

/* Segmented buttons: language / mode / length / GST rate ------------------- */
.smp-lang-btn,
.smp-mode-btn,
.smp-len-btn,
.smp-gst-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: #52525b;
    -webkit-tap-highlight-color: transparent;
}

html.dark .smp-lang-btn,
html.dark .smp-mode-btn,
html.dark .smp-len-btn,
html.dark .smp-gst-btn {
    background: rgba(24, 24, 27, 0.8);
    border-color: rgba(255, 255, 255, 0.10);
    color: #a1a1aa;
}

.smp-lang-btn:hover,
.smp-mode-btn:hover,
.smp-len-btn:hover,
.smp-gst-btn:hover {
    border-color: rgba(245, 158, 11, 0.45);
    color: #b45309;
}

html.dark .smp-lang-btn:hover,
html.dark .smp-mode-btn:hover,
html.dark .smp-len-btn:hover,
html.dark .smp-gst-btn:hover {
    color: #fbbf24;
}

.smp-lang-btn.is-active,
.smp-mode-btn.is-active,
.smp-len-btn.is-active,
.smp-gst-btn.is-active {
    background: linear-gradient(135deg, #f59e0b, #f43f5e);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 18px -8px rgba(244, 63, 94, 0.65);
}

.smp-lang-btn.is-active {
    /* The language chips sit inside a tinted track, so they stay flat. */
    background: #f59e0b;
    box-shadow: none;
}

/* The mode buttons are the primary decision on the page — give them weight. */
.smp-mode-btn.is-active {
    transform: translateY(-1px);
}

/* On/off switches (GST, bulk mode) ---------------------------------------- */
.smp-switch {
    background: #d4d4d8;
}

html.dark .smp-switch {
    background: #3f3f46;
}

.smp-switch.is-on {
    background: linear-gradient(135deg, #f59e0b, #f43f5e);
}

.smp-switch .smp-switch-knob {
    transform: translateX(0);
}

.smp-switch.is-on .smp-switch-knob {
    transform: translateX(24px);
}

/* Light-mode label colours on the saturated action buttons ----------------
   app.css rewrites `text-white` to a dark colour inside glass cards in light
   mode (its FAQ-accordion fix). These three buttons sit on a gradient or a
   solid emerald fill, where a dark label is unreadable — restore white, and
   give Share a real dark fill instead of the washed-out bg-zinc-900 override. */
html:not(.dark) #smp-review-btn,
html:not(.dark) #smp-review-btn span,
html:not(.dark) #smp-review-btn i,
html:not(.dark) #smp-copy-btn,
html:not(.dark) #smp-copy-btn span,
html:not(.dark) #smp-copy-btn i,
html:not(.dark) #smp-share-btn,
html:not(.dark) #smp-share-btn span,
html:not(.dark) #smp-share-btn i {
    color: #ffffff !important;
}

html:not(.dark) #smp-share-btn {
    background-color: #18181b !important;
}

/* Focus visibility for keyboard users ------------------------------------- */
.smp-lang-btn:focus-visible,
.smp-mode-btn:focus-visible,
.smp-len-btn:focus-visible,
.smp-gst-btn:focus-visible,
.smp-switch:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

/* Disabled "Check & Share" state (rate or length not usable yet) ----------- */
#smp-review-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

/* Long rupee figures must never push the result card sideways on a phone. */
#smp-out-main {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Keep the number keypad inputs from showing spinner arrows on desktop, which
   look wrong next to the large trade-style figures. */
#smp-rate::-webkit-outer-spin-button,
#smp-rate::-webkit-inner-spin-button,
#smp-length::-webkit-outer-spin-button,
#smp-length::-webkit-inner-spin-button,
#smp-qty::-webkit-outer-spin-button,
#smp-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#smp-rate,
#smp-length,
#smp-qty {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* The review panel is the confirm-before-send gate — make its arrival
   noticeable without being loud. */
#smp-review-panel:not([hidden]) {
    animation: smp-review-in 0.22s ease-out;
}

@keyframes smp-review-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    #smp-review-panel:not([hidden]) { animation: none; }
    .smp-mode-btn.is-active { transform: none; }
}

/* Narrow phones: the two mode buttons need room for Hindi/Gujarati labels,
   which run longer than the English ones. */
@media (max-width: 380px) {
    .smp-mode-btn {
        font-size: 11px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}