/* =====================================================
   Medicam Public CSS — v1.0 (2026-05-18)
   Design System אחיד לכל דפי האתר הציבורי
   ===================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;800;900&family=DM+Mono:wght@400;500&display=swap');

/* =====================================================
   1. TOKENS — CSS Variables
   ===================================================== */
:root {
    /* Colors */
    --bg-deep:        #030712;
    --gold:           #c5a059;
    --gold-light:     #e5c079;
    --gold-glow:      rgba(197, 160, 89, 0.35);
    --blue-tech:      #00d4ff;
    --blue-glow:      rgba(0, 212, 255, 0.25);
    --wa-green:       #25D366;
    --danger:         #ff4444;

    /* Surfaces */
    --border-gold:    rgba(197, 160, 89, 0.25);
    --border-cyan:    rgba(0, 212, 255, 0.25);
    --glass-dark:     rgba(3, 7, 18, 0.85);
    --glass-blue:     rgba(11, 29, 58, 0.55);
    --glass-blue-hover: rgba(11, 29, 58, 0.85);

    /* Layout — מותאם לאקו-סיסטם */
    --hdr-h:          72px;
    --ftr-h:          62px;

    /* Typography */
    --font-title:     'Heebo', sans-serif;
    --font-ui:        'Heebo', sans-serif;
    --font-mono:      'DM Mono', monospace;
}

/* =====================================================
   2. BASE RESET
   ===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

body, html {
    font-family: var(--font-ui);
    background: var(--bg-deep);
    background-image: radial-gradient(circle at 50% 0%, #0a152e 0%, #030712 70%);
    color: #fff;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* =====================================================
   3. MASTER HEADER — 90px
   ===================================================== */
.master-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--hdr-h);
    background: var(--glass-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4vw;
    z-index: 10000;
    border-bottom: 1px solid var(--border-gold);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* צדדי Header */
.hdr-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 160px;
}
.hdr-side.right { justify-content: flex-start; }
.hdr-side.left  { justify-content: flex-end; flex-direction: row-reverse; }

