/* ==========================================================================
   Not Brokers — Apple-inspired Design System ("Liquid Glass", 2025)
   Three-layer tokens: primitive → semantic → component.
   Loaded AFTER Bootstrap so it refines the public website only.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       LAYER 1 — PRIMITIVES (raw values, never used directly in components)
    ---------------------------------------------------------------------- */

    /* Apple neutral ramp */
    --ds-white:      #ffffff;
    --ds-gray-50:    #fbfbfd;   /* near-white page wash      */
    --ds-gray-100:   #f5f5f7;   /* Apple signature light gray */
    --ds-gray-200:   #e8e8ed;
    --ds-gray-300:   #d2d2d7;   /* hairline borders          */
    --ds-gray-400:   #aeaeb2;
    --ds-gray-500:   #86868b;   /* secondary text            */
    --ds-gray-600:   #6e6e73;
    --ds-gray-800:   #1d1d1f;   /* Apple ink (primary text)  */
    --ds-black:      #0b0b0c;

    /* Brand accent (kept from Not Brokers) */
    --ds-burgundy:        #800020;
    --ds-burgundy-strong: #9a1733;
    --ds-burgundy-dark:   #5c0017;
    --ds-burgundy-tint:   rgba(128, 0, 32, 0.10);

    /* Typography — true SF Pro on Apple devices, clean system fallback elsewhere */
    --ds-font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                      "Segoe UI", system-ui, "Helvetica Neue", "Noto Kufi Arabic", Arial, sans-serif;
    --ds-weight-regular: 400;
    --ds-weight-medium:  500;
    --ds-weight-semibold: 600;
    --ds-weight-bold:    700;

    /* Radii — Apple's generous rounding */
    --ds-radius-xs:   8px;
    --ds-radius-sm:   12px;
    --ds-radius-md:   16px;
    --ds-radius-lg:   20px;
    --ds-radius-xl:   28px;
    --ds-radius-pill: 980px;

    /* Soft, diffuse shadows */
    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
    --ds-shadow-sm: 0 4px 16px rgba(0, 0, 0, .06);
    --ds-shadow-md: 0 12px 32px rgba(0, 0, 0, .08);
    --ds-shadow-lg: 0 24px 60px rgba(0, 0, 0, .12);

    /* Glass (Liquid Glass) */
    --ds-glass-blur: 20px;
    --ds-glass-sat:  180%;

    /* Apple's signature easing + durations */
    --ds-ease: cubic-bezier(.28, .11, .32, 1);
    --ds-dur:  .4s;

    /* ----------------------------------------------------------------------
       LAYER 2 — SEMANTIC (purpose-based aliases)
    ---------------------------------------------------------------------- */
    --color-bg:            var(--ds-white);
    --color-bg-muted:      var(--ds-gray-100);
    --color-surface:       var(--ds-white);
    --color-text:          var(--ds-gray-800);
    --color-text-secondary:var(--ds-gray-600);
    --color-text-tertiary: var(--ds-gray-500);
    --color-accent:        var(--ds-burgundy);
    --color-accent-hover:  var(--ds-burgundy-strong);
    --color-border:        var(--ds-gray-300);
    --color-border-subtle: var(--ds-gray-200);

    --font-display: var(--ds-font-system);
    --font-text:    var(--ds-font-system);

    --radius-button: var(--ds-radius-pill);
    --radius-card:   var(--ds-radius-lg);
    --radius-input:  var(--ds-radius-sm);

    --shadow-card:     var(--ds-shadow-sm);
    --shadow-elevated: var(--ds-shadow-lg);

    --glass-bg:     rgba(255, 255, 255, .72);
    --glass-bg-strong: rgba(255, 255, 255, .85);
    --glass-border: rgba(255, 255, 255, .55);

    /* Bridge Bootstrap's primary to the brand accent so utilities inherit it */
    --bs-primary:      var(--color-accent);
    --bs-primary-rgb:  128, 0, 32;
    --bs-link-color:   var(--color-accent);
    --bs-border-radius: var(--ds-radius-sm);
    --bs-body-color:   var(--color-text);
    --bs-body-font-family: var(--font-text);
}

/* ==========================================================================
   LAYER 3 — COMPONENTS (Apple styling applied to the public site)
   ========================================================================== */

