/* ============================================================ TOTO — Design System (production) מערכת עיצוב משותפת לכל מסכי האתר. RTL, ערכת נושא כהה פרימיום. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800;900&display=swap'); :root { /* --- Palette --- */ --bg: #0a111e; --bg-glow: #0e1a2e; --surface: #121d30; --surface-2: #172538; --surface-3: #1e3049; --border: #24374f; --border-soft: #1c2b40; --text: #eaf1fa; --text-dim: #93a7bf; --text-faint: #5f748f; --primary: #1fd18e; --primary-strong: #14b878; --primary-ink: #04241a; --gold: #ffc24b; --gold-strong: #f4ab1f; --gold-ink: #2c1e00; --pick-1: #3b82f6; --pick-x: #a78bfa; --pick-2: #f5556d; --danger: #ff5c6c; --info: #43b7ff; /* --- Shape --- */ --r-sm: 9px; --r: 14px; --r-lg: 20px; --r-pill: 999px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45); --ring: 0 0 0 3px rgba(31, 209, 142, 0.25); --maxw: 1120px; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { /* הכיווניות נקבעת ע"י התכונה dir על לפי השפה (rtl לעברית, ltr לאנגלית) */ font-family: 'Heebo', 'Segoe UI', system-ui, sans-serif; color: var(--text); background: radial-gradient(1200px 600px at 85% -5%, rgba(31, 209, 142, 0.12), transparent 60%), radial-gradient(1000px 500px at 10% 0%, rgba(255, 194, 75, 0.08), transparent 55%), linear-gradient(180deg, var(--bg-glow), var(--bg) 40%); background-attachment: fixed; min-height: 100vh; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* --- Layout --- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } .section { padding-block: 56px; } .stack { display: flex; flex-direction: column; gap: 16px; } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .between { justify-content: space-between; } .grid { display: grid; gap: 16px; } .grid.c2 { grid-template-columns: repeat(2, 1fr); } .grid.c3 { grid-template-columns: repeat(3, 1fr); } .grid.c4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } } /* ============================================================ Top bar / navigation ============================================================ */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(10, 17, 30, 0.72); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border-soft); } .topbar .inner { display: flex; align-items: center; gap: 18px; height: 68px; } .brand { display: flex; align-items: center; gap: 11px; font-weight: 900; font-size: 1.35rem; letter-spacing: -0.03em; } .brand .mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; font-size: 1.1rem; color: var(--primary-ink); background: linear-gradient(135deg, var(--primary), var(--gold)); box-shadow: 0 6px 18px rgba(31, 209, 142, 0.35); } .nav { display: flex; gap: 4px; margin-inline-start: 8px; } .nav a { padding: 9px 15px; border-radius: var(--r-pill); color: var(--text-dim); font-weight: 600; font-size: 0.96rem; transition: 0.15s; } .nav a:hover { color: var(--text); background: var(--surface-2); } .nav a.active { color: var(--primary-ink); background: var(--primary); } .spacer { flex: 1; } .wallet-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; } .wallet-chip .amt { color: var(--primary); } /* --- Mobile menu (hamburger + drawer) --- */ /* בדסקטופ ה-wrapper שקוף: הילדים מתנהגים כילדי ה-flex של הסרגל. */ .topbar-menu { display: contents; } .nav-toggle { display: none; margin-inline-start: auto; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; place-items: center; flex-shrink: 0; } .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: 0.2s; } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ''; position: relative; } .nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 4px; } /* מצב פתוח → איקס */ .nav-cb:checked ~ .nav-toggle .bars { background: transparent; } .nav-cb:checked ~ .nav-toggle .bars::before { top: 0; transform: rotate(45deg); } .nav-cb:checked ~ .nav-toggle .bars::after { top: -2px; transform: rotate(-45deg); } /* פעולות הסרגל (שפה/ארנק/פרופיל/יציאה) — שורה אחת בדסקטופ. בלי זה ה-div היה block והילדים נערמו לשתי שורות. */ .menu-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } @media (max-width: 860px) { .topbar .inner { height: 60px; gap: 10px; } .brand { font-size: 1.15rem; } .brand .mark { width: 32px; height: 32px; } .nav-toggle { display: grid; } /* המגירה עצמה */ .topbar-menu { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; gap: 6px; padding: 14px 16px 18px; background: rgba(10, 17, 30, 0.98); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border-soft); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); max-height: calc(100dvh - 60px); overflow-y: auto; } .nav-cb:checked ~ .topbar-menu { display: flex; } .topbar-menu .spacer { display: none; } .topbar-menu .nav { display: flex; flex-direction: column; gap: 2px; margin-inline-start: 0; } .topbar-menu .nav a { padding: 13px 14px; font-size: 1.02rem; border-radius: var(--r-sm); } .menu-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .menu-actions .wallet-chip, .menu-actions .btn, .menu-actions form, .menu-actions form .btn { width: 100%; justify-content: center; min-height: 46px; } } /* ============================================================ Buttons ============================================================ */ .btn { --b: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--b); color: var(--text); font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform 0.08s, filter 0.15s, border-color 0.15s, background 0.15s; } .btn:hover { border-color: var(--border); filter: brightness(1.08); } .btn:active { transform: translateY(1px); } .btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); border-color: transparent; color: var(--primary-ink); box-shadow: 0 8px 22px rgba(31, 209, 142, 0.3); } .btn.gold { background: linear-gradient(135deg, var(--gold), var(--gold-strong)); border-color: transparent; color: var(--gold-ink); box-shadow: 0 8px 22px rgba(255, 194, 75, 0.28); } .btn.ghost { background: transparent; } .btn.block { width: 100%; } .btn.lg { padding: 15px 30px; font-size: 1.08rem; } .btn.sm { padding: 8px 14px; font-size: 0.9rem; } .btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; } /* ============================================================ Cards & surfaces ============================================================ */ .card { background: linear-gradient(180deg, var(--surface), var(--surface)); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm); } .card.pad-lg { padding: 28px; } .card.glow { position: relative; overflow: hidden; } .card.glow::before { content: ''; position: absolute; inset: -1px; background: radial-gradient(400px 160px at 90% 0%, rgba(31, 209, 142, 0.16), transparent 70%); pointer-events: none; } .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.74rem; font-weight: 700; color: var(--primary); } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } /* --- Stat tiles --- */ .stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; } .stat .k { color: var(--text-dim); font-size: 0.82rem; font-weight: 600; } .stat .v { font-size: 1.7rem; font-weight: 900; letter-spacing: -0.02em; margin-top: 3px; } .stat .v.green { color: var(--primary); } .stat .v.gold { color: var(--gold); } /* --- Badges & chips --- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; line-height: 1.4; } .badge.green { background: rgba(31, 209, 142, 0.15); color: var(--primary); } .badge.gold { background: rgba(255, 194, 75, 0.16); color: var(--gold); } .badge.gray { background: var(--surface-3); color: var(--text-dim); } .badge.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 0 rgba(31, 209, 142, 0.6); animation: pulse 1.6s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 209, 142, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(31, 209, 142, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 209, 142, 0); } } /* --- Progress --- */ .progress { height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--gold)); } /* ============================================================ Game rows & pick selector (1 / X / 2) ============================================================ */ .game { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); } .game:last-child { border-bottom: none; } .game .no { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); color: var(--text-dim); font-weight: 800; display: grid; place-items: center; font-size: 0.9rem; } .game .teams { font-weight: 700; font-size: 1.02rem; } .game .teams .vs { color: var(--text-faint); font-weight: 600; margin-inline: 9px; font-size: 0.85rem; } .game .meta { color: var(--text-faint); font-size: 0.82rem; font-weight: 500; margin-top: 2px; } .picks { display: flex; gap: 7px; } .pick { width: 46px; height: 46px; border-radius: 11px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-family: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; transition: 0.12s; } .pick:hover { border-color: var(--text-faint); color: var(--text); } .pick.sel-1 { background: var(--pick-1); border-color: var(--pick-1); color: #fff; box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35); } .pick.sel-x { background: var(--pick-x); border-color: var(--pick-x); color: #fff; box-shadow: 0 6px 16px rgba(167, 139, 250, 0.35); } .pick.sel-2 { background: var(--pick-2); border-color: var(--pick-2); color: #fff; box-shadow: 0 6px 16px rgba(245, 85, 109, 0.35); } .pick.win { outline: 2px solid var(--gold); outline-offset: 2px; } /* ============================================================ Tabs (segmented control) ============================================================ */ .segmented { display: inline-flex; padding: 5px; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); } .segmented button { border: none; background: transparent; color: var(--text-dim); font-family: inherit; font-weight: 700; font-size: 0.92rem; padding: 9px 18px; border-radius: var(--r-pill); cursor: pointer; transition: 0.15s; } .segmented button.active { background: var(--primary); color: var(--primary-ink); } /* ============================================================ Tables ============================================================ */ .table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--border); } table { width: 100%; border-collapse: collapse; font-size: 0.94rem; } thead th { text-align: start; padding: 13px 16px; background: var(--surface-2); color: var(--text-dim); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } tbody td { padding: 13px 16px; border-top: 1px solid var(--border-soft); white-space: nowrap; } tbody tr:hover td { background: rgba(31, 209, 142, 0.04); } tr.me td { background: rgba(31, 209, 142, 0.08); } .rank { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; font-weight: 800; background: var(--surface-3); color: var(--text-dim); } .rank.g1 { background: linear-gradient(135deg, var(--gold), var(--gold-strong)); color: var(--gold-ink); } .rank.g2 { background: linear-gradient(135deg, #cdd7e3, #9fb0c3); color: #1a2433; } .rank.g3 { background: linear-gradient(135deg, #d79a63, #b3703c); color: #241300; } .mono { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; font-weight: 700; } .win-amt { color: var(--primary); font-weight: 800; } /* ============================================================ Forms / inputs ============================================================ */ .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 0.86rem; font-weight: 600; color: var(--text-dim); } .input { width: 100%; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; font-size: 1rem; transition: 0.15s; } .input::placeholder { color: var(--text-faint); } .input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } /* ============================================================ Result strip (outcomes) ============================================================ */ .outcomes { display: flex; flex-wrap: wrap; gap: 8px; } .outcome { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; font-size: 0.9rem; } .outcome .res { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; background: var(--surface-3); color: var(--text); } .outcome .res.cancel { background: rgba(255, 194, 75, 0.18); color: var(--gold); font-size: 0.72rem; } /* ===== שורת משחק מפורטת: סטטוס, קבוצות, שעה וליגה ===== */ .match-lines { display: flex; flex-direction: column; gap: 8px; } .match-line { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); } .match-line .ml-status { flex-shrink: 0; } .match-line .res { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; background: var(--surface-3); color: var(--text); } /* "ממתין" / "בוטל" הם מילים — גלולה ברוחב אוטומטי, לא ריבוע קבוע (מונע חפיפה עם שם הקבוצה) */ .match-line .res.pending, .match-line .res.cancel { width: auto; height: auto; min-width: 26px; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; } .match-line .res.pending { background: var(--surface-3); color: var(--muted); } .match-line .res.cancel { background: rgba(255, 194, 75, 0.18); color: var(--gold); } .match-line .ml-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .match-line .ml-teams { font-weight: 700; font-size: 0.95rem; } .match-line .ml-teams .vs { color: var(--muted); font-weight: 600; margin: 0 5px; } .match-line .ml-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--muted); } .match-line .ml-time::before { content: "🕒 "; } .match-line .ml-league { display: inline-flex; align-items: center; gap: 5px; } .match-line .ml-league .flag { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; } /* ============================================================ Footer ============================================================ */ .footer { border-top: 1px solid var(--border-soft); margin-top: 40px; padding-block: 34px; color: var(--text-dim); } .footer .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; } .footer a:hover { color: var(--text); } .footer .disclaimer { font-size: 0.82rem; color: var(--text-faint); margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 16px; } /* --- Prose (rules) --- */ .prose { max-width: 780px; } .prose h1 { font-size: 1.9rem; margin-bottom: 8px; } .prose h2 { font-size: 1.25rem; color: var(--primary); margin-top: 34px; margin-bottom: 6px; } .prose p, .prose li { color: var(--text-dim); } .prose ul { padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; } .prose strong { color: var(--text); } .prose hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; } .prose table { margin-top: 10px; } .prose code { background: var(--surface-3); padding: 2px 7px; border-radius: 6px; font-size: 0.9em; } /* --- Utilities --- */ .hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -0.03em; } .text-grad { background: linear-gradient(120deg, var(--primary), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .center { text-align: center; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .divider { height: 1px; background: var(--border-soft); margin-block: 18px; } /* --- Notice / flash --- */ .notice { background: rgba(255, 92, 108, 0.1); border: 1px solid rgba(255, 92, 108, 0.35); color: var(--danger); border-radius: var(--r); padding: 12px 16px; font-weight: 600; } /* --- Jackpot banner (global, top of every page) --- */ .jackpot-banner { background: radial-gradient(600px 120px at 50% 0%, rgba(255, 194, 75, 0.14), transparent 70%), linear-gradient(180deg, rgba(255, 194, 75, 0.06), transparent); border-bottom: 1px solid rgba(255, 194, 75, 0.2); padding: 20px 0 16px; } .jackpot-banner-amount { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--gold); text-shadow: 0 8px 40px rgba(255, 194, 75, 0.35); font-variant-numeric: tabular-nums; } /* --- Admin shell (sidebar layout) --- */ .admin-shell { display: grid; grid-template-columns: 240px 1fr; gap: 24px; max-width: 1280px; margin-inline: auto; padding: 24px 20px 60px; align-items: start; } .admin-side { position: sticky; top: 88px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 12px; display: flex; flex-direction: column; gap: 18px; } .side-group { display: flex; flex-direction: column; gap: 3px; } .side-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); padding: 0 10px 6px; } .side-link { padding: 9px 12px; border-radius: 9px; color: var(--text-dim); font-weight: 600; font-size: 0.94rem; transition: 0.13s; } .side-link:hover { color: var(--text); background: var(--surface-2); } .side-link.active { background: var(--primary); color: var(--primary-ink); } .side-jackpot { font-size: 1.3rem; font-weight: 900; color: var(--gold); padding: 0 10px; font-variant-numeric: tabular-nums; } .side-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .side-stat { display: block; text-decoration: none; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); transition: 0.15s; } .side-stat:hover { border-color: var(--primary); } .side-stat .side-title { margin: 0 0 3px; } .side-stat-amt { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; } .side-stat-amt.gold { color: var(--gold); } .side-stat-amt.green { color: var(--primary); } .admin-main { min-width: 0; } @media (max-width: 860px) { .admin-shell { grid-template-columns: 1fr; } .admin-side { position: static; } } /* --- Small avatar (topbar) --- */ .avatar-sm { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--gold)); display: inline-grid; place-items: center; font-size: 0.8rem; font-weight: 900; color: var(--primary-ink); flex-shrink: 0; } .avatar-sm img { width: 100%; height: 100%; object-fit: cover; } /* --- Pick sequence chips (game number + pick) --- */ .pick-seq { display: inline-flex; gap: 5px; flex-wrap: wrap; direction: ltr; } .pick-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; line-height: 1.4; } .pick-chip i { font-style: normal; font-size: 0.68rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .pick-chip b { font-weight: 800; font-size: 0.88rem; } .pick-chip .pk-1 { color: var(--pick-1); } .pick-chip .pk-x { color: var(--pick-x); } .pick-chip .pk-2 { color: var(--pick-2); } /* משחק עם כמה אפשרויות (שיטתי) — הדגשה עדינה */ .pick-chip.multi { border-color: rgba(255, 194, 75, 0.45); background: rgba(255, 194, 75, 0.07); } /* ============================================================ Mobile polish (<= 720px) — טאצ', מרווחים וטיפוגרפיה ============================================================ */ @media (max-width: 720px) { .container { padding-inline: 14px; } .section { padding-block: 28px; } h1 { font-size: 1.45rem !important; line-height: 1.25; } h2 { font-size: 1.15rem !important; } .card, .card.pad-lg { padding: 16px; } /* יעדי מגע — מינימום 44px */ .btn { min-height: 44px; padding: 11px 16px; } .btn.sm { min-height: 40px; } /* שורת משחק: הקבוצות מעל, הבחירות מתחת ברוחב מלא */ .game { grid-template-columns: 26px 1fr; gap: 8px 10px; padding: 14px 0; } .game .picks { grid-column: 1 / -1; justify-content: stretch; gap: 8px; } .game .pick { flex: 1; width: auto; height: 50px; font-size: 1.1rem; } .teams { font-size: 0.98rem; line-height: 1.35; } /* טבלאות — גלילה אופקית נוחה */ .table-wrap { -webkit-overflow-scrolling: touch; } table { font-size: 0.88rem; } th, td { white-space: nowrap; } /* סטטים */ .stat .v { font-size: 1.25rem; } /* טפסים ברוחב מלא */ .input, select.input { width: 100%; max-width: none !important; min-height: 46px; font-size: 16px; /* מונע זום אוטומטי ב-iOS */ } .row { flex-wrap: wrap; } .footer { text-align: center; } } /* --- Admin: סיידבר גליל אופקית במובייל --- */ @media (max-width: 860px) { .admin-side { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .side-group { flex: 0 0 auto; min-width: 190px; } .admin-main { padding-top: 8px; } } /* --- בורר שפה --- */ .lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); flex-shrink: 0; } .lang-switch a { padding: 5px 11px; border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.03em; color: var(--text-dim); transition: 0.15s; } .lang-switch a:hover { color: var(--text); } .lang-switch a.active { background: var(--primary); color: var(--primary-ink); } .cur-switch { flex-shrink: 0; padding: 6px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; } .cur-switch:hover { color: var(--text); border-color: var(--primary); } @media (max-width: 860px) { .menu-actions .lang-switch { width: 100%; justify-content: center; min-height: 46px; align-items: center; } .menu-actions .lang-switch a { flex: 1; text-align: center; padding: 11px 0; font-size: 0.95rem; } } /* --- שורת ליגה/מדינה בטופס המשחק --- */ .game-league { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-dim); margin-bottom: 3px; line-height: 1.2; } .game-league .flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; display: inline-block; } @media (max-width: 720px) { .game-league { font-size: 0.74rem; } }