/* ==========================================================================
   Braifi International School — Unified Button System
   Brand palette: Orange · Gray · White

   Use these classes on every public page for consistency:
     .bis-btn                      base button
     .bis-btn--primary             solid orange (primary CTA)
     .bis-btn--secondary           outline gray
     .bis-btn--ghost               translucent (use on dark backgrounds)
     .bis-btn--light               solid white
     .bis-btn--dark                solid dark gray
     .bis-btn--link                text-only link button
     .bis-btn--sm | .bis-btn--lg   size modifiers
     .bis-btn--block               full width
     .bis-btn--icon                icon-only (round)
   ========================================================================== */

:root {
    /* Brand tokens — single source of truth for the public site */
    --bis-orange:        #f39200;
    --bis-orange-dark:   #d97e00;
    --bis-orange-darker: #b86800;
    --bis-orange-light:  #ffb84d;
    --bis-orange-soft:   #fff4e0;
    --bis-orange-tint:   rgba(243, 146, 0, 0.1);

    --bis-gray-900:      #1f1f1f;
    --bis-gray-800:      #2d2d2d;
    --bis-gray-700:      #3a3a3a;
    --bis-gray-600:      #4f4f4f;
    --bis-gray-500:      #6b6b6b;
    --bis-gray-400:      #9aa0a6;
    --bis-gray-300:      #c9ced4;
    --bis-gray-200:      #e4e7eb;
    --bis-gray-100:      #f1f2f4;
    --bis-gray-50:       #f8f9fa;

    --bis-white:         #ffffff;
    --bis-black:         #000000;

    /* Legacy aliases used by existing files — kept pointing at new palette */
    --bis-navy:          var(--bis-gray-800);
    --bis-navy-deep:     var(--bis-gray-900);
    --bis-red:           var(--bis-orange);
    --bis-red-hover:     var(--bis-orange-dark);
    --bis-gold:          var(--bis-orange-light);
    --bis-cream:         var(--bis-orange-soft);
    --bis-text:          var(--bis-gray-800);
    --bis-muted:         var(--bis-gray-500);
    --bis-border:        var(--bis-gray-200);

    --bis-shadow-sm:     0  4px 12px rgba(31, 31, 31, 0.08);
    --bis-shadow:        0 10px 30px rgba(31, 31, 31, 0.08);
    --bis-shadow-lg:     0 20px 50px rgba(31, 31, 31, 0.12);
    --bis-shadow-orange: 0 10px 28px rgba(243, 146, 0, 0.30);

    --bis-radius-sm:     6px;
    --bis-radius:        10px;
    --bis-radius-lg:     14px;
    --bis-radius-pill:   999px;

    --bis-easing:        cubic-bezier(0.4, 0, 0.2, 1);
    --bis-transition:    all 0.2s var(--bis-easing);

    --bis-header-font:  'Plus Jakarta Sans', 'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ===============================================================
   Base button
   =============================================================== */
.bis-btn {
    --_bg:      var(--bis-orange);
    --_bg-h:    var(--bis-orange-dark);
    --_fg:      var(--bis-white);
    --_fg-h:    var(--bis-white);
    --_border:  transparent;
    --_shadow:  var(--bis-shadow-orange);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
    font-family: var(--bis-header-font);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    white-space: nowrap;
    border: 1.5px solid var(--_border);
    border-radius: var(--bis-radius);
    background: var(--_bg);
    color: var(--_fg) !important;
    cursor: pointer;
    user-select: none;
    transition: var(--bis-transition);
    box-shadow: var(--_shadow);
    isolation: isolate;
}

.bis-btn:hover {
    background: var(--_bg-h);
    color: var(--_fg-h) !important;
    border-color: var(--_bg-h);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(31, 31, 31, 0.15);
}

.bis-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(31, 31, 31, 0.15);
}

.bis-btn:focus-visible {
    outline: 3px solid var(--bis-orange-light);
    outline-offset: 2px;
}

.bis-btn:disabled,
.bis-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

.bis-btn i {
    font-size: 0.9em;
    line-height: 1;
}

/* ===============================================================
   Variants
   =============================================================== */

/* Primary — solid orange (already the default) */
.bis-btn--primary {
    --_bg:     var(--bis-orange);
    --_bg-h:   var(--bis-orange-dark);
    --_fg:     var(--bis-white);
    --_shadow: var(--bis-shadow-orange);
}

/* Alias for inherited markup */
.bis-btn--red { /* kept for legacy markup */
    --_bg:     var(--bis-orange);
    --_bg-h:   var(--bis-orange-dark);
    --_fg:     var(--bis-white);
    --_shadow: var(--bis-shadow-orange);
}

/* Secondary — gray outline on white surfaces */
.bis-btn--secondary {
    --_bg:     transparent;
    --_bg-h:   var(--bis-gray-800);
    --_fg:     var(--bis-gray-800);
    --_fg-h:   var(--bis-white);
    --_border: var(--bis-gray-300);
    --_shadow: 0 0 0 transparent;
}

.bis-btn--secondary:hover { border-color: var(--bis-gray-800); }

/* Ghost — translucent (use on dark/colored backgrounds) */
.bis-btn--ghost {
    --_bg:     rgba(255, 255, 255, 0.08);
    --_bg-h:   rgba(255, 255, 255, 0.18);
    --_fg:     var(--bis-white);
    --_fg-h:   var(--bis-white);
    --_border: rgba(255, 255, 255, 0.25);
    --_shadow: 0 0 0 transparent;
    backdrop-filter: blur(6px);
}

.bis-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.4); }

