/* ========================================================= KATSINASUB — Premium Fintech Design Tokens Palette: Deep Navy (primary/dark), Emerald Green (accent), White / Light Grey (background), for a banking- grade, non-generic look distinct from typical VTU templates. Type: Space Grotesk (display) + Inter (body) ========================================================= */ :root{ --navy: #0B1E3D; --navy-soft: #142B52; --navy-deep: #071429; --emerald: #0F9D6B; --emerald-dark:#0B7C55; --emerald-tint:#E7F6EF; --paper: #F7F9FC; --paper-dim: #EEF2F7; --white: #FFFFFF; --line: #E1E6EE; --red: #D64545; --red-tint: #FCEAEA; --amber-dark: #B7791F; --amber-tint: #FBF3E1; --text: #10182B; --text-dim: #64708A; /* Backward-compatible aliases so existing markup keeps working */ --ink: var(--navy); --ink-soft: var(--navy-soft); --amber: var(--emerald); --teal: var(--emerald); --teal-dim: var(--emerald-tint); --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; } *{ box-sizing: border-box; } /* overflow-x uses "clip" (not "hidden") specifically so it does NOT turn overflow-y into an implicit scroll container — "hidden" on one axis forces the other axis to compute as "auto" per the CSS Overflow spec, which turns into its own internal scrollbox on some mobile browsers and breaks position:sticky headers (they scroll away instead of staying pinned). "clip" prevents the same horizontal overflow without that side effect. */ html{ scroll-behavior: smooth; max-width: 100%; overflow-x: clip; } body{ margin:0; max-width: 100%; overflow-x: clip; font-family: var(--font-body); background: var(--paper); color: var(--text); line-height: 1.5; } a{ color: inherit; text-decoration: none; } h1,h2,h3,h4{ font-family: var(--font-display); margin: 0 0 .4em; line-height: 1.15; } p{ margin: 0 0 1em; color: var(--text-dim); max-width: 62ch; } button, .btn{ font-family: var(--font-body); font-weight: 600; border: none; border-radius: 10px; padding: 13px 22px; cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; transition: transform .12s ease, background .15s ease, box-shadow .15s ease; } .btn:active{ transform: translateY(1px); } .btn-primary{ background: var(--navy); color: var(--white); } .btn-primary:hover{ background: var(--navy-soft); } .btn-amber{ background: var(--emerald); color: var(--white); box-shadow: 0 6px 16px rgba(15,157,107,.25); } .btn-amber:hover{ background: var(--emerald-dark); } .btn-emerald{ background: var(--emerald); color: #fff; } .btn-emerald:hover{ background: var(--emerald-dark); } .btn-outline{ background: transparent; color: var(--navy); border: 1.5px solid var(--line); } .btn-outline:hover{ border-color: var(--navy); } .btn-block{ width: 100%; justify-content: center; } input, select, textarea{ font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--white); width: 100%; color: var(--text); } input:focus, select:focus, textarea:focus, button:focus, a:focus{ outline: 2px solid var(--emerald); outline-offset: 2px; } label{ font-size: 13px; font-weight: 600; color: var(--text-dim); display:block; margin-bottom: 6px; } .field{ margin-bottom: 18px; } .container{ max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* ---------- Top nav (public pages) ---------- */ .topnav{ display:flex; align-items:center; justify-content:space-between; padding: 22px 0; } .brand{ font-family: var(--font-display); font-weight: 700; font-size: 21px; display:flex; align-items:center; gap: 10px; color: var(--navy); } .brand .dot{ width:34px; height:34px; border-radius:10px; background: linear-gradient(145deg, var(--navy) 0%, var(--navy-soft) 100%); display:inline-flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:15px; color: var(--emerald); flex-shrink:0; border: 1.5px solid var(--emerald); } .brand .dot::before{ content:"K"; } .brand .brand-logo-img{ width:34px; height:34px; min-width:34px; min-height:34px; border-radius:0; object-fit:contain; flex-shrink:0; display:block; } .sidebar .brand{ color: var(--white); } .sidebar .brand .dot{ background: var(--emerald); color: var(--navy); border-color: transparent; } .nav-links{ display:flex; gap: 30px; align-items:center; font-weight: 500; font-size: 14.5px; } .nav-links a:not(.btn):hover{ color: var(--emerald-dark); } /* ---------- Hero ---------- */ .hero{ padding: 64px 0 44px; display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; } .hero h1{ font-size: clamp(32px, 5vw, 50px); color: var(--navy); } .hero .lede{ font-size: 17px; max-width: 46ch; } .hero-stats{ display:flex; gap: 32px; margin-top: 28px; } .hero-stats .stat b{ font-family: var(--font-display); font-size: 26px; display:block; color: var(--navy); } .hero-stats .stat span{ font-size: 13px; color: var(--text-dim); } .hero-card{ background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--paper); border-radius: 20px; padding: 32px; position: relative; overflow: hidden; box-shadow: 0 20px 44px rgba(11,30,61,.22); } .hero-card::after{ content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; background: var(--emerald); opacity:.15; border-radius:50%; } .hero-card .price-row{ display:flex; justify-content:space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14px; position:relative;} .hero-card .price-row:last-child{ border-bottom:none; } .hero-card .tag{ color: var(--emerald); font-size: 12.5px; font-weight:700; letter-spacing:.06em; } @media (max-width: 860px){ .hero{ grid-template-columns: 1fr; padding-top: 32px; } .nav-links{ display:none; } } /* ---------- Auth pages ---------- */ .auth-wrap{ min-height: 100vh; display:flex; align-items:center; justify-content:center; background: var(--navy-deep); padding: 24px; background-image: radial-gradient(circle at 20% 20%, rgba(15,157,107,.18), transparent 40%); } .auth-card{ background: var(--white); border-radius: 18px; padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 24px 60px rgba(0,0,0,.35); } .auth-card h2{ font-size: 26px; color: var(--navy); } .auth-foot{ margin-top: 18px; font-size: 14px; text-align:center; color: var(--text-dim); } /* ---------- App shell (dashboard) ---------- */ .app{ display:grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .sidebar{ background: var(--navy); color: var(--paper); padding: 26px 20px; } .sidebar .brand{ margin-bottom: 34px; } .sidebar nav a{ display:flex; align-items:center; gap: 10px; padding: 11px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: rgba(247,249,252,.7); margin-bottom: 2px; } .sidebar nav a:hover{ background: rgba(255,255,255,.06); color: var(--white); } .sidebar nav a.active{ background: var(--emerald); color: var(--white); font-weight:700; } .sidebar .divider{ height:1px; background: rgba(255,255,255,.1); margin: 16px 0; } .main{ padding: 30px 36px; min-width: 0; } .topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 28px; flex-wrap:wrap; gap:14px; } .wallet-pill{ background: var(--navy); color: var(--white); border-radius: 999px; padding: 10px 18px; display:flex; align-items:center; gap: 10px; font-family: var(--font-display); font-size: 15px; } .wallet-pill span{ color: var(--emerald); } .grid{ display:grid; gap: 20px; } .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-2{ grid-template-columns: repeat(2, 1fr); } .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; } /* ---------- Mobile nav toggle ---------- */ .mobile-nav-toggle{ display:none; align-items:center; justify-content:center; width: 38px; height:38px; border-radius: 10px; background: var(--navy); color: var(--white); border:none; cursor:pointer; font-size: 18px; flex-shrink:0; } .sidebar-backdrop{ display:none; } @media (max-width: 860px){ .grid-3,.grid-2{ grid-template-columns: 1fr; } .footer-grid{ grid-template-columns: 1fr; } .app{ grid-template-columns: 1fr; } .mobile-nav-toggle{ display:inline-flex; } .main{ padding: 16px; } .card{ padding: 16px; } .site-topbar{ padding: 8px 14px; } .topbar h2{ font-size: 20px; } .topbar p{ font-size: 13px; } table{ font-size: 12.5px; } th,td{ padding: 9px 10px; } /* Small phones: hamburger + logo + 4 icon buttons no longer fit comfortably side by side at full size — tighten spacing, shrink the icon buttons slightly, and drop the site name text next to the logo (the logo mark alone is enough at this width) so the 3-dot account menu never gets pushed off-screen. */ .site-topbar .left{ gap:8px; min-width:0; } .site-topbar .brand{ overflow:hidden; } .site-topbar .brand .brand-text{ display:none; } .site-topbar .brand .dot, .site-topbar .brand .brand-logo-img{ width:42px; height:42px; min-width:42px; min-height:42px; } .site-topbar .right{ gap:5px; } .site-topbar .icon-btn{ width:33px; height:33px; font-size:15px; } .site-topbar .icon-btn svg{ width:16px; height:16px; } .sidebar{ position: fixed; top:0; left:0; height:100vh; width: 260px; z-index: 1000; transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto; } .sidebar.open{ transform: translateX(0); } .sidebar-backdrop{ display:block; position:fixed; inset:0; background: rgba(7,20,41,.5); z-index: 999; opacity:0; pointer-events:none; transition: opacity .22s ease; } .sidebar-backdrop.open{ opacity:1; pointer-events:auto; } } /* ---------- Language switcher (sidebar) ---------- */ .lang-switch{ display:flex; align-items:center; gap: 8px; padding: 8px 12px; font-size: 13px; color: rgba(247,249,252,.6); } .lang-switch a{ color: rgba(247,249,252,.7); font-weight:600; padding: 2px 4px; border-radius:4px; } .lang-switch a.lang-active{ color: var(--emerald); background: rgba(255,255,255,.06); } .lang-switch a:hover{ color: var(--white); } .lang-switch-sep{ opacity:.4; } /* ---------- Language switcher (guest pages: login/register/landing) ---------- */ .guest-topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; } .guest-lang-switch{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); } .guest-lang-switch a{ color:var(--text-dim); font-weight:600; padding:3px 7px; border-radius:6px; border:1px solid var(--line); } .guest-lang-switch a.lang-active{ color:#fff; background:var(--emerald); border-color:var(--emerald); } .guest-lang-switch-sep{ opacity:.4; } .card{ background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 2px 10px rgba(16,24,43,.04); overflow-x: auto; /* if content (e.g. a wide table) is wider than the card, scroll inside it instead of breaking page width */ } .card h3{ font-size: 15px; color: var(--text-dim); font-weight: 600; } .card .big{ font-family: var(--font-display); font-size: 30px; margin-top: 4px; color: var(--navy); } table{ width:100%; border-collapse: collapse; font-size: 14px; } th,td{ text-align:left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } th{ color: var(--text-dim); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; } .pill{ padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; display:inline-block; } .pill-ok{ background: var(--emerald-tint); color: var(--emerald-dark); } .pill-pending{ background: var(--amber-tint); color: var(--amber-dark); } .pill-fail{ background: var(--red-tint); color: var(--red); } .alert{ padding: 14px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; } .alert-error{ background: var(--red-tint); color: var(--red); } .alert-ok{ background: var(--emerald-tint); color: var(--emerald-dark); } .network-pick{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .network-pick label{ border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 18px; cursor:pointer; font-weight: 700; color: var(--text); margin:0; } .network-pick input{ display:none; } .network-pick label:has(input:checked){ border-color: var(--emerald); background: var(--emerald-tint); color: var(--emerald-dark); } footer.site-footer{ padding: 40px 0; text-align:center; color: var(--text-dim); font-size: 13px; } /* ---------- Site-wide topbar (hamburger + WhatsApp + bell + account) ---------- */ .site-topbar{ position: sticky; top: 0; z-index: 800; display:flex; align-items:center; justify-content:space-between; background: var(--white); border-bottom: 1px solid var(--line); padding: 10px 20px; } .site-topbar .left{ display:flex; align-items:center; gap:12px; } .site-topbar .right{ display:flex; align-items:center; gap:10px; } .icon-btn{ position:relative; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--paper-dim); text-decoration:none; font-size:17px; border:none; cursor:pointer; color: var(--text); } .icon-btn .badge{ position:absolute; top:-3px; right:-3px; background:#D64545; color:#fff; font-size:10px; line-height:1; border-radius:999px; padding:3px 5px; font-weight:700; } .account-avatar{ background: var(--navy); color:var(--white); font-weight:700; } .account-menu{ position:relative; } .account-dropdown{ position:absolute; right:0; top:46px; background: var(--white); border:1px solid var(--line); border-radius:12px; box-shadow: 0 12px 28px rgba(7,20,41,.14); min-width:200px; overflow:hidden; z-index:900; opacity:0; visibility:hidden; transform: translateY(-6px) scale(.97); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .account-menu.open .account-dropdown{ opacity:1; visibility:visible; transform: translateY(0) scale(1); } .account-dropdown a{ display:block; padding:11px 16px; font-size:14px; color: var(--text); text-decoration:none; } .account-dropdown a:hover{ background: var(--paper-dim); } .dropdown-divider{ height:1px; background: var(--line); margin: 4px 0; } .site-topbar .mobile-nav-toggle{ display:none; } @media (max-width: 860px){ .site-topbar .mobile-nav-toggle{ display:inline-flex; } } /* ---------- Dashboard services grid (2-per-row mobile, icon + label cards) ---------- */ .services-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .service-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding: 22px 12px; border-radius:16px; background: var(--white); border:1px solid var(--line); box-shadow: 0 4px 14px rgba(7,20,41,.06); text-decoration:none; color: var(--text); transition: transform .15s ease, box-shadow .15s ease; min-width: 0; /* allow shrinking inside the grid track instead of forcing overflow */ } .service-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(7,20,41,.1); } .service-card .service-icon{ width:50px; height:50px; border-radius:50%; flex-shrink:0; background: linear-gradient(135deg, var(--emerald-tint), #fff); border: 1px solid rgba(15,157,107,.15); display:flex; align-items:center; justify-content:center; font-size:23px; } .service-card .service-name{ font-size:13px; font-weight:600; line-height:1.3; width:100%; overflow-wrap: break-word; word-break: break-word; } @media (max-width: 860px){ .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .service-card{ padding: 14px 6px; border-radius:14px; gap:8px; } .service-card .service-icon{ width:40px; height:40px; font-size:18px; } .service-card .service-name{ font-size:12px; } } /* ---------- Admin Panel — distinct visual theme (indigo/violet) ---------- */ .admin-badge{ font-size:10px; font-weight:800; letter-spacing:.5px; background: #7C3AED; color:#fff; padding: 2px 7px; border-radius: 999px; vertical-align: middle; } body.admin-theme{ --navy: #211B4E; --navy-soft: #322A6E; --navy-deep: #16123A; --emerald: #7C3AED; --emerald-dark: #6D28D9; --emerald-tint: #F1EBFF; } body.admin-theme .site-topbar{ background: var(--navy-deep); border-bottom-color: rgba(255,255,255,.08); } body.admin-theme .site-topbar .brand{ color:#fff; } body.admin-theme .icon-btn{ background: rgba(255,255,255,.08); color:#fff; } body.admin-theme .account-dropdown{ background: var(--navy-soft); border-color: rgba(255,255,255,.12); } body.admin-theme .account-dropdown a{ color:#fff; } body.admin-theme .account-dropdown a:hover{ background: rgba(255,255,255,.08); } body.admin-theme .dropdown-divider{ background: rgba(255,255,255,.12); } /* ---------- Transaction History category tabs ---------- */ .category-tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .category-tabs::-webkit-scrollbar{ display:none; } .category-tab{ flex-shrink:0; padding: 8px 16px; border-radius:999px; font-size:13px; font-weight:600; background: var(--white); border:1px solid var(--line); color: var(--text-dim); text-decoration:none; white-space:nowrap; } .category-tab.active{ background: var(--navy); border-color: var(--navy); color:#fff; } /* Mobile dropdown alternative to the pill tabs — shows every category with no scrolling */ .category-select-wrap{ display:none; margin-bottom:18px; } .category-select{ font-weight:600; background: var(--white); } /* ---------- Transaction search row ---------- */ .txn-search-row{ display:flex; gap:10px; margin-bottom:20px; } .txn-search-row input{ flex:1; } .txn-search-row .btn{ flex-shrink:0; padding: 12px 18px; } @media (max-width: 860px){ /* Swap: hide the horizontally-scrolling pill tabs, show the dropdown instead */ .category-tabs{ display:none; } .category-select-wrap{ display:block; } .txn-search-row{ flex-wrap:wrap; } .txn-search-row .btn{ flex:1; } /* Transaction table -> stacked cards so nothing needs horizontal scrolling */ table.txn-table thead{ display:none; } table.txn-table, table.txn-table tbody, table.txn-table tr, table.txn-table td{ display:block; width:100%; } table.txn-table tr{ border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } table.txn-table td{ display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom: 1px dashed var(--line); padding: 8px 0; white-space: normal; text-align:right; } table.txn-table td:last-child{ border-bottom:none; } table.txn-table td[data-label]::before{ content: attr(data-label); font-weight:600; color: var(--text-dim); text-align:left; flex-shrink:0; } table.txn-table td[data-label=""]::before{ content: none; } } /* ---------- Admin Panel tables -> stacked cards on mobile ---------- Same goal as .txn-table (nothing should need horizontal scrolling on a phone), but built for admin cells that often contain a whole form (several inputs/selects side by side), not just plain text. So instead of a flex row with the label on the left and the value pinned right, the label sits above and the cell's content (however wide) simply flows underneath at full width. */ @media (max-width: 860px){ table.admin-table thead{ display:none; } table.admin-table, table.admin-table tbody, table.admin-table tr, table.admin-table td{ display:block; width:100%; } table.admin-table tr{ border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } table.admin-table td{ border-bottom: 1px dashed var(--line); padding: 8px 0; white-space: normal; } table.admin-table td:last-child{ border-bottom:none; } table.admin-table td[data-label]::before{ content: attr(data-label); display:block; font-weight:600; color: var(--text-dim); margin-bottom: 6px; } table.admin-table td[data-label=""]::before{ content: none; } table.admin-table td form{ flex-wrap: wrap; } } /* ========================================================= DARK MODE Toggled by adding class "dark-mode" to (see includes/header.php + includes/footer.php). Because every component above is built with var(--paper)/var(--white)/ var(--text)/var(--line) etc, redefining those tokens here is enough to re-skin the whole app — no component rules need to be duplicated. ========================================================= */ :root.dark-mode{ --paper: #0B1220; --paper-dim: #0F1A2E; --white: #121E36; --line: #24324E; --emerald-tint:#0F2A22; --red-tint: #3A1B1E; --amber-tint: #332708; --text: #E7ECF5; --text-dim: #93A1BC; } :root.dark-mode .sidebar{ background: var(--navy-deep); } :root.dark-mode .service-card{ background: var(--white); border-color: var(--line); } :root.dark-mode input, :root.dark-mode select, :root.dark-mode textarea{ background: var(--paper-dim); color: var(--text); border-color: var(--line); } /* ---------- Theme toggle button (sun/moon) in the top bar ---------- */ .theme-toggle-btn{ font-size:17px; } /* ---------- Floating live-chat launcher + widget (customer side) ---------- */ .chat-bubble-btn{ position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--emerald); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; cursor:pointer; box-shadow: 0 8px 20px rgba(15,157,107,.4); z-index: 999; } .chat-widget{ position: fixed; right: 20px; bottom: 88px; width: 340px; max-width: calc(100vw - 32px); height: 440px; max-height: 65vh; background: var(--white); border:1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden; z-index: 999; transform: translateY(12px) scale(.97); opacity:0; pointer-events:none; transition: all .15s ease; } .chat-widget.open{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; } .chat-widget-head{ background: var(--navy); color:#fff; padding: 14px 16px; font-weight:700; display:flex; justify-content:space-between; align-items:center; } .chat-widget-head button{ background:none; color:#fff; font-size:20px; padding:0; cursor:pointer; } .chat-widget-messages{ flex:1; overflow-y:auto; padding: 12px; display:flex; flex-direction:column; gap:8px; } .chat-widget-input{ display:flex; gap:8px; padding: 10px; border-top:1px solid var(--line); } .chat-widget-input input{ flex:1; } /* ---------- Chat bubble style, shared by widget and admin panel ---------- */ .chat-bubble{ max-width: 80%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height:1.4; position:relative; } .chat-bubble-me{ align-self:flex-end; background: var(--emerald); color:#fff; border-bottom-right-radius:4px; } .chat-bubble-them{ align-self:flex-start; background: var(--paper-dim); color: var(--text); border-bottom-left-radius:4px; } .chat-bubble-time{ display:block; font-size:10px; opacity:.7; margin-top:3px; } /* ---------- Admin live-chat two-pane layout ---------- */ .chat-admin-wrap{ display:flex; height: 620px; max-height: 75vh; } .chat-admin-list{ width: 280px; flex-shrink:0; border-right:1px solid var(--line); overflow-y:auto; } .chat-admin-item{ padding: 12px 14px; border-bottom:1px solid var(--line); cursor:pointer; } .chat-admin-item:hover, .chat-admin-item.active{ background: var(--paper-dim); } .chat-admin-window{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; } .chat-admin-window-head{ padding: 14px 16px; border-bottom:1px solid var(--line); font-weight:700; } .chat-admin-messages{ flex:1; overflow-y:auto; padding: 14px; display:flex; flex-direction:column; gap:8px; min-height:0; } .chat-admin-input{ display:none; gap:8px; padding: 12px; border-top:1px solid var(--line); } .chat-admin-input input{ flex:1; } /* Live Chat attachments (photos, screenshots, PDFs) */ .chat-attach-btn{ background:none; border:1px solid var(--line); border-radius:8px; font-size:16px; padding:0 10px; cursor:pointer; line-height:2.2; flex-shrink:0; } .chat-attach-btn:hover{ background: var(--paper-dim); } .chat-pending-attachment{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 12px; font-size:12.5px; background: var(--paper-dim); border-top:1px solid var(--line); } .chat-pending-attachment button{ background:none; font-size:16px; line-height:1; cursor:pointer; color: var(--text-dim); } .chat-attachment-img{ display:block; max-width:180px; max-height:180px; border-radius:10px; margin-top:6px; object-fit:cover; } .chat-attachment-file{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:6px 10px; border-radius:8px; background: rgba(0,0,0,.06); font-size:12.5px; text-decoration:none; color:inherit; } .chat-bubble-me .chat-attachment-file{ background: rgba(255,255,255,.2); color:#fff; } @media (max-width: 700px){ .chat-admin-wrap{ flex-direction:column; height: 72vh; max-height: 72vh; } .chat-admin-list{ width:100%; max-height:150px; border-right:none; border-bottom:1px solid var(--line); } } /* ---------- "Confirm your order" modal (buy-*.php pages) ---------- */ .confirm-modal-overlay{ position: fixed; inset: 0; background: rgba(10,15,25,.55); display:none; align-items:center; justify-content:center; z-index: 1200; padding: 16px; } .confirm-modal-overlay.open{ display:flex; } .confirm-modal{ background: var(--white); border-radius: 16px; padding: 24px; width: 100%; max-width: 380px; box-shadow: 0 24px 60px rgba(0,0,0,.3); } .confirm-modal h3{ margin-bottom: 10px; } .confirm-modal p{ color: var(--text-dim); margin-bottom: 20px; line-height:1.5; } .confirm-modal-actions{ display:flex; gap:10px; } .confirm-modal-actions .btn{ flex:1; } /* ---------- "Processing / Result" spinner modal (buy-*.php pages) ---------- */ .order-spinner{ width: 46px; height: 46px; margin: 6px auto 0; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--emerald-dark); animation: order-spin 0.8s linear infinite; } @keyframes order-spin{ to{ transform: rotate(360deg); } } /* ===== API Documentation page ===== */ .doc-layout{ display:flex; gap:24px; align-items:flex-start; max-width:100%; } .doc-toc{ position: sticky; top: 20px; flex: 0 0 210px; background: var(--navy); border-radius: 14px; padding: 16px; box-sizing:border-box; } .doc-toc a{ display:block; color: var(--paper); opacity:.75; font-size: 13.5px; padding: 7px 10px; border-radius: 8px; text-decoration:none; margin-bottom:2px; } .doc-toc a:hover, .doc-toc a.active{ background: var(--emerald); opacity:1; color:#fff; } .doc-toc .toc-heading{ color: var(--emerald); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin: 14px 0 4px; padding: 0 10px; } .doc-toc .toc-heading:first-child{ margin-top:0; } .doc-content{ flex: 1; min-width:0; max-width:100%; } .doc-section{ margin-bottom: 34px; scroll-margin-top: 20px; } .doc-section h2{ font-size: 21px; color: var(--navy); margin-bottom: 6px; } .doc-section h3{ font-size: 16.5px; margin: 18px 0 8px; } .endpoint-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin: 22px 0 6px; } .method-badge{ font-family: var(--font-mono, monospace); font-weight:700; font-size:12px; padding:4px 10px; border-radius:6px; color:#fff; letter-spacing:.03em; } .method-post{ background:#0B7C55; } .method-get{ background:#1D6FE0; } .endpoint-path{ font-family: var(--font-mono, monospace); font-size:14px; color: var(--navy); background: var(--emerald-tint); padding:4px 10px; border-radius:6px; word-break:break-all; } .code-block{ background: var(--navy-deep); color:#D7E4FF; border-radius:10px; padding:16px 18px; font-family: var(--font-mono, monospace); font-size:13px; line-height:1.6; overflow-x:auto; margin: 10px 0 18px; white-space:pre; max-width:100%; width:100%; box-sizing:border-box; -webkit-overflow-scrolling:touch; } .code-block .cm{ color:#7C93C4; } .params-table{ display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse: collapse; margin: 10px 0 18px; font-size: 13.5px; box-sizing:border-box; } .params-table tbody, .params-table tr{ display:table; width:100%; } .params-table th{ text-align:left; color: var(--text-dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; padding: 6px 10px; border-bottom: 2px solid var(--line); } .params-table td{ padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align:top; } .params-table code{ background: var(--emerald-tint); color: var(--emerald-dark); padding:1px 6px; border-radius:5px; font-size:12.5px; } .req-badge{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px; letter-spacing:.03em; } .req-yes{ background:#FDE8E8; color:#C0392B; } .req-no{ background:#EAF0F6; color:#64708A; } .status-table td:first-child{ font-family: var(--font-mono, monospace); font-weight:700; } @media (max-width: 900px){ .doc-layout{ flex-direction:column; } .doc-toc{ position: static; width:100%; flex:none; display:flex; flex-wrap:wrap; gap:4px; } .doc-toc .toc-heading{ display:none; } .doc-toc a{ flex: 0 0 auto; padding:6px 10px; } }