/* Base ------------------------------------------------------------------- */
body {
    font-family: var(--font-text);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, .fw-bold, .fw-semibold {
    font-family: var(--font-display);
    letter-spacing: -0.022em;
    /* Inherit color so white text on dark sections (hero, footer) is preserved */
}
h1, .display-5, .display-6 { font-weight: var(--ds-weight-bold); line-height: 1.06; }
h2, h3 { font-weight: var(--ds-weight-semibold); }

.text-primary { color: var(--color-accent) !important; }
.bg-primary { background-color: var(--color-accent) !important; }
.text-muted { color: var(--color-text-secondary) !important; }
a { color: var(--color-accent); }

/* Glass navigation ------------------------------------------------------- */
.nb-nav {
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: saturate(var(--ds-glass-sat)) blur(var(--ds-glass-blur));
    backdrop-filter: saturate(var(--ds-glass-sat)) blur(var(--ds-glass-blur));
    border-bottom: 1px solid var(--color-border-subtle) !important;
}
.nb-nav a.fw-medium {
    color: var(--color-text) !important;
    font-weight: var(--ds-weight-medium);
    font-size: .95rem;
    transition: color var(--ds-dur) var(--ds-ease);
}
.nb-nav a.fw-medium:hover { color: var(--color-accent) !important; }

/* Buttons — Apple pill -------------------------------------------------- */
.btn {
    border-radius: var(--radius-button);
    font-weight: var(--ds-weight-medium);
    letter-spacing: -0.01em;
    padding: .55rem 1.25rem;
    transition: transform var(--ds-dur) var(--ds-ease),
                background-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease),
                opacity var(--ds-dur) var(--ds-ease);
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: .35rem .9rem; font-size: .85rem; }
.btn-lg { padding: .8rem 1.8rem; font-size: 1.05rem; }

.btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 2px 10px rgba(128, 0, 32, .25);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    box-shadow: 0 6px 18px rgba(128, 0, 32, .30);
}

.btn-outline-secondary {
    border-color: var(--color-border);
    color: var(--color-text);
    background: transparent;
}
.btn-outline-secondary:hover {
    background: var(--color-bg-muted);
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-outline-primary {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.btn-outline-primary:hover {
    background: var(--color-accent);
    color: #fff;
}
.btn-success { background: #1d9d52; border-color: #1d9d52; }
.btn-success:hover { background: #178043; border-color: #178043; }

/* Cards — soft, rounded, smooth lift ------------------------------------ */
.nb-card,
.card {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    transition: transform var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease);
}
.nb-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
}
.card { box-shadow: var(--ds-shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-card) !important; }

.nb-card-img { border-radius: 0; }

/* Chips & badges --------------------------------------------------------- */
.nb-chip {
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    border-radius: var(--ds-radius-pill);
    font-weight: var(--ds-weight-medium);
}
.badge { border-radius: var(--ds-radius-pill); font-weight: var(--ds-weight-medium); }
.rounded-pill { border-radius: var(--ds-radius-pill) !important; }

/* Forms — Apple inputs --------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--radius-input);
    border-color: var(--color-border);
    background: var(--color-bg-muted);
    color: var(--color-text);
    padding: .6rem .9rem;
    transition: border-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease),
                background var(--ds-dur) var(--ds-ease);
}
.form-control::placeholder { color: var(--color-text-tertiary); }
.form-control:focus,
.form-select:focus {
    background: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--ds-burgundy-tint);
}

/* Hero — large Apple typography + glass filter --------------------------- */
.hero-title { font-weight: var(--ds-weight-bold); letter-spacing: -0.03em; }
.filter-panel {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: saturate(var(--ds-glass-sat)) blur(var(--ds-glass-blur));
    backdrop-filter: saturate(var(--ds-glass-sat)) blur(var(--ds-glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-lg);
}
.filter-panel .form-select,
.filter-panel .form-control { background: var(--ds-white); }
.filter-chip { border-radius: var(--ds-radius-pill); border-color: var(--color-border-subtle); }
.filter-chip:hover, .filter-chip.active { background: var(--color-accent); border-color: var(--color-accent); }

/* Feature cards / banners — match the rounded language ------------------- */
.feat-card { border-radius: var(--ds-radius-xl); }
.feat-dark { background: linear-gradient(160deg, #2a0a12, var(--ds-burgundy-dark)); }
.feat-stat { border-radius: var(--ds-radius-xl); border-color: var(--color-border-subtle); }
.nb-banner { border-radius: var(--ds-radius-xl); }
.nb-dest { border-radius: var(--ds-radius-lg); }
.nb-hero { border-radius: 0 0 var(--ds-radius-xl) var(--ds-radius-xl); }

/* Section rhythm — Apple breathing room --------------------------------- */
.container > .py-5 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }

/* Pagination ------------------------------------------------------------- */
.pagination { gap: 4px; }
.page-link { border: none; border-radius: var(--ds-radius-sm) !important; color: var(--color-text); }
.page-item.active .page-link { background: var(--color-accent); color: #fff; }

/* Footer keeps its dark slab but adopts the rounded top ------------------ */
.nb-footer { background: var(--ds-black); }

/* RTL nicety: SF Pro handles Arabic gracefully; relax negative tracking */
[dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }