/* =========================================================
   SERVOMIX — COMPONENTS
   File: css/core/components.css
   Needs: tokens.css, base.css. Behaviour: js/core/ui.js.

   Radius rule: pill = chips/toggles, --r-control = buttons
   and fields, --r-card = cards, --r-panel = glass panels.
   Glass is for floating parts only (nav, launcher, plan
   cards, modals), never whole sections.
========================================================= */

/* ---------------------------------------------------------
   GLASS
--------------------------------------------------------- */

.glass{
    background:var(--glass);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-panel);
    box-shadow:var(--glass-highlight), var(--shadow-float);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){

    .glass{
        background:var(--surface);
    }
}

@media (prefers-reduced-transparency:reduce){

    .glass{
        background:var(--surface);
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
}


/* ---------------------------------------------------------
   BUTTONS
   Label names the action ("Choose plan", not "Submit").
--------------------------------------------------------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    min-height:var(--btn-h);
    padding:0 var(--btn-pad-x);
    border:1px solid transparent;
    border-radius:var(--r-control);
    font-size:var(--t-body);
    font-weight:var(--w-strong);
    line-height:1.2;
    white-space:nowrap;
    text-decoration:none;
    cursor:pointer;
    transition:
        background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.btn:active{
    transform:translateY(1px);
}

.btn:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.btn--primary{
    background:var(--accent);
    color:var(--ink-on-accent);
}

.btn--primary:hover{
    background:var(--accent-strong);
    color:var(--ink-on-accent);
}

.btn--secondary{
    background:var(--glass-strong);
    border-color:var(--line-strong);
    color:var(--ink);
}

.btn--secondary:hover{
    background:var(--surface);
    border-color:var(--accent);
    color:var(--accent-strong);
}

.btn--quiet{
    padding-inline:var(--s-3);
    background:transparent;
    color:var(--accent);
}

.btn--quiet:hover{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.btn--sm{
    min-height:var(--btn-h-sm);
    padding-inline:var(--s-4);
    font-size:var(--t-small);
}

.btn--block{
    width:100%;
}

.btn--icon{
    width:var(--btn-h-sm);
    min-height:var(--btn-h-sm);
    padding:0;
}

.btn[disabled],
.btn[aria-disabled="true"]{
    background:var(--line-strong);
    border-color:transparent;
    color:var(--ink-2);   /* 6.0:1 on --line-strong */
    cursor:not-allowed;
    transform:none;
}

.btn.is-loading{
    position:relative;
    color:transparent !important;
    pointer-events:none;
}

.btn.is-loading::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border:2px solid currentColor;
    border-color:var(--ink-on-accent) var(--ink-on-accent) var(--ink-on-accent) transparent;
    border-radius:50%;
    animation:smx-spin .7s linear infinite;
}

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


/* ---------------------------------------------------------
   BADGES AND CHIPS
--------------------------------------------------------- */

.badge{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    min-height:24px;
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    line-height:1;
}

.badge--up{
    background:var(--up-soft);
    color:var(--up);
}

.badge--down{
    background:var(--down-soft);
    color:var(--down);
}

.badge--warn{
    background:var(--warn-soft);
    color:var(--warn);
}

.badge--neutral{
    background:var(--surface-sunken);
    color:var(--ink-2);
}

/* status dot: only next to real, live state */
.badge__dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
}

.chip{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:44px;
    padding:0 var(--s-4);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-decoration:none;
    cursor:pointer;
}

.chip:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

.chip[aria-pressed="true"]{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--ink-on-accent);
}


/* ---------------------------------------------------------
   CARDS
--------------------------------------------------------- */

.card{
    padding:var(--card-pad);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-card);
    background:var(--glass);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-highlight), var(--shadow-card);
    transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.card:hover{
    border-color:var(--accent-strong);
    box-shadow:var(--glass-highlight), 0 16px 36px -8px rgba(0,0,0,.5), 0 0 24px -4px var(--accent-glow);
    background:var(--glass-strong);
}

.card--sunken{
    background:var(--surface-sunken);
    box-shadow:none;
}

.card__icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent);
}

.card__icon .icon{
    width:var(--icon-lg);
    height:var(--icon-lg);
}


/* ---------------------------------------------------------
   PLAN CARD
   Price per month in INR, GST note, specs, one action.
   "Most chosen" only when it is true.
--------------------------------------------------------- */

.plan{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:var(--s-5);
    padding:var(--card-pad-lg) var(--card-pad);
    border-radius:var(--r-card);
}

.plan__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
}

.plan__name{
    font-size:var(--t-h3);
    font-weight:var(--w-h3);
}

.plan__price{
    display:flex;
    align-items:baseline;
    gap:var(--s-1);
    font-variant-numeric:tabular-nums;
}

.plan__amount{
    font-size:var(--t-h1);
    font-weight:var(--w-h1);
    font-stretch:var(--wd-h1);
    line-height:1;
}

