/*--------------------------------------
  3. Button Styles

  Every generic button rule in the theme lives in this file. Before, the same
  control was described in three places that loaded in sequence — the bare
  element in theme.css, `.button` again in woocommerce.css, and the CTA here —
  so the winner depended on load order rather than on intent, and a change in
  one file silently repainted buttons styled by another.

  What belongs here: anything that describes a button *as a button* — the bare
  element, submit-type inputs, the `.button` CTA, its modifiers and its
  states.

  What does not: where a specific component puts one. `.quantity button`,
  `.wc-proceed-to-checkout .checkout-button` and friends stay beside the
  component they belong to, and should tweak (size, position) rather than
  restate the skin.
--------------------------------------*/

/* ── Element defaults ────────────────────────────────────────
   The neutral button: what you get from a bare <button> with no class. The
   CTA below deliberately overrides it. */
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    font-family: var(--pco-body-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--pco-dark-color);
    background-color: var(--pco-surface-color);
    border: 1px solid var(--pco-border-color);
    border-radius: .75rem;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: button;
}

button:hover:not(:disabled) {
    color: var(--pco-primary-color);
    background-color: color-mix(in srgb, var(--pco-primary-color) 6%, transparent);
    border-color: color-mix(in srgb, var(--pco-primary-color) 40%, transparent);
}

button:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pco-primary-color) 20%, transparent);
    border-color: var(--pco-primary-color);
}


button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Submit / reset / button inputs ──────────────────────────
   Same treatment for the input flavours, so a form built with
   <input type="submit"> matches one built with <button>. */
input[type="submit"],
.input[type="submit"],
input[type="reset"],
.input[type="reset"],
input[type="button"],
.input[type="button"] {
    width: auto;
    padding: 11px 24px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
}

input[type="submit"],
.input[type="submit"] {
    background-color: var(--pco-primary-color);
    border-color: var(--pco-primary-color);
    color: var(--pco-white-color);
}

input[type="submit"]:hover,
.input[type="submit"]:hover {
    background-color: var(--pco-primary-dark);
    border-color: var(--pco-primary-dark);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pco-primary-color) 30%, transparent);
}

input[type="reset"],
.input[type="reset"],
input[type="button"],
.input[type="button"] {
    background-color: var(--pco-surface-color);
    color: var(--pco-dark-color);
}

input[type="reset"]:hover,
.input[type="reset"]:hover,
input[type="button"]:hover,
.input[type="button"]:hover {
    background-color: var(--pco-border-color);
}

/* ── The CTA: .button ────────────────────────────────────────
   WooCommerce puts `.button` on every action it renders, so this is the
   class most of the site's buttons actually carry.

   `.primary_button` and the old `.rounded` / `.outline` / `.dark` /
   `.small-button` variants were removed once the last markup using them was
   migrated — the modifiers below cover all of it: `.button-pill` for the old
   `.rounded`, `.button-outline`, `.button-dark`, `.button-sm`. */
.button {
    /* The knobs every modifier below turns. Defaults here are the `md` solid
       primary button, so `.button` on its own renders exactly as it always
       has — the modifiers are additive, not a new baseline. */
    --btn-color: var(--pco-primary-color);
    --btn-on-color: var(--pco-white-color);
    --btn-bg: var(--btn-color);
    --btn-fg: var(--btn-on-color);
    --btn-border: var(--btn-color);
    --btn-py: 12px;
    --btn-px: 20px;
    --btn-fs: 14px;
    --btn-gap: 8px;
    --btn-radius: .75rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--btn-fs);
    line-height: 1.25rem;
    font-weight: 500;
    padding: var(--btn-py) var(--btn-px);
    color: var(--btn-fg);
    background-color: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius);
    text-align: center;
    outline: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent inset;
    filter: brightness(1);
    gap: var(--btn-gap);
    cursor: pointer;
    /* Anchors carry `.button` more often than <button> does, so the base has to
       kill the underline itself — every migrated call site used to ship
       `no-underline` alongside the utilities for exactly this. */
    text-decoration: none;
    /* `text-transform: capitalize` used to live here. It fought the copy:
       WordPress and WooCommerce write labels in sentence case, so it rendered
       "Add To Cart", "Back To Dashboard", "Create A Course". Labels are the
       template's business, not the stylesheet's. */
    transition: color .2s ease, background-color .2s ease,
                border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* The previous rule repainted the same three colours it already had, so
   hovering any `.button` changed nothing. Darkening the accent gives every
   colour modifier a hover for free, since they all feed the same variable.
   The modifiers below need only set the variables; this is where they land.

   The three properties are re-declared here rather than left to the base rule,
   and that is load-bearing. `.button` sits on an <a> more often than not, and
   theme.css carries `a:hover { color: var(--pco-primary-color) }` — one class
   and one pseudo-class, which outweighs `.button`'s single class. With the
   colour declared only in the base rule, hovering repainted the label primary
   purple on a darkened purple background, and the text went invisible.
   Declaring it at hover weight keeps the win here. */
