/* ===================================================== cereri-tabs.css Adauga in dupa styles.css: ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap'); /* ── Ascunde secțiunile vechi (printatori nudge + how-mini) ── */ .maker-mini2, .how-mini { display: none !important; } /* ── Banner compact de top ─────────────────────────────────── */ .cereri-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-top: 14px; background: #ffffff; border: 1px solid rgba(15,31,58,.08); border-radius: 16px; box-shadow: 0 4px 18px rgba(15,31,58,.07); } .cereri-topbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cereri-topbar-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; font-family: 'Sora', system-ui, sans-serif; background: #eff5ff; border: 1px solid rgba(37,99,235,.18); color: #1d4ed8; } .cereri-topbar-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.18); } .cereri-topbar-text { font-size: 13.5px; color: #374151; font-family: 'Sora', system-ui, sans-serif; line-height: 1.4; } .cereri-topbar-text strong { color: #111827; font-weight: 700; } .cereri-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ── Tabs container ────────────────────────────────────────── */ .cereri-tabs-wrap { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cereri-tabs { display: flex; gap: 6px; background: #f0f2f7; padding: 5px; border-radius: 14px; border: 1px solid rgba(15,31,58,.08); flex-wrap: wrap; } /* Buton tab individual */ .cereri-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; border: none; background: transparent; color: #5e718d; font-family: 'Sora', system-ui, sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .14s ease, color .14s ease, box-shadow .14s ease; outline: none; } .cereri-tab:hover:not(.active) { background: rgba(255,255,255,.7); color: #0f1f3a; } /* TAB ACTIV */ .cereri-tab.active { background: #ffffff; color: #0f1f3a; font-weight: 700; box-shadow: 0 2px 10px rgba(15,31,58,.10); } /* Dot colorat per tab */ .tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .tab-dot-all { background: #6b7280; } .tab-dot-open { background: #2563eb; } .tab-dot-new { background: #f59e0b; } .tab-dot-old { background: #8b5cf6; } .tab-dot-solved { background: #22c55e; } /* Count pill */ .tab-count { min-width: 20px; height: 20px; border-radius: 99px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: rgba(15,31,58,.08); color: #374151; transition: background .14s ease, color .14s ease; } .cereri-tab.active .tab-count { background: rgba(15,31,58,.08); color: #0f1f3a; } /* Count colorat pentru activ per tip */ .cereri-tab[data-tab="open"].active .tab-count { background: rgba(37,99,235,.12); color: #1d4ed8; } .cereri-tab[data-tab="new"].active .tab-count { background: rgba(245,158,11,.14); color: #b45309; } .cereri-tab[data-tab="old"].active .tab-count { background: rgba(139,92,246,.14); color: #6d28d9; } .cereri-tab[data-tab="solved"].active .tab-count { background: rgba(34,197,94,.14); color: #15803d; } /* ── Status text sub tab-uri ───────────────────────────────── */ .cereri-status-row { display: flex; align-items: center; gap: 8px; font-family: 'Sora', system-ui, sans-serif; font-size: 13px; color: #5e718d; } .cereri-status-row .status-dot-live { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); flex-shrink: 0; } /* ── Buton Postează (header CTA) ───────────────────────────── */ .cereri-topbar .btn-orange { font-family: 'Sora', system-ui, sans-serif; font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 11px; height: auto; } /* ── Empty state ───────────────────────────────────────────── */ .cereri-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 24px; background: #ffffff; border: 1px solid rgba(15,31,58,.08); border-radius: 16px; text-align: center; font-family: 'Sora', system-ui, sans-serif; } .cereri-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: #f0f2f7; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .cereri-empty-icon svg { width: 26px; height: 26px; color: #9ca3af; } .cereri-empty-title { font-weight: 700; font-size: 15px; color: #111827; } .cereri-empty-sub { font-size: 13px; color: #6b7280; max-width: 240px; line-height: 1.45; } /* ── My Posts card mai compact ─────────────────────────────── */ #myPostsCard { margin-top: 10px !important; border-radius: 14px !important; } /* ── Loader spinner ────────────────────────────────────────── */ .cereri-loader { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; font-family: 'Sora', system-ui, sans-serif; font-size: 14px; color: #6b7280; } .cereri-spinner { width: 20px; height: 20px; border: 2.5px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ── MOBILE ────────────────────────────────────────────────── */ @media (max-width: 700px) { .cereri-topbar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; } .cereri-topbar-right { width: 100%; } .cereri-topbar-right .btn-orange { width: 100%; justify-content: center; } .cereri-tabs-wrap { flex-direction: column; align-items: flex-start; gap: 10px; } .cereri-tabs { width: 100%; justify-content: space-between; gap: 4px; padding: 4px; } .cereri-tab { flex: 1; justify-content: center; padding: 0 8px; height: 36px; font-size: 12.5px; } /* pe mobil ascunde text din unele taburi, pastreaza dot + count */ .cereri-tab .tab-label { /* vizibil pe mobil mare, ascuns pe mic */ } } @media (max-width: 420px) { .cereri-tab { padding: 0 6px; font-size: 12px; gap: 4px; } .cereri-tab .tab-label { display: none; /* doar dot + count pe telefoane mici */ } .cereri-tab .tab-dot { width: 9px; height: 9px; } }