/* Outline — orange border on light background */
.bis-btn--outline {
    --_bg:     transparent;
    --_bg-h:   var(--bis-orange);
    --_fg:     var(--bis-orange);
    --_fg-h:   var(--bis-white);
    --_border: var(--bis-orange);
    --_shadow: 0 0 0 transparent;
}

/* Light — solid white */
.bis-btn--light,
.bis-btn--white { /* legacy alias */
    --_bg:     var(--bis-white);
    --_bg-h:   var(--bis-orange-soft);
    --_fg:     var(--bis-gray-800);
    --_fg-h:   var(--bis-orange-darker);
    --_border: transparent;
    --_shadow: var(--bis-shadow-sm);
}

/* Dark — solid dark gray */
.bis-btn--dark {
    --_bg:     var(--bis-gray-800);
    --_bg-h:   var(--bis-gray-900);
    --_fg:     var(--bis-white);
    --_border: transparent;
    --_shadow: var(--bis-shadow);
}

/* Link — text only */
.bis-btn--link {
    --_bg:     transparent;
    --_bg-h:   transparent;
    --_fg:     var(--bis-orange);
    --_fg-h:   var(--bis-orange-dark);
    --_border: transparent;
    --_shadow: 0 0 0 transparent;
    padding: 0.45rem 0.55rem;
}

.bis-btn--link:hover {
    transform: none;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* ===============================================================
   Size modifiers
   =============================================================== */
.bis-btn--sm {
    padding: 0.55rem 1.05rem;
    font-size: 0.82rem;
    border-radius: var(--bis-radius-sm);
}

.bis-btn--lg {
    padding: 1.05rem 1.85rem;
    font-size: 1rem;
}

/* Pill shape */
.bis-btn--pill { border-radius: var(--bis-radius-pill); }

/* Full width */
.bis-btn--block {
    display: flex;
    width: 100%;
}

/* Icon-only round */
.bis-btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
}

.bis-btn--icon.bis-btn--sm { width: 36px; height: 36px; }
.bis-btn--icon.bis-btn--lg { width: 52px; height: 52px; }

/* ===============================================================
   Bootstrap & legacy overrides — keep brand consistent everywhere
   =============================================================== */
.btn-primary,
.btn-primary:focus {
    background-color: var(--bis-orange) !important;
    border-color:     var(--bis-orange) !important;
    color: var(--bis-white) !important;
    box-shadow: var(--bis-shadow-orange);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--bis-orange-dark) !important;
    border-color:     var(--bis-orange-dark) !important;
    color: var(--bis-white) !important;
}

.btn-outline-primary {
    color: var(--bis-orange) !important;
    border-color: var(--bis-orange) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: var(--bis-orange) !important;
    color: var(--bis-white) !important;
}

.btn-secondary,
.btn-secondary:focus {
    background-color: var(--bis-gray-700) !important;
    border-color: var(--bis-gray-700) !important;
}

.btn-secondary:hover {
    background-color: var(--bis-gray-900) !important;
    border-color: var(--bis-gray-900) !important;
}

.btn-success { background-color: #2e7d32 !important; border-color: #2e7d32 !important; }
.btn-danger  { background-color: #c62828 !important; border-color: #c62828 !important; }
.btn-warning { background-color: var(--bis-orange-light) !important; border-color: var(--bis-orange-light) !important; color: var(--bis-gray-900) !important; }
.btn-info    { background-color: var(--bis-gray-500) !important; border-color: var(--bis-gray-500) !important; color: #fff !important; }

.btn-light {
    background-color: var(--bis-white) !important;
    border-color: var(--bis-gray-200) !important;
    color: var(--bis-gray-800) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    background-color: var(--bis-orange-soft) !important;
    border-color: var(--bis-orange) !important;
    color: var(--bis-orange-darker) !important;
}

.btn-outline-light {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #fff !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--bis-orange-darker) !important;
}

/* Consistent rounded shape + transition for every Bootstrap button */
.btn {
    border-radius: var(--bis-radius);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: var(--bis-transition);
}

.btn:not(.btn-sm):not(.btn-lg):not(.btn-square):not(.btn-icon):not(.btn-close) {
    padding: 0.65rem 1.35rem;
}

.btn-lg { border-radius: var(--bis-radius-lg); }
.btn-sm { border-radius: var(--bis-radius-sm); }

/* Legacy template helpers used by older inner pages */
.main-button-red a,
.main-button-yellow a,
.filled-button a,
.border-button a {
    background-color: var(--bis-orange) !important;
    color: var(--bis-white) !important;
    border-color: var(--bis-orange) !important;
    transition: var(--bis-transition);
}

.main-button-red a:hover,
.main-button-yellow a:hover,
.filled-button a:hover,
.border-button a:hover {
    background-color: var(--bis-orange-dark) !important;
    color: var(--bis-white) !important;
    border-color: var(--bis-orange-dark) !important;
}

/* Bootstrap link helpers */
.text-primary { color: var(--bis-orange) !important; }
.bg-primary   { background-color: var(--bis-orange) !important; }
.border-primary { border-color: var(--bis-orange) !important; }

/* Strip the old `a { color: white }` rule effect inherited from bis_style.css */
body a { color: var(--bis-gray-800); }
body a:hover { color: var(--bis-orange); }
.bis-site-header a,
.bis-footer a,
.bis-home a { color: inherit; }

/* ===============================================================
   Responsive
   =============================================================== */
@media (max-width: 575px) {
    .bis-btn { padding: 0.75rem 1.2rem; font-size: 0.88rem; }
    .bis-btn--lg { padding: 0.9rem 1.5rem; font-size: 0.95rem; }
}