.button:not(:disabled):not(.button-disabled):hover {
    --btn-bg: color-mix(in srgb, var(--btn-color) 85%, #000);
    --btn-border: color-mix(in srgb, var(--btn-color) 85%, #000);
    --btn-fg: var(--btn-on-color);

    background-color: var(--btn-bg);
    border-color: var(--btn-border);
    color: var(--btn-fg);
}

/* ============================================================
   .button — the naming system

   One base class plus single-purpose modifiers, combined as needed:

       <a class="button button-danger button-outline button-sm button-pill">

   Modifiers do one thing each, so they compose instead of multiplying. A
   colour sets `--btn-color`; a style decides how that colour is used (filled,
   outlined, tinted, bare); a size sets padding and type scale; a shape sets
   the radius. That is why 90-odd class names need roughly 60 rules rather
   than one rule per combination.

   Category order below matches the documented system:
   colours, styles, sizes, shapes, width, icons, states, actions,
   authentication, navigation, social.
   ============================================================ */

/* ── Colours ─────────────────────────────────────────────────
   Each one sets the accent and, where the accent is light, the text colour
   that stays readable on it. Nothing else — how the accent gets used is the
   style modifier's job. */

.button-primary   { --btn-color: var(--pco-primary-color); }
.button-secondary { --btn-color: var(--pco-secondary-color); }
.button-tertiary  { --btn-color: color-mix(in srgb, var(--pco-primary-color) 50%, var(--pco-secondary-color)); }
.button-success   { --btn-color: #059669; }
.button-danger    { --btn-color: #dc2626; }
.button-warning   { --btn-color: #f59e0b; --btn-on-color: var(--pco-dark-color); }
.button-info      { --btn-color: #2087dc; }
.button-dark      { --btn-color: var(--pco-dark-color); }
.button-accent    { --btn-color: var(--pco-secondary-color); }
.button-muted     { --btn-color: #9ca3af; }
.button-black     { --btn-color: var(--pco-black-color); }

/* The pale three would otherwise draw a white button on a white page with a
   white border. They keep the accent for hover and focus, and take a visible
   edge of their own. */
.button-light,
.button-neutral,
.button-white {
    --btn-on-color: var(--pco-dark-color);
    --btn-border: var(--pco-border-color);
}

.button-light   { --btn-color: var(--pco-surface-color); }
.button-neutral { --btn-color: var(--pco-border-color); }
.button-white   { --btn-color: var(--pco-white-color); }

/* ── Styles ──────────────────────────────────────────────────
   How the accent is applied. `solid` is the default and is spelled out so it
   can be written explicitly, or used to undo an inherited style. */

.button-solid {
    --btn-bg: var(--btn-color);
    --btn-fg: var(--btn-on-color);
    --btn-border: var(--btn-color);
}

.button-outline {
    --btn-bg: transparent;
    --btn-fg: var(--btn-color);
    --btn-border: var(--btn-color);
}

.button-outline:not(:disabled):not(.button-disabled):hover {
    --btn-bg: var(--btn-color);
    --btn-fg: var(--btn-on-color);
}

/* Tinted: no border, a wash of the accent behind its own text. */
.button-ghost {
    --btn-bg: color-mix(in srgb, var(--btn-color) 12%, transparent);
    --btn-fg: var(--btn-color);
    --btn-border: transparent;
}

.button-ghost:not(:disabled):not(.button-disabled):hover {
    --btn-bg: color-mix(in srgb, var(--btn-color) 22%, transparent);
    --btn-fg: var(--btn-color);
}

/* Reads as a link, still hits like a button. */
.button-link,
.button-text {
    --btn-bg: transparent;
    --btn-fg: var(--btn-color);
    --btn-border: transparent;
    padding-left: 0;
    padding-right: 0;
}

/* The bare styles keep their ground on hover. Without this the base hover
   fills them with the accent and whitens the label, which is the opposite of
   what a link-shaped button is for. */
.button-link:not(:disabled):not(.button-disabled):hover,
.button-text:not(:disabled):not(.button-disabled):hover,
.button-transparent:not(:disabled):not(.button-disabled):hover {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-fg: var(--btn-color);
}

.button-link:not(:disabled):not(.button-disabled):hover { text-decoration: underline; }
.button-text:not(:disabled):not(.button-disabled):hover { opacity: .75; }

.button-transparent {
    --btn-bg: transparent;
    --btn-fg: var(--btn-color);
    --btn-border: transparent;
}

.button-gradient {
    --btn-fg: var(--btn-on-color);
    --btn-border: transparent;
    background-image: linear-gradient(135deg,
        var(--btn-color),
        color-mix(in srgb, var(--btn-color) 55%, var(--pco-secondary-color)));
    background-color: transparent;
}

.button-gradient:not(:disabled):not(.button-disabled):hover { filter: brightness(1.08); }

/* ── Sizes ───────────────────────────────────────────────────
   `md` is the default the base class already carries; it is spelled out so a
   size can be reset back to it. */

.button-xs  { --btn-py: 5px;  --btn-px: 10px; --btn-fs: 11px; --btn-gap: 4px; }
.button-sm  { --btn-py: 8px;  --btn-px: 14px; --btn-fs: 13px; --btn-gap: 6px; }
.button-md  { --btn-py: 12px; --btn-px: 20px; --btn-fs: 14px; --btn-gap: 8px; }
.button-lg  { --btn-py: 14px; --btn-px: 26px; --btn-fs: 16px; --btn-gap: 10px; }
.button-xl  { --btn-py: 17px; --btn-px: 32px; --btn-fs: 17px; --btn-gap: 10px; }
.button-2xl { --btn-py: 20px; --btn-px: 40px; --btn-fs: 19px; --btn-gap: 12px; }

/* ── Shapes ──────────────────────────────────────────────────
   Note `.button-rounded` is the system's medium radius. The older
   `.button.rounded` (no hyphen) is a full pill and is kept further down for
   the markup already using it — hyphen or no hyphen is the difference. */

.button-square  { --btn-radius: 0; }
.button-soft    { --btn-radius: 6px; }
.button-rounded { --btn-radius: .75rem; }
.button-pill    { --btn-radius: 999px; }

.button-circle {
    --btn-radius: 50%;
    --btn-px: var(--btn-py);
    aspect-ratio: 1;
    width: auto;
}

/* ── Width ───────────────────────────────────────────────────*/

.button-auto  { width: auto; }
.button-fit   { width: fit-content; }
.button-full  { width: 100%; }

.button-block {
    display: flex;
    width: 100%;
}

/* ── Icons ───────────────────────────────────────────────────
   `.button-icon` normalises whatever the markup puts inside — <i>, <svg>,
   an inline image — so an icon does not drag the label off its baseline. */

.button-icon > i,
.button-icon > svg,
.button-icon-left > i,
.button-icon-left > svg,
.button-icon-right > i,
.button-icon-right > svg {
    flex-shrink: 0;
    line-height: 1;
    font-size: 1.1em;
}

.button-icon-left  > i:first-child,
.button-icon-left  > svg:first-child { order: -1; }

.button-icon-right > i,
.button-icon-right > svg { order: 1; }

/* Square, label-free. Give it an aria-label in the markup. */
.button-icon-only {
    --btn-px: var(--btn-py);
    aspect-ratio: 1;
    width: auto;
}

.button-icon-only > i,
.button-icon-only > svg { font-size: 1.2em; }

/* ── States ──────────────────────────────────────────────────*/

.button-active,
.button-selected {
    --btn-bg: color-mix(in srgb, var(--btn-color) 88%, #000);
    --btn-border: color-mix(in srgb, var(--btn-color) 88%, #000);
    --btn-fg: var(--btn-on-color);
}

.button-selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-color) 25%, transparent); }

.button-disabled,
.button:disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.button-focus,
.button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-color) 30%, transparent);
}

/* Spinner in place of the label's trailing edge. `.button.loading` (the class
   WooCommerce toggles over AJAX) is kept below and shares this animation. */
.button-loading {
    pointer-events: none;
    position: relative;
    color: transparent;
}

.button-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -.5em 0 0 -.5em;
    border: 2px solid color-mix(in srgb, var(--btn-fg, #fff) 35%, transparent);
    border-top-color: var(--btn-fg, #fff);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

/* ── Actions ─────────────────────────────────────────────────
   Semantic names, so a template says what the button *does* and the palette
   stays one decision. They set a colour (and occasionally a style); anything
   else is still up to the composable modifiers above. */

.button-add,
.button-create,
.button-save,
.button-submit,
.button-send,
.button-confirm,
.button-approve,
.button-update,
.button-upload,
.button-download,
.button-copy,
.button-share,
.button-print { --btn-color: var(--pco-primary-color); }

.button-delete,
.button-remove,
.button-reject { --btn-color: #dc2626; }

.button-search,
.button-filter,
.button-edit,
.button-refresh,
.button-more,
.button-menu,
.button-next,
.button-prev { --btn-color: var(--pco-secondary-color); }

/* Dismissals read as the quiet option, not a second call to action. */
.button-cancel,
.button-close,
.button-clear,
.button-reset,
.button-back {
    --btn-color: var(--pco-dark-color);
    --btn-bg: transparent;
    --btn-fg: var(--btn-color);
    --btn-border: var(--pco-border-color);
}

.button-cancel:not(:disabled):not(.button-disabled):hover,
.button-close:not(:disabled):not(.button-disabled):hover,
.button-clear:not(:disabled):not(.button-disabled):hover,
.button-reset:not(:disabled):not(.button-disabled):hover,
.button-back:not(:disabled):not(.button-disabled):hover {
    --btn-bg: var(--pco-surface-color);
    --btn-fg: var(--btn-color);
    --btn-border: var(--pco-border-color);
}

/* ── Authentication ──────────────────────────────────────────*/

.button-login,
.button-signup,
.button-register,
.button-verify { --btn-color: var(--pco-primary-color); }

.button-logout {
    --btn-color: #dc2626;
    --btn-bg: transparent;
    --btn-fg: var(--btn-color);
    --btn-border: color-mix(in srgb, #dc2626 35%, transparent);
}

.button-logout:not(:disabled):not(.button-disabled):hover {
    --btn-bg: #dc2626;
    --btn-fg: #fff;
}

/* ── Navigation ──────────────────────────────────────────────*/

.button-home,
.button-previous { --btn-color: var(--pco-secondary-color); }

.button-toggle {
    --btn-color: var(--pco-dark-color);
    --btn-bg: transparent;
    --btn-fg: var(--btn-color);
    --btn-border: var(--pco-border-color);
}

.button-toggle:not(:disabled):not(.button-disabled):hover {
    --btn-bg: var(--pco-surface-color);
    --btn-fg: var(--btn-color);
    --btn-border: var(--pco-border-color);
}

/* ── Social ──────────────────────────────────────────────────
   Brand colours, so the accent is right whichever style modifier is used —
   solid for a sign-in row, outline for a share bar. */

.button-facebook  { --btn-color: #1877f2; }
.button-twitter   { --btn-color: #1da1f2; }
.button-x         { --btn-color: #000000; }
.button-instagram { --btn-color: #e1306c; }
.button-youtube   { --btn-color: #ff0000; }
.button-linkedin  { --btn-color: #0a66c2; }
.button-github    { --btn-color: #181717; }

/* Google's guidelines want the mark on white, not on brand blue. */
.button-google {
    --btn-color: #ffffff;
    --btn-on-color: #3c4043;
    --btn-border: #dadce0;
}

/* ── Add-to-cart states ──────────────────────────────────────
   Not legacy: WooCommerce's own add-to-cart script toggles `.added` and
   `.loading` on the button it renders, so these class names are its to
   choose, not ours. `.button-loading` above is the system's equivalent for
   markup we do control. */
.button.added:after {
    content: "\eb81";
    position: absolute;
    right: 7px;
    top: 8px;
    font-family: 'remixicon' !important;
    font-size: 10px;
}

.button.loading:after {
    content: "\f33f";
    position: absolute;
    right: 7px;
    top: 8px;
    font-family: 'remixicon' !important;
    font-size: 10px;
    animation: spin 2s infinite linear;
}