.plan__period,
.plan__note{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.plan__specs{
    display:grid;
    gap:var(--s-3);
    padding:0;
    list-style:none;
}

.plan__specs li{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    color:var(--ink-2);
}

.plan__specs .icon{
    color:var(--accent);
}

.plan__specs strong{
    color:var(--ink);
}

.plan .btn{
    margin-top:auto;
}

.plan--featured{
    border:2px solid var(--accent);
}


/* ---------------------------------------------------------
   SEGMENTED CONTROL (billing period, currency)
   Native radio inputs, so keyboard and screen readers work
   without JavaScript.
--------------------------------------------------------- */

.segmented{
    display:inline-flex;
    flex-wrap:wrap;
    gap:4px;
    padding:4px;
    border:1px solid var(--line-strong);
    border-radius:10px;
    background:rgba(255, 255, 255, 0.04);
}

/* Small screens: 2-column grid */
@media (max-width:479.98px){

    .segmented{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        border-radius:10px;
    }

    .segmented label{
        justify-content:center;
    }
}

.segmented legend{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
}

.segmented label{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:38px;
    padding:0 var(--s-3);
    border-radius:6px;
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    cursor:pointer;
    transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.segmented input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.segmented label:has(input:checked){
    background:var(--accent);
    color:var(--ink-on-accent);
}

.segmented label:has(input:focus-visible){
    box-shadow:var(--focus-ring);
}

.segmented .badge{
    background:var(--up-soft);
    color:var(--up);
}

.segmented label:has(input:checked) .badge{
    background:var(--on-accent-tint);
    color:var(--ink-on-accent);
}


/* ---------------------------------------------------------
   SWITCH (GST on/off, motion pause)
   <button role="switch" aria-checked="false" class="switch">
--------------------------------------------------------- */

.switch{
    display:inline-flex;
    align-items:center;
    gap:var(--s-3);
    min-height:44px;
    padding:0;
    border:0;
    background:none;
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.switch__track{
    position:relative;
    width:44px;
    height:26px;
    border-radius:var(--r-pill);
    background:var(--ink-3);   /* off state still meets 3:1 against white */
    transition:background-color var(--dur-fast) var(--ease);
}

.switch__track::after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--surface);
    box-shadow:var(--shadow-knob);
    transition:transform var(--dur-fast) var(--ease);
}

.switch[aria-checked="true"] .switch__track{
    background:var(--accent);
}

.switch[aria-checked="true"] .switch__track::after{
    transform:translateX(18px);
}

.switch:focus-visible{
    outline:none;
}

.switch:focus-visible .switch__track{
    box-shadow:var(--focus-ring);
}


/* ---------------------------------------------------------
   FORM FIELDS
   Label above, helper below, error below with icon.
--------------------------------------------------------- */

.field{
    display:grid;
    gap:var(--s-2);
}

.field__label{
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.field__input{
    width:100%;
    min-height:var(--field-h);
    padding:0 var(--s-4);
    border:1px solid var(--line-control);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

textarea.field__input{
    min-height:120px;
    padding-block:var(--s-3);
    resize:vertical;
}

.field__input::placeholder{
    color:var(--ink-3);
}

.field__input:hover{
    border-color:var(--ink-2);
}

.field__input:focus-visible{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-tint);
}

.field__help{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.field__error{
    display:none;
    align-items:center;
    gap:var(--s-2);
    color:var(--down);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.field.is-invalid .field__input{
    border-color:var(--down);
}

.field.is-invalid .field__error{
    display:flex;
}


/* ---------------------------------------------------------
   FAQ (details/summary: works without JavaScript)
--------------------------------------------------------- */

.faq{
    display:grid;
    gap:var(--s-3);
}

.faq__item{
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.faq__item summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-4);
    min-height:56px;
    padding:var(--s-4) var(--s-5);
    font-weight:var(--w-strong);
    list-style:none;
    cursor:pointer;
}

.faq__item summary::-webkit-details-marker{
    display:none;
}

.faq__item summary .icon{
    color:var(--ink-2);
    transition:transform var(--dur-base) var(--ease);
}

.faq__item[open] summary .icon{
    transform:rotate(45deg);
    color:var(--accent);
}

.faq__item summary:focus-visible{
    outline:none;
    border-radius:var(--r-card);
    box-shadow:var(--focus-ring);
}

.faq__answer{
    padding:0 var(--s-5) var(--s-5);
    color:var(--ink-2);
}


/* ---------------------------------------------------------
   TABS (behaviour in js/core/ui.js)
--------------------------------------------------------- */

.tabs__list{
    display:flex;
    gap:var(--s-1);
    padding:var(--s-1);
    overflow-x:auto;
    border-radius:var(--r-control);
    background:var(--surface-sunken);
    scrollbar-width:none;
}

.tabs__tab{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    flex:0 0 auto;
    min-height:44px;
    padding:0 var(--s-4);
    border:0;
    border-radius:calc(var(--r-control) - 4px);
    background:transparent;
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.tabs__tab:hover{
    color:var(--ink);
}

.tabs__tab[aria-selected="true"]{
    background:var(--surface);
    color:var(--accent-strong);
    box-shadow:var(--shadow-card);
}

.tabs__tab:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.tabs__panel{
    padding-top:var(--s-5);
}

.tabs__panel[hidden]{
    display:none;
}


/* ---------------------------------------------------------
   BENTO (features). Tiles take real images or panel shots.
--------------------------------------------------------- */

.bento{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--s-4);
}

.bento__tile{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:var(--s-3);
    min-height:200px;
    padding:var(--card-pad);
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.bento__tile--media{
    padding:0;
}

.bento__tile--media img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.bento__tile--tint{
    background:var(--accent-soft);
}

@media (min-width:768px){

    .bento{
        grid-template-columns:repeat(6, 1fr);
    }

    .bento__tile{
        grid-column:span 2;
    }

    .bento__tile--wide{
        grid-column:span 4;
    }

    .bento__tile--half{
        grid-column:span 3;
    }

    .bento__tile--tall{
        grid-row:span 2;
    }
}


/* ---------------------------------------------------------
   GAME TILE
--------------------------------------------------------- */

.game-tile{
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    color:var(--ink);
    text-decoration:none;
    transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.game-tile:hover{
    border-color:var(--accent);
    color:var(--ink);
    box-shadow:var(--shadow-card);
}

.game-tile__media{
    aspect-ratio:16 / 10;
    overflow:hidden;
    background:var(--surface-sunken);
}

.game-tile__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform var(--dur-base) var(--ease);
}

.game-tile:hover .game-tile__media img{
    transform:scale(1.03);
}

.game-tile__body{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--s-3);
    padding:var(--s-4);
}

.game-tile__name{
    font-weight:var(--w-strong);
}

.game-tile__from{
    color:var(--ink-2);
    font-size:var(--t-small);
    font-variant-numeric:tabular-nums;
}


/* ---------------------------------------------------------
   LOCATION ROW (live ping; never a made-up number)
--------------------------------------------------------- */

.location{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:56px;
    padding:var(--s-3) var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
}

.location__name{
    flex:1;
    font-weight:var(--w-strong);
}

.location__ping{
    font-variant-numeric:tabular-nums;
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.location__ping[data-quality="good"]{
    color:var(--up);
}

.location__ping[data-quality="ok"]{
    color:var(--warn);
}

.location__ping[data-quality="bad"],
.location__ping[data-quality="unreachable"]{
    color:var(--down);
}

.location__ping[data-quality="pending"]{
    color:var(--ink-3);
}


/* ---------------------------------------------------------
   CONSOLE (the one dark surface)
--------------------------------------------------------- */

.console{
    padding:var(--s-5);
    border-radius:var(--r-card);
    background:var(--console);
    color:var(--console-ink);
    font-size:var(--t-small);
    line-height:1.7;
}

.console__line{
    display:flex;
    gap:var(--s-2);
}

.console__line .icon{
    color:var(--up-fill);
}

.console__muted{
    color:var(--console-ink-2);
}


/* ---------------------------------------------------------
   STATES: loading, empty, error
--------------------------------------------------------- */

.skeleton{
    position:relative;
    overflow:hidden;
    border-radius:var(--r-control);
    background:var(--line-strong);
}

.skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, var(--shimmer), transparent);
    transform:translateX(-100%);
    animation:smx-shimmer 1.4s var(--ease) infinite;
}

@keyframes smx-shimmer{
    to{ transform:translateX(100%); }
}

.skeleton--text{
    height:14px;
}

.skeleton--title{
    height:24px;
    width:60%;
}

.empty{
    display:grid;
    justify-items:center;
    gap:var(--s-3);
    padding:var(--s-7) var(--s-5);
    border:1px dashed var(--line-strong);
    border-radius:var(--r-card);
    text-align:center;
}

.empty .icon{
    width:32px;
    height:32px;
    color:var(--ink-3);
}

.empty p{
    color:var(--ink-2);
}

.alert{
    display:flex;
    align-items:flex-start;
    gap:var(--s-3);
    padding:var(--s-4);
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--ink);
}

.alert > .icon{
    margin-top:2px;
    color:var(--accent);
}

.alert--error{
    background:var(--down-soft);
}

.alert--error > .icon{
    color:var(--down);
}

.alert--success{
    background:var(--up-soft);
}

.alert--success > .icon{
    color:var(--up);
}

.alert--warn{
    background:var(--warn-soft);
}

.alert--warn > .icon{
    color:var(--warn);
}

.alert__body{
    display:grid;
    gap:var(--s-1);
}

.alert__title{
    font-weight:var(--w-strong);
}

/* Modal Glassmorphism (Only popup area blurs; background stays normal, zero extra layer) */
.modal-backdrop,
.modal-backdrop-blur {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.modal-glass {
  background: rgba(12, 21, 39, 0.85) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(96, 165, 250, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
              0 24px 60px -12px rgba(0, 0, 0, 0.8),
              0 0 35px -5px rgba(59, 130, 246, 0.25) !important;
}

html[data-theme="light"] .modal-glass,
html.light .modal-glass {
  background: rgba(255, 255, 255, 0.9) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(148, 185, 255, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95),
              0 24px 60px -15px rgba(12, 40, 90, 0.2),
              0 0 30px -5px rgba(59, 130, 246, 0.15) !important;
}

html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .modal-backdrop-blur,
html.light .modal-backdrop,
html.light .modal-backdrop-blur {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}