/* עיגולי לוגו */
.logo-frame {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    padding: 5px;
    transition: transform 0.3s ease;
    text-decoration: none;
}
.logo-frame:hover { transform: scale(1.06); }
.logo-frame.gold  { border: 2px solid var(--gold);      box-shadow: 0 0 18px var(--gold-glow); }
.logo-frame.cyan  { border: 2px solid var(--blue-tech); box-shadow: 0 0 18px var(--blue-glow); }
.logo-frame img   { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* שמות מותג בצדדים */
.hdr-brand-name {
    font-family: var(--font-ui);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.hdr-brand-name.medicam  { color: #fff; }
.hdr-brand-name.mediclass { color: var(--blue-tech); }

/* כותרת מרכזית */
.hdr-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hdr-title {
    font-family: var(--font-title);
    color: var(--gold-light);
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.5px;
}
.hdr-subtitle {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 3px;
}

/* =====================================================
   4. MASTER FOOTER — סרגל תחתון (כמו האקו-סיסטם)
   ===================================================== */
.master-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--ftr-h);
    background: rgba(3, 7, 18, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1.5px solid var(--border-gold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3vw;
    z-index: 10000;
}

.ftr-zone { display: flex; align-items: center; gap: 8px; }
.ftr-zone.left  { justify-content: flex-end; }
.ftr-center { flex: 1; display: flex; justify-content: center; }

/* =====================================================
   5. BUTTONS
   ===================================================== */
/* Pill */
.btn-pill {
    height: 40px;
    padding: 0 22px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.btn-pill.gold {
    background: rgba(197, 160, 89, 0.12);
    color: var(--gold);
    border: 1px solid var(--gold);
}
.btn-pill.gold:hover { background: var(--gold); color: #000; }
.btn-pill.cyan {
    background: rgba(0, 212, 255, 0.08);
    color: var(--blue-tech);
    border: 1px solid var(--blue-tech);
}
.btn-pill.cyan:hover { background: var(--blue-tech); color: #000; }
.btn-pill.white {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
}
.btn-pill.white:hover { background: #fff; color: #000; }

/* Circle icon */
.btn-circle {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    transition: all 0.25s ease;
    border: none;
}
.btn-circle.cyan  { border: 1px solid var(--blue-tech); color: var(--blue-tech); }
.btn-circle.cyan:hover  { background: var(--blue-tech); color: #000; }
.btn-circle.gold  { border: 1px solid var(--gold); color: var(--gold); }
.btn-circle.gold:hover  { background: var(--gold); color: #000; }

/* =====================================================
   6. FOOTER ICON BUTTON (עיגול קטן בסרגל)
   ===================================================== */
/* .btn-icon — כפתור עיגול בפוטר */
.btn-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    background: transparent;
    transition: all 0.25s ease;
    text-decoration: none;
    border: none;
}
.btn-icon.cyan { border: 1px solid rgba(0,212,255,0.4); color: var(--blue-tech); }
.btn-icon.cyan:hover { background: var(--blue-tech); color: #000; border-color: var(--blue-tech); }
.btn-icon.gold { border: 1px solid rgba(197,160,89,0.4); color: var(--gold); }
.btn-icon.gold:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.btn-icon.white { border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
.btn-icon.white:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); color: #fff; }

/* =====================================================
   7. TOAST NOTIFICATION
   ===================================================== */
.maybach-toast {
    position: fixed;
    top: calc(var(--hdr-h) + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(11, 20, 35, 0.9);
    backdrop-filter: blur(15px);
    border: 1px solid var(--gold);
    border-radius: 50px;
    padding: 11px 24px;
    color: #fff;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 15px var(--gold-glow);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 20000;
    white-space: nowrap;
}
.maybach-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.maybach-toast i { color: var(--gold); font-size: 1.1rem; }

/* =====================================================
   8. WORKSPACE AREA
   ===================================================== */
.hub-content {
    position: fixed;
    top: var(--hdr-h);
    bottom: var(--ftr-h);
    left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vh 3vw;
}

/* =====================================================
   9. CARD BASE (Hub Cards)
   ===================================================== */
.hub-card {
    background: var(--glass-blue);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.4s ease;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hub-card:hover {
    transform: translateY(-7px);
    background: var(--glass-blue-hover);
}

.card-hero {
    height: 40%;
    background: #000;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}
.card-hero img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}
.hub-card:hover .card-hero img { transform: scale(1.05); }

.card-body {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    justify-content: space-between;
    min-height: 0;
}
.card-body h2 {
    font-family: var(--font-title);
    font-size: 1.9rem;
    line-height: 1.1;
    font-weight: 900;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}
.card-subtitle {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    opacity: 0.9;
    letter-spacing: 0.3px;
}
.card-desc {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.7);
    margin: 0 0 18px 0;
    font-weight: 300;
}
.card-btn {
    margin-top: auto;
    padding: 10px 24px;
    border-radius: 50px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: transparent;
    cursor: pointer;
    border: none;
}

/* =====================================================
   10. SCROLLABLE PAGE VARIANT
   ===================================================== */
body.scrollable {
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
}
body.scrollable .hub-content,
body.scrollable .page-content {
    position: static;
    padding-top: calc(var(--hdr-h) + 30px);
    padding-bottom: calc(var(--ftr-h) + 30px);
    min-height: 100vh;
}

/* =====================================================
   11. DIVIDER
   ===================================================== */
.gold-divider {
    width: 60px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 0 auto 20px;
}

/* =====================================================
   12. RESPONSIVE — Mobile (≤900px)
   ===================================================== */
@media (max-width: 900px) {
    :root {
        --hdr-h: 72px;
        --ftr-h: 58px;
    }

    .master-header { padding: 0 16px; }
    .hdr-brand-name { display: none; }
    .logo-frame { width: 46px; height: 46px; padding: 4px; }
    .hdr-side { min-width: 60px; }
    .hdr-title { font-size: 1.45rem; }
    .hdr-subtitle { font-size: 0.72rem; letter-spacing: 1px; }

    .master-footer { padding: 0 12px; }

    .float-wa { width: 50px; height: 50px; font-size: 1.6rem; bottom: calc(var(--ftr-h) + 14px); right: 16px; }
    .float-fs { width: 40px; height: 40px; font-size: 1rem; bottom: calc(var(--ftr-h) + 14px); left: 16px; }

    .hub-content {
        position: static;
        padding: calc(var(--hdr-h) + 20px) 16px calc(var(--ftr-h) + 20px);
        display: block;
        overflow-y: auto;
        height: 100vh;
    }
    body, html { overflow-y: auto; height: auto; }

    .card-hero { height: 200px; }
}

@media (max-width: 600px) {
    .hdr-title { font-size: 1.2rem; }
    .hdr-subtitle { display: none; }
    .btn-pill { font-size: 0.85rem; padding: 0 14px; height: 36px; }
}