/*
 * Lotaja theme UI adapter.
 *
 * Pages and components that Lotaja owns (the cart drawer, cart, checkout, login, orders, the "added to cart"
 * popup…) have their own button styles. On a shop that uses a storefront theme this file re-skins every one of
 * them from the theme's own settings, so a "Checkout now" button looks like the rest of that theme.
 *
 * It is only ever loaded by the themed <head> (resources/views/theme/partials/head.blade.php). Shops that are
 * not on a theme never receive it, so their buttons are untouched.
 *
 * It reads these variables, which Lotaja emits from the theme's settings and its theme.json `buttons` block:
 *   --color-primary, --color-primary-dark, --color-ink, --color-surface, --color-border, --color-tint, --color-accent
 *   --lotaja-on-primary, --lotaja-btn-radius, --lotaja-btn-icon-radius, --lotaja-btn-weight,
 *   --lotaja-btn-transform, --lotaja-btn-tracking, --lotaja-btn-secondary-border, --lotaja-btn-secondary-ink
 *
 * Fields and cards read --lotaja-input-radius and --lotaja-card-radius.
 *
 * Only colour, border, corner shape and type treatment change. Sizes and spacing stay as each page set them, so
 * no layout moves.
 *
 * Lotaja's own button styles are !important and nested (".shop-ui-surface .app-button"), so these rules are
 * !important too and every selector starts "body:not(#theme-ui)". The :not(#id) never excludes anything (nothing
 * has that id); it only raises specificity so the theme's look reliably wins over the defaults.
 */
