/* ════════════════════════════════════════════════════════════════════════
   COSMEERA UI KIT — shared design system
   Linked last on every page so it can normalise the per-page styles that
   came before it. Presentation only: no handler, no data path, no colour
   that carries meaning is introduced here. Brand colours are reused from the
   existing tokens (--primary-start/--primary-end/--text/--card-bg) with the
   same literal values as fallback, so this file also works on admin and
   seller pages, which never load css/style.css.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    /* Brand — unchanged, only re-declared so the kit is self-sufficient. */
    --ui-primary: var(--primary-start, #E85D24);
    --ui-primary-deep: var(--primary-end, #D9480F);
    --ui-ink: var(--text, #2D221B);
    --ui-surface: var(--card-bg, #FFFFFF);
    --ui-line: var(--border-color, rgba(232, 93, 36, 0.12));
    --ui-danger: #dc2626;
    --ui-success: #16a34a;

    /* Sharp rectangular controls. Cards keep their softer radii; only
       controls live in this 4-8px band. */
    --ui-radius: 8px;
    --ui-radius-icon: 6px;

    /* Control heights */
    --ui-h-sm: 34px;
    --ui-h-md: 42px;
    --ui-h-lg: 48px;

    /* Keyboard focus ring (2.4.7). Orange on light surfaces, warm gold on
       the dark dashboards — see [data-ui-theme="dark"]. */
    --ui-focus: 0 0 0 3px rgba(232, 93, 36, 0.45);
    --ui-focus-color: var(--ui-primary);

    --ui-t: 150ms cubic-bezier(.2, .8, .3, 1);

    /* One primary family across the app. Cormorant Garamond stays only where
       it is already used as an editorial display face. */
    --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ui-font-display: 'Cormorant Garamond', Georgia, serif;
}

/* ════ 1. TYPOGRAPHY ════════════════════════════════════════════════════ */
/* Five different families were in active use (Outfit, Inter, Poppins,
   Cormorant, Playfair Display) depending on which page you landed on. */
body,
button,
input,
select,
textarea {
    font-family: var(--ui-font);
}

h1, h2, h3, h4 {
    line-height: 1.25;
    letter-spacing: -0.011em;
}

/* ════ 2. KEYBOARD FOCUS ════════════════════════════════════════════════ */
/* There were zero :focus-visible rules in the repository, and .search-go-btn,
   .wish-btn and .bottom-link set outline:none with no replacement. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ui-focus-color);
    outline-offset: 2px;
    box-shadow: var(--ui-focus);
}

[data-ui-theme="dark"] {
    --ui-focus-color: #FFB870;
    --ui-focus: 0 0 0 3px rgba(255, 184, 112, 0.35);
}

/* ════ 3. SHARP RECTANGULAR CONTROLS ════════════════════════════════════ */
/* 59 of the 103 control radii in the app were pills (50px/50%/99px/999px) or
   circles. Dots, badges, chips and avatars are deliberately excluded: they are
   indicators, not controls. */
button:not(.ui-keep-round),
[role="button"]:not(.ui-keep-round),
input[type="button"]:not(.ui-keep-round),
input[type="submit"]:not(.ui-keep-round),
a.btn:not(.ui-keep-round),
.btn:not(.ui-keep-round) {
    border-radius: var(--ui-radius) !important;
}

/* Square icon-only controls sit one step tighter so they still read as
   controls rather than as circles or tiles. */.icon-btn,
.wish-btn,
.search-go-btn,
.action-btn,
.btn-action,
.editor-btn,
.thumb-btn,
.modal-close,
.drawer-close,
.account-back-btn,
.account-action-btn,
.account-modal-close,
.cart-close-btn,
.pay-modal-close,
.profile-close-btn,
.auth-back-btn,
.auth-close-btn,
.lightbox-close,
.mob-close,
.scroll-top-btn,
.trending-slider-controls button,
.pay-qty-ctrl button,
.buy-qty-ctrl-old button,
.notif-close-btn {
    border-radius: var(--ui-radius-icon) !important;
}

/* Carousel pagination indicators are <button> elements but they are not
   controls a user taps for an action - they stay round. */
.banner-dot,
.offer-dot,
.t-dot,
.ui-keep-round {
    border-radius: 999px !important;
}

/* Text-entry controls share the same corner treatment as buttons; checkboxes,
   radios and switches are excluded because their own styling draws the control.
   No !important: a page that genuinely wants a different field shape can still
   override this. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border-radius: var(--ui-radius);
}

/* Links that are styled as actions rather than as inline text. */
.cta,
.back-link,
.backnav a,
.offline-actions a {
    border-radius: var(--ui-radius) !important;
}

/* The notifications drawer is injected by js/notifications.js with 4px of
   padding, which left its close control 22px wide - under the 24px floor. */
.notif-close-btn {
    min-width: 30px;
    min-height: 30px;
}

.notif-btn-clear {
    min-height: 30px;
}

/* ════ 4. CONSISTENT HEIGHTS ════════════════════════════════════════════ */
/* Only text controls get a min-height; icon buttons keep their own square
   box, and the app already enforces 44px on touch surfaces. */
.btn,
.btn-primary,
.btn-secondary,
.btn-gold,
.btn-main,
.btn-soft,
.btn-shop,
.btn-move-cart,
.btn-remove-wish,
.btn-pay-now,
.btn-pay-main,
.btn-auth-primary,
.btn-auth-google,
.btn-parlour-main,
.btn-parlour-call,
.btn-form,
.btn-add-product,
.btn-add-highlight,
.btn-remove-highlight,
.seller-btn-action,
.ac-btn-save,
.ac-photo-picker-btn,
.login-btn,
.cta,
.back-link,
.tab-btn,
.tb-btn,
.checkout-btn,
.festive-offer-cta,
.parlour-touch-btn,
.offline-actions a {
    min-height: var(--ui-h-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    vertical-align: middle;
}

.btn-sm,
.btn-compact,
.pg-btn,
.pgn-btn,
.page-btn,
.seo-pagination-link,
.prod-cat-pill,
.tab-row,
.mobile-nav-btn {
    min-height: var(--ui-h-sm);
}

/* ════ 5. BUTTON VARIANTS ══════════════════════════════════════════════ */
/* The seven variants the design system asks for. Legacy classes above are
   normalised in place; new markup should use these. */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--ui-h-md);
    padding: 0 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--ui-radius);
    font-family: var(--ui-font);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ui-t), border-color var(--ui-t), box-shadow var(--ui-t), color var(--ui-t), opacity var(--ui-t);
}

