/* ================================================================
   BASE.CSS — ستار وير | Star Wear
   Single source of truth for design tokens, reset, typography.
   Load order: 1 of 4
   ================================================================ */

/* ── CSS Custom Properties ───────────────────────────────────── */
:root {
    /* Brand Colors */
    --sw-primary:    #F26522;
    --sw-primary-dk: #d4541a;
    --sw-black:      #000000;
    --sw-dark:       #222222;
    --sw-gray:       #555555;
    --sw-light-gray: #F2F2F2;
    --sw-white:      #FFFFFF;
    --sw-border:     #e0e0e0;
    --sw-green:      #25D366;

    /* Spacing */
    --sw-radius:     8px;
    --sw-radius-md:  12px;
    --sw-radius-lg:  20px;

    /* Shadows */
    --sw-shadow:     0 2px 12px rgba(0,0,0,0.08);
    --sw-shadow-md:  0 4px 20px rgba(0,0,0,0.12);
    --sw-shadow-lg:  0 8px 32px rgba(0,0,0,0.16);

    /* Transitions */
    --sw-transition: 0.25s ease;

    /* Typography */
    --sw-font: 'Tajawal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Base Body ───────────────────────────────────────────────── */
body {
    background-color: var(--sw-white);
    color: var(--sw-black);
    font-family: var(--sw-font);
    font-size: 15px;
    line-height: 1.6;
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── Container ───────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (max-width: 1200px) { .container { padding: 0 15px; } }
@media (max-width: 576px)  { .container { padding: 0 10px; } }
@media (max-width: 400px)  { .container { padding: 0 8px; } }

/* ── Typography ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sw-font);
    line-height: 1.3;
}

a { color: inherit; }

img {
    max-width: 100%;
    display: block;
}

/* ── Loading Spinner ─────────────────────────────────────────── */
.loading-spinner {
    text-align: center;
    padding: 24px;
    display: none;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--sw-light-gray);
    border-top-color: var(--sw-primary);
    border-radius: 50%;
    animation: sw-spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes sw-spin {
    to { transform: rotate(360deg); }
}

/* ── Utility Classes ─────────────────────────────────────────── */
.d-flex             { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.w-100              { width: 100%; }
.text-primary       { color: var(--sw-primary) !important; }
.bg-primary         { background-color: var(--sw-primary) !important; }
.fw-medium          { font-weight: 500; }
.small              { font-size: 0.75rem; }

/* Section spacing */
section { padding: 0; }