/* =========================================================
   WoS Tools Hub – Button System (FULL PACK)
   Colors: Blue, Green, Red, Orange
   Variants:
     - Gradient
     - Outline
     - Ghost
     - Icon-only
   Modifiers:
     - .btn-wos-sm         (small)
     - .btn-wos-xs         (extra small / ultra compact)
     - .btn-wos-square     (10px radius)
     - .btn-wos-pill       (999px radius)
     - .btn-wos-block      (full width)
     - Disabled styles
   Extras:
     - Square outlined / ghost
     - Icon-only outlined
     - Button groups
   ========================================================= */

/* ---------- Color Tokens ---------- */

:root {
    /* Blue */
    --wos-blue-light: #38bdf8;
    --wos-blue-dark: #2563eb;
    --wos-blue-border: rgba(148, 197, 255, 0.6);
    /* Green */
    --wos-green-light: #22c55e;
    --wos-green-dark: #0d9488;
    --wos-green-border: rgba(34, 197, 94, 0.45);
    /* Red */
    --wos-red-light: #ef4444;
    --wos-red-dark: #b91c1c;
    --wos-red-border: rgba(239, 68, 68, 0.5);
    /* Orange */
    --wos-orange-light: #fb923c;
    --wos-orange-dark: #f97316;
    --wos-orange-border: rgba(251, 146, 60, 0.55);
}

/* =========================================================
   COMMON BASE / MODIFIERS
   ========================================================= */

.btn-wos-base {
    font-weight: 600;
    padding-inline: 1.4rem;
    padding-block: 0.55rem;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    letter-spacing: 0.5px;
    transition: 0.2s ease;
    position: relative;
}

/* Size modifiers */
.btn-wos-sm {
    padding-inline: 0.9rem !important;
    padding-block: 0.32rem !important;
    font-size: 0.78rem !important;
}

.btn-wos-xs {
    padding-inline: 0.55rem !important;
    padding-block: 0.18rem !important;
    font-size: 0.7rem !important;
}

/* Shape modifiers */
.btn-wos-pill {
    border-radius: 999px !important;
}

.btn-wos-square {
    border-radius: 3px !important;
}

/* Layout modifier */
.btn-wos-block {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center;
}

/* Disabled helper – works for all button types */
.btn-wos-disabled,
button.btn-wos-base:disabled,
a.btn-wos-base.disabled,
button.btn-icon-base:disabled,
a.btn-icon-base.disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none !important;
}

/* =========================================================
   1) GRADIENT BUTTONS
   Classes:
     .btn-gradient-blue
     .btn-gradient-green
     .btn-gradient-red
     .btn-gradient-orange
   Combine with:
     .btn-wos-sm / .btn-wos-xs / .btn-wos-square / .btn-wos-pill / .btn-wos-block
   ========================================================= */

.btn-gradient-blue,
.btn-gradient-green,
.btn-gradient-red,
.btn-gradient-orange {
    @supports (all: unset) {
    }
    /* Inherit base style */
    padding-inline: 1.4rem;
    padding-block: 0.55rem;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.45);
    color: #ffffff;
    letter-spacing: .5px;
    border: 1px solid transparent;
    transition: 0.2s ease;
}

/* Blue */
.btn-gradient-blue {
    border-color: var(--wos-blue-border);
    background: linear-gradient(135deg, var(--wos-blue-dark), var(--wos-blue-light));
}

    .btn-gradient-blue:hover,
    .btn-gradient-blue:focus {
        background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
        transform: translateY(-1px);
    }