.ui-btn--primary {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-deep));
    color: #fff;
}

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

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

.ui-btn--outline {
    background: transparent;
    border-color: var(--ui-primary);
    color: var(--ui-primary);
}

.ui-btn--outline:hover {
    background: rgba(232, 93, 36, .07);
}

.ui-btn--icon {
    min-height: var(--ui-h-sm);
    width: var(--ui-h-sm);
    padding: 0;
    border-radius: var(--ui-radius-icon);
    background: var(--ui-surface);
    border-color: var(--ui-line);
    color: var(--ui-ink);
}

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

.ui-btn--success {
    background: var(--ui-success);
    color: #fff;
}

.ui-btn--compact {
    min-height: 30px;
    padding: 0 .7rem;
    font-size: .78rem;
}

/* ════ 6. DISABLED AND LOADING STATES ══════════════════════════════════ */
/* Disabled was expressed five different ways (.3/.4/.45/.5/.6 opacity, two
   different cursors). One contract now covers every control, including the
   aria-disabled cards that were only dimmed by a container class. */
:where(button, [role="button"], .btn, .ui-btn, input[type="button"], input[type="submit"], select)[disabled],
:where(button, [role="button"], .btn, .ui-btn)[aria-disabled="true"],
:where(a.btn)[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Add .ui-loading to any control while an async action runs: the label is
   hidden and a spinner takes its place, so width never jumps. */
.ui-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.ui-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ui-spin .7s linear infinite;
    color: #fff;
}

.ui-btn--secondary.ui-loading::after,
.ui-btn--outline.ui-loading::after,
.btn-soft.ui-loading::after,
.tab-btn.ui-loading::after {
    color: var(--ui-ink);
}

[data-ui-theme="dark"] .btn.ui-loading::after,
[data-ui-theme="dark"] .tb-btn.ui-loading::after {
    color: #fff;
}

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

/* ════ 7. FORM CONTROLS ════════════════════════════════════════════════ */
/* Phones were inheriting 12-14px field text, which makes iOS zoom the whole
   page on focus. */
@media (max-width: 768px) {
    /* Below 16px, iOS zooms the whole page when a field takes focus. The
       per-page classes are more specific than this selector, so the override
       has to be explicit - otherwise it silently never applies. */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Tick boxes were 13px everywhere, including the admin flags. */
    input[type="checkbox"],
    input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--ui-primary);
    }

    /* The header location chip sat exactly on the 24px floor (23.x measured),
       which is the slimmest possible margin for a thumb target. */
    .location-pill {
        min-height: 32px;
    }

    /* Card controls were 28px squares on phones - above the 24px floor but
       too small to hit reliably over a grid. */
    .add-to-cart,
    .trending-add,
    .wish-btn,
    .icon-btn,
    .search-go-btn {
        min-height: 36px;
        min-width: 36px;
    }
}

/* One error affordance for every surface; the storefront already used
   .input-error, the dashboards had none. */
.input-error,
.ui-field-error {
    border-color: var(--ui-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18) !important;
}

/* ════ 8. MOTION AND IMAGE HYGIENE ═════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Every product tile is a fixed box with a background image; without this an
   oversized upload pushes the card open. */
img {
    max-width: 100%;
    height: auto;
}