:root {
    --ui-primary: var(--color-primary, #111827);
    --ui-primary-dark: var(--color-primary-dark, #000000);
    --ui-on-primary: var(--lotaja-on-primary, #ffffff);
    --ui-ink: var(--color-ink, #111827);
    --ui-surface: var(--color-surface, #ffffff);
    --ui-border: var(--color-border, #e5e7eb);
    --ui-tint: var(--color-tint, #f3f4f6);
    --ui-accent: var(--color-accent, #f59e0b);
    --ui-radius: var(--lotaja-btn-radius, 12px);
    --ui-icon-radius: var(--lotaja-btn-icon-radius, 999px);
    --ui-weight: var(--lotaja-btn-weight, 600);
    --ui-transform: var(--lotaja-btn-transform, none);
    --ui-tracking: var(--lotaja-btn-tracking, normal);
    --ui-secondary-border: var(--lotaja-btn-secondary-border, var(--ui-border));
    --ui-card-radius: var(--lotaja-card-radius, 20px);
    --ui-input-radius: var(--lotaja-input-radius, 12px);
    --ui-secondary-ink: var(--lotaja-btn-secondary-ink, var(--ui-ink));
}

/* ---- Selected states and icon tiles that share the button colour (colour only) ---------------------------------- */
body:not(#theme-ui) label.bg-slate-950,
body:not(#theme-ui) summary.bg-slate-950,
body:not(#theme-ui) div[class*="size-"].bg-slate-950 {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}

/* ---- Primary actions: filled with the theme's brand colour ------------------------------------------------- */
body:not(#theme-ui) .app-button--primary,
body:not(#theme-ui) .app-button--custom-primary,
body:not(#theme-ui) .shop-home-cart__primary-action,
body:not(#theme-ui) .shop-product-form__submit,
body:not(#theme-ui) .sbn-cart-popup__btn--primary,
body:not(#theme-ui) .btn-dark,
body:not(#theme-ui) button.bg-slate-950,
body:not(#theme-ui) a.bg-slate-950,
body:not(#theme-ui) button[class*="bg-[#2d3192]"],
body:not(#theme-ui) a[class*="bg-[#2d3192]"] {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
    border-radius: var(--ui-radius) !important;
    font-weight: var(--ui-weight) !important;
    text-transform: var(--ui-transform) !important;
    letter-spacing: var(--ui-tracking) !important;
    box-shadow: none !important;
}

body:not(#theme-ui) .app-button--primary:hover:not(:disabled),
body:not(#theme-ui) .app-button--custom-primary:hover:not(:disabled),
body:not(#theme-ui) .shop-home-cart__primary-action:hover,
body:not(#theme-ui) .shop-product-form__submit:hover:not(:disabled),
body:not(#theme-ui) .sbn-cart-popup__btn--primary:hover,
body:not(#theme-ui) .btn-dark:hover,
body:not(#theme-ui) button.bg-slate-950:hover:not(:disabled),
body:not(#theme-ui) a.bg-slate-950:hover,
body:not(#theme-ui) button[class*="bg-[#2d3192]"]:hover:not(:disabled),
body:not(#theme-ui) a[class*="bg-[#2d3192]"]:hover {
    background: var(--ui-primary-dark) !important;
    border-color: var(--ui-primary-dark) !important;
    color: var(--ui-on-primary) !important;
}

/* ---- Secondary actions: outlined ----------------------------------------------------------------------------- */
body:not(#theme-ui) .app-button--secondary,
body:not(#theme-ui) .app-button--outlined,
body:not(#theme-ui) .app-button--custom-secondary,
body:not(#theme-ui) .shop-home-cart__secondary-action,
body:not(#theme-ui) .sbn-cart-popup__btn:not(.sbn-cart-popup__btn--primary),
body:not(#theme-ui) .btn-outline-dark,
body:not(#theme-ui) button[class*="rounded-full"][class*="border-slate-200"]:not([class*="size-"]),
body:not(#theme-ui) a[class*="rounded-full"][class*="border-slate-200"]:not([class*="size-"]) {
    background: var(--ui-surface) !important;
    border-color: var(--ui-secondary-border) !important;
    color: var(--ui-secondary-ink) !important;
    border-radius: var(--ui-radius) !important;
    font-weight: var(--ui-weight) !important;
    text-transform: var(--ui-transform) !important;
    letter-spacing: var(--ui-tracking) !important;
    box-shadow: none !important;
}

body:not(#theme-ui) .app-button--secondary:hover:not(:disabled),
body:not(#theme-ui) .app-button--outlined:hover:not(:disabled),
body:not(#theme-ui) .app-button--custom-secondary:hover:not(:disabled),
body:not(#theme-ui) .shop-home-cart__secondary-action:hover,
body:not(#theme-ui) .sbn-cart-popup__btn:not(.sbn-cart-popup__btn--primary):hover,
body:not(#theme-ui) .btn-outline-dark:hover,
body:not(#theme-ui) button[class*="rounded-full"][class*="border-slate-200"]:not([class*="size-"]):hover:not(:disabled),
body:not(#theme-ui) a[class*="rounded-full"][class*="border-slate-200"]:not([class*="size-"]):hover {
    background: var(--ui-tint) !important;
    border-color: var(--ui-secondary-ink) !important;
    color: var(--ui-secondary-ink) !important;
}

/* ---- Small icon buttons (close, remove, quantity steppers) --------------------------------------------------- */
body:not(#theme-ui) .shop-home-header__icon-button,
body:not(#theme-ui) .shop-home-cart__remove,
body:not(#theme-ui) .shop-product-quantity__button,
body:not(#theme-ui) .sbn-cart-popup__close,
body:not(#theme-ui) button[data-sbn-qty-page-decrement],
body:not(#theme-ui) button[data-sbn-qty-page-increment],
body:not(#theme-ui) button[class*="size-1"][class*="border-slate-200"] {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-ink) !important;
    border-radius: var(--ui-icon-radius) !important;
}

body:not(#theme-ui) .shop-home-header__icon-button:hover,
body:not(#theme-ui) .shop-home-cart__remove:hover,
body:not(#theme-ui) .shop-product-quantity__button:hover:not(:disabled),
body:not(#theme-ui) .sbn-cart-popup__close:hover,
body:not(#theme-ui) button[data-sbn-qty-page-decrement]:hover:not(:disabled),
body:not(#theme-ui) button[data-sbn-qty-page-increment]:hover:not(:disabled),
body:not(#theme-ui) button[class*="size-1"][class*="border-slate-200"]:hover:not(:disabled) {
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary) !important;
}

/* ---- Text-style actions ---------------------------------------------------------------------------------------- */
body:not(#theme-ui) .shop-home-cart__clear,
body:not(#theme-ui) .shop-home-cart__item-title:hover {
    color: var(--ui-primary) !important;
}

/* ---- Everything keyboard-focusable shows the theme's highlight ------------------------------------------------- */
body:not(#theme-ui) .app-button:focus-visible,
body:not(#theme-ui) .shop-home-cart__primary-action:focus-visible,
body:not(#theme-ui) .shop-home-cart__secondary-action:focus-visible,
body:not(#theme-ui) .sbn-cart-popup__btn:focus-visible,
body:not(#theme-ui) button[class*="rounded-full"]:focus-visible,
body:not(#theme-ui) a[class*="rounded-full"]:focus-visible {
    outline: 3px solid var(--ui-accent) !important;
    outline-offset: 2px !important;
}

/* ---- Form fields: theme border, corners and focus ring ------------------------------------------------------- */
body:not(#theme-ui) input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="password"], [type="search"], [type="url"], [type="date"], :not([type])):is([class*="border-slate-200"], [class*="border-gray-200"], .form-control),
body:not(#theme-ui) select:is([class*="border-slate-200"], [class*="border-gray-200"], .form-control) {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-input-radius) !important;
}

body:not(#theme-ui) textarea:is([class*="border-slate-200"], [class*="border-gray-200"], .form-control) {
    border-color: var(--ui-border) !important;
    border-radius: min(var(--ui-input-radius), 16px) !important;
}

body:not(#theme-ui) :is(input, select, textarea):is([class*="border-slate-200"], [class*="border-gray-200"], .form-control):focus {
    border-color: var(--ui-primary) !important;
    outline: 2px solid var(--ui-primary) !important;
    outline-offset: 0 !important;
}

body:not(#theme-ui) input:is([type="checkbox"], [type="radio"]) {
    accent-color: var(--ui-primary);
}

/* ---- Cards and panels ------------------------------------------------------------------------------------------ */
body:not(#theme-ui) :is(div, section, aside, article, form, details, label)[class*="rounded-["][class*="border-slate-200"]:not(.bg-slate-950),
body:not(#theme-ui) .shop-home-cart__summary,
body:not(#theme-ui) .shop-home-cart__item {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-card-radius) !important;
}

/* Selected delivery and payment cards: the checkout script swaps their border-slate-200 class for the selected classes,
   so they need their own rule to keep the theme's card corners. */
body:not(#theme-ui) label[class*="rounded-["]:is(.bg-slate-950, [class*="border-slate-900"]),
body:not(#theme-ui) label[data-sbn-checkout-payment-option],
body:not(#theme-ui) label[data-sbn-retry-payment-option] {
    border-radius: var(--ui-card-radius) !important;
}

body:not(#theme-ui) :is(div, section, aside, article, form)[class*="rounded-["][class*="border-slate-200"][class*="bg-white"] {
    background: var(--ui-surface) !important;
}

body:not(#theme-ui) :is(div, section, label)[class*="border-dashed"][class*="border-slate-200"] {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-card-radius) !important;
}

body:not(#theme-ui) .sbn-cart-popup {
    border-radius: var(--ui-card-radius) !important;
}