/* Green */
.btn-gradient-green {
    border-color: var(--wos-green-border);
    background: linear-gradient(135deg, var(--wos-green-light), var(--wos-green-dark));
}

    .btn-gradient-green:hover,
    .btn-gradient-green:focus {
        background: linear-gradient(135deg, #16a34a, #0f766e);
        transform: translateY(-1px);
    }

/* Red */
.btn-gradient-red {
    border-color: var(--wos-red-border);
    background: linear-gradient(135deg, var(--wos-red-light), var(--wos-red-dark));
}

    .btn-gradient-red:hover,
    .btn-gradient-red:focus {
        background: linear-gradient(135deg, #dc2626, #991b1b);
        transform: translateY(-1px);
    }

/* Orange */
.btn-gradient-orange {
    border-color: var(--wos-orange-border);
    background: linear-gradient(135deg, var(--wos-orange-light), var(--wos-orange-dark));
}

    .btn-gradient-orange:hover,
    .btn-gradient-orange:focus {
        background: linear-gradient(135deg, #f97316, #ea580c);
        transform: translateY(-1px);
    }

    /* Disabled gradient */
    .btn-gradient-blue:disabled,
    .btn-gradient-green:disabled,
    .btn-gradient-red:disabled,
    .btn-gradient-orange:disabled,
    .btn-gradient-blue.disabled,
    .btn-gradient-green.disabled,
    .btn-gradient-red.disabled,
    .btn-gradient-orange.disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* =========================================================
   2) OUTLINE BUTTONS
   Classes:
     .btn-outline-blue
     .btn-outline-green
     .btn-outline-red
     .btn-outline-orange
   ========================================================= */

.btn-outline-blue,
.btn-outline-green,
.btn-outline-red,
.btn-outline-orange {
    padding-inline: 1.4rem;
    padding-block: 0.55rem;
    font-weight: 600;
    border-radius: 999px;
    background: transparent;
    letter-spacing: .5px;
    transition: 0.25s ease;
    color: #ffffff;
}

/* Blue outline */
.btn-outline-blue {
    border: 1px solid var(--wos-blue-border);
    color: var(--wos-blue-light);
}

    .btn-outline-blue:hover,
    .btn-outline-blue:focus {
        background: linear-gradient(135deg, var(--wos-blue-dark), var(--wos-blue-light));
        color: #fff;
    }

/* Green outline */
.btn-outline-green {
    border: 1px solid var(--wos-green-border);
    color: var(--wos-green-light);
}

    .btn-outline-green:hover,
    .btn-outline-green:focus {
        background: linear-gradient(135deg, var(--wos-green-light), var(--wos-green-dark));
        color: #fff;
    }

/* Red outline */
.btn-outline-red {
    border: 1px solid var(--wos-red-border);
    color: var(--wos-red-light);
}

    .btn-outline-red:hover,
    .btn-outline-red:focus {
        background: linear-gradient(135deg, var(--wos-red-light), var(--wos-red-dark));
        color: #fff;
    }

/* Orange outline */
.btn-outline-orange {
    border: 1px solid var(--wos-orange-border);
    color: var(--wos-orange-light);
}

    .btn-outline-orange:hover,
    .btn-outline-orange:focus {
        background: linear-gradient(135deg, var(--wos-orange-light), var(--wos-orange-dark));
        color: #fff;
    }

    /* Disabled outline */
    .btn-outline-blue:disabled,
    .btn-outline-green:disabled,
    .btn-outline-red:disabled,
    .btn-outline-orange:disabled,
    .btn-outline-blue.disabled,
    .btn-outline-green.disabled,
    .btn-outline-red.disabled,
    .btn-outline-orange.disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
        background: transparent;
    }

    /* Square outlined & small variants (reuse .btn-wos-square / .btn-wos-sm) */
    .btn-outline-blue.btn-wos-square,
    .btn-outline-green.btn-wos-square,
    .btn-outline-red.btn-wos-square,
    .btn-outline-orange.btn-wos-square {
        border-radius: 10px !important;
    }

/* =========================================================
   3) GHOST BUTTONS
   Classes:
     .btn-ghost-blue
     .btn-ghost-green
     .btn-ghost-red
     .btn-ghost-orange
   ========================================================= */

.btn-ghost-blue,
.btn-ghost-green,
.btn-ghost-red,
.btn-ghost-orange {
    padding-inline: 1.2rem;
    padding-block: 0.45rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    letter-spacing: .5px;
    transition: 0.2s ease;
}

/* Blue ghost */
.btn-ghost-blue {
    color: var(--wos-blue-light);
    border-color: rgba(148, 197, 255, 0.15);
}

    .btn-ghost-blue:hover,
    .btn-ghost-blue:focus {
        background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.25), transparent 55%);
    }

/* Green ghost */
.btn-ghost-green {
    color: var(--wos-green-light);
    border-color: rgba(34, 197, 94, 0.15);
}

    .btn-ghost-green:hover,
    .btn-ghost-green:focus {
        background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.25), transparent 55%);
    }

/* Red ghost */
.btn-ghost-red {
    color: var(--wos-red-light);
    border-color: rgba(239, 68, 68, 0.15);
}

    .btn-ghost-red:hover,
    .btn-ghost-red:focus {
        background: radial-gradient(circle at top left, rgba(239, 68, 68, 0.25), transparent 55%);
    }

/* Orange ghost */
.btn-ghost-orange {
    color: var(--wos-orange-light);
    border-color: rgba(251, 146, 60, 0.15);
}

    .btn-ghost-orange:hover,
    .btn-ghost-orange:focus {
        background: radial-gradient(circle at top left, rgba(251, 146, 60, 0.25), transparent 55%);
    }

    /* Disabled ghost */
    .btn-ghost-blue:disabled,
    .btn-ghost-green:disabled,
    .btn-ghost-red:disabled,
    .btn-ghost-orange:disabled,
    .btn-ghost-blue.disabled,
    .btn-ghost-green.disabled,
    .btn-ghost-red.disabled,
    .btn-ghost-orange.disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    /* Square ghost variants */
    .btn-ghost-blue.btn-wos-square,
    .btn-ghost-green.btn-wos-square,
    .btn-ghost-red.btn-wos-square,
    .btn-ghost-orange.btn-wos-square {
        border-radius: 10px !important;
    }

/* =========================================================
   4) ICON-ONLY COMPACT BUTTONS (FILLED)
   Classes:
     .btn-icon-blue
     .btn-icon-green
     .btn-icon-red
     .btn-icon-orange
   ========================================================= */

.btn-icon-base {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.45);
    transition: 0.2s ease;
}

