/* Plain-CSS baseline for the shared component classes used by every
   storefront Livewire view (checkout, cart, account area, mini-cart, offer
   form, track-order, newsletter signup, ...) — these views were originally
   styled against Tailwind's compiled output (resources/css/app.css), which
   the storefront no longer loads now that it runs on the Tejori design
   system instead. Rather than rewrite every one of those views individually,
   this gives the exact same class names a real, coherent, on-brand look so
   nothing is left unstyled. Pages that get their own full Tejori treatment
   (home, collections, product, ...) don't rely on this file at all.

   NOTE ON UNITS: vw against the 1920 canvas the rest of the theme is drawn
   on, restated against 440 in the phone block at the end — the same two bases
   base.css and every reference stylesheet use. .521vw is 10px at 1920, .885vw
   is 17px. This file was rem before that (on base.css's 62.5% root, where
   1rem was 10px rather than the usual 16px); the values are unchanged at 1920,
   they just scale with the viewport now like everything around them. */

/* The five values the reference palette has no name for. They live here, not in
   base.css, because base.css is a byte-for-byte copy of the reference stylesheet
   and that identity is what makes a live-vs-reference diff mean anything. This
   file is loaded by every storefront page and by the checkout layout, so the
   tokens reach everywhere they are needed.

   Before these existed the app carried three different reds (#dc2626, #c0392b,
   #b91c1c), two greens beside the brand one (#15803d, #1a7a4a) and Tailwind's
   slate greys, because each view was styled on its own. */
:root {
    --c-danger: #c0392b;
    --c-danger-dark: #a5302a;
    --c-danger-soft: #fdf2f0;
    --c-green-soft: #eef7f4;
    /* lighter than --c-mute (#333) — for secondary metadata, not body text */
    --c-sub: #707070;
}

.page-title {
    font-size: 1.354vw;
    font-weight: 600;
    color: #121212;
    font-family: var(--ff);
}

