/* =========================================================
   Theme components: buttons, cards and form controls on every inner page
   (shop, product, stay, day trips, cart, checkout, account, blog ...).

   Each theme sets its own tokens below; the rules after them apply the
   tokens to the Tailwind-styled buttons/cards used across the site, so the
   whole site follows the selected theme. Premium (theme2) and Classic
   (theme1) are intentionally left as they are.
========================================================= */

/* ---------- Tokens per theme ---------- */
body.th-theme3 {
    --th-btn: var(--brand-btn-background, #242424);
    --th-btn-text: var(--brand-btn-text, #ffffff);
    --th-btn-hover: var(--brand-primary, #f7bd00);
    --th-btn-hover-text: var(--brand-on-primary, #242424);
    --th-btn-radius: 5px;
    --th-btn-transform: uppercase;
    --th-btn-spacing: 0.04em;
    --th-btn-weight: 700;
    --th-btn-font: "Poppins", "Open Sans", "Cairo", sans-serif;
    --th-radius: 8px;
    --th-border: color-mix(in srgb, var(--brand-primary, #f7bd00) 22%, #cdc4ac);
    --th-card-shadow: 0 10px 28px -16px rgba(36, 36, 36, 0.35);
    --th-focus: var(--brand-primary, #f7bd00);
    --th-heading-font: "Playfair Display", Georgia, "Cairo", serif;
}

body.th-minimal {
    --th-btn-hover: #444444;
    --th-btn-hover-text: #ffffff;
    --th-btn-transform: none;
    --th-btn-spacing: 0.01em;
    --th-btn-weight: 600;
    --th-btn-font: inherit;
    --th-card-shadow: none;
    --th-focus: #111111;
    --th-heading-font: inherit;
}

body.th-bold {
    --th-btn-hover: #22d3ee;
    --th-btn-hover-text: #09090f;
    --th-btn-transform: none;
    --th-btn-spacing: 0;
    --th-btn-weight: 700;
    --th-btn-font: inherit;
    --th-card-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
    --th-focus: var(--th-accent);
    --th-heading-font: inherit;
}

body.th-editorial {
    --th-btn-hover: #9a3412;
    --th-btn-hover-text: #faf6ef;
    --th-btn-transform: uppercase;
    --th-btn-spacing: 0.1em;
    --th-btn-weight: 600;
    --th-btn-font: inherit;
    --th-card-shadow: none;
    --th-focus: #9a3412;
    --th-heading-font: Georgia, "Cairo", serif;
}

body.th-boutique {
    --th-btn-hover: #444444;
    --th-btn-hover-text: #ffffff;
    --th-btn-transform: uppercase;
    --th-btn-spacing: 0.12em;
    --th-btn-weight: 600;
    --th-btn-font: inherit;
    --th-card-shadow: none;
    --th-focus: #1a1a1a;
    --th-heading-font: inherit;
}

/* ---------- Buttons (dark / coloured Tailwind buttons) ---------- */
body:is(.th-theme3, .th-minimal, .th-bold, .th-editorial, .th-boutique) main :is(a, button):is(
        [class*="bg-slate-900"], [class*="bg-slate-800"], [class*="bg-gray-900"], [class*="bg-gray-800"],
        [class*="bg-black"], [class*="bg-neutral-900"], [class*="bg-zinc-900"],
        [class*="bg-green-600"], [class*="bg-green-700"], [class*="bg-green-800"], [class*="bg-green-900"],
        [class*="bg-emerald-600"], [class*="bg-emerald-700"], [class*="bg-emerald-800"],
        [class*="bg-indigo-600"], [class*="bg-indigo-700"], [class*="bg-blue-600"], [class*="bg-blue-700"],
        [class*="from-black"], [class*="from-slate-900"]
    ):not(.hk-btn):not(.hk-buy) {
    background: var(--th-btn);
    color: var(--th-btn-text);
    border-radius: var(--th-btn-radius);
    border-color: transparent;
    font-family: var(--th-btn-font);
    font-weight: var(--th-btn-weight);
    letter-spacing: var(--th-btn-spacing);
    text-transform: var(--th-btn-transform);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

body:is(.th-theme3, .th-minimal, .th-bold, .th-editorial, .th-boutique) main :is(a, button):is(
        [class*="bg-slate-900"], [class*="bg-slate-800"], [class*="bg-gray-900"], [class*="bg-gray-800"],
        [class*="bg-black"], [class*="bg-neutral-900"], [class*="bg-zinc-900"],
        [class*="bg-green-600"], [class*="bg-green-700"], [class*="bg-green-800"], [class*="bg-green-900"],
        [class*="bg-emerald-600"], [class*="bg-emerald-700"], [class*="bg-emerald-800"],
        [class*="bg-indigo-600"], [class*="bg-indigo-700"], [class*="bg-blue-600"], [class*="bg-blue-700"],
        [class*="from-black"], [class*="from-slate-900"]
    ):not(.hk-btn):not(.hk-buy):hover:not(:disabled) {
    background: var(--th-btn-hover);
    color: var(--th-btn-hover-text);
}

/* Light outlined buttons (white background + border) */
body:is(.th-theme3, .th-minimal, .th-bold, .th-editorial, .th-boutique) main :is(a, button):is(
        [class*="bg-white"][class*="border"], [class*="border-slate-300"], [class*="border-gray-300"]
    ):is([class*="rounded-full"], [class*="rounded-xl"], [class*="rounded-lg"], [class*="rounded-md"]):not(input):not(select):not(textarea) {
    border-radius: var(--th-btn-radius);
}

/* ---------- Cards ---------- */
body:is(.th-theme3, .th-minimal, .th-bold, .th-editorial, .th-boutique) main :is(div, article, section, aside, li, form, a):is(
        [class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"], [class*="rounded-lg"]
    )[class*="border"]:not([class*="border-dashed"]):not([class*="border-0"]):not(.hk-card):not(.hk-product) {
    border-radius: var(--th-radius);
    border-color: var(--th-border);
    box-shadow: var(--th-card-shadow);
}

/* Soft pill labels/badges keep the theme's corner style */
body:is(.th-theme3, .th-editorial, .th-boutique, .th-minimal) main span[class*="rounded-full"][class*="bg-"] {
    border-radius: var(--th-btn-radius);
}

/* ---------- Form controls ---------- */
body:is(.th-theme3, .th-minimal, .th-bold, .th-editorial, .th-boutique) main :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
    border-radius: var(--th-btn-radius);
}

body:is(.th-theme3, .th-minimal, .th-bold, .th-editorial, .th-boutique) main :is(input, select, textarea):focus {
    border-color: var(--th-focus);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-focus) 28%, transparent);
}

/* ---------- Headings ---------- */
body:is(.th-theme3, .th-editorial) main :is(h1, h2, h3) {
    font-family: var(--th-heading-font);
}

/* ---------- Pagination ---------- */
body:is(.th-theme3, .th-minimal, .th-bold, .th-editorial, .th-boutique) main nav[role="navigation"] :is(a, span[aria-current] > span) {
    border-radius: var(--th-btn-radius);
}