/* ========================================================= USER PORTAL — MODERN UI LAYER Applied when is present. ========================================================= */ :root { --u-bg: #0b0f19; --u-surface: rgba(255, 255, 255, 0.06); --u-surface-2: rgba(255, 255, 255, 0.08); --u-border: rgba(255, 255, 255, 0.10); --u-text: #e7eaf0; --u-muted: #a2a9b8; --u-accent: #6d5efc; --u-accent-2: #2dd4bf; --u-danger: #ef4444; --u-radius: 16px; --u-radius-lg: 22px; --u-shadow: 0 18px 45px rgba(0, 0, 0, 0.45); } body.is-auth { background: radial-gradient(1200px 500px at 20% 0%, rgba(109, 94, 252, 0.14), transparent 60%), radial-gradient(900px 500px at 85% 15%, rgba(45, 212, 191, 0.12), transparent 55%), var(--u-bg); color: var(--u-text); } body.is-auth .premium-wrapper, body.is-auth .index-page-wrapper { background: transparent !important; } /* Typography */ body.is-auth h1, body.is-auth h2, body.is-auth h3, body.is-auth h4, body.is-auth h5, body.is-auth h6 { letter-spacing: -0.02em; } body.is-auth .text-secondary, body.is-auth .text-muted { color: var(--u-muted) !important; } /* Layout rhythm */ body.is-auth section { padding-top: 64px; padding-bottom: 64px; } /* Navbar (user area) */ body.is-auth .navbar-premium { background: rgba(10, 14, 24, 0.72) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 10px 0 !important; } body.is-auth .navbar-brand.brand-premium { font-size: 1.15rem !important; letter-spacing: -0.02em; background: none !important; -webkit-text-fill-color: unset !important; color: var(--u-text) !important; margin-right: 14px; } body.is-auth .nav-link-premium { color: rgba(231, 234, 240, 0.72) !important; font-size: 0.92rem !important; margin: 0 10px !important; padding: 8px 10px !important; border-radius: 999px; } body.is-auth .nav-link-premium:hover, body.is-auth .nav-link-premium.active { color: var(--u-text) !important; background: rgba(255, 255, 255, 0.06); } body.is-auth .dropdown-menu-premium { background: rgba(13, 18, 30, 0.96); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); } /* Surfaces */ body.is-auth .glass-card, body.is-auth .card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.04)) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: var(--u-radius) !important; box-shadow: var(--u-shadow); } body.is-auth .glass-card-hover:hover, body.is-auth .card:hover { transform: translateY(-4px); border-color: rgba(109, 94, 252, 0.28) !important; box-shadow: 0 26px 80px rgba(0, 0, 0, 0.60); } /* Buttons */ body.is-auth .btn, body.is-auth .btn-premium, body.is-auth .btn-nav-cta { border-radius: 999px; } body.is-auth .btn-premium, body.is-auth .btn-nav-cta { background: linear-gradient(135deg, rgba(109, 94, 252, 1), rgba(90, 72, 246, 1)); box-shadow: 0 14px 30px rgba(109, 94, 252, 0.30); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff !important; } body.is-auth .btn-premium-outline { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(231, 234, 240, 0.92) !important; } body.is-auth .btn-premium-outline:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } /* More visible bootstrap buttons in user area */ body.is-auth .btn-primary { background: linear-gradient(135deg, rgba(109, 94, 252, 1), rgba(90, 72, 246, 1)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 14px 30px rgba(109, 94, 252, 0.26); } body.is-auth .btn-outline-light { border-color: rgba(255, 255, 255, 0.22); color: rgba(231, 234, 240, 0.95); } body.is-auth .btn-outline-light:hover { background: rgba(255, 255, 255, 0.10); } /* Focus rings (accessibility + perceived quality) */ body.is-auth .btn:focus, body.is-auth .btn:focus-visible, body.is-auth .form-control:focus, body.is-auth .form-control-dark:focus { outline: none; } body.is-auth .btn:focus-visible { box-shadow: 0 0 0 0.25rem rgba(109, 94, 252, 0.22) !important; } /* ========================================================= Services catalog (user portal) ========================================================= */ body.is-auth .service-card { overflow: hidden; } body.is-auth .service-card-media { position: relative; height: 210px; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: radial-gradient(700px 240px at 10% 10%, rgba(109, 94, 252, 0.24), transparent 60%), radial-gradient(600px 240px at 85% 20%, rgba(45, 212, 191, 0.18), transparent 55%), rgba(255, 255, 255, 0.04); } body.light-mode.is-auth .service-card-media { border-bottom-color: rgba(15, 23, 42, 0.10); background: radial-gradient(700px 240px at 10% 10%, rgba(109, 94, 252, 0.16), transparent 60%), radial-gradient(600px 240px at 85% 20%, rgba(45, 212, 191, 0.12), transparent 55%), rgba(255, 255, 255, 0.65); } body.is-auth .service-card-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.02); } body.is-auth .service-card-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(231, 234, 240, 0.88); font-weight: 700; letter-spacing: 0.08em; } body.is-auth .service-price { font-size: 1.15rem; font-weight: 800; color: rgba(231, 234, 240, 0.98); } body.light-mode.is-auth .service-price { color: #0f172a; } /* ========================================================= Orders list (user portal) ========================================================= */ body.is-auth .orders-toolbar { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 14px; margin-bottom: 16px; } body.light-mode.is-auth .orders-toolbar { border-bottom-color: rgba(15, 23, 42, 0.08); } body.is-auth .status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.06); color: rgba(231, 234, 240, 0.92); } body.is-auth .status-pill i { font-size: 0.9rem; } body.is-auth .status-pill.is-pending { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.18); } body.is-auth .status-pill.is-approved { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.18); } body.is-auth .status-pill.is-completed { background: rgba(45, 212, 191, 0.12); border-color: rgba(45, 212, 191, 0.18); } body.is-auth .status-pill.is-rejected { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.18); } body.is-auth .orders-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; } body.is-auth .orders-table thead th { color: rgba(231, 234, 240, 0.55); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; border: none; padding: 10px 14px; } body.is-auth .orders-table tbody tr { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28); } body.is-auth .orders-table tbody td { padding: 14px; border: none; vertical-align: middle; color: rgba(231, 234, 240, 0.92); } body.is-auth .orders-table tbody tr td:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; } body.is-auth .orders-table tbody tr td:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; } body.is-auth .order-ref { color: rgba(162, 169, 184, 0.95); font-size: 0.85rem; } body.light-mode.is-auth .orders-table thead th { color: #6B7280; } body.light-mode.is-auth .orders-table tbody tr { background: #FFFFFF; border-color: #E5E7EB; box-shadow: 0 8px 20px rgba(0,0,0,0.04); } body.light-mode.is-auth .orders-table tbody td { color: #374151; } body.light-mode.is-auth .order-ref { color: #9CA3AF; } /* ========================================================= Profile (user portal) ========================================================= */ body.is-auth .profile-avatar { width: 92px; height: 92px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(135deg, rgba(109, 94, 252, 1), rgba(90, 72, 246, 1)); } body.is-auth .profile-badge { background: rgba(109, 94, 252, 0.16); color: rgba(231, 234, 240, 0.92); border: 1px solid rgba(109, 94, 252, 0.22); } body.light-mode.is-auth .profile-badge { color: rgba(15, 23, 42, 0.75); } /* Forms */ body.is-auth .form-control, body.is-auth .form-control-dark { border-radius: 14px !important; } body.is-auth .form-control-dark { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; } body.is-auth .form-control-dark:focus { border-color: rgba(109, 94, 252, 0.55) !important; box-shadow: 0 0 0 0.25rem rgba(109, 94, 252, 0.18) !important; } /* Tables */ body.is-auth .table-premium th { color: rgba(231, 234, 240, 0.55) !important; } /* Footer (subtle) */ body.is-auth .footer-premium { background: rgba(10, 14, 24, 0.65); } /* Light mode refinements (user area only) */ body.light-mode.is-auth { background: #FFFFFF !important; color: #0f172a !important; } body.light-mode.is-auth .navbar-premium { background: #FFFFFF !important; border-bottom: 1px solid #E5E7EB !important; } body.light-mode.is-auth .navbar-brand.brand-premium { color: #0f172a !important; } body.light-mode.is-auth .nav-link-premium { color: rgba(15, 23, 42, 0.92) !important; } body.light-mode.is-auth .glass-card, body.light-mode.is-auth .card { background: #FFFFFF !important; border: 1px solid #E5E7EB !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important; } /* ========================================================= WhatsApp-ish chat UI (user portal) ========================================================= */ body.is-auth .chat-shell { height: calc(100vh - 140px); min-height: 620px; max-height: 860px; display: flex; flex-direction: column; overflow: hidden; } body.is-auth .chat-mobile-tabs { display: flex; padding: 12px 16px 0; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex: 0 0 auto; } body.is-auth .chat-mobile-tab { flex: 1 1 0; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: rgba(231, 234, 240, 0.92); border-radius: 999px; padding: 10px 14px; font-weight: 700; } body.is-auth .chat-mobile-tab.is-active { background: linear-gradient(135deg, rgba(109, 94, 252, 1), rgba(90, 72, 246, 1)); color: #fff; border-color: rgba(255, 255, 255, 0.14); } body.is-auth .chat-layout { position: relative; min-height: 0; flex: 1 1 auto; height: 100%; overflow: hidden; } body.is-auth .chat-layout.two-portions { grid-template-columns: 1fr; } body.is-auth .chat-sidebar { border-right: 1px solid rgba(255, 255, 255, 0.08); padding: 18px; background: radial-gradient(400px 160px at 0% 0%, rgba(109, 94, 252, 0.12), transparent 65%), rgba(255, 255, 255, 0.02); overflow-y: auto; } body.is-auth .offer-panel { border-left: 0; padding: 18px; background: radial-gradient(400px 160px at 100% 0%, rgba(45, 212, 191, 0.10), transparent 65%), rgba(255, 255, 255, 0.02); overflow-y: auto; min-height: 0; display: none; height: 100%; } body.is-auth .offer-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } body.is-auth .chat-back-btn { display: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: rgba(231, 234, 240, 0.94); align-items: center; justify-content: center; } body.is-auth .chat-main { min-width: 0; display: none; flex-direction: column; min-height: 0; overflow: hidden; height: 100%; } body.is-auth .chat-main.is-active, body.is-auth .offer-panel.is-active { display: flex; } body.is-auth .chat-sidebar-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } body.is-auth .chat-order-switcher { margin-bottom: 18px; } body.is-auth .chat-order-card { border-radius: 20px; padding: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24); } body.is-auth .chat-order-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; background: rgba(109, 94, 252, 0.14); border: 1px solid rgba(109, 94, 252, 0.22); color: rgba(231, 234, 240, 0.95); font-size: 0.82rem; font-weight: 700; } body.is-auth .chat-order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.is-auth .chat-order-stat { padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); } body.is-auth .chat-order-stat span { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(162, 169, 184, 0.95); margin-bottom: 6px; } body.is-auth .chat-order-stat strong { display: block; color: rgba(231, 234, 240, 0.98); } body.is-auth .chat-order-stat-wide { grid-column: 1 / -1; } body.is-auth .chat-milestone-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } body.is-auth .chat-milestone-item { padding: 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.16); } body.is-auth .chat-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); } body.is-auth .chat-peer { display: flex; align-items: center; gap: 12px; min-width: 0; } body.is-auth .chat-avatar-lg { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: rgba(45, 212, 191, 0.16); border: 1px solid rgba(45, 212, 191, 0.22); color: rgba(231, 234, 240, 0.95); flex: 0 0 auto; } body.is-auth .chat-peer-title { font-weight: 700; color: var(--u-text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.is-auth .chat-peer-subtitle { font-size: 0.82rem; color: rgba(162, 169, 184, 0.95); } body.is-auth .chat-feed { padding: 18px 16px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; height: 0; scroll-behavior: smooth; } body.is-auth .chat-row { display: flex; } body.is-auth .chat-row.is-me { justify-content: flex-end; } body.is-auth .chat-bubble { max-width: min(74%, 540px); padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); position: relative; } body.is-auth .chat-author { font-size: 0.75rem; font-weight: 700; margin-bottom: 6px; color: rgba(162, 169, 184, 0.95); text-transform: uppercase; letter-spacing: 0.08em; } body.is-auth .chat-row.is-me .chat-author { color: rgba(255, 255, 255, 0.82); } body.is-auth .chat-row.is-me .chat-bubble { background: linear-gradient(135deg, rgba(109, 94, 252, 1), rgba(90, 72, 246, 1)); border-color: rgba(255, 255, 255, 0.10); } body.is-auth .chat-text { white-space: pre-wrap; word-break: break-word; line-height: 1.45; } body.is-auth .chat-meta { margin-top: 6px; font-size: 0.74rem; opacity: 0.85; display: flex; justify-content: flex-end; gap: 6px; align-items: center; color: rgba(231, 234, 240, 0.85); } body.is-auth .chat-row.is-them .chat-meta { color: rgba(162, 169, 184, 0.95); } body.is-auth .chat-attachment { margin-top: 8px; } body.is-auth .chat-image { max-width: 320px; width: 100%; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.10); display: block; } body.is-auth .chat-file { display: inline-flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(0, 0, 0, 0.18); text-decoration: none; color: rgba(231, 234, 240, 0.95); } body.is-auth .chat-file:hover { background: rgba(0, 0, 0, 0.26); color: rgba(231, 234, 240, 1); } body.is-auth .chat-composer { padding: 14px 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(10, 14, 24, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.is-auth .chat-composer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; } body.is-auth .chat-composer-main { min-width: 0; } body.is-auth .chat-composer-actions { display: flex; align-items: center; gap: 10px; } body.is-auth .chat-message-input { min-height: 52px; max-height: 160px; resize: none; padding: 14px 16px !important; line-height: 1.5; } body.is-auth .chat-composer-note { margin-top: 10px; font-size: 0.78rem; color: rgba(162, 169, 184, 0.92); } body.is-auth .chat-empty-state { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } body.is-auth .chat-offer-actions { padding: 0; margin-top: 16px; } body.is-auth .chat-offer-title { margin-bottom: 12px; } body.is-auth .chat-counter-card { border-radius: 18px; padding: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } body.is-auth .chat-icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.04); color: rgba(231, 234, 240, 0.90); } body.is-auth .chat-icon-btn:hover { background: rgba(255, 255, 255, 0.07); color: rgba(231, 234, 240, 1); } body.is-auth .chat-send-btn { width: 44px; height: 44px; border-radius: 999px; border: none; background: linear-gradient(135deg, rgba(109, 94, 252, 1), rgba(90, 72, 246, 1)); color: #fff; box-shadow: 0 12px 26px rgba(109, 94, 252, 0.26); } body.is-auth .chat-send-btn:hover { transform: translateY(-1px); } body.light-mode.is-auth .chat-topbar { border-bottom-color: rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.60); } body.light-mode.is-auth .chat-sidebar { background: rgba(255, 255, 255, 0.72); border-right-color: rgba(15, 23, 42, 0.08); } body.light-mode.is-auth .offer-panel { background: rgba(255, 255, 255, 0.72); } body.light-mode.is-auth .chat-mobile-tab { color: #0f172a; background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); } body.light-mode.is-auth .chat-back-btn { color: #0f172a; border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.04); } body.light-mode.is-auth .chat-order-card, body.light-mode.is-auth .chat-order-stat, body.light-mode.is-auth .chat-counter-card { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 23, 42, 0.08); } body.light-mode.is-auth .chat-order-badge { color: #0f172a; } body.light-mode.is-auth .chat-bubble { background: rgba(255, 255, 255, 0.94); border-color: rgba(15, 23, 42, 0.10); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08); } body.light-mode.is-auth .chat-row.is-me .chat-bubble { color: #fff; } body.light-mode.is-auth .chat-row.is-them .chat-meta { color: rgba(15, 23, 42, 0.62); } body.light-mode.is-auth .chat-composer { background: rgba(255, 255, 255, 0.80); border-top-color: rgba(15, 23, 42, 0.08); } @media (max-width: 991.98px) { body.is-auth .chat-shell { height: calc(100vh - 100px); min-height: 0; max-height: none; } body.is-auth .offer-panel { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 14px; } body.is-auth .chat-back-btn { display: inline-flex; } body.is-auth .chat-order-grid { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { body.is-auth .chat-topbar { padding: 12px; } body.is-auth .chat-sidebar, body.is-auth .offer-panel, body.is-auth .chat-feed, body.is-auth .chat-composer { padding-left: 12px; padding-right: 12px; } body.is-auth .chat-feed { padding-top: 14px; } body.is-auth .chat-bubble { max-width: 88%; } body.is-auth .chat-image { max-width: 100%; } body.is-auth .chat-composer-grid { grid-template-columns: 1fr; align-items: stretch; } body.is-auth .chat-composer-actions { justify-content: space-between; } body.is-auth .chat-icon-btn, body.is-auth .chat-send-btn { width: 46px; height: 46px; } }