.card {
    border-radius: .625vw;
    border: 1px solid var(--c-line, #e5e5e5);
    background: #fff;
    padding: 1.042vw;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.panel-title {
    margin-bottom: .625vw;
    font-size: .99vw;
    font-weight: 600;
    color: var(--c-mute);
}

.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: .312vw;
    border-radius: .312vw;
    padding: .521vw .833vw;
    font-size: .885vw;
    font-weight: 500;
    font-family: var(--ff);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .15s ease, filter .15s ease;
}

.btn-primary {
    background: var(--c-green, #389a81);
    color: #fff;
}

.btn-primary:hover {
    filter: brightness(.92);
}

.btn-secondary {
    background: #fff;
    color: var(--c-mute);
    border-color: var(--c-line, #e5e5e5);
}

.btn-secondary:hover {
    background: #f8f8f8;
}

.btn-danger {
    background: var(--c-danger);
    color: #fff;
}

.btn-danger:hover {
    background: var(--c-danger-dark);
}

/* Icons inside these controls carried an inline `width:1rem;height:1rem` from
   their Tailwind days. That is 16px in the admin, but base.css's 62.5% root
   made it 10px here, so they came out as specks beside 17px text.
   Sizing them from the stylesheet keeps them in step with the label instead —
   the inline styles are gone, or they would still win. */
.btn-primary svg,
.btn-secondary svg,
.btn-danger svg,
.menu-item svg,
.menu-item-danger svg,
.menu-item-success svg,
.link-action svg,
.link-danger svg,
.link-success svg,
.link-muted svg {
    flex: none;
    width: .937vw;
    height: .937vw;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.link-action {
    font-size: .885vw;
    font-weight: 500;
    color: var(--c-green, #389a81);
    text-decoration: none;
}

.link-action:hover {
    text-decoration: underline;
}

.link-danger {
    font-size: .885vw;
    font-weight: 500;
    color: var(--c-danger);
    text-decoration: none;
}

.link-danger:hover {
    text-decoration: underline;
}

.link-success {
    font-size: .885vw;
    font-weight: 500;
    color: var(--c-green);
    text-decoration: none;
}

.link-muted {
    font-size: .885vw;
    font-weight: 500;
    color: var(--c-sub);
    text-decoration: none;
}

.menu-item,
.menu-item-danger,
.menu-item-success {
    display: block;
    width: 100%;
    white-space: nowrap;
    padding: .312vw .625vw;
    text-align: left;
    font-size: .885vw;
    background: none;
    border: 0;
    cursor: pointer;
}

.menu-item { color: var(--c-mute); }
.menu-item:hover { background: #f8f8f8; }
.menu-item-danger { color: var(--c-danger); }
.menu-item-danger:hover { background: var(--c-danger-soft); }
.menu-item-success { color: var(--c-green); }
.menu-item-success:hover { background: var(--c-green-soft); }

.field-label {
    display: block;
    font-size: .885vw;
    font-weight: 500;
    color: var(--c-mute);
    font-family: var(--ff);
}

.field-hint {
    margin-top: .208vw;
    font-size: .833vw;
    color: var(--c-sub);
}

.field-error {
    margin-top: .208vw;
    font-size: .885vw;
    color: var(--c-danger);
}

.input,
select.input,
textarea.input {
    display: block;
    width: 100%;
    border-radius: .312vw;
    border: 1px solid var(--c-line);
    background: #fff;
    padding: .521vw .625vw;
    font-size: .885vw;
    font-family: var(--ff);
    color: #121212;
}

.input:focus {
    outline: none;
    border-color: var(--c-green, #389a81);
    box-shadow: 0 0 0 1px var(--c-green, #389a81);
}

.input::placeholder {
    color: #a0a0a0;
}

.table-shell {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: .625vw;
    border: 1px solid var(--c-line, #e5e5e5);
    background: #fff;
}

.table-base {
    width: 100%;
    table-layout: fixed;
    text-align: left;
    font-size: .885vw;
    border-collapse: collapse;
}

.table-base thead { background: #fafafa; }

.table-base th {
    padding: .521vw .833vw;
    font-size: .729vw;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--c-sub);
}

.table-base tbody tr {
    border-top: 1px solid #f1f1f1;
}

.table-base tbody tr:hover {
    background: #fafafa;
}

.table-base td {
    padding: .625vw .833vw;
    color: var(--c-mute);
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .104vw .417vw;
    font-size: .729vw;
    font-weight: 500;
}

.tab-link,
.tab-link-active {
    border-radius: .312vw;
    padding: .312vw .625vw;
    font-size: .885vw;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.tab-link {
    color: var(--c-sub);
}

.tab-link:hover {
    background: #f2f2f2;
    color: var(--c-mute);
}

.tab-link-active {
    background: var(--c-green-soft);
    color: var(--c-green, #389a81);
}

/* ---------------------------------------------------------------------------
   Toast (SweetAlert2)

   SweetAlert2 sets `font-size: 1rem` on its popup and sizes everything else
   inside it in `em`. That is 16px in the admin, where html keeps the browser
   default — but base.css puts the storefront on `html { font-size: 62.5% }`,
   so the same 1rem resolved to 10px and every toast came out half-size.

   Restoring the 16px here (and a little wider than SweetAlert's own 360px, so
   the longer messages still fit on one or two lines) fixes it storefront-side
   only: this file is never loaded by the admin, which needs no correction.

   The library's own selector is `div:where(.swal2-container) div:where(.swal2-
   popup)` — `:where()` contributes nothing, so it scores (0,0,2) and the two
   classes below outrank it without !important.
   --------------------------------------------------------------------------- */
.swal2-popup.swal2-toast {
    font-size: .885vw;
}

/* `div.` is needed on the container, not on the popup: SweetAlert injects its
   stylesheet at runtime, so for the container — where its own selector is the
   same `body.swal2-toast-shown .swal2-container` written here — it lands later
   in the cascade and wins a specificity tie. One element selector settles it. */
body.swal2-toast-shown div.swal2-container {
    width: 22.917vw;
}

/* Phone canvas. Everything above is sized against the 1920 design;
   these are the same values against 440, the width the theme itself
   uses below 767px. Only sizes are restated — layout, colour and
   everything else carries down from the rules above. */
@media (max-width: 767px) {
    .page-title {
        font-size: 5.909vw;
    }

    .card {
        border-radius: 2.727vw;
        padding: 4.545vw;
    }

    .panel-title {
        margin-bottom: 2.727vw;
        font-size: 4.318vw;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        gap: 1.364vw;
        border-radius: 1.364vw;
        padding: 2.273vw 3.636vw;
        font-size: 3.864vw;
    }

    .btn-primary svg,
    .btn-secondary svg,
    .btn-danger svg,
    .menu-item svg,
    .menu-item-danger svg,
    .menu-item-success svg,
    .link-action svg,
    .link-danger svg,
    .link-success svg,
    .link-muted svg {
        width: 4.091vw;
        height: 4.091vw;
    }

    .link-action {
        font-size: 3.864vw;
    }

    .link-danger {
        font-size: 3.864vw;
    }

    .link-success {
        font-size: 3.864vw;
    }

    .link-muted {
        font-size: 3.864vw;
    }

    .menu-item,
    .menu-item-danger,
    .menu-item-success {
        padding: 1.364vw 2.727vw;
        font-size: 3.864vw;
    }

    .field-label {
        font-size: 3.864vw;
    }

    .field-hint {
        margin-top: .909vw;
        font-size: 3.636vw;
    }

    .field-error {
        margin-top: .909vw;
        font-size: 3.864vw;
    }

    .input,
    select.input,
    textarea.input {
        border-radius: 1.364vw;
        padding: 2.273vw 2.727vw;
        font-size: 3.864vw;
    }

    .table-shell {
        border-radius: 2.727vw;
    }

    .table-base {
        font-size: 3.864vw;
    }

    .table-base th {
        padding: 2.273vw 3.636vw;
        font-size: 3.182vw;
    }

    .table-base td {
        padding: 2.727vw 3.636vw;
    }

    .badge {
        padding: .455vw 1.818vw;
        font-size: 3.182vw;
    }

    .tab-link,
    .tab-link-active {
        border-radius: 1.364vw;
        padding: 1.364vw 2.727vw;
        font-size: 3.864vw;
    }

    .swal2-popup.swal2-toast {
        font-size: 3.864vw;
    }

    body.swal2-toast-shown div.swal2-container {
        width: 100vw;
    }
}