/* ============================================================ Member Area v4 — design tokens + dark theme DO NOT edit by hand. Regenerate with _tools/build_v4.py Two layers: 1. RAW palette — just named colours (never swap per theme) 2. SEMANTIC — how those colours are used (these swap between light and dark) Dark mode: or OS-level prefers-color-scheme: dark (fallback, no attribute). ============================================================ */ :root { /* ── Brand navy ────────────────────────────────────── */ --palette-navy-600: #0d1d4c; --palette-navy-700: #091a44; /* canonical brand */ --palette-navy-800: #040a1a; --palette-navy-900: #02050c; /* ── Brand orange ──────────────────────────────────── */ --palette-orange-300: #ff9966; --palette-orange-400: #ff6b35; --palette-orange-500: #fa730b; /* canonical accent */ --palette-orange-600: #e56606; --palette-orange-700: #e06000; /* ── Neutrals ──────────────────────────────────────── */ --palette-white: #ffffff; --palette-gray-50: #f8f9fb; --palette-gray-100: #f0f2f5; --palette-gray-150: #eef0f4; --palette-gray-200: #e8eaef; --palette-gray-250: #e0e3ea; --palette-gray-300: #dce0e8; --palette-gray-350: #d0d4dc; --palette-gray-400: #c5cad6; --palette-gray-450: #b0b7c5; --palette-gray-500: #8a94a6; --palette-gray-600: #666666; --palette-gray-650: #555555; --palette-gray-700: #484a4d; --palette-gray-800: #2a2e35; --palette-gray-850: #1e2128; --palette-gray-900: #13161c; --palette-gray-950: #0a0c12; /* ── State colours ─────────────────────────────────── */ --palette-green-400: #4ade80; --palette-green-500: #22c55e; --palette-green-600: #16a34a; --palette-green-050: #ecfdf5; --palette-red-500: #e74c3c; --palette-amber-500: #f5a623; } /* ============================================================ LIGHT theme tokens — applied to :root (default) and to any element carrying [data-theme="light"]. ============================================================ */ :root, [data-theme="light"] { /* ── Surfaces / backgrounds ────────────────────────── */ --color-txt-app: #000; --color-btn-app: #fff; --color-bg-app: var(--palette-gray-100); --color-brand-header-primary: var(--palette-navy-700); --color-brand-header-secondary: var(--palette-navy-600); --color-bg-surface: var(--palette-white); --color-bg-surface-alt: var(--palette-gray-50); --color-bg-surface-muted: var(--palette-gray-200); --color-bg-sidebar: linear-gradient(165deg, var(--palette-navy-600) 0%, var(--palette-navy-800) 50%, var(--palette-navy-900) 100%); --color-bg-card-tint: rgba(9, 26, 68, 0.03); /* ── Text ──────────────────────────────────────────── */ --color-text-primary: var(--palette-navy-700); --color-text-secondary: var(--palette-gray-650); --color-text-muted: var(--palette-gray-600); --color-text-subtle: var(--palette-gray-500); --color-text-placeholder: var(--palette-gray-450); --color-text-inverse: var(--palette-white); --color-text-accent: var(--palette-orange-500); /* ── Borders ───────────────────────────────────────── */ --color-border-default: var(--palette-gray-300); --color-border-strong: var(--palette-gray-400); --color-border-subtle: var(--palette-gray-200); --color-border-focus: var(--palette-orange-500); /* ── Brand ─────────────────────────────────────────── */ --color-brand-primary: var(--palette-orange-500); --color-brand-primary-hover: var(--palette-orange-600); --color-brand-primary-active: var(--palette-orange-700); --color-brand-accent: var(--palette-navy-700); --color-brand-accent-strong: var(--palette-navy-800); /* ── Overlays / tints (alphas) ─────────────────────── */ --color-overlay-brand-soft: rgba(9, 26, 68, 0.03); --color-overlay-brand-md: rgba(9, 26, 68, 0.06); --color-overlay-brand-hard: rgba(9, 26, 68, 0.12); --color-overlay-accent-soft: rgba(250, 115, 11, 0.08); --color-overlay-accent-md: rgba(250, 115, 11, 0.15); --color-overlay-accent-hard: rgba(250, 115, 11, 0.35); --color-overlay-white-soft: rgba(255, 255, 255, 0.30); --color-overlay-white-md: rgba(255, 255, 255, 0.40); --color-overlay-white-hard: rgba(255, 255, 255, 0.75); /* ── State ─────────────────────────────────────────── */ --color-state-success: var(--palette-green-500); --color-state-success-bg: rgba(34, 197, 94, 0.1); --color-state-error: var(--palette-red-500); --color-state-error-bg: rgba(231, 76, 60, 0.1); --color-state-warning: var(--palette-amber-500); --color-state-info: #5ed1ff; --color-state-info-bg: rgba(94, 217, 255, 0.1); /* ── Form inputs & decorative dot pattern ─────────── */ --color-bg-input: var(--palette-white); --color-dot-pattern: rgba(0, 0, 0, 0.03); /* ── Shadows — neutral black alpha, distinct from brand overlay ── */ --color-shadow-soft: rgba(0, 0, 0, 0.04); --color-shadow-md: rgba(0, 0, 0, 0.08); --color-shadow-hard: rgba(0, 0, 0, 0.15); --shadow-card-sm: 0 1px 3px var(--color-shadow-md); --shadow-card-md: 0 4px 16px var(--color-shadow-md); --shadow-card-lg: 0 10px 32px var(--color-shadow-hard); } /* ============================================================ DARK theme — override semantic tokens only. Activate via: Raw palette values are unchanged — a designer wanting to rebrand only edits the raw palette block once. ============================================================ */ [data-theme="dark"] { /* ── Surfaces — deep navy-tinted instead of neutral gray ── */ --color-txt-app: #fff; --color-btn-app: #000; --color-bg-app: #060a16; --color-bg-surface: #0d1427; --color-bg-surface-alt: #212121; --color-bg-surface-muted: #151b30; --color-bg-sidebar: linear-gradient(165deg, #0e1d4e 0%, #040a1f 50%, #000310 100%); --color-bg-card-tint: rgba(255, 255, 255, 0.02); /* Form inputs sit deeper than surface; dots become white alpha */ --color-bg-input: #04081a; --color-dot-pattern: rgba(255, 255, 255, 0.05); /* ── Text — cooler, brighter ────────────────────────── */ --color-text-primary: #f5f7fb; --color-text-secondary: #a8b1c1; --color-text-muted: #6b7490; --color-text-subtle: #505674; --color-text-placeholder: #3d4356; --color-text-inverse: var(--palette-white); --color-text-accent: #ff9f5c; /* ── Borders — subtle white alphas, not flat grays ──── */ --color-border-default: rgba(83, 83, 83); --color-border-strong: rgba(255, 255, 255, 0.14); --color-border-subtle: rgba(255, 255, 255, 0.04); --color-border-focus: var(--palette-orange-500); /* ── Brand — accent stays NAVY (card headers, navy gradients) ── */ --color-brand-primary: var(--palette-orange-500); --color-brand-primary-hover: var(--palette-orange-400); --color-brand-primary-active: var(--palette-orange-600); --color-brand-accent: var(--palette-navy-700); --color-brand-accent-strong: var(--palette-navy-800); /* ── Overlays — mostly white alphas for tints on dark ── */ --color-overlay-brand-soft: rgba(255, 255, 255, 0.03); --color-overlay-brand-md: rgba(255, 255, 255, 0.06); --color-overlay-brand-hard: rgba(255, 255, 255, 0.14); --color-overlay-accent-soft: rgba(250, 115, 11, 0.10); --color-overlay-accent-md: rgba(250, 115, 11, 0.20); --color-overlay-accent-hard: rgba(250, 115, 11, 0.40); --color-overlay-white-soft: rgba(255, 255, 255, 0.04); --color-overlay-white-md: rgba(255, 255, 255, 0.28); --color-overlay-white-hard: rgba(255, 255, 255, 0.75); /* ── State — dark-tinted alert backgrounds ──────────── */ --color-state-success: var(--palette-green-400); --color-state-success-bg: rgba(74, 222, 128); --color-state-error: #ff6b5e; --color-state-error-bg: rgba(255, 107, 94); --color-state-warning: #ffb84d; --color-state-info: #5ed1ff; --color-state-info-bg: rgb(157, 232, 255); /* ── Shadows — heavier blacks on dark canvas ────────── */ --color-shadow-soft: rgba(0, 0, 0, 0.45); --color-shadow-md: rgba(0, 0, 0, 0.60); --color-shadow-hard: rgba(0, 0, 0, 0.75); --shadow-card-sm: 0 1px 3px var(--color-shadow-md); --shadow-card-md: 0 4px 16px var(--color-shadow-md); --shadow-card-lg: 0 10px 32px var(--color-shadow-hard); } /* Auto-follow OS preference when no explicit data-theme is set. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]):not([data-theme="light"]) { color-scheme: dark; } } /* ============================================================ Rules — consume the semantic tokens above via var(--…) ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } [data-theme="light"] .watermark-number, .m-watermark { color: #e7e7e7; } [data-theme="light"] .action-card-title, .app-download-title, .activation-code, .store-btn-name, .input-icon, .form-input, .dash-news-cap, .profile-label, body.member .main-content, .profile-info-banner, .empty-rich-title, .msg-row, .gift-summary-desc, .details-btn, .form-input, .alert-success { color: #000; } [data-theme="light"] .dash-cta-btn, .dash-act-pro-btn, .btn-auth, .btn-orange-pill, .btn-blue-pill, .btn-search, .city-card-badge, .details-btn, .confirm-btn, .enroll-btn, .sub-cta-btn, .tab-pill.active, .btn-continue, .section-badge , .gift-card-cta, .btn-next{ color: #fff; } [data-theme="dark"] .m-page-header .m-h1 { color: #fff; } [data-theme="dark"] .page-title { color: #fff; } [data-theme="dark"] .dash-cta-btn, .dash-act-pro-btn, .btn-auth, .btn-orange-pill, .btn-blue-pill, .btn-search, .city-card-badge, .details-btn, .confirm-btn, .enroll-btn, .sub-cta-btn, .tab-pill.active, .btn-continue, .section-badge , .gift-card-cta, .btn-next{ color: #000; } [data-theme="dark"] .dash-cta-btn, .dash-act-pro-btn, .btn-auth, .btn-orange-pill, .btn-blue-pill, .btn-search, .action-card-icon, .action-card-icon svg { fill: #000; } [data-theme="dark"] .action-card-title, .app-download-title, .activation-code, .store-btn-name, .input-icon, .form-input, .dash-news-cap, .profile-label, body.member .main-content, .profile-info-banner, .empty-rich-title, .msg-row, .gift-summary-desc { color: #fff; } [data-theme="dark"] body.auth .page-subtitle, body.auth .form-label { color: #9d9d9d; } [data-theme="dark"] .alert-desc, .m-watermark { color: #bdbdbd; } [data-theme="dark"] .watermark-number, .m-watermark { color: #292929; } .sidebar-welcome{ color: #fff !important; } html, body { height: 100%; } body { font-family: 'Inter', sans-serif; background-color: var(--color-bg-app); min-height: 100vh; } body.layout-app { display: flex; } body.layout-standalone { display: flex; flex-direction: column; align-items: center; } /* Wrappers used by layout-wrapped pages (card-cadou, acces-membri, and most of cumpara-servicii/devino-membru from step 04 onwards) plus the success pages. Setting navy text color on the wrapper propagates to descendants while keeping body itself neutral, so index.html (which has no wrapper) keeps its default color. */ body > .container, body > .page-layout, body > .page-wrapper, body > .success-wrapper { color: var(--color-text-primary); } h3 {color: var(--color-txt-app);} #upfcl-logo{max-width:140px;} .min-width-select .select2-container {width: 100% !important;} .text-danger {color:var(--color-state-error); font-weight: bold;} .text-success {color:var(--color-state-success); ;font-weight:bold;} .font-success {color:var(--color-state-success); ;font-weight:bold;} .kt-font-success {color:var(--color-state-success); ;font-weight:bold;} .info-banner {border-left-color:var(--color-state-info) !important;} .danger-banner {background:#fde2e2; border-left-color:var(--color-state-error) !important;} /* ══════ SIDEBAR (from v2_21) ══════ */ .sidebar { width: 18vw; min-width: 180px; max-width: 240px; background: linear-gradient(165deg, var(--color-brand-header-primary) 0%, var(--color-brand-header-secondary) 100%); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 24px 28px 30px; z-index: 10; overflow: hidden; border-radius: 0 24px 24px 0; } /* ── Back link ── */ .sidebar-back { display: inline-flex; align-items: center; gap: 8px; color: var(--color-overlay-white-md); text-decoration: none; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 18px; transition: color 0.2s; padding-left: 30px; } .sidebar-back:hover { color: var(--color-overlay-white-hard); } .sidebar-back svg { width: 12px; height: 12px; fill: currentColor; } /* ── Logo ── */ .sidebar-logo { margin-bottom: 0; } .sidebar-logo svg { width: 110px; height: auto; display: block; } /* ══════ STEPS NAV ══════ */ .steps-nav { display: flex; flex-direction: column; gap: 0; margin-top: auto; margin-bottom: auto; padding-top: 60px; } body.purchase .menu-item { align-items: center; gap: 14px; padding: 16px; cursor: unset; } .step-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; } .step-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-btn-app); background: rgba(255,255,255,0.06); } .step-icon svg { width: 14px; height: 14px; fill: rgba(255,255,255,0.28); } /* Active step */ .step-item.active .step-icon { width: 36px; height: 36px; background: var(--color-brand-primary); box-shadow: 0 4px 18px rgba(250,115,11,0.45); } .step-item.active .step-icon svg { fill: var(--color-text-inverse); width: 15px; height: 15px; } /* Completed step */ .step-item.completed .step-icon { background: var(--color-brand-primary); } .step-item.completed .step-icon svg { fill: var(--color-text-inverse); } .step-item.completed .step-label { color: var(--color-overlay-white-md); } a.step-item { text-decoration: none; cursor: pointer; transition: opacity 0.2s; } a.step-item:hover .step-label { color: rgba(255,255,255,0.65); } a.step-item:hover .step-icon { transform: scale(1.08); transition: transform 0.2s; } .step-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(255,255,255,0.22); line-height: 1.3; } .step-item.active .step-label { color: var(--color-text-inverse); } .step-sublabel { font-size: 8px; font-weight: 400; color: rgba(255,255,255,0.32); margin-top: 1px; font-style: italic; } /* ── Member Portal btn ── */ .sidebar-bottom { margin-top: auto; } .member-portal-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 50px; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; background: rgba(255,255,255,0.05); color: var(--color-btn-app); border: 1px solid var(--color-overlay-white-soft); cursor: pointer; text-decoration: none; transition: all 0.2s; } .member-portal-btn:hover { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.65); } .member-portal-btn .btn-line { display: inline-block; width: 18px; height: 1.5px; background: var(--color-btn-app); border-radius: 1px; } /* ══════ MAIN CONTENT ══════ */ .main-content { flex: 1; padding: 42px 60px 90px 72px; max-width: 1280px; margin: 0 auto; overflow-y: auto; min-height: 100vh; position: relative; } .section-counter{counter-reset: section;} .bs__title::before{ counter-increment: section; content: counter(section) ""; } /* datepicker */ .datepicker { /* Appended to body, abs-pos off the page */ position: absolute; display: none; top: -9999em; left: -9999em; background: #fff; } .datepicker { width: 265px; padding: 10px; } .datepicker.datepicker-orient-top { margin-top: 8px; } .datepicker table { width: 100%; } .datepicker td, .datepicker th { font-weight: regular; width: 35px; height: 35px; border-radius: 3px; } .datepicker thead th { color: #666; } .datepicker thead th.prev, .datepicker thead th.datepicker-switch, .datepicker thead th.next { font-weight: 500; color: #666; } .datepicker thead th.prev i, .datepicker thead th.datepicker-switch i, .datepicker thead th.next i { font-size: 1.2rem; color: #666; } .datepicker thead th.prev i:before, .datepicker thead th.datepicker-switch i:before, .datepicker thead th.next i:before { line-height: 0; vertical-align: middle; } .datepicker thead th.prev:hover, .datepicker thead th.datepicker-switch:hover, .datepicker thead th.next:hover { background: #f7f8fa !important; } .datepicker thead th.dow { color: #6c7293; font-weight: 500; } .datepicker tbody tr > td.day { color: #6c7293; } .datepicker tbody tr > td.day:hover { background: #ebedf2; color: #6c7293; } .datepicker tbody tr > td.day.old { color: #666; } .datepicker tbody tr > td.day.new { color: #6c7293; } .datepicker tbody tr > td.day.selected, .datepicker tbody tr > td.day.selected:hover, .datepicker tbody tr > td.day.active, .datepicker tbody tr > td.day.active:hover { background: #5867dd; color: #ffffff; } .datepicker tbody tr > td.day.disabled { color: #6c7293; background: #f6f6f7; } .datepicker tbody tr > td.day.today { position: relative; background: rgba(34, 185, 255, 0.7) !important; color: #ffffff !important; } .datepicker tbody tr > td.day.today:before { content: ''; display: inline-block; border: solid transparent; border-width: 0 0 7px 7px; border-bottom-color: #ffffff; border-top-color: #ebedf2; position: absolute; bottom: 4px; right: 4px; } .datepicker tbody tr > td.day.range { background: #f7f8fa; } .datepicker tbody tr > td span.year, .datepicker tbody tr > td span.hour, .datepicker tbody tr > td span.minute, .datepicker tbody tr > td span.month { color: #6c7293; } .datepicker tbody tr > td span.year:hover, .datepicker tbody tr > td span.hour:hover, .datepicker tbody tr > td span.minute:hover, .datepicker tbody tr > td span.month:hover { background: #f7f8fa; } .datepicker tbody tr > td span.year.focused, .datepicker tbody tr > td span.year.focused:hover, .datepicker tbody tr > td span.year.active:hover, .datepicker tbody tr > td span.year.active.focused:hover, .datepicker tbody tr > td span.year.active, .datepicker tbody tr > td span.hour.focused, .datepicker tbody tr > td span.hour.focused:hover, .datepicker tbody tr > td span.hour.active:hover, .datepicker tbody tr > td span.hour.active.focused:hover, .datepicker tbody tr > td span.hour.active, .datepicker tbody tr > td span.minute.focused, .datepicker tbody tr > td span.minute.focused:hover, .datepicker tbody tr > td span.minute.active:hover, .datepicker tbody tr > td span.minute.active.focused:hover, .datepicker tbody tr > td span.minute.active, .datepicker tbody tr > td span.month.focused, .datepicker tbody tr > td span.month.focused:hover, .datepicker tbody tr > td span.month.active:hover, .datepicker tbody tr > td span.month.active.focused:hover, .datepicker tbody tr > td span.month.active { background: #5867dd; color: #ffffff; } .datepicker tfoot tr > th.today, .datepicker tfoot tr > th.clear { border-radius: 3px; font-weight: 500; } .datepicker tfoot tr > th.today:hover, .datepicker tfoot tr > th.clear:hover { background: #ebedf2; } .datepicker.datepicker-inline { border: 1px solid #ebedf2; } .input-daterange .input-group-addon { min-width: 44px; } .input-daterange input { text-align: left; } .form-input.is-invalid {border-color: #fd2727;} .is-invalid {border-color: #fd2727 !important;} /* ── Page Header + watermark ── */ .page-header { position: relative; margin-bottom: 28px; } .watermark-number { position: absolute; top: -48px; left: -10px; font-size: 160px; font-weight: 900; color: #e7e7e7; line-height: 1; pointer-events: none; user-select: none; letter-spacing: -6px; } .page-title { font-size: 40px; font-weight: 800; color: var(--color-text-primary); line-height: 1.1; position: relative; z-index: 1; border-left: 4px solid var(--color-brand-primary); padding-left: 16px; } .page-title strong { color: var(--color-brand-primary); font-weight: 800; } .page-title .accent { color: var(--color-text-accent); } .page-subtitle { font-size: 15px; font-weight: 400; color: var(--color-text-secondary); margin-top: 8px; padding-left: 20px; position: relative; z-index: 1; } /* ══════ CATEGORY TABS ══════ */ .tabs-row { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; } .tab-pill { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; cursor: pointer; transition: all 0.2s; border: 1.5px solid #d0d4dc; background: transparent; color: var(--color-txt-app); font-family: 'Inter', sans-serif; white-space: nowrap; } .tab-pill:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); } .tab-pill.active { background: var(--color-brand-primary); color: var(--color-btn-app); border-color: var(--color-brand-primary); box-shadow: 0 4px 14px rgba(250,115,11,0.30); } .change-club-link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--color-brand-primary); font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; transition: color 0.2s; white-space: nowrap; } .change-club-link:hover { color: #e06900; } .change-club-link svg { width: 12px; height: 12px; fill: currentColor; } /* ══════ SUBSCRIPTION CARDS GRID ══════ */ .subscriptions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } .subscription-card { background: var(--color-bg-surface); border-radius: 20px; overflow: hidden; border: 1px solid rgba(9,26,68,0.08); box-shadow: 0 2px 12px rgba(9,26,68,0.07); transition: all 0.3s; /* cursor: pointer; */ display: flex; flex-direction: column; } .subscription-card:hover { box-shadow: 0 8px 28px rgba(9,26,68,0.14); transform: translateY(-3px); } /* Orange variant card border */ .subscription-card.orange-variant { border: 2px solid var(--color-brand-primary); } /* ── Card Header (navy gradient with dot pattern) ── */ .card-header-area { background: linear-gradient(180deg, #0f2255 0%, var(--color-brand-accent) 60%, #0a1c3a 100%); padding: 22px 24px 28px; position: relative; min-height: 110px; } .card-header-area-highlight::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: linear-gradient(90deg, var(--color-brand-primary), var(--color-state-warning)); z-index: 1; } .card-header-area::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 12px 12px; pointer-events: none; } .card-header-area.orange-gradient { background: linear-gradient(135deg, var(--palette-orange-400) 0%, var(--color-brand-primary) 40%, var(--color-brand-primary-active) 100%); } /* Label pill badge top-left */ .card-type-label { display: inline-flex; align-items: center; padding: 5px 12px; background: var(--color-brand-primary); border-radius: 4px; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-text-inverse); margin-bottom: 14px; } .card-logo-icon { position: absolute; top: 18px; right: 20px; opacity: 0.20; } .card-logo-icon svg { width: 40px; height: 40px; fill: rgba(255,255,255,0.35); } .card-sub-name { font-size: 22px; font-weight: 800; color: var(--color-text-inverse); text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.2; max-width: 75%; } /* ── Card Body (white) with semicircle notches ── */ .card-body { padding: 28px 24px 24px; flex: 1; display: flex; flex-direction: column; position: relative; } .card-body::before, .card-body::after { content: ''; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-bg-app); } .card-body::before { left: -8px; } .card-body::after { right: -8px; } /* Orange variant body has warm tint */ .orange-variant .card-body { background: linear-gradient(180deg, rgba(250,115,11,0.06) 0%, rgba(250,115,11,0.02) 100%); } /* Price section */ .price-section { text-align: center; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #eee; } .price-old-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; } .price-old { font-size: 13px; font-weight: 700; color: var(--color-brand-primary); text-decoration: line-through; text-decoration-thickness: 1.5px; } .discount-badge { display: inline-flex; align-items: center; padding: 3px 8px; background: var(--color-brand-primary); color: var(--color-btn-app); border-radius: 4px; font-size: 9px; font-weight: 800; letter-spacing: 0.3px; } .price-main { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin-bottom: 4px; } .price-amount { font-size: 58px; font-weight: 900; color: var(--color-text-primary); line-height: 1; letter-spacing: -2px; } .price-decimals { font-size: 22px; font-weight: 700; color: var(--color-text-primary); margin-top: 6px; } .price-unit { font-size: 10px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 1.2px; } /* Orange variant prices */ .orange-variant .price-amount, .orange-variant .price-decimals { color: var(--color-brand-primary); } .orange-variant .price-unit { color: rgba(250,115,11,0.55); } /* Info boxes (VALABILITATE + ACCES) */ .info-boxes { display: flex; gap: 12px; margin-bottom: 20px; } .info-box { flex: 1; background: #f5f6f8; border: 1px solid var(--color-border-subtle); border-radius: 10px; padding: 14px 14px; text-align: center; } .info-box-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--color-text-secondary); margin-bottom: 6px; } .info-box-value { font-size: 14px; font-weight: 700; color: var(--color-text-primary); } /* Orange variant info boxes */ .orange-variant .info-box { background: rgba(250,115,11,0.05); border-color: var(--color-overlay-accent-md); } /* Feature list with green circle-check */ .card-features { list-style: none; margin-bottom: 22px; } .card-features li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-text-secondary); padding: 5px 0; } .card-features li svg { width: 14px; height: 14px; fill: #5cb85c; flex-shrink: 0; } /* Orange variant feature icons */ .orange-variant .card-features li svg { fill: var(--color-brand-primary); } /* Card buttons wrapper */ .card-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: auto; } /* DETALII CLIPCARD — outlined style */ .sub-details-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 20px; background: var(--color-bg-surface); color: var(--color-text-primary); border: 1.5px solid var(--color-text-primary); border-radius: 50px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.2s; } .sub-details-btn:hover { background: rgba(9,26,68,0.05); } /* Orange variant outlined */ .orange-variant .sub-details-btn { color: var(--color-brand-primary); border-color: var(--color-brand-primary); } .orange-variant .sub-details-btn:hover { background: rgba(250,115,11,0.05); } /* CUMPARA CLIPCARD — navy filled */ .sub-cta-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 20px; background: var(--color-brand-primary); color: var(--color-btn-app); border: none; border-radius: 50px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; cursor: pointer; text-decoration: none; font-family: 'Inter', sans-serif; transition: all 0.2s; } .sub-cta-btn:hover { background: #0d2555; transform: translateY(-1px); } /* Orange variant CTA */ .orange-variant .sub-cta-btn { background: var(--color-brand-primary); box-shadow: 0 4px 16px rgba(250,115,11,0.30); } .orange-variant .sub-cta-btn:hover { background: #e06900; box-shadow: 0 6px 24px rgba(250,115,11,0.40); } /* ══════ SUBSCRIPTION DETAILS MODAL ══════ */ .sub-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 100; align-items: center; justify-content: center; } .sub-modal-backdrop.active { display: flex; } .sub-modal { background: var(--color-bg-surface); border-radius: 20px; max-width: 520px; width: 90%; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.25); animation: modalFadeIn 0.25s ease; } @keyframes modalFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Modal Header — navy */ .sub-modal-header { background: linear-gradient(135deg, var(--palette-navy-600) 0%, var(--color-brand-accent) 100%); padding: 28px 32px; position: relative; } .sub-modal-header::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 12px 12px; pointer-events: none; } .sub-modal-name { font-size: 24px; font-weight: 800; color: var(--color-text-inverse); text-transform: uppercase; position: relative; z-index: 1; } .sub-modal-category { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.50); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; position: relative; z-index: 1; } .sub-modal-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.20); background: transparent; color: rgba(255,255,255,0.60); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; z-index: 2; } .sub-modal-close:hover { background: rgba(255,255,255,0.10); color: var(--color-text-inverse); } .sub-modal-close svg { width: 12px; height: 12px; fill: currentColor; } /* Modal Body */ .sub-modal-body { padding: 28px 32px 32px; width: 100%; } /* Price row */ .sub-modal-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 24px; } .sub-modal-price-amount { font-size: 32px; font-weight: 900; color: var(--color-text-primary); } .sub-modal-price-currency { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; } /* Description */ .sub-modal-description { font-size: 13px; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #eee; } /* Info rows */ .sub-modal-info-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .sub-modal-info-label { font-size: 13px; color: var(--color-text-muted); } .sub-modal-info-value { font-size: 13px; font-weight: 700; color: var(--color-text-primary); } /* Benefits section */ .sub-modal-benefits-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-secondary); margin-top: 20px; margin-bottom: 12px; } .sub-modal-benefits { list-style: none; } .sub-modal-benefits li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-secondary); padding: 5px 0; } .sub-modal-benefits li svg { width: 14px; height: 14px; fill: #5cb85c; flex-shrink: 0; } /* Close button bottom */ .sub-modal-close-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 20px; background: var(--color-bg-app); color: var(--color-text-primary); border: none; border-radius: 50px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.2s; margin-top: 24px; } .sub-modal-close-btn:hover { background: #e4e7ec; } /* ══════ FLOATING SELECTION CARD ══════ */ .selection-card { position: fixed; bottom: 32px; left: 32px; background: var(--color-bg-surface); border-radius: 14px; padding: 0; box-shadow: 0 4px 24px var(--color-overlay-brand-hard); z-index: 50; overflow: hidden; min-width: 180px; } .selection-header { background: var(--color-brand-accent); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; } .selection-header-label { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-inverse); } .selection-header-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--palette-green-400); } .selection-body { padding: 14px 16px; display: flex; align-items: center; gap: 10px; } .selection-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(250,115,11,0.10); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .selection-icon svg { width: 12px; height: 12px; fill: var(--color-brand-primary); } .selection-info-label { font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-text-secondary); margin-bottom: 2px; } .selection-info-value { font-size: 12px; font-weight: 700; color: var(--color-text-primary); } .city-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .city-card { position: relative; border-radius: 20px; overflow: hidden; height: 350px; cursor: pointer; transition: transform 0.35s ease, box-shadow 0.35s ease; text-decoration: none; display: block; box-shadow: 0 4px 24px rgba(9,26,68,0.10); } .city-card:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(9,26,68,0.18); } .city-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .city-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,26,68,0.08) 0%, rgba(9,26,68,0.25) 35%, rgba(9,26,68,0.60) 70%, rgba(9,26,68,0.78) 100%); z-index: 1; } .city-card-content { position: relative; z-index: 2; padding: 26px 28px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .city-card-name { font-size: 28px; font-weight: 800; color: var(--color-text-inverse); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } /* Bottom bar — white default, orange on hover */ .city-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: var(--color-bg-surface); z-index: 3; transition: background 0.3s ease; } .city-card:hover::after { background: var(--color-brand-primary); } .city-card-badge { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 6px; background: var(--color-brand-primary); color: var(--color-btn-app); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; width: fit-content; } /* Search Bar + Counter Row */ .search-counter-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; gap: 20px; } .search-wrapper { flex: 1; position: relative; } .search-input { width: 100%; padding: 12px 20px 12px 44px; border: 1px solid #ddd; border-radius: 50px; font-family: 'Inter', sans-serif; font-size: 14px; color: #333; transition: all 0.2s; } .search-input::placeholder { color: #999; } .search-input:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(250, 115, 11, 0.1); } .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #999; pointer-events: none; } .clubs-counter { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-secondary); white-space: nowrap; } /* Club Cards Grid */ .clubs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; } .club-card { background: var(--color-bg-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px var(--color-shadow-md); transition: all 0.2s; display: flex; flex-direction: column; cursor: pointer; } .club-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .club-card.coming-soon { cursor: default; overflow: hidden; } .club-card.coming-soon:hover { transform: none; box-shadow: 0 2px 16px rgba(9,26,68,0.08); } .club-card.coming-soon .club-image-wrapper { background: linear-gradient(145deg, #e8ecf2 0%, #d4dae6 50%, #c4ccd8 100%); position: relative; } .coming-soon-visual { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .coming-soon-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(9,26,68,0.08); display: flex; align-items: center; justify-content: center; } .coming-soon-icon svg { width: 20px; height: 20px; fill: var(--color-text-primary); opacity: 0.35; } .coming-soon-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--color-brand-accent); color: white; padding: 8px 18px; border-radius: 50px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; white-space: nowrap; } .coming-soon-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-primary); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .club-card.coming-soon .club-info { background: #f6f8fb; } /* Card Image Area */ .club-image-wrapper { position: relative; height: 180px; overflow: hidden; background: #e0e0e0; } .club-image { width: 100%; height: 100%; object-fit: cover; } .club-image.placeholder { background: #c8d0dc; } .details-btn { position: absolute; top: 12px; right: 12px; border: none; background: rgba(255, 255, 255, 0.92); color: #000; padding: 7px 16px; border-radius: 50px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.25s; font-family: 'Inter', sans-serif; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .details-btn:hover { background: var(--color-bg-surface); box-shadow: 0 4px 14px rgba(0,0,0,0.18); transform: translateY(-1px); } /* Coming Soon Badge */ .coming-soon-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.5); color: white; padding: 12px 20px; border-radius: 50px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } /* Card Info Area */ .club-info { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; display: flex; flex-direction: column; } .club-name { font-size: 18px; font-weight: 800; color: var(--color-text-primary); } .club-address { font-size: 12px; color: var(--color-text-secondary); line-height: 2.8; } /* Rating */ /* Action Button */ .enroll-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--color-brand-primary); color: var(--color-btn-app); border: none; border-radius: 50px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; width: 100%; text-decoration: none; } .enroll-btn:hover { background: #0d2555; } .enroll-chevron { width: 10px; height: 10px; fill: white; margin-left: auto; } .btn-line { width: 24px; height: 1px; background: var(--color-bg-surface); } /* ══════ MODAL ══════ */ .modal-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.55); z-index: 100; animation: fadeIn 0.25s ease-out; } .modal-backdrop.active { display: block; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-container { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 780px; width: 88%; /* height: 520px; */ background: var(--color-bg-surface); border-radius: 24px; overflow: hidden; z-index: 101; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); animation: slideUp 0.3s ease-out; flex-direction: row; } @keyframes slideUp { from { transform: translate(-50%, -46%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } } /* ── Modal left: image panel with orange accent strip ── */ .modal-left { flex: 0 0 42%; position: relative; overflow: hidden; } .modal-left::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--color-brand-primary); z-index: 4; } .modal-image { width: 100%; height: 100%; object-fit: cover; display: block; } .modal-image-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(9,26,68,0.85) 0%, rgba(9,26,68,0.40) 50%, transparent 100%); padding: 28px 24px 22px; color: white; } .modal-club-name-overlay { font-size: 22px; font-weight: 800; margin-bottom: 4px; letter-spacing: 0.3px; } .modal-address-overlay { font-size: 11px; color: rgba(255,255,255,0.7); margin-bottom: 8px; } .modal-rating-overlay { display: flex; align-items: center; gap: 4px; font-size: 12px; } .modal-rating-overlay .star { width: 11px; height: 11px; fill: var(--color-brand-primary); } /* ── Modal right: info panel ── */ .modal-right { flex: 1; background: var(--color-bg-surface); padding: 32px 34px 28px; display: flex; flex-direction: column; overflow-y: auto; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #eee; margin-bottom: 20px; } .modal-header-left { display: flex; align-items: center; gap: 12px; } .modal-header-icon { width: 36px; height: 36px; background: rgba(250, 115, 11, 0.10); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal-header-icon svg { width: 16px; height: 16px; fill: var(--color-brand-primary); } .modal-header-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); } .modal-close { background: none; border: 1.5px solid #ddd; border-radius: 50%; color: #999; cursor: pointer; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .modal-close:hover { border-color: #999; color: #333; } .modal-close svg { width: 12px; height: 12px; fill: currentColor; } .modal-description { font-size: 13px; color: #777; line-height: 1.7; margin-bottom: 14px; } .modal-map-link { display: inline-block; font-size: 10px; color: var(--color-brand-primary); font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.6px; cursor: pointer; transition: color 0.2s; margin-bottom: 22px; } .modal-map-link:hover { color: #e06900; } .modal-facilities-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--color-text-primary); margin-bottom: 12px; } .modal-facilities { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .facility-chip { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1.5px solid #e8e8e8; border-radius: 50px; font-size: 11px; font-weight: 600; color: var(--color-txt-app); background: var(--color-bg-surface); transition: border-color 0.2s; } .facility-chip:hover { border-color: #ccc; } .facility-chip svg { width: 14px; height: 14px; fill: #888; } .confirm-btn { width: 100%; padding: 15px 20px; background: var(--color-brand-primary); color: var(--color-btn-app); border: none; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.25s; font-family: 'Inter', sans-serif; margin-top: auto; box-shadow: 0 4px 16px rgba(250,115,11,0.30); } .confirm-btn:hover { background: #e06900; box-shadow: 0 6px 24px rgba(250,115,11,0.40); transform: translateY(-1px); } /* Scrollbar styling */ .main-content::-webkit-scrollbar { width: 8px; } .main-content::-webkit-scrollbar-track { background: transparent; } .main-content::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; } .main-content::-webkit-scrollbar-thumb:hover { background: #999; } .modal-right::-webkit-scrollbar { width: 6px; } .modal-right::-webkit-scrollbar-track { background: transparent; } .modal-right::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; } .modal-right::-webkit-scrollbar-thumb:hover { background: #999; } /* ══════ SCROLLBAR ══════ */ .main-content::-webkit-scrollbar { width: 6px; } .main-content::-webkit-scrollbar-track { background: transparent; } .main-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; } .main-content::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.20); } /* ══════ RESPONSIVE ══════ */ .mobile-menu-toggle { display: none; } .mobile-nav-close { display: none; } /* Intro Text */ .intro-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 28px; } .intro-text p { margin-bottom: 12px; } .intro-text p:last-child { margin-bottom: 0; } /* ══════ IDENTIFICATION CARD ══════ */ .id-card { background: var(--color-bg-surface); border-radius: 20px; box-shadow: 0 2px 12px var(--color-overlay-brand-md); padding: 36px 40px 40px; } /* Tab Switcher */ .tab-switcher { display: flex; justify-content: center; gap: 0; margin-bottom: 32px; background: var(--color-bg-app); border-radius: 50px; padding: 4px; max-width: 380px; margin-left: auto; margin-right: auto; } .tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: none; border-radius: 50px; background: transparent; color: var(--color-text-secondary); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.25s; text-decoration: none; } .tab-btn svg { width: 14px; height: 14px; fill: currentColor; } .tab-btn.active { background: var(--color-brand-accent); color: var(--color-text-inverse); box-shadow: 0 2px 8px rgba(9,26,68,0.18); } .tab-btn:not(.active):hover { color: var(--color-text-primary); } /* Tab Content */ .tab-content { display: none; } .tab-content.active { display: block; } .tab-heading { text-align: center; font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 10px; } .tab-desc { text-align: center; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 28px; line-height: 1.5; } /* Phone Input Group */ .phone-input-group { display: flex; gap: 0; border: 1.5px solid #e0e3ea; border-radius: 14px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .phone-input-group:focus-within { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(250,115,11,0.10); } .phone-prefix { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: var(--color-bg-surface-alt); border-right: 1.5px solid #e0e3ea; flex-shrink: 0; cursor: pointer; user-select: none; } .phone-flag { width: 28px; height: 20px; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; } .flag-stripe { flex: 1; } .flag-stripe.blue { background: #002B7F; } .flag-stripe.yellow { background: #FCD116; } .flag-stripe.red { background: #CE1126; } .phone-prefix-text { font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .phone-prefix-code { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); } .phone-prefix-arrow { width: 10px; height: 10px; fill: var(--color-text-secondary); margin-left: 4px; } .phone-input { flex: 1; border: none; padding: 14px 16px; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--color-text-primary); background: var(--color-bg-input); outline: none; } .phone-input::placeholder { color: #c0c6d0; } .phone-input-icon { display: flex; align-items: center; padding-right: 16px; /* background: var(--color-bg-input); */ } .phone-input-icon svg { width: 18px; height: 18px; fill: #c0c6d0; } /* Email Input */ .email-input-group { display: flex; border: 1.5px solid #e0e3ea; border-radius: 14px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .email-input-group:focus-within { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(250,115,11,0.10); } .email-input { flex: 1; border: none; padding: 16px 16px; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--color-text-primary); background: var(--color-bg-surface); outline: none; } .email-input::placeholder { color: #c0c6d0; } .email-input-icon { display: flex; align-items: center; padding-right: 16px; background: var(--color-bg-surface); } .email-input-icon svg { width: 18px; height: 18px; fill: #c0c6d0; } /* ══════ FLOATING SELECTION CARD ══════ */ .floating-selection { position: fixed; bottom: 80px; left: 20px; z-index: 50; background: var(--color-bg-surface); border-radius: 14px; box-shadow: 0 4px 24px var(--color-overlay-brand-hard); width: 210px; overflow: hidden; } .floating-header { background: var(--color-brand-accent); padding: 10px 16px; color: var(--color-text-inverse); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; } .floating-dot { width: 8px; height: 8px; background: var(--palette-green-400); border-radius: 50%; } .floating-body { padding: 14px 16px; } .floating-row { display: flex; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e0e3ea; } .floating-row:last-child { border-bottom: none; padding-bottom: 0; padding-top: 14px; } .floating-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--color-overlay-accent-md); color: var(--color-brand-primary); } .floating-icon svg { width: 12px; height: 12px; fill: currentColor; } .floating-content { flex: 1; } .floating-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 2px; letter-spacing: 0.3px; } .floating-value { font-size: 12px; font-weight: 700; color: var(--color-text-primary); } .floating-link { color: var(--color-brand-primary); text-decoration: none; font-size: 11px; font-weight: 600; } .floating-link:hover { text-decoration: underline; } /* ══════ BOTTOM BAR ══════ */ .bottom-bar { position: fixed; bottom: 0; left: max(180px, min(18vw, 240px)); right: 0; background: var(--color-bg-surface); border-top: 1px solid var(--color-border-subtle); display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 16px 60px; z-index: 60; } .bottom-left { display: flex; flex-direction: column; gap: 4px; } .total-label { font-size: 8px; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 700; letter-spacing: 0.5px; } .total-price { display: flex; align-items: baseline; gap: 4px; } .total-amount { font-size: 28px; font-weight: 900; color: var(--color-text-primary); } .total-decimals { font-size: 16px; font-weight: 900; color: var(--color-text-primary); } .total-ron { font-size: 12px; font-weight: 700; color: var(--color-brand-primary); margin-left: 4px; } .total-subscription { font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bottom-right { display: flex; gap: 12px; } .btn-back { border: 1.5px solid #d0d4dc; background: var(--color-bg-surface); color: var(--color-text-primary); border-radius: 50px; padding: 14px 28px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; } .btn-back:hover { background: #f5f6f8; border-color: #c0c6d0; } .btn-continue { background: var(--color-brand-primary); color: var(--color-btn-app); border-radius: 50px; padding: 14px 28px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none; box-shadow: 0 4px 12px rgba(250,115,11,0.25); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-continue:hover { background: var(--color-brand-primary-hover); box-shadow: 0 6px 16px var(--color-overlay-accent-hard); } /* Mobile Menu Toggle */ .mobile-menu-toggle { display: none; background: none; border: none; color: var(--color-text-inverse); font-size: 20px; cursor: pointer; margin-bottom: 16px; } .mobile-menu-toggle svg { width: 24px; height: 24px; fill: currentColor; } .mobile-nav-close { display: none; position: absolute; top: 24px; right: 24px; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 24px; cursor: pointer; z-index: 11; } /* ══════ PROFILE FORM CARD ══════ */ .profile-card { background: var(--color-bg-surface); border-radius: 20px; box-shadow: 0 2px 12px var(--color-overlay-brand-md); padding: 36px 40px 40px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; } .form-row.single { grid-template-columns: 1fr; } .form-group { display: flex; flex-direction: column; } .form-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--color-text-primary); margin-bottom: 10px; } .form-label .required { color:var(--color-state-error); margin-left: 1px; } .form-input-wrapper { position: relative; } .form-input { width: 100%; padding: 16px 46px 16px 18px; border: 1.5px solid var(--color-border-default); border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--color-text-primary); background: var(--color-bg-input); outline: none; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; } .form-input::placeholder { color: var(--color-text-placeholder); font-weight: 400; } .form-input:focus { border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px var(--color-overlay-brand-md); background: var(--color-bg-input); } .form-input.has-value { border-color: var(--color-border-strong); background: var(--color-bg-surface-alt); } .form-input.has-value:focus { border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px var(--color-overlay-brand-md); } .input-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--color-border-strong); pointer-events: none; transition: color 0.2s; } .form-input:focus ~ .input-icon { color: var(--color-text-primary); } .form-input.has-value ~ .input-icon { color: var(--color-text-secondary); } .input-icon svg { width: 16px; height: 16px; fill: currentColor; } .form-helper { font-size: 11px; color: var(--color-text-secondary); margin-top: 8px; line-height: 1.5; } /* ══════ GENDER SELECTOR ══════ */ .gender-selector { display: flex; gap: 10px; } .gender-option { flex: 1; padding: 16px 8px; text-align: center; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-bg-surface); cursor: pointer; border: 1.5px solid var(--color-border-default); border-radius: 12px; transition: all 0.2s; text-decoration: none; } .gender-option:hover { border-color: var(--color-text-placeholder); color: var(--color-text-primary); background: var(--color-bg-surface-alt); } .gender-option.selected { background: var(--color-brand-primary); color: var(--color-btn-app); border-color: var(--color-brand-primary); box-shadow: 0 2px 8px rgba(250,115,11,0.20); } /* ══════ PHONE INPUT WITH PREFIX ══════ */ .phone-input-group { display: flex; gap: 0; border: 1.5px solid var(--color-border-default); border-radius: 12px; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; } .phone-input-group:focus-within { border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px var(--color-overlay-brand-md); } .phone-input-group.has-value { border-color: var(--color-border-strong); background: var(--color-bg-surface-alt); } .phone-input-group.has-value:focus-within { border-color: var(--color-brand-accent); } .phone-prefix { display: flex; align-items: center; gap: 8px; padding: 16px 14px 16px 18px; background: #f4f5f8; border-right: 1.5px solid var(--color-border-default); flex-shrink: 0; } .phone-flag { display: flex; width: 22px; height: 14px; border-radius: 2px; overflow: hidden; } .flag-stripe { flex: 1; } .flag-stripe.blue { background: #002B7F; } .flag-stripe.yellow { background: #FCD116; } .flag-stripe.red { background: #CE1126; } .phone-prefix-text { font-size: 12px; font-weight: 600; color: var(--color-text-primary); } .phone-prefix-code { font-size: 12px; color: var(--color-text-secondary); } .phone-input { flex: 1; border: none; padding: 16px 46px 16px 16px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--color-text-primary); outline: none; background: transparent; } .phone-input::placeholder { color: var(--color-text-placeholder); font-weight: 400; } .phone-input-icon { display: flex; align-items: center; padding-right: 16px; color: var(--color-border-strong); transition: color 0.2s; } .phone-input-group:focus-within .phone-input-icon { color: var(--color-text-primary); } .phone-input-icon svg { width: 16px; height: 16px; fill: currentColor; } /* ══════ SEPARATOR ══════ */ .form-separator { height: 1px; background: var(--color-border-subtle); margin: 32px 0; } /* ══════ CHECKBOXES ══════ */ .checkbox-section { display: flex; flex-direction: column; gap: 18px; } .checkbox-row { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; } .checkbox-box { width: 22px; height: 22px; min-width: 22px; border: 1.5px solid #d0d4dc; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; margin-top: 0; background: var(--color-bg-surface); } .checkbox-box svg { width: 12px; height: 12px; fill: var(--color-text-inverse); opacity: 0; transition: opacity 0.2s; } .checkbox-row.checked .checkbox-box { background: var(--color-brand-primary); border-color: var(--color-brand-primary); } .checkbox-row.checked .checkbox-box svg { opacity: 1; } .checkbox-text { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; } .checkbox-text a { color: var(--color-brand-primary); text-decoration: none; font-weight: 600; } .checkbox-text a:hover { text-decoration: underline; } /* ══════ RECAPTCHA ══════ */ .recaptcha-wrapper { margin-top: 24px; } .recaptcha-box { display: inline-flex; align-items: center; gap: 12px; border: 1.5px solid #e0e3ea; border-radius: 12px; padding: 12px 20px; background: #fafafa; } .recaptcha-check { width: 24px; height: 24px; border: 2px solid #c0c6d0; border-radius: 4px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .recaptcha-check.verified { background: var(--palette-green-400); border-color: var(--palette-green-400); } .recaptcha-check svg { width: 14px; height: 14px; fill: var(--color-text-inverse); opacity: 0; } .recaptcha-check.verified svg { opacity: 1; } .recaptcha-label { font-size: 13px; color: var(--color-text-secondary); } .recaptcha-logo { display: flex; flex-direction: column; align-items: center; margin-left: 16px; } .recaptcha-logo svg { width: 32px; height: 32px; } .recaptcha-logo-text { font-size: 7px; color: #999; margin-top: 2px; } .recaptcha-logo-sub { font-size: 6px; color: #bbb; } /* ══════ FLOATING SELECTION CARD ══════ */ .floating-selection { position: fixed; bottom: 80px; left: 20px; z-index: 50; background: var(--color-bg-surface); border-radius: 14px; box-shadow: 0 4px 24px var(--color-overlay-brand-hard); width: 210px; overflow: hidden; } .floating-header { background: var(--color-brand-accent); padding: 10px 16px; color: var(--color-text-inverse); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; } .floating-dot { width: 8px; height: 8px; background: var(--palette-green-400); border-radius: 50%; } .floating-body { padding: 14px 16px; } .floating-row { display: flex; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e0e3ea; } .floating-row:last-child { border-bottom: none; padding-bottom: 0; padding-top: 14px; } .floating-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--color-overlay-accent-md); color: var(--color-brand-primary); } .floating-icon svg { width: 12px; height: 12px; fill: currentColor; } .floating-content { flex: 1; } .floating-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 2px; letter-spacing: 0.3px; } .floating-value { font-size: 12px; font-weight: 700; color: var(--color-text-primary); } .floating-link { color: var(--color-brand-primary); text-decoration: none; font-size: 11px; font-weight: 600; } .floating-link:hover { text-decoration: underline; } /* ══════ BOTTOM BAR ══════ */ .bottom-bar { position: fixed; bottom: 0; left: max(180px, min(18vw, 240px)); right: 0; background: var(--color-bg-surface); border-top: 1px solid var(--color-border-subtle); display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 16px 60px; z-index: 60; } .bottom-left { display: flex; flex-direction: column; gap: 4px; } .total-label { font-size: 8px; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 700; letter-spacing: 0.5px; } .total-price { display: flex; align-items: baseline; gap: 4px; } .total-amount { font-size: 28px; font-weight: 900; color: var(--color-text-primary); } .total-decimals { font-size: 16px; font-weight: 900; color: var(--color-text-primary); } .total-ron { font-size: 12px; font-weight: 700; color: var(--color-brand-primary); margin-left: 4px; } .total-subscription { font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bottom-right { display: flex; gap: 12px; } .btn-back { border: 1.5px solid #d0d4dc; background: var(--color-bg-surface); color: var(--color-text-primary); border-radius: 50px; padding: 14px 28px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; } .btn-back:hover { background: #f5f6f8; border-color: #c0c6d0; } .btn-continue { background: var(--color-brand-primary); color: var(--color-btn-app); border-radius: 50px; padding: 14px 28px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none; box-shadow: 0 4px 12px rgba(250,115,11,0.25); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-continue:hover { background: var(--color-brand-primary-hover); box-shadow: 0 6px 16px var(--color-overlay-accent-hard); } .btn-continue:disabled { opacity: 0.5; cursor: not-allowed; } /* Mobile Menu Toggle */ .mobile-menu-toggle { display: none; background: none; border: none; color: var(--color-text-inverse); font-size: 20px; cursor: pointer; margin-bottom: 16px; } .mobile-menu-toggle svg { width: 24px; height: 24px; fill: currentColor; } .mobile-nav-close { display: none; position: absolute; top: 24px; right: 24px; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 24px; cursor: pointer; z-index: 11; } @media (max-width: 1024px) { .main-content { padding: 32px 48px 90px 56px; } .subscriptions-grid { grid-template-columns: repeat(2, 1fr); } .selection-card { left: 20px; bottom: 20px; } .city-cards { grid-template-columns: repeat(2, 1fr); } .city-card { height: 280px; } .id-card { padding: 28px 32px 32px; } .floating-selection { width: 200px; } .bottom-bar { padding: 16px 48px; } .profile-card { padding: 28px 32px 32px; } .page-title { font-size: 28px; } .form-row { gap: 20px; } .gender-option { padding: 14px 6px; font-size: 13px; } } @media (max-width: 768px) { body { flex-direction: column; } .sidebar { width: 100%; min-width: unset; max-width: unset; height: auto; position: relative; border-radius: 0 0 20px 20px; padding: 16px 20px; flex-direction: row; align-items: center; gap: 16px; } .sidebar-back { margin-bottom: 0; order: 0; } .sidebar-logo { margin-bottom: 0; order: 1; } .sidebar-logo svg { width: 80px; } .steps-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(165deg, var(--palette-navy-600) 0%, var(--palette-navy-800) 50%, var(--palette-navy-900) 100%); z-index: 200; padding: 80px 32px 32px; flex-direction: column; gap: 0; margin: 0; overflow-y: auto; } .steps-nav.mobile-open { display: flex !important; } .sidebar-bottom { display: none; } .mobile-menu-toggle { display: flex; margin-left: auto; order: 2; background: var(--color-overlay-white-soft); border: none; color: rgba(255,255,255,0.6); width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; } .mobile-menu-toggle svg { width: 16px; height: 16px; fill: currentColor; } .mobile-nav-close { display: none; position: fixed; top: 20px; right: 20px; z-index: 201; background: var(--color-overlay-white-soft); border: none; color: rgba(255,255,255,0.6); width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; } .mobile-nav-close svg { width: 14px; height: 14px; fill: currentColor; } .main-content { padding: 24px 16px 32px; min-height: auto; } .watermark-number { font-size: 100px; top: -10px; left: -15px; } .page-title { font-size: 28px; } .page-subtitle { font-size: 13px; } .tabs-row { gap: 8px; } .tab-pill { padding: 8px 14px; font-size: 10px; } .change-club-link { margin-left: 0; margin-top: 4px; } .subscriptions-grid { grid-template-columns: 1fr; } .price-amount { font-size: 42px; } .price-decimals { font-size: 16px; } .selection-card { position: fixed; bottom: 16px; left: 16px; right: 16px; min-width: unset; } .city-card { height: 260px; } .city-card-name { font-size: 22px; } .clubs-grid { grid-template-columns: repeat(2, 1fr); } .search-counter-row { flex-direction: column; align-items: stretch; gap: 12px; } .clubs-counter { text-align: center; } .modal-container { flex-direction: column; width: 94%; height: auto; max-height: 90vh; overflow-y: auto; } .modal-left { flex: 0 0 200px; } .modal-left::before { width: 100%; height: 4px; } .modal-right { padding: 24px 20px; } .modal-club-name-overlay { font-size: 18px; } .floating-selection { position: relative; bottom: auto; left: auto; width: 100%; margin-bottom: 16px; z-index: 40; } .id-card { padding: 24px 20px 28px; } .tab-switcher { max-width: 100%; } .phone-prefix { padding: 12px 10px; } .profile-card { padding: 24px 20px 28px; } .form-row { grid-template-columns: 1fr; gap: 20px; } .gender-selector { max-width: 100%; } } @media (max-width: 480px) { .main-content { padding: 16px 12px 24px; } .page-title { font-size: 24px; } .watermark-number { font-size: 80px; } .tab-pill { padding: 7px 12px; font-size: 9px; } .card-sub-name { font-size: 17px; } .price-amount { font-size: 36px; } .city-cards { grid-template-columns: 1fr; } .city-card { height: 220px; } .clubs-grid { grid-template-columns: 1fr; } .id-card { padding: 20px 16px 24px; } .tab-btn { font-size: 11px; padding: 10px 12px; } .total-amount { font-size: 24px; } .floating-selection { margin-bottom: 12px; } .bottom-bar { padding: 12px 16px; } .page-subtitle { font-size: 11px; } .profile-card { padding: 20px 16px 24px; } .gender-selector { gap: 6px; } .gender-option { font-size: 12px; padding: 13px 4px; } } /* ══════════════════════════════════════════════════════════════════ ADDITIONAL SECTIONS — added on top of stylev2.css ══════════════════════════════════════════════════════════════════ */ /* ══════ KEYFRAMES & ANIMATIONS (from preview-html) ══════ */ @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translate(-50%, -46%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } } @keyframes modalFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } } @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ══════ ACCES MEMBRI / AUTH ══════ */ .auth-card { background: var(--color-bg-surface); border-radius: 20px; padding: 36px 40px; box-shadow: 0 2px 16px var(--color-overlay-brand-md); margin-bottom: 36px; } .alert-box { display: flex; align-items: center; gap: 14px; border-radius: 12px; padding: 16px 22px; margin-bottom: 12px; border: none; border-left: 4px solid transparent; overflow: hidden; transition: opacity 0.3s, max-height 0.4s ease, padding 0.3s, margin 0.3s; padding-top: 0; padding-bottom: 0; margin-bottom: 0; } .alert-box.visible { opacity: 1; padding: 16px 22px; margin-bottom: 12px; } .alert-success { background: var(--color-state-success-bg); border-left-color: var(--color-state-success); } .alert-error { background: var(--color-state-error-bg); border-left-color: var(--color-state-error); } .alert-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .alert-success .alert-icon { background: rgba(34,197,94,0.15); } .alert-error .alert-icon { background: rgba(250,115,11,0.12); } .alert-success .alert-icon svg { fill: var(--color-state-success); } .alert-error .alert-icon svg { fill: var(--color-brand-primary); } .alert-icon svg { width: 16px; height: 16px; } .alert-content { flex: 1; } .alert-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; } .alert-success .alert-title { color: var(--palette-green-600); } .alert-error .alert-title { color: var(--color-state-error); } .alert-desc { font-size: 12.5px; color: #484a4d; line-height: 1.5; } .auth-separator { height: 1px; background: var(--color-border-subtle); margin: 24px 0; } .auth-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; } .btn-auth { display: inline-flex; align-items: center; gap: 10px; background: var(--color-brand-primary); color: var(--color-btn-app); border: none; border-radius: 50px; padding: 16px 40px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 16px rgba(250,115,11,0.25); } .btn-auth:hover { background: #e8660a; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(250,115,11,0.30); } .btn-auth:active { transform: translateY(0); } .btn-auth svg { width: 16px; height: 16px; fill: var(--color-text-inverse); } .app-download-bar { background: var(--color-bg-surface); border-radius: 20px; padding: 32px 36px; box-shadow: 0 2px 16px var(--color-overlay-brand-md); display: flex; align-items: center; gap: 40px; max-width: 1100px; width: 100%; position: relative; z-index: 1; } .app-download-left { flex: 1; } .app-download-header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .app-download-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-download-icon svg { width: 22px; height: 22px; } .app-download-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); } .app-download-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 20px; } .app-store-buttons { display: flex; gap: 12px; } .app-download-right { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .activation-label { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--color-brand-primary); text-transform: uppercase; margin-bottom: 12px; } .activation-code-box { border: 2px dashed var(--color-border-strong); border-radius: 14px; padding: 18px 32px; cursor: pointer; transition: border-color 0.2s, background 0.2s; margin-bottom: 8px; } .activation-code-box:hover { border-color: var(--color-brand-accent); background: rgba(9,26,68,0.02); } .activation-code { font-size: 22px; font-weight: 800; letter-spacing: 6px; color: var(--color-text-primary); text-transform: uppercase; } .activation-hint { font-size: 11px; color: #9ca3af; } .btn-download-small { background: var(--color-brand-primary); color: var(--color-btn-app); border-radius: 50px; padding: 14px 28px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none; box-shadow: 0 4px 12px rgba(250,115,11,0.25); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-download-small:hover { background: var(--color-brand-primary-hover); box-shadow: 0 6px 16px var(--color-overlay-accent-hard); } .btn-download-small svg { width: 14px; height: 14px; fill: currentColor; } .btn-download { background: var(--color-brand-primary); color: var(--color-btn-app); border-radius: 50px; padding: 14px 28px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none; box-shadow: 0 4px 12px rgba(250,115,11,0.25); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-download:hover { background: var(--color-brand-primary-hover); box-shadow: 0 6px 16px var(--color-overlay-accent-hard); } .btn-download svg { width: 14px; height: 14px; fill: currentColor; } @media (max-width: 480px) { .btn-download { width: 100%; justify-content: center; } } /* ══════ DASHBOARD (index) ══════ */ .action-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .action-card { background: var(--color-bg-surface); border-radius: 18px; padding: 28px 28px 24px; border: 1.5px solid transparent; box-shadow: 0 2px 12px rgba(9,26,68,0.04); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; cursor: pointer; text-decoration: none; display: block; } .action-card:hover { transform: translateY(-3px); border-color: var(--color-brand-primary); box-shadow: 0 8px 28px rgba(250,115,11,0.12); } .action-card-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 10px; } .action-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .action-card-icon svg { width: 20px; height: 20px; fill: var(--color-btn-app); } .action-card-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); line-height: 1.3; margin-top: 4px; } .action-card-desc { font-size: 14px; color: var(--color-text-secondary); line-height: 2; margin-bottom: 14px; } .action-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-brand-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px; transition: gap 0.2s; } .action-card:hover .action-card-link { gap: 10px; } .action-card-link svg { width: 14px; height: 14px; fill: var(--color-brand-primary); } .card-top { display: flex; align-items: center; justify-content: space-between; } .card-logo { display: flex; align-items: center; gap: 6px; } .card-logo-text { font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.70); text-transform: uppercase; letter-spacing: 0.8px; } .card-bottom { position: relative; z-index: 1; } .card-name { font-size: 11px; font-weight: 600; color: var(--color-overlay-white-hard); text-transform: uppercase; letter-spacing: 0.5px; } .card-shadow { position: absolute; width: 340px; height: 200px; border-radius: 20px; background: linear-gradient(135deg, rgba(192,132,252,0.15), rgba(232,121,168,0.10)); top: 30px; left: 50%; transform: translateX(-50%) rotate(-4deg); z-index: -1; } .action-buttons { display: flex; gap: 16px; width: 100%; justify-content: center; } .card-brand { width: 26px; height: 16px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 800; color: var(--color-text-inverse); } .card-brand.mastercard { background: linear-gradient(135deg, #eb001b 50%, #f79e1b 50%); } .card-brand.visa { background: #1a1f71; } .header-strip { width: 100%; background: var(--color-bg-surface); display: flex; align-items: center; justify-content: center; padding: 18px 0; box-shadow: 0 1px 4px var(--color-shadow-soft); } .header-strip svg { height: 42px; width: auto; } .cards-row { display: flex; gap: 20px; margin-bottom: 20px; } .cards-row:last-child { margin-bottom: 0; } .card-w60 { flex: 0 0 calc(60% - 10px); } .card-w40 { flex: 0 0 calc(40% - 10px); } .card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,26,68,0.08) 0%, rgba(9,26,68,0.25) 30%, rgba(9,26,68,0.65) 65%, rgba(9,26,68,0.82) 100%); z-index: 1; } .card-icon-left { top: 18px; left: 18px; } .card-icon-right { top: 18px; right: 18px; } .card-content { position: relative; z-index: 2; padding: 28px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .card-title { font-size: 26px; font-weight: 800; color: var(--color-text-inverse); margin-bottom: 6px; line-height: 1.15; } .card-description { font-size: 12px; color: rgba(255,255,255,0.78); margin-bottom: 18px; max-width: 340px; line-height: 1.45; } .card-btn { display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px; border-radius: 50px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; border: none; cursor: pointer; text-decoration: none; width: fit-content; background-color: var(--color-brand-accent); color: var(--color-text-inverse); transition: background-color 0.2s; line-height: 1; } .card-btn:hover { background-color: #0f2560; } .card-btn .btn-line { display: inline-block; width: 32px; height: 1.5px; background: var(--color-bg-surface); border-radius: 1px; } @media (max-width: 480px) { .action-buttons { flex-direction: column; width: 100%; padding: 0 16px; } .header-strip svg { height: 32px; } .card-title { font-size: 20px; } .card-btn { font-size: 8px; padding: 10px 18px; } } @media (max-width: 768px) { .cards-row { flex-direction: column; } .card-w60 { flex: 1 1 100%; } .card-w40 { flex: 1 1 100%; } .card-title { font-size: 22px; } .card-description { font-size: 11px; } .app-download-bar { display: grid !important; } } /* ══════ GIFT CARDS (Card Cadou) ══════ */ .gift-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; } .gift-card { background: var(--color-bg-surface); border-radius: 20px; overflow: hidden; box-shadow: 0 2px 16px var(--color-overlay-brand-md); transition: transform 0.25s, box-shadow 0.25s; } .gift-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px var(--color-overlay-brand-hard); } .gift-card-header { position: relative; padding: 28px 28px 24px; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: center; } .gift-card-header.navy-gradient { background-image: linear-gradient(135deg, rgba(13,29,76,0.82) 0%, rgba(26,58,110,0.72) 40%, rgba(74,45,122,0.78) 100%), url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=600&q=80'); } .gift-card-header.orange-gradient { background-image: linear-gradient(135deg, rgba(232,130,15,0.78) 0%, rgba(250,115,11,0.72) 40%, rgba(245,166,35,0.78) 100%), url('https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?w=600&q=80'); } .gift-card-header.teal-gradient { background-image: linear-gradient(135deg, rgba(6,78,59,0.82) 0%, rgba(13,148,136,0.72) 40%, rgba(20,184,166,0.78) 100%), url('https://images.unsplash.com/photo-1518611012118-696072aa579a?w=600&q=80'); } .gift-card-header.rose-gradient { background-image: linear-gradient(135deg, rgba(159,18,57,0.82) 0%, rgba(225,29,72,0.72) 40%, rgba(251,113,133,0.78) 100%), url('https://images.unsplash.com/photo-1574680096145-d05b474e2155?w=600&q=80'); } .gift-card-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 6px; background: rgba(255,255,255,0.18); font-size: 9px; font-weight: 800; letter-spacing: 1.2px; color: var(--color-text-inverse); text-transform: uppercase; margin-bottom: 14px; width: fit-content; } .gift-card-header-icon { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; } .gift-card-header-icon svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.7); } .gift-card-header-title { font-size: 20px; font-weight: 800; color: var(--color-text-inverse); line-height: 1.25; } .gift-card-body { padding: 24px 28px 28px; } .gift-card-subtitle { font-size: 13px; font-weight: 600; margin-bottom: 16px; } .gift-card.navy .gift-card-subtitle { color: var(--color-brand-primary); } .gift-card.orange .gift-card-subtitle { color: var(--color-brand-primary); } .gift-card.teal .gift-card-subtitle { color: #0d9488; } .gift-card.rose .gift-card-subtitle { color: #e11d48; } .gift-card-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .gift-card-price-value { font-size: 36px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -1px; } .gift-card-price-currency { font-size: 16px; font-weight: 700; color: var(--color-text-primary); } .gift-card-price-approx { font-size: 12px; color: #9ca3af; margin-bottom: 20px; } .gift-card-features { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; background: #f6f7f9; border-radius: 14px; overflow: hidden; } .gift-card-feature { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--color-text-secondary); line-height: 1.55; padding: 14px 18px; } .gift-card-feature + .gift-card-feature { border-top: 1px solid #eceef1; } .gift-card-feature svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; } .gift-card.navy .gift-card-feature svg { fill: var(--color-brand-primary); } .gift-card.orange .gift-card-feature svg { fill: var(--color-brand-primary); } .gift-card.teal .gift-card-feature svg { fill: #0d9488; } .gift-card.rose .gift-card-feature svg { fill: #e11d48; } .gift-card-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; border: none; border-radius: 50px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; } .gift-card.navy .gift-card-cta { background: var(--color-brand-primary); color: var(--color-btn-app); box-shadow: 0 4px 16px rgba(250,115,11,0.25); } .gift-card.navy .gift-card-cta:hover { background: #e8660a; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(250,115,11,0.30); } .gift-card.orange .gift-card-cta { background: var(--color-brand-primary); color: var(--color-btn-app); box-shadow: 0 4px 16px rgba(250,115,11,0.25); } .gift-card.orange .gift-card-cta:hover { background: #e8660a; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(250,115,11,0.30); } .gift-card.teal .gift-card-cta { background: #0d9488; color: var(--color-btn-app); box-shadow: 0 4px 16px rgba(13,148,136,0.25); } .gift-card.teal .gift-card-cta:hover { background: #0f766e; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13,148,136,0.30); } .gift-card.rose .gift-card-cta { background: #e11d48; color: var(--color-btn-app); box-shadow: 0 4px 16px rgba(225,29,72,0.25); } .gift-card.rose .gift-card-cta:hover { background: #be123c; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(225,29,72,0.30); } .gift-card-cta svg { width: 14px; height: 14px; fill: var(--color-text-inverse); } .security-bar { background: linear-gradient(135deg, var(--color-brand-accent) 0%, #0d2255 100%); border-radius: 14px; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1100px; margin: 0 auto; width: 100%; box-sizing: border-box; } .security-bar-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-overlay-accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .security-bar-icon svg { width: 20px; height: 20px; fill: var(--color-brand-primary); } .security-bar-content { flex: 1; } .security-bar-title { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; color: var(--color-text-primary); text-transform: uppercase; margin-bottom: 3px; } .security-bar-desc { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; } .gift-card-visual { width: 380px; height: 240px; border-radius: 20px; background: linear-gradient(135deg, #c084fc 0%, #e879a8 40%, #fb923c 100%); box-shadow: 0 20px 60px rgba(192,132,252,0.30), 0 8px 24px rgba(0,0,0,0.10); position: relative; overflow: hidden; padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; } .gift-card-visual::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 40%, var(--color-overlay-white-soft) 50%, transparent 60%); pointer-events: none; } /* ══════ OTP / RESEND ══════ */ .otp-card { background: var(--color-bg-surface); border-radius: 20px; box-shadow: 0 2px 12px var(--color-overlay-brand-md); padding: 48px 40px 44px; text-align: center; } .otp-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(250,115,11,0.10); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .otp-icon svg { width: 28px; height: 28px; fill: var(--color-brand-primary); } .otp-heading { font-size: 20px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 8px; } .otp-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 8px; } .otp-phone { font-size: 14px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 32px; } .otp-inputs { display: flex; justify-content: center; gap: 12px; margin-bottom: 12px; } .otp-digit { width: 56px; height: 64px; border: 2px solid #e0e3ea; border-radius: 14px; text-align: center; font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 800; color: var(--color-text-primary); background: var(--color-bg-input); outline: none; transition: all 0.2s; caret-color: var(--color-brand-primary); } .otp-digit:focus { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(250,115,11,0.12); } .otp-digit.filled { border-color: var(--color-brand-accent); background: var(--color-bg-surface-alt); } .otp-digit.error { border-color: var(--color-state-error); background: rgba(231,76,60,0.04); color: var(--color-state-error); } .otp-error-box { display: flex; align-items: center; gap: 12px; background: rgba(231,76,60,0.06); border: 1.5px solid rgba(231,76,60,0.25); border-radius: 14px; padding: 14px 20px; margin-bottom: 20px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s, max-height 0.4s ease, padding 0.3s, margin 0.3s; padding-top: 0; padding-bottom: 0; margin-bottom: 0; } .otp-error-box.visible { opacity: 1; max-height: 80px; padding: 14px 20px; margin-bottom: 20px; } .otp-error-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(231,76,60,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .otp-error-icon svg { width: 16px; height: 16px; fill: var(--color-state-error); } .otp-error-content { flex: 1; } .otp-error-title { font-size: 13px; font-weight: 700; color: var(--color-state-error); margin-bottom: 2px; } .otp-error-desc { font-size: 11px; color: #c0392b; line-height: 1.4; } .otp-error { font-size: 12px; color: var(--color-state-error); font-weight: 600; margin-bottom: 20px; min-height: 18px; opacity: 0; transition: opacity 0.3s; } .otp-error.visible { opacity: 1; } .otp-inputs.shake { animation: shake 0.5s ease-in-out; } .otp-digit.success { border-color: var(--palette-green-400); background: rgba(74,222,128,0.06); color: var(--palette-green-600); } .otp-resend { margin-top: 24px; font-size: 13px; color: var(--color-text-secondary); } .resend-timer { font-weight: 600; color: var(--color-text-primary); } .resend-link { color: var(--color-brand-primary); font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.2s; } .resend-link:hover { text-decoration: underline; } .resend-link.disabled { color: #c0c6d0; cursor: not-allowed; pointer-events: none; } .otp-change { margin-top: 16px; } .context-box { display: flex; align-items: center; gap: 18px; background: var(--color-bg-surface); border: 2px solid var(--color-brand-primary); border-radius: 18px; padding: 18px 24px; margin-bottom: 36px; box-shadow: 0 2px 12px var(--color-overlay-accent-soft); } .context-box-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(250,115,11,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .context-box-icon svg { width: 20px; height: 20px; fill: var(--color-brand-primary); } .context-box-info { flex: 1; } .context-box-label { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--color-text-secondary); text-transform: uppercase; margin-bottom: 2px; } .context-box-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); } .context-box-sport { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 14px; background: var(--color-brand-primary); color: var(--color-text-inverse); border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .context-box-change { font-size: 12px; font-weight: 600; color: var(--color-brand-primary); text-decoration: none; padding: 6px 16px; border: 2px solid var(--color-brand-primary); border-radius: 50px; transition: all 0.2s; white-space: nowrap; } .context-box-change:hover { background: var(--color-brand-primary); color: var(--color-text-inverse); } @media (max-width: 1024px) { .otp-card { padding: 36px 32px 36px; } .otp-digit { width: 50px; height: 58px; font-size: 24px; } } @media (max-width: 480px) { .otp-card { padding: 28px 16px 24px; } .otp-digit { width: 40px; height: 48px; font-size: 20px; border-radius: 8px; } .otp-inputs { gap: 6px; } .context-box { flex-direction: column; text-align: center; padding: 16px 20px; } .context-box-info { text-align: center; width: 100%; } .context-box-change { width: 100%; } } @media (max-width: 768px) { .otp-card { padding: 32px 20px 28px; } .otp-digit { width: 44px; height: 52px; font-size: 22px; border-radius: 10px; } .otp-inputs { gap: 8px; } } /* ══════ REZERVARI (Clubs, Cities, Filters) ══════ */ .search-container { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; } .reservation-details { display: flex; flex-direction: column; gap: 16px; } /* ══════ SUCCESS PAGES ══════ */ .page-wrapper { width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 40px 30px; position: relative; gap: 32px; } .page-wrapper::before { content: ''; position: absolute; top: -60px; right: -60px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(74,222,128,0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; } .page-wrapper::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(9,26,68,0.04) 0%, transparent 70%); pointer-events: none; z-index: 0; } .success-info { display: flex; flex-direction: column; } .success-title { font-size: 42px; font-weight: 900; line-height: 1.08; margin-bottom: 20px; text-transform: uppercase; letter-spacing: -1px; } .success-title .accent { color: var(--color-text-accent); } .success-desc { font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; max-width: 420px; margin-bottom: 32px; } .sparkle { position: absolute; pointer-events: none; z-index: 2; } .sparkle svg { fill: var(--color-state-success); opacity: 0.15; } .sparkle-1 { top: 10%; left: 8%; } .sparkle-1 svg { width: 20px; height: 20px; opacity: 0.18; } .sparkle-2 { top: 6%; right: 10%; } .sparkle-2 svg { width: 14px; height: 14px; fill: var(--color-brand-primary); opacity: 0.14; } .sparkle-3 { bottom: 20%; left: 6%; } .sparkle-3 svg { width: 16px; height: 16px; } .sparkle-4 { bottom: 15%; right: 5%; } .sparkle-4 svg { width: 22px; height: 22px; fill: var(--color-brand-primary); opacity: 0.16; } .sparkle-5 { bottom: 18%; left: 5%; } .sparkle-5 svg { width: 18px; height: 18px; opacity: 0.15; } .sparkle-6 { bottom: 12%; right: 6%; } .sparkle-6 svg { width: 24px; height: 24px; opacity: 0.20; } .sparkle-7 { bottom: 20%; right: 3%; } .sparkle-7 svg { width: 10px; height: 10px; fill: var(--color-text-primary); opacity: 0.10; } .sparkle-8 { top: 45%; left: 2%; } .sparkle-8 svg { width: 16px; height: 16px; opacity: 0.12; } .success-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 36px; } .success-left { display: flex; flex-direction: column; } .success-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--color-state-success); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(34,197,94,0.30); margin-bottom: 28px; } .success-icon svg { width: 40px; height: 40px; fill: var(--color-text-inverse); } .success-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-state-success); margin-bottom: 14px; } .success-label svg { width: 14px; height: 14px; fill: var(--color-state-success); } .success-title .green { color: var(--color-state-success); } .success-divider { width: 48px; height: 3px; background: linear-gradient(90deg, var(--color-brand-primary), var(--color-state-warning)); border-radius: 2px; margin-bottom: 20px; } .success-subtitle { font-size: 15px; color: var(--color-text-secondary); line-height: 1.7; } .confirm-card { width: 100%; background: var(--color-bg-surface); border-radius: 20px; border: 1px solid var(--color-border-subtle); overflow: hidden; } .confirm-header { background: linear-gradient(165deg, var(--palette-navy-600) 0%, var(--palette-navy-800) 100%); padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; } .confirm-header-logo { display: flex; align-items: center; gap: 8px; } .confirm-header-logo svg { width: 22px; height: 22px; } .confirm-header-logo span { font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.50); text-transform: uppercase; letter-spacing: 0.8px; } .confirm-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.15); border-radius: 50px; padding: 7px 16px; font-size: 8px; font-weight: 800; color: var(--color-text-inverse); text-transform: uppercase; letter-spacing: 1px; } .confirm-body { padding: 28px 28px 24px; } .confirm-title { font-size: 20px; font-weight: 800; color: var(--color-text-primary); text-align: center; margin-bottom: 4px; } .confirm-status { font-size: 13px; font-weight: 600; color: var(--color-state-success); text-align: center; margin-bottom: 24px; } .confirm-info { display: flex; flex-direction: column; } .confirm-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-bg-app); } .confirm-row:last-child { border-bottom: none; } .confirm-row-icon { width: 36px; height: 36px; border-radius: 10px; background: #f4f5f8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-text-secondary); } .confirm-row-icon svg { width: 16px; height: 16px; fill: currentColor; } .confirm-row-content { flex: 1; } .confirm-row-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); margin-bottom: 2px; } .confirm-row-value { font-size: 14px; font-weight: 700; color: var(--color-text-primary); } .confirm-row-check { width: 22px; height: 22px; border-radius: 50%; background: rgba(34,197,94,0.10); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .confirm-row-check svg { width: 12px; height: 12px; fill: var(--color-state-success); } .confirm-footer-text { font-size: 11px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 16px; } .success-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 60px 24px 40px; position: relative; } .success-wrapper::before { content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 280px; height: 280px; background: radial-gradient(circle, rgba(74,222,128,0.12) 0%, rgba(74,222,128,0) 70%); pointer-events: none; z-index: 0; } @media (max-width: 480px) { .success-wrapper { padding: 32px 16px 24px; } .success-title { font-size: 28px; } .success-subtitle { font-size: 13px; margin-bottom: 28px; } .success-icon { width: 60px; height: 60px; margin-bottom: 20px; } .success-icon svg { width: 28px; height: 28px; } .confirm-body { padding: 24px 20px 20px; } .confirm-header { padding: 16px 20px; } } @media (max-width: 768px) { .success-wrapper { padding: 40px 20px 32px; } .success-title { font-size: 36px; } .success-subtitle { font-size: 14px; } .confirm-card { max-width: 100%; } } /* ══════ BILLING & BANK ══════ */ .bonus-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); font-size: 11px; font-weight: 700; color: var(--palette-green-600); margin-bottom: 20px; } .bonus-badge svg { width: 14px; height: 14px; fill: var(--color-state-success); } .btn-next { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border: none; border-radius: 50px; background: var(--color-brand-primary); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--color-btn-app); cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(250,115,11,0.25); } .btn-next:hover { background: var(--color-brand-primary-hover); box-shadow: 0 6px 16px var(--color-overlay-accent-hard); } .summary-section { margin-bottom: 24px; } .section-card { background: var(--color-bg-surface); border-radius: 14px; border: 1px solid var(--color-border-subtle); padding: 20px 24px; } .btn-home { border: 1.5px solid #d0d4dc; background: var(--color-bg-surface); color: var(--color-text-primary); border-radius: 50px; padding: 14px 28px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; } .btn-home:hover { background: #f5f6f8; border-color: #c0c6d0; } .btn-home svg { width: 16px; height: 16px; fill: var(--color-text-inverse); } .btn-invoice { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border: 1.5px solid #d0d4dc; border-radius: 50px; background: var(--color-bg-surface); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-primary); cursor: pointer; transition: all 0.2s; text-decoration: none; } .btn-invoice:hover { background: #f5f6f8; border-color: #c0c6d0; } .btn-invoice svg { width: 16px; height: 16px; fill: var(--color-text-primary); } .bank-logo-box { width: 28px; height: 18px; background: var(--color-brand-accent); border-radius: 4px; display: flex; align-items: center; justify-content: center; } .bank-logo-box span { font-size: 6px; font-weight: 900; color: var(--color-text-inverse); letter-spacing: 0.3px; } .bank-name-label { font-size: 10px; font-weight: 700; color: var(--color-text-primary); } .billing-type { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .billing-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-brand-primary); display: flex; align-items: center; justify-content: center; } .billing-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-primary); } .billing-type-label { font-size: 13px; font-weight: 700; color: var(--color-text-primary); text-transform: uppercase; } .billing-address { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary); } .billing-address svg { width: 12px; height: 12px; fill: var(--color-border-strong); } .benefit-text { font-size: 12px; color: var(--color-text-secondary); line-height: 1.6; } .benefit-add { font-size: 11px; font-weight: 700; color: var(--color-brand-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px; } .benefit-add:hover { text-decoration: underline; } .order-card { background: var(--color-bg-surface); border-radius: 18px; box-shadow: 0 4px 24px rgba(9,26,68,0.10); overflow: hidden; margin-top: 32px; } .order-header { background: linear-gradient(165deg, var(--palette-navy-600) 0%, var(--palette-navy-800) 100%); padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; } .order-header-left { display: flex; flex-direction: column; gap: 2px; } .order-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.45); } .order-plan-name { font-size: 22px; font-weight: 900; color: var(--color-text-inverse); text-transform: uppercase; } .order-price-box { text-align: right; } .order-price { font-size: 24px; font-weight: 900; color: var(--color-brand-primary); } .order-price .ron { font-size: 12px; font-weight: 700; } .order-price-period { font-size: 9px; color: var(--color-overlay-white-md); font-weight: 600; } .order-body { padding: 24px 28px; } .order-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-bg-app); } .order-row:last-child { border-bottom: none; } .order-row-label { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; } .order-row-value { font-size: 13px; color: var(--color-text-primary); font-weight: 700; } .order-terms { font-size: 10px; color: var(--color-text-placeholder); line-height: 1.6; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-bg-app); } .order-terms a { color: var(--color-brand-primary); text-decoration: none; } .order-terms a:hover { text-decoration: underline; } .btn-activate { background: var(--color-brand-primary); color: var(--color-text-inverse); border-radius: 50px; padding: 14px 28px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none; box-shadow: 0 4px 12px rgba(250,115,11,0.25); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .btn-activate:hover { background: var(--color-brand-primary-hover); box-shadow: 0 6px 16px var(--color-overlay-accent-hard); } .btn-activate svg { width: 14px; height: 14px; fill: currentColor; } .order-row:last-of-type { border-bottom: none; } @media (max-width: 480px) { .section-card { padding: 16px 18px; } .order-header { padding: 16px 20px; } .order-body { padding: 20px; } .btn-home { width: 100%; justify-content: center; } } @media (max-width: 768px) { .btn-back { width: 100%; justify-content: center; } .btn-activate { width: 100%; justify-content: center; } } /* ══════ FORMS & FIELDS (supplement) ══════ */ .input-wrapper { position: relative; } .form-input:focus ~ .input-icon svg { fill: var(--color-text-primary); } .form-input.has-value ~ .input-icon svg { fill: var(--color-text-secondary); } .input-icon.clickable { pointer-events: auto; cursor: pointer; } .form-helper-text { font-size: 11px; color: #9ca3af; } .form-helper-link { font-size: 12px; color: var(--color-brand-primary); font-weight: 600; text-decoration: none; transition: opacity 0.2s; } .form-helper-link:hover { opacity: 0.8; } .checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: #484a4d; font-weight: 500; user-select: none; } .checkbox-hidden { position: absolute; opacity: 0; width: 0; height: 0; } .checkbox-custom { width: 22px; height: 22px; border: 2px solid var(--color-border-default); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; background: var(--color-bg-surface); } .checkbox-custom svg { width: 12px; height: 12px; fill: var(--color-text-inverse); opacity: 0; transition: opacity 0.2s; } .checkbox-hidden:checked + .checkbox-custom { background: var(--color-brand-primary); border-color: var(--color-brand-primary); } .checkbox-hidden:checked + .checkbox-custom svg { opacity: 1; } .form-card { background: var(--color-bg-surface); border-radius: 20px; padding: 36px 40px 40px; box-shadow: 0 2px 16px var(--color-overlay-brand-md); } .form-select { width: 100%; padding: 16px 46px 16px 18px; border: 1.5px solid var(--color-border-default); border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--color-text-primary); background: var(--color-bg-surface); outline: none; appearance: none; cursor: pointer; transition: border-color 0.25s, box-shadow 0.25s; } .form-select:focus { border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px var(--color-overlay-brand-md); } .form-textarea { width: 100%; padding: 16px 46px 16px 18px; border: 1.5px solid var(--color-border-default); border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--color-text-primary); background: var(--color-bg-surface); outline: none; resize: vertical; min-height: 110px; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; } .form-textarea::placeholder { color: var(--color-text-placeholder); font-weight: 400; } .form-textarea:focus { border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px var(--color-overlay-brand-md); } .form-textarea.has-value { border-color: var(--color-border-strong); background: var(--color-bg-surface-alt); } .form-row:last-child { margin-bottom: 0; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-bottom: 28px; } .form-row-full { margin-bottom: 28px; } .form-row-full:last-child { margin-bottom: 0; } .phone-group { display: flex; border: 1.5px solid var(--color-border-default); border-radius: 12px; overflow: hidden; transition: all 0.25s; } .phone-group:focus-within { border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px var(--color-overlay-brand-md); } .phone-prefix img { width: 22px; height: 15px; border-radius: 2px; object-fit: cover; } .checkbox-group { margin-bottom: 0; } .checkbox-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; cursor: pointer; } .checkbox-item:last-child { margin-bottom: 0; } .checkbox-box.checked { background: var(--color-brand-primary); border-color: var(--color-brand-primary); } .checkbox-box.checked svg { opacity: 1; } .service-card { background: var(--color-bg-surface); border-radius: 16px; border: 1.5px solid #e0e3ea; padding: 16px 20px; cursor: pointer; transition: all 0.3s; display: flex; gap: 14px; position: relative; } .service-card:hover { box-shadow: 0 4px 16px rgba(9,26,68,0.10); } .service-card.selected { border: 2px solid var(--color-brand-primary); background: linear-gradient(180deg, rgba(250,115,11,0.04) 0%, rgba(250,115,11,0.01) 100%); } .service-card.default-selected { border: 2px solid var(--palette-green-400); background: linear-gradient(180deg, rgba(74,222,128,0.06) 0%, rgba(74,222,128,0.01) 100%); } .service-card.disabled { border-color: #e0e3ea; opacity: 0.55; } .service-card.disabled .service-radio { background: transparent; border-color: #c0c6d0; } .service-card.disabled .service-radio svg { display: none; } .service-card.disabled .selected-label { display: none; } .service-card.disabled .service-badge { background: var(--color-border-subtle); color: var(--color-text-secondary); } .service-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #c0c6d0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: all 0.2s; } .service-card.selected .service-radio { background: var(--color-brand-primary); border-color: var(--color-brand-primary); } .service-card.default-selected .service-radio { background: var(--palette-green-400); border-color: var(--palette-green-400); } .service-radio svg { width: 12px; height: 12px; fill: var(--color-text-inverse); display: none; } .service-card.selected .service-radio svg { display: block; } .service-card.default-selected .service-radio svg { display: block; } .service-content { flex: 1; } .service-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 6px; } .service-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); } .service-price { white-space: nowrap; text-align: right; } .service-price-amount { font-size: 28px; font-weight: 900; color: var(--color-text-primary); } .service-price-decimals { font-size: 14px; color: var(--color-text-primary); } .service-price-label { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); margin-left: 4px; } .service-card.selected .service-price-amount { color: var(--color-brand-primary); } .service-card.selected .service-price-decimals { color: var(--color-brand-primary); } .service-card.selected .service-features li:before { background: var(--color-brand-primary); } .service-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; margin-bottom: 6px; line-height: 1.4; } .service-desc strong { font-weight: 700; color: var(--color-text-primary); } .service-features { list-style: none; font-size: 11px; color: var(--color-text-secondary); } .service-features li { margin-bottom: 4px; display: flex; align-items: flex-start; gap: 8px; } .service-features li:before { content: ''; display: inline-block; width: 6px; height: 6px; background: #c0c6d0; border-radius: 50%; margin-top: 4px; flex-shrink: 0; } .service-badge { position: absolute; top: 16px; right: 16px; background: #dcfce7; color: var(--palette-green-600); font-size: 8px; font-weight: 800; text-transform: uppercase; padding: 5px 12px; border-radius: 4px; } @media (max-width: 480px) { .service-card { padding: 16px; gap: 12px; } .service-name { font-size: 13px; } .service-price-amount { font-size: 24px; } } /* ══════ BOTTOM BAR & FLOATING CARDS (supplement) ══════ */ .floating-card { background: linear-gradient(135deg, var(--palette-navy-600), #091644); border-radius: 14px; padding: 14px 16px; margin-top: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .floating-card-label { font-size: 8px; font-weight: 700; letter-spacing: 1.2px; color: var(--color-brand-primary); text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .floating-card-label::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--palette-green-400); } .floating-card-row { display: flex; align-items: center; gap: 10px; } .floating-card-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--color-overlay-accent-md); display: flex; align-items: center; justify-content: center; } .floating-card-icon svg { width: 13px; height: 13px; fill: var(--color-brand-primary); } .floating-card-mod { font-size: 8px; font-weight: 600; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.5px; } .floating-card-value { font-size: 12px; font-weight: 700; color: var(--color-text-inverse); } .selected-card-box { display: flex; align-items: center; gap: 18px; background: var(--color-bg-surface); border: 2px solid var(--color-brand-primary); border-radius: 18px; padding: 18px 24px; margin-bottom: 36px; box-shadow: 0 2px 12px var(--color-overlay-accent-soft); } .selected-card-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(250,115,11,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .selected-card-icon svg { width: 20px; height: 20px; fill: var(--color-brand-primary); } .selected-card-info { flex: 1; } .selected-card-label { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--color-text-secondary); text-transform: uppercase; margin-bottom: 2px; } .selected-card-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); } .selected-card-price { font-size: 14px; font-weight: 800; color: var(--color-brand-primary); } .selected-card-change { font-size: 12px; font-weight: 600; color: var(--color-brand-primary); text-decoration: none; transition: opacity 0.2s; white-space: nowrap; } .selected-card-change:hover { opacity: 0.7; } .bar-label { font-size: 8px; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 700; letter-spacing: 0.5px; } .bar-price { display: flex; align-items: baseline; gap: 4px; } .bar-amount { font-size: 28px; font-weight: 900; color: var(--color-text-primary); } .bar-decimals { font-size: 16px; font-weight: 900; color: var(--color-text-primary); } .bar-ron { font-size: 12px; font-weight: 700; color: var(--color-brand-primary); margin-left: 4px; } .bar-card-name { font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .total-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 24px; } .total-text { font-size: 14px; font-weight: 700; color: var(--color-text-primary); } .total-right { text-align: right; } .total-amount .ron { font-size: 14px; font-weight: 700; color: var(--color-brand-primary); margin-left: 4px; } .total-sublabel { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #888; margin-top: 2px; } .selected-label { display: flex; align-items: center; gap: 6px; color: var(--color-brand-primary); font-size: 9px; font-weight: 700; text-transform: uppercase; margin-top: 8px; } .selected-label svg { width: 10px; height: 10px; fill: currentColor; } .floating-icon.location { background: var(--color-overlay-accent-md); color: var(--color-brand-primary); } .floating-icon.subscription { background: var(--color-overlay-accent-md); color: var(--color-brand-primary); } @media (max-width: 480px) { .floating-icon { width: 28px; height: 28px; } .floating-value { font-size: 12px; } } @media (max-width: 768px) { .sidebar.mobile-open { flex-direction: column; height: 100vh; width: 100%; align-items: flex-start; } .sidebar.mobile-open .sidebar-logo { height: auto; margin-bottom: 20px; } .sidebar.mobile-open .steps-nav { display: flex; } .bottom-bar { left: 0; padding: 16px 24px; flex-direction: column; align-items: stretch; gap: 16px; } .bottom-left { width: 100%; } .bottom-right { width: 100%; flex-direction: column; } .sidebar.mobile-open .mobile-nav-close { display: block; } } /* ══════ MISC (un-categorised; review later) ══════ */ .page-layout { display: flex; min-height: 100vh; } .welcome-panel { width: 240px; min-width: 240px; background: linear-gradient(165deg, var(--color-brand-header-primary) 0%, var(--color-brand-header-secondary) 100%); display: flex; flex-direction: column; padding: 24px 28px 30px; position: relative; z-index: 10; height: 100vh; position: sticky; top: 0; border-radius: 0 24px 24px 0; } .welcome-back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--color-overlay-white-md); text-decoration: none; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 18px; transition: color 0.2s; } .welcome-back-link:hover { color: var(--color-overlay-white-hard); } .welcome-back-link .back-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--color-overlay-white-soft); display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .welcome-back-link:hover .back-circle { background: rgba(255,255,255,0.14); } .welcome-back-link .back-circle svg { width: 12px; height: 12px; fill: currentColor; } .welcome-logo { margin-bottom: 0; } .welcome-logo svg { width: 140px; height: auto; display: block; } .welcome-content { margin-top: auto; margin-bottom: auto; } .welcome-icon-circle { width: 50px; height: 50px; border-radius: 14px; background: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .welcome-icon-circle svg { width: 22px; height: 22px; fill: var(--color-text-inverse); } .welcome-title { font-size: 22px; font-weight: 800; color: var(--color-text-inverse); line-height: 1.2; margin-bottom: 6px; } .welcome-subtitle { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; margin-bottom: 24px; } .welcome-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .welcome-feature { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); } .welcome-feature svg { width: 16px; height: 16px; fill: #5cb85c; flex-shrink: 0; } .powered-by { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,0.2); text-transform: uppercase; } .main-area { flex: 1; overflow-y: auto; padding: 0; } .main-inner { max-width: 1280px; margin: 0 auto; padding: 40px 56px 120px; } .store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1.5px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-surface); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; cursor: pointer; } .store-btn:hover { border-color: var(--color-brand-accent); box-shadow: 0 2px 8px rgba(9,26,68,0.08); } .store-btn svg { width: 22px; height: 22px; fill: var(--color-text-primary); } .store-btn-text { display: flex; flex-direction: column; } .store-btn-label { font-size: 9px; color: var(--color-text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; } .store-btn-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); line-height: 1.3; } .wh { fill: var(--color-text-inverse); } .container { display: flex; height: 100vh; overflow: hidden; } a.step-item.completed { text-decoration: none; transition: transform 0.15s; } a.step-item.completed:hover { transform: scale(1.08); } .select-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .select-arrow svg { width: 16px; height: 16px; fill: var(--color-border-strong); } .textarea-icon { position: absolute; right: 16px; top: 18px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--color-border-strong); pointer-events: none; } .textarea-icon svg { width: 16px; height: 16px; fill: currentColor; } .change-card-link { font-size: 11px; font-weight: 700; color: var(--color-brand-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px; transition: color 0.2s; white-space: nowrap; } .change-card-link:hover { color: var(--color-brand-primary-hover); text-decoration: underline; } .page-description { font-size: 14px; color: var(--color-text-secondary); line-height: 1.65; margin-bottom: 32px; } .empty-state { background: #f0f4fa; border: 1px solid #dce4f0; border-radius: 14px; padding: 24px 28px; margin-bottom: 32px; } .empty-state-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(250,115,11,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .empty-state-name { font-size: 16px; font-weight: 800; color: var(--color-text-primary); } .empty-state-desc { font-size: 12px; color: var(--color-brand-primary); font-style: italic; line-height: 1.5; } .gift-summary { background: #f0f4fa; border: 1px solid #dce4f0; border-radius: 14px; padding: 24px 28px; margin-bottom: 32px; } .gift-summary-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .gift-summary-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(250,115,11,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gift-summary-icon svg { width: 20px; height: 20px; fill: var(--color-brand-primary); } .gift-summary-name { font-size: 16px; font-weight: 800; color: var(--color-text-primary); } .gift-summary-list { list-style: none; padding: 0; margin: 0 0 14px 0; } .gift-summary-list li { font-size: 13px; color: var(--color-text-primary); padding: 4px 0; padding-left: 20px; position: relative; line-height: 1.5; } .gift-summary-list li::before { content: '•'; position: absolute; left: 4px; color: var(--color-text-primary); font-weight: 700; } .gift-summary-list li strong { font-weight: 700; } .gift-summary-desc { font-size: 12px; font-style: italic; line-height: 1.5; color: var(--color-txt-app); } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .section-header-left { display: flex; align-items: center; gap: 14px; } .section-number { width: 36px; height: 36px; border-radius: 50%; background: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: var(--color-bg-app); flex-shrink: 0; } .section-title { font-size: 17px; font-weight: 800; color: var(--color-text-primary); } .section-title-suffix { font-size: 13px; font-weight: 500; color: #888; } .section-desc { font-size: 13px; color: #777; margin-bottom: 24px; line-height: 1.5; } .checkout-box { background: var(--color-bg-surface); border-radius: 14px; border: 1px solid var(--color-border-subtle); padding: 28px 28px 24px; margin-bottom: 32px; } .security-left { display: flex; align-items: center; gap: 14px; } .security-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-overlay-accent-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .security-icon svg { width: 18px; height: 18px; fill: var(--color-brand-primary); } .security-text { font-size: 13px; font-weight: 700; color: var(--color-text-inverse); } .security-text .security-highlight { color: var(--color-brand-primary); } .security-subtext { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; } .security-badges { display: flex; align-items: center; gap: 12px; } .security-badge { width: 40px; height: 26px; background: var(--color-overlay-white-soft); border-radius: 4px; display: flex; align-items: center; justify-content: center; } .security-badge svg { width: 24px; height: 16px; fill: rgba(255,255,255,0.5); } .content-box { background: var(--color-bg-surface); border-radius: 24px; max-width: 1100px; width: 100%; position: relative; z-index: 1; overflow: hidden; box-shadow: 0 2px 16px var(--color-overlay-brand-md); } .content-box-accent { height: 4px; background: linear-gradient(90deg, var(--color-brand-primary) 0%, var(--color-state-warning) 100%); border-radius: 24px 24px 0 0; } .content-box-inner { padding: 48px 52px; } .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; width: 100%; align-items: center; } .card-visual-area { display: flex; justify-content: center; align-items: center; position: relative; } .card-type-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.20); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.25); border-radius: 50px; padding: 6px 14px; font-size: 8px; font-weight: 800; color: var(--color-text-inverse); text-transform: uppercase; letter-spacing: 1.2px; } .card-type-badge svg { width: 12px; height: 12px; fill: var(--color-text-inverse); } .card-logo svg { width: 20px; height: 20px; } .card-price { font-size: 40px; font-weight: 900; color: var(--color-text-inverse); letter-spacing: -1px; margin-bottom: 4px; } .card-price .card-ron { font-size: 20px; font-weight: 700; margin-left: 4px; } .sent-badge { position: absolute; top: -16px; right: -10px; display: inline-flex; align-items: center; gap: 8px; background: var(--color-bg-surface); border: 2px solid var(--color-state-success); border-radius: 50px; padding: 8px 18px; box-shadow: 0 4px 20px rgba(34,197,94,0.20); z-index: 5; } .sent-badge-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--color-state-success); display: flex; align-items: center; justify-content: center; } .sent-badge-icon svg { width: 11px; height: 11px; fill: var(--color-text-inverse); } .sent-badge-text { font-size: 9px; font-weight: 800; color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.8px; } .mission-label { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-brand-primary); margin-bottom: 16px; } .mission-label svg { width: 16px; height: 16px; fill: var(--color-state-success); } .receipt-card { background: var(--color-bg-surface); border-radius: 16px; border: 1px solid var(--color-border-subtle); padding: 0; max-width: 420px; margin-bottom: 32px; overflow: hidden; } .receipt-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--color-bg-app); } .receipt-id { font-size: 11px; font-weight: 700; color: var(--color-text-primary); letter-spacing: 0.3px; } .receipt-body { padding: 8px 22px 20px; } .receipt-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; } .receipt-row + .receipt-row { border-top: 1px solid var(--color-bg-app); } .receipt-row-icon { width: 36px; height: 36px; border-radius: 10px; background: #f4f5f8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .receipt-row-icon svg { width: 15px; height: 15px; fill: var(--color-text-secondary); } .receipt-row-content { flex: 1; } .receipt-row-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #888; margin-bottom: 2px; } .receipt-row-value { font-size: 14px; font-weight: 700; color: var(--color-text-primary); } .receipt-row-value.sent { color: var(--color-state-success); } .receipt-row-value .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-state-success); margin-left: 6px; vertical-align: middle; } .content-area { flex: 1; padding: 42px 60px 60px 72px; overflow-y: auto; min-height: 100vh; max-width: 1280px; margin: 0 auto; } .member-portal-btn .btn-line-s { display: inline-block; width: 18px; height: 1.5px; background: rgba(255,255,255,0.30); border-radius: 1px; } /* .card-header-area::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-brand-primary), var(--color-state-warning)); z-index: 1; } */ .whi { fill: var(--color-overlay-white-md); } .change-link { font-size: 12px; color: var(--color-text-secondary); text-decoration: none; font-weight: 500; transition: color 0.2s; } .change-link:hover { color: var(--color-text-primary); text-decoration: underline; } .payment-options { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; } .payment-card { background: var(--color-bg-surface); border-radius: 16px; border: 1.5px solid #e0e3ea; padding: 24px 28px; cursor: pointer; transition: all 0.25s; display: flex; align-items: flex-start; gap: 16px; } .payment-card:hover { border-color: var(--color-border-strong); box-shadow: 0 2px 12px var(--color-overlay-brand-md); } .payment-card.selected { border-color: var(--color-brand-primary); box-shadow: 0 4px 20px rgba(250,115,11,0.12); } .payment-radio { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; border: 2px solid #d0d4dc; display: flex; align-items: center; justify-content: center; margin-top: 2px; transition: all 0.2s; } .payment-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: background 0.2s; } .payment-card.selected .payment-radio { border-color: var(--color-brand-primary); } .payment-card.selected .payment-radio::after { background: var(--color-brand-primary); } .payment-content { flex: 1; } .payment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .payment-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary); } .payment-badges { display: flex; align-items: center; gap: 6px; } .payment-badge-auto { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-brand-primary); background: var(--color-overlay-accent-soft); padding: 3px 8px; border-radius: 4px; } .payment-desc { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; } .payment-icon { width: 40px; height: 40px; border-radius: 10px; background: #f4f5f8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-text-secondary); transition: all 0.2s; } .payment-card.selected .payment-icon { background: var(--color-overlay-accent-soft); color: var(--color-brand-primary); } .payment-icon svg { width: 18px; height: 18px; fill: currentColor; } .payment-expanded { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s, margin 0.3s; margin-top: 0; } .payment-card.selected .payment-expanded { max-height: 200px; opacity: 1; margin-top: 16px; } .payment-bank-logo { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; } .payment-features { background: var(--color-bg-surface-alt); border-radius: 12px; padding: 16px 20px; margin-top: 12px; } .payment-feature { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .payment-feature:last-of-type { margin-bottom: 0; } .feature-check { width: 18px; height: 18px; border-radius: 50%; background: rgba(250,115,11,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feature-check svg { width: 10px; height: 10px; fill: var(--color-brand-primary); } .feature-text { font-size: 12px; font-weight: 600; color: var(--color-text-primary); } .payment-info-text { font-size: 11px; color: var(--color-text-secondary); line-height: 1.6; margin-top: 12px; } .security-dot { width: 3px; height: 3px; border-radius: 50%; background: #d0d4dc; } .section-badge { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #000; background: var(--palette-green-400); padding: 3px 8px; border-radius: 4px; } .section-badge.invalid-badge { background: var(--color-state-error); } .section-edit { font-size: 11px; font-weight: 700; color: var(--color-brand-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px; transition: color 0.2s; } .section-edit:hover { color: var(--color-brand-primary-hover); text-decoration: underline; } .date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .date-group label { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); margin-bottom: 6px; } .date-input-wrapper { position: relative; } .date-input { width: 100%; padding: 12px 40px 12px 14px; border: 1.5px solid var(--color-border-default); border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--color-text-primary); background: var(--color-bg-surface-alt); outline: none; transition: border-color 0.2s; } .date-input:focus { border-color: var(--color-brand-accent); } .date-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--color-border-strong); pointer-events: none; } .date-icon svg { width: 14px; height: 14px; fill: currentColor; } .contact-info { display: flex; flex-direction: column; gap: 6px; } .contact-name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); } .contact-detail { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary); } .contact-detail svg { width: 12px; height: 12px; fill: var(--color-border-strong); } .payment-display { display: flex; align-items: center; gap: 12px; } .payment-display-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--color-overlay-accent-soft); display: flex; align-items: center; justify-content: center; color: var(--color-brand-primary); } .payment-display-icon svg { width: 14px; height: 14px; fill: currentColor; } .payment-display-text { font-size: 13px; font-weight: 600; color: var(--color-text-primary); } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; } .card { position: relative; border-radius: 16px; overflow: hidden; height: 340px; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; display: block; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0,0,0,0.14); } .card-icon { position: absolute; z-index: 2; width: 40px; height: 40px; background: rgba(255,255,255,0.92); border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.10); } .card-icon svg { width: 17px; height: 17px; fill: #3a4a5c; } .footer { width: 100%; max-width: 1280px; padding: 32px 48px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .footer-toggles { display: flex; align-items: center; gap: 12px; } .footer-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 50px; border: 1px solid #ddd; background: var(--color-bg-surface); font-size: 12px; font-weight: 500; color: #444; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; text-decoration: none; } .footer-chip:hover { border-color: #bbb; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .footer-chip svg { width: 14px; height: 14px; fill: var(--color-text-secondary); } .footer-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; } .footer-links a { font-size: 9.5px; font-weight: 600; color: #aaa; text-decoration: none; text-transform: uppercase; letter-spacing: 0.4px; transition: color 0.2s; } .footer-links a:hover { color: var(--color-text-muted); } .footer-links .dot { width: 3px; height: 3px; background: #ccc; border-radius: 50%; display: inline-block; } .lf { fill: var(--color-text-primary); } .counter { background-color: var(--color-brand-accent); color: var(--color-text-inverse); padding: 12px 20px; border-radius: 50px; font-size: 11px; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.6px; } .sport-chips-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-primary); margin-top: 12px; margin-bottom: 10px; } .sport-chips { display: flex; flex-direction: column; gap: 0; margin-top: auto; } .reserve-action { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 18px; background: var(--color-brand-accent); color: var(--color-text-inverse); border-radius: 50px; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.4px; transition: all 0.2s; margin-bottom: 8px; border: none; cursor: pointer; font-family: 'Inter', sans-serif; } .reserve-action:last-child { margin-bottom: 0; } .reserve-action:hover { background: var(--color-brand-primary); box-shadow: 0 4px 14px rgba(250,115,11,0.30); transform: translateY(-1px); } .reserve-action > svg:first-child { display: none; } .reserve-action .reserve-text { flex: 1; } .reserve-action .reserve-chevron { width: 12px; height: 12px; fill: currentColor; margin-left: auto; opacity: 0.6; } .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; animation: fadeIn 0.3s ease-out; } .modal-overlay.active { display: flex; align-items: center; justify-content: flex-end; } /* .modal { background: var(--color-bg-surface); border-radius: 16px; width: 90%; max-width: 900px; height: 90vh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; animation: slideIn 0.3s ease-out; margin-right: 40px; } */ .modal-title { font-size: 28px; font-weight: 800; color: var(--color-text-primary); line-height: 1.2; } .modal-address { font-size: 14px; color: var(--color-text-muted); } .modal-sports { display: flex; flex-wrap: wrap; gap: 8px; } .modal-sport-tag { display: inline-block; padding: 8px 16px; background-color: var(--color-bg-app); border: 1px solid #ddd; border-radius: 50px; font-size: 12px; font-weight: 600; color: var(--color-text-primary); } .modal-button { padding: 14px 32px; background-color: var(--color-brand-primary); color: var(--color-text-inverse); border: none; border-radius: 50px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; text-decoration: none; display: inline-block; text-align: center; } .modal-button:hover { background-color: var(--color-brand-accent); box-shadow: 0 4px 14px rgba(9, 26, 68, 0.3); transform: translateY(-1px); } .scheduler-card { background: var(--color-bg-surface); border-radius: 20px; padding: 32px 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin-bottom: 32px; } .section-subtitle { font-size: 13px; font-weight: 400; color: var(--color-text-muted); margin-top: -8px; margin-bottom: 20px; padding-left: 50px; } .section-divider { border: none; border-top: 1px solid var(--color-bg-app); margin: 24px 0; } .date-selector { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; } .date-button { min-width: 80px; padding: 14px 12px; border-radius: 14px; border: 2px solid #e0e3e8; background: var(--color-bg-surface); cursor: pointer; text-align: center; transition: all 0.2s; flex-shrink: 0; font-family: 'Inter', sans-serif; } .date-button:hover { border-color: var(--color-brand-primary); transform: translateY(-2px); } .date-button.selected { background: var(--color-brand-accent); border-color: var(--color-brand-accent); } .date-button.selected .day-name { color: var(--color-text-inverse); } .date-button.selected .day-number { color: var(--color-text-inverse); } .date-button.selected .month-name { color: var(--color-text-inverse); } .day-name { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--color-text-subtle); letter-spacing: 0.5px; } .day-number { display: block; font-size: 22px; font-weight: 800; color: var(--color-text-primary); margin: 4px 0; } .month-name { display: block; font-size: 9px; font-weight: 600; color: var(--color-text-subtle); text-transform: uppercase; } .court-selector { display: flex; gap: 10px; margin-bottom: 0; } .court-button { padding: 10px 20px; border-radius: 50px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: 2px solid #e0e3e8; background: var(--color-bg-surface); color: var(--color-text-primary); font-family: 'Inter', sans-serif; } .court-button:hover { border-color: var(--color-brand-primary); } .court-button.active { background: var(--color-brand-accent); color: var(--color-text-inverse); border-color: var(--color-brand-accent); } .time-slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .time-column { background: var(--color-bg-surface-alt); border-radius: 16px; padding: 20px; border: 1px solid #eef0f4; } .time-column-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e8eaee; } .time-column-icon { width: 16px; height: 16px; color: var(--color-text-subtle); flex-shrink: 0; } .time-column-label { font-size: 12px; font-weight: 700; color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.3px; } .time-column-count { font-size: 10px; font-weight: 600; background: #e8eaee; color: var(--color-text-subtle); padding: 2px 8px; border-radius: 50px; margin-left: auto; } .time-slot { padding: 11px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; } .time-slot.available { background: #f0f9f0; color: #1a7a3a; border: 1px solid #d4edda; } .time-slot.available:hover { background: #e2f4e2; transform: scale(1.01); } .time-slot.occupied { background: #f5f5f5; color: #bbb; border: 1px solid #eee; cursor: not-allowed; opacity: 0.6; } .time-slot.selected { background: var(--color-brand-primary); color: var(--color-text-inverse); border-color: var(--color-brand-primary); box-shadow: 0 4px 14px rgba(250,115,11,0.30); transform: scale(1.02); } .time-slot.selected::after { content: '✓'; font-size: 13px; } .clipcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .clipcard-option { background: var(--color-bg-surface); border: 2px solid #e0e3e8; border-radius: 16px; padding: 20px; cursor: pointer; transition: all 0.2s; position: relative; text-align: center; } .clipcard-option:hover { border-color: var(--color-brand-primary); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(250,115,11,0.12); } .clipcard-option.selected { border-color: var(--color-brand-primary); background: rgba(250,115,11,0.03); box-shadow: 0 4px 16px var(--color-overlay-accent-md); } .clipcard-option.selected::after { content: '✓'; position: absolute; top: 10px; right: 12px; width: 24px; height: 24px; background: var(--color-brand-primary); color: var(--color-text-inverse); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .clipcard-name { font-size: 14px; font-weight: 800; color: var(--color-text-primary); text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.3px; } .clipcard-price-main { font-size: 32px; font-weight: 900; color: var(--color-text-primary); line-height: 1; } .clipcard-price-decimals { font-size: 18px; font-weight: 900; color: var(--color-text-primary); } .clipcard-price-unit { font-size: 11px; font-weight: 600; color: #888; margin-top: 2px; margin-bottom: 14px; } .clipcard-meta { display: flex; justify-content: center; gap: 16px; padding-top: 14px; border-top: 1px solid var(--color-bg-app); } .clipcard-meta-item { text-align: center; } .clipcard-meta-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #888; margin-bottom: 2px; } .clipcard-meta-value { font-size: 13px; font-weight: 700; color: var(--color-text-primary); } .btn-arrow { width: 14px; height: 14px; } .privacy-note { font-size: 11px; color: #888; text-align: center; margin-top: 16px; line-height: 1.6; } .privacy-note a { color: var(--color-brand-primary); text-decoration: none; } .privacy-note a:hover { text-decoration: underline; } .detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .detail-item { display: flex; flex-direction: column; } .detail-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); margin-bottom: 4px; } .detail-value { font-size: 14px; font-weight: 700; color: var(--color-text-primary); } @media (max-width: 1024px) { .content-area { padding: 28px 24px 36px; max-width: none; } .payment-card { padding: 20px 24px; } .date-row { gap: 14px; } .services-grid { gap: 16px; } .time-slots-grid { grid-template-columns: 1fr; } .clipcard-grid { grid-template-columns: 1fr; } .scheduler-card { padding: 24px 20px; } .detail-row { gap: 14px; } } @media (max-width: 480px) { .content-area { padding: 16px 12px 24px; } .page-watermark { font-size: 80px; } .payment-card { padding: 16px 18px; } .payment-name { font-size: 13px; } .security-badges { gap: 8px; } .security-badge { font-size: 8px; } .services-grid { gap: 12px; } .footer { padding: 20px 16px 28px; } .card { height: 220px; } .footer-toggles { flex-wrap: wrap; justify-content: center; } .time-slots-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .content-area { padding: 24px 16px 32px; min-height: auto; } .page-watermark { font-size: 100px; top: -10px; left: -15px; } .container { height: auto; flex-direction: column; } .btn-continue { width: 100%; justify-content: center; } .security-badges { flex-wrap: wrap; gap: 12px; } .date-row { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; gap: 12px; } .card { height: 260px; } .footer { padding: 20px 14px 28px; } .detail-row { grid-template-columns: 1fr; } .gift-cards-grid { grid-template-columns: unset; } } /* ══════════════════════════════════════════════════════════════════ SCOPED OVERRIDES Variants that only apply to a specific body class combination: body. — one of auth | giftcard | dashboard | purchase | signup | booking body.layout- — layout-app | layout-standalone | layout-wrapped body.layout-X. — intersection (rare) ══════════════════════════════════════════════════════════════════ */ /* ── body.auth ── */ body.auth .main-inner { max-width: 1280px; margin: 0 auto; padding: 40px 56px 60px; } body.auth .page-header { position: relative; margin-bottom: 32px; } body.auth .page-subtitle { font-size: 15px; color: #484a4d; margin-top: 8px; padding-left: 22px; position: relative; z-index: 1; line-height: 1.5; font-weight: normal; } body.auth .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 8px; } body.auth .form-group { position: relative; display: block; flex-direction: row; } body.auth .form-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.8px; color: #484a4d; text-transform: uppercase; margin-bottom: 8px; } body.auth .form-input { width: 100%; padding: 16px 46px 16px 18px; border: 1.5px solid var(--color-border-default); border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--color-text-primary); background: var(--color-bg-surface); outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } body.auth .form-input::placeholder { color: #b0b7c3; font-weight: 400; } body.auth .form-input:focus { border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px var(--color-overlay-brand-md); background: none; } body.auth .input-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; width: auto; height: auto; display: block; align-items: normal; justify-content: normal; color: inherit; transition: initial; } body.auth .input-icon svg { width: 18px; height: 18px; fill: var(--color-border-strong); transition: fill 0.2s; } body.auth .form-helper { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 0 2px; font-size: medium; color: inherit; line-height: normal; } body.auth .app-download-bar { background: var(--color-bg-surface); border-radius: 20px; padding: 32px 36px; box-shadow: 0 2px 16px var(--color-overlay-brand-md); margin-top: 24px; display: flex; align-items: center; gap: 40px; max-width: none; width: auto; position: static; z-index: auto; } /* ── body.auth, body.giftcard ── */ body.auth .watermark-number, body.giftcard .watermark-number { position: absolute; top: -48px; left: -10px; font-size: 140px; font-weight: 900; color: var(--color-overlay-brand-soft); line-height: 1; letter-spacing: -6px; pointer-events: none; user-select: none; z-index: 0; } body.auth .page-title, body.giftcard .page-title { font-size: 40px; font-weight: 800; color: var(--color-text-primary); border-left: 4px solid var(--color-brand-primary); padding-left: 18px; line-height: 1.15; position: relative; z-index: 1; } /* ── body.booking ── */ body.booking .bottom-right { display: flex; gap: 12px; flex-shrink: 0; } body.booking .section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; justify-content: normal; } body.booking .content-area { flex: 1; padding: 42px 60px 120px 72px; overflow-y: auto; min-height: 100vh; max-width: 1280px; margin: 0 auto; } body.booking a.step-item { text-decoration: none; cursor: pointer; transition: initial; } body.booking a.step-item:hover .step-icon { transform: scale(1.08); transition: initial; } body.booking .search-input { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 50px; font-size: 14px; font-family: 'Inter', sans-serif; transition: all 0.2s; color: inherit; } body.booking .clubs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; } body.booking .club-card { background: var(--color-bg-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px var(--color-shadow-md); transition: all 0.3s; display: flex; flex-direction: column; height: 100%; cursor: initial; } body.booking .club-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); transform: translateY(-4px); } body.booking .club-image-wrapper { position: relative; width: 100%; padding-bottom: 66.67%; overflow: hidden; background: var(--color-bg-app); height: auto; } body.booking .club-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } body.booking .details-btn { position: absolute; top: 12px; right: 12px; padding: 8px 16px; background-color: var(--color-bg-surface); border: none; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--color-text-primary); cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; background: none; backdrop-filter: initial; box-shadow: none; } body.booking .details-btn:hover { background-color: var(--color-brand-primary); color: var(--color-text-inverse); transform: translateY(-2px); background: none; box-shadow: none; } body.booking .club-info { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } body.booking .club-name { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 4px; } body.booking .club-address { font-size: 13px; color: var(--color-text-muted); margin-bottom: 8px; line-height: normal; } body.booking .btn-line { display: inline-block; width: 18px; height: 1.5px; background: rgba(255,255,255,0.30); border-radius: 1px; } body.booking .modal-left { overflow: hidden; background: var(--color-bg-app); flex: 0 1 auto; position: static; } body.booking .modal-image { width: 100%; height: 100%; object-fit: cover; display: block; } body.booking .modal-right { padding: 40px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; flex: 0 1 auto; background: none; } body.booking .modal-close { align-self: flex-end; background: none; border: none; font-size: 24px; color: #999; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; border-radius: 0; padding: 0; } body.booking .modal-close:hover { color: var(--color-text-primary); border-color: initial; } body.booking .modal-description { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 0; } body.booking .id-card { background: var(--color-bg-surface); border-radius: 20px; box-shadow: 0 2px 12px var(--color-overlay-brand-md); padding: 36px 40px 40px; margin-bottom: 28px; } body.booking .total-price { display: flex; align-items: baseline; gap: 2px; } body.booking .btn-continue { background: var(--color-brand-primary); color: var(--color-text-inverse); border-radius: 50px; padding: 14px 28px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none; box-shadow: 0 4px 12px rgba(250,115,11,0.25); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.4px; font-family: 'Inter', sans-serif; } body.booking .btn-continue:hover { background: var(--color-brand-accent); box-shadow: 0 4px 14px rgba(9,26,68,0.3); } body.booking .otp-error-box { display: flex; align-items: center; gap: 12px; background: rgba(231,76,60,0.06); border: 1.5px solid rgba(231,76,60,0.25); border-radius: 14px; padding: 14px 20px; margin-bottom: 20px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s, max-height 0.4s ease, padding 0.3s, margin 0.3s; padding-top: 0; padding-bottom: 0; } body.booking .otp-error-content { flex: 1; text-align: left; } body.booking .btn-continue:disabled { background: #c0c6d0; box-shadow: none; cursor: not-allowed; opacity: 0.5; } body.booking .order-row-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-secondary); } body.booking .order-row-value { font-size: 13px; font-weight: 700; color: var(--color-text-primary); text-align: right; } body.booking .order-terms { font-size: 11px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-bg-app); } body.booking .btn-activate { background: var(--color-brand-primary); color: var(--color-text-inverse); border-radius: 50px; padding: 14px 28px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none; box-shadow: 0 4px 12px rgba(250,115,11,0.25); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.3px; font-family: 'Inter', sans-serif; } body.booking .btn-activate:hover { background: var(--color-brand-accent); box-shadow: 0 4px 14px rgba(9,26,68,0.3); } @media (max-width: 1024px) { body.booking .content-area { padding: 32px 48px 90px 56px; max-width: none; } } @media (max-width: 480px) { body.booking .content-area { padding: 70px 16px 100px 16px; } body.booking .otp-digit { width: 42px; height: 52px; font-size: 20px; border-radius: 0; } body.booking .otp-inputs { gap: 8px; } } @media (max-width: 768px) { body.booking .mobile-nav-close { display: flex; position: fixed; top: 20px; right: 20px; z-index: 201; background: var(--color-overlay-white-soft); border: none; color: rgba(255,255,255,0.6); width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; } body.booking .bottom-bar { left: 0; padding: 12px 16px; flex-direction: column; align-items: stretch; gap: 12px; } body.booking .bottom-left { width: 100%; align-items: center; } body.booking .otp-card { padding: 32px 24px 28px; } body.booking .otp-digit { width: 48px; height: 56px; font-size: 24px; border-radius: 0; } body.booking .sidebar.mobile-open .mobile-nav-close { display: flex; } } /* ── body.dashboard ── */ body.dashboard .main-content { max-width: 1280px; width: 100%; padding: 28px 48px 24px; flex: 1; overflow-y: visible; min-height: auto; margin: 0; position: static; } @media (max-width: 1024px) { body.dashboard .main-content { padding: 20px 20px; } } @media (min-width: 768px) { .member-mobile-bar-toggle-close{ display:none !important; } } @media (max-width: 480px) { body.dashboard .main-content { padding: 12px 10px; } } @media (max-width: 768px) { body.dashboard .main-content { padding: 16px 14px; min-height: auto; } } /* ── body.giftcard ── */ body.giftcard .page-header { position: relative; margin-bottom: 36px; } body.giftcard .page-subtitle { font-size: 15px; color: var(--color-text-secondary); margin-top: 8px; padding-left: 22px; position: relative; z-index: 1; line-height: 1.5; font-weight: normal; } body.giftcard .container { display: flex; min-height: 100vh; height: auto; overflow: visible; } body.giftcard .step-sublabel { font-size: 9px; font-weight: 500; color: var(--color-brand-primary); margin-top: 2px; font-style: normal; } body.giftcard .security-bar { display: flex; align-items: center; gap: 16px; background: var(--color-bg-surface); border-radius: 16px; padding: 20px 28px; box-shadow: 0 2px 12px rgba(9,26,68,0.04); justify-content: normal; max-width: none; margin: 0; width: auto; box-sizing: initial; } body.giftcard .step-item.completed .step-icon svg { fill: var(--color-brand-primary); background: var(--color-brand-primary); width: 14px; height: 14px; } body.giftcard .step-item.completed .step-label { color: rgba(255,255,255,0.5); } body.giftcard .btn-back { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border: 1.5px solid #d0d4dc; border-radius: 50px; background: var(--color-bg-surface); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: var(--color-text-primary); cursor: pointer; transition: all 0.2s; text-decoration: none; } body.giftcard .email-input-group { display: flex; border: 1.5px solid var(--color-border-default); border-radius: 12px; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; } body.giftcard .email-input-group:focus-within { border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px var(--color-overlay-brand-md); } body.giftcard .email-input { flex: 1; border: none; padding: 16px 18px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--color-text-primary); background: var(--color-bg-surface); outline: none; } body.giftcard .email-input::placeholder { color: var(--color-text-placeholder); font-weight: 400; } body.giftcard .email-input-icon svg { width: 18px; height: 18px; fill: var(--color-border-strong); } body.giftcard .phone-input-group { display: flex; gap: 0; border: 1.5px solid var(--color-border-default); border-radius: 12px; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; } body.giftcard .phone-input-group:focus-within { border-color: var(--color-brand-accent); box-shadow: 0 0 0 3px var(--color-overlay-brand-md); } body.giftcard .phone-prefix { display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: var(--color-bg-surface-alt); border-right: 1.5px solid var(--color-border-default); flex-shrink: initial; cursor: initial; user-select: initial; } body.giftcard .phone-flag { width: 22px; height: 15px; border-radius: 2px; overflow: hidden; display: flex; flex-shrink: 0; flex-direction: row; } body.giftcard .flag-stripe { flex: 1; height: 100%; } body.giftcard .phone-prefix-text { font-size: 13px; font-weight: 700; color: var(--color-text-primary); } body.giftcard .phone-input { flex: 1; border: none; padding: 16px 16px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--color-text-primary); background: var(--color-bg-surface); outline: none; } body.giftcard .phone-input::placeholder { color: var(--color-text-placeholder); font-weight: 400; } body.giftcard .phone-input-icon svg { width: 18px; height: 18px; fill: var(--color-border-strong); } body.giftcard .summary-section { margin-bottom: 28px; } body.giftcard .section-card { background: var(--color-bg-surface); border-radius: 14px; border: 1px solid var(--color-border-subtle); padding: 24px 28px; } body.giftcard .checkbox-box { width: 20px; height: 20px; border: 1.5px solid #d0d4dc; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: all 0.2s; cursor: pointer; min-width: auto; background: none; } body.giftcard .checkbox-box svg { width: 11px; height: 11px; fill: var(--color-text-inverse); opacity: 0; transition: opacity 0.2s; } body.giftcard .page-wrapper { width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 40px 30px; position: relative; gap: 48px; } body.giftcard .page-wrapper::before { content: ''; position: absolute; top: -60px; right: -60px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(250,115,11,0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; } body.giftcard .content-box-inner { padding: 56px 60px; } body.giftcard .success-title { font-size: 52px; font-weight: 900; line-height: 1.05; color: var(--color-text-primary); text-transform: uppercase; letter-spacing: -1px; margin-bottom: 20px; } body.giftcard .action-buttons { display: flex; gap: 14px; width: auto; justify-content: normal; } body.giftcard .btn-home { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border: none; border-radius: 50px; background: var(--color-brand-primary); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-inverse); cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(250,115,11,0.30); text-decoration: none; } body.giftcard .btn-home:hover { background: var(--color-brand-primary-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(250,115,11,0.40); border-color: initial; } body.giftcard .sparkle svg { fill: var(--color-brand-primary); opacity: 0.18; } body.giftcard .sparkle-1 { top: 8%; left: 6%; } body.giftcard .sparkle-1 svg { width: 28px; height: 28px; opacity: 0.22; } body.giftcard .sparkle-2 { top: 14%; left: 3%; right: auto; } body.giftcard .sparkle-2 svg { width: 14px; height: 14px; fill: var(--color-text-primary); opacity: 0.12; } body.giftcard .sparkle-3 { top: 5%; right: 8%; bottom: auto; left: auto; } body.giftcard .sparkle-3 svg { width: 22px; height: 22px; opacity: 0.16; } body.giftcard .sparkle-4 { top: 12%; right: 4%; bottom: auto; } body.giftcard .sparkle-4 svg { width: 12px; height: 12px; fill: var(--color-text-primary); opacity: 0.10; } /* ── body.purchase, body.signup ── */ /* body.purchase .mobile-menu-toggle, body.signup .mobile-menu-toggle { display: none; background: none; border: none; color: var(--color-text-inverse); font-size: 20px; cursor: pointer; margin-bottom: 16px; } body.purchase .mobile-nav-close, body.signup .mobile-nav-close { display: none; position: absolute; top: 24px; right: 24px; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 24px; cursor: pointer; z-index: 11; } */ body.purchase .main-content, body.signup .main-content { flex: 1; overflow-y: auto; padding: 42px 60px 90px 72px; max-width: 1280px; margin: 0 auto; min-height: auto; position: static; } body.purchase .coming-soon-badge, body.signup .coming-soon-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.5); color: white; padding: 12px 20px; border-radius: 50px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; display: block; align-items: normal; gap: normal; } body.purchase .card-body::before, body.signup .card-body::before { left: -8px; content: initial; position: static; top: auto; width: auto; height: auto; border-radius: 0; background: none; } body.purchase .card-body::after, body.signup .card-body::after { right: -8px; content: initial; position: static; top: auto; width: auto; height: auto; border-radius: 0; background: none; } body.purchase .btn-continue:disabled, body.signup .btn-continue:disabled { background: #c0c6d0; box-shadow: none; cursor: not-allowed; opacity: 1; } @media (max-width: 1024px) { body.purchase .main-content, body.signup .main-content { padding: 32px 48px 90px 56px; } } @media (max-width: 480px) { body.purchase .page-title, body.signup .page-title { font-size: 20px; margin-bottom: 6px; } body.purchase .main-content, body.signup .main-content { padding: 70px 16px 100px 16px; } } @media (max-width: 768px) { /* body.purchase .sidebar, body.signup .sidebar { position: fixed; top: 0; left: 0; width: 100%; height: auto; flex-direction: row; padding: 16px 24px; border-radius: 0; z-index: 100; justify-content: space-between; align-items: center; background: linear-gradient(165deg, var(--color-brand-header-primary) 0%, var(--color-brand-header-secondary) 100%); max-width: 100%; min-width: auto; gap: normal; } body.purchase .mobile-menu-toggle, body.signup .mobile-menu-toggle { display: block; margin-left: 0; order: initial; background: none; border: none; color: inherit; width: auto; height: auto; border-radius: 0; align-items: normal; justify-content: normal; cursor: initial; } body.purchase .mobile-nav-close, body.signup .mobile-nav-close { display: flex; align-items: center; justify-content: center; position: static; top: auto; right: auto; z-index: auto; background: none; border: none; color: inherit; width: auto; height: auto; border-radius: 0; cursor: initial; } */ body.purchase .page-title, body.signup .page-title { font-size: 24px; } body.purchase .page-subtitle, body.signup .page-subtitle { font-size: 12px; } body.purchase .main-content, body.signup .main-content { padding: 80px 24px 100px 24px; max-width: 100%; min-height: auto; } } /* ── body.purchase, body.signup, body.booking ── */ @media (max-width: 768px) { /* body.purchase .sidebar-logo, body.signup .sidebar-logo, body.booking .sidebar-logo { height: 0; overflow: hidden; margin-bottom: 0; order: initial; } body.purchase .sidebar-logo svg, body.signup .sidebar-logo svg, body.booking .sidebar-logo svg { width: 100px; } body.purchase .steps-nav, body.signup .steps-nav, body.booking .steps-nav { display: none; flex-direction: column; padding-top: 20px; width: 100%; position: static; top: auto; left: auto; right: auto; bottom: auto; background: none; z-index: auto; padding: 0; gap: normal; margin: 0; overflow-y: visible; } */ } /* ── body.signup ── */ body.signup .security-badges { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 8px 0; } body.signup .security-badge { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-placeholder); width: auto; height: auto; background: none; border-radius: 0; justify-content: normal; } body.signup .security-badge svg { width: 12px; height: 12px; fill: var(--color-border-strong); } body.signup .success-title { font-size: 48px; font-weight: 900; text-align: center; line-height: 1.1; margin-bottom: 16px; position: relative; z-index: 1; text-transform: uppercase; letter-spacing: -1px; } body.signup .action-buttons { display: flex; gap: 16px; margin-bottom: 60px; position: relative; z-index: 1; width: auto; justify-content: normal; } body.signup .card-header-area { background: linear-gradient(135deg, var(--palette-navy-600) 0%, var(--color-brand-accent) 100%); padding: 22px 24px 28px; position: relative; min-height: 110px; } body.signup .error-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--color-state-error); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(34,197,94,0.30); margin-bottom: 28px; position: relative; z-index: 1; } body.signup .error-icon svg { width: 36px; height: 36px; fill: var(--color-text-inverse); } body.signup .success-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--color-state-success); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(34,197,94,0.30); margin-bottom: 28px; position: relative; z-index: 1; } body.signup .success-icon svg { width: 36px; height: 36px; fill: var(--color-text-inverse); } body.signup .success-subtitle { font-size: 15px; color: var(--color-text-secondary); text-align: center; max-width: 480px; line-height: 1.6; margin-bottom: 40px; position: relative; z-index: 1; } body.signup .confirm-card { width: 100%; max-width: 420px; background: var(--color-bg-surface); border-radius: 20px; box-shadow: 0 4px 32px rgba(9,26,68,0.10); overflow: hidden; position: relative; z-index: 1; margin-bottom: 40px; border: none; } body.signup .confirm-info { display: flex; flex-direction: column; gap: 0; } /* ============================================================ Theme toggle — shows the moon icon when in light mode (so the user sees "switch to dark" affordance) and the sun icon when in dark mode. Reuses the existing `.footer-chip` styles from the dashboard for consistent layout. ============================================================ */ #themeToggle .theme-icon-sun, #themeToggle .theme-icon-moon { width: 14px; height: 14px; fill: currentColor; display: none; } /* Light (or no attribute) → moon visible (invites switching to dark) */ :root:not([data-theme="dark"]) #themeToggle .theme-icon-moon { display: inline-block; } /* Dark → sun visible (invites switching back to light) */ [data-theme="dark"] #themeToggle .theme-icon-sun { display: inline-block; } #themeToggle { cursor: pointer; user-select: none; } /* ============================================================ DARK theme surface adjustments Targets specific selectors that use hardcoded light-gray backgrounds that don't adapt via tokens. Applied ONLY when data-theme="dark" so light remains untouched. ============================================================ */ /* Coming-soon club card (devino-membru-02 / rezervari-* grids) */ [data-theme="dark"] .club-card.coming-soon .club-image-wrapper { background: linear-gradient(145deg, var(--color-bg-surface-muted) 0%, var(--color-bg-surface) 50%, var(--color-bg-surface-alt) 100%); } [data-theme="dark"] .club-card.coming-soon .club-info { background: var(--color-bg-surface-alt); } [data-theme="dark"] .coming-soon-icon { background: rgba(255, 255, 255, 0.06); } /* Subscription info boxes: VALABILITATE / ACCES / UNITATI */ [data-theme="dark"] .info-box { background: var(--color-bg-surface-alt); border-color: var(--color-border-subtle); } [data-theme="dark"] .orange-variant .info-box { background: rgba(250, 115, 11, 0.08); border-color: var(--color-overlay-accent-md); } /* Phone input prefix (newer variant at ~line 2432) */ [data-theme="dark"] .phone-prefix { background: var(--color-bg-surface-alt); } /* Gift card feature list box (card-cadou-01..04) */ [data-theme="dark"] .gift-card-features { background: var(--color-bg-surface-alt); } [data-theme="dark"] .gift-card-feature + .gift-card-feature { border-top-color: var(--color-border-subtle); } /* Gift summary top box (card-cadou-04 "Pune-ti prietenii...") */ [data-theme="dark"] .gift-summary { background: var(--color-bg-surface-alt); border-color: var(--color-border-subtle); } /* Catch-all: other hardcoded pale backgrounds that should flip */ [data-theme="dark"] .context-box-change, [data-theme="dark"] .modal-left, [data-theme="dark"] .section-card, [data-theme="dark"] .summary-card, [data-theme="dark"] .selected-service, [data-theme="dark"] .order-summary-row, [data-theme="dark"] .benefit-item, [data-theme="dark"] .billing-option, [data-theme="dark"] .bank-logo-box, [data-theme="dark"] .app-download-bar, [data-theme="dark"] .auth-card .form-row, [data-theme="dark"] .reserve-action, [data-theme="dark"] .quick-action-card { background: var(--color-bg-surface-alt); } /* ============================================================ BUG FIX — cross-theme `body.giftcard .checkbox-box` sets background:none with higher specificity than `.checkbox-box.checked { background: orange }`, so the checked state was invisible on card-cadou-04. Restore the checked styling with matching specificity. ============================================================ */ body.giftcard .checkbox-box.checked { background: var(--color-brand-primary); border-color: var(--color-brand-primary); } body.giftcard .checkbox-box.checked svg { opacity: 1; } /* ════════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE — auth (acces-membri) page The page-layout is desktop side-by-side (240px navy panel + main). On mobile, stack vertically with the panel as a top header. ════════════════════════════════════════════════════════════════════ */ @media (max-width: 880px) { body.auth .page-layout { flex-direction: column; min-height: auto; } body.auth .welcome-panel { width: 100%; min-width: 0; height: auto; position: relative; top: auto; padding: 18px 22px 24px; border-radius: 0; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; } body.auth .welcome-back-link { margin-bottom: 0; order: 1; } body.auth .welcome-logo { order: 2; margin-bottom: 0; } body.auth .welcome-logo svg { width: 100px; } body.auth .welcome-content { display: none; } /* hide marketing copy on mobile */ body.auth .welcome-footer { display: none; } /* hide footer in panel on mobile */ body.auth .main-area { padding: 0; } body.auth .main-inner { padding: 24px 16px 60px; } body.auth .page-title { font-size: 24px; } body.auth .watermark-number { font-size: 80px; top: -10px; left: -8px; } body.auth .page-subtitle { font-size: 13px; padding-left: 18px; line-height: 1.5; } body.auth .auth-card { padding: 22px 18px; } body.auth .form-row { grid-template-columns: 1fr; gap: 14px; } body.auth .form-row > * { width: 100%; } body.auth .auth-actions { flex-direction: column; gap: 12px; align-items: stretch; } body.auth .auth-actions > * { width: 100%; justify-content: center; text-align: center; } } @media (max-width: 480px) { body.auth .welcome-panel { padding: 16px 14px; } body.auth .welcome-logo svg { width: 88px; } body.auth .page-title { font-size: 22px; } body.auth .watermark-number { font-size: 64px; } body.auth .auth-card { padding: 18px 14px; } } /* Mobile responsive: action-cards-grid (auth helper cards) */ @media (max-width: 640px) { body.auth .action-cards-grid { grid-template-columns: 1fr; gap: 12px; } body.auth .action-card { padding: 20px 18px 18px; } } /* ════════════════════════════════════════════════════════════════════ MEMBER AREA (v5) — interior, post-login pages Family: `member`. Layout: `layout-app`. Sidebar contains a full vertical menu (not steps). ════════════════════════════════════════════════════════════════════ */ /* ───── Sidebar override for member family ───── */ body.member .sidebar, body.purchase .sidebar { width: 230px; min-width: 230px; max-width: 230px; padding: 28px 0 24px 0; overflow-y: auto; border-radius: 0 24px 24px 0; } body.member .sidebar-logo, body.purchase .sidebar-logo { padding: 0 28px; margin-bottom: 22px; } body.member .sidebar-logo svg, body.purchase .sidebar-logo svg { width: 130px; } body.member .sidebar-welcome, body.purchase .sidebar-welcome { padding: 0 28px; color: rgba(255,255,255,0.92); font-size: 13px; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 6px; } body.member .sidebar-divider, body.purchase .sidebar-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 0 28px 8px; } .menu-list { display: flex; flex-direction: column; margin-top: 4px; margin-bottom: 4px; } body.purchase .menu-list { margin-top: auto; } .menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 28px 9px 28px; text-decoration: none; color: rgba(255,255,255,0.78); font-size: 13px; font-weight: 500; transition: background 0.15s, color 0.15s; cursor: pointer; line-height: 1.2; border-left: 3px solid transparent; } .menu-item:hover { color: #fff; background: rgba(255,255,255,0.05); } .menu-item.active { background: rgba(255,255,255,0.10); color: #fff; font-weight: 600; border-left-color: var(--color-brand-primary); padding-left: 25px; } .menu-item svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; opacity: 0.85; } .menu-item.active svg { opacity: 1; } .menu-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 6px 28px; } .menu-bottom { margin-top: auto; padding-left: 30px; } /* ───── Member content area ───── */ body.member { align-items: flex-start; } body.member .main-content { padding: 38px 56px 60px 60px; max-width: 1280px; color: var(--color-text-primary); overflow-y: visible; min-height: 0; height: auto; } body.member .sidebar, body.purchase .sidebar { height: 100vh; position: sticky; top: 0; } /* Member page title — orange, simple, no border or watermark */ .m-title { font-size: 26px; font-weight: 700; color: var(--color-brand-primary); margin: 0 0 10px 0; line-height: 1.2; } .m-subtitle { font-size: 13.5px; color: var(--color-text-secondary); margin: 0 0 28px 0; line-height: 1.55; max-width: 920px; } /* Surface card (white box with light shadow) */ .m-card { background: var(--color-bg-surface); border-radius: 14px; box-shadow: var(--shadow-card-sm); padding: 24px; margin-bottom: 18px; } /* Member tabs (orange underline) */ .m-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-surface); padding: 0 8px; border-radius: 14px 14px 0 0; box-shadow: var(--shadow-card-sm); } .m-tab { padding: 16px 22px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none; transition: color 0.15s, border-color 0.15s; } .m-tab:hover { color: var(--color-text-secondary); } .m-tab.active { color: var(--color-brand-primary); border-bottom-color: var(--color-brand-primary); } .m-tabs-card { background: var(--color-bg-surface); border-radius: 0 0 14px 14px; box-shadow: var(--shadow-card-sm); padding: 26px 28px; margin-bottom: 22px; } /* ───── Member footer (replaces flow-step footer) ───── */ .m-footer { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--color-border-subtle); color: var(--color-text-muted); font-size: 11.5px; line-height: 1.7; } .m-footer p { margin: 0 0 4px 0; } .m-footer a { color: var(--color-text-muted); text-decoration: none; } .m-footer a:hover { color: var(--color-text-secondary); } .m-footer-links { margin-bottom: 18px; } .m-footer-links .sep { margin: 0 6px; opacity: 0.5; } .m-footer-anpc { display: flex; gap: 10px; margin: 14px 0 18px; flex-wrap: wrap; } .m-footer-anpc img { height: 36px; width: auto; border-radius: 4px; background: #fff; padding: 2px; border: 1px solid var(--color-border-subtle); } .m-footer-toggles { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } /* ───── DASHBOARD interior ───── */ /* Corporate banner */ .dash-corp { background: linear-gradient(135deg, #1c4499 0%, #112e75 60%, #0a235e 100%); color: #fff; border-radius: 14px; padding: 22px 28px; margin-bottom: 18px; box-shadow: var(--shadow-card-sm); } .dash-corp-title { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 12px 0; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.20); display: flex; align-items: center; gap: 8px; } .dash-corp-title svg { width: 16px; height: 16px; fill: currentColor; } .dash-corp p { font-size: 13px; color: rgba(255,255,255,0.88); margin: 0 0 12px 0; line-height: 1.55; } .dash-corp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 50px; background: #4FA9DD; color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 600; margin-top: 4px; transition: background 0.15s, transform 0.15s; } .dash-corp-btn:hover { background: #5fb6e8; transform: translateY(-1px); } /* Two-col grid (info / cta) */ .dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; } /* Info card (light blue) */ .dash-info { background: linear-gradient(135deg, #eaf2fb 0%, #d4e5f6 100%); border-radius: 14px; padding: 22px 26px; box-shadow: var(--shadow-card-sm); } .dash-info-title { font-size: 15px; font-weight: 700; color: #14357f; margin: 0 0 10px 0; padding-bottom: 12px; border-bottom: 1px solid rgba(20,53,127,0.18); display: flex; align-items: center; gap: 8px; } .dash-info-title svg { width: 14px; height: 14px; fill: currentColor; } .dash-info p { font-size: 13px; color: #1c3a7e; line-height: 1.55; margin: 0 0 14px 0; } .dash-info-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 50px; background: #4FA9DD; color: #fff; text-decoration: none; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transition: background 0.15s; } .dash-info-btn:hover { background: #5fb6e8; } /* CTA card (white with orange title) */ .dash-cta { background: var(--color-bg-surface); border-radius: 14px; padding: 22px 26px; box-shadow: var(--shadow-card-sm); display: flex; flex-direction: column; } .dash-cta-title { font-size: 14px; font-weight: 800; color: var(--color-brand-primary); text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 12px 0; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-subtle); display: flex; align-items: center; gap: 8px; } .dash-cta-title svg { width: 16px; height: 16px; fill: currentColor; } .dash-cta p { font-size: 13px; color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 14px 0; flex: 1; } .dash-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 50px; background: var(--color-brand-primary); color: var(--color-btn-app); text-decoration: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; align-self: flex-end; transition: background 0.15s, transform 0.15s; } .dash-cta-btn:hover { background: var(--color-brand-primary-hover); transform: translateY(-1px); } /* Quicklinks 4 col */ .dash-qgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .dash-q { background: var(--color-bg-surface); border-radius: 12px; padding: 22px 16px 18px; text-align: center; box-shadow: var(--shadow-card-sm); text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; } .dash-q:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-md); } .dash-q-icon { width: 32px; height: 32px; margin: 0 auto 10px; color: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; } .dash-q-icon svg { width: 28px; height: 28px; fill: currentColor; } .dash-q-title { font-size: 12.5px; font-weight: 700; color: var(--color-brand-primary); margin-bottom: 3px; } .dash-q-sub { font-size: 10.5px; color: var(--color-text-muted); line-height: 1.3; } /* Voucher / gift card activate */ .dash-act { background: var(--color-bg-surface); border-radius: 14px; padding: 22px 26px; box-shadow: var(--shadow-card-sm); } .dash-act-title { font-size: 14px; font-weight: 800; color: var(--color-brand-primary); text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 12px 0; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-subtle); display: flex; align-items: center; gap: 8px; } .dash-act-title svg { width: 16px; height: 16px; fill: currentColor; } .dash-act p { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 12px 0; } .dash-act-input { width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--color-border-default); background: var(--color-bg-input); font-family: inherit; font-size: 13px; color: var(--color-text-primary); margin-bottom: 12px; box-sizing: border-box; transition: border-color 0.15s; } .dash-act-input:focus { outline: none; border-color: var(--color-border-focus); } .dash-act-warn { font-size: 11px; color: var(--color-text-muted); background: var(--color-bg-surface-muted); padding: 9px 12px; border-radius: 6px; margin-bottom: 12px; line-height: 1.45; } .dash-act-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .btn-orange-pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 50px; background: var(--color-brand-primary); color: var(--color-btn-app); text-decoration: none; border: none; font-family: inherit; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0.3px; cursor: pointer; transition: background 0.15s, transform 0.15s; } .btn-orange-pill:hover { background: var(--color-brand-primary-hover); transform: translateY(-1px); } .btn-orange-pill svg { width: 13px; height: 13px; fill: currentColor; } .btn-blue-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 50px; background: #4FA9DD; color: #fff; text-decoration: none; border: none; font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .btn-blue-pill:hover { background: #5fb6e8; } /* "Antrenează-te cu noi" videos */ .dash-section-title { font-size: 22px; font-weight: 800; color: var(--color-brand-primary); margin: 28px 0 16px 0; line-height: 1.2; display: flex; align-items: center; justify-content: space-between; } .dash-section-title .right-link { font-size: 12px; font-weight: 600; color: #4FA9DD; text-transform: none; text-decoration: none; background: #d6eaf7; padding: 8px 16px; border-radius: 50px; } .dash-section-title .right-link:hover { background: #c2dff1; color: #2f7eb7; } .dash-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; } .dash-video { position: relative; background: #2a2a2a; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; text-decoration: none; color: #fff; box-shadow: var(--shadow-card-sm); transition: transform 0.15s, box-shadow 0.15s; } .dash-video:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-md); } .dash-video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .dash-video-lock { position: absolute; top: 14px; right: 16px; width: 16px; height: 16px; fill: rgba(255,255,255,0.85); } .dash-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(250,115,11,0.45); } .dash-video-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; } .dash-video-cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.78); color: #fff; font-size: 13px; font-weight: 600; padding: 12px 16px; } /* News cards */ .dash-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; } .dash-news { background: var(--color-bg-surface); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card-sm); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform 0.15s, box-shadow 0.15s; } .dash-news:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-md); } .dash-news img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .dash-news-cap { padding: 14px 16px 18px; font-size: 13px; font-weight: 600; color: var(--color-text-primary); line-height: 1.45; flex: 1; } /* ───── ORAR CLASE / STUDIO HUB schedule ───── */ .sched-header-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .sched-header-row .lbl { font-size: 13px; color: var(--color-text-secondary); } .sched-select { position: relative; display: inline-block; } .sched-select select { appearance: none; -webkit-appearance: none; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 8px; padding: 9px 36px 9px 14px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--color-text-primary); cursor: pointer; box-shadow: var(--shadow-card-sm); } .sched-select::after { content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-25%); width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--color-text-secondary); pointer-events: none; } .sched-legend { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); } .sched-legend .leg { display: inline-flex; align-items: center; gap: 5px; } .sched-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .sched-legend .leg.print { color: #6b7384; } .sched-legend .leg.cycling .dot { background: #f068b3; } .sched-legend .leg.cycling { color: #d8359a; } .sched-legend .leg.dance .dot { background: #f49725; } .sched-legend .leg.dance { color: #c87513; } .sched-legend .leg.aerobic .dot { background: #1bb86b; } .sched-legend .leg.aerobic { color: #128048; } .sched-legend .leg.lesmills .dot { background: #1a1a1a; } .sched-legend .leg.lesmills { color: #1a1a1a; } .sched-tabs { display: inline-flex; background: var(--color-bg-surface); border-radius: 50px; padding: 4px; box-shadow: var(--shadow-card-sm); margin-left: auto; } .sched-tab { padding: 8px 18px; border-radius: 50px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s; } .sched-tab.active { background: var(--color-brand-accent); color: #fff; } .sched-table { background: var(--color-bg-surface); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card-sm); display: grid; grid-template-columns: repeat(4, 1fr); } .sched-day-col { border-right: 1px solid var(--color-border-subtle); } .sched-day-col:last-child { border-right: none; } .sched-day-head { background: #1c1c1c; color: #fff; padding: 14px 16px; text-align: center; } .sched-day-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; } .sched-day-date { font-size: 12px; color: rgba(255,255,255,0.75); } .sched-class { padding: 12px 16px; border-bottom: 1px solid var(--color-border-subtle); } .sched-class:last-child { border-bottom: none; } .sched-class-time { font-size: 11.5px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 6px; } .sched-class-name { font-size: 12.5px; font-weight: 800; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.3px; } .sched-class.cycling .sched-class-name { color: #d8359a; } .sched-class.dance .sched-class-name { color: #d8359a; } .sched-class.aerobic .sched-class-name { color: #1bb86b; } .sched-class.lesmills .sched-class-name { color: #1a1a1a; } .sched-class.print .sched-class-name { color: var(--color-text-primary); } .sched-class.yoga .sched-class-name { color: #f49725; } .sched-class.pilates .sched-class-name { color: #d8359a; } .sched-class-meta { font-size: 10.5px; color: var(--color-text-muted); line-height: 1.4; } .sched-class-warn { margin-top: 6px; font-size: 10px; color: #c43a3a; font-weight: 700; } .sched-class-info { margin-top: 6px; font-size: 10px; color: #c43a3a; font-weight: 700; } /* Empty state box */ .empty-box { background: var(--color-bg-surface); border-radius: 14px; padding: 32px 28px; box-shadow: var(--shadow-card-sm); display: flex; align-items: center; gap: 22px; } .empty-box-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--color-brand-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .empty-box-icon svg { width: 22px; height: 22px; fill: #fff; } .empty-box-text { font-size: 15px; color: var(--color-text-primary); line-height: 1.5; } .empty-box-text strong { display: block; font-weight: 700; margin-bottom: 4px; } /* Hub clipcard hint */ .hub-no-clip { background: var(--color-bg-surface); border-radius: 14px; padding: 32px; box-shadow: var(--shadow-card-sm); text-align: center; margin-top: 18px; } .hub-no-clip-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .hub-no-clip-icon svg { width: 24px; height: 24px; fill: #fff; } .hub-no-clip-text { font-size: 13.5px; color: var(--color-text-secondary); margin-bottom: 18px; } /* ───── PEOPLE / CLASS GRID (Antrenori, Instructori, Clase) ───── */ .people-filter { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; max-width: 460px; } .people-filter label { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); } .people-filter select, .people-filter input { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--color-border-default); background: var(--color-bg-input); font-family: inherit; font-size: 13px; color: var(--color-text-primary); box-sizing: border-box; transition: border-color 0.15s; } .people-filter select { padding-right: 36px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 12px) center; background-size: 6px 6px; background-repeat: no-repeat; } .people-filter input:focus, .people-filter select:focus { outline: none; border-color: var(--color-border-focus); } .people-filter-row { display: flex; align-items: center; gap: 10px; } .people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; } .people-card { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #1a1a1a; box-shadow: var(--shadow-card-sm); text-decoration: none; color: #fff; transition: transform 0.15s, box-shadow 0.15s; } .people-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-md); } .people-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .people-card-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0.85) 100%); color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .people-card.no-img { background: #1a1a1a; } /* ───── ABONAMENTE de membru ───── */ .sub-card { background: var(--color-bg-surface); border-radius: 14px; box-shadow: var(--shadow-card-sm); padding: 26px 28px; margin-bottom: 18px; } .sub-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .sub-badge { background: #21c08e; color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .sub-name { font-size: 17px; font-weight: 700; color: var(--color-text-primary); } .sub-meta-line { font-size: 13.5px; color: var(--color-text-secondary); margin: 4px 0; line-height: 1.55; } .sub-meta-line .lbl { font-weight: 700; color: var(--color-text-primary); } .sub-card-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border-subtle); text-align: center; } .btn-blue-soft-pill { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 50px; background: #d6eaf7; color: #2f7eb7; text-decoration: none; font-size: 12.5px; font-weight: 600; transition: background 0.15s; } .btn-blue-soft-pill:hover { background: #c2dff1; } .sub-add-services { background: var(--color-bg-surface); border-radius: 14px; padding: 24px; box-shadow: var(--shadow-card-sm); text-align: center; margin-top: 14px; border: 1px dashed var(--color-border-default); } .sub-add-services-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .sub-add-services-icon svg { width: 24px; height: 24px; fill: #fff; } .sub-add-services-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; max-width: 720px; margin: 0 auto 16px; } /* ───── CLIPCARDURI servicii (009) ───── */ .clip-list { background: var(--color-bg-surface); border-radius: 14px; box-shadow: var(--shadow-card-sm); padding: 6px 28px; } .clip-row { padding: 22px 0; border-bottom: 1px solid var(--color-border-subtle); } .clip-row:last-child { border-bottom: none; } .clip-row-title { font-size: 14px; font-weight: 800; color: var(--color-text-primary); margin-bottom: 10px; letter-spacing: 0.3px; } .clip-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 6px; } .clip-meta svg { width: 12px; height: 12px; fill: var(--color-brand-primary); flex-shrink: 0; } .clip-meta a { color: #2f7eb7; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; font-size: 12px; } .clip-meta a:hover { color: var(--color-brand-primary); } /* ───── ACTIVITATEA TA timeline ───── */ .timeline { position: relative; padding: 12px 0 12px 30px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 2px; background: var(--color-border-default); } .timeline-row { position: relative; padding: 16px 0; font-size: 14px; color: var(--color-text-secondary); } .timeline-row::before { content: ''; position: absolute; left: -27px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg-surface); border: 2px solid var(--color-border-default); } .timeline-row strong { color: var(--color-text-primary); font-weight: 700; margin-right: 8px; } /* ───── REGULAMENTE club ───── */ .rules-list .rule-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 4px; border-bottom: 1px solid var(--color-border-subtle); } .rules-list .rule-row:last-child { border-bottom: none; } .rules-list .rule-title { font-size: 14px; font-weight: 700; color: var(--color-text-primary); } /* ───── responsive: collapse member sidebar on small screens ───── */ @media (max-width: 1024px) { body.member .sidebar, body.purchase .sidebar { width: 200px; min-width: 200px; } body.member .main-content, body.purchase .main-content { padding: 32px 32px 60px; } .dash-qgrid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 880px) { body.member { display: block; } body.member .sidebar, body.purchase .sidebar { width: 100%; max-width: none; height: auto; position: static; border-radius: 0; padding: 16px 0; } body.member .main-content { padding: 24px 16px 60px; } .dash-grid-2 { grid-template-columns: 1fr; } .dash-qgrid { grid-template-columns: repeat(2, 1fr); } .dash-videos, .dash-news-grid { grid-template-columns: 1fr; } .sched-table { grid-template-columns: 1fr; } .people-grid { grid-template-columns: 1fr 1fr; } .info-grid-2 { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════ MEMBER AREA v5 — feedback batch (2026-05-04 #2) - v4-style page headers (with accent + border-left) - footer pushed to bottom via flex - richer empty states - REZERVA buttons on schedule - Studio HUB clipcard table + creative buy box - Improved subscription cards + history list - Better clipcard list with progress bar - Decorated timeline ════════════════════════════════════════════════════════════════════ */ /* ─── Footer stuck to bottom ─── */ body.member .main-content { display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; } .m-footer { margin-top: auto; } /* ─── v5 page header (matches v4 stylistic richness) ─── */ .m-page-header { position: relative; margin-bottom: 28px; padding-bottom: 4px; } .m-page-header .m-watermark { position: absolute; top: -18px; left: -8px; font-size: 110px; font-weight: 900; color: #e7e7e7; line-height: 1; pointer-events: none; user-select: none; letter-spacing: -3px; text-transform: uppercase; white-space: nowrap; } [data-theme="dark"] .m-page-header .m-watermark { color: rgba(255, 255, 255, 0.05); } .m-page-header .m-h1 { font-size: 30px; font-weight: 800; color: var(--color-text-primary); line-height: 1.1; border-left: 4px solid var(--color-brand-primary); padding-left: 14px; margin: 0 0 10px 0; position: relative; z-index: 1; } .m-page-header .m-h1 .accent { color: var(--color-brand-primary); } .m-page-header .m-sub { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.55; padding-left: 18px; max-width: 920px; position: relative; z-index: 1; margin: 0; } /* ─── Richer empty state ─── */ .empty-rich { background: var(--color-bg-surface); border-radius: 16px; padding: 60px 40px 56px; box-shadow: var(--shadow-card-sm); text-align: center; position: relative; overflow: hidden; } .empty-rich::before { content: ''; position: absolute; top: -80px; right: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(250,115,11,0.08) 0%, transparent 70%); pointer-events: none; } .empty-rich::after { content: ''; position: absolute; bottom: -100px; left: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(9,26,68,0.06) 0%, transparent 70%); pointer-events: none; } .empty-rich-illu { width: 120px; height: 120px; margin: 0 auto 22px; border-radius: 50%; background: linear-gradient(135deg, rgba(250,115,11,0.12) 0%, rgba(9,26,68,0.10) 100%); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .empty-rich-illu svg { width: 52px; height: 52px; fill: var(--color-brand-primary); } .empty-rich-illu::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed rgba(250,115,11,0.22); animation: rotate-slow 30s linear infinite; } @keyframes rotate-slow { to { transform: rotate(360deg); } } .empty-rich-title { font-size: 22px; font-weight: 800; color: var(--color-text-primary); margin-bottom: 10px; position: relative; z-index: 1; } .empty-rich-text { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; max-width: 520px; margin: 0 auto 22px; position: relative; z-index: 1; } .empty-rich-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } /* ─── Schedule REZERVA button ─── */ .sched-class-reserve { margin-top: 8px; display: inline-block; padding: 6px 14px; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; text-decoration: none; color: #1a1a1a; transition: transform 0.1s, filter 0.15s; border: none; cursor: pointer; } .sched-class-reserve:hover { filter: brightness(0.92); transform: translateY(-1px); } .sched-class.cycling .sched-class-reserve { background: #f9e94a; color: #6a3a72; } .sched-class.dance .sched-class-reserve { background: #f9e94a; color: #6a3a72; } .sched-class.aerobic .sched-class-reserve { background: #d8f5b4; color: #1f5b30; } .sched-class.lesmills .sched-class-reserve { background: #ffe4d3; color: #1a1a1a; } .sched-class.print .sched-class-reserve { background: #e8eaee; color: #1a1a1a; } .sched-class.yoga .sched-class-reserve { background: #ffe4d3; color: #c87513; } .sched-class.pilates .sched-class-reserve { background: #f9e94a; color: #6a3a72; } /* ─── Studio HUB: clipcard table card ─── */ .hub-clip-card { background: var(--color-bg-surface); border-radius: 14px; padding: 26px 28px; box-shadow: var(--shadow-card-sm); margin-top: 18px; } .hub-clip-card-title { font-size: 17px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 16px 0; } .hub-clip-table { width: 100%; border-collapse: collapse; } .hub-clip-table th { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.6px; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-surface-alt); } .hub-clip-table td { padding: 14px 16px; font-size: 13.5px; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-subtle); } .hub-clip-table tr:last-child td { border-bottom: none; } .hub-clip-units { display: inline-flex; align-items: center; gap: 8px; } .hub-clip-units .progress { width: 80px; height: 8px; background: var(--color-bg-surface-muted); border-radius: 4px; overflow: hidden; } .hub-clip-units .progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-brand-primary), #ff9a3d); border-radius: 4px; } .hub-clip-buy-box { background: linear-gradient(135deg, #fff6ed 0%, #ffe7d2 100%); border-radius: 16px; padding: 32px 36px; margin-top: 18px; display: flex; align-items: center; gap: 24px; position: relative; overflow: hidden; } [data-theme="dark"] .hub-clip-buy-box { background: linear-gradient(135deg, #2a2018 0%, #3a2614 100%); } .hub-clip-buy-box::before { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(250,115,11,0.18) 0%, transparent 70%); } .hub-clip-buy-illu { width: 84px; height: 84px; border-radius: 50%; background: var(--color-brand-primary); box-shadow: 0 8px 24px rgba(250,115,11,0.32); display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; } .hub-clip-buy-illu svg { width: 36px; height: 36px; fill: #fff; } .hub-clip-buy-text { flex: 1; position: relative; z-index: 1; } .hub-clip-buy-title { font-size: 18px; font-weight: 800; color: var(--color-text-primary); margin: 0 0 6px 0; } .hub-clip-buy-sub { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.55; margin: 0; } .hub-clip-buy-cta { position: relative; z-index: 1; flex-shrink: 0; } /* ─── Improved subscription card (008) ─── */ .sub-card-pro { background: var(--color-bg-surface); border-radius: 16px; box-shadow: var(--shadow-card-sm); overflow: hidden; margin-bottom: 18px; } .sub-card-pro-head { background: linear-gradient(135deg, var(--color-brand-accent) 0%, var(--palette-navy-800) 100%); color: #fff; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .sub-card-pro-head .sub-name { font-size: 18px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.4px; flex: 1; } .sub-card-pro-head .sub-name small { display: block; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.78); margin-top: 4px; } .sub-card-pro-body { padding: 22px 28px 8px; } .sub-card-pro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px; margin-bottom: 18px; } .sub-meta-block { background: var(--color-bg-surface-alt); border-radius: 10px; padding: 12px 14px; } .sub-meta-block .lbl { font-size: 10px; font-weight: 800; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: block; } .sub-meta-block .val { font-size: 14px; font-weight: 700; color: var(--color-text-primary); word-break: break-word; } .sub-clubs-list { background: var(--color-bg-surface-alt); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; } .sub-clubs-list .lbl { font-size: 10px; font-weight: 800; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block; } .sub-clubs-list .clubs { display: flex; flex-wrap: wrap; gap: 6px; } .sub-clubs-list .clubs span { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); color: var(--color-text-primary); border-radius: 50px; padding: 4px 12px; font-size: 11.5px; font-weight: 600; } .sub-card-pro-actions { padding: 16px 28px 22px; border-top: 1px solid var(--color-border-subtle); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .sub-link-orange { color: var(--color-brand-primary); text-decoration: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; display: inline-flex; align-items: center; gap: 4px; } .sub-link-orange:hover { color: var(--color-brand-primary-hover); } /* ─── Subscription history (014) ─── */ .sub-history-list .sub-history-item { background: var(--color-bg-surface); border-radius: 14px; padding: 22px 26px; box-shadow: var(--shadow-card-sm); margin-bottom: 12px; border-left: 4px solid var(--palette-navy-700); opacity: 0.95; } .sub-history-list .sub-history-item h4 { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 8px 0; } .sub-history-list .sub-history-item p { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0; line-height: 1.5; } .sub-history-list .sub-history-item p .lbl { font-weight: 700; color: var(--color-text-primary); } .sub-history-list .sub-history-item .actions { margin-top: 14px; text-align: center; } /* ─── Clipcard cards improved (009) ─── */ .clipcard-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .clipcard-tile { background: var(--color-bg-surface); border-radius: 14px; box-shadow: var(--shadow-card-sm); overflow: hidden; display: grid; grid-template-columns: 7px 1fr; } .clipcard-tile .accent-bar { background: linear-gradient(180deg, var(--color-brand-primary) 0%, #ff9a3d 100%); } .clipcard-tile.depleted .accent-bar { background: linear-gradient(180deg, #c43a3a 0%, #ff7878 100%); } .clipcard-tile-body { padding: 22px 26px; } .clipcard-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .clipcard-tile-name { font-size: 15px; font-weight: 800; color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.4px; } .clipcard-units { display: inline-flex; align-items: center; gap: 10px; } .clipcard-units-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); letter-spacing: 0.5px; } .clipcard-units-num { font-size: 26px; font-weight: 900; color: var(--color-brand-primary); line-height: 1; margin-left: 4px; } .clipcard-tile.depleted .clipcard-units-num { color: #c43a3a; } .clipcard-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; margin-bottom: 4px; } .clipcard-meta-grid .row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-text-secondary); } .clipcard-meta-grid .row svg { width: 13px; height: 13px; fill: var(--color-brand-primary); flex-shrink: 0; } .clipcard-trainer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border-subtle); font-size: 12.5px; color: var(--color-text-secondary); display: flex; align-items: center; gap: 8px; } .clipcard-trainer svg { width: 13px; height: 13px; fill: var(--color-brand-primary); } .clipcard-trainer a { color: #2f7eb7; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; font-size: 11.5px; } .clipcard-trainer a:hover { color: var(--color-brand-primary); } /* ─── Decorated timeline (010) ─── */ .timeline-pro { position: relative; padding: 4px 0 4px 50px; } .timeline-pro::before { content: ''; position: absolute; left: 17px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(180deg, var(--color-brand-primary) 0%, transparent 100%); opacity: 0.35; } .timeline-pro-row { position: relative; padding: 14px 18px; background: var(--color-bg-surface); border-radius: 12px; margin-bottom: 12px; box-shadow: var(--shadow-card-sm); transition: transform 0.15s, box-shadow 0.15s; display: flex; align-items: center; gap: 16px; } .timeline-pro-row:hover { transform: translateX(4px); box-shadow: var(--shadow-card-md); } .timeline-pro-row::before { content: ''; position: absolute; left: -41px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--color-bg-surface); border: 3px solid var(--color-brand-primary); box-shadow: 0 0 0 4px rgba(250,115,11,0.12); } .timeline-pro-row .tl-date { font-size: 13px; font-weight: 800; color: var(--color-text-primary); min-width: 150px; } .timeline-pro-row .tl-date small { display: block; font-size: 11px; font-weight: 600; color: var(--color-text-muted); margin-top: 2px; letter-spacing: 0.3px; } .timeline-pro-row .tl-loc { flex: 1; font-size: 13.5px; color: var(--color-text-secondary); display: flex; align-items: center; gap: 6px; } .timeline-pro-row .tl-loc svg { width: 13px; height: 13px; fill: var(--color-brand-primary); } .timeline-pro-row .tl-tag { font-size: 10px; font-weight: 800; color: #1f5b30; background: #d8f5b4; padding: 4px 10px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px; } /* ─── Activity stats summary cards (010) ─── */ .activity-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .activity-stat-card { background: var(--color-bg-surface); border-radius: 12px; padding: 18px 22px; box-shadow: var(--shadow-card-sm); display: flex; align-items: center; gap: 14px; } .activity-stat-card .icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, rgba(250,115,11,0.18) 0%, rgba(250,115,11,0.08) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .activity-stat-card .icon svg { width: 18px; height: 18px; fill: var(--color-brand-primary); } .activity-stat-card .num { font-size: 22px; font-weight: 900; color: var(--color-text-primary); line-height: 1; } .activity-stat-card .lbl { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; } @media (max-width: 880px) { .activity-stats { grid-template-columns: repeat(2, 1fr); } .sub-card-pro-grid { grid-template-columns: 1fr; } .clipcard-meta-grid { grid-template-columns: 1fr; } .hub-clip-buy-box { flex-direction: column; text-align: center; } } /* ════════════════════════════════════════════════════════════════════ MEMBER AREA v5 — feedback batch #3 (008/008_istoric/009 restructure) ════════════════════════════════════════════════════════════════════ */ /* ─── Subscription HERO (008 — better hierarchy) ─── */ .sub-card-pro-hero { padding: 22px 28px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 22px; } .sub-price { font-size: 36px; font-weight: 900; color: var(--color-brand-primary); line-height: 1; letter-spacing: -0.5px; margin: 0; } .sub-price small { display: block; font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; } .sub-validity { display: flex; flex-direction: column; gap: 6px; text-align: right; } .sub-validity-dates { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .sub-validity-dates .date { font-size: 14px; font-weight: 700; color: var(--color-text-primary); } .sub-validity-dates .arrow { color: var(--color-brand-primary); font-weight: 800; } .sub-progress { width: 100%; height: 8px; background: var(--color-bg-surface-muted); border-radius: 4px; overflow: hidden; margin-top: 4px; } .sub-progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-brand-primary), #ff9a3d); border-radius: 4px; } .sub-progress-info { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; text-align: right; } /* History summary header */ .history-summary { display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: var(--color-bg-surface-alt); border-radius: 10px; margin-bottom: 16px; border-left: 4px solid var(--color-brand-primary); } .history-summary svg { width: 22px; height: 22px; fill: var(--color-brand-primary); flex-shrink: 0; } .history-summary .lbl { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .history-summary .val { font-size: 22px; font-weight: 900; color: var(--color-text-primary); line-height: 1; margin-left: auto; } /* ─── Sub history item — restructured ─── */ .sub-history-pro { background: var(--color-bg-surface); border-radius: 14px; box-shadow: var(--shadow-card-sm); overflow: hidden; margin-bottom: 12px; border-left: 4px solid #6b7384; } .sub-history-pro-head { padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--color-border-subtle); } .sub-history-pro-name { font-size: 15px; font-weight: 800; color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.4px; } .sub-history-status { background: var(--color-bg-surface-muted); color: var(--color-text-muted); font-size: 10px; font-weight: 800; padding: 4px 12px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid var(--color-border-default); } .sub-history-pro-body { padding: 14px 22px 18px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 18px; align-items: center; } .sub-history-info { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-text-secondary); } .sub-history-info svg { width: 13px; height: 13px; fill: var(--color-brand-primary); flex-shrink: 0; } .sub-history-info .lbl { font-weight: 700; color: var(--color-text-primary); margin-right: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; } .sub-history-info .arrow { color: var(--color-brand-primary); margin: 0 4px; font-weight: 800; } /* ─── Clipcards grouped sections (009) ─── */ .clipcard-group-title { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px 0; font-size: 13px; font-weight: 800; color: var(--color-brand-primary); text-transform: uppercase; letter-spacing: 0.6px; } .clipcard-group-title:first-of-type { margin-top: 4px; } .clipcard-group-title svg { width: 14px; height: 14px; fill: currentColor; } .clipcard-group-title .count { margin-left: auto; background: rgba(250,115,11,0.12); color: var(--color-brand-primary); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 50px; letter-spacing: 0.3px; } /* Improved clipcard tile with progress bar for units */ .clipcard-progress { margin: 8px 0 12px; height: 6px; background: var(--color-bg-surface-muted); border-radius: 3px; overflow: hidden; } .clipcard-progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-brand-primary), #ff9a3d); border-radius: 3px; transition: width 0.3s; } .clipcard-tile.depleted .clipcard-progress-fill { background: linear-gradient(90deg, #c43a3a, #ff7878); } /* ════════════════════════════════════════════════════════════════════ MEMBER AREA v5 — feedback batch #4 (sticky sidebar, voucher/gift redesign, mobile) ════════════════════════════════════════════════════════════════════ */ /* ─── Fix sticky sidebar: allow html/body to grow naturally on member pages ─── */ html:has(body.member) { height: auto; min-height: 100%; } body.member { height: auto; min-height: 100vh; } /* ─── Voucher / Gift card activation — premium look ─── */ .dash-act-pro { position: relative; background: var(--color-bg-surface); border-radius: 16px; padding: 0; box-shadow: var(--shadow-card-sm); overflow: hidden; display: flex; align-items: stretch; min-height: 220px; } .dash-act-pro::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-brand-primary) 0%, #ff9a3d 100%); z-index: 2; } .dash-act-pro-side { width: 110px; flex-shrink: 0; background: linear-gradient(135deg, #fff6ed 0%, #ffe2c2 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } [data-theme="dark"] .dash-act-pro-side { background: linear-gradient(135deg, #2a2018 0%, #3a2614 100%); } .dash-act-pro-side::after { content: ''; position: absolute; inset: -10px; border: 2px dashed rgba(250,115,11,0.20); border-radius: 50%; width: 110px; height: 110px; margin: auto; animation: rotate-slow 30s linear infinite; } .dash-act-pro-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(250,115,11,0.32); position: relative; z-index: 1; } .dash-act-pro-icon svg { width: 28px; height: 28px; fill: #fff; } .dash-act-pro-body { flex: 1; padding: 22px 24px; display: flex; flex-direction: column; } .dash-act-pro-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(250,115,11,0.12); color: var(--color-brand-primary); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; padding: 4px 10px; border-radius: 50px; align-self: flex-start; margin-bottom: 10px; } .dash-act-pro-title { font-size: 17px; font-weight: 800; color: var(--color-brand-primary); margin: 0 0 6px 0; line-height: 1.2; } .dash-act-pro-text { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 14px 0; flex: 1; } .dash-act-pro-input-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; } .dash-act-pro-input-wrap { position: relative; flex: 1; } .dash-act-pro-input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; fill: var(--color-text-muted); pointer-events: none; } .dash-act-pro-input { width: 100%; padding: 11px 14px 11px 36px; border-radius: 10px; border: 1.5px solid var(--color-border-default); background: var(--color-bg-input); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--color-text-primary); box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; letter-spacing: 0.5px; text-transform: uppercase; } .dash-act-pro-input::placeholder { color: var(--color-text-placeholder); font-weight: 500; letter-spacing: 0.3px; text-transform: none; } .dash-act-pro-input:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(250,115,11,0.16); } .dash-act-pro-btn { flex-shrink: 0; padding: 11px 20px; border-radius: 10px; background: var(--color-brand-primary); color: var(--color-btn-app); font-family: inherit; font-size: 12px; font-weight: 800; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.4px; transition: background 0.15s, transform 0.1s; display: inline-flex; align-items: center; gap: 6px; } .dash-act-pro-btn:hover { background: var(--color-brand-primary-hover); transform: translateY(-1px); } .dash-act-pro-btn svg { width: 12px; height: 12px; fill: #fff; } .dash-act-pro-warn { background: #fff3e6; border-left: 3px solid #f49725; color: #8a4d10; padding: 8px 12px; border-radius: 6px; font-size: 11px; line-height: 1.45; margin-top: 0; display: flex; align-items: flex-start; gap: 8px; } [data-theme="dark"] .dash-act-pro-warn { background: rgba(244,151,37,0.10); color: #ffb84d; } .dash-act-pro-warn svg { width: 12px; height: 12px; fill: #f49725; flex-shrink: 0; margin-top: 2px; } .dash-act-pro-link { margin-top: 8px; text-align: right; } .dash-act-pro-link a { color: #2f7eb7; font-size: 11.5px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.4px; } .dash-act-pro-link a:hover { color: var(--color-brand-primary); } /* ════════════════════════════════════════════════════════════════════ MOBILE responsiveness — comprehensive overrides ════════════════════════════════════════════════════════════════════ */ /* Mobile menu toggle button (hidden on desktop) */ .member-mobile-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 100; width: 44px; height: 44px; border-radius: 12px; background: var(--palette-navy-700); color: #fff; border: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.18); } .member-mobile-toggle svg { width: 18px; height: 18px; fill: #fff; } @media (max-width: 880px) { body.member { display: block; } body.member .sidebar, body.purchase .sidebar { position: fixed; top: 0; left: -100%; width: 84vw; max-width: 320px; min-width: 0; height: 100vh; z-index: 99; transition: left 0.25s ease; border-radius: 0; overflow-y: auto; padding: 16px 0 24px; } body.member .sidebar.mobile-open, body.purchase .sidebar.mobile-open { left: 0; } body.member .sidebar::before, body.purchase .sidebar::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: -1; opacity: 0; pointer-events: none; transition: opacity 0.25s; } body.member .sidebar.mobile-open::before, body.purchase .sidebar.mobile-open::before { opacity: 1; pointer-events: auto; } body.member .main-content, body.purchase .main-content { padding: 64px 16px 40px; max-width: 100%; } body.member .member-mobile-toggle, body.purchase .member-mobile-toggle { display: inline-flex; } /* Page header — compact */ .m-page-header { margin-bottom: 18px; } .m-page-header .m-watermark { font-size: 60px; top: -6px; } .m-page-header .m-h1 { font-size: 22px; padding-left: 10px; } .m-page-header .m-sub { font-size: 12.5px; padding-left: 14px; } /* Dashboard sections */ .dash-corp { padding: 18px 18px; } .dash-corp-title { font-size: 15px; } .dash-grid-2 { grid-template-columns: 1fr; gap: 12px; } .dash-qgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .dash-q { padding: 16px 10px 14px; } .dash-q-title { font-size: 11.5px; } .dash-q-sub { font-size: 10px; } .dash-section-title { font-size: 18px; flex-direction: column; align-items: flex-start; gap: 8px; } .dash-section-title .right-link { font-size: 11px; padding: 6px 12px; } .dash-videos, .dash-news-grid { grid-template-columns: 1fr; gap: 12px; } /* Voucher / gift activation */ .dash-act-pro { flex-direction: column; min-height: 0; } .dash-act-pro-side { width: 100%; height: 80px; } .dash-act-pro-side::after { width: 80px; height: 80px; } .dash-act-pro-icon { width: 48px; height: 48px; } .dash-act-pro-icon svg { width: 22px; height: 22px; } .dash-act-pro-body { padding: 18px 18px; } .dash-act-pro-input-row { flex-direction: column; } .dash-act-pro-btn { width: 100%; justify-content: center; padding: 12px 16px; } /* Schedule (002 / 003) */ .sched-header-row { flex-direction: column; align-items: flex-start; gap: 10px; } .sched-legend { flex-wrap: wrap; gap: 8px; margin-left: 0; font-size: 10px; } .sched-tabs { margin-left: 0; } .sched-table { grid-template-columns: 1fr; } .sched-day-col { border-right: none; border-bottom: 2px solid var(--color-border-default); } .sched-day-col:last-child { border-bottom: none; } /* Empty rich */ .empty-rich { padding: 40px 20px 36px; } .empty-rich-illu { width: 90px; height: 90px; } .empty-rich-illu svg { width: 40px; height: 40px; } .empty-rich-title { font-size: 18px; } .empty-rich-text { font-size: 12.5px; } /* Hub clip */ .hub-clip-card { padding: 18px 16px; } .hub-clip-table thead { display: none; } .hub-clip-table tbody, .hub-clip-table tr, .hub-clip-table td { display: block; width: 100%; } .hub-clip-table td { padding: 6px 0; border-bottom: none; } .hub-clip-table tr { padding: 12px 0; border-bottom: 1px solid var(--color-border-subtle); } .hub-clip-table td::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 800; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; } .hub-clip-buy-box { padding: 22px 20px; flex-direction: column; text-align: center; gap: 14px; } /* People grid */ .people-grid { grid-template-columns: 1fr; } .people-filter { max-width: 100%; } /* Subscription pro */ .sub-card-pro-head { flex-direction: column; align-items: flex-start; } .sub-card-pro-hero { grid-template-columns: 1fr; gap: 16px; padding: 18px 18px; } .sub-validity { text-align: left; } .sub-validity-dates { justify-content: flex-start; } .sub-progress-info { text-align: left; } .sub-card-pro-grid { grid-template-columns: 1fr; } .sub-card-pro-actions { padding: 14px 18px 18px; flex-direction: column; align-items: stretch; gap: 8px; } .sub-card-pro-actions .btn-blue-soft-pill { margin-left: 0 !important; text-align: center; justify-content: center; } /* Sub history */ .sub-history-pro-body { grid-template-columns: 1fr; gap: 10px; } /* Clipcard tile */ .clipcard-tile-head { flex-direction: column; align-items: flex-start; gap: 8px; } .clipcard-meta-grid { grid-template-columns: 1fr; } /* Activity timeline */ .activity-stats { grid-template-columns: repeat(2, 1fr); } .timeline-pro-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 14px; } .timeline-pro-row .tl-date { min-width: 0; } .timeline-pro-row .tl-tag { align-self: flex-start; } /* Rules */ .rules-list .rule-row { flex-direction: column; align-items: flex-start; gap: 10px; } /* Footer */ .m-footer { padding-top: 18px; } .m-footer-anpc img { height: 28px; } } @media (max-width: 480px) { .dash-qgrid { grid-template-columns: 1fr; } .activity-stats { grid-template-columns: 1fr; } .m-page-header .m-h1 { font-size: 20px; } .m-page-header .m-watermark { font-size: 48px; } } /* ════════════════════════════════════════════════════════════════════ DASHBOARD QUICKLINKS — pro variant (data-driven, color-coded) ════════════════════════════════════════════════════════════════════ */ .dash-qpro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .dash-qpro { position: relative; display: flex; align-items: center; gap: 14px; background: var(--color-bg-surface); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-card-sm); text-decoration: none; color: inherit; transition: transform 0.18s, box-shadow 0.18s; overflow: hidden; } .dash-qpro::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--qcolor, var(--color-brand-primary)); opacity: 0.85; transition: width 0.18s; } .dash-qpro:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-md); } .dash-qpro:hover::before { width: 6px; } .dash-qpro-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--qbg, rgba(250,115,11,0.12)); color: var(--qcolor, var(--color-brand-primary)); transition: transform 0.18s; } .dash-qpro:hover .dash-qpro-icon { transform: scale(1.06) rotate(-3deg); } .dash-qpro-icon svg { width: 20px; height: 20px; fill: currentColor; } .dash-qpro-body { flex: 1; min-width: 0; } .dash-qpro-title { font-size: 13.5px; font-weight: 800; color: var(--color-text-primary); margin: 0 0 2px 0; letter-spacing: 0.1px; } .dash-qpro-info { font-size: 11px; color: var(--color-text-muted); font-weight: 600; line-height: 1.35; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .dash-qpro-info .num { color: var(--qcolor, var(--color-brand-primary)); font-weight: 800; font-size: 12px; } .dash-qpro-info .badge { background: var(--qbg, rgba(250,115,11,0.12)); color: var(--qcolor, var(--color-brand-primary)); font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 50px; letter-spacing: 0.4px; text-transform: uppercase; } .dash-qpro-info .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-state-success, #21c08e); display: inline-block; } .dash-qpro-info small { color: var(--color-text-muted); font-size: 10.5px; font-weight: 500; } .dash-qpro-arrow { flex-shrink: 0; width: 22px; height: 22px; color: var(--qcolor, var(--color-brand-primary)); opacity: 0; transform: translateX(-4px); transition: opacity 0.18s, transform 0.18s; align-self: center; display: flex; align-items: center; justify-content: center; } .dash-qpro:hover .dash-qpro-arrow { opacity: 1; transform: translateX(0); } .dash-qpro-arrow svg { width: 14px; height: 14px; fill: currentColor; } /* Color tokens — category palette */ .dash-qpro.qc-blue { --qcolor: #2f7eb7; --qbg: rgba(47,126,183,0.12); } .dash-qpro.qc-purple { --qcolor: #7d4ec5; --qbg: rgba(125,78,197,0.12); } .dash-qpro.qc-green { --qcolor: #1e9c66; --qbg: rgba(30,156,102,0.12); } .dash-qpro.qc-orange { --qcolor: #e8650a; --qbg: rgba(232,101,10,0.14); } .dash-qpro.qc-pink { --qcolor: #d8359a; --qbg: rgba(216,53,154,0.12); } .dash-qpro.qc-amber { --qcolor: #c87513; --qbg: rgba(244,151,37,0.16); } .dash-qpro.qc-teal { --qcolor: #0d9488; --qbg: rgba(13,148,136,0.12); } .dash-qpro.qc-red { --qcolor: #c43a3a; --qbg: rgba(196,58,58,0.12); } [data-theme="dark"] .dash-qpro.qc-blue { --qbg: rgba(70,160,220,0.18); --qcolor: #6db3df; } [data-theme="dark"] .dash-qpro.qc-purple { --qbg: rgba(160,110,230,0.18); --qcolor: #a78cdf; } [data-theme="dark"] .dash-qpro.qc-green { --qbg: rgba(60,200,140,0.18); --qcolor: #4dc99c; } [data-theme="dark"] .dash-qpro.qc-orange { --qbg: rgba(255,150,50,0.20); --qcolor: #ffa052; } [data-theme="dark"] .dash-qpro.qc-pink { --qbg: rgba(240,90,180,0.18); --qcolor: #ee7ec0; } [data-theme="dark"] .dash-qpro.qc-amber { --qbg: rgba(255,180,80,0.18); --qcolor: #ffc66e; } [data-theme="dark"] .dash-qpro.qc-teal { --qbg: rgba(60,200,180,0.18); --qcolor: #4dd1c2; } [data-theme="dark"] .dash-qpro.qc-red { --qbg: rgba(255,100,100,0.18); --qcolor: #ff8585; } @media (max-width: 1100px) { .dash-qpro-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .dash-qpro-grid { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════ MOBILE HEADER BAR + REDESIGNED FOOTER ════════════════════════════════════════════════════════════════════ */ /* ─── Mobile top bar (replaces bare hamburger) ─── */ .member-mobile-bar { display: none; position: sticky; top: 0; z-index: 50; background: linear-gradient(165deg, var(--color-brand-header-primary) 0%, var(--color-brand-header-secondary) 100%); color: #fff; padding: 12px 16px; align-items: center; gap: 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); border-bottom: 1px solid rgba(255,255,255,0.06); } .member-mobile-bar-toggle { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.10); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s; } .member-mobile-bar-toggle:hover { background: rgba(255,255,255,0.18); } .member-mobile-bar-toggle svg { width: 18px; height: 18px; fill: #fff; } .member-mobile-bar-toggle-close { margin-left: 30px; } .member-mobile-bar-logo { flex: 1; display: flex; align-items: center; min-width: 0; } .member-mobile-bar-logo svg { width: 100px; height: auto; display: block; } .member-mobile-bar-logo .wh { fill: #fff; } .member-mobile-bar-user { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; flex-shrink: 0; } .member-mobile-bar-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--color-brand-primary), #ff9a3d); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; box-shadow: 0 2px 8px rgba(250,115,11,0.32); } @media (max-width: 880px) { .member-mobile-bar { display: flex; } body.member .member-mobile-toggle, body.purchase .member-mobile-toggle { display: none; } /* old bare toggle hidden — replaced by new bar */ body.member .main-content, body.purchase .main-content { padding-top: 24px; } /* less top padding because bar handles it */ } /* ════════════════════════════════════════════════════════════════════ FOOTER — structured redesign ════════════════════════════════════════════════════════════════════ */ .m-footer-pro { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--color-border-default); color: var(--color-text-secondary); font-size: 12px; } /* Top row: brand + theme/lang chips */ .m-footer-pro-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--color-border-subtle); } .m-footer-brand { display: flex; align-items: center; gap: 14px; } .m-footer-brand-logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--palette-navy-700) 0%, var(--palette-navy-900) 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(9,26,68,0.18); } .m-footer-brand-logo svg { width: 22px; height: 22px; fill: #fff; } .m-footer-brand-name { font-size: 14px; font-weight: 800; color: var(--color-brand-primary); letter-spacing: 0.4px; } .m-footer-brand-sub { font-size: 11px; color: var(--color-text-muted); font-weight: 500; } .m-footer-brand-sub a { color: var(--color-brand-primary); text-decoration: none; font-weight: 700; } .m-footer-brand-sub a:hover { color: var(--color-brand-primary-hover); } .m-footer-toggles-pro { display: flex; gap: 8px; flex-wrap: wrap; } .m-footer-toggles-pro .footer-chip { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 50px; padding: 8px 16px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.15s, color 0.15s, transform 0.1s; } .m-footer-toggles-pro .footer-chip:hover { border-color: var(--color-brand-primary); color: var(--color-text-primary); transform: translateY(-1px); } .m-footer-toggles-pro .footer-chip svg { width: 13px; height: 13px; fill: var(--color-text-secondary); } /* Middle row: link columns */ .m-footer-pro-mid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 22px 0; } .m-footer-col h5 { font-size: 10.5px; font-weight: 800; color: var(--color-brand-primary); text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 10px 0; } .m-footer-col ul { list-style: none; margin: 0; padding: 0; } .m-footer-col li { margin-bottom: 6px; } .m-footer-col a { color: var(--color-text-secondary); text-decoration: none; font-size: 12px; font-weight: 500; transition: color 0.15s; } .m-footer-col a:hover { color: var(--color-brand-primary); } /* Bottom row: copyright + ANPC */ .m-footer-pro-bot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 18px; border-top: 1px solid var(--color-border-subtle); padding-bottom: 4px; } .m-footer-copy { font-size: 11.5px; color: var(--color-text-muted); } .m-footer-anpc-pro { display: flex; gap: 8px; align-items: center; } .m-footer-anpc-pro a { display: inline-flex; align-items: center; background: var(--color-bg-surface); padding: 4px 8px; border-radius: 8px; border: 1px solid var(--color-border-default); transition: transform 0.1s, border-color 0.15s; } .m-footer-anpc-pro a:hover { transform: translateY(-1px); border-color: var(--color-brand-primary); } .m-footer-anpc-pro img { height: 28px; width: auto; display: block; } .m-footer-anpc-pro span.fallback { font-size: 9.5px; font-weight: 800; color: var(--color-text-muted); padding: 4px 10px; letter-spacing: 0.4px; text-transform: uppercase; } @media (max-width: 880px) { .m-footer-pro { margin-top: 36px; padding-top: 22px; } .m-footer-pro-top { flex-direction: column; align-items: flex-start; gap: 14px; } .m-footer-pro-mid { grid-template-columns: 1fr 1fr; gap: 22px; padding: 18px 0; } .m-footer-pro-bot { flex-direction: column; align-items: flex-start; } .m-footer-toggles-pro { width: 100%; } } @media (max-width: 480px) { .m-footer-pro-mid { grid-template-columns: 1fr; gap: 18px; } } /* ════════════════════════════════════════════════════════════════════ PROFILUL TAU — section (015-021) ════════════════════════════════════════════════════════════════════ */ /* Sub-tabs ABOVE the content card (horizontal scroll on mobile) */ .profile-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-surface); padding: 0 6px; border-radius: 14px 14px 0 0; box-shadow: var(--shadow-card-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .profile-tabs::-webkit-scrollbar { display: none; } .profile-tab { padding: 14px 18px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none; transition: color 0.15s, border-color 0.15s; white-space: nowrap; flex-shrink: 0; } .profile-tab:hover { color: var(--color-text-secondary); } .profile-tab.active { color: var(--color-brand-primary); border-bottom-color: var(--color-brand-primary); } .profile-card { background: var(--color-bg-surface); border-radius: 0 0 14px 14px; box-shadow: var(--shadow-card-sm); padding: 26px 28px; margin-bottom: 22px; } /* Info banner (callout) */ .profile-info-banner { background: #ebf6fc; border-left: 4px solid #4FA9DD; color: #14357f; padding: 14px 18px; border-radius: 8px; font-size: 13px; line-height: 1.55; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; } [data-theme="dark"] .profile-info-banner { background: rgba(79,169,221,0.10); color: #cfe6f7; } .profile-info-banner svg { width: 18px; height: 18px; fill: #4FA9DD; flex-shrink: 0; margin-top: 2px; } /* Profile form */ .profile-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; } .profile-field { display: flex; flex-direction: column; } .profile-label { font-size: 12px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; letter-spacing: 0.1px; } .profile-input, .profile-select { padding: 11px 14px; border: 1px solid var(--color-border-default); background: var(--color-bg-input); border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--color-text-primary); transition: border-color 0.15s, box-shadow 0.15s; width: 100%; box-sizing: border-box; } .profile-input[readonly], .profile-input.readonly { background: var(--color-bg-surface-alt); color: var(--color-text-secondary); cursor: default; } .profile-input:focus, .profile-select:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(250,115,11,0.16); } .profile-helper { font-size: 11px; color: var(--color-text-muted); margin-top: 5px; line-height: 1.4; } .profile-section-title { font-size: 14px; font-weight: 800; color: var(--color-brand-primary); text-transform: uppercase; letter-spacing: 0.5px; margin: 26px 0 16px 0; padding-top: 18px; border-top: 1px solid var(--color-border-subtle); } .profile-section-title:first-child { padding-top: 0; border-top: none; margin-top: 0; } .profile-checkbox { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0; cursor: pointer; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.5; } .profile-checkbox input[type="checkbox"] { margin-top: 2px; accent-color: var(--color-brand-primary); width: 16px; height: 16px; flex-shrink: 0; } .profile-checkbox a { color: var(--color-brand-primary); text-decoration: none; font-weight: 700; } .profile-checkbox a:hover { text-decoration: underline; } .profile-save-row { display: flex; justify-content: flex-end; margin-top: 18px; gap: 12px; } /* Communication settings */ .comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .comm-section h4 { font-size: 16px; font-weight: 800; color: var(--color-text-primary); margin: 0 0 12px 0; } .comm-section p { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 14px 0; } .comm-current-list { list-style: none; padding: 0; margin: 0 0 14px 0; } .comm-current-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 12.5px; color: var(--color-text-secondary); } .comm-current-list li:last-child { border-bottom: none; } .comm-status { font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; } .comm-status.accept { background: #d8f5b4; color: #1f5b30; } .comm-status.reject { background: #fde2e2; color: #c43a3a; } .comm-form-list { list-style: none; padding: 0; margin: 0; } .comm-form-list li { padding: 8px 0; font-size: 12.5px; color: var(--color-text-primary); } .comm-form-list li label { display: flex; align-items: center; gap: 10px; cursor: pointer; } .comm-important { background: var(--color-bg-surface-alt); padding: 14px 16px; border-radius: 8px; font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 22px; } .comm-important strong { color: var(--color-text-primary); } .comm-prose { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.6; margin-top: 18px; } .comm-prose h4 { font-size: 14px; font-weight: 800; color: var(--color-brand-primary); text-transform: uppercase; letter-spacing: 0.4px; margin: 22px 0 10px 0; } .comm-prose p { margin: 0 0 10px 0; } /* Invoice list (018) */ .invoice-list { background: transparent; } .invoice-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--color-border-subtle); transition: background 0.15s; background: var(--color-bg-surface); } .invoice-row:nth-child(even) { background: var(--color-bg-surface-alt); } .invoice-row:hover { background: rgba(250,115,11,0.06); } .invoice-row .info { flex: 1; min-width: 0; } .invoice-row .num { font-size: 13.5px; font-weight: 800; margin: 0 0 4px 0; } .invoice-row .meta { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.5; } .invoice-row .meta strong { color: var(--color-text-secondary); } /* Receipts (bonuri 019) */ .receipts-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 11px 22px; border-bottom: 1px solid var(--color-border-subtle); font-size: 12.5px; transition: background 0.15s; background: var(--color-bg-surface); } .receipts-row:nth-child(even) { background: var(--color-bg-surface-alt); } .receipts-row:hover { background: rgba(250,115,11,0.06); } .receipts-row .date { font-weight: 700; font-variant-numeric: tabular-nums; } .receipts-row .amt { text-align: right; font-weight: 700; color: var(--color-brand-primary); font-variant-numeric: tabular-nums; } /* Message list (020) */ .msg-row { display: flex; align-items: center; gap: 14px; padding: 11px 22px; border-bottom: 1px solid var(--color-border-subtle); font-size: 12.5px; transition: background 0.15s; background: var(--color-bg-surface); } .msg-row:nth-child(even) { background: var(--color-bg-surface-alt); } .msg-row:hover { background: rgba(250,115,11,0.06); cursor: pointer; } .msg-dot { width: 10px; height: 10px; border-radius: 50%; background: #2f7eb7; flex-shrink: 0; } .msg-row.read .msg-dot { background: #b0b8c4; } .msg-row .date { font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 92px; } .msg-row .text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-row.read .text { color: var(--color-text-muted); font-style: italic; } .msg-row .text strong { color: var(--color-text-primary); font-weight: 700; } .msg-row .extra { font-size: 10.5px; color: var(--color-text-muted); flex-shrink: 0; } /* Wallet (021) */ .wallet-card { background: var(--color-bg-surface); border-radius: 14px; box-shadow: var(--shadow-card-sm); overflow: hidden; } .wallet-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px 28px; background: linear-gradient(135deg, rgba(250,115,11,0.06) 0%, rgba(9,26,68,0.04) 100%); border-bottom: 1px solid var(--color-border-subtle); } .wallet-stat .lbl { font-size: 10.5px; font-weight: 800; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .wallet-stat .val { font-size: 22px; font-weight: 900; color: var(--color-brand-primary); line-height: 1; } .wallet-stat.plus .val { color: #1e9c66; } .wallet-stat.minus .val { color: #c43a3a; } .wallet-table { width: 100%; border-collapse: collapse; } .wallet-table th { background: var(--color-bg-surface-alt); text-align: left; padding: 12px 22px; font-size: 10.5px; font-weight: 800; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--color-border-default); } .wallet-table th.right, .wallet-table td.right { text-align: right; } .wallet-table td { padding: 12px 22px; border-bottom: 1px solid var(--color-border-subtle); font-size: 13px; vertical-align: top; } .wallet-table tr:last-child td { border-bottom: none; } .wallet-table tr:hover td { background: rgba(250,115,11,0.04); } .wallet-table td .det { font-size: 11.5px; color: var(--color-text-muted); margin-top: 3px; font-weight: 500; } .wallet-amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .wallet-amt.plus { color: #1e9c66; } .wallet-amt.minus { color: #c43a3a; } @media (max-width: 880px) { .profile-card { padding: 20px 18px; } .profile-form-grid { grid-template-columns: 1fr; } .comm-grid { grid-template-columns: 1fr; gap: 24px; } .invoice-row, .receipts-row, .msg-row { padding: 12px 14px; } .receipts-row { grid-template-columns: 1fr auto; gap: 14px; } .msg-row { gap: 10px; } .msg-row .date { min-width: 0; font-size: 11px; } .msg-row .text { white-space: normal; } .wallet-summary { grid-template-columns: 1fr; padding: 18px; gap: 12px; } .wallet-table { display: block; overflow-x: auto; white-space: nowrap; } .wallet-table td .det { white-space: normal; } } /* ════════════════════════════════════════════════════════════════════ DARK THEME — contrast & visibility fixes (QA sweep) ════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Schedule day headers — darken less than pure black so they distinguish from app bg */ --color-sched-day-head: #1f2538; } [data-theme="dark"] .sched-day-head { background: #1f2538; border-bottom: 1px solid rgba(255,255,255,0.05); } /* Dashboard info cards (light blue gradient) — adapt to dark navy translucent */ [data-theme="dark"] .dash-info { background: linear-gradient(135deg, rgba(70,140,210,0.12) 0%, rgba(40,80,160,0.18) 100%); border: 1px solid rgba(120,170,220,0.16); } [data-theme="dark"] .dash-info-title { color: #6db3df; border-bottom-color: rgba(109,179,223,0.20); } [data-theme="dark"] .dash-info p { color: rgba(207,230,247,0.85); } [data-theme="dark"] .dash-info-btn { background: #4FA9DD; color: #fff; } [data-theme="dark"] .dash-info-btn:hover { background: #5fb6e8; } /* Schedule warning/info text — brighter for dark */ [data-theme="dark"] .sched-class-warn, [data-theme="dark"] .sched-class-info { color: #ff7878; } /* Schedule class colors — slightly brighter for readability on dark */ [data-theme="dark"] .sched-class.cycling .sched-class-name, [data-theme="dark"] .sched-class.dance .sched-class-name { color: #ee7ec0; } [data-theme="dark"] .sched-class.aerobic .sched-class-name { color: #4dc99c; } [data-theme="dark"] .sched-class.lesmills .sched-class-name { color: #f5f7fb; } [data-theme="dark"] .sched-class.yoga .sched-class-name { color: #ffb84d; } [data-theme="dark"] .sched-class.pilates .sched-class-name { color: #ee7ec0; } /* REZERVA buttons in schedule — better dark variants */ [data-theme="dark"] .sched-class.cycling .sched-class-reserve, [data-theme="dark"] .sched-class.dance .sched-class-reserve, [data-theme="dark"] .sched-class.pilates .sched-class-reserve { background: #f9e94a; color: #6a3a72; } [data-theme="dark"] .sched-class.aerobic .sched-class-reserve { background: #4dc99c; color: #062611; } [data-theme="dark"] .sched-class.yoga .sched-class-reserve { background: #ffb84d; color: #2a1500; } [data-theme="dark"] .sched-class.lesmills .sched-class-reserve { background: #f5f7fb; color: #1a1a1a; } [data-theme="dark"] .sched-class.print .sched-class-reserve { background: rgba(255,255,255,0.12); color: #f5f7fb; } /* Soft blue pill button — readable in dark */ [data-theme="dark"] .btn-blue-soft-pill { background: rgba(79,169,221,0.18); color: #6db3df; } [data-theme="dark"] .btn-blue-soft-pill:hover { background: rgba(79,169,221,0.28); color: #9bcce8; } /* Dashboard section title "Vezi toate" right-link */ [data-theme="dark"] .dash-section-title .right-link { background: rgba(79,169,221,0.18); color: #6db3df; } [data-theme="dark"] .dash-section-title .right-link:hover { background: rgba(79,169,221,0.28); color: #9bcce8; } /* Active/Activ green badge in dashboard quicklinks (.qc-green badge) */ [data-theme="dark"] .dash-qpro-info .badge { background: var(--qbg, rgba(255,150,50,0.20)); color: var(--qcolor, #ffa052); } /* Dot status — make sure pulse is visible on dark */ [data-theme="dark"] .dash-qpro-info .dot { background: #4dc99c; box-shadow: 0 0 8px rgba(77,201,156,0.45); } /* Profile info banner — verify contrast */ [data-theme="dark"] .profile-info-banner { background: rgba(79,169,221,0.10); border-left-color: #6db3df; color: #cfe6f7; } [data-theme="dark"] .profile-info-banner svg { fill: #6db3df; } /* Profile section title — brand color is already orange, fine */ /* Profile readonly inputs — keep distinguishable */ [data-theme="dark"] .profile-input.readonly, [data-theme="dark"] .profile-input[readonly] { background: rgba(255,255,255,0.04); color: rgba(245,247,251,0.65); border-color: rgba(255,255,255,0.08); } /* Wallet summary gradient — adapt */ [data-theme="dark"] .wallet-summary { background: linear-gradient(135deg, rgba(255,150,50,0.08) 0%, rgba(70,140,210,0.06) 100%); } /* Sub-history border-left — softer in dark */ [data-theme="dark"] .sub-history-pro { border-left-color: #6db3df; } /* Comm status badges — already use bg/color but check dark contrast */ [data-theme="dark"] .comm-status.accept { background: rgba(60,200,140,0.18); color: #4dc99c; } [data-theme="dark"] .comm-status.reject { background: rgba(255,100,100,0.18); color: #ff7878; } /* Voucher/gift card warn callout — already has dark mode but verify text contrast */ [data-theme="dark"] .dash-act-pro-warn { background: rgba(255,180,80,0.10); border-left-color: #ffb84d; color: #ffd99a; } [data-theme="dark"] .dash-act-pro-warn svg { fill: #ffb84d; } /* Activity stat card — icon background gradient adapt */ [data-theme="dark"] .activity-stat-card .icon { background: linear-gradient(135deg, rgba(255,150,50,0.20) 0%, rgba(255,150,50,0.10) 100%); } [data-theme="dark"] .activity-stat-card .icon svg { fill: #ffa052; } /* Timeline pro: dot ring should pop on dark */ [data-theme="dark"] .timeline-pro-row::before { border-color: #ffa052; box-shadow: 0 0 0 4px rgba(255,150,50,0.16); } [data-theme="dark"] .timeline-pro-row .tl-tag { background: rgba(60,200,140,0.18); color: #4dc99c; } [data-theme="dark"] .timeline-pro-row .tl-loc svg { fill: #ffa052; } /* Subscription pro head gradient already navy — fine. Active badge: */ [data-theme="dark"] .sub-card-pro-head .sub-badge { box-shadow: 0 0 12px rgba(33,192,142,0.30); } /* Hub clipcard table — header row */ [data-theme="dark"] .hub-clip-table th { background: rgba(255,255,255,0.04); color: rgba(245,247,251,0.65); } /* History summary — make icon + value pop */ [data-theme="dark"] .history-summary { border-left-color: #ffa052; } /* Footer — make sure brand box stays prominent */ [data-theme="dark"] .m-footer-brand-logo { box-shadow: 0 4px 12px rgba(0,0,0,0.5); } /* ANPC fallback text — visible on dark */ [data-theme="dark"] .m-footer-anpc-pro a { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); } [data-theme="dark"] .m-footer-anpc-pro span.fallback { color: rgba(245,247,251,0.65); } /* News card "GYM CLOSED" caption + bg are inline, but generic .dash-news-cap */ [data-theme="dark"] .dash-news-cap { color: var(--color-text-primary); } /* ANPC images filter for dark - keep as is (they're brand) but lighten frame */ [data-theme="dark"] .m-footer-anpc-pro img { filter: brightness(0.95) contrast(1.05); } /* Empty rich box — radial gradients on dark should be lighter alpha */ [data-theme="dark"] .empty-rich::before { background: radial-gradient(circle, rgba(255,150,50,0.12) 0%, transparent 70%); } [data-theme="dark"] .empty-rich::after { background: radial-gradient(circle, rgba(120,170,220,0.10) 0%, transparent 70%); } [data-theme="dark"] .empty-rich-illu { background: linear-gradient(135deg, rgba(255,150,50,0.18) 0%, rgba(120,170,220,0.12) 100%); } [data-theme="dark"] .empty-rich-illu svg { fill: #ffa052; } [data-theme="dark"] .empty-rich-illu::after { border-color: rgba(255,150,50,0.30); } /* Floating action chips & footer chips */ [data-theme="dark"] .footer-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: rgba(245,247,251,0.85); } [data-theme="dark"] .footer-chip:hover { background: rgba(255,255,255,0.10); border-color: var(--color-brand-primary); color: #fff; } [data-theme="dark"] .footer-chip svg { fill: rgba(245,247,251,0.65); } /* Member mobile bar avatar — keep prominent */ [data-theme="dark"] .member-mobile-bar-avatar { box-shadow: 0 2px 12px rgba(255,150,50,0.45); } /* Profile checkbox — brand orange accent already auto */ /* CTA orange buttons — fine */ /* ════════════════════════════════════════════════════════════════════ DASHBOARD QUICKLINKS — REFINEMENT (revert rainbow, keep polish) Override the qc-* color tokens with brand orange uniformly. ════════════════════════════════════════════════════════════════════ */ .dash-qpro, .dash-qpro.qc-blue, .dash-qpro.qc-purple, .dash-qpro.qc-green, .dash-qpro.qc-orange, .dash-qpro.qc-pink, .dash-qpro.qc-amber, .dash-qpro.qc-teal, .dash-qpro.qc-red { --qcolor: var(--color-brand-primary); --qbg: rgba(250,115,11,0.10); } [data-theme="dark"] .dash-qpro, [data-theme="dark"] .dash-qpro.qc-blue, [data-theme="dark"] .dash-qpro.qc-purple, [data-theme="dark"] .dash-qpro.qc-green, [data-theme="dark"] .dash-qpro.qc-orange, [data-theme="dark"] .dash-qpro.qc-pink, [data-theme="dark"] .dash-qpro.qc-amber, [data-theme="dark"] .dash-qpro.qc-teal, [data-theme="dark"] .dash-qpro.qc-red { --qcolor: #ffa052; --qbg: rgba(255,150,50,0.18); } /* Title in brand color, sub in muted (matches original mockup) */ .dash-qpro-title { color: var(--color-brand-primary); font-size: 14px; font-weight: 800; } .dash-qpro-info { font-size: 11.5px; font-weight: 500; color: var(--color-text-muted); } /* Hide accent left bar — too noisy now that all are orange */ .dash-qpro::before { display: none; } /* Slightly rounder card with hover glow instead of bar growth */ .dash-qpro { padding: 18px 20px; border: 1px solid var(--color-border-subtle); } .dash-qpro:hover { border-color: rgba(250,115,11,0.28); box-shadow: 0 6px 22px rgba(250,115,11,0.10); transform: translateY(-2px); } /* Smaller arrow, always-visible (subtle), grows on hover */ .dash-qpro-arrow { opacity: 0.35; transform: translateX(0); } .dash-qpro:hover .dash-qpro-arrow { opacity: 1; transform: translateX(2px); } /* ════════════════════════════════════════════════════════════════════ ACTIVITATEA TA — extended timeline rows (022/023/024) ════════════════════════════════════════════════════════════════════ */ .timeline-pro-row .tl-detail { flex: 1; min-width: 0; } .timeline-pro-row .tl-detail .name { font-size: 14px; font-weight: 800; color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; } .timeline-pro-row .tl-detail .meta { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.5; } .timeline-pro-row .tl-detail .meta strong { color: var(--color-text-primary); font-weight: 700; } .timeline-pro-row .tl-tag.danger { background: #fde2e2; color: #c43a3a; } [data-theme="dark"] .timeline-pro-row .tl-tag.danger { background: rgba(255,100,100,0.18); color: #ff7878; } .timeline-pro-row .tl-tag.info { background: rgba(79,169,221,0.16); color: #2f7eb7; } [data-theme="dark"] .timeline-pro-row .tl-tag.info { background: rgba(109,179,223,0.18); color: #6db3df; } /* Penalty timeline — red dot ring */ .timeline-pro.danger::before { background: linear-gradient(180deg, #c43a3a 0%, transparent 100%); } .timeline-pro.danger .timeline-pro-row::before { border-color: #c43a3a; box-shadow: 0 0 0 4px rgba(196,58,58,0.12); } [data-theme="dark"] .timeline-pro.danger .timeline-pro-row::before { border-color: #ff7878; box-shadow: 0 0 0 4px rgba(255,120,120,0.16); } /* ════════════════════════════════════════════════════════════════════ CLIPCARDURI — istoric variant (expired services) ════════════════════════════════════════════════════════════════════ */ .clipcard-tile.expired { opacity: 0.85; } .clipcard-tile.expired .accent-bar { background: linear-gradient(180deg, #6b7384 0%, #9aa3b3 100%); } .clipcard-tile.expired .clipcard-units-num { color: #6b7384; } .clipcard-tile.expired .clipcard-tile-name { color: var(--color-text-secondary); } [data-theme="dark"] .clipcard-tile.expired .accent-bar { background: linear-gradient(180deg, #5a6478 0%, #8089a0 100%); } [data-theme="dark"] .clipcard-tile.expired .clipcard-units-num { color: #8089a0; } .clipcard-expired-tag { background: var(--color-bg-surface-muted); color: var(--color-text-muted); font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid var(--color-border-default); margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; } [data-theme="dark"] .clipcard-expired-tag { background: rgba(255,255,255,0.04); color: rgba(245,247,251,0.55); } /* ════════════════════════════════════════════════════════════════════ DETAIL PAGES (026 class, 027 instructor, 028 trainer) + improved people-filter (005/006/007) ════════════════════════════════════════════════════════════════════ */ /* People filter — pro layout */ .people-filter-pro { background: var(--color-bg-surface); border-radius: 14px; padding: 18px 22px; margin-bottom: 22px; box-shadow: var(--shadow-card-sm); display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; } .people-filter-pro .field { display: flex; flex-direction: column; gap: 6px; } .people-filter-pro label { font-size: 11px; font-weight: 800; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .people-filter-pro select, .people-filter-pro input { padding: 11px 14px; border-radius: 8px; border: 1px solid var(--color-border-default); background: var(--color-bg-input); font-family: inherit; font-size: 13px; color: var(--color-text-primary); box-sizing: border-box; width: 100%; transition: border-color 0.15s, box-shadow 0.15s; } .people-filter-pro select:focus, .people-filter-pro input:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(250,115,11,0.16); } .people-filter-pro .search-input-wrap { position: relative; } .people-filter-pro .search-input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; fill: var(--color-text-muted); pointer-events: none; } .people-filter-pro .search-input-wrap input { padding-left: 36px; } .people-filter-pro .btn-search { height: 44px; padding: 0 24px; border-radius: 8px; background: var(--color-brand-primary); color: var(--color-btn-app); border: none; font-family: inherit; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.15s, transform 0.1s; } .people-filter-pro .btn-search:hover { background: var(--color-brand-primary-hover); transform: translateY(-1px); } .people-filter-pro .btn-search svg { width: 13px; height: 13px; fill: #fff; } /* Detail page hero (class / instructor) */ .detail-hero { display: grid; grid-template-columns: 320px 1fr; gap: 28px; background: var(--color-bg-surface); border-radius: 14px; padding: 24px; margin-bottom: 22px; box-shadow: var(--shadow-card-sm); } .detail-hero.trainer { grid-template-columns: 220px 1fr; } .detail-hero-img-wrap { width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #1a1a1a 0%, #2a2e35 100%); position: relative; } .detail-hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .detail-hero-body { display: flex; flex-direction: column; } .detail-hero-title { font-size: 22px; font-weight: 800; color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 6px 0; line-height: 1.2; } .detail-hero-subtitle { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 14px 0; line-height: 1.5; } .detail-hero-section { margin-top: 12px; } .detail-hero-section h4 { font-size: 14px; font-weight: 800; color: var(--color-brand-primary); margin: 0 0 6px 0; text-transform: uppercase; letter-spacing: 0.3px; } .detail-hero-section p, .detail-hero-section .text { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 6px 0; } .detail-hero-section ul { list-style: none; padding: 0; margin: 0; } .detail-hero-section ul li { font-size: 12.5px; color: var(--color-text-secondary); padding: 3px 0; } .detail-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .detail-hero-tag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 50px; font-size: 11.5px; font-weight: 800; color: #fff; text-transform: capitalize; letter-spacing: 0.2px; } .detail-hero-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.85); } .detail-hero-tag.green { background: #21c08e; } .detail-hero-tag.orange { background: var(--color-brand-primary); } .detail-hero-tag.blue { background: #2f7eb7; } .detail-hero-tag.teal { background: #0d9488; } .detail-hero-tag.purple { background: #7d4ec5; } /* Sessions list under detail hero */ .detail-sessions-title { font-size: 16px; font-weight: 800; color: var(--color-text-primary); margin: 22px 0 14px 0; } .detail-session-row { background: var(--color-bg-surface); border-radius: 12px; padding: 16px 22px; margin-bottom: 10px; display: flex; align-items: center; gap: 18px; border-left: 4px solid #21c08e; box-shadow: var(--shadow-card-sm); transition: transform 0.15s, box-shadow 0.15s; } .detail-session-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-md); } .detail-session-row .info { flex: 1; min-width: 0; } .detail-session-name { font-size: 13px; font-weight: 800; color: #21c08e; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .detail-session-meta { font-size: 12px; color: var(--color-text-secondary); line-height: 1.65; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; } .detail-session-meta .pair { display: flex; align-items: center; gap: 6px; } .detail-session-meta svg { width: 12px; height: 12px; fill: var(--color-brand-primary); flex-shrink: 0; } .detail-session-meta strong { color: var(--color-text-primary); font-weight: 700; } .detail-session-row .actions { flex-shrink: 0; } [data-theme="dark"] .detail-hero-img-wrap { background: linear-gradient(135deg, #2a2e35 0%, #1a1d24 100%); } [data-theme="dark"] .detail-hero-tag.green { background: #34d39a; } [data-theme="dark"] .detail-hero-tag.blue { background: #4d99cc; } [data-theme="dark"] .detail-session-name { color: #4dc99c; } [data-theme="dark"] .detail-session-row { border-left-color: #4dc99c; } .btn-green-pill { display: inline-flex; align-items: center; gap: 6px; padding: 11px 26px; border-radius: 50px; background: #21c08e; color: #fff; text-decoration: none; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; border: none; cursor: pointer; transition: background 0.15s, transform 0.1s; } .btn-green-pill:hover { background: #1ba879; transform: translateY(-1px); } [data-theme="dark"] .btn-green-pill { background: #34d39a; color: #052618; } [data-theme="dark"] .btn-green-pill:hover { background: #5fde9c; } /* PT services (028) */ .pt-club-select-row { background: var(--color-bg-surface); border-radius: 12px; padding: 16px 22px; margin-bottom: 14px; box-shadow: var(--shadow-card-sm); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pt-club-select-row .lbl { font-size: 12.5px; color: var(--color-text-secondary); font-weight: 600; } .pt-service-row { background: var(--color-bg-surface); border-radius: 12px; padding: 18px 24px; margin-bottom: 10px; display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; box-shadow: var(--shadow-card-sm); } .pt-service-name { font-size: 14px; font-weight: 800; color: var(--color-text-primary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; } .pt-service-meta { font-size: 12px; color: var(--color-text-secondary); line-height: 1.65; display: grid; grid-template-columns: 1fr; gap: 2px; } .pt-service-meta .pair { display: flex; align-items: center; gap: 6px; } .pt-service-meta svg { width: 12px; height: 12px; fill: var(--color-brand-primary); flex-shrink: 0; } .pt-service-price { text-align: right; min-width: 130px; } .pt-service-price .ron { font-size: 19px; font-weight: 900; color: var(--color-brand-primary); line-height: 1.1; white-space: nowrap; } .pt-service-price .eur { font-size: 11.5px; color: var(--color-text-muted); margin-top: 3px; } @media (max-width: 880px) { .people-filter-pro { grid-template-columns: 1fr; } .people-filter-pro .btn-search { width: 100%; justify-content: center; } .detail-hero, .detail-hero.trainer { grid-template-columns: 1fr; gap: 18px; padding: 18px; } .detail-hero-img-wrap { max-width: 360px; aspect-ratio: 16/10; } .detail-session-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; } .detail-session-row .actions { width: 100%; } .btn-green-pill { width: 100%; justify-content: center; } .detail-session-meta { grid-template-columns: 1fr; } .pt-service-row { grid-template-columns: 1fr; gap: 12px; } .pt-service-price { text-align: left; } } /* ════════════════════════════════════════════════════════════════════ THEME PORTABILITY — neutralize light-blue accents The skin uses NAVY (brand-accent) + ORANGE (brand-primary). Avoid arbitrary cyan/light-blue tints that wouldn't translate to a yellow/red/green-branded skin. ════════════════════════════════════════════════════════════════════ */ /* ─── dash-info cards (Rezervă acces / Grad ocupare) ─── */ /* light: neutral surface card with brand-orange accent on the title bar */ .dash-info { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-card-sm); } .dash-info-title { color: var(--color-text-primary); border-bottom-color: var(--color-border-subtle); } .dash-info-title svg { fill: var(--color-brand-primary); } .dash-info p { color: var(--color-text-secondary); } .dash-info-btn { background: var(--color-brand-primary); color: #fff; } .dash-info-btn:hover { background: var(--color-brand-primary-hover); } [data-theme="dark"] .dash-info { background: var(--color-bg-surface); border-color: var(--color-border-default); } [data-theme="dark"] .dash-info-title { color: var(--color-text-primary); } [data-theme="dark"] .dash-info-title svg { fill: var(--color-brand-primary); } [data-theme="dark"] .dash-info p { color: var(--color-text-secondary); } [data-theme="dark"] .dash-info-btn { background: var(--color-brand-primary); color: #fff; } /* ─── Corporate banner: keep navy (brand-accent) but button → orange ─── */ .dash-corp-btn { background: var(--color-brand-primary); color: #fff; } .dash-corp-btn:hover { background: var(--color-brand-primary-hover); } /* ─── btn-blue-soft-pill — soft brand-primary instead of light blue ─── */ .btn-blue-soft-pill { background: rgba(250,115,11,0.10); color: var(--color-brand-primary); } .btn-blue-soft-pill:hover { background: rgba(250,115,11,0.18); color: var(--color-brand-primary-hover); } [data-theme="dark"] .btn-blue-soft-pill { background: rgba(255,150,50,0.14); color: #ffa052; } [data-theme="dark"] .btn-blue-soft-pill:hover { background: rgba(255,150,50,0.24); color: #ffb56c; } /* ─── btn-blue-pill (filled blue) → brand orange ─── */ .btn-blue-pill { background: var(--color-brand-primary); color: #fff; } .btn-blue-pill:hover { background: var(--color-brand-primary-hover); } [data-theme="dark"] .btn-blue-pill { background: var(--color-brand-primary); color: #fff; } /* ─── Dashboard "Vezi toate" right-link (was light blue) ─── */ .dash-section-title .right-link { background: rgba(250,115,11,0.10); color: var(--color-brand-primary); } .dash-section-title .right-link:hover { background: rgba(250,115,11,0.18); color: var(--color-brand-primary-hover); } [data-theme="dark"] .dash-section-title .right-link { background: rgba(255,150,50,0.14); color: #ffa052; } [data-theme="dark"] .dash-section-title .right-link:hover { background: rgba(255,150,50,0.24); color: #ffb56c; } /* ─── profile-info-banner (was light blue) → brand-accent navy + orange icon ─── */ .profile-info-banner { background: var(--color-bg-surface-alt); border-left: 4px solid var(--color-brand-primary); color: var(--color-text-primary); } .profile-info-banner svg { fill: var(--color-brand-primary); } [data-theme="dark"] .profile-info-banner { background: var(--color-bg-surface-alt); border-left-color: var(--color-brand-primary); color: var(--color-text-primary); } [data-theme="dark"] .profile-info-banner svg { fill: var(--color-brand-primary); } /* ─── sub-history-pro left border, history-summary border → brand-primary ─── */ .sub-history-pro { border-left-color: var(--color-text-muted); } [data-theme="dark"] .sub-history-pro { border-left-color: rgba(255,255,255,0.15); } .history-summary { border-left-color: var(--color-brand-primary); } /* ─── timeline-pro tl-tag.info → orange tint ─── */ .timeline-pro-row .tl-tag.info { background: rgba(250,115,11,0.12); color: var(--color-brand-primary); } [data-theme="dark"] .timeline-pro-row .tl-tag.info { background: rgba(255,150,50,0.18); color: #ffa052; } /* ─── Clipcard trainer link "Antrenamente cu" (was blue) → orange ─── */ .clipcard-trainer a { color: var(--color-brand-primary); } .clipcard-trainer a:hover { color: var(--color-brand-primary-hover); } [data-theme="dark"] .clipcard-trainer a { color: #ffa052; } [data-theme="dark"] .clipcard-trainer a:hover { color: #ffb56c; } .clip-meta a { color: var(--color-brand-primary); } [data-theme="dark"] .clip-meta a { color: #ffa052; } /* ─── Footer brand sub link "UPfit.cloud" already uses brand-primary, OK ─── */ /* ─── Wallet plus/minus stay (semantic success/danger), OK ─── */ /* ─── m-tab active underline (already brand-primary) ─── */ /* ─── Detail page session-row border-left (was green) ─── */ /* This is a SEMANTIC "available booking" color (green). Keep but tone down in dark so it doesn't dominate. Green is universal-success, not "blue brand". */ /* ─── m-tab.active (orange underline, fine) ─── */ /* ─── Profile section title (orange, fine) ─── */ /* ─── Dash-info stat colors (was navy text on light blue bg) — handled above ─── */ /* ─── Detail-hero-tag colors are CONTENT taxonomy (Beginner / Cycling / Flexibility / Endurance / Build strength). These map to fitness categories, not brand. Keep diverse. ─── */ /* ─── Comm-status accept (green) / reject (red) — semantic, keep ─── */ /* ─── Sub-card-pro-head navy gradient — that IS brand-accent, keep ─── */ /* ─── PT-service-price (RON in orange) — already brand, keep ─── */ /* ─── PT service "Vezi detalii" link in 028 was inline blue ─── */ /* The inline style uses #2f7eb7 — replace with brand orange via override */ /* Cannot override inline; will fix in partial. */ /* Mesaje status dot — was #2f7eb7 (blue). Brand-primary for unread */ .msg-dot { background: var(--color-brand-primary); } .msg-row.read .msg-dot { background: #b0b8c4; } [data-theme="dark"] .msg-dot { background: var(--color-brand-primary); box-shadow: 0 0 6px rgba(250,115,11,0.45); } [data-theme="dark"] .msg-row.read .msg-dot { background: rgba(255,255,255,0.20); box-shadow: none; } /* sub-link-orange already orange, OK */ /* sub-validity-dates arrow already orange via .arrow rule */ /* Hub-clip-buy-box already orange gradient, OK */ /* Activity stat icons in dark uses orange gradient — confirmed already brand */ /* Mobile bar — navy gradient is brand-accent, keep */ /* Detail-hero-tag.blue/teal/purple — content categories. These don't translate to "brand color swap" — they represent fitness categories which exist regardless of brand. Keep. */ /* ════════════════════════════════════════════════════════════════════ BATCH 2 — pages from preview-pagini-interior-2 Auth flow, reset PIN, Antrenamente online, Grad ocupare, Rezervă acces, Carduri cadou, Paginare ════════════════════════════════════════════════════════════════════ */ /* ─── Voucher details info-box ─── */ .voucher-info { background: #ebf2ff; border-left: 4px solid #4FA9DD; border-radius: 8px; padding: 22px 26px; margin: 18px 0; } [data-theme="dark"] .voucher-info { background: rgba(79,169,221,0.10); border-left-color: #6db3df; } .voucher-info-title { text-align: center; font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin: 0 0 14px 0; padding-bottom: 14px; border-bottom: 1px solid rgba(79,169,221,0.20); } .voucher-info-title svg { width: 16px; height: 16px; vertical-align: -2px; margin-right: 6px; fill: var(--color-brand-primary); } .voucher-info-title strong { color: var(--color-brand-primary); } .voucher-info-line { text-align: center; font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; margin: 4px 0; } .voucher-info-line strong { color: var(--color-text-primary); font-weight: 700; } .voucher-info-note { text-align: center; font-size: 12px; color: var(--color-text-muted); margin-top: 14px; font-style: italic; } .voucher-info-note svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; fill: currentColor; } /* Voucher promo image (003) */ .voucher-promo { background: var(--color-bg-surface); border-radius: 14px; overflow: hidden; margin-bottom: 18px; box-shadow: var(--shadow-card-sm); } .voucher-promo-img { width: 100%; height: auto; display: block; } /* Auth/voucher form labels & inputs (reuse v4) */ .v2-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin-bottom: 14px; } .v2-form-grid .full { grid-column: 1 / -1; } .v2-form-field { display: flex; flex-direction: column; gap: 6px; } .v2-form-field label { font-size: 12.5px; font-weight: 700; color: var(--color-text-primary); } .v2-form-field input, .v2-form-field select { padding: 11px 14px; border-radius: 8px; border: 1px solid var(--color-border-default); background: var(--color-bg-input); font-family: inherit; font-size: 13px; color: var(--color-text-primary); box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .v2-form-field input:focus, .v2-form-field select:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px rgba(250,115,11,0.16); } .v2-form-field .helper { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; } .v2-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .v2-form-back { background: transparent; border: 1px solid var(--color-border-default); color: var(--color-text-secondary); padding: 11px 22px; border-radius: 50px; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; text-transform: capitalize; display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.15s, color 0.15s; } .v2-form-back:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); } /* Alert banners (full-width colored card) */ .alert-banner { border-radius: 10px; padding: 18px 22px; color: #fff; margin-bottom: 18px; } .alert-banner.success { background: #21c08e; } .alert-banner.error { background: #c43a3a; } .alert-banner-title { font-size: 16px; font-weight: 700; margin: 0 0 6px 0; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.25); } .alert-banner p { font-size: 13px; line-height: 1.5; margin: 0; color: rgba(255,255,255,0.95); } /* reCAPTCHA placeholder */ .recaptcha-placeholder { background: var(--color-bg-surface-alt); border: 1px solid var(--color-border-default); border-radius: 6px; padding: 14px 18px; display: inline-flex; align-items: center; gap: 12px; margin: 14px 0; } .recaptcha-placeholder .check { width: 22px; height: 22px; border: 2px solid var(--color-border-default); border-radius: 4px; background: var(--color-bg-surface); flex-shrink: 0; } .recaptcha-placeholder .text { font-size: 13px; font-weight: 600; color: var(--color-text-primary); } .recaptcha-placeholder .info { font-size: 9px; color: var(--color-text-muted); margin-left: 14px; } /* ─── Antrenamente online — section grids ─── */ .online-section { margin-bottom: 26px; } .online-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .online-section-title { font-size: 22px; font-weight: 800; color: var(--color-brand-primary); margin: 0; } .online-section-title small { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); display: block; margin-top: 4px; } .online-section-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--color-brand-primary); color: #fff; padding: 9px 18px; border-radius: 50px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; text-decoration: none; transition: background 0.15s; } .online-section-cta:hover { background: var(--color-brand-primary-hover); } .online-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .online-card { position: relative; background: #1a1a1a; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; text-decoration: none; color: #fff; box-shadow: var(--shadow-card-sm); transition: transform 0.15s, box-shadow 0.15s; } .online-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-md); } .online-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .online-card-lock { position: absolute; top: 12px; right: 14px; width: 16px; height: 16px; fill: rgba(255,255,255,0.85); } .online-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(250,115,11,0.45); } .online-card-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; } .online-card-cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.78); color: #fff; font-size: 13px; font-weight: 600; padding: 12px 16px; } /* Antrenamente online HERO banner (overview page 006) */ .online-hero { position: relative; background: linear-gradient(135deg, #f5a72a 0%, var(--color-brand-primary) 60%); border-radius: 16px; padding: 36px 36px 36px; color: #fff; margin-bottom: 28px; overflow: hidden; min-height: 200px; } .online-hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%); pointer-events: none; } .online-hero h2 { font-size: 26px; font-weight: 800; margin: 0 0 10px 0; color: #fff; line-height: 1.2; position: relative; z-index: 1; } .online-hero p { font-size: 13.5px; line-height: 1.55; max-width: 640px; color: rgba(255,255,255,0.92); margin: 0; position: relative; z-index: 1; } /* ─── Video player page (008) ─── */ .video-player-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; margin-bottom: 28px; } .video-player-frame { background: #000; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; position: relative; box-shadow: var(--shadow-card-sm); } .video-player-frame img { width: 100%; height: 100%; object-fit: cover; } .video-player-frame .play-big { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: var(--color-brand-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 32px rgba(250,115,11,0.5); } .video-player-frame .play-big svg { width: 32px; height: 32px; fill: #fff; margin-left: 4px; } .video-player-frame .controls { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); padding: 18px 18px 12px; display: flex; align-items: center; gap: 14px; color: #fff; font-size: 13px; } .video-player-frame .controls .timeline { flex: 1; height: 4px; background: rgba(255,255,255,0.25); border-radius: 2px; overflow: hidden; } .video-player-frame .controls .timeline-fill { height: 100%; width: 35%; background: var(--color-brand-primary); } .video-player-frame .title-overlay { position: absolute; left: 22px; bottom: 60px; color: #fff; font-size: 28px; font-weight: 900; letter-spacing: 0.5px; pointer-events: none; } .video-player-side { background: var(--color-bg-surface); border-radius: 14px; box-shadow: var(--shadow-card-sm); padding: 22px 24px; } .video-player-side p { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 16px 0; } .video-player-side .meta-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 12.5px; } .video-player-side .meta-row:last-of-type { border-bottom: none; } .video-player-side .meta-row .lbl { font-weight: 700; color: var(--color-text-primary); } .video-player-side .meta-row .val { color: var(--color-text-secondary); } .video-player-side .back-btn { margin-top: 18px; width: 100%; text-align: center; background: var(--color-brand-primary); color: #fff; border: none; padding: 12px 18px; border-radius: 50px; font-family: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.1s; } .video-player-side .back-btn:hover { background: var(--color-brand-primary-hover); transform: translateY(-1px); } /* ─── Grad ocupare cluburi (009) ─── */ .occupancy-section { margin-bottom: 22px; } .occupancy-section-title { font-size: 18px; font-weight: 800; color: var(--color-text-primary); margin: 0 0 12px 0; } .occupancy-row { display: flex; align-items: center; gap: 16px; background: #e6f8ee; border-radius: 12px; padding: 16px 22px; margin-bottom: 8px; box-shadow: var(--shadow-card-sm); } [data-theme="dark"] .occupancy-row { background: rgba(60,200,140,0.08); border: 1px solid rgba(60,200,140,0.20); } .occupancy-row.medium { background: #fff5e6; } .occupancy-row.high { background: #fde2e2; } [data-theme="dark"] .occupancy-row.medium { background: rgba(255,180,80,0.10); border-color: rgba(255,180,80,0.20); } [data-theme="dark"] .occupancy-row.high { background: rgba(255,100,100,0.10); border-color: rgba(255,100,100,0.20); } .occupancy-status { width: 32px; height: 32px; border-radius: 50%; background: #21c08e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .occupancy-status svg { width: 14px; height: 14px; fill: #fff; } .occupancy-row.medium .occupancy-status { background: #f49725; } .occupancy-row.high .occupancy-status { background: #c43a3a; } .occupancy-info { flex: 1; min-width: 0; } .occupancy-name { font-size: 14px; font-weight: 800; color: var(--color-text-primary); margin-bottom: 4px; } .occupancy-meta { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; } .occupancy-meta .icon { width: 11px; height: 11px; fill: var(--color-text-muted); vertical-align: -1px; margin-right: 4px; } .occupancy-meta strong { color: var(--color-text-primary); } .occupancy-message { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 6px; font-style: italic; } /* ─── Rezervă acces formular (010) ─── */ .reserve-card { background: var(--color-bg-surface); border-radius: 14px; box-shadow: var(--shadow-card-sm); padding: 26px 28px; margin-bottom: 18px; } .reserve-card .rules { background: var(--color-bg-surface-alt); border-radius: 8px; padding: 16px 20px; margin-bottom: 22px; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.6; } .reserve-card .rules ul { margin: 8px 0 0 0; padding-left: 18px; } .reserve-card .rules li { margin-bottom: 4px; } .reserve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; margin-top: 16px; } .reserve-grid .full { grid-column: 1 / -1; } .reserve-grid label { font-size: 12.5px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; display: block; text-align: center; } .reserve-grid input, .reserve-grid select { padding: 11px 14px; border-radius: 8px; border: 1px solid var(--color-border-default); background: var(--color-bg-input); font-family: inherit; font-size: 13px; color: var(--color-text-primary); box-sizing: border-box; width: 100%; } /* ─── Carduri cadou (014-016) ─── */ .gift-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; } .gift-card-action { background: var(--color-bg-surface); border-radius: 14px; padding: 22px 26px; box-shadow: var(--shadow-card-sm); } .gift-card-action h3 { font-size: 14px; font-weight: 800; color: var(--color-brand-primary); text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 12px 0; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-subtle); display: flex; align-items: center; gap: 8px; } .gift-card-action h3 svg { width: 16px; height: 16px; fill: currentColor; } .gift-card-action p { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 12px 0; } /* Empty CTA - "Nu ai carduri cadou!" */ .gift-empty-msg { text-align: center; padding: 38px 24px; background: var(--color-bg-surface); border-radius: 14px; box-shadow: var(--shadow-card-sm); margin-bottom: 18px; } .gift-empty-msg-icon { width: 48px; height: 48px; margin: 0 auto 10px; color: var(--color-brand-primary); } .gift-empty-msg-icon svg { width: 100%; height: 100%; fill: currentColor; } .gift-empty-msg-text { font-size: 18px; font-weight: 700; color: var(--color-brand-primary); margin: 0 0 4px 0; } .gift-empty-msg-sub { font-size: 13px; color: var(--color-text-secondary); } /* Gift card item with photo (015/016) */ .gift-card-item { background: var(--color-bg-surface); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card-sm); } .gift-card-item-img { width: 100%; aspect-ratio: 16 / 11; background: linear-gradient(135deg, #d8359a 0%, #f49725 100%); display: flex; align-items: center; justify-content: center; position: relative; color: #fff; } .gift-card-item-img .value { position: absolute; top: 18px; right: 18px; background: rgba(0,0,0,0.30); color: #fff; padding: 6px 14px; border-radius: 50px; font-size: 13px; font-weight: 800; } .gift-card-item-img .badge { position: absolute; top: 18px; left: 18px; background: var(--color-brand-primary); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; } .gift-card-item-img h3 { font-size: 22px; font-weight: 900; color: #fff; text-align: center; margin: 0; padding: 0 24px; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,0.30); } .gift-card-item-code { padding: 14px 20px; font-size: 14px; font-weight: 800; color: var(--color-text-primary); letter-spacing: 0.4px; text-transform: uppercase; background: var(--color-bg-surface-muted); } /* Success banner after card add (016) */ .gift-add-banner { background: linear-gradient(135deg, #21c08e 0%, #1ba879 100%); color: #fff; border-radius: 12px; padding: 16px 22px; font-size: 13.5px; line-height: 1.5; margin-bottom: 18px; font-weight: 600; } .gift-add-banner strong { font-weight: 800; } /* ─── Pagination component (017) ─── */ .m-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 24px 0 12px; flex-wrap: wrap; } .m-pagination a, .m-pagination span.dots { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--color-text-secondary); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); transition: background 0.15s, color 0.15s, border-color 0.15s; } .m-pagination a:hover { background: rgba(250,115,11,0.10); color: var(--color-brand-primary); border-color: var(--color-brand-primary); } .m-pagination a.active { background: var(--color-brand-primary); color: #fff; border-color: var(--color-brand-primary); } .m-pagination .nav { width: auto; padding: 0 14px; gap: 6px; } .m-pagination .nav svg { width: 11px; height: 11px; fill: currentColor; } .m-pagination span.dots { border: none; background: transparent; cursor: default; } .m-pagination-info { text-align: center; font-size: 11.5px; color: var(--color-text-muted); margin-bottom: 12px; } /* Mobile responsive */ @media (max-width: 880px) { .v2-form-grid { grid-template-columns: 1fr; } .reserve-grid { grid-template-columns: 1fr; } .gift-grid-2 { grid-template-columns: 1fr; } .online-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .video-player-grid { grid-template-columns: 1fr; } .occupancy-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; } .online-section-head { flex-direction: column; align-items: flex-start; gap: 10px; } .alert-banner { padding: 14px 16px; } .video-player-frame .title-overlay { font-size: 18px; bottom: 40px; left: 14px; } .voucher-info { padding: 16px 18px; } } @media (max-width: 480px) { .online-grid { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════ ════ BATCH 2 ADD-ON ═══ (page_2_001 → 016) Voucher flow / Reset PIN / Antrenamente online / Grad ocupare / Rezervă acces / Carduri cadou / Pagination ════════════════════════ */ /* — Buttons additional variants — */ .btn-ghost-pill { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 50px; background: transparent; color: var(--color-text-primary); text-decoration: none; border: 1.5px solid var(--color-border-default); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; } .btn-ghost-pill:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); background: rgba(250,115,11,0.06); } .btn-ghost-pill svg { width: 13px; height: 13px; fill: currentColor; } .btn-soft-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 50px; background: rgba(250,115,11,0.10); color: var(--color-brand-primary); text-decoration: none; border: 1.5px solid rgba(250,115,11,0.20); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; } .btn-soft-pill:hover { background: rgba(250,115,11,0.18); border-color: var(--color-brand-primary); } /* — Form helpers — */ .form-section-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-text-primary); margin: 0 0 14px 0; padding-bottom: 8px; border-bottom: 1.5px solid var(--color-border-default); } .gdpr-block { padding: 16px 18px; background: var(--color-bg-surface-alt, rgba(0,0,0,0.02)); border: 1px solid var(--color-border-default); border-radius: 12px; } [data-theme="dark"] .gdpr-block { background: rgba(255,255,255,0.03); } .check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--color-text-secondary); cursor: pointer; } .check-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--color-brand-primary); cursor: pointer; } /* — Alert banner variants — */ .alert-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 12px; } .alert-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; fill: currentColor; } .alert-banner.alert-info { background: rgba(79, 169, 221, 0.10); border: 1px solid rgba(79, 169, 221, 0.25); color: var(--color-text-primary); } .alert-banner.alert-info svg { fill: #4FA9DD; } .alert-banner.alert-success { background: rgba(33, 192, 142, 0.10); border: 1px solid rgba(33, 192, 142, 0.25); color: var(--color-text-primary); } .alert-banner.alert-success svg { fill: #21c08e; } .alert-banner.alert-error { background: rgba(196, 58, 58, 0.10); border: 1px solid rgba(196, 58, 58, 0.25); color: var(--color-text-primary); } .alert-banner.alert-error svg { fill: #c43a3a; } .alert-banner > div { font-size: 13px; line-height: 1.55; } .alert-banner strong { color: var(--color-text-primary); font-weight: 700; } /* — Auth helper box — */ .auth-helper-box { margin-top: 18px; padding: 16px 20px; border-radius: 12px; background: var(--color-bg-surface-alt, rgba(0,0,0,0.02)); border: 1px dashed var(--color-border-default); } [data-theme="dark"] .auth-helper-box { background: rgba(255,255,255,0.03); } .ahb-title { margin: 0 0 6px 0; font-size: 13px; font-weight: 800; color: var(--color-text-primary); display: flex; align-items: center; gap: 8px; } .ahb-title svg { width: 16px; height: 16px; fill: var(--color-brand-primary); } .ahb-text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--color-text-secondary); } /* — Success / confirmation hero (page_2_005, 013) — */ .success-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 20px; border-radius: 16px; background: linear-gradient(180deg, rgba(33,192,142,0.10), rgba(33,192,142,0.02)); border: 1px solid rgba(33,192,142,0.25); margin-bottom: 24px; } .success-icon { width: 64px; height: 64px; border-radius: 50%; background: #21c08e; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 6px 20px rgba(33,192,142,0.30); } .success-icon svg { width: 32px; height: 32px; fill: #fff; } .success-title { margin: 0 0 8px 0; font-size: 26px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.3px; } .success-sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); max-width: 540px; } .success-summary { padding: 22px 24px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 14px; margin-bottom: 22px; } .success-summary-title { margin: 0 0 16px 0; font-size: 14px; font-weight: 800; color: var(--color-text-primary); display: flex; align-items: center; gap: 8px; } .success-summary-title svg { width: 16px; height: 16px; fill: var(--color-brand-primary); } .success-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; } .success-summary-item { display: flex; flex-direction: column; gap: 3px; } .ssi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 700; } .ssi-value { font-size: 13.5px; font-weight: 700; color: var(--color-text-primary); } .success-next { padding: 22px 24px; background: var(--color-bg-surface-alt, rgba(0,0,0,0.02)); border: 1px solid var(--color-border-default); border-radius: 14px; } [data-theme="dark"] .success-next { background: rgba(255,255,255,0.03); } .success-next-title { margin: 0 0 14px 0; font-size: 14px; font-weight: 800; color: var(--color-text-primary); } .success-next-list { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.7; color: var(--color-text-secondary); } .success-next-list li { margin-bottom: 4px; } /* — Reset PIN steps (page_2_013) — */ .reset-steps { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; } .reset-step { display: flex; gap: 14px; padding: 14px 16px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 12px; } .rs-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--color-brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .rs-body { flex: 1; } .rs-title { margin: 0 0 4px 0; font-size: 13.5px; font-weight: 800; color: var(--color-text-primary); } .rs-text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--color-text-secondary); } /* — Breadcrumb — */ .breadcrumb-row { margin-bottom: 14px; } .breadcrumb-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; padding: 6px 12px; border-radius: 50px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); transition: all 0.15s; } .breadcrumb-link:hover { color: var(--color-brand-primary); border-color: var(--color-brand-primary); } /* — Online hero (page_2_006) — */ .online-hero { position: relative; padding: 32px 36px; border-radius: 18px; overflow: hidden; margin-bottom: 26px; background: linear-gradient(135deg, var(--color-bg-canvas-1, #0d1f4d), var(--color-bg-canvas-2, #091a44)); color: #fff; } .online-hero-bg { position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1600&q=80'); background-size: cover; background-position: center; opacity: 0.18; mix-blend-mode: overlay; } .online-hero-content { position: relative; z-index: 1; } .online-hero-tag { display: inline-block; padding: 5px 12px; border-radius: 50px; background: var(--color-brand-primary); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; margin-bottom: 14px; } .online-hero-title { margin: 0 0 10px 0; font-size: 28px; font-weight: 800; letter-spacing: -0.4px; color: #fff; } .online-hero-sub { margin: 0 0 22px 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 600px; } .online-hero-stats { display: flex; gap: 28px; flex-wrap: wrap; } .online-hero-stat { display: flex; flex-direction: column; gap: 2px; } .ohs-num { font-size: 22px; font-weight: 800; color: #fff; } .ohs-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.75); font-weight: 700; } /* — Online category cards (page_2_006) — */ .online-cat-card { display: block; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 14px; overflow: hidden; text-decoration: none; transition: all 0.18s; } .online-cat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); border-color: var(--color-brand-primary); } .online-cat-img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; } .online-cat-body { padding: 14px 16px; } .online-cat-tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.7px; color: var(--color-brand-primary); margin-bottom: 6px; } .online-cat-name { margin: 0 0 4px 0; font-size: 15px; font-weight: 800; color: var(--color-text-primary); } .online-cat-meta { margin: 0; font-size: 11.5px; color: var(--color-text-muted); } /* — Online video cards — */ .online-video-card { display: block; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 14px; overflow: hidden; text-decoration: none; transition: all 0.18s; } .online-video-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); border-color: var(--color-brand-primary); } .online-video-thumb { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; } .online-video-dur { position: absolute; bottom: 10px; right: 10px; padding: 3px 9px; border-radius: 6px; background: rgba(0,0,0,0.78); color: #fff; font-size: 11px; font-weight: 700; } .online-video-level { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 50px; background: rgba(255,255,255,0.92); color: #14202a; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; } [data-theme="dark"] .online-video-level { background: rgba(20,32,42,0.92); color: #fff; } .online-video-body { padding: 14px 16px; } .online-video-cat { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.7px; color: var(--color-brand-primary); margin-bottom: 6px; } .online-video-title { margin: 0 0 4px 0; font-size: 14.5px; font-weight: 800; color: var(--color-text-primary); line-height: 1.35; } .online-video-meta { margin: 0; font-size: 11.5px; color: var(--color-text-muted); } .play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .play-badge svg { width: 26px; height: 26px; fill: #fff; background: rgba(0,0,0,0.65); padding: 14px; border-radius: 50%; box-sizing: content-box; transition: transform 0.18s; } .online-video-card:hover .play-badge svg, .online-cat-card:hover .play-badge svg { transform: scale(1.08); background: var(--color-brand-primary); } /* — Online category hero (page_2_007) — */ .online-cat-hero { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 24px; min-height: 280px; display: flex; align-items: flex-end; } .online-cat-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; } .online-cat-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.80)); } .online-cat-hero-content { position: relative; z-index: 1; padding: 28px 32px; color: #fff; } .online-cat-hero-tag { display: inline-block; padding: 4px 11px; border-radius: 50px; background: var(--color-brand-primary); font-size: 10.5px; font-weight: 800; letter-spacing: 0.7px; margin-bottom: 10px; } .online-cat-hero-title { margin: 0 0 8px 0; font-size: 30px; font-weight: 800; letter-spacing: -0.5px; color: #fff; } .online-cat-hero-sub { margin: 0 0 14px 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 620px; } .online-cat-hero-stats { display: flex; gap: 8px; flex-wrap: wrap; } .ochs-pill { padding: 5px 12px; border-radius: 50px; background: rgba(255,255,255,0.15); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 11.5px; font-weight: 700; } /* — Online filter bar — */ .online-filter-bar { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px 16px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 12px; margin-bottom: 16px; } .online-filter-group { display: flex; gap: 6px; flex-wrap: wrap; } .online-chip { padding: 6px 14px; border-radius: 50px; border: 1.5px solid var(--color-border-default); background: transparent; color: var(--color-text-secondary); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all 0.15s; } .online-chip:hover { color: var(--color-brand-primary); border-color: var(--color-brand-primary); } .online-chip.is-active { background: var(--color-brand-primary); color: #fff; border-color: var(--color-brand-primary); } /* — Video player (page_2_008) — */ .video-player-canvas { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #000; } .video-player-frame { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 24px; background: #000; } .video-player-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: var(--color-brand-primary); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.40); transition: transform 0.18s; } .video-player-play:hover { transform: translate(-50%, -50%) scale(1.08); } .video-player-play svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; } .video-player-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0)); display: flex; align-items: center; gap: 10px; } .vpc-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .vpc-btn:hover { background: rgba(255,255,255,0.28); } .vpc-btn svg { width: 14px; height: 14px; fill: #fff; } .vpc-time { color: rgba(255,255,255,0.92); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 110px; } .vpc-track { flex: 1; height: 4px; background: rgba(255,255,255,0.20); border-radius: 50px; overflow: hidden; } .vpc-fill { height: 100%; background: var(--color-brand-primary); } /* — Video detail page — */ .video-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; margin-top: 24px; } .video-detail-main { min-width: 0; } .video-detail-side { min-width: 0; } .video-detail-cat { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; color: var(--color-brand-primary); margin-bottom: 8px; } .video-detail-title { margin: 0 0 14px 0; font-size: 22px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.3px; line-height: 1.3; } .video-detail-meta { display: flex; gap: 20px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); margin-bottom: 18px; } .vdm-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-text-secondary); } .vdm-item svg { width: 14px; height: 14px; fill: var(--color-brand-primary); } .vdm-item strong { color: var(--color-text-primary); font-weight: 700; } .video-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; } .video-detail-section { margin-bottom: 22px; } .video-detail-section-title { margin: 0 0 10px 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-primary); } .video-detail-text { margin: 0 0 10px 0; font-size: 13.5px; line-height: 1.7; color: var(--color-text-secondary); } .equipment-row { display: flex; gap: 8px; flex-wrap: wrap; } .equipment-pill { padding: 6px 14px; border-radius: 50px; background: rgba(250,115,11,0.10); border: 1px solid rgba(250,115,11,0.25); color: var(--color-brand-primary); font-size: 12px; font-weight: 700; } /* Video side cards */ .video-side-card { display: flex; gap: 10px; padding: 8px; border-radius: 10px; text-decoration: none; margin-bottom: 8px; transition: background 0.15s; } .video-side-card:hover { background: var(--color-bg-surface-alt, rgba(0,0,0,0.04)); } [data-theme="dark"] .video-side-card:hover { background: rgba(255,255,255,0.04); } .vsc-thumb { position: relative; width: 110px; aspect-ratio: 16 / 10; background-size: cover; background-position: center; border-radius: 8px; flex-shrink: 0; } .vsc-dur { position: absolute; bottom: 4px; right: 4px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,0.78); color: #fff; font-size: 10px; font-weight: 700; } .vsc-body { flex: 1; min-width: 0; } .vsc-title { margin: 0 0 3px 0; font-size: 12.5px; font-weight: 700; color: var(--color-text-primary); line-height: 1.35; } .vsc-meta { margin: 0; font-size: 11px; color: var(--color-text-muted); } /* — Occupancy (page_2_009) — */ .occupancy-meta-row { display: flex; gap: 28px; padding: 14px 18px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 12px; margin-bottom: 16px; flex-wrap: wrap; } .occupancy-meta-item { display: flex; flex-direction: column; gap: 2px; } .occm-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 700; } .occm-value { font-size: 13.5px; font-weight: 800; color: var(--color-text-primary); } .occupancy-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; } .occupancy-row { display: grid; grid-template-columns: 1.4fr 1.6fr 0.9fr; gap: 18px; align-items: center; padding: 14px 18px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 12px; } .occ-row-info { min-width: 0; } .occ-row-name { margin: 0 0 3px 0; font-size: 14px; font-weight: 800; color: var(--color-text-primary); } .occ-row-meta { margin: 0; font-size: 11.5px; color: var(--color-text-muted); } .occ-row-bar { display: flex; align-items: center; gap: 12px; } .occ-bar-track { flex: 1; height: 8px; background: var(--color-bg-surface-alt, rgba(0,0,0,0.06)); border-radius: 50px; overflow: hidden; } [data-theme="dark"] .occ-bar-track { background: rgba(255,255,255,0.08); } .occ-bar-fill { height: 100%; border-radius: 50px; transition: width 0.3s; } .occ-bar-pct { font-size: 13px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; } .occ-row-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .occ-status-pill { padding: 3px 10px; border-radius: 50px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; } .occ-status-pill.is-low { background: rgba(22,163,74,0.15); color: #16a34a; } .occ-status-pill.is-medium { background: rgba(245,158,11,0.15); color: #b45309; } .occ-status-pill.is-busy { background: rgba(239,68,68,0.15); color: #c43a3a; } .occ-status-pill.is-full { background: rgba(220,38,38,0.18); color: #b91c1c; } .occ-row-people { font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .occupancy-legend { padding: 14px 18px; background: var(--color-bg-surface-alt, rgba(0,0,0,0.02)); border: 1px solid var(--color-border-default); border-radius: 12px; } [data-theme="dark"] .occupancy-legend { background: rgba(255,255,255,0.03); } .legend-title { margin: 0 0 8px 0; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-primary); } .legend-row { display: flex; gap: 18px; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); } .legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* — Reserve access (page_2_010) — */ .reserve-card { padding: 20px 22px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 14px; margin-bottom: 14px; } .reserve-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .reserve-card-title { margin: 0; font-size: 14px; font-weight: 800; color: var(--color-text-primary); } .reserve-card-hint { font-size: 11.5px; color: var(--color-text-muted); font-weight: 600; } .reserve-club-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .reserve-club-option { position: relative; display: block; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--color-border-default); cursor: pointer; transition: all 0.15s; } .reserve-club-option:hover { border-color: var(--color-brand-primary); } .reserve-club-option.is-checked, .reserve-club-option:has(input:checked) { border-color: var(--color-brand-primary); background: rgba(250,115,11,0.06); } .reserve-club-option input { position: absolute; opacity: 0; pointer-events: none; } .rco-content { display: flex; flex-direction: column; gap: 3px; } .rco-name { font-size: 13.5px; font-weight: 800; color: var(--color-text-primary); } .rco-meta { font-size: 11.5px; color: var(--color-text-muted); } .rco-status { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 50px; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; align-self: flex-start; } .rco-status.is-low { background: rgba(22,163,74,0.15); color: #16a34a; } .rco-status.is-medium { background: rgba(245,158,11,0.15); color: #b45309; } .rco-status.is-busy { background: rgba(239,68,68,0.15); color: #c43a3a; } .rco-status.is-full { background: rgba(220,38,38,0.18); color: #b91c1c; } .reserve-day-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .reserve-day-btn { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 10px; border: 1.5px solid var(--color-border-default); background: transparent; color: var(--color-text-primary); font-family: inherit; cursor: pointer; transition: all 0.15s; } .reserve-day-btn:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); } .reserve-day-btn.is-active { background: var(--color-brand-primary); color: #fff; border-color: var(--color-brand-primary); } .rdb-day { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; opacity: 0.85; } .rdb-num { font-size: 18px; font-weight: 800; margin-top: 2px; } .reserve-slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .reserve-slot { padding: 10px 8px; border-radius: 10px; border: 1.5px solid var(--color-border-default); background: transparent; color: var(--color-text-primary); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; font-variant-numeric: tabular-nums; } .reserve-slot:hover:not(.is-disabled):not(.is-active) { border-color: var(--color-brand-primary); color: var(--color-brand-primary); } .reserve-slot.is-active { background: var(--color-brand-primary); color: #fff; border-color: var(--color-brand-primary); } .reserve-slot.is-disabled { opacity: 0.55; cursor: not-allowed; text-decoration: line-through; color: var(--color-text-muted); background: rgba(0,0,0,0.04); border-color: var(--color-border-subtle, var(--color-border-default)); } [data-theme="dark"] .reserve-slot.is-disabled { background: rgba(255,255,255,0.04); } .reserve-slot.is-busy { border-color: rgba(239,68,68,0.4); color: #c43a3a; background: rgba(239,68,68,0.06); } .reserve-slots-legend { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--color-border-default); } .rsl-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-muted); } .rsl-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .rsl-dot.is-free { background: var(--color-brand-primary); } .rsl-dot.is-busy { background: rgba(239,68,68,0.7); } .rsl-dot.is-disabled { background: var(--color-text-muted); opacity: 0.5; } .reserve-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; background: linear-gradient(135deg, rgba(250,115,11,0.08), rgba(250,115,11,0.02)); border: 1.5px solid rgba(250,115,11,0.30); border-radius: 14px; margin-bottom: 22px; flex-wrap: wrap; } .reserve-summary-info { display: flex; flex-direction: column; gap: 2px; } .rsi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 700; } .rsi-value { font-size: 13.5px; font-weight: 800; color: var(--color-text-primary); } .reserved-list { display: flex; flex-direction: column; gap: 10px; } .reserved-item { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 12px; } .reserved-day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background: var(--color-brand-primary); color: #fff; flex-shrink: 0; } .rd-num { font-size: 20px; font-weight: 800; line-height: 1; } .rd-mon { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; margin-top: 3px; } .reserved-info { flex: 1; min-width: 0; } .reserved-title { margin: 0 0 3px 0; font-size: 14px; font-weight: 800; color: var(--color-text-primary); } .reserved-meta { margin: 0; font-size: 11.5px; color: var(--color-text-muted); } .reserved-actions { flex-shrink: 0; } /* — Gift cards (page_2_014/015/016) — */ .gift-add-banner { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: linear-gradient(135deg, rgba(250,115,11,0.08), rgba(250,115,11,0.02)); border: 1.5px solid rgba(250,115,11,0.28); border-radius: 14px; margin-bottom: 18px; } .gab-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--color-brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gab-icon svg { width: 22px; height: 22px; fill: #fff; } .gab-body { flex: 1; min-width: 0; } .gab-title { margin: 0 0 3px 0; font-size: 15px; font-weight: 800; color: var(--color-text-primary); } .gab-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); } .gab-action { flex-shrink: 0; } .gift-summary-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 20px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 12px; margin-bottom: 18px; } .gsb-item { display: flex; flex-direction: column; gap: 3px; } .gsb-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 700; } .gsb-value { font-size: 16px; font-weight: 800; color: var(--color-text-primary); } .gsb-value.gsb-highlight { color: var(--color-brand-primary); } .gift-empty-state { text-align: center; padding: 36px 24px; background: var(--color-bg-surface); border: 1px dashed var(--color-border-default); border-radius: 16px; } .gift-empty-icon { width: 64px; height: 64px; border-radius: 16px; background: rgba(250,115,11,0.10); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .gift-empty-icon svg { width: 30px; height: 30px; fill: var(--color-brand-primary); } .gift-empty-title { margin: 0 0 6px 0; font-size: 18px; font-weight: 800; color: var(--color-text-primary); } .gift-empty-text { margin: 0 auto 18px; font-size: 13.5px; line-height: 1.6; color: var(--color-text-secondary); max-width: 500px; } .gift-empty-tips { text-align: left; max-width: 540px; margin: 0 auto; padding: 18px 22px; background: var(--color-bg-surface-alt, rgba(0,0,0,0.02)); border: 1px solid var(--color-border-default); border-radius: 12px; } [data-theme="dark"] .gift-empty-tips { background: rgba(255,255,255,0.03); } .get-tip-title { margin: 0 0 8px 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-primary); } .gift-tip-list { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.7; color: var(--color-text-secondary); } .gift-tip-list li { margin-bottom: 4px; } /* Gift card item */ .gift-card-item { padding: 18px 20px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 14px; transition: box-shadow 0.18s; } .gift-card-item:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.06); } .gift-card-item.is-used { opacity: 0.65; } .gift-card-item.gci-just-added { border-color: rgba(33,192,142,0.45); background: linear-gradient(135deg, rgba(33,192,142,0.06), transparent); box-shadow: 0 6px 20px rgba(33,192,142,0.15); } .gci-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .gci-status { padding: 3px 10px; border-radius: 50px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; } .gci-status.is-active { background: rgba(33,192,142,0.18); color: #15a070; } .gci-status.is-used { background: rgba(0,0,0,0.10); color: var(--color-text-muted); } [data-theme="dark"] .gci-status.is-used { background: rgba(255,255,255,0.10); } .gci-code { font-size: 11px; font-weight: 800; color: var(--color-text-muted); letter-spacing: 0.6px; font-variant-numeric: tabular-nums; } .gci-amount { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--color-border-default); } .gci-amount-value { font-size: 28px; font-weight: 800; color: var(--color-brand-primary); letter-spacing: -0.5px; } .gci-amount-label { font-size: 11.5px; color: var(--color-text-muted); font-weight: 600; } .gci-progress { margin-bottom: 14px; } .gci-progress-track { height: 6px; background: var(--color-bg-surface-alt, rgba(0,0,0,0.06)); border-radius: 50px; overflow: hidden; margin-bottom: 5px; } [data-theme="dark"] .gci-progress-track { background: rgba(255,255,255,0.08); } .gci-progress-fill { height: 100%; background: var(--color-brand-primary); border-radius: 50px; } .gci-progress-text { font-size: 11px; color: var(--color-text-muted); font-weight: 600; } .gci-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .gci-meta-row { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; } .gci-meta-label { color: var(--color-text-muted); font-weight: 600; flex-shrink: 0; min-width: 80px; } .gci-meta-value { color: var(--color-text-primary); font-weight: 600; } .gci-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* — Empty rich card — */ .empty-rich-card { text-align: center; padding: 36px 28px; background: var(--color-bg-surface); border: 1px dashed var(--color-border-default); border-radius: 16px; } .empty-rich-icon { width: 64px; height: 64px; border-radius: 16px; background: rgba(250,115,11,0.10); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .empty-rich-icon svg { width: 30px; height: 30px; fill: var(--color-brand-primary); } .empty-rich-tips { text-align: left; max-width: 540px; margin: 18px auto; padding: 18px 22px; background: var(--color-bg-surface-alt, rgba(0,0,0,0.02)); border: 1px solid var(--color-border-default); border-radius: 12px; } [data-theme="dark"] .empty-rich-tips { background: rgba(255,255,255,0.03); } .empty-rich-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } /* — Pagination (m-pag-* used in 008_istoric) — */ .m-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0 8px; flex-wrap: wrap; } .m-pag-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 50px; background: var(--color-bg-surface); border: 1.5px solid var(--color-border-default); color: var(--color-text-secondary); font-size: 12px; font-weight: 700; text-decoration: none; transition: all 0.15s; } .m-pag-btn:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); background: rgba(250,115,11,0.06); } .m-pag-btn.is-disabled { opacity: 0.45; pointer-events: none; } .m-pag-btn svg { width: 11px; height: 11px; fill: currentColor; } .m-pag-pages { display: flex; gap: 4px; align-items: center; } .m-pag-page { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 50%; background: transparent; color: var(--color-text-secondary); font-size: 12.5px; font-weight: 700; text-decoration: none; transition: all 0.15s; } .m-pag-page:hover { background: rgba(250,115,11,0.10); color: var(--color-brand-primary); } .m-pag-page.is-active { background: var(--color-brand-primary); color: #fff; } .m-pag-dots { color: var(--color-text-muted); padding: 0 4px; font-weight: 700; } .m-pag-info { width: 100%; text-align: center; margin-top: 6px; } .m-pag-info-text { font-size: 11.5px; color: var(--color-text-muted); } .m-pag-info-text strong { color: var(--color-text-primary); font-weight: 700; } /* — Voucher promo image — */ .voucher-promo { border-radius: 14px; overflow: hidden; margin-bottom: 16px; background: var(--color-bg-surface); } /* — Mobile responsive batch 2 — */ @media (max-width: 880px) { .video-detail-grid { grid-template-columns: 1fr; } .reserve-club-grid { grid-template-columns: 1fr; } .reserve-day-row { grid-template-columns: repeat(7, 1fr); gap: 4px; } .reserve-day-btn { padding: 10px 2px; } .rdb-num { font-size: 16px; } .reserve-slots-grid { grid-template-columns: repeat(2, 1fr); } .gift-summary-bar { grid-template-columns: repeat(2, 1fr); } .occupancy-row { grid-template-columns: 1fr; gap: 12px; } .occ-row-status { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } .success-summary-grid { grid-template-columns: 1fr; } .gab-icon { width: 44px; height: 44px; } .gab-icon svg { width: 18px; height: 18px; } .online-hero { padding: 24px 22px; } .online-hero-title { font-size: 22px; } .online-cat-hero-content { padding: 22px 20px; } .online-cat-hero-title { font-size: 22px; } .video-side-card { gap: 8px; } .vsc-thumb { width: 90px; } .gift-add-banner { flex-direction: column; align-items: flex-start; gap: 12px; } .reserve-summary { flex-direction: column; align-items: flex-start; } .reserved-item { gap: 12px; } .video-player-play { width: 56px; height: 56px; } .video-player-play svg { width: 20px; height: 20px; } .occupancy-meta-row { gap: 16px; } } @media (max-width: 480px) { .reserve-slots-grid { grid-template-columns: 1fr 1fr; } .gift-summary-bar { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════ ════ BATCH 2 — Rezervări clase (page_2_018) ════ */ .reservations-meta-row { display: flex; gap: 28px; padding: 14px 18px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 12px; margin-bottom: 18px; flex-wrap: wrap; } .reservations-meta-item { display: flex; flex-direction: column; gap: 2px; } .resm-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 700; } .resm-value { font-size: 13.5px; font-weight: 800; color: var(--color-text-primary); } .resm-value.resm-good { color: #15a070; } .reservations-timeline { position: relative; padding-left: 26px; margin-bottom: 24px; } .reservations-timeline::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--color-border-default); border-radius: 2px; } .rsv-item { position: relative; margin-bottom: 14px; } .rsv-item:last-child { margin-bottom: 0; } .rsv-dot { position: absolute; left: -22px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-bg-surface); border: 3px solid var(--color-brand-primary); z-index: 1; } .rsv-item.rsv-future .rsv-dot { border-color: var(--color-text-muted); } .rsv-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 12px; transition: box-shadow 0.18s; } .rsv-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.06); } .rsv-card-main { flex: 1; min-width: 0; } .rsv-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; } .rsv-datetime { font-size: 13px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; } .rsv-class-name { font-size: 14.5px; font-weight: 800; color: var(--color-brand-primary); letter-spacing: 0.2px; } .rsv-tag { padding: 2px 9px; border-radius: 50px; background: rgba(250,115,11,0.12); color: var(--color-brand-primary); font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; } .rsv-card-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; } .rsv-meta-row { font-size: 12.5px; color: var(--color-text-secondary); } .rsv-meta-row strong { color: var(--color-text-primary); font-weight: 700; } .rsv-participants-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: #15a070; text-decoration: none; text-transform: uppercase; transition: color 0.15s; } .rsv-participants-link:hover { color: #21c08e; } .rsv-participants-link svg { width: 12px; height: 12px; fill: currentColor; } .rsv-card-actions { flex-shrink: 0; } .btn-cancel-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 50px; background: #c43a3a; color: #fff; text-decoration: none; border: none; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.15s; } .btn-cancel-pill:hover { background: #a52e2e; transform: translateY(-1px); } .btn-cancel-pill svg { width: 11px; height: 11px; fill: currentColor; } .reservations-cta { text-align: center; padding: 22px 24px; background: linear-gradient(135deg, rgba(250,115,11,0.06), rgba(250,115,11,0.01)); border: 1px dashed rgba(250,115,11,0.30); border-radius: 14px; } .reservations-cta-title { margin: 0 0 6px 0; font-size: 16px; font-weight: 800; color: var(--color-text-primary); } .reservations-cta-text { margin: 0 0 14px 0; font-size: 13px; color: var(--color-text-secondary); } .reservations-cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Mobile responsive batch 2_018 */ @media (max-width: 880px) { .reservations-meta-row { gap: 16px; } .rsv-card { flex-direction: column; align-items: stretch; gap: 12px; } .rsv-card-actions { align-self: flex-end; } .rsv-card-head { gap: 8px; } } /* ════════════════════════════════════════════════════════════════════ ════ BATCH 2 — Voucher hero rework (image + details side-by-side) ════ Form harmonization with profile-form pattern ════════════════════════════════════════════════════════════════════ */ /* — Voucher hero: image left + details right — */ .voucher-hero { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card-sm); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); margin-bottom: 22px; } .voucher-hero-img { position: relative; background-size: cover; background-position: center; background-color: var(--color-bg-canvas-1, #091a44); min-height: 280px; } .voucher-hero-img-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(9,26,68,0.0), rgba(9,26,68,0.30)); } .voucher-hero-img-tag { position: absolute; top: 16px; left: 16px; padding: 5px 12px; border-radius: 50px; background: var(--color-brand-primary); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; } .voucher-hero-img-name { position: absolute; bottom: 16px; left: 16px; right: 16px; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.2px; text-shadow: 0 2px 8px rgba(0,0,0,0.40); } .voucher-hero-detail { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; } .voucher-hero-detail-tag { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 4px 11px; border-radius: 50px; background: rgba(250,115,11,0.12); color: var(--color-brand-primary); font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 4px; } .voucher-hero-detail-tag svg { width: 11px; height: 11px; fill: currentColor; } .voucher-hero-detail-title { margin: 0 0 4px 0; font-size: 16px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.2px; } .voucher-hero-detail-code { color: var(--color-brand-primary); font-variant-numeric: tabular-nums; letter-spacing: 0.4px; } .voucher-hero-detail-list { list-style: none; margin: 6px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .vhd-row { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); } .vhd-row svg { width: 14px; height: 14px; fill: var(--color-brand-primary); margin-top: 3px; } .vhd-row strong { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); margin-bottom: 2px; } .vhd-row span { color: var(--color-text-primary); font-weight: 600; } .voucher-hero-detail-note { margin-top: 6px; padding: 10px 12px; background: rgba(250,115,11,0.06); border-left: 3px solid var(--color-brand-primary); border-radius: 0 8px 8px 0; font-size: 11.5px; line-height: 1.5; color: var(--color-text-secondary); display: flex; align-items: flex-start; gap: 8px; } .voucher-hero-detail-note svg { width: 13px; height: 13px; fill: var(--color-brand-primary); flex-shrink: 0; margin-top: 1px; } /* — Form card wrapper (white card around forms) — */ .auth-form-card { padding: 24px 26px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 14px; box-shadow: var(--shadow-card-sm); margin-bottom: 18px; } .auth-form-card-title { font-size: 13px; font-weight: 800; color: var(--color-brand-primary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 4px 0; } .auth-form-card-sub { margin: 0 0 18px 0; font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); } /* — Step indicator (1/4, 2/4, etc) — */ .auth-steps { display: flex; align-items: center; gap: 0; margin-bottom: 22px; padding: 0; list-style: none; } .auth-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; } .auth-step-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg-surface); border: 2px solid var(--color-border-default); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: var(--color-btn-app); z-index: 2; transition: all 0.18s; } .auth-step-label { font-size: 10.5px; font-weight: 700; color: var(--color-text-muted); text-align: center; letter-spacing: 0.4px; text-transform: uppercase; } .auth-step::after { content: ""; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--color-border-default); z-index: 1; } .auth-step:last-child::after { display: none; } .auth-step.is-done .auth-step-dot { background: #15a070; border-color: #15a070; color: #fff; } .auth-step.is-done::after { background: #15a070; } .auth-step.is-active .auth-step-dot { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-btn-app); box-shadow: 0 0 0 4px rgba(250,115,11,0.18); } .auth-step.is-active .auth-step-label { color: var(--color-brand-primary); font-weight: 800; } /* Mobile responsive voucher hero */ @media (max-width: 880px) { .voucher-hero { grid-template-columns: 1fr; } .voucher-hero-img { min-height: 180px; } .auth-form-card { padding: 20px 18px; } .auth-step-label { font-size: 9.5px; } } @media (max-width: 480px) { .auth-step-label { display: none; } } /* ════════════════════════════════════════════════════════════════════ ════ Mobile responsive: auth shell (welcome-panel + main-area) ════ Stack vertically below 880px so voucher pages render on mobile ════════════════════════════════════════════════════════════════════ */ @media (max-width: 880px) { body.auth .page-layout { flex-direction: column; min-height: auto; } body.auth .welcome-panel { width: 100%; min-width: 0; height: auto; position: relative; top: auto; padding: 18px 22px 22px; border-radius: 0; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; } body.auth .welcome-back-link { margin-bottom: 0; order: 1; } body.auth .welcome-logo { order: 2; margin-bottom: 0; } body.auth .welcome-logo svg { width: 100px; } body.auth .welcome-content { display: none; } body.auth .welcome-footer { display: none; } body.auth .main-area { padding: 0; } body.auth .main-inner { padding: 24px 16px 60px; max-width: 100%; } body.auth .auth-card, body.auth .auth-form-card { padding: 20px 18px; } body.auth .v2-form-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; } body.auth .v2-form-actions > * { width: 100%; justify-content: center; text-align: center; } } @media (max-width: 480px) { body.auth .welcome-panel { padding: 14px 14px; } body.auth .welcome-logo svg { width: 88px; } body.auth .auth-form-card { padding: 18px 14px; } } /* ════════════════════════════════════════════════════════════════════ ════ BATCH 3 — Pagination arrows / Comm settings / GDPR ════════════════════════════════════════════════════════════════════ */ /* — Pagination arrows-only (no text label) — */ .m-pag-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--color-bg-surface); border: 1.5px solid var(--color-border-default); color: var(--color-text-secondary); text-decoration: none; transition: all 0.15s; } .m-pag-arrow:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); background: rgba(250,115,11,0.08); } .m-pag-arrow.is-disabled { opacity: 0.4; pointer-events: none; } .m-pag-arrow svg { width: 12px; height: 12px; fill: currentColor; } .m-pag-arrow.m-pag-arrow-double svg { width: 14px; height: 14px; } /* — Comm settings 2-col grid — */ .comm-settings-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; align-items: start; margin-bottom: 22px; } .comm-current-card { padding: 22px 24px; background: var(--color-bg-surface-alt, rgba(0,0,0,0.02)); border: 1px solid var(--color-border-default); border-radius: 14px; position: sticky; top: 90px; } [data-theme="dark"] .comm-current-card { background: rgba(255,255,255,0.03); } .comm-current-list { list-style: none; margin: 18px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .comm-current-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 10px; } .cci-channel { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); line-height: 1.4; } .cci-status { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 50px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; } .cci-status.is-yes { background: rgba(33,192,142,0.15); color: #15a070; } .cci-status.is-no { background: rgba(196,58,58,0.15); color: #c43a3a; } .cci-status svg { width: 10px; height: 10px; fill: currentColor; } /* Communication toggle list */ .comm-toggle-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .comm-toggle-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--color-bg-surface-alt, rgba(0,0,0,0.02)); border: 1px solid var(--color-border-default); border-radius: 10px; cursor: pointer; transition: all 0.15s; } [data-theme="dark"] .comm-toggle-row { background: rgba(255,255,255,0.03); } .comm-toggle-row:hover { border-color: var(--color-brand-primary); } .comm-toggle-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--color-brand-primary); cursor: pointer; } .ctr-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; } .ctr-name { font-size: 13.5px; font-weight: 700; color: var(--color-text-primary); } .ctr-desc { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; } /* Comm info blocks */ .comm-info-block { padding: 18px 22px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: 12px; margin-bottom: 14px; } .comm-info-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-primary); } .comm-info-title svg { width: 16px; height: 16px; fill: var(--color-brand-primary); } .comm-info-text { margin: 0 0 8px 0; font-size: 12.5px; line-height: 1.7; color: var(--color-text-secondary); } .comm-info-text:last-child { margin-bottom: 0; } .comm-rights-list { margin: 8px 0; padding-left: 22px; font-size: 12.5px; line-height: 1.7; color: var(--color-text-secondary); } .comm-rights-list li { margin-bottom: 6px; } .comm-rights-list strong { color: var(--color-text-primary); font-weight: 700; } /* Mobile responsive batch 3 */ @media (max-width: 880px) { .comm-settings-grid { grid-template-columns: 1fr; } .comm-current-card { position: relative; top: auto; } .m-pag-arrow { width: 32px; height: 32px; } .m-pagination { gap: 8px; } .comm-current-item { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ════════════════════════════════════════════════════════════════════ ════ PILOT REBALANCE — DASHBOARD ONLY (page MbArea_cont_interior_001) ════ Goal A: reduce orange overuse — decorative icons → brand-accent ════ Goal B: neutral dark surfaces — no navy tint, theme-portable ════ Scope: body[data-page="MbArea_cont_interior_001"] ════════════════════════════════════════════════════════════════════ */ /* ─── B. Dark tokens neutralized at :root level — see above ─── */ /* ─── A. Decorative icons go to brand-accent in light, neutral white in dark ─── */ /* Section header icons (Rezervă, Grad ocupare, Cumpără×2) */ .dash-info-title svg, .dash-cta-title svg { fill: var(--color-brand-accent); } [data-theme="dark"] .dash-info-title svg, [data-theme="dark"] .dash-cta-title svg { fill: var(--color-text-primary); opacity: 0.85; } /* Quicklinks (8 cards): switch to brand-accent in light, neutral white in dark */ .dash-qpro { --qcolor: var(--color-brand-accent); --qbg: rgba(9, 26, 68, 0.08); } [data-theme="dark"] .dash-qpro { --qcolor: rgba(255, 255, 255, 0.85); --qbg: rgba(255, 255, 255, 0.06); } /* Number badge stays orange — it's a "data signal", actionable */ .dash-qpro-info .num { color: var(--color-brand-primary); } /* Left accent bar stays orange — it's the brand "tick mark" */ .dash-qpro::before { background: var(--color-brand-primary); opacity: 0; transition: opacity 0.18s, width 0.18s; } .dash-qpro:hover::before { opacity: 0.85; width: 5px; } /* Voucher / Card cadou boxes: tone down orange tint, keep CTA orange */ .dash-act-pro { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); } [data-theme="dark"] .dash-act-pro { background: var(--color-bg-surface); border-color: var(--color-border-default); } /* Icon container goes from orange-glow to neutral chip with brand-accent icon */ .dash-act-pro-icon { background: rgba(9, 26, 68, 0.08); } .dash-act-pro-icon svg { fill: var(--color-brand-accent); } [data-theme="dark"] .dash-act-pro-icon { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .dash-act-pro-icon svg { fill: rgba(255, 255, 255, 0.92); } /* Tag pill: switch from orange to brand-accent */ .dash-act-pro-tag { color: var(--color-brand-accent); background: rgba(9, 26, 68, 0.08); } [data-theme="dark"] .dash-act-pro-tag { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.06); } /* "Vezi toate carduri cadou →" link: switch to neutral with hover orange */ .dash-act-pro-link a { color: var(--color-text-secondary); } .dash-act-pro-link a:hover { color: var(--color-brand-primary); } /* "Vezi toate noutățile" right-link: switch to neutral with hover orange */ .right-link { color: var(--color-text-secondary); } .right-link:hover { color: var(--color-brand-primary); } /* m-page-header background: neutralize on dark (was navy tinted) */ [data-theme="dark"] .m-page-header { background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%); } /* ─── Pilot: tone down voucher/card cadou box decorations ─── */ /* Top accent bar — keep orange but thinner & subtler */ .dash-act-pro::before { height: 3px; background: var(--color-brand-primary); opacity: 0.7; } /* Left side panel: neutral soft surface, not orange-cream */ .dash-act-pro-side { background: var(--color-bg-surface-alt); border-right: 1px solid var(--color-border-subtle); } [data-theme="dark"] .dash-act-pro-side { background: var(--color-bg-surface-alt); border-right-color: var(--color-border-default); } /* Dashed ring: neutral instead of orange */ .dash-act-pro-side::after { border-color: var(--color-border-strong); opacity: 0.30; } [data-theme="dark"] .dash-act-pro-side::after { border-color: rgba(255, 255, 255, 0.10); } /* Icon container inside side panel — switch from orange ring to brand-accent disc */ .dash-act-pro-icon { background: var(--color-brand-primary); box-shadow: 0 4px 16px rgba(9, 26, 68, 0.20); } .dash-act-pro-icon svg { fill: #fff; } [data-theme="dark"] .dash-act-pro-icon { background: rgba(255, 255, 255, 0.10); box-shadow: none; } [data-theme="dark"] .dash-act-pro-icon svg { fill: rgba(255, 255, 255, 0.92); } /* ════════════════════════════════════════════════════════════════════ ════ GLOBAL REBALANCE — decorative icons → brand-accent ════ (propagated from dashboard pilot) ════════════════════════════════════════════════════════════════════ */ /* Voucher hero — title icon + tag */ .voucher-info-title svg, .voucher-hero-detail-tag, .vhd-row svg { fill: var(--color-brand-accent); color: var(--color-brand-accent); } .voucher-hero-detail-tag { background: rgba(9, 26, 68, 0.08); } .voucher-info-title strong { color: var(--color-brand-accent); } .voucher-info-line strong { color: var(--color-text-primary); } [data-theme="dark"] .voucher-info-title svg, [data-theme="dark"] .voucher-hero-detail-tag, [data-theme="dark"] .vhd-row svg { fill: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] .voucher-hero-detail-tag { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .voucher-info-title strong { color: rgba(255, 255, 255, 0.92); } /* Voucher info note — tone down orange tint */ .voucher-info-note { background: var(--color-bg-surface-alt); border-left-color: var(--color-text-muted); } .voucher-info-note svg { fill: var(--color-text-muted); } [data-theme="dark"] .voucher-info-note { background: rgba(255, 255, 255, 0.03); border-left-color: rgba(255, 255, 255, 0.30); } /* voucher-hero-detail-note — subtle note inside voucher hero */ .voucher-hero-detail-note { background: var(--color-bg-surface-alt); border-left-color: var(--color-text-muted); color: var(--color-text-secondary); } .voucher-hero-detail-note svg { fill: var(--color-text-muted); } [data-theme="dark"] .voucher-hero-detail-note { background: rgba(255, 255, 255, 0.03); border-left-color: rgba(255, 255, 255, 0.25); } [data-theme="dark"] .voucher-hero-detail-note svg { fill: rgba(255, 255, 255, 0.55); } /* Profile section title — uppercase orange → brand-accent */ .profile-section-title { color: var(--color-brand-accent); } [data-theme="dark"] .profile-section-title { color: rgba(255, 255, 255, 0.85); } /* Form section title (auth pages) */ .form-section-title { color: var(--color-brand-accent); } [data-theme="dark"] .form-section-title { color: rgba(255, 255, 255, 0.85); } /* Auth form card title (orange uppercase) */ .auth-form-card-title { color: var(--color-brand-accent); } [data-theme="dark"] .auth-form-card-title { color: rgba(255, 255, 255, 0.85); } /* Auth helper box icon (Ai nevoie de ajutor) */ .ahb-title svg { fill: var(--color-brand-accent); } [data-theme="dark"] .ahb-title svg { fill: rgba(255, 255, 255, 0.75); } /* Communication info block icon */ .comm-info-title svg { fill: var(--color-brand-accent); } [data-theme="dark"] .comm-info-title svg { fill: rgba(255, 255, 255, 0.75); } /* Online category tags / video category tags — keep orange (these are content tags) */ /* but the section header in detail page can be brand-accent */ .video-detail-cat, .online-cat-tag, .online-video-cat { color: var(--color-brand-accent); } [data-theme="dark"] .video-detail-cat, [data-theme="dark"] .online-cat-tag, [data-theme="dark"] .online-video-cat { color: rgba(255, 255, 255, 0.80); } /* vdm-item meta icons (in video detail page) */ .vdm-item svg { fill: var(--color-brand-accent); } [data-theme="dark"] .vdm-item svg { fill: rgba(255, 255, 255, 0.75); } /* Success summary title icon */ .success-summary-title svg { fill: var(--color-brand-accent); } [data-theme="dark"] .success-summary-title svg { fill: rgba(255, 255, 255, 0.85); } /* Reservation meta-row good indicator stays green */ /* (no override needed) */ /* Right-link "Vezi toate" — neutral instead of orange */ .right-link { color: var(--color-text-secondary); } .right-link:hover { color: var(--color-brand-primary); } /* m-tabs (active state) — keep orange (active state is a "data signal") */ /* gci-amount-value — keep orange (data signal: amount) */ /* Equipment pill — keep orange (badge style) */ /* Reset PIN steps numbers — keep orange (active flow markers) */ /* Reservations CTA card — neutral background instead of orange tint */ .reservations-cta { background: var(--color-bg-surface); border: 1px dashed var(--color-border-default); } /* Comm-current-list checkmarks/x icons stay green/red (semantic) */ /* Gift add banner — keep slight orange hint but more subtle */ .gift-add-banner { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); } [data-theme="dark"] .gift-add-banner { background: var(--color-bg-surface); border-color: var(--color-border-default); } .gab-icon { background: var(--color-brand-accent); } [data-theme="dark"] .gab-icon { background: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .gab-icon svg { fill: rgba(255, 255, 255, 0.92); } /* Reserve summary — neutral */ .reserve-summary { background: var(--color-bg-surface); border: 1.5px solid var(--color-border-default); } [data-theme="dark"] .reserve-summary { background: var(--color-bg-surface); border-color: var(--color-border-default); } /* Online hero — keep navy gradient (it's a branded hero, OK) */ /* Reset step number — keep orange (step indicator) */ /* Online cat hero stays as-is */ .input-group { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; width: 100%; } .select2-container .select2-selection--single{ height:50px !important; } .select2-container--default .select2-selection--single { border: 1px solid #dddddd; } .select2-container--default .select2-selection--single .select2-selection__rendered { position: relative; padding: 0.75rem; line-height: 1.5; } .select2-container--default .select2-selection--single{ border-radius: 12px !important; border: 1px solid var(--color-border-default) !important; background: var(--color-bg-input) !important; font-family: inherit !important; color: var(--color-text-primary) !important; } .description-hide{ position: relative; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; max-height: 35px; } .description-hide .text-cr_hide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-bg-surface)); pointer-events: none; } .link-style{color: var(--color-brand-primary) !important;} .date{color: var(--color-txt-app) !important;} .no-link-style{text-decoration: none !important;} .alert { padding: 14px 18px; border-radius: 8px; color: #000 !important; } .alert-red { background:var(--color-state-error-bg); border-left-color:var(--color-state-error) !important; } .alert-success { background:var(--color-state-success-bg); border-left-color:var(--color-state-success) !important; } .alert-info { background:var(--color-state-info-bg); border-left-color:var(--color-state-info) !important; } .alert-warning { background:var(--color-state-warning); border-left-color:var(--color-state-warning) !important; } .form-group.is-invalid .select2-container .select2-selection{border-color: #fd2727 !important;} .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--color-text-primary) !important;} .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .col { flex: 1 0 0; } .col-1 { flex: 0 0 auto; width: 8.33333333%; } .col-2 { flex: 0 0 auto; width: 16.66666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.33333333%; } .col-5 { flex: 0 0 auto; width: 41.66666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.33333333%; } .col-8 { flex: 0 0 auto; width: 66.66666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10 { flex: 0 0 auto; width: 83.33333333%; } .col-11 { flex: 0 0 auto; width: 91.66666667%; } .col-12 { flex: 0 0 auto; width: 100%; } @media (min-width: 576px) { .col-sm { flex: 1 0 0; } .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 768px) { .col-md { flex: 1 0 0; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.33333333%; } .col-md-2 { flex: 0 0 auto; width: 16.66666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .col-md-5 { flex: 0 0 auto; width: 41.66666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.33333333%; } .col-md-8 { flex: 0 0 auto; width: 66.66666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.33333333%; } .col-md-11 { flex: 0 0 auto; width: 91.66666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 992px) { .col-lg { flex: 1 0 0; } .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 1200px) { .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 1400px) { .col-xxl { flex: 1 0 0; } .col-xxl-auto { flex: 0 0 auto; width: auto; } .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xxl-3 { flex: 0 0 auto; width: 25%; } .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xxl-6 { flex: 0 0 auto; width: 50%; } .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xxl-9 { flex: 0 0 auto; width: 75%; } .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xxl-12 { flex: 0 0 auto; width: 100%; } } a {color: var(--color-brand-primary);} .modal-dialog-scrollable { height: calc(100% - var(--bs-modal-margin) * 2); max-height: 100%; overflow: hidden; } .modal-dialog-scrollable .modal-body, .modal-dialog-scrollable .sub-modal-body { overflow-y: auto; }