/*
 * One look for every button and label of the storefront, in both designs (classic and modern) and both
 * themes. Loaded after each page's own styles (header.php prints it at the end of the header; pages
 * without that header link it themselves), so it settles the shape and type the pages left to chance:
 *
 * - Type: Inter, the font of the rest of the site, instead of the typewriter Courier New.
 * - Main actions: a solid pill in the store's button colour (black unless Admin chose one).
 * - Other actions: an outlined pill.
 * - Sentence case, no letter spacing, 44px tall so a thumb hits it on a phone.
 *
 * Colours are not forced (no !important): a button that is meant to warn (cancel, remove) keeps its own.
 */

:root {
    --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ui-btn-bg: var(--theme-button-bg, #111827);
    --ui-btn-ink: var(--theme-button-text, #ffffff);
    --ui-btn-line: rgba(17, 24, 39, 0.16);
    --ui-btn-ghost-ink: #111827;
    --ui-btn-ghost-bg: #ffffff;
    --ui-focus: rgba(17, 24, 39, 0.28);
}
html[data-storefront-theme="dark"] {
    --ui-btn-bg: var(--theme-button-bg, #f4f4f5);
    --ui-btn-ink: var(--theme-button-text, #111827);
    --ui-btn-line: rgba(244, 244, 245, 0.24);
    --ui-btn-ghost-ink: #f4f4f5;
    --ui-btn-ghost-bg: transparent;
    --ui-focus: rgba(244, 244, 245, 0.4);
}

/* Small labels that used the typewriter font keep their size and case, in Inter. */
.mono-text, .mono-heading, .mono-accent {
    font-family: var(--ui-font) !important;
    letter-spacing: 0.06em !important;
}

/* ------------------------------------------------------------------ every button: shape and type */
:is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action, .point-package-buy,
    .pkg-btn, .subscribe-btn, .btn-apply, .btn-outline, .outline-btn, .btn-clear, .user-pill-btn, .coupon-row button,
    .search-overlay-form button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 999px !important;
    font-family: var(--ui-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, transform .12s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}
:is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action, .point-package-buy,
    .pkg-btn, .subscribe-btn, .btn-apply, .btn-outline, .outline-btn, .btn-clear, .user-pill-btn, .coupon-row button,
    .search-overlay-form button) i {
    font-size: 0.95em;
}
:is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action, .point-package-buy,
    .pkg-btn, .subscribe-btn, .btn-apply, .btn-outline, .outline-btn, .btn-clear, .user-pill-btn, .coupon-row button,
    .search-overlay-form button):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ui-focus);
}
:is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action, .point-package-buy,
    .pkg-btn, .subscribe-btn, .btn-apply, .btn-outline, .outline-btn, .btn-clear, .user-pill-btn, .coupon-row button,
    .search-overlay-form button):active:not(:disabled) {
    transform: scale(0.97);
}

/* ------------------------------------------------------------------ main actions: solid */
:is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action:not(.is-secondary),
    .point-package-buy, .pkg-btn, .subscribe-btn, .btn-apply, .search-overlay-form button) {
    border: 1px solid var(--ui-btn-bg);
    background: var(--ui-btn-bg);
    color: var(--ui-btn-ink);
}
:is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action:not(.is-secondary),
    .point-package-buy, .pkg-btn, .subscribe-btn, .btn-apply, .search-overlay-form button):hover:not(:disabled) {
    border-color: var(--ui-btn-bg);
    background: var(--ui-btn-bg);
    color: var(--ui-btn-ink);
    opacity: 0.86;
}

/* ------------------------------------------------------------------ other actions: outlined */
:is(.btn-outline, .outline-btn, .btn-clear, .user-pill-btn, .coupon-row button, .voucher-action.is-secondary) {
    border: 1px solid var(--ui-btn-line);
    background: var(--ui-btn-ghost-bg);
    color: var(--ui-btn-ghost-ink);
}
:is(.btn-outline, .outline-btn, .btn-clear, .user-pill-btn, .coupon-row button, .voucher-action.is-secondary):hover:not(:disabled) {
    border-color: var(--ui-btn-ghost-ink);
    background: var(--ui-btn-ghost-bg);
    color: var(--ui-btn-ghost-ink);
}

/* ------------------------------------------------------------------ unavailable */
:is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action, .point-package-buy,
    .pkg-btn, .subscribe-btn, .btn-apply, .btn-outline, .outline-btn, .btn-clear, .user-pill-btn, .coupon-row button):disabled {
    border-color: #e4e4e7;
    background: #e4e4e7;
    color: #71717a;
    opacity: 1;
    cursor: not-allowed;
    transform: none;
}
html[data-storefront-theme="dark"] :is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action, .point-package-buy,
    .pkg-btn, .subscribe-btn, .btn-apply, .btn-outline, .outline-btn, .btn-clear, .user-pill-btn, .coupon-row button):disabled {
    border-color: #27272a;
    background: #27272a;
    color: #a1a1aa;
}

/* ------------------------------------------------------------------ buttons side by side
 * <div class="ui-actions"> around two or three actions (a link, a button, or a form holding one): one row,
 * labels on one line. On a phone the buttons share the row in equal columns instead of breaking a label
 * (a grid, because flex: 1 would still count each button's own padding and make the widths unequal). */
.ui-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.ui-actions > form { display: flex; margin: 0; }
.ui-actions > :is(a, button), .ui-actions > form > button { margin: 0; white-space: nowrap; }
@media (max-width: 600px) {
    .ui-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .ui-actions > :is(a, button), .ui-actions > form > button { width: 100%; padding-left: 12px; padding-right: 12px; }
}

/* A small action inside a list or table row (withdraw a request, cancel a payout): the same pill, smaller. */
.ui-btn-sm:is(.btn-black-solid, .btn-outline, .outline-btn) { min-height: 34px; padding: 6px 14px; font-size: 13px !important; }

/* The search box's own button is a word beside the field: smaller, but the same pill. */
.search-overlay-form button { min-height: 40px; padding: 8px 18px; }

@media (max-width: 600px) {
    :is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action, .point-package-buy,
        .pkg-btn, .subscribe-btn, .btn-apply, .btn-outline, .outline-btn, .btn-clear, .user-pill-btn) {
        min-height: 46px;
    }
}
@media (prefers-reduced-motion: reduce) {
    :is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action, .point-package-buy,
        .pkg-btn, .subscribe-btn, .btn-apply, .btn-outline, .outline-btn, .btn-clear, .user-pill-btn, .coupon-row button,
        .search-overlay-form button) { transition: none; }
}

/* ------------------------------------------------------------------ touch screens: one tap is enough
 * - manipulation: the browser does not wait to see whether a tap is the start of a double-tap zoom, so
 *   the tap goes through at once (pinch zoom still works).
 * - A finger has no hover. A hover look would stay on after the tap, so a button looks pressed or greyed
 *   and gets tapped again; on a touch screen the buttons keep their resting look. */
a, button, label, summary, select, input, textarea, [role="button"], [onclick] { touch-action: manipulation; }
@media (hover: none) {
    :is(.btn-black-solid, .btn-add-cart, .btn-checkout, .btn-auth-primary, .btn-submit, .voucher-action:not(.is-secondary),
        .point-package-buy, .pkg-btn, .subscribe-btn, .btn-apply, .search-overlay-form button):hover:not(:disabled) {
        opacity: 1;
    }
    :is(.btn-outline, .outline-btn, .btn-clear, .user-pill-btn, .coupon-row button, .voucher-action.is-secondary):hover:not(:disabled) {
        border-color: var(--ui-btn-line);
    }
}