/* ============================================================ v3 admin UI — consolidated styles Used by index_v3.php, pageHeader_v3.php, uiChoose_v3.php, and any future *_v3.php pages. Extracted from _admin/_sketches/sketch_home_v3*.html and sketch_sidebar*.html. ============================================================ */ /* -------- Sidebar user-card: low-poly background container -------- */ /* Background image itself is generated dynamically via JS in pageHeader_v3.php. This CSS provides the fallback color, the dot overlay, and the z-index stack. */ .sidebar-user-material { /* Bootstrap-limitless's .navbar has a 1px transparent border-bottom that .navbar-light colors to rgba(0,0,0,0.125). The sidebar's .sidebar-content is positioned at top:3.00003rem which uses the navbar's base height (not counting the border) — leaving a 1px gap. Pull the user-card up by 1px so it sits flush against the navbar's border. */ margin-top: -1px; } .sidebar-user-material .sidebar-user-material-body { background: #0a2e5e center center no-repeat; background-size: cover; position: relative; overflow: hidden; /* +1px to absorb the -1px margin-top above; keeps the bottom flush with the next sidebar element. */ padding-bottom: 1px; } .sidebar-user-material .sidebar-user-material-body::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 14px 14px; pointer-events: none; opacity: 0.6; } .sidebar-user-material .sidebar-user-material-body > * { position: relative; z-index: 1; } /* -------- Sidebar nav tweaks -------- */ .nav-sidebar .nav-group-sub .nav-link > i:first-child { margin-right: 0 !important; } /* Small breathing room between the low-poly user-card and the first menu item */ .sidebar-content .card.card-sidebar-mobile { margin-top: 2px; } /* -------- Active-link highlight (stronger than the default light grey) -------- */ /* Sidebar is on the right in RTL, so the inner-edge indicator sits on the LEFT of each link. */ .nav-sidebar .nav-link.active, .nav-sidebar .nav-item.nav-item-submenu > .nav-link.active { background-color: rgba(33,150,243,0.10) !important; color: #0d47a1 !important; font-weight: 600; box-shadow: inset 3px 0 0 #1976D2; } .nav-sidebar .nav-link.active > i { color: #1976D2 !important; } /* Inner sub-items get a slightly softer tint to differentiate from top-level */ .nav-sidebar .nav-group-sub .nav-link.active { background-color: rgba(33,150,243,0.07) !important; } /* -------- Hero balance ribbon (top of home) -------- */ .balance-ribbon { background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); color: #fff; border-radius: 6px; padding: 14px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } /* No divider between the cells on purpose: each cell is now a link with its own hover plate (see below), and a hard edge on one side of a rounded, interactive box reads as half an outline rather than as a separator. The padding keeps them apart. */ .balance-cell { display: inline-flex; align-items: center; padding: 4px 16px; } /* Each cell is a link to the balances page (credit_report.php). Without these rules the anchor would take the default link blue + underline and disappear into the blue ribbon, so the ribbon's white text is forced back in every link state. The hover plate is the only visual difference from the old div - the box model is untouched, so the layout and the mobile compaction below stay exactly as they were. */ a.balance-cell, a.balance-cell:hover, a.balance-cell:focus, a.balance-cell:active { color: #fff; text-decoration: none; } a.balance-cell { border-radius: 4px; transition: background-color 0.15s ease; } a.balance-cell:hover { background: rgba(255,255,255,0.12); } .balance-cell .num { font-size: 22px; font-weight: 700; line-height: 1; } .balance-cell .label { font-size: 12px; opacity: 0.85; margin-top: 2px; } .balance-cell .icn { font-size: 28px; opacity: 0.9; margin-left: 10px; } .balance-note { font-size: 11.5px; opacity: 0.85; margin-top: 8px; color: #fff; } /* Mobile-only compaction for the balance ribbon — two cells fit side by side, purchase button drops to its own row centred. Trims ribbon padding, cell padding, font sizes, and icon size. */ @media (max-width: 767px) { .balance-ribbon { padding: 10px 12px; } .balance-ribbon > div:last-child { width: 100%; text-align: center; margin-top: 8px; } .balance-cell { padding: 2px 8px; } .balance-cell .num { font-size: 19px; } .balance-cell .label { font-size: 10.5px; } .balance-cell .icn { font-size: 20px; margin-left: 6px; } } /* -------- News strip (top one-liner) -------- */ .news-card { border-left: 4px solid #2196F3; padding: 12px 16px; background: #fafbfc; border-radius: 4px; } /* -------- Admin-message banners (sub-user only) -------- */ /* Two distinct banners, stacked top→bottom: - .suadmin-banner (default = dealer broadcast, $_su_sysMessage) — blue - .suadmin-banner.t-personal (manager-to-this-sub-user, $suAdminMsg) — amber */ .suadmin-banner { background: linear-gradient(135deg, #E1F5FE 0%, #B3E5FC 100%); border-right: 4px solid #0288D1; border-radius: 6px; padding: 12px 16px; color: #01579B; font-size: 13.5px; line-height: 1.55; } .suadmin-banner i { font-size: 22px; vertical-align: middle; margin-left: 6px; color: #0277BD; } .suadmin-banner.t-personal { background: linear-gradient(135deg, #E0F2F1 0%, #B2DFDB 100%); border-right-color: #26A69A; color: #004D40; } .suadmin-banner.t-personal i { color: #00796B; } /* -------- Section heading divider -------- */ .section-heading { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px 0; font-size: 13px; font-weight: 700; color: #555; } .section-heading::before, .section-heading::after { content: ""; flex: 1; height: 1px; background: #e0e3e7; } .section-heading > span { padding: 0 6px; } /* -------- Domain cards (compact, no KPI rows) -------- */ .domain-card { transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; cursor: default; border: 1px solid #e0e3e7; background: #fff; border-radius: 6px; overflow: hidden; position: relative; } .domain-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .domain-card .accent { height: 4px; background: #ccc; } .domain-card .card-body { padding: 14px; } .domain-card .domain-head { display: flex; align-items: center; margin-bottom: 12px; } .domain-card .domain-head .icon-wrap { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 18px; margin-left: 10px; flex-shrink: 0; } .domain-card .domain-head h6 { margin: 0; font-size: 14px; font-weight: 600; color: #222; } .domain-card .domain-head .full-link { margin-right: auto; font-size: 11px; opacity: 0.75; white-space: nowrap; } .domain-card .full-link:hover { opacity: 1; } .domain-card .actions { display: flex; flex-wrap: wrap; gap: 8px; } .domain-card .qa-btn { font-size: 12px; padding: 4px 10px; border-radius: 3px; line-height: 1.6; white-space: nowrap; } .domain-card .qa-primary { color: #fff !important; font-weight: 600; } /* -------- Domain palette: one ruleset per domain -------- */ .dm-sms .accent { background: #2196F3; } .dm-sms .icon-wrap { background: rgba(33,150,243,0.12); color: #2196F3; } .dm-sms .qa-primary{ background: #2196F3; } .dm-sms .full-link { color: #2196F3; } .dm-voice .accent { background: #EC407A; } .dm-voice .icon-wrap { background: rgba(236,64,122,0.12); color: #EC407A; } .dm-voice .qa-primary{ background: #EC407A; } .dm-voice .full-link { color: #EC407A; } .dm-wa .accent { background: #4CAF50; } .dm-wa .icon-wrap { background: rgba(76,175,80,0.12); color: #4CAF50; } .dm-wa .qa-primary{ background: #4CAF50; } .dm-wa .full-link { color: #4CAF50; } .dm-mkt .accent { background: #7E57C2; } .dm-mkt .icon-wrap { background: rgba(126,87,194,0.12); color: #7E57C2; } .dm-mkt .qa-primary{ background: #7E57C2; } .dm-mkt .full-link { color: #7E57C2; } .dm-auto .accent { background: #FFA726; } .dm-auto .icon-wrap { background: rgba(255,167,38,0.14); color: #F57C00; } .dm-auto .qa-primary{ background: #FFA726; color: #3a2900 !important; } .dm-aud .accent { background: #26A69A; } .dm-aud .icon-wrap { background: rgba(38,166,154,0.12); color: #26A69A; } .dm-aud .qa-primary{ background: #26A69A; } .dm-acct .accent { background: #78909C; } .dm-acct .icon-wrap { background: rgba(120,144,156,0.14); color: #546E7A; } .dm-acct .qa-primary{ background: #78909C; } .dm-help .accent { background: #BDBDBD; } .dm-help .icon-wrap { background: rgba(120,120,120,0.10); color: #616161; } .dm-help .qa-primary{ background: #9E9E9E; } /* sub-user only: external-links card */ .dm-ext .accent { background: #5C6BC0; } .dm-ext .icon-wrap { background: rgba(92,107,192,0.12); color: #5C6BC0; } /* -------- External-links card body (sub-user "קישורים") -------- */ /* Compact spacing so the card height matches its siblings in the row */ .dm-ext .domain-head { margin-bottom: 4px; } .dm-ext .card-body { padding-bottom: 4px; } .ext-links-list { list-style: none; margin: 0; padding: 0; } .ext-links-list li { padding: 3px 0; border-bottom: 1px dashed #eee; font-size: 12px; line-height: 1.35; } .ext-links-list li:last-child { border-bottom: 0; padding-bottom: 0; } .ext-links-list li a { color: #3949AB; } .ext-links-list li a i { margin-left: 6px; color: #5C6BC0; font-size: 10px; } .ext-links-empty { font-size: 11.5px; color: #999; text-align: center; padding: 6px 0; font-style: italic; } /* -------- Magazine-style tip cards (main-user homepage bottom, 2 cards) -------- */ .news-tip-card { border: 1px solid #e0e3e7; border-radius: 8px; overflow: hidden; background: #fff; display: flex; align-items: stretch; transition: transform 0.15s, box-shadow 0.15s; height: 100%; } .news-tip-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); } .news-tip-card .tip-thumb { width: 110px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; } .news-tip-card .tip-thumb i { line-height: 1; } .news-tip-card .tip-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%); pointer-events: none; } .news-tip-card.t-tip .tip-thumb { background: linear-gradient(135deg, #1976D2, #42A5F5); } .news-tip-card.t-know .tip-thumb { background: linear-gradient(135deg, #F57C00, #FFB74D); } .news-tip-card .tip-body { padding: 14px 16px; flex-grow: 1; min-width: 0; } .news-tip-card .tip-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 10px; margin-bottom: 6px; } .news-tip-card.t-tip .tip-badge { background: rgba(33,150,243,0.14); color: #1565C0; } .news-tip-card.t-know .tip-badge { background: rgba(245,124,0,0.14); color: #E65100; } .news-tip-card .tip-title { font-size: 14.5px; font-weight: 700; color: #222; margin: 0 0 4px 0; line-height: 1.35; } .news-tip-card .tip-excerpt { font-size: 12.5px; color: #555; margin: 0; line-height: 1.5; } /* -------- uiChoose_v3.php — full-screen "pick your UI" page -------- */ /* Login-page-style centered layout with two big cards. */ .ui-choose-page { min-height: 100vh; background: linear-gradient(135deg, #0a2e5e 0%, #1565C0 50%, #2e7d32 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px; } .ui-choose-logo { margin-bottom: 28px; text-align: center; } .ui-choose-logo img { max-width: 260px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); } .ui-choose-title { color: #fff; text-align: center; margin-bottom: 24px; } .ui-choose-title h3 { font-weight: 700; margin: 0 0 6px 0; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .ui-choose-title p { margin: 0; opacity: 0.9; font-size: 14px; } .ui-choose-cards { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 900px; width: 100%; } .ui-choose-card { flex: 1 1 380px; max-width: 420px; background: #fff; border-radius: 10px; padding: 24px 22px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.18); transition: transform 0.18s, box-shadow 0.18s; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .ui-choose-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.25); color: inherit; text-decoration: none; } .ui-choose-card .uic-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 12px; margin-bottom: 14px; align-self: center; } .ui-choose-card.uic-new .uic-badge { background: rgba(33,150,243,0.14); color: #1565C0; } .ui-choose-card.uic-old .uic-badge { background: rgba(120,144,156,0.18); color: #455A64; } .ui-choose-card .uic-icon { font-size: 56px; margin-bottom: 12px; } .ui-choose-card.uic-new .uic-icon { color: #1976D2; } .ui-choose-card.uic-old .uic-icon { color: #607D8B; } .ui-choose-card .uic-monster { height: 130px; margin-bottom: 8px; display: flex; align-items: flex-end; justify-content: center; } .ui-choose-card .uic-monster img { max-height: 130px; width: auto; } .ui-choose-card h5 { margin: 0 0 8px 0; font-weight: 700; color: #222; } .ui-choose-card p { color: #555; font-size: 13px; line-height: 1.6; margin: 0 0 18px 0; min-height: 60px; } .ui-choose-card .btn-enter { margin-top: auto; font-weight: 600; padding: 8px 24px; border-radius: 4px; } .ui-choose-card.uic-new .btn-enter { background: #1976D2; color: #fff; } .ui-choose-card.uic-old .btn-enter { background: #607D8B; color: #fff; } /* ============================================================ Snapshot pages (sms / wa / voice / marketing) — KPI tiles + period selector + chart cards. Shared layout across all 4 snapshot pages so they look uniform. ============================================================ */ .kpi-card { border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); } .kpi-card .kpi-body { padding: 16px; display: flex; align-items: center; } .kpi-card .kpi-icon { width: 54px; height: 54px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; margin-left: 14px; flex-shrink: 0; } /* KPI icon palette — use these instead of inline style="background:#hex" */ .kpi-card .kpi-icon.primary { background: var(--c-primary-1); } .kpi-card .kpi-icon.success { background: var(--c-success-1); } .kpi-card .kpi-icon.warning { background: var(--c-warn-1); } .kpi-card .kpi-icon.danger { background: var(--c-danger-1); } .kpi-card .kpi-icon.info { background: var(--c-info-1); } .kpi-card .kpi-icon.accent { background: var(--c-accent-1); } .kpi-card .kpi-icon.neutral { background: var(--c-neutral-1); } .kpi-card .kpi-icon.teal { background: #26A69A; } .kpi-card .kpi-icon > i { font-size: 32px; top: 0; vertical-align: baseline; line-height: 1; } .kpi-card .kpi-num { font-size: 26px; font-weight: 700; line-height: 1.1; color: #333; } .kpi-card .kpi-label { font-size: 12px; color: #666; } .kpi-card .kpi-sub { font-size: 11px; color: #999; margin-top: 3px; } .snapshot-chart-container { width: 100%; height: 280px; } .period-btn { display: inline-block; padding: 7px 18px; border-radius: 4px; font-size: 13px; font-weight: 500; border: 1px solid #ddd; background: #fff; color: #555; cursor: pointer; text-decoration: none; } .period-btn:hover { background: #f5f5f5; color: #555; text-decoration: none; } .period-btn.active, .period-btn.active:hover { background: #2196F3; color: #fff; border-color: #2196F3; text-decoration: none; } /* ============================================================= Payment pages — payment_main.php / payment_pay.php / payment_finish.php System-wide (loaded regardless of v3 opt-in flag). ============================================================= */ .pay-hero { background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%); color: #fff; border-radius: 8px; padding: 18px 24px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .pay-hero h4 { margin: 0; font-size: 19px; font-weight: 600; color: #fff; } .pay-hero .sub { font-size: 12.5px; opacity: 0.9; margin-top: 4px; color: #fff; } .pay-hero .step-pills { display: flex; gap: 6px; } .pay-hero .step-pill { background: rgba(255,255,255,0.18); border-radius: 999px; padding: 5px 14px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; color: #fff; } .pay-hero .step-pill.active { background: #fff; color: #1976D2; font-weight: 600; } .pay-hero .step-pill .num { background: rgba(255,255,255,0.25); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .pay-hero .step-pill.active .num { background: #1976D2; color: #fff; } .pay-notice { background: #f8fafd; border-right: 3px solid #2196F3; border-radius: 4px; padding: 10px 14px; font-size: 12.5px; color: #455a64; margin-bottom: 18px; line-height: 1.65; } .pay-notice a { color: #1976D2; font-weight: 600; } /* ----- Product cards (Step 1) ----- */ .product-card { border: 1px solid #e0e3e7; border-radius: 8px; background: #fff; overflow: hidden; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; position: relative; height: 100%; } .product-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-2px); } .product-card.is-active { border-color: #1976D2; box-shadow: 0 4px 14px rgba(33,150,243,0.18); } .product-card .accent { height: 4px; } .product-card .pc-body { padding: 16px 18px 14px; } .product-card .pc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .product-card .pc-icn { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .product-card h6 { margin: 0; font-size: 15px; font-weight: 600; color: #222; } .product-card .pc-price { font-size: 11.5px; color: #666; margin-top: 2px; } .product-card .pc-price strong { color: #222; font-weight: 600; } .qty-row { display: flex; align-items: stretch; gap: 6px; margin-top: 6px; } .qty-row input[type=number] { flex: 1; border: 1px solid #d0d4d8; border-radius: 5px; padding: 7px 10px; font-size: 14px; text-align: right; direction: ltr; } .qty-row input[type=number]:focus { border-color: #1976D2; outline: none; box-shadow: 0 0 0 2px rgba(33,150,243,0.15); } .qty-row input[type=number].is-invalid { border-color: #e53935; box-shadow: 0 0 0 2px rgba(229,57,53,0.15); } .qty-chip { background: #f1f3f5; border: 1px solid #e0e3e7; border-radius: 5px; padding: 0 10px; font-size: 12px; color: #555; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; } .qty-chip:hover { background: #e7eaef; } .qty-presets { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; } .qty-presets .qty-chip { padding: 3px 9px; font-size: 11.5px; } .live-total { display: flex; justify-content: space-between; align-items: center; background: #f8fafd; border-radius: 5px; padding: 8px 10px; margin-top: 10px; font-size: 12.5px; color: #455a64; } .live-total .num { font-weight: 700; font-size: 14px; } .pc-sms .accent { background: #2196F3; } .pc-sms .pc-icn { background: rgba(33,150,243,0.12); color: #2196F3; } .pc-sms .live-total .num { color: #1976D2; } .pc-vms .accent { background: #4CAF50; } .pc-vms .pc-icn { background: rgba(76,175,80,0.12); color: #2E7D32; } .pc-vms .live-total .num { color: #2E7D32; } .pc-call .accent { background: #00BCD4; } .pc-call .pc-icn { background: rgba(0,188,212,0.12); color: #00838F; } .pc-call .live-total .num { color: #00838F; } .pc-sms-svc .accent { background: #EC407A; } .pc-sms-svc .pc-icn { background: rgba(236,64,122,0.12); color: #C2185B; } .pc-sms-svc .live-total .num { color: #C2185B; } .pc-ivr-svc .accent { background: #FF9800; } .pc-ivr-svc .pc-icn { background: rgba(255,152,0,0.12); color: #E65100; } .pc-ivr-svc .live-total .num { color: #E65100; } .svc-note { background: #fff8f1; border-right: 3px solid #FFB74D; padding: 6px 10px; border-radius: 4px; font-size: 11.5px; color: #6d4c00; margin-top: 8px; } /* ----- Cart panel (Step 1) ----- */ .cart-card { border: 1px solid #e0e3e7; border-radius: 8px; background: #fff; position: sticky; top: 16px; overflow: hidden; } .cart-card .cart-head { background: #fafbfc; border-bottom: 1px solid #e0e3e7; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; } .cart-card .cart-head h6 { margin: 0; font-size: 14px; font-weight: 600; color: #333; } .cart-card .cart-head i { color: #1976D2; font-size: 16px; } .cart-card .cart-body { padding: 12px 16px; max-height: 320px; overflow-y: auto; } .cart-card .cart-line { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed #eef0f3; font-size: 13px; } .cart-card .cart-line:last-child { border-bottom: 0; } .cart-card .cart-line .lbl { color: #555; } .cart-card .cart-line .sub { font-size: 11px; color: #999; display: block; margin-top: 1px; } .cart-card .cart-line .amt { color: #222; font-weight: 600; } .cart-card .cart-empty { color: #999; text-align: center; padding: 24px 0; font-size: 12.5px; } .cart-card .cart-total { background: #f8fafd; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e0e3e7; } .cart-card .cart-total .lbl { font-size: 13px; color: #555; } .cart-card .cart-total .amt { font-size: 19px; font-weight: 700; color: #1976D2; } .cart-card .cart-vat { font-size: 11px; color: #999; padding: 0 16px 8px; text-align: left; } .cart-card .cart-cta { padding: 12px 16px; text-align: left; } .cart-card .cart-cta .btn { width: 100%; background: linear-gradient(135deg, #1976D2, #2196F3); color: #fff; border: 0; padding: 6px 12px; border-radius: 6px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .cart-card .cart-cta .btn:hover { background: linear-gradient(135deg, #1565C0, #1E88E5); color: #fff; } .cart-card .cart-cta .btn:disabled { background: #b0bec5; cursor: not-allowed; } /* ----- Invoice form + summary (Step 2) ----- */ .pay-section { border: 1px solid #e0e3e7; border-radius: 8px; background: #fff; overflow: hidden; } .pay-section .ps-head { background: #fafbfc; border-bottom: 1px solid #e0e3e7; padding: 12px 18px; display: flex; align-items: center; gap: 10px; } .pay-section .ps-head h6 { margin: 0; font-size: 14px; font-weight: 600; color: #333; } .pay-section .ps-head i { color: #1976D2; font-size: 16px; } .pay-section .ps-body { padding: 16px 18px; } .pay-field { margin-bottom: 14px; } .pay-field .lbl { display: block; font-size: 12px; color: #555; margin-bottom: 4px; font-weight: 600; } .pay-field input[type=text], .pay-field input[type=email], .pay-field select, .pay-field textarea { width: 100%; border: 1px solid #d0d4d8; border-radius: 5px; padding: 8px 11px; font-size: 13.5px; } .pay-field input:focus, .pay-field select:focus, .pay-field textarea:focus { border-color: #1976D2; outline: none; box-shadow: 0 0 0 2px rgba(33,150,243,0.15); } .pay-field .hint { font-size: 11px; color: #999; margin-top: 3px; } .pay-summary { background: linear-gradient(135deg, #f8fafd 0%, #eef5fc 100%); border: 1px solid #d0e1f5; border-radius: 8px; padding: 18px; } .pay-summary h6 { font-size: 14px; font-weight: 600; color: #1976D2; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .pay-summary .sum-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: #455a64; } .pay-summary .sum-line .amt { font-weight: 600; color: #222; } .pay-summary .sum-divider { border-top: 1px dashed #c5d5e7; margin: 6px 0; } .pay-summary .sum-vat { font-size: 11.5px; color: #78909c; padding: 4px 0; display: flex; justify-content: space-between; } .pay-summary .sum-total { border-top: 2px solid #1976D2; padding-top: 10px; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; } .pay-summary .sum-total .lbl { font-size: 13.5px; font-weight: 600; color: #1976D2; } .pay-summary .sum-total .amt { font-size: 22px; font-weight: 700; color: #0d47a1; } .pay-summary .sum-total .sub { font-size: 11px; color: #78909c; display: block; } .pay-installments { background: #fff; border: 1px solid #e0e3e7; border-radius: 6px; padding: 10px 14px; margin-top: 14px; display: flex; align-items: center; gap: 10px; } .pay-installments .lbl { font-size: 12.5px; color: #555; flex-shrink: 0; } .pay-installments select { flex: 1; border: 1px solid #d0d4d8; border-radius: 4px; padding: 5px 10px; font-size: 13px; } .pay-installments .ico { color: #1976D2; font-size: 18px; } .pay-actions-bar { display: flex; justify-content: space-between; margin-top: 18px; gap: 10px; flex-wrap: wrap; } .pay-btn-back, .pay-btn-next { padding: 6px 12px; border-radius: 6px; font-size: 13.5px; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .pay-btn-back { background: #eceff1; color: #455a64; } .pay-btn-back:hover { background: #cfd8dc; color: #455a64; text-decoration: none; } .pay-btn-next { background: linear-gradient(135deg, #1976D2, #2196F3); color: #fff; } .pay-btn-next:hover { background: linear-gradient(135deg, #1565C0, #1E88E5); color: #fff; text-decoration: none; } /* ----- Saved-cards grid (Step 3 / payment_pay.php) ----- */ .cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .cc-tile { border: 1px solid #e0e3e7; border-radius: 10px; background: #fff; padding: 16px; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s; display: flex; flex-direction: column; min-height: 150px; position: relative; overflow: hidden; } .cc-tile:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.10); transform: translateY(-2px); border-color: #1976D2; } .cc-tile .cc-brand { align-self: flex-end; font-size: 11px; padding: 3px 8px; border-radius: 4px; background: #eceff1; color: #455a64; font-weight: 600; } .cc-tile .cc-brand.visa { background: #1a1f71; color: #fff; } .cc-tile .cc-brand.master { background: #eb001b; color: #fff; } .cc-tile .cc-brand.amex { background: #2671b9; color: #fff; } .cc-tile .cc-brand.isracard { background: #ed1c24; color: #fff; } .cc-tile .cc-num { font-size: 16px; letter-spacing: 0.5px; color: #222; margin: 14px 0 6px; direction: ltr; font-family: 'Courier New', monospace; font-weight: 600; white-space: nowrap; } .cc-tile .cc-owner { font-size: 13px; color: #455a64; } .cc-tile .cc-row { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: #78909c; } .cc-tile .cc-exp.expired { color: #c62828; font-weight: 600; } .cc-tile .cc-pay-btn { background: linear-gradient(135deg, #1976D2, #2196F3); color: #fff; border: 0; padding: 5px 12px; border-radius: 4px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; } .cc-tile .cc-update-link { font-size: 11px; color: #1976D2; text-decoration: underline; cursor: pointer; } .cc-tile .cc-exp-col { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .cc-tile-new { border: 2px dashed #b0bec5; background: #fafbfc; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #546e7a; text-align: center; padding: 24px; } .cc-tile-new:hover { border-color: #1976D2; color: #1976D2; background: #f4f9ff; } .cc-tile-new i { font-size: 32px; margin-bottom: 8px; } .cc-tile-new .lbl { font-size: 13.5px; } .cc-total-bar { background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%); color: #fff; border-radius: 8px; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .cc-total-bar .lbl { font-size: 14px; opacity: 0.9; } .cc-total-bar .amt { font-size: 28px; font-weight: 700; line-height: 1.2; } .cc-total-bar .sub { font-size: 14px; opacity: 0.95; font-weight: 600; } /* ----- newCc modal (cardholder input) ----- */ .newcc-intro { background: #f8fafd; border-right: 3px solid #2196F3; padding: 10px 14px; border-radius: 4px; font-size: 12.5px; color: #455a64; margin-bottom: 14px; line-height: 1.55; } .newcc-iframe-wrap { border: 1px solid #e0e3e7; border-radius: 6px; overflow: hidden; background: #fafbfc; } /* ----- Result page (payment_finish.php — with monsters) ----- */ .pay-result-wrap { max-width: 720px; margin: 0 auto; text-align: center; background: #fff; border-radius: 12px; padding: 28px 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); border: 1px solid #eceff1; } .pay-result-wrap.is-success { border-top: 6px solid #4CAF50; } .pay-result-wrap.is-error { border-top: 6px solid #e53935; } .pay-result-monster { width: auto; height: 260px; display: block; margin: 0 auto 16px; } .pay-result-title { font-size: 28px; font-weight: 700; margin: 0 0 10px; } .pay-result-wrap.is-success .pay-result-title { color: #2E7D32; } .pay-result-wrap.is-error .pay-result-title { color: #c62828; } .pay-result-msg { font-size: 15px; color: #455a64; line-height: 1.6; margin-bottom: 16px; } .pay-result-pill { display: inline-block; padding: 9px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; margin: 6px 0; line-height: 1.5; } .pay-result-pill.is-success { background: #e8f5e9; color: #1b5e20; } .pay-result-pill.is-error { background: #ffebee; color: #b71c1c; } .pay-result-pill a { color: inherit; font-weight: 700; text-decoration: underline; } .pay-result-cta { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ============================================================= Credit / balance display — credit_report.php Built on top of the .product-card shell from the payment pages. ============================================================= */ .credit-amount { font-size: 36px; font-weight: 800; line-height: 1; margin: 6px 0 4px; } .pc-sms .credit-amount { color: #1976D2; } .pc-vms .credit-amount { color: #2E7D32; } .pc-call .credit-amount { color: #00838F; } .credit-unit { font-size: 13px; color: #607d8b; font-weight: 500; margin-right: 4px; } .credit-meta { font-size: 12.5px; color: #607d8b; line-height: 1.7; border-top: 1px dashed #eef0f3; padding-top: 10px; margin-top: 10px; } .credit-meta strong { color: #222; font-weight: 600; } .credit-empty { background: #fafbfc; border: 1px dashed #cfd8dc; border-radius: 6px; padding: 14px; text-align: center; color: #78909c; font-size: 13px; font-weight: 500; } .credit-alert-box { background: linear-gradient(135deg, #f8fafd 0%, #eef5fc 100%); border: 1px solid #d0e1f5; border-radius: 6px; padding: 10px 12px; margin-top: 12px; } .credit-alert-box .lbl { display: block; font-size: 12px; color: #455a64; font-weight: 600; margin-bottom: 4px; } .credit-alert-box input[type=number] { width: 100%; border: 1px solid #d0d4d8; border-radius: 5px; padding: 7px 10px; font-size: 13.5px; direction: ltr; text-align: right; } .credit-alert-box input[type=number]:focus { border-color: #1976D2; outline: none; box-shadow: 0 0 0 2px rgba(33,150,243,0.15); } .credit-alert-warn { background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px; padding: 9px 12px; margin-top: 12px; font-size: 12px; color: #6d4c00; line-height: 1.55; } .credit-alert-warn i { color: #f57c00; margin-left: 5px; } .credit-card-action { margin-top: 8px; display: flex; justify-content: flex-end; } .credit-card-action a { font-size: 12px; color: #1976D2; text-decoration: none; font-weight: 600; } .credit-card-action a:hover { text-decoration: underline; } /* ============================================================= Account-info pages — account_report.php and other "view details" pages built around large headline tiles + clean label/value rows. ============================================================= */ .acct-tile { display: flex; align-items: center; gap: 14px; border-radius: 8px; padding: 16px 18px; height: 100%; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .acct-tile .icn { width: 50px; height: 50px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* 32px inner glyph — same approach as the DS KPI tiles (set on child to win the Limitless per-icon cascade). */ .acct-tile .icn > i { font-size: 32px; top: 0; vertical-align: baseline; line-height: 1; } .acct-tile .val { font-size: 16px; font-weight: 600; color: #222; line-height: 1.3; word-break: break-word; } .acct-tile .val a { color: inherit; text-decoration: none; } .acct-tile .val a:hover { text-decoration: underline; } .acct-tile .lbl { font-size: 12px; color: #607d8b; margin-top: 3px; } .acct-tile.t-account { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border: 1px solid #90caf9; } .acct-tile.t-account .icn { background: #1976D2; color: #fff; } .acct-tile.t-account .val { color: #0d47a1; } .acct-tile.t-site { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); border: 1px solid #a5d6a7; } .acct-tile.t-site .icn { background: #2E7D32; color: #fff; } .acct-tile.t-site .val { color: #1b5e20; } .acct-tile.t-user { background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%); border: 1px solid #b39ddb; } .acct-tile.t-user .icn { background: #5E35B1; color: #fff; } .acct-tile.t-user .val { color: #311b92; } /* Section header — slightly richer gradient + colored left border accent. Overrides the plainer ps-head defined in the "Payment pages" block above. */ .pay-section { box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .pay-section .ps-head { background: linear-gradient(135deg, #eef5fc 0%, #e3f2fd 100%); border-bottom: 1px solid #bbdefb; } .pay-section .ps-head h6 { color: #0d47a1; } .pay-section .ps-head i { color: #1976D2; font-size: 17px; } /* Section header that needs an action button on the right */ .pay-section .ps-head-action { margin-right: auto; } .pay-section .ps-head-action .pay-btn-next { padding: 5px 12px; font-size: 12.5px; } /* Make sure icons inside our buttons inherit the button text color. Some icomoon classes in the Limitless theme set their own color; this ensures the pencil/checkmark/arrow always matches the button text. */ .pay-btn-next i, .pay-btn-next > i, .pay-btn-back i, .pay-btn-back > i { color: inherit !important; } .info-list { list-style: none; padding: 0; margin: 0; } .info-list .info-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed #eef0f3; font-size: 13.5px; } .info-list .info-row:nth-child(even) { background: #f8fafd; margin: 0 -18px; padding-right: 18px; padding-left: 18px; } .info-list .info-row:last-child { border-bottom: 0; } .info-list .info-row .k { color: #455a64; font-weight: 600; } .info-list .info-row .v { color: #222; text-align: left; max-width: 60%; word-break: break-word; } .info-list .info-row .v.muted { color: #999; font-weight: 400; } /* Contact mini-table inside a pay-section */ .contact-table { width: 100%; border-collapse: collapse; } .contact-table th, .contact-table td { padding: 11px 14px; border-bottom: 1px solid #eef0f3; font-size: 13.5px; text-align: right; vertical-align: top; } .contact-table th { background: #f8fafd; color: #455a64; font-weight: 600; font-size: 12px; } .contact-table tbody tr:nth-child(even) { background: #fafbfc; } .contact-table tr:last-child td { border-bottom: 0; } .contact-table .idx { width: 28px; height: 28px; border-radius: 50%; background: #1976D2; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } /* Block-link config — labeled select pairs */ .block-row { display: flex; align-items: center; gap: 10px; background: #f8fafd; border: 1px solid #e0e3e7; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; transition: border-color 0.15s, background 0.15s; } .block-row:hover { border-color: #bbdefb; background: #eef5fc; } .block-row .b-lbl { flex: 0 0 130px; font-size: 13px; color: #455a64; font-weight: 600; } .block-row select { flex: 1; border: 1px solid #d0d4d8; border-radius: 5px; padding: 7px 10px; font-size: 13px; background: #fff; } .block-row select:focus { border-color: #1976D2; outline: none; box-shadow: 0 0 0 2px rgba(33,150,243,0.15); } /* When Select2 wraps the native select, the original element is hidden and .select2-container takes its visual place — needs to flex the same way. Limitless theme adds vertical padding to .select2-selection__rendered which pushes the text down; we reset it and use line-height alone for centering. */ .block-row .select2-container { flex: 1; } .block-row .select2-container--default .select2-selection--single { border: 1px solid #d0d4d8; border-radius: 5px; height: 34px; background: #fff; display: flex; align-items: center; } .block-row .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px !important; font-size: 13px; color: #222; padding-top: 0 !important; padding-bottom: 0 !important; flex: 1; } .block-row .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; top: 0; } /* Locked row — soft slate-blue instead of amber. Conveys "fixed by policy" without the warning/error feel that the amber tone gave. */ .block-row.is-locked { background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%); border-color: #b0bec5; } .block-row.is-locked:hover { background: linear-gradient(135deg, #eceff1 0%, #cfd8dc 100%); border-color: #b0bec5; } .block-row.is-locked .b-lbl { color: #37474f; } .block-row.is-locked .b-lbl::after { content: "\eb69"; /* icomoon icon-lock5 */ font-family: 'icomoon'; margin-right: 5px; font-size: 12px; vertical-align: middle; color: var(--c-danger-1); /* red — signals locked/blocked */ } .block-row.is-locked select { background: #f5f7f8; color: #455a64; cursor: not-allowed; } /* ============================================================= DESIGN SYSTEM (DS) — see DESIGN_SYSTEM.md First introduced for index_v3.php homepage rewrite (2026-05-24). ============================================================= */ /* ---- Color tokens ---- */ :root { --c-primary-1:#2196F3; --c-primary-2:#1976D2; --c-primary-3:#0d47a1; --c-primary-bg:#e3f2fd; --c-success-1:#4CAF50; --c-success-2:#2E7D32; --c-success-3:#1b5e20; --c-success-bg:#e8f5e9; --c-danger-1:#e53935; --c-danger-2:#c62828; --c-danger-3:#b71c1c; --c-danger-bg:#ffebee; --c-warn-1:#FF9800; --c-warn-2:#E65100; --c-warn-3:#6d4c00; --c-warn-bg:#fff8e1; --c-info-1:#00BCD4; --c-info-2:#00838F; --c-info-3:#006064; --c-info-bg:#e0f7fa; --c-accent-1:#7E57C2; --c-accent-2:#5E35B1; --c-accent-3:#311b92; --c-accent-bg:#ede7f6; --c-neutral-1:#607d8b; --c-neutral-2:#455a64; --c-neutral-bg:#eceff1; --c-text:#222; --c-text-soft:#607d8b; --c-text-muted:#90a4ae; --c-border:#e0e3e7; --c-border-soft:#eef0f3; } /* ---- .ds-btn (split-button: .t text zone + .i icon zone) ---- */ .ds-btn { display:inline-flex; align-items:stretch; border:none !important; outline:none !important; box-shadow:none !important; appearance:none; -webkit-appearance:none; -moz-appearance:none; border-radius:3px; overflow:hidden; font-size:13px; cursor:pointer; text-decoration:none; line-height:1; vertical-align:middle; transition:filter 0.15s ease; background:transparent; } .ds-btn::-moz-focus-inner { border:0; padding:0; } .ds-btn:focus, .ds-btn:active { outline:none !important; box-shadow:none !important; } .ds-btn:hover { filter:brightness(1.05); text-decoration:none; } .ds-btn.outline:hover { filter:brightness(0.93); } .ds-btn .t { padding:9px 12px; display:inline-flex; align-items:center; color:#fff; background-clip:padding-box; -webkit-background-clip:padding-box; } .ds-btn .i { padding:9px 9px; display:inline-flex; align-items:center; background:rgba(0,0,0,0.16); color:rgba(255,255,255,0.95); background-clip:padding-box; -webkit-background-clip:padding-box; } .ds-btn .i i { font-size:14px; } /* Sizes */ .ds-btn.sm { font-size:12px; } .ds-btn.sm .t { padding:6px 9px; } .ds-btn.sm .i { padding:6px 7px; } .ds-btn.sm .i i { font-size:12px; } .ds-btn.lg { font-size:14px; } .ds-btn.lg .t { padding:11px 16px; font-weight:500; } .ds-btn.lg .i { padding:11px 12px; } .ds-btn.lg .i i { font-size:16px; } /* Solid palettes */ .ds-btn.primary .t{background:var(--c-primary-1);} .ds-btn.primary .i{background:var(--c-primary-2);} .ds-btn.success .t{background:var(--c-success-1);} .ds-btn.success .i{background:var(--c-success-2);} .ds-btn.danger .t{background:var(--c-danger-1);} .ds-btn.danger .i{background:var(--c-danger-2);} .ds-btn.warning .t{background:var(--c-warn-1);} .ds-btn.warning .i{background:var(--c-warn-2);} .ds-btn.info .t{background:var(--c-info-1);} .ds-btn.info .i{background:var(--c-info-2);} .ds-btn.accent .t{background:var(--c-accent-1);} .ds-btn.accent .i{background:var(--c-accent-2);} .ds-btn.neutral .t{background:var(--c-neutral-1);} .ds-btn.neutral .i{background:var(--c-neutral-2);} .ds-btn.pink .t{background:#EC407A;} .ds-btn.pink .i{background:#C2185B;} /* Outline (soft-tinted) variant */ .ds-btn.outline { border:0; } .ds-btn.outline.primary .t{background:var(--c-primary-bg);color:var(--c-primary-2);} .ds-btn.outline.primary .i{background:#c5e1f9;color:var(--c-primary-2);} .ds-btn.outline.success .t{background:var(--c-success-bg);color:var(--c-success-2);} .ds-btn.outline.success .i{background:#c8e6c9;color:var(--c-success-2);} .ds-btn.outline.danger .t{background:var(--c-danger-bg);color:var(--c-danger-2);} .ds-btn.outline.danger .i{background:#ffcdd2;color:var(--c-danger-2);} .ds-btn.outline.warning .t{background:var(--c-warn-bg);color:var(--c-warn-2);} .ds-btn.outline.warning .i{background:#ffe0b2;color:var(--c-warn-2);} .ds-btn.outline.accent .t{background:var(--c-accent-bg);color:var(--c-accent-2);} .ds-btn.outline.accent .i{background:#d1c4e9;color:var(--c-accent-2);} .ds-btn.outline.neutral .t{background:var(--c-neutral-bg);color:var(--c-neutral-2);} .ds-btn.outline.neutral .i{background:#cfd8dc;color:var(--c-neutral-2);} /* ---- .ds-section-divider (thin line with text in middle) ---- */ .ds-section-divider { display:flex; align-items:center; gap:10px; margin:8px 0 12px; font-size:13px; font-weight:700; color:var(--c-neutral-2); } .ds-section-divider::before, .ds-section-divider::after { content:""; flex:1; height:1px; background:var(--c-border); } /* ============================================================= HOMEPAGE (index_v3.php) overrides - .accent collides with .domain-card .accent (top color strip) so the marketing-card buttons use .mkt instead. - Force .ds-btn.sm and legacy .qa-btn to the same height inside .domain-card .actions for visual consistency. ============================================================= */ .ds-btn.mkt .t{background:var(--c-accent-1);} .ds-btn.mkt .i{background:var(--c-accent-2);} .ds-btn.outline.mkt .t{background:var(--c-accent-bg);color:var(--c-accent-2);} .ds-btn.outline.mkt .i{background:#d1c4e9;color:var(--c-accent-2);} .domain-card .actions .ds-btn.sm { min-height:26px; } .domain-card .actions .btn.qa-btn { font-size:12px; padding:0 11px !important; line-height:1; border-radius:3px; height:26px; display:inline-flex; align-items:center; white-space:nowrap; } /* ============================================================= DATATABLES PAGINATION — DS-style override Targets DataTables' .dataTables_paginate > .paginate_button markup (the Limitless default rendering) and restyles it to match DESIGN_SYSTEM §4.1. Applies to every table system-wide. ============================================================= */ .dataTables_paginate .paginate_button { display: inline-flex !important; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 10px !important; margin: 0 2px !important; background: #fff !important; border: 1px solid var(--c-border) !important; border-radius: 4px !important; color: var(--c-neutral-2) !important; font-size: 12.5px; font-weight: 500; text-decoration: none !important; cursor: pointer; transition: all 0.15s ease; } .dataTables_paginate .paginate_button:hover, .dataTables_paginate .paginate_button:focus { background: var(--c-primary-bg) !important; color: var(--c-primary-2) !important; border-color: var(--c-primary-2) !important; } .dataTables_paginate .paginate_button.current, .dataTables_paginate .paginate_button.current:hover, .dataTables_paginate .paginate_button.current:focus { background: var(--c-primary-2) !important; color: #fff !important; border-color: var(--c-primary-2) !important; } .dataTables_paginate .paginate_button.disabled, .dataTables_paginate .paginate_button.disabled:hover, .dataTables_paginate .paginate_button.disabled:focus { background: #f7f8f9 !important; color: var(--c-text-muted) !important; border-color: var(--c-border) !important; cursor: not-allowed; } /* Ellipsis ("...") between page ranges */ .dataTables_paginate .ellipsis { display: inline-flex; align-items: center; padding: 0 6px; color: var(--c-text-muted); font-weight: 500; } /* Info text on the other side of the pagination row */ .dataTables_info { font-size: 12px !important; color: var(--c-text-soft) !important; padding-top: 0 !important; } .dataTables_info b, .dataTables_info strong { color: var(--c-text); } /* The paging_simple variant (prev/next only) — same look */ .dataTables_paginate.paging_simple .paginate_button { padding: 0 14px !important; } .dataTables_paginate.paging_simple .paginate_button:not(.disabled):hover, .dataTables_paginate.paging_simple .paginate_button:not(.disabled):focus { background: var(--c-primary-bg) !important; color: var(--c-primary-2) !important; } /* ============================================================= DATATABLES TOOLBAR — softer rounded corners Bumps border-radius from Limitless default (3px) to 6px on the entries-per-page select, action buttons, and search input for a slightly softer, more modern look. Applies system-wide. ============================================================= */ .dataTables_length select, .dataTables_length .select2-selection, .dataTables_filter input, .dataTables_wrapper .dt-buttons .dt-button, .dataTables_wrapper .dt-buttons .btn { border-radius: 4px !important; } /* Also smooth the corners of the select2 dropdown trigger (if used for length) */ .dataTables_length .select2-container .select2-selection--single .select2-selection__rendered { border-radius: 4px !important; } /* ============================================================= .ds-badge — rectangular solid badge per DESIGN_SYSTEM §7 ============================================================= */ .ds-badge { display: inline-block; padding: 2px 8px; font-size: 11.5px; font-weight: 400; line-height: 1.55; border-radius: 3px; color: #fff; } a.ds-badge, a.ds-badge:hover, a.ds-badge:focus { color: #fff; text-decoration: none; } a.ds-badge:hover { filter: brightness(0.93); } .ds-badge.primary { background: var(--c-primary-2); } .ds-badge.success { background: #43A047; } .ds-badge.danger { background: var(--c-danger-1); } .ds-badge.warning { background: var(--c-warn-1); color: #fff; } .ds-badge.info { background: #0097A7; } /* Cyan-700 midpoint between info-1 and info-2 */ .ds-badge.accent { background: var(--c-accent-2); } .ds-badge.neutral { background: var(--c-neutral-1); } /* ============================================================= Brand color extensions — for use across snapshot pages (voice, wa, marketing). Same shape as the core palette. ============================================================= */ .kpi-card .kpi-icon.pink { background: #EC407A; } .kpi-card .kpi-icon.deep-purple { background: #9C27B0; } .kpi-card .kpi-icon.wa-green { background: #25D366; } .kpi-card .kpi-icon.wa-blue { background: #34B7F1; } .ds-badge.pink { background: #EC407A; } .ds-badge.deep-purple { background: #9C27B0; } .ds-badge.wa-green { background: #25D366; } .ds-badge.wa-blue { background: #34B7F1; } /* Deep (-2) shade variants — for when more than 7 distinct hues are needed (e.g. wa_inReport per-type badges). Use sparingly. */ .ds-badge.danger-2 { background: var(--c-danger-2); } .ds-badge.warn-2 { background: var(--c-warn-2); } .ds-badge.info-2 { background: var(--c-info-2); } .ds-badge.accent-2 { background: var(--c-accent-2); } /* Yellow gap-filler — DS palette has no yellow; mustard fills that gap. Outside the formal 7-family palette. Use only when none of the families fits. */ .ds-badge.mustard { background: #F9A825; } /* ============================================================= Buy-link inside a KPI tile: compact so the tile keeps the same height as the others (which show plain "היום" sub-text). ============================================================= */ .kpi-card .kpi-sub .ds-btn { font-size: 11px; line-height: 1.4; } .kpi-card .kpi-sub .ds-btn .t { padding: 1px 6px; } .kpi-card .kpi-sub .ds-btn .i { padding: 1px 5px; } .kpi-card .kpi-sub .ds-btn .i i { font-size: 11px; } /* ============================================================= .ds-btn.back — back-navigation variant Swaps visual order so the icon zone (.i) sits on the visual RIGHT in RTL. Use only when the icon is a directional back-arrow that points back (right in RTL). For non-directional icons (home, settings, etc.) use a regular .ds-btn (icon left). ============================================================= */ .ds-btn.back { flex-direction: row-reverse; } /* ============================================================= .ds-banner — page-level info/success/warning/danger messages with a monster image. See DESIGN_SYSTEM.md §5. Info uses the primary BLUE palette intentionally (not cyan). ============================================================= */ .ds-banner { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-radius: 6px; border-right: 4px solid var(--c-primary-2); background: var(--c-primary-bg); color: var(--c-primary-3); font-size: 12.5px; line-height: 1.5; margin-bottom: 10px; } .ds-banner .ds-banner-monster { width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ds-banner .ds-banner-monster img { width: auto; height: 100%; max-width: 100%; display: block; } .ds-banner .body strong { display: block; margin-bottom: 2px; font-size: 12.5px; } .ds-banner .body a { color: inherit; font-weight: 700; text-decoration: underline; } .ds-banner.info { border-right-color: var(--c-primary-2); background: var(--c-primary-bg); color: var(--c-primary-3); } .ds-banner.success { border-right-color: var(--c-success-2); background: var(--c-success-bg); color: var(--c-success-3); } .ds-banner.warning { border-right-color: var(--c-warn-1); background: var(--c-warn-bg); color: var(--c-warn-3); } .ds-banner.danger { border-right-color: var(--c-danger-1); background: var(--c-danger-bg); color: var(--c-danger-3); } /* ============================================================= .ds-toast — floating notification with monster-on-top The monster image sticks above the toast (fixed HEIGHT so all monsters anchor at the same point regardless of aspect ratio). Position the toast container with `position: fixed; top: 72px; left: 16px` (in RTL) per DESIGN_SYSTEM §6. ============================================================= */ .ds-toast { background: #fff; border-radius: 4px; border: 1px solid var(--c-border); color: var(--c-text); pointer-events: auto; position: relative; margin-top: 90px; /* room for the monster overhang */ animation: ds-toast-in 0.25s ease-out; } @keyframes ds-toast-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } .ds-toast .ds-toast-monster { position: absolute; bottom: 100%; right: 16px; height: 90px; width: auto; z-index: 2; pointer-events: none; display: block; } .ds-toast .monster-row { background: var(--c-primary-bg); padding: 14px 16px; border-radius: 4px 4px 0 0; border-bottom: 1px solid var(--c-border-soft); min-height: 68px; display: flex; align-items: center; } .ds-toast .monster-row .body strong { display: block; font-size: 14px; margin-bottom: 3px; color: var(--c-text); } .ds-toast .monster-row .body span, .ds-toast .monster-row .body span * { font-size: 12.5px; color: var(--c-text-soft); line-height: 1.5; font-weight: 400; white-space: pre-line; } .ds-toast .x { position: absolute; top: 6px; left: 8px; color: var(--c-text-muted); cursor: pointer; font-size: 18px; line-height: 1; background: none; border: 0; z-index: 3; } .ds-toast .progress { height: 4px; background: rgba(0,0,0,0.08); border-radius: 0 0 4px 4px; overflow: hidden; } .ds-toast .progress .bar { height: 100%; background: var(--c-primary-2); animation: ds-toast-prog 5s linear forwards; } /* Hovering the toast freezes the progress bar (and the auto-close timer that's wired to its animationend event in showNotify). */ .ds-toast:hover .progress .bar { animation-play-state: paused; } @keyframes ds-toast-prog { from { width: 100%; } to { width: 0%; } } /* Type variants — coloured monster-row tint + progress bar */ .ds-toast.success .monster-row { background: var(--c-success-bg); } .ds-toast.success .progress .bar { background: var(--c-success-2); } .ds-toast.danger .monster-row { background: var(--c-danger-bg); } .ds-toast.danger .progress .bar { background: var(--c-danger-1); } .ds-toast.warning .monster-row { background: var(--c-warn-bg); } .ds-toast.warning .progress .bar { background: var(--c-warn-1); } /* Fixed-position container holding all stacked toasts (top-left in RTL). */ .ds-toast-zone { position: fixed; top: 72px; left: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 360px; width: calc(100vw - 32px); pointer-events: none; } /* ============================================================= .ds-swal — confirmation dialog (per DESIGN_SYSTEM §14) Built from scratch on plain DOM (no sweet_alert lib dep). Mirrored into layout.css so confirmations also render under legacy chrome. Pairs with dsConfirm() in custom.js.php. ============================================================= */ .ds-swal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1100; display: none; align-items: center; justify-content: center; padding: 16px; } .ds-swal-bg.is-open { display: flex; } .ds-swal { background: #fff; border-radius: 4px; padding: 28px 24px; text-align: center; width: 100%; max-width: 440px; box-shadow: 0 16px 48px rgba(0,0,0,0.3); animation: ds-swal-in 0.2s ease-out; } @keyframes ds-swal-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ds-swal .swal-icn { width: 88px; height: 88px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 18px; overflow: hidden; } .ds-swal .swal-icn i { font-size: 52px; line-height: 1; } .ds-swal.warning .swal-icn { background: var(--c-warn-bg); color: var(--c-warn-1); } .ds-swal.danger .swal-icn { background: var(--c-danger-bg); color: var(--c-danger-1); } .ds-swal.success .swal-icn { background: var(--c-success-bg); color: var(--c-success-2); } .ds-swal.question .swal-icn { background: var(--c-primary-bg); color: var(--c-primary-2); } .ds-swal h4 { font-size: 16px; font-weight: 600; color: var(--c-text); margin: 0 0 8px; } .ds-swal p { font-size: 13.5px; color: var(--c-text-soft); margin: 0 0 20px; line-height: 1.6; } .ds-swal .actions { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; } .ds-swal .actions .ds-btn[data-cd] .t span { opacity: 0.8; font-variant-numeric: tabular-nums; } @media (max-width: 576px) { .ds-swal { padding: 24px 16px; } .ds-swal .actions { flex-direction: column-reverse; } .ds-swal .actions .ds-btn { width: 100%; justify-content: center; } } /* The legacy .pay-section .ps-head { i { color: #1976D2 } } rule applies to every inside the header — including inside .ds-btn. Force white so the button's icon stays visible against its blue background. (Was 'inherit' but the inherited parent .i color didn't always win the cascade reliably in nested headers.) */ .pay-section .ps-head .ds-btn .i i, .pay-section .ps-head .ds-btn .t i { color: #fff !important; } /* And for outline variants the icon should match the colored text instead of white. */ .pay-section .ps-head .ds-btn.outline.primary .i i, .pay-section .ps-head .ds-btn.outline.primary .t i { color: var(--c-primary-2) !important; } .pay-section .ps-head .ds-btn.outline.neutral .i i, .pay-section .ps-head .ds-btn.outline.neutral .t i { color: var(--c-neutral-2) !important; } .pay-section .ps-head .ds-btn.outline.danger .i i, .pay-section .ps-head .ds-btn.outline.danger .t i { color: var(--c-danger-2) !important; } .pay-section .ps-head .ds-btn.outline.success .i i, .pay-section .ps-head .ds-btn.outline.success .t i { color: var(--c-success-2) !important; } /* ============================================================= .ds-mini — lightweight popup (NOT a modal, NOT a SWAL). For small focused interactions (inline audio player, tiny file picker). ~310px wide, white textured background. Backdrop-click closes. ============================================================= */ .ds-mini-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1100; display: none; align-items: center; justify-content: center; padding: 16px; } .ds-mini-bg.is-open { display: flex; } .ds-mini { background: #fff url('/_assets/images/backgrounds/seamless.png') repeat; border-radius: 4px; width: 100%; max-width: 310px; box-shadow: 0 16px 48px rgba(0,0,0,0.3); overflow: hidden; animation: ds-mini-in 0.2s ease-out; } @keyframes ds-mini-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ds-mini-head { padding: 14px 16px 6px; text-align: center; } .ds-mini-head h4 { font-size: 15px; font-weight: 600; color: var(--c-text); margin: 0; } .ds-mini-body { padding: 12px 16px; text-align: center; } .ds-mini-foot { padding: 6px 16px 14px; text-align: center; } .ds-mini-body > audio { width: 100%; max-width: 270px; } /* =========================================================================== Legacy .badge.bg-* shim — restyles colored Bootstrap/Limitless badges to the DS visual treatment (rectangular 3px, font-weight 400, DS palette). Excludes form-label badges (float-left/right per DEV_RULES §26) so they keep their Limitless look. Status badges in tables / reports get the new look automatically with no PHP edits. =========================================================================== */ .badge.bg-primary:not(.float-left):not(.float-right), .badge.bg-success:not(.float-left):not(.float-right), .badge.bg-danger:not(.float-left):not(.float-right), .badge.bg-warning:not(.float-left):not(.float-right), .badge.bg-pink:not(.float-left):not(.float-right), .badge.bg-pink-300:not(.float-left):not(.float-right), .badge.bg-pink-400:not(.float-left):not(.float-right), .badge.bg-purple:not(.float-left):not(.float-right), .badge.bg-violet-400:not(.float-left):not(.float-right), .badge.bg-teal:not(.float-left):not(.float-right), .badge.bg-teal-300:not(.float-left):not(.float-right), .badge.bg-teal-400:not(.float-left):not(.float-right), .badge.bg-orange-400:not(.float-left):not(.float-right), .badge.bg-orange-600:not(.float-left):not(.float-right), .badge.bg-slate:not(.float-left):not(.float-right), .badge.bg-grey:not(.float-left):not(.float-right), .badge.bg-grey-300:not(.float-left):not(.float-right), .badge.bg-grey-400:not(.float-left):not(.float-right), .badge.bg-indigo-400:not(.float-left):not(.float-right), .badge.bg-green:not(.float-left):not(.float-right) { border-radius: 3px !important; font-weight: 400 !important; padding: 2px 8px !important; color: #fff !important; font-size: 11.5px !important; letter-spacing: 0 !important; line-height: 1.55 !important; } .badge.bg-primary:not(.float-left):not(.float-right) { background-color: #1976D2 !important; } .badge.bg-success:not(.float-left):not(.float-right), .badge.bg-green:not(.float-left):not(.float-right) { background-color: #43A047 !important; } .badge.bg-danger:not(.float-left):not(.float-right) { background-color: #e53935 !important; } .badge.bg-warning:not(.float-left):not(.float-right), .badge.bg-orange-400:not(.float-left):not(.float-right), .badge.bg-orange-600:not(.float-left):not(.float-right) { background-color: #FF9800 !important; } .badge.bg-pink:not(.float-left):not(.float-right), .badge.bg-pink-300:not(.float-left):not(.float-right), .badge.bg-pink-400:not(.float-left):not(.float-right) { background-color: #ec407a !important; } .badge.bg-purple:not(.float-left):not(.float-right), .badge.bg-violet-400:not(.float-left):not(.float-right) { background-color: #7E57C2 !important; } .badge.bg-teal:not(.float-left):not(.float-right), .badge.bg-teal-300:not(.float-left):not(.float-right), .badge.bg-teal-400:not(.float-left):not(.float-right) { background-color: #26A69A !important; } .badge.bg-slate:not(.float-left):not(.float-right) { background-color: #455a64 !important; } .badge.bg-grey:not(.float-left):not(.float-right), .badge.bg-grey-300:not(.float-left):not(.float-right) { background-color: #607d8b !important; } .badge.bg-grey-400:not(.float-left):not(.float-right) { background-color: #b0bec5 !important; } .badge.bg-indigo-400:not(.float-left):not(.float-right) { background-color: #0d47a1 !important; } /* bg-info added 2026-05-25 — info-cyan color for legacy badge-info renames */ .badge.bg-info:not(.float-left):not(.float-right) { border-radius: 3px !important; font-weight: 400 !important; padding: 2px 8px !important; color: #fff !important; font-size: 11.5px !important; letter-spacing: 0 !important; line-height: 1.55 !important; border: 0 !important; background-color: #0097A7 !important; } /* Also add border:none to the existing .bg-* shim entries (kills Limitless outlined borders) */ .badge.bg-primary:not(.float-left):not(.float-right), .badge.bg-success:not(.float-left):not(.float-right), .badge.bg-danger:not(.float-left):not(.float-right), .badge.bg-warning:not(.float-left):not(.float-right), .badge.bg-pink:not(.float-left):not(.float-right), .badge.bg-pink-300:not(.float-left):not(.float-right), .badge.bg-pink-400:not(.float-left):not(.float-right), .badge.bg-purple:not(.float-left):not(.float-right), .badge.bg-violet-400:not(.float-left):not(.float-right), .badge.bg-teal:not(.float-left):not(.float-right), .badge.bg-teal-300:not(.float-left):not(.float-right), .badge.bg-teal-400:not(.float-left):not(.float-right), .badge.bg-orange-400:not(.float-left):not(.float-right), .badge.bg-orange-600:not(.float-left):not(.float-right), .badge.bg-slate:not(.float-left):not(.float-right), .badge.bg-grey:not(.float-left):not(.float-right), .badge.bg-grey-300:not(.float-left):not(.float-right), .badge.bg-grey-400:not(.float-left):not(.float-right), .badge.bg-indigo-400:not(.float-left):not(.float-right), .badge.bg-green:not(.float-left):not(.float-right) { border: 0 !important; } /* DS-palette extensions for badges — deep-purple, mustard (yellow gap-filler), plus -2 / deep shades of the main DS families (danger-2, warn-2, info-2). */ .badge.bg-deep-purple:not(.float-left):not(.float-right), .badge.bg-mustard:not(.float-left):not(.float-right), .badge.bg-danger-2:not(.float-left):not(.float-right), .badge.bg-warn-2:not(.float-left):not(.float-right), .badge.bg-info-2:not(.float-left):not(.float-right), .badge.bg-accent-2:not(.float-left):not(.float-right) { border-radius: 3px !important; font-weight: 400 !important; padding: 2px 8px !important; color: #fff !important; font-size: 11.5px !important; letter-spacing: 0 !important; line-height: 1.55 !important; border: 0 !important; } .badge.bg-deep-purple:not(.float-left):not(.float-right) { background-color: #9C27B0 !important; } .badge.bg-mustard:not(.float-left):not(.float-right) { background-color: #F9A825 !important; } .badge.bg-danger-2:not(.float-left):not(.float-right) { background-color: #c62828 !important; } .badge.bg-warn-2:not(.float-left):not(.float-right) { background-color: #E65100 !important; } .badge.bg-info-2:not(.float-left):not(.float-right) { background-color: #00838F !important; } .badge.bg-accent-2:not(.float-left):not(.float-right) { background-color: #5E35B1 !important; } /* =========================================================================== .ds-kpi — canonical DS KPI tile (per DESIGN_SYSTEM §8.2) Border-right accent (4px) in the variant color + tinted-square icon. Ported from sketch_design_system.html 2026-05-25. Different from .kpi-card used by snapshots — .kpi-card is the simplified variant. Prefer .ds-kpi for new pages per the DS spec. =========================================================================== */ .ds-kpi { border: 1px solid var(--c-border); border-radius: 8px; background: #fff; padding: 16px; display: flex; align-items: center; gap: 14px; border-right: 4px solid var(--c-primary-2); height: 100%; } .ds-kpi .icn { width: 54px; height: 54px; border-radius: 8px; background: var(--c-primary-1); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .ds-kpi .icn > i { font-size: 32px; top: 0; vertical-align: baseline; line-height: 1; } .ds-kpi .num { font-size: 22px; font-weight: 700; color: var(--c-text); line-height: 1.1; } .ds-kpi .lbl { font-size: 12px; color: var(--c-text-soft); margin-top: 3px; } .ds-kpi .sub { font-size: 11px; color: var(--c-text-muted); margin-top: 3px; } .ds-kpi.success { border-right-color: var(--c-success-2); } .ds-kpi.success .icn { background: var(--c-success-1); color: #fff; } .ds-kpi.danger { border-right-color: var(--c-danger-1); } .ds-kpi.danger .icn { background: var(--c-danger-1); color: #fff; } .ds-kpi.warning { border-right-color: var(--c-warn-1); } .ds-kpi.warning .icn { background: var(--c-warn-1); color: #fff; } .ds-kpi.info { border-right-color: var(--c-info-1); } .ds-kpi.info .icn { background: var(--c-info-1); color: #fff; } .ds-kpi.accent { border-right-color: var(--c-accent-1); } .ds-kpi.accent .icn { background: var(--c-accent-1); color: #fff; } .ds-kpi.neutral { border-right-color: var(--c-neutral-1); } .ds-kpi.neutral .icn { background: var(--c-neutral-1); color: #fff; } .ds-kpi.pink { border-right-color: #EC407A; } .ds-kpi.pink .icn { background: #EC407A; color: #fff; } .ds-kpi.deep-purple { border-right-color: #9C27B0; } .ds-kpi.deep-purple .icn { background: #9C27B0; color: #fff; } .ds-kpi.teal { border-right-color: #26A69A; } .ds-kpi.teal .icn { background: #26A69A; color: #fff; } /* WA brand variants for .ds-kpi (used by wa_snapshot) */ .ds-kpi.wa-green { border-right-color: #25D366; } .ds-kpi.wa-green .icn { background: #25D366; color: #fff; } .ds-kpi.wa-blue { border-right-color: #34B7F1; } .ds-kpi.wa-blue .icn { background: #34B7F1; color: #fff; } /* .ds-btn loading state — JS sets data-loading="1" during AJAX. Override with warning tones. */ .ds-btn[data-loading="1"] .t { background: var(--c-warn-1) !important; color: #fff !important; } .ds-btn[data-loading="1"] .i { background: var(--c-warn-2) !important; color: #fff !important; } .ds-btn[data-loading="1"] { pointer-events: none; opacity: 0.95; } /* .ds-badge.teal — green-leaning teal, distinct from info (added 2026-05-25) */ .ds-badge.teal { background: #26A69A; color: #fff; } /* Generic color variants for product-card (added 2026-05-25 for contact_add and similar) */ .pc-blue .accent { background: #2196F3; } .pc-blue .pc-icn { background: rgba(33,150,243,0.12); color: #1976D2; } .pc-green .accent { background: #4CAF50; } .pc-green .pc-icn { background: rgba(76,175,80,0.12); color: #2E7D32; } .pc-cyan .accent { background: #00BCD4; } .pc-cyan .pc-icn { background: rgba(0,188,212,0.12); color: #00838F; } .pc-violet .accent { background: #7E57C2; } .pc-violet .pc-icn { background: rgba(126,87,194,0.12); color: #5E35B1; } .pc-pink .accent { background: #EC407A; } .pc-pink .pc-icn { background: rgba(236,64,122,0.12); color: #C2185B; } /* Fix: explicit min-height on .ds-btn ensures both .t and .i zones render at the same height. flex stretch alone can fail when one child has a larger intrinsic content size (icon 14px vs text 13px) — visible mismatch. Default size: 32px (matches the icon zone height: 14px icon + 9+9 padding). */ .ds-btn { min-height: 32px; } .ds-btn.sm { min-height: 26px; } .ds-btn.lg { min-height: 40px; } .ds-btn .i i { top: 0 !important; vertical-align: middle; line-height: 1; } /* Stronger fix: ensure .ds-btn .t and .i zones render same height regardless of flex-stretch behavior (some browsers misbehave with