/* Blue icon */
.btn-icon-blue {
    composes: btn-icon-base;
    border-color: var(--wos-blue-border);
    background: linear-gradient(135deg, var(--wos-blue-dark), var(--wos-blue-light));
}

    .btn-icon-blue:hover,
    .btn-icon-blue:focus {
        background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
        transform: translateY(-1px);
    }

/* Green icon */
.btn-icon-green {
    composes: btn-icon-base;
    border-color: var(--wos-green-border);
    background: linear-gradient(135deg, var(--wos-green-light), var(--wos-green-dark));
}

    .btn-icon-green:hover,
    .btn-icon-green:focus {
        background: linear-gradient(135deg, #16a34a, #0f766e);
        transform: translateY(-1px);
    }

/* Red icon */
.btn-icon-red {
    composes: btn-icon-base;
    border-color: var(--wos-red-border);
    background: linear-gradient(135deg, var(--wos-red-light), var(--wos-red-dark));
}

    .btn-icon-red:hover,
    .btn-icon-red:focus {
        background: linear-gradient(135deg, #dc2626, #991b1b);
        transform: translateY(-1px);
    }

/* Orange icon */
.btn-icon-orange {
    composes: btn-icon-base;
    border-color: var(--wos-orange-border);
    background: linear-gradient(135deg, var(--wos-orange-light), var(--wos-orange-dark));
}

    .btn-icon-orange:hover,
    .btn-icon-orange:focus {
        background: linear-gradient(135deg, #f97316, #ea580c);
        transform: translateY(-1px);
    }

    /* Disabled icon */
    .btn-icon-blue:disabled,
    .btn-icon-green:disabled,
    .btn-icon-red:disabled,
    .btn-icon-orange:disabled,
    .btn-icon-blue.disabled,
    .btn-icon-green.disabled,
    .btn-icon-red.disabled,
    .btn-icon-orange.disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* =========================================================
   5) ICON-ONLY OUTLINED VARIANTS
   Classes:
     .btn-icon-outline-blue
     .btn-icon-outline-green
     .btn-icon-outline-red
     .btn-icon-outline-orange
   ========================================================= */

.btn-icon-outline-blue,
.btn-icon-outline-green,
.btn-icon-outline-red,
.btn-icon-outline-orange {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    background: transparent;
    color: #ffffff;
    transition: 0.2s ease;
}

/* Blue outline icon */
.btn-icon-outline-blue {
    border-color: var(--wos-blue-border);
    color: var(--wos-blue-light);
}

    .btn-icon-outline-blue:hover,
    .btn-icon-outline-blue:focus {
        background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.25), transparent 55%);
    }

/* Green outline icon */
.btn-icon-outline-green {
    border-color: var(--wos-green-border);
    color: var(--wos-green-light);
}

    .btn-icon-outline-green:hover,
    .btn-icon-outline-green:focus {
        background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.25), transparent 55%);
    }

/* Red outline icon */
.btn-icon-outline-red {
    border-color: var(--wos-red-border);
    color: var(--wos-red-light);
}

    .btn-icon-outline-red:hover,
    .btn-icon-outline-red:focus {
        background: radial-gradient(circle at top left, rgba(239, 68, 68, 0.25), transparent 55%);
    }

/* Orange outline icon */
.btn-icon-outline-orange {
    border-color: var(--wos-orange-border);
    color: var(--wos-orange-light);
}

    .btn-icon-outline-orange:hover,
    .btn-icon-outline-orange:focus {
        background: radial-gradient(circle at top left, rgba(251, 146, 60, 0.25), transparent 55%);
    }

    /* Disabled outline icons */
    .btn-icon-outline-blue:disabled,
    .btn-icon-outline-green:disabled,
    .btn-icon-outline-red:disabled,
    .btn-icon-outline-orange:disabled,
    .btn-icon-outline-blue.disabled,
    .btn-icon-outline-green.disabled,
    .btn-icon-outline-red.disabled,
    .btn-icon-outline-orange.disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* =========================================================
   6) BUTTON GROUPS / SEGMENTED CONTROLS
   ========================================================= */

.btn-wos-group {
    display: inline-flex;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(148, 197, 255, 0.4);
    background: rgba(15, 23, 42, 0.7);
}

    .btn-wos-group > button,
    .btn-wos-group > a {
        border-radius: 0;
        border: none;
        padding-inline: 1rem;
        padding-block: 0.4rem;
        font-size: 0.8rem;
        background: transparent;
        color: #e2e8f0;
        transition: 0.15s ease;
    }

        .btn-wos-group > button:first-child,
        .btn-wos-group > a:first-child {
            border-top-left-radius: 999px;
            border-bottom-left-radius: 999px;
        }

        .btn-wos-group > button:last-child,
        .btn-wos-group > a:last-child {
            border-top-right-radius: 999px;
            border-bottom-right-radius: 999px;
        }

    .btn-wos-group > .active {
        background: linear-gradient(135deg, var(--wos-blue-dark), var(--wos-blue-light));
        color: #fff;
    }