:root {
  --navy: #061226;
  --navy-2: #0a1f3d;
  --navy-3: #0f2c55;
  --muted: #64748b;
  --line: #d9e2ef;
  --paper: #f5f7fb;
  --paper-2: #eef3f9;
  --text: #eff6ff;
  --border: rgba(255,255,255,.12);
  --brand: #2F6FCF;
  --brand2: #6AA2F8;
  --shadow: 0 20px 70px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(106, 162, 248, 0.08), transparent 30%),
    linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
  color: var(--navy);
  font-family: "Cairo", "Inter", Arial, sans-serif;
}
main { width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { border: 0; }
img, svg, video, canvas, iframe { max-width: 100%; }
input, textarea, select, button { max-width: 100%; }
summary::-webkit-details-marker { display: none; }
.text-balance { text-wrap: balance; }

.section-frame { width: 100%; margin: 0; border-radius: 0; overflow: hidden; position: relative; }
.dark-panel {
  background:
    radial-gradient(circle at 78% 28%, rgba(70, 118, 194, 0.28), transparent 35%),
    radial-gradient(circle at 18% 18%, rgba(93, 145, 231, 0.08), transparent 24%),
    linear-gradient(135deg, #061226 0%, #071a33 48%, #0b2240 100%);
  color: white;
}
.light-panel {
  background:
    radial-gradient(circle at top right, rgba(114, 160, 239, 0.12), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, #eef3f9 100%);
  color: var(--navy);
}
.dashboard-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 34px 34px;
}
.glass-card {
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.07) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}
.feature-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid #e4ebf5;
  box-shadow: 0 18px 50px rgba(8,25,52,.08);
  border-radius: 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 26px 72px rgba(8,25,52,.12); border-color: #cad8eb; }
.price-card {
  background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border: 1px solid #dbe5f1;
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(5,18,38,.10);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 28px 74px rgba(6,18,38,.16); border-color: #b8cae2; }
.price-card.featured { transform: translateY(-10px); border-color: rgba(109,147,211,.65); background: linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%); box-shadow: 0 30px 80px rgba(6,18,38,.22); }
.form-shell { background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%); border: 1px solid #e3eaf5; border-radius: 28px; box-shadow: 0 24px 80px rgba(7,26,51,.12); }
.input-shell { width: 100%; border-radius: 16px; border: 1px solid #dce5f1; background: #fff; padding: .95rem 1rem; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; color: #061226; }
.input-shell:focus { border-color: #2f6fcf; box-shadow: 0 0 0 4px rgba(47,111,207,.10); }

.alert { margin: 18px auto; width: min(1180px, calc(100% - 32px)); padding: 14px 18px; border-radius: 18px; border: 1px solid rgba(6,18,38,.1); font-weight: 700; }
.alert.success { background: rgba(34,197,94,.12); color: #166534; }
.alert.error { background: rgba(248,113,113,.12); color: #991b1b; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 100; }
.modal.show { display: flex; }
.modal-card { width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: 24px; box-shadow: var(--shadow); background: white; color: #061226; border-radius: 28px; }
.modal-card.wide { width: min(960px, 100%); }
.modal-close { float: left; background: transparent; color: inherit; font-size: 30px; cursor: pointer; line-height: 1; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(6,18,38,.14); border-radius: 999px; padding: 11px 18px; color: #061226; background: white; cursor: pointer; transition: .2s; font-weight: 800; }
.btn:hover { transform: translateY(-1px); border-color: rgba(6,18,38,.28); }
.btn-primary { background: #061226; color: white; border-color: #061226; }
.btn-outline { background: transparent; }
.btn-muted { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.12); }
.btn-small { padding: 7px 12px; border-radius: 999px; font-size: 13px; }
.full { width: 100%; }
.link-btn { background: none; border: 0; color: inherit; cursor: pointer; font-weight: 800; }
.mobile-menu-btn { display: none; background: rgba(255,255,255,.08); border: 1px solid var(--border); color: white; border-radius: 14px; padding: 8px 12px; }

.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 16px 6%; background: rgba(7,17,31,.78); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); color: #fff; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; }
.logo-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 14px; background: linear-gradient(135deg,var(--brand),var(--brand2)); color: white; }
.main-nav { display: flex; align-items: center; gap: 18px; }

.auth-page { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 40px 6%; background: radial-gradient(circle at top right, rgba(47,111,207,.12), transparent 25%), linear-gradient(180deg,#f8fbff 0%,#eef3f9 100%); }
.auth-card { width: min(520px, 100%); padding: 28px; background: #fff; border: 1px solid #e3eaf5; border-radius: 28px; box-shadow: 0 24px 80px rgba(7,26,51,.12); display: grid; gap: 16px; color: #061226; }
.auth-card.wide { width: min(900px,100%); }
.auth-card h1 { font-size: clamp(28px,4vw,42px); font-weight: 900; margin: 0 0 8px; }
.auth-card label { display: grid; gap: 8px; color: #334155; font-weight: 800; }
.auth-card input, .form-grid input, .form-grid textarea, .form-grid select, .admin-grid input, .admin-grid textarea, .admin-grid select { width: 100%; border-radius: 16px; border: 1px solid #dce5f1; background: #fff; padding: .95rem 1rem; outline: none; color: #061226; }
.check { display: flex !important; align-items: center; gap: 10px; }
.check input { width: auto !important; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two, .admin-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }

.admin-body { background: #07111f; color: #eff6ff; }
.admin-shell { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.admin-sidebar { background: #07111f; border-left: 1px solid rgba(255,255,255,.12); padding: 20px; position: sticky; top: 0; height: 100vh; }
.admin-sidebar nav { display: grid; gap: 8px; margin-top: 22px; }
.admin-sidebar a { padding: 12px; border-radius: 14px; color: #dbeafe; }
.admin-sidebar a:hover { background: rgba(255,255,255,.06); }
.admin-topbar { height: 72px; display: flex; align-items: center; justify-content: flex-start; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.admin-topbar-actions { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #eff6ff; cursor: pointer; }
.admin-content { padding: 28px; }
.admin-grid { display: grid; gap: 20px; }
.section-head { margin-bottom: 24px; }
.section-head h1, .section-head h2 { margin: 0; font-size: clamp(28px,4vw,42px); font-weight: 900; }
.section-head p { color: rgba(255,255,255,.62); margin-top: 8px; }
.card, .stat-card { background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.12); border-radius: 26px; box-shadow: 0 20px 70px rgba(0,0,0,.25); padding: 22px; color: #eff6ff; }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.dashboard-grid-admin, .dashboard-grid { }
.stat-card span { display: block; color: #9fb2cc; }
.stat-card strong { font-size: 34px; }
.table-wrap { overflow: auto; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); }
table { width: 100%; border-collapse: collapse; min-width: 760px; background: rgba(255,255,255,.03); color: #eff6ff; }
th, td { text-align: right; padding: 13px; border-bottom: 1px solid rgba(255,255,255,.12); vertical-align: top; }
th { color: #93c5fd; font-weight: 800; background: rgba(255,255,255,.04); }
.permissions-box { display: grid; gap: 8px; background: #0a1526; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.report-toolbar, .report-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.report-block { margin-bottom: 20px; }
.report-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.report-grid div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px; }
.report-grid span { display: block; color: #9fb2cc; font-size: 13px; }
.pagination { display: flex; gap: 8px; list-style: none; padding: 0; }
.pagination a, .pagination span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.timer { font-size: 28px; font-weight: 900; color: #93c5fd; margin-top: 20px; }
.summary-box { display: grid; gap: 12px; margin: 20px 0; }
.summary-box>div { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); padding: 12px; }
.summary-box .total { font-size: 22px; color: #93c5fd; }

@media (max-width: 980px) {
  .section-frame { overflow: clip; }
  .feature-card, .price-card, .form-shell { border-radius: 22px; }
  .price-card.featured { transform: none; }
  .price-card:hover, .feature-card:hover { transform: none; }
  .input-shell { border-radius: 14px; padding: .85rem .9rem; }
  .admin-shell, .form-grid.two, .admin-grid.two, .stats-grid, .contact-section { grid-template-columns: 1fr; }
  .admin-sidebar { position: fixed; right: -290px; z-index: 50; transition: .2s; }
  .admin-sidebar.show { right: 0; }
  .admin-main { min-width: 0; }
  .mobile-menu-btn { display: inline-flex; }
  .main-nav { display: none; position: absolute; top: 70px; right: 6%; left: 6%; background: #0b1728; border: 1px solid var(--border); border-radius: 20px; padding: 16px; flex-direction: column; align-items: stretch; }
  .main-nav.show { display: flex; }
  .admin-content { padding: 18px; }
  .admin-topbar { padding: 0 14px; }
  .admin-topbar-actions { margin-right: auto; }
  .report-grid { grid-template-columns: 1fr; }
}

@media print {
  body { background: white; color: #111; }
  .admin-sidebar,.admin-topbar,.site-header,.btn,.modal-close,.report-toolbar button { display: none!important; }
  .modal { position: static; display: block; background: white; }
  .modal-card { box-shadow: none; border: 0; max-height: none; width: 100%; background: white; color: #111; }
  .admin-shell { display: block; }
  .admin-content { padding: 0; }
  .table-wrap { border: 1px solid #ddd; }
  table { background: white; color: #111; }
  th,td { border-color: #ddd; color: #111; }
  .report-grid div { border: 1px solid #ddd; background: white; }
}

/* Laravel exact-design patch: admin area follows the original light workspace + dark sidebar. */
.admin-nav-modern a {
  display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.74); border-radius: 16px;
  padding: 12px 14px; font-size: 14px; font-weight: 800; transition: .2s;
}
.admin-nav-modern a:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
.admin-nav-modern a span { display: flex; width: 38px; height: 38px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,255,255,.10); color: #fff; }
.admin-mobile-nav { display: grid; gap: 6px; }
.admin-mobile-nav a { border-radius: 16px; padding: 12px 14px; color: #061226; font-weight: 800; }
.admin-mobile-nav a:hover { background: #f4f8ff; }

body:not(.admin-body) .card,
body:not(.admin-body) .stat-card {
  background: #fff;
  color: #061226;
  border: 1px solid #e3eaf5;
  box-shadow: 0 18px 50px rgba(8,25,52,.08);
}
body:not(.admin-body) .stat-card span,
body:not(.admin-body) .section-head p,
body:not(.admin-body) .report-grid span { color: #64748b; }
body:not(.admin-body) .stat-card strong { color: #061226; }
body:not(.admin-body) .table-wrap { border-color: #e3eaf5; background: #fff; }
body:not(.admin-body) table { background: #fff; color: #061226; }
body:not(.admin-body) th,
body:not(.admin-body) td { border-bottom-color: #e8eef7; color: #061226; }
body:not(.admin-body) th { color: #2F6FCF; background: #f4f8ff; }
body:not(.admin-body) .permissions-box { background: #f8fbff; border-color: #e3eaf5; }
body:not(.admin-body) .btn-muted { background: #f4f8ff; color: #061226; border-color: #dbe5f1; }
body:not(.admin-body) .report-grid div { background: #f8fbff; border-color: #e3eaf5; }
body:not(.admin-body) .summary-box>div { border-bottom-color: #e3eaf5; }
body:not(.admin-body) .timer { color: #2F6FCF; }

.auth-page { min-height: 100vh; }
.section.dashboard-page, .section.checkout-page { padding: 48px 6%; }
.dashboard-page .dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; background-image: none; }
.map-frame iframe { width: 100%; min-height: 340px; border: 0; border-radius: 24px; }
.map-frame.small iframe { min-height: 280px; }
.map-placeholder { min-height: 280px; border: 1px dashed #cbd5e1; border-radius: 24px; display: grid; place-items: center; color: #64748b; background: #f8fafc; }

@media (max-width: 980px) {
  .dashboard-page .dashboard-grid { grid-template-columns: 1fr; }
}
.admin-shortcuts { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px; margin-top:16px; }
.admin-shortcuts a { display:flex; align-items:center; justify-content:center; min-height:54px; border-radius:18px; border:1px solid #e3eaf5; background:#f8fbff; color:#061226; font-weight:900; box-shadow:0 10px 30px rgba(8,25,52,.06); }
.admin-shortcuts a:hover { background:#eef6ff; border-color:#cbdcf2; transform:translateY(-1px); }
@media(max-width:980px){ .admin-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:560px){ .admin-shortcuts{grid-template-columns:1fr;} }

/* =========================
   Versapoint polished Laravel design patch
   Matches the original dark brand look while keeping admin workspace clean.
   ========================= */
:root{
  --brand-navy:#061226;
  --brand-navy-2:#071A33;
  --brand-blue:#2F6FCF;
  --brand-sky:#6AA2F8;
  --brand-ice:#B7D3FF;
  --brand-paper:#F4F8FF;
  --brand-border:#E3EAF5;
}
body,
button,
input,
textarea,
select{
  font-family:"IBM Plex Sans Arabic","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
}
html[dir="ltr"] body{ text-align:left; }
html[dir="rtl"] body{ text-align:right; }
.lang-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.45rem .75rem;font-size:.75rem;font-weight:900;border:1px solid #dbe5f1;background:white;color:var(--brand-navy)}
.lang-pill-dark{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff}
.admin-body.admin-polished{background:var(--brand-paper);color:var(--brand-navy);}
.admin-layout{background:
  radial-gradient(circle at 90% 0%, rgba(47,111,207,.14), transparent 28%),
  linear-gradient(180deg,#f7fbff 0%,#eef4fb 100%);}
.admin-side-panel{position:sticky;top:0;height:100vh;overflow:hidden;flex-direction:column;background:
  radial-gradient(circle at 80% 10%,rgba(47,111,207,.28),transparent 28%),
  linear-gradient(180deg,#061226 0%,#071a33 64%,#0B2746 100%);padding:24px;color:#fff;border-inline-end:1px solid rgba(255,255,255,.10);}
.admin-side-glow{position:absolute;border-radius:999px;filter:blur(60px);pointer-events:none;}
.admin-side-glow-a{width:230px;height:230px;right:-100px;top:-20px;background:rgba(47,111,207,.45)}
.admin-side-glow-b{width:300px;height:300px;left:-120px;bottom:80px;background:rgba(183,211,255,.13)}
.admin-nav-modern{scrollbar-width:thin;scrollbar-color:rgba(183,211,255,.5) transparent;}
.admin-nav-modern a{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(255,255,255,.72);border-radius:18px;padding:12px 14px;font-size:14px;font-weight:800;transition:.22s;}
.admin-nav-modern a span{display:flex;width:40px;height:40px;flex-shrink:0;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.10);color:#fff;transition:.22s;font-weight:900;}
.admin-nav-modern a:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.20);transform:translateX(0)}
.admin-nav-modern a.active{border-color:rgba(106,162,248,.65);background:linear-gradient(135deg,rgba(47,111,207,.34),rgba(106,162,248,.16));color:#fff;box-shadow:0 18px 50px rgba(47,111,207,.18)}
.admin-nav-modern a.active span{background:linear-gradient(135deg,var(--brand-blue),var(--brand-sky));box-shadow:0 12px 26px rgba(47,111,207,.34)}
.admin-workspace{background:transparent;}
.admin-hero-bar{position:relative;overflow:hidden;border-radius:30px;padding:22px 24px;background:
  radial-gradient(circle at 12% 20%,rgba(183,211,255,.24),transparent 26%),
  linear-gradient(135deg,#061226 0%,#0A1F3D 46%,#2F6FCF 100%);box-shadow:0 28px 70px rgba(7,26,51,.18);color:#fff;}
.admin-hero-bar:after{content:"";position:absolute;inset:auto -40px -90px auto;width:240px;height:240px;background:rgba(255,255,255,.10);border-radius:999px;filter:blur(6px)}
.admin-kicker{display:inline-flex;position:relative;z-index:1;margin-bottom:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#B7D3FF;}
.admin-page-title{position:relative;z-index:1;margin:0;font-size:clamp(28px,4vw,46px);line-height:1.1;font-weight:900;letter-spacing:-.03em;color:#fff;}
.admin-top-actions{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;}
.admin-action-btn,.admin-logout{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;padding:0 15px;font-weight:900;box-shadow:0 12px 30px rgba(0,0,0,.10);transition:.2s;}
.admin-action-btn{width:46px;padding:0}.admin-action-btn.lang-switch{width:auto;min-width:52px;}
.admin-logout{gap:8px;background:#fff;color:#061226;border-color:#fff;}
.admin-action-btn:hover,.admin-logout:hover{transform:translateY(-1px);filter:brightness(1.03)}
.section-head{margin-bottom:22px;padding-inline:2px}.section-head h1{margin:0;font-size:clamp(26px,3vw,38px);font-weight:900;color:#061226;letter-spacing:-.03em}.section-head p{max-width:760px;color:#64748b;margin:.55rem 0 0;font-weight:700;}
.card,.stat-card{background:rgba(255,255,255,.92)!important;color:#061226!important;border:1px solid #e3eaf5!important;border-radius:28px!important;box-shadow:0 22px 60px rgba(8,25,52,.09)!important;backdrop-filter:blur(16px);}
.card h2,.card h3,.stat-card strong{color:#061226}.stat-card{position:relative;overflow:hidden;min-height:136px}.stat-card:before{content:"";position:absolute;inset:0 auto auto 0;width:120px;height:120px;background:linear-gradient(135deg,rgba(47,111,207,.20),rgba(106,162,248,.08));border-radius:999px;transform:translate(-35%,-35%)}
.stat-card:nth-child(2):before{background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(47,111,207,.05))}.stat-card:nth-child(3):before{background:linear-gradient(135deg,rgba(245,158,11,.20),rgba(47,111,207,.05))}.stat-card:nth-child(4):before{background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(47,111,207,.05))}
.stat-card span{position:relative;color:#64748b!important;font-weight:800}.stat-card strong{position:relative;font-size:38px!important;line-height:1.2}.stats-grid{gap:18px}.dashboard-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}.dashboard-feature-card{display:flex;align-items:center;gap:14px;border:1px solid #e3eaf5;border-radius:24px;background:linear-gradient(180deg,#fff,#f8fbff);padding:18px;color:#061226;box-shadow:0 16px 44px rgba(8,25,52,.07)}.dashboard-feature-card .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#2F6FCF,#6AA2F8);color:#fff;font-weight:900}.dashboard-feature-card b{display:block;font-weight:900}.dashboard-feature-card span{color:#64748b;font-size:13px;font-weight:700}
.table-wrap{border-radius:22px!important;border:1px solid #e3eaf5!important;background:#fff!important;box-shadow:0 18px 45px rgba(8,25,52,.05);overflow:auto;}
table{background:#fff!important;color:#061226!important;border-collapse:separate!important;border-spacing:0;min-width:860px;}th,td{color:#061226!important;border-bottom:1px solid #edf2f8!important;padding:15px 16px!important;vertical-align:middle!important;}th{position:sticky;top:0;z-index:1;background:linear-gradient(180deg,#f4f8ff,#eef5ff)!important;color:#2F6FCF!important;font-size:12px;text-transform:uppercase;letter-spacing:.03em;font-weight:900!important;}tbody tr{transition:.18s}tbody tr:hover{background:#f8fbff}.table-wrap table tr:last-child td{border-bottom:0!important}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}.pill-blue{background:#edf5ff;color:#2F6FCF}.pill-green{background:#ecfdf5;color:#047857}.pill-red{background:#fff1f2;color:#be123c}.pill-slate{background:#f1f5f9;color:#475569}.btn{border-radius:999px!important;font-weight:900!important}.btn-primary{background:linear-gradient(135deg,#061226,#2F6FCF)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 14px 30px rgba(47,111,207,.18)}.btn-muted{background:#f4f8ff!important;color:#061226!important;border-color:#dbe5f1!important}.btn-danger{background:#fff1f2!important;color:#be123c!important;border-color:#ffe4e6!important}.input-shell,.auth-card input,.form-grid input,.form-grid textarea,.form-grid select,.admin-grid input,.admin-grid textarea,.admin-grid select{border-radius:18px!important;border:1px solid #dbe5f1!important;background:#fff!important;color:#061226!important;box-shadow:0 8px 22px rgba(8,25,52,.03);}.permissions-box{background:#f8fbff!important;border:1px solid #e3eaf5!important;border-radius:20px!important}.modal-card{border:1px solid #e3eaf5!important;box-shadow:0 30px 90px rgba(8,25,52,.24)!important}.admin-mobile-nav a{display:flex;align-items:center;gap:10px;border-radius:16px;padding:12px 14px;color:#061226;font-weight:900}.admin-mobile-nav a:hover{background:#f4f8ff}.admin-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}.admin-shortcuts a{display:flex;min-height:64px;align-items:center;gap:12px;justify-content:flex-start;border-radius:22px;border:1px solid #e3eaf5;background:linear-gradient(180deg,#fff,#f8fbff);color:#061226;font-weight:900;padding:0 18px;box-shadow:0 14px 35px rgba(8,25,52,.06);transition:.2s}.admin-shortcuts a:hover{transform:translateY(-2px);border-color:#cbdcf2;box-shadow:0 20px 48px rgba(8,25,52,.10)}.admin-shortcuts .ico{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:#edf5ff;color:#2F6FCF}.package-admin-grid{display:grid;gap:22px}.package-editor-card{overflow:hidden;padding:0!important}.package-editor-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px;background:linear-gradient(135deg,#061226,#0A1F3D 52%,#2F6FCF);color:#fff}.package-editor-head h3{color:#fff!important;margin:0;font-size:24px}.package-editor-head p{margin:5px 0 0;color:rgba(255,255,255,.72);font-weight:700}.package-editor-body{padding:22px}.feature-edit-grid{display:grid;gap:12px;margin-top:14px}.feature-edit-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;border:1px solid #e3eaf5;border-radius:20px;background:#f8fbff;padding:10px}.feature-edit-row input{background:#fff!important}.feature-edit-row.removed{opacity:.45;filter:grayscale(.2)}.price-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.price-preview{border-radius:20px;border:1px solid #e3eaf5;background:#fff;padding:14px}.price-preview span{display:block;color:#64748b;font-size:12px;font-weight:800}.price-preview strong{font-size:20px;font-weight:900;color:#061226}.permission-summary{display:grid;gap:10px;margin-top:14px}.permission-line{border:1px solid #e3eaf5;background:#fff;border-radius:16px;padding:12px}.demo-client-card{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border:1px solid #e3eaf5;border-radius:24px;background:linear-gradient(180deg,#fff,#f8fbff);padding:16px;margin-bottom:12px}.demo-client-card b{font-weight:900;color:#061226}.demo-client-card span{display:block;color:#64748b;font-size:13px;font-weight:700}.timer{color:#2F6FCF!important}.map-frame iframe{border:1px solid #e3eaf5!important;box-shadow:0 18px 50px rgba(8,25,52,.08)}
html[dir="ltr"] th,html[dir="ltr"] td{text-align:left}html[dir="rtl"] th,html[dir="rtl"] td{text-align:right}html[dir="ltr"] .admin-nav-modern a span{margin-right:0}html[dir="ltr"] .admin-top-actions{justify-content:flex-end}html[dir="rtl"] .admin-top-actions{justify-content:flex-start}.site-header{font-family:"IBM Plex Sans Arabic","Inter",sans-serif!important}
@media(max-width:1100px){.dashboard-card-grid,.admin-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}.price-preview-grid{grid-template-columns:1fr}.feature-edit-row{grid-template-columns:1fr}.demo-client-card{grid-template-columns:1fr}.admin-hero-bar{border-radius:24px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.stats-grid,.dashboard-card-grid,.admin-shortcuts{grid-template-columns:1fr}.admin-page-title{font-size:28px}.admin-hero-bar{padding:18px}.admin-top-actions{gap:8px}.admin-logout span:last-child{display:none}table{min-width:760px}}

/* Customer portal subscription lifecycle patch */
.customer-portal-page{padding:42px min(6vw,76px);background:linear-gradient(180deg,#f5f8ff 0%,#eef4fb 100%);min-height:calc(100vh - 80px)}
.customer-hero{display:flex;align-items:stretch;justify-content:space-between;gap:20px;margin-bottom:22px;padding:26px;border-radius:34px;background:radial-gradient(circle at 8% 20%,rgba(183,211,255,.22),transparent 25%),linear-gradient(135deg,#061226,#0a1f3d 55%,#2f6fcf);color:#fff;box-shadow:0 28px 80px rgba(6,18,38,.18)}
.customer-hero.compact{align-items:center}.customer-hero h1{margin:.35rem 0;font-size:clamp(30px,4vw,54px);font-weight:900;letter-spacing:-.04em}.customer-hero p{max-width:850px;color:rgba(255,255,255,.74);font-weight:700;line-height:1.8}.portal-kicker{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);color:#b7d3ff;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.portal-kicker.muted{border-color:#dbe7f6;background:#f6f9ff;color:#2f6fcf}.portal-status-card{min-width:250px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.10);border-radius:26px;padding:20px;backdrop-filter:blur(14px)}.portal-status-card span,.portal-status-card small{display:block;color:rgba(255,255,255,.68);font-weight:800}.portal-status-card strong{display:block;margin:10px 0;font-size:28px;font-weight:900}.portal-status-card strong.ok{color:#86efac}.portal-status-card strong.danger{color:#fecaca}.portal-alert{display:flex;gap:12px;align-items:center;border-radius:22px;padding:16px 18px;margin-bottom:20px;border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;font-weight:800}.customer-grid{display:grid;gap:20px}.customer-grid.main{grid-template-columns:1.25fr .75fr}.customer-grid.secondary{grid-template-columns:.85fr 1.15fr;margin-top:20px}.portal-card{background:rgba(255,255,255,.94);border:1px solid #e3eaf5;border-radius:30px;padding:22px;box-shadow:0 22px 60px rgba(8,25,52,.09);color:#061226}.card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.card-title-row h2{margin:.45rem 0 0;font-size:clamp(22px,3vw,32px);font-weight:900;letter-spacing:-.03em}.package-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:linear-gradient(135deg,#2f6fcf,#6aa2f8);color:#fff;font-weight:900;font-size:22px}.package-icon.bronze{background:linear-gradient(135deg,#b45309,#f59e0b)}.package-icon.silver{background:linear-gradient(135deg,#64748b,#cbd5e1)}.package-icon.gold{background:linear-gradient(135deg,#ca8a04,#facc15);color:#061226}.package-icon.diamond{background:linear-gradient(135deg,#0891b2,#67e8f9);color:#061226}.price-summary{display:grid;gap:10px;margin:16px 0}.price-summary.compact div{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e8eef7;background:#f8fbff;border-radius:18px;padding:12px 14px}.price-summary span{color:#64748b;font-weight:800;font-size:13px}.price-summary strong{font-weight:900}.price-summary .total{background:linear-gradient(135deg,#061226,#0a1f3d)!important;color:#fff}.price-summary .total span{color:#b7d3ff}.price-summary .total strong{color:#fff;font-size:20px}.portal-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.portal-form{display:grid;gap:12px}.portal-form.two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.portal-form label{display:grid;gap:7px;color:#334155;font-size:13px;font-weight:900}.portal-form input,.portal-form select,.portal-form textarea{width:100%;border:1px solid #dbe7f6;border-radius:16px;background:#fff;padding:12px 13px;color:#061226;font-weight:800;outline:none}.portal-form input:focus,.portal-form select:focus,.portal-form textarea:focus{border-color:#2f6fcf;box-shadow:0 0 0 4px rgba(47,111,207,.10)}.portal-form .full{grid-column:1/-1}.btn.btn-dark{background:#061226;color:#fff;border-color:#061226}.btn.btn-danger{background:#dc2626;color:#fff;border-color:#dc2626}.muted-text{color:#64748b;font-weight:700;line-height:1.8}.demo-access-box{display:grid;gap:10px;border:1px solid #dbeafe;background:#eff6ff;border-radius:22px;padding:16px}.demo-access-box p{margin:0;word-break:break-word}.portal-empty{display:grid;place-items:center;min-height:150px;border:1px dashed #cbd5e1;border-radius:22px;background:#f8fafc;color:#64748b;font-weight:800;text-align:center;padding:20px}.upgrade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}.upgrade-card{position:relative;overflow:hidden}.upgrade-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#2f6fcf,#6aa2f8)}
@media(max-width:1050px){.customer-hero,.customer-grid.main,.customer-grid.secondary{grid-template-columns:1fr;display:grid}.portal-status-card{min-width:0}.upgrade-grid{grid-template-columns:1fr}.customer-hero.compact{align-items:stretch}}
@media(max-width:640px){.customer-portal-page{padding:24px 14px}.customer-hero{padding:20px;border-radius:26px}.portal-form.two{grid-template-columns:1fr}.portal-card{border-radius:24px;padding:16px}.price-summary.compact div{align-items:flex-start;flex-direction:column}.portal-actions .btn{width:100%;justify-content:center}}

/* Final customer header polish */
.site-header-light{
  margin-top:14px!important;
  margin-bottom:10px!important;
  border:1px solid rgba(219,229,241,.95)!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 18px 54px rgba(7,26,51,.10)!important;
  backdrop-filter:blur(16px)!important;
}
.site-header-light a,.site-header-light button{color:#061226!important;}
.site-header-light form button{background:#061226!important;color:#fff!important;border-color:#061226!important;}


/* Registration validation feedback */
.form-field-error{min-height:1.05rem;margin-top:.45rem;font-size:.76rem;font-weight:900;color:#dc2626;line-height:1.35;}
.form-field-error.is-info{color:#2563eb;}
.form-field-error.is-success{color:#059669;}
.input-shell.has-error,input.has-error,select.has-error{border-color:#ef4444!important;box-shadow:0 0 0 4px rgba(239,68,68,.10)!important;}
.input-shell.has-success,input.has-success{border-color:#10b981!important;box-shadow:0 0 0 4px rgba(16,185,129,.10)!important;}

/* Demo request one-time flow and customer-dashboard delivery fixes - 2026-05-25 */
.btn-success{background:#059669!important;border-color:#059669!important;color:#fff!important;box-shadow:0 14px 30px rgba(5,150,105,.18)!important}
.pending-demo-box{border-color:#bfdbfe!important;background:linear-gradient(180deg,#eff6ff,#f8fbff)!important;color:#061226!important}
.pending-demo-box b{color:#061226!important}


/* Homepage hero refresh - inspired by provided reference while preserving structure */
.site-header-dark{background:rgba(5,16,32,.72)!important;border:1px solid rgba(255,255,255,.06);border-radius:999px;margin-top:18px;box-shadow:0 16px 48px rgba(0,0,0,.22)}
.site-header-light{background:rgba(255,255,255,.88)!important;border:1px solid rgba(226,232,240,.95);border-radius:999px;margin-top:18px;box-shadow:0 16px 48px rgba(8,25,52,.08)}
.dark-panel{position:relative;background:
    radial-gradient(circle at 100% 10%, rgba(73,125,215,.26), transparent 26%),
    radial-gradient(circle at 4% 24%, rgba(72,181,255,.10), transparent 26%),
    radial-gradient(circle at 95% 95%, rgba(255,255,255,.05), transparent 20%),
    linear-gradient(135deg, #051021 0%, #071a33 42%, #0a2343 100%)!important;}
@media (max-width: 1024px){
  .site-header-dark,.site-header-light{border-radius:26px;margin-top:10px}
}


/* 2026-06-10 customer alert / legal page polish */
.portal-warning-grid{display:grid;grid-template-columns:.82fr 1.3fr .88fr;gap:16px;margin-bottom:22px}
.portal-warning-card{border:1px solid #f4c790;background:linear-gradient(180deg,#fffaf2,#fff5e8);border-radius:28px;padding:20px 22px;box-shadow:0 16px 40px rgba(180,83,9,.08);color:#7c2d12}
.portal-warning-title-card{background:linear-gradient(135deg,#fff7ed,#ffedd5)}
.portal-warning-message-card p,.portal-warning-title-card p{margin:8px 0 0;color:#9a3412;font-weight:800;line-height:1.9}
.portal-warning-title-card h3,.portal-warning-timer-card strong{margin:10px 0 0;font-size:clamp(24px,3vw,38px);line-height:1.15;font-weight:900;color:#9a3412}
.portal-warning-badge,.portal-warning-label{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;background:#fff;border:1px solid #f5d2ab;color:#b45309;font-size:12px;font-weight:900}
.portal-warning-timer-card{display:grid;align-content:center;background:linear-gradient(135deg,#fffaf5,#ffffff)}
.portal-warning-timer-card .timer{display:block;margin-top:14px;color:#2563eb!important;font-size:clamp(24px,3.5vw,44px);font-weight:900;line-height:1.22;text-align:center}
.customer-notification-item{border:1px solid #dbeafe!important;background:linear-gradient(180deg,#ffffff,#f8fbff)!important;border-radius:22px!important;padding:16px 18px!important}
.demo-card .muted-text,.demo-card p,.demo-card .demo-access-box,.demo-card .demo-access-box p,.demo-card .pending-demo-box,.demo-card .pending-demo-box p{color:#334155!important}
.demo-card h2,.demo-card b,.demo-card strong{color:#061226!important}
.demo-card .btn,.demo-card .pill{color:#fff}
.legal-page .site-header,.legal-page footer{display:none!important}
@media (max-width: 1100px){.portal-warning-grid{grid-template-columns:1fr}}



/* 2026-06-10 refined single payment notice card */
.payment-notice-card{position:relative;overflow:hidden;margin:0 0 22px;border:1px solid #f5d0a4;border-radius:30px;background:linear-gradient(135deg,#fffaf4 0%,#fff7ed 48%,#ffffff 100%);box-shadow:0 18px 50px rgba(180,83,9,.10);color:#061226}
.payment-notice-card:before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(180deg,#f97316,#f59e0b)}
html[dir="rtl"] .payment-notice-card:before{inset:0 0 0 auto}
.payment-notice-content{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px 26px}
.payment-notice-main{min-width:0;flex:1}.payment-notice-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.payment-notice-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #fb923c;background:#fff;border-radius:999px;padding:7px 13px;color:#c2410c;font-size:13px;font-weight:900;box-shadow:0 8px 22px rgba(249,115,22,.12)}.payment-notice-dot{width:8px;height:8px;border-radius:999px;background:#f97316;box-shadow:0 0 0 5px rgba(249,115,22,.13)}.payment-notice-title{font-size:13px;font-weight:900;color:#9a3412;background:#ffedd5;border:1px solid #fed7aa;border-radius:999px;padding:7px 12px}.payment-notice-card h3{margin:0;color:#7c2d12;font-size:clamp(22px,2.5vw,32px);font-weight:900;letter-spacing:-.02em}.payment-notice-card p{margin:8px 0 0;max-width:900px;color:#9a3412;font-size:15px;font-weight:800;line-height:1.9}.payment-notice-countdown{min-width:300px;border:1px solid #fed7aa;background:rgba(255,255,255,.78);border-radius:24px;padding:16px 18px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.payment-notice-countdown span{display:block;margin-bottom:7px;color:#b45309;font-size:12px;font-weight:900}.payment-notice-countdown .timer{display:block;color:#2563eb!important;font-size:clamp(24px,3.2vw,40px);font-weight:900;line-height:1.2;letter-spacing:-.04em}
@media(max-width:900px){.payment-notice-content{display:grid;padding:20px}.payment-notice-countdown{min-width:0}.payment-notice-card:before{width:100%;height:5px;inset:0 0 auto}}




/* 2026-06-10 premium customer portal refresh */
.customer-portal-modern{--surface:#ffffff;--surface-soft:#f7faff;--surface-blue:#eef4ff;--line:#dbe7f5;--line-strong:#cddcf0;--heading:#081a33;--text:#334155;--muted:#7a8ca7;--blue:#2f6fcf;--blue-deep:#0b2f68;--hero1:#04172d;--hero2:#0d315f;--hero3:#163d70;--success:#22c55e;--warn:#f59e0b;position:relative;background:radial-gradient(circle at top right,rgba(70,125,219,.09),transparent 30%),linear-gradient(180deg,#f5f8fd 0%,#f8fbff 58%,#f3f6fb 100%);padding:18px;border-radius:34px}
.customer-portal-modern .customer-hero-solid{position:relative;overflow:hidden;padding:34px 38px;border-radius:34px;background:radial-gradient(circle at 20% 0%,rgba(64,120,217,.14),transparent 24%),radial-gradient(circle at 72% -10%,rgba(86,151,255,.18),transparent 22%),linear-gradient(135deg,var(--hero1) 0%,#052040 35%,#0b2a53 65%,var(--hero3) 100%)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 28px 80px rgba(4,23,45,.24)!important;display:flex;align-items:center;justify-content:space-between;gap:28px}
.customer-portal-modern .customer-hero-solid:before,.customer-portal-modern .customer-hero-solid:after{content:"";position:absolute;border-radius:999px;pointer-events:none;opacity:.55}.customer-portal-modern .customer-hero-solid:before{width:420px;height:420px;inset:auto auto -260px 22%;background:radial-gradient(circle,rgba(44,101,189,.28) 0%,rgba(44,101,189,0) 68%)}.customer-portal-modern .customer-hero-solid:after{width:360px;height:360px;inset:-180px 10% auto auto;border:1px solid rgba(113,167,255,.14)}
.customer-portal-modern .customer-hero h1{margin:10px 0 8px;font-size:clamp(34px,4vw,58px);font-weight:900;letter-spacing:-.04em;line-height:1.08;color:#fff}.customer-portal-modern .customer-hero p{max-width:760px;color:rgba(255,255,255,.84)!important;font-size:16px;line-height:1.95;font-weight:700}
.customer-portal-modern .portal-kicker{position:relative;z-index:1;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#e7f1ff;padding:9px 15px;font-size:11px;font-weight:900;letter-spacing:.08em;backdrop-filter:blur(10px)}
.customer-portal-modern .portal-status-card{position:relative;z-index:1;min-width:280px;max-width:320px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:22px 24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(1,8,20,.18)}
.customer-portal-modern .portal-status-card span,.customer-portal-modern .portal-status-card small{color:rgba(255,255,255,.72)}.customer-portal-modern .portal-status-card strong{font-size:38px;margin:10px 0 12px}.customer-portal-modern .portal-status-card strong.ok{color:#85efac}
.customer-portal-modern .payment-notice-card{margin:18px 0 22px;border:1px solid #f5d9b3;border-radius:30px;background:linear-gradient(135deg,#fffdfa 0%,#fff7ed 48%,#fffdf8 100%);box-shadow:0 16px 42px rgba(215,119,24,.08)!important}.customer-portal-modern .payment-notice-card:before{width:0!important}.customer-portal-modern .payment-notice-content{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px}.customer-portal-modern .payment-notice-top{margin-bottom:12px}.customer-portal-modern .payment-notice-badge{border:1px solid #fdba74;background:#fff8ef;color:#d97706;box-shadow:none;padding:8px 14px}.customer-portal-modern .payment-notice-dot{background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.12)}.customer-portal-modern .payment-notice-title{background:transparent;border:0;padding:0;color:#7c2d12;font-size:15px}.customer-portal-modern .payment-notice-card h3{font-size:28px;color:#7c2d12}.customer-portal-modern .payment-notice-card p{font-size:15px;color:#9a3412;max-width:880px}.customer-portal-modern .payment-notice-countdown{min-width:340px;border:1px solid #f6d7ae;background:#fff;border-radius:24px;box-shadow:0 14px 34px rgba(245,158,11,.08), inset 0 1px 0 rgba(255,255,255,.95)}.customer-portal-modern .payment-notice-countdown .timer{font-size:clamp(22px,2.6vw,38px)}
.customer-portal-modern .customer-grid{display:grid;gap:22px}.customer-portal-modern .customer-grid.main{grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr)}.customer-portal-modern .customer-grid.secondary{grid-template-columns:minmax(0,1fr)}
.customer-portal-modern .portal-card{position:relative;overflow:hidden;border:1px solid var(--line)!important;border-radius:34px!important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,255,.98))!important;box-shadow:0 20px 60px rgba(9,31,67,.08)!important;padding:26px!important}
.customer-portal-modern .portal-card:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(47,111,207,.18),transparent)}
.customer-portal-modern .card-title-row{align-items:center;margin-bottom:18px}.customer-portal-modern .card-title-row h2{font-size:clamp(28px,3vw,42px);font-weight:900;letter-spacing:-.04em;color:var(--heading);margin:.25rem 0 0}.customer-portal-modern .portal-kicker.muted{border-color:#d8e4f7;background:var(--surface-blue);color:#5473a1}
.customer-portal-modern .package-icon{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#dbe7f8,#eef4ff)!important;color:#6784aa!important;border:1px solid #d7e4f3;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.customer-portal-modern .pill{border-radius:999px;padding:7px 13px;font-weight:900;box-shadow:none}.customer-portal-modern .pill-blue{background:#edf4ff;color:#3b82f6;border:1px solid #d6e7ff}.customer-portal-modern .pill-green{background:#ecfdf3;color:#16a34a;border:1px solid #bbf7d0}
.customer-portal-modern .subscription-price-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.customer-portal-modern .price-summary.compact div,.customer-portal-modern .subscription-detail-box div{padding:14px 16px;border-radius:18px;border:1px solid var(--line)!important;background:linear-gradient(180deg,#fff,#f8fbff)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.customer-portal-modern .price-summary.compact span,.customer-portal-modern .subscription-detail-box span{font-size:13px;color:var(--muted);font-weight:900}.customer-portal-modern .price-summary.compact strong,.customer-portal-modern .subscription-detail-box strong{font-size:19px;color:#0f172a;font-weight:900}.customer-portal-modern .price-summary .total{grid-column:1/-1;border-radius:18px!important;background:linear-gradient(135deg,#071a33 0%,#0b2855 35%,#0f3e8a 100%)!important;box-shadow:0 16px 30px rgba(11,40,85,.24)!important}.customer-portal-modern .price-summary .total span{color:#d6e7ff!important}.customer-portal-modern .price-summary .total strong{font-size:22px!important;color:#fff!important}
.customer-portal-modern .subscription-card-primary{padding-bottom:24px}.customer-portal-modern .subscription-card-primary .portal-note.success-note{margin-top:16px;border:1px solid #cfe1ff;background:#f5f9ff;color:#1d4ed8;border-radius:20px;padding:14px 16px;font-weight:800}
.customer-portal-modern .portal-form.two.subscribe-select-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.customer-portal-modern .portal-form label{font-size:13px;color:#63748d;font-weight:900}.customer-portal-modern .portal-form select,.customer-portal-modern .portal-form input,.customer-portal-modern .portal-form textarea{height:52px;border:1px solid var(--line-strong)!important;border-radius:18px!important;background:#fff!important;color:#0f172a;font-size:15px;font-weight:800;box-shadow:0 8px 22px rgba(15,45,85,.04), inset 0 1px 0 rgba(255,255,255,.85)}.customer-portal-modern .portal-form textarea{min-height:120px;height:auto}.customer-portal-modern .portal-form .full{grid-column:1/-1}
.customer-portal-modern .btn,.customer-portal-modern .btn-primary,.customer-portal-modern .btn-muted,.customer-portal-modern .btn-danger{height:56px;border-radius:18px;font-size:18px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;padding:0 24px}.customer-portal-modern .btn-primary{background:linear-gradient(90deg,#16399a 0%,#2f6fcf 58%,#5f96f4 100%)!important;border:none!important;box-shadow:0 16px 36px rgba(47,111,207,.28)!important;color:#fff!important}.customer-portal-modern .btn-primary:hover{transform:translateY(-1px)}.customer-portal-modern .btn-muted{background:#eef4ff!important;color:#46617f!important;border:1px solid #d7e4f3!important}.customer-portal-modern .btn-danger{background:linear-gradient(90deg,#b91c1c,#ef4444)!important;border:none!important}.customer-portal-modern .compact-actions{margin-top:16px}
.customer-portal-modern .demo-card{background:linear-gradient(180deg,#ffffff 0%,#f7fbff 72%,#edf4ff 100%)!important}.customer-portal-modern .demo-card:after{content:"";position:absolute;inset:auto -20px -30px auto;width:220px;height:220px;background:radial-gradient(circle,rgba(157,188,241,.28),rgba(157,188,241,0) 72%);pointer-events:none}.customer-portal-modern .demo-card .card-title-row{margin-bottom:24px}.customer-portal-modern .demo-card .btn-primary{margin-top:24px}.customer-portal-modern .demo-card .muted-text,.customer-portal-modern .demo-card p{font-size:15px;line-height:1.95;color:#55657f!important}
.customer-portal-modern .renewal-card-customer{background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important}.customer-portal-modern .renewal-card-customer .muted-text{font-size:15px;line-height:1.9}.customer-portal-modern .renewal-card-customer .subscription-detail-box.renewal .wide strong{font-size:24px;color:#2563eb}
.customer-portal-modern .table-card-wide table thead th{background:#f4f8fe;color:#46617f}.customer-portal-modern .table-card-wide table tbody tr:hover td{background:#fbfdff}
.customer-upgrade-modern .customer-hero-solid{margin-bottom:22px}.customer-upgrade-modern .current-plan-card,.customer-upgrade-modern .upgrade-submit-card{border-radius:32px!important}.customer-upgrade-modern .alert-note{border:1px solid #dbe7f5;background:linear-gradient(180deg,#f8fbff,#fff);border-radius:20px;padding:16px 18px;color:#46617f;font-weight:800;line-height:1.9}
.customer-upgrade-modern .upgrade-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.customer-upgrade-modern .upgrade-choice-card{border-radius:32px!important;padding:24px!important;background:linear-gradient(180deg,#fff,#f8fbff)!important;border:1px solid var(--line)!important;box-shadow:0 18px 42px rgba(15,45,85,.06)!important}.customer-upgrade-modern .upgrade-choice-card.is-selected{border-color:#7fb0ff!important;background:linear-gradient(180deg,#f8fbff,#eef5ff)!important;box-shadow:0 22px 56px rgba(47,111,207,.18)!important}.customer-upgrade-modern .upgrade-choice-head{align-items:flex-start}.customer-upgrade-modern .upgrade-choice-head h2{font-size:36px}.customer-upgrade-modern .choice-check{width:40px;height:40px;background:#f3f7ff;border:1px solid var(--line-strong)}.customer-upgrade-modern .upgrade-choice-card.is-selected .choice-check{background:linear-gradient(135deg,#2f6fcf,#5f96f4);box-shadow:0 10px 22px rgba(47,111,207,.24)}
.customer-upgrade-modern .upgrade-card-summary .total{margin-top:4px}.customer-upgrade-modern .upgrade-submit-card{position:sticky;bottom:16px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.98))!important;box-shadow:0 24px 60px rgba(15,45,85,.16)!important}.customer-upgrade-modern .upgrade-selected-total{background:linear-gradient(90deg,#16399a,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:38px;font-weight:900}.customer-upgrade-modern .compact-summary-box{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.customer-upgrade-modern .portal-empty{border-radius:30px;background:linear-gradient(180deg,#fff,#f8fbff)!important}
@media (max-width:1150px){.customer-portal-modern .customer-grid.main,.customer-upgrade-modern .upgrade-choice-grid{grid-template-columns:1fr}.customer-upgrade-modern .upgrade-submit-card{position:static}.customer-portal-modern .payment-notice-content{flex-direction:column;align-items:flex-start}.customer-portal-modern .payment-notice-countdown{min-width:0;width:100%}}
@media (max-width:900px){.customer-portal-modern .customer-hero-solid{padding:28px 22px;display:grid}.customer-portal-modern .portal-status-card{max-width:none}.customer-portal-modern .portal-form.two.subscribe-select-form,.customer-upgrade-modern .compact-summary-box,.customer-portal-modern .subscription-price-grid{grid-template-columns:1fr}.customer-portal-modern .card-title-row h2{font-size:34px}.customer-portal-modern .btn,.customer-portal-modern .btn-primary,.customer-portal-modern .btn-muted,.customer-portal-modern .btn-danger{height:52px;font-size:17px}}


/* 2026-06-10 contrast fix: no white-on-white customer portal labels */
.customer-portal-modern .portal-card,
.customer-portal-modern .demo-card,
.customer-portal-modern .subscription-card-primary,
.customer-portal-modern .renewal-card-customer,
.customer-upgrade-modern .portal-card,
.customer-upgrade-modern .upgrade-choice-card,
.customer-upgrade-modern .upgrade-submit-card,
.customer-upgrade-modern .current-plan-card{
    background:linear-gradient(180deg,#eef5ff 0%,#eaf2ff 55%,#e4efff 100%)!important;
    border:1px solid #b9cdea!important;
    color:#061226!important;
}
.customer-portal-modern .portal-card *,
.customer-portal-modern .demo-card *,
.customer-portal-modern .subscription-card-primary *,
.customer-portal-modern .renewal-card-customer *,
.customer-upgrade-modern .portal-card *{
    text-shadow:none!important;
}
.customer-portal-modern .card-title-row h2,
.customer-portal-modern .demo-card h2,
.customer-portal-modern .subscription-card-primary h2,
.customer-portal-modern .renewal-card-customer h2,
.customer-upgrade-modern .card-title-row h2{
    color:#061226!important;
}
.customer-portal-modern .portal-kicker.muted,
.customer-portal-modern .demo-card .portal-kicker.muted,
.customer-portal-modern .subscription-card-primary .portal-kicker.muted,
.customer-portal-modern .renewal-card-customer .portal-kicker.muted,
.customer-upgrade-modern .portal-kicker.muted{
    background:#d7e7ff!important;
    border:1px solid #9dbbea!important;
    color:#123a71!important;
    box-shadow:0 8px 18px rgba(47,111,207,.10)!important;
}
.customer-portal-modern .muted-text,
.customer-portal-modern .demo-card .muted-text,
.customer-portal-modern .demo-card p,
.customer-portal-modern .subscription-card-primary p,
.customer-portal-modern .renewal-card-customer p,
.customer-upgrade-modern .alert-note,
.customer-upgrade-modern p{
    color:#263b5a!important;
}
.customer-portal-modern .price-summary.compact div,
.customer-portal-modern .subscription-detail-box div,
.customer-portal-modern .portal-form [data-policy-acceptance],
.customer-portal-modern [data-policy-acceptance],
.customer-upgrade-modern .price-summary.compact div,
.customer-upgrade-modern .subscription-detail-box div,
.customer-upgrade-modern [data-policy-acceptance]{
    background:#f3f8ff!important;
    border:1px solid #bfd2ee!important;
    color:#061226!important;
}
.customer-portal-modern .price-summary.compact div span,
.customer-portal-modern .subscription-detail-box div span,
.customer-upgrade-modern .price-summary.compact div span,
.customer-upgrade-modern .subscription-detail-box div span{
    color:#526a8c!important;
}
.customer-portal-modern .price-summary.compact div strong,
.customer-portal-modern .subscription-detail-box div strong,
.customer-upgrade-modern .price-summary.compact div strong,
.customer-upgrade-modern .subscription-detail-box div strong{
    color:#061226!important;
}
.customer-portal-modern .price-summary .total,
.customer-upgrade-modern .price-summary .total{
    background:linear-gradient(135deg,#061226 0%,#0a2b5d 55%,#16418a 100%)!important;
    border-color:transparent!important;
}
.customer-portal-modern .price-summary .total span,
.customer-portal-modern .price-summary .total strong,
.customer-upgrade-modern .price-summary .total span,
.customer-upgrade-modern .price-summary .total strong{
    color:#ffffff!important;
}
.customer-portal-modern .demo-card{
    background:linear-gradient(180deg,#e9f3ff 0%,#dfebff 62%,#d7e6fb 100%)!important;
}
.customer-portal-modern .demo-card:after{
    opacity:.45!important;
}
.customer-portal-modern .demo-access-box,
.customer-portal-modern .pending-demo-box{
    background:#f2f7ff!important;
    border:1px solid #adc5e8!important;
    color:#061226!important;
}
.customer-portal-modern .demo-access-box p,
.customer-portal-modern .pending-demo-box p,
.customer-portal-modern .demo-access-box b,
.customer-portal-modern .pending-demo-box b{
    color:#061226!important;
}
.customer-portal-modern .portal-form select,
.customer-portal-modern .portal-form input,
.customer-portal-modern .portal-form textarea,
.customer-upgrade-modern .portal-form select,
.customer-upgrade-modern .portal-form input,
.customer-upgrade-modern .portal-form textarea{
    background:#f8fbff!important;
    color:#061226!important;
    border-color:#adc5e8!important;
}
.customer-portal-modern .portal-form label,
.customer-upgrade-modern .portal-form label{
    color:#263b5a!important;
}
.customer-portal-modern [data-policy-acceptance] a,
.customer-upgrade-modern [data-policy-acceptance] a{
    color:#1d4ed8!important;
}
.customer-portal-modern [data-policy-acceptance] small,
.customer-upgrade-modern [data-policy-acceptance] small{
    color:#516680!important;
}
.customer-portal-modern .pill-blue,
.customer-portal-modern .pill-green,
.customer-upgrade-modern .pill-blue,
.customer-upgrade-modern .pill-green{
    color:#123a71!important;
    background:#d7e7ff!important;
    border-color:#9dbbea!important;
}
.customer-portal-modern .btn-primary,
.customer-portal-modern .btn-primary *,
.customer-upgrade-modern .btn-primary,
.customer-upgrade-modern .btn-primary *{
    color:#fff!important;
}
.customer-portal-modern .btn-muted,
.customer-upgrade-modern .btn-muted{
    background:#d7e7ff!important;
    color:#123a71!important;
    border-color:#9dbbea!important;
}
.customer-upgrade-modern .upgrade-choice-card.is-selected{
    background:linear-gradient(180deg,#dcecff 0%,#cfe3ff 100%)!important;
    border-color:#3b82f6!important;
}
.customer-upgrade-modern .choice-check{
    background:#e9f3ff!important;
    color:#123a71!important;
}
.customer-upgrade-modern .upgrade-choice-card.is-selected .choice-check{
    background:#2563eb!important;
    color:#fff!important;
}
/* keep dark hero text white only on dark background */
.customer-portal-modern .customer-hero-solid h1,
.customer-portal-modern .customer-hero-solid p,
.customer-portal-modern .customer-hero-solid .portal-kicker,
.customer-portal-modern .portal-status-card *,
.customer-upgrade-modern .customer-hero-solid h1,
.customer-upgrade-modern .customer-hero-solid p,
.customer-upgrade-modern .customer-hero-solid .portal-kicker{
    color:#fff!important;
}
.customer-portal-modern .portal-status-card strong.ok{color:#85efac!important;}


/* 2026-06-10 cleanup: remove helper-text feel and fix notifications contrast */
.customer-portal-modern .form-help{display:none!important}
.customer-portal-modern .customer-notification-list{color:#14233b!important}
.customer-portal-modern .customer-notification-item{background:linear-gradient(180deg,#f7fbff,#eef5ff)!important;border:1px solid #bdd5f5!important;color:#14233b!important;box-shadow:0 12px 28px rgba(15,45,85,.06)!important}
.customer-portal-modern .customer-notification-item strong,
.customer-portal-modern .customer-notification-item span,
.customer-portal-modern .customer-notification-item small{color:#14233b!important;opacity:1!important}
.customer-portal-modern article.portal-card:has(.customer-notification-list){background:linear-gradient(180deg,#eef5ff,#e6effc)!important;border-color:#bdd5f5!important}
.customer-portal-modern article.portal-card:has(.customer-notification-list) .portal-kicker.muted{background:#d9e8ff!important;border-color:#aecaf1!important;color:#0f3f86!important}
.customer-portal-modern article.portal-card:has(.customer-notification-list) h2{color:#071a33!important;text-shadow:none!important}
.customer-portal-modern article.portal-card:has(.customer-notification-list) .pill{background:#dbeafe!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important}
.customer-portal-modern .muted-text:empty{display:none!important}
.customer-upgrade-modern .alert-note{display:none!important}


/* 2026-06-10 EXACT-LIKE CUSTOMER PORTAL WITH ADMIN SIDEBAR */
.vp-customer-app{--navy:#04162f;--navy2:#09264c;--blue:#2f6fcf;--blue2:#5f96f4;--purple:#8b4be8;--bg:#f3f7fd;--panel:#f8fbff;--panel2:#eef5ff;--line:#d7e4f3;--text:#071a33;--muted:#64748b;min-height:100vh;background:linear-gradient(180deg,#f5f9ff 0%,#eef4fb 100%);display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;padding:16px;direction:rtl;color:var(--text);font-family:Cairo,Inter,system-ui,sans-serif}.vp-customer-main{direction:rtl;min-width:0;display:grid;gap:18px}.vp-customer-sidebar{position:sticky;top:16px;height:calc(100vh - 32px);border-radius:24px;background:radial-gradient(circle at 30% 0%,rgba(74,144,255,.18),transparent 24%),linear-gradient(180deg,#061b39,#06162f 70%,#041226);box-shadow:0 24px 70px rgba(4,22,47,.24);padding:26px 20px;display:flex;flex-direction:column;color:#fff;overflow:hidden}.vp-side-top{text-align:center;padding:10px 8px 24px;border-bottom:1px solid rgba(255,255,255,.09)}.vp-side-pill{display:inline-flex;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);border-radius:999px;padding:8px 14px;color:#d9e9ff;font-size:12px;font-weight:900}.vp-side-user-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin:22px auto 10px;background:linear-gradient(135deg,#143d77,#2f6fcf);font-size:25px}.vp-side-top small{display:block;color:#afc1d9;font-weight:800}.vp-side-top strong{display:block;color:#fff;font-size:23px;font-weight:900;margin-top:8px}.vp-side-nav{display:grid;gap:12px;margin-top:24px}.vp-side-nav a{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px;color:#dce9ff;text-decoration:none;font-weight:900;transition:.18s ease}.vp-side-nav a span{font-size:21px;opacity:.88}.vp-side-nav a:hover,.vp-side-nav a.active{background:linear-gradient(90deg,#1c48b7,#2f6fcf);color:#fff;box-shadow:0 12px 28px rgba(47,111,207,.25)}.vp-side-help{margin-top:auto;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:20px;padding:20px;text-align:center}.vp-side-help h3{font-size:18px;font-weight:900;margin:0 0 8px;color:#fff}.vp-side-help p{color:#c8d7ec;line-height:1.7;font-weight:700;margin:0 0 14px}.vp-side-help a{height:46px;border-radius:14px;background:linear-gradient(90deg,#123d83,#1f66d1);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-weight:900}.vp-customer-topbar{min-height:76px;border:1px solid var(--line);background:linear-gradient(180deg,#fbfdff,#f2f7ff);border-radius:22px;box-shadow:0 12px 36px rgba(8,31,66,.06);display:flex;align-items:center;justify-content:space-between;padding:0 22px}.vp-top-user{display:flex;align-items:center;gap:10px;direction:ltr}.vp-avatar{width:44px;height:44px;border-radius:999px;background:#d9e5f6;display:grid;place-items:center;color:#8ba0bd}.vp-top-user strong{font-size:17px;color:#1e293b}.vp-bell-wrap{position:relative}.vp-bell{position:relative;width:48px;height:48px;border:0;background:#f1f6ff;color:#243b61;border-radius:16px;font-size:21px;cursor:pointer}.vp-bell span{position:absolute;top:-6px;inset-inline-start:-5px;background:#2563eb;color:#fff;border-radius:999px;min-width:23px;height:23px;font-size:12px;display:grid;place-items:center;font-weight:900}.vp-bell-menu{display:none;position:absolute;top:56px;inset-inline-start:0;width:320px;z-index:30;background:#f8fbff;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 22px 60px rgba(8,31,66,.16)}.vp-bell-wrap:hover .vp-bell-menu{display:grid;gap:10px}.vp-bell-menu h4{margin:0 0 4px;color:#071a33}.vp-bell-item{border:1px solid var(--line);background:#eef5ff;border-radius:14px;padding:10px}.vp-bell-item strong{display:block;color:#071a33}.vp-bell-item small{display:block;color:#52647d;line-height:1.6}.vp-bell-empty{color:#52647d;font-weight:800}.vp-hero{position:relative;overflow:hidden;min-height:170px;background:radial-gradient(circle at 16% 20%,rgba(139,75,232,.18),transparent 25%),linear-gradient(135deg,#071a33,#102c64 52%,#071a33);border-radius:22px;padding:28px 34px;display:grid;grid-template-columns:120px minmax(0,1fr) 290px;gap:26px;align-items:center;box-shadow:0 22px 55px rgba(7,26,51,.20);color:#fff}.vp-hero:before{content:"";position:absolute;inset:-40% 20% auto auto;width:480px;height:480px;border:1px solid rgba(136,174,255,.12);border-radius:50%}.vp-hero-art{width:98px;height:98px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);display:grid;place-items:center;font-size:48px;z-index:1}.vp-tag,.vp-mini-badge{display:inline-flex;align-items:center;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900}.vp-tag{background:rgba(95,150,244,.18);border:1px solid rgba(255,255,255,.16);color:#e7f1ff}.vp-tag.purple,.vp-mini-badge.purple{background:#ede7ff;color:#6d28d9;border:1px solid #d8c9ff}.vp-mini-badge.blue{background:#eaf2ff;color:#2563eb;border:1px solid #d7e7ff}.vp-mini-badge.green{background:#dcfce7;color:#16a34a;border:1px solid #bbf7d0}.vp-hero h1{margin:10px 0 7px;font-size:42px;line-height:1.18;font-weight:900;color:#fff}.vp-hero p{margin:0;color:#d7e4f8;font-weight:800;line-height:1.8}.vp-hero-status{position:relative;z-index:1;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);border-radius:20px;padding:20px;text-align:center}.vp-hero-status span,.vp-hero-status small{display:block;color:#c3d3e9;font-weight:800}.vp-hero-status strong{display:block;margin:8px 0;font-size:34px;font-weight:900;color:#fff}.vp-hero-status strong.success{color:#86efac}.vp-hero-status strong.muted{color:#fff}.vp-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);background:linear-gradient(180deg,#f9fcff,#f0f6ff);border-radius:22px;box-shadow:0 14px 38px rgba(8,31,66,.06);overflow:hidden}.vp-kpi-row article{position:relative;display:grid;gap:5px;padding:22px 78px 22px 18px;border-inline-start:1px solid var(--line);min-height:110px}.vp-kpi-row article:last-child{border-inline-start:0}.vp-kpi-row span{color:#71829d;font-weight:900}.vp-kpi-row strong{font-size:22px;color:#071a33;font-weight:900}.vp-kpi-row i{position:absolute;inset-inline-end:22px;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:16px;background:#eaf2ff;color:#2563eb;display:grid;place-items:center;font-style:normal;font-size:24px}.vp-countdown-card{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(260px,420px);align-items:center;gap:22px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#f8fbff,#edf4ff);padding:24px 28px;box-shadow:0 14px 38px rgba(8,31,66,.06)}.vp-countdown-icon{font-size:60px}.vp-countdown-card h2{margin:0 0 5px;font-size:25px}.vp-countdown-card p{margin:0;color:#53657e;font-weight:800}.vp-countdown-card .timer{display:block;text-align:center;color:#1d4ed8;font-size:30px;font-weight:900}.vp-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#f9fcff,#eff6ff);box-shadow:0 16px 46px rgba(8,31,66,.07);padding:22px;color:var(--text)}.vp-card-head{display:flex;align-items:center;gap:14px;justify-content:flex-start;margin-bottom:18px}.vp-card-head h2{margin:0;font-size:26px;color:#071a33;font-weight:900}.vp-icon-box,.vp-package-icon{width:50px;height:50px;border-radius:15px;background:#e9f2ff;color:#2563eb;border:1px solid #d7e7ff;display:grid;place-items:center;font-weight:900;font-size:21px}.vp-icon-box.crown{background:#efe7ff;color:#7c3aed}.vp-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.vp-subscriber-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.vp-check-list{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}.vp-check-list li{position:relative;padding-inline-start:24px;color:#52647d;font-weight:800}.vp-check-list li:before{content:"✓";position:absolute;inset-inline-start:0;color:#2563eb;font-weight:900}.vp-btn{height:50px;border-radius:14px;border:0;display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:900;margin-top:14px}.vp-btn.primary{background:linear-gradient(90deg,#16399a,#2f6fcf,#5f96f4);color:#fff;box-shadow:0 16px 30px rgba(47,111,207,.22)}.vp-btn.purple{background:linear-gradient(90deg,#7c3aed,#a855f7);color:#fff}.vp-btn.light{background:#eef5ff;border:1px solid #cfe1ff;color:#2563eb}.vp-btn.full{width:100%}.vp-demo-body{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}.vp-erp-visual{position:relative;min-height:170px}.vp-erp-screen{position:absolute;inset:15px 8px auto auto;width:225px;height:130px;border-radius:16px;background:linear-gradient(135deg,#071a33,#153f82);box-shadow:0 18px 40px rgba(7,26,51,.16);padding:14px;color:#fff}.vp-erp-screen span{font-size:11px;font-weight:900}.vp-erp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.vp-erp-grid i{height:26px;border-radius:7px;background:#e8f1ff}.vp-erp-lines{position:absolute;inset:42px 10px auto auto;width:58px;display:grid;gap:7px}.vp-erp-lines b{height:7px;border-radius:5px;background:#8bbcff}.vp-erp-card.small{position:absolute;right:0;bottom:8px;width:92px;height:62px;border-radius:12px;background:#f0f5ff;border:1px solid #d7e7ff;box-shadow:0 10px 25px rgba(8,31,66,.12)}.vp-erp-chart{position:absolute;left:18px;bottom:4px;width:88px;height:62px;border-radius:14px;background:#f8fbff;border:1px solid #d7e7ff;display:flex;align-items:end;gap:7px;padding:10px}.vp-erp-chart i{width:14px;border-radius:8px;background:#7c3aed}.vp-erp-chart i:nth-child(1){height:26px}.vp-erp-chart i:nth-child(2){height:39px}.vp-erp-chart i:nth-child(3){height:18px}.vp-payment-visual{height:110px;position:relative}.vp-payment-visual span{position:absolute;width:128px;height:82px;border-radius:16px;background:linear-gradient(135deg,#1d4ed8,#60a5fa);transform:rotate(-10deg);right:22px;top:8px;box-shadow:0 14px 30px rgba(47,111,207,.18)}.vp-payment-visual i{position:absolute;width:58px;height:58px;border-radius:50%;background:#e8fff0;right:116px;top:58px}.vp-report-visual{height:110px;border-radius:16px;background:#eaf2ff;border:1px solid #d7e7ff;position:relative;margin-bottom:12px}.vp-report-visual i{position:absolute;right:22px;bottom:20px;width:82px;height:54px;border-radius:8px;background:linear-gradient(180deg,#bfdbfe,#60a5fa)}.vp-report-visual b{position:absolute;left:30px;top:24px;width:58px;height:58px;border-radius:50%;border:13px solid #93c5fd}.vp-price-grid,.vp-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.vp-price-grid div,.vp-mini-grid div{border:1px solid var(--line);background:#f4f8ff;border-radius:14px;padding:13px 15px;display:grid;gap:5px}.vp-price-grid span,.vp-mini-grid span{color:#667992;font-weight:900;font-size:13px}.vp-price-grid strong,.vp-mini-grid strong{color:#071a33;font-size:18px;font-weight:900}.vp-price-grid .total{grid-column:1/-1;background:linear-gradient(90deg,#071a33,#0e3a78);color:#fff}.vp-price-grid .total span,.vp-price-grid .total strong{color:#fff}.vp-price-grid.compact{grid-template-columns:1fr}.vp-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}.vp-form label{display:grid;gap:7px;color:#53657e;font-weight:900}.vp-form select,.vp-form input,.vp-form textarea{height:50px;border:1px solid var(--line);border-radius:14px;background:#f8fbff;color:#071a33;font-weight:900;padding:0 14px}.vp-form [data-policy-acceptance],.vp-renewal-form [data-policy-acceptance],.vp-upgrade-submit [data-policy-acceptance]{grid-column:1/-1;background:#eef5ff!important;color:#223a5f!important;border-color:#cfe1ff!important}.vp-form .full{grid-column:1/-1}.vp-current-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.vp-feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.vp-feature-row span{background:#f0f5ff;border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;color:#4c5f78;font-weight:900}.vp-reports-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 220px;gap:12px;border:1px solid var(--line);background:linear-gradient(180deg,#f8fbff,#eef5ff);border-radius:22px;padding:16px}.vp-reports-strip div{background:#f7fbff;border:1px solid var(--line);border-radius:16px;padding:14px}.vp-reports-strip span{color:#64748b;font-weight:900}.vp-reports-strip strong{display:block;font-size:24px;color:#071a33}.vp-reports-strip small{color:#16a34a;font-weight:900}.vp-renewal-cta,.vp-slim-note{border:1px solid var(--line);border-radius:18px;background:#eef5ff;padding:18px 22px;display:flex;align-items:center;gap:16px;color:#10233f;font-weight:900}.vp-renewal-cta .vp-btn{margin-top:0;margin-inline-start:auto}.vp-page-head{border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#071a33,#102c64);color:#fff;padding:28px 32px}.vp-page-head h1{font-size:38px;margin:0 0 7px;color:#fff}.vp-page-head p{margin:0;color:#d8e6fb;font-weight:800}.vp-renewal-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px}.vp-renewal-gem{width:74px;height:74px;margin:18px auto;border-radius:50%;background:#eee6ff;color:#8b4be8;display:grid;place-items:center;font-size:34px}.vp-renewal-main{display:grid;grid-template-columns:1fr 1fr;gap:30px}.vp-renewal-line,.vp-renewal-total{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);font-weight:900}.vp-renewal-line span{color:#52647d}.vp-renewal-line.discount strong{color:#16a34a}.vp-renewal-total{border-bottom:0;margin-top:16px}.vp-renewal-total span{font-size:22px}.vp-renewal-total strong{font-size:32px;color:#071a33}.vp-renewal-deadline{border-inline-start:1px solid var(--line);padding-inline-start:28px}.vp-renewal-deadline .timer{display:block;background:#f0f5ff;border:1px solid var(--line);border-radius:18px;color:#1d4ed8;text-align:center;padding:18px;margin:14px 0;font-size:26px;font-weight:900}.vp-renewal-form{margin-top:22px;border-top:1px dashed var(--line);padding-top:20px}.vp-upgrade-form{display:grid;gap:18px}.vp-upgrade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.vp-upgrade-choice{cursor:pointer;border:2px solid var(--line)}.vp-upgrade-choice.is-selected{border-color:#7db0ff;box-shadow:0 20px 56px rgba(47,111,207,.15)}.upgrade-radio{position:absolute;opacity:0}.choice-check{margin-inline-start:auto;width:36px;height:36px;border-radius:50%;background:#edf4ff;color:transparent;display:grid;place-items:center}.vp-upgrade-choice.is-selected .choice-check{background:#2f6fcf;color:#fff}.vp-upgrade-submit{position:sticky;bottom:16px;z-index:5}.vp-selected-total{font-size:32px;color:#2563eb}.vp-table-card table{width:100%;border-collapse:separate;border-spacing:0 8px}.vp-table-card th{color:#53657e;background:#eaf2ff;padding:12px}.vp-table-card td{background:#f8fbff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px;color:#071a33;font-weight:800}.vp-inline-timer{display:block;color:#1d4ed8;font-size:22px;margin-top:10px}.vp-info-list{display:grid;gap:8px}.vp-info-list p{margin:0;color:#37465f}.vp-info-list a{color:#2563eb}.vp-slim-note.danger{background:#fff1f2;border-color:#fecdd3;color:#be123c}.vp-mini-grid.one{grid-template-columns:1fr}@media(max-width:1160px){.vp-customer-app{grid-template-columns:1fr}.vp-customer-sidebar{position:relative;height:auto;order:-1}.vp-side-nav{grid-template-columns:repeat(2,1fr)}.vp-hero,.vp-countdown-card,.vp-renewal-layout,.vp-renewal-main,.vp-current-layout{grid-template-columns:1fr}.vp-renewal-deadline{border-inline-start:0;padding-inline-start:0}.vp-action-grid,.vp-subscriber-grid,.vp-upgrade-grid{grid-template-columns:1fr}.vp-reports-strip{grid-template-columns:1fr 1fr}.vp-kpi-row{grid-template-columns:1fr 1fr}}@media(max-width:720px){.vp-customer-app{padding:10px}.vp-form,.vp-price-grid,.vp-mini-grid,.vp-reports-strip,.vp-kpi-row{grid-template-columns:1fr}.vp-side-nav{grid-template-columns:1fr}.vp-hero h1,.vp-page-head h1{font-size:30px}.vp-hero{padding:22px}.vp-demo-body{grid-template-columns:1fr}.vp-erp-visual{min-height:210px}.vp-countdown-card{grid-template-columns:1fr;text-align:center}}

/* 2026-06-10 hard fix: customer admin-style layout columns */
.vp-customer-app{
    direction:ltr!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 330px!important;
    grid-template-areas:"main sidebar"!important;
    gap:18px!important;
    align-items:start!important;
    overflow-x:hidden!important;
}
.vp-customer-main{
    grid-area:main!important;
    direction:rtl!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
}
.vp-customer-sidebar{
    grid-area:sidebar!important;
    direction:rtl!important;
    width:330px!important;
    max-width:330px!important;
    min-width:0!important;
    box-sizing:border-box!important;
}
.vp-customer-sidebar *{box-sizing:border-box!important}
.vp-customer-main *{box-sizing:border-box!important}
.vp-customer-topbar{width:100%!important;direction:rtl!important}
.vp-side-nav a{justify-content:flex-start!important;white-space:normal!important;line-height:1.45!important}
.vp-hero{min-width:0!important;width:100%!important}
.vp-card{min-width:0!important}
.vp-action-grid,.vp-subscriber-grid,.vp-kpi-row,.vp-current-layout,.vp-renewal-layout,.vp-upgrade-grid{min-width:0!important}
@media(max-width:1160px){
    .vp-customer-app{grid-template-columns:1fr!important;grid-template-areas:"sidebar" "main"!important;direction:rtl!important}
    .vp-customer-sidebar{width:100%!important;max-width:100%!important;height:auto!important;position:relative!important;top:auto!important}
    .vp-side-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:720px){.vp-side-nav{grid-template-columns:1fr!important}}



/* 2026-06-10 customer card alignment polish */
.vp-action-grid,.vp-subscriber-grid{align-items:stretch}
.vp-card{display:flex;flex-direction:column;min-height:100%}
.vp-card-head{justify-content:space-between;align-items:flex-start;gap:12px}
.vp-card-head h2{line-height:1.25;font-size:clamp(22px,2vw,28px)}
.vp-card > p,.vp-demo-copy > p{line-height:1.9;color:#334155;font-weight:800}
.vp-start-card,.vp-reports-card,.vp-demo-card{min-height:440px}
.vp-start-card .vp-btn,.vp-reports-card .vp-btn,.vp-demo-card .vp-btn{margin-top:auto}
.vp-demo-card .vp-demo-body{display:flex;flex-direction:column;gap:18px;align-items:stretch}
.vp-demo-card .vp-demo-copy{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.vp-demo-card .vp-check-list,.vp-start-card .vp-check-list,.vp-reports-card .vp-check-list{margin-top:8px;margin-bottom:12px}
.vp-demo-card .vp-erp-visual,.vp-start-card .vp-payment-visual,.vp-reports-card .vp-report-visual{position:relative;min-height:170px;height:170px;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#f8fbff,#eef5ff);border:1px solid #d7e4f3}
.vp-demo-card .vp-erp-screen{position:absolute;top:22px;right:50%;transform:translateX(50%);width:230px;height:120px}
.vp-demo-card .vp-erp-card.small{right:calc(50% - 120px);bottom:14px;width:90px;height:58px}
.vp-demo-card .vp-erp-chart{left:calc(50% - 120px);bottom:14px;width:92px;height:60px}
.vp-start-card .vp-payment-visual span{right:50%;top:18px;transform:translateX(50%) rotate(-10deg);width:132px;height:84px}
.vp-start-card .vp-payment-visual i{right:calc(50% - 72px);top:76px;width:58px;height:58px;box-shadow:0 8px 18px rgba(34,197,94,.18)}
.vp-reports-card .vp-report-visual i{right:50%;transform:translateX(50%);bottom:22px;width:98px;height:58px}
.vp-reports-card .vp-report-visual b{left:calc(50% - 120px);top:28px;width:64px;height:64px}
.vp-report-visual:after{content:'';position:absolute;right:calc(50% - 28px);top:30px;width:54px;height:54px;border-radius:16px;background:linear-gradient(180deg,#dbeafe,#93c5fd)}
.vp-start-card p,.vp-reports-card p,.vp-demo-card p{margin:0}
.vp-check-list li{line-height:1.8}
.vp-page-head p,.vp-hero p{max-width:760px}
@media (max-width:1400px){.vp-demo-card .vp-erp-screen{width:205px;height:112px}.vp-demo-card .vp-erp-card.small{right:calc(50% - 108px)}.vp-demo-card .vp-erp-chart{left:calc(50% - 108px)}}
@media (max-width:720px){.vp-start-card,.vp-reports-card,.vp-demo-card{min-height:auto}.vp-demo-card .vp-erp-visual,.vp-start-card .vp-payment-visual,.vp-reports-card .vp-report-visual{min-height:150px;height:150px}}



/* 2026-06-12 customer portal visual parity polish */
.vp-customer-app{grid-template-columns:minmax(0,1fr) 310px!important;gap:20px!important;padding:14px 18px!important;background:linear-gradient(180deg,#f5f9ff,#edf3fb)!important}
.vp-customer-sidebar{width:310px!important;max-width:310px!important;border-radius:24px!important;padding:24px 18px!important}
.vp-customer-main{gap:18px!important}
.vp-customer-topbar{min-height:70px!important;border-radius:20px!important;padding:0 22px!important}
.vp-hero{grid-template-columns:100px minmax(0,1fr) 260px!important;min-height:160px!important;border-radius:22px!important;padding:26px 30px!important}
.vp-hero h1{font-size:clamp(32px,3.3vw,48px)!important}
.vp-hero-art{width:86px!important;height:86px!important;font-size:42px!important}
.vp-kpi-row article{min-height:104px!important;padding:20px 74px 20px 16px!important}
.vp-kpi-row strong{font-size:clamp(18px,1.5vw,24px)!important;line-height:1.25!important}.vp-kpi-row i{width:48px!important;height:48px!important}
.vp-countdown-card{grid-template-columns:92px minmax(0,1fr) minmax(260px,380px)!important;padding:22px 26px!important;border-radius:22px!important}
.vp-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;align-items:stretch!important}
.vp-start-card,.vp-reports-card,.vp-demo-card{min-height:455px!important;padding:24px!important;display:flex!important;flex-direction:column!important}
.vp-card-head{min-height:66px!important;margin-bottom:14px!important;align-items:flex-start!important}
.vp-card-head h2{font-size:clamp(24px,2vw,32px)!important;line-height:1.22!important;letter-spacing:-.02em!important}
.vp-demo-card .vp-demo-body{display:flex!important;flex-direction:column!important;gap:14px!important;flex:1!important}.vp-demo-card .vp-demo-copy{flex:1!important;display:flex!important;flex-direction:column!important}.vp-demo-card .vp-demo-copy form{margin-top:auto!important}
.vp-demo-card .vp-erp-visual,.vp-start-card .vp-payment-visual,.vp-reports-card .vp-report-visual{height:175px!important;min-height:175px!important;margin:4px 0 12px!important;overflow:hidden!important;background:linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%)!important}
.vp-demo-card .vp-erp-screen{top:20px!important;right:50%!important;width:232px!important;height:120px!important;transform:translateX(50%)!important}.vp-demo-card .vp-erp-card.small{right:calc(50% - 118px)!important;bottom:16px!important}.vp-demo-card .vp-erp-chart{left:calc(50% - 118px)!important;bottom:16px!important}
.vp-start-card .vp-payment-visual span{right:50%!important;top:20px!important;transform:translateX(50%) rotate(-9deg)!important}.vp-start-card .vp-payment-visual i{right:calc(50% - 70px)!important;top:78px!important}
.vp-reports-card .vp-report-visual i{right:calc(50% - 40px)!important;transform:none!important}.vp-reports-card .vp-report-visual b{left:calc(50% - 110px)!important}.vp-report-visual:after{right:calc(50% + 22px)!important}
.vp-check-list{margin:10px 0 14px!important}.vp-check-list li{line-height:1.75!important;color:#405169!important}.vp-btn{min-height:50px!important;margin-top:auto!important}
.vp-side-help a.vp-support-link{background:linear-gradient(90deg,#128c7e,#25d366)!important;color:#fff!important;box-shadow:0 14px 30px rgba(37,211,102,.18)!important}
.vp-side-help a.vp-support-link:before{content:'💬';margin-inline-end:6px}
@media(max-width:1280px){.vp-action-grid{grid-template-columns:1fr!important}.vp-start-card,.vp-reports-card,.vp-demo-card{min-height:auto!important}.vp-demo-card .vp-erp-visual,.vp-start-card .vp-payment-visual,.vp-reports-card .vp-report-visual{height:170px!important}}
@media(max-width:1160px){.vp-customer-app{grid-template-columns:1fr!important}.vp-customer-sidebar{width:100%!important;max-width:100%!important}.vp-hero,.vp-countdown-card{grid-template-columns:1fr!important}.vp-hero-status{max-width:360px}}



/* 2026-06-12 final responsive/customer portal fixes */
.vp-customer-app,.vp-customer-app *{box-sizing:border-box}.vp-customer-app{overflow-x:hidden;align-items:start}.vp-customer-main{min-width:0;max-width:100%;overflow:visible}.vp-customer-sidebar{min-width:0;overflow:visible}.vp-side-nav a,.vp-side-top strong,.vp-side-help p,.vp-card,.vp-kpi-row strong,.vp-hero h1,.vp-hero p{overflow-wrap:anywhere;word-break:normal}.vp-side-logout{margin-top:14px}.vp-side-logout button{width:100%;height:46px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06);color:#eaf3ff;font-weight:900;cursor:pointer}.vp-side-logout button:hover{background:rgba(255,255,255,.12)}
.vp-kpi-row article{display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:20px!important;min-width:0!important}.vp-kpi-row article i{position:static!important;transform:none!important;grid-column:1;grid-row:1 / span 2;width:52px;height:52px}.vp-kpi-row article span,.vp-kpi-row article strong{grid-column:2;min-width:0}.vp-kpi-row article span{font-size:clamp(13px,1vw,16px);line-height:1.5}.vp-kpi-row article strong{font-size:clamp(18px,1.45vw,26px)!important;line-height:1.35;white-space:normal!important}.vp-kpi-row{min-width:0!important}
.vp-hero{grid-template-columns:110px minmax(0,1fr) minmax(230px,300px)!important}.vp-hero h1{font-size:clamp(32px,3.2vw,56px)!important;line-height:1.18!important}.vp-hero p{font-size:clamp(14px,1.1vw,17px);line-height:1.75}.vp-hero-status strong{font-size:clamp(26px,2.5vw,38px)!important;line-height:1.25}.vp-hero-art{width:clamp(78px,7vw,98px);height:clamp(78px,7vw,98px);font-size:clamp(34px,4vw,48px)}
.vp-countdown-card{grid-template-columns:86px minmax(0,1fr) minmax(240px,390px)!important;min-width:0;overflow:hidden}.vp-countdown-card .timer{font-size:clamp(20px,2.1vw,34px)!important;line-height:1.4;white-space:normal;overflow-wrap:anywhere}.vp-countdown-icon{font-size:clamp(44px,5vw,60px)}
.vp-card{min-width:0!important}.vp-action-grid,.vp-subscriber-grid,.vp-upgrade-grid,.vp-current-layout,.vp-renewal-layout,.vp-renewal-main,.vp-reports-strip{min-width:0!important}.vp-demo-body,.vp-card-head{min-width:0}.vp-card-head h2{font-size:clamp(22px,2vw,30px)!important;line-height:1.3}.vp-price-grid strong,.vp-mini-grid strong{font-size:clamp(15px,1.25vw,18px)!important;overflow-wrap:anywhere}.vp-selected-total{font-size:clamp(24px,2.3vw,34px)!important}
.vp-bell-wrap{position:relative}.vp-bell-menu{position:fixed!important;top:96px!important;left:18px!important;right:auto!important;width:min(420px,calc(100vw - 36px))!important;max-height:calc(100vh - 120px)!important;overflow:auto!important;z-index:2147483647!important}.vp-bell-wrap:hover .vp-bell-menu,.vp-bell-wrap:focus-within .vp-bell-menu{display:grid!important;gap:10px!important}
@media(max-width:1500px){.vp-customer-app{grid-template-columns:minmax(0,1fr) 300px!important;gap:14px}.vp-action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.vp-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}.vp-kpi-row article:nth-child(2n){border-inline-start:0}.vp-countdown-card{grid-template-columns:76px minmax(0,1fr)!important}.vp-countdown-card .timer{grid-column:1/-1;text-align:center;background:#f0f5ff;border:1px solid #d7e4f3;border-radius:16px;padding:12px}}
@media(max-width:1160px){.vp-customer-app{grid-template-columns:1fr!important}.vp-customer-sidebar{position:relative!important;height:auto!important;top:0!important}.vp-side-help{margin-top:18px}.vp-side-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.vp-hero,.vp-countdown-card,.vp-renewal-layout,.vp-renewal-main,.vp-current-layout{grid-template-columns:1fr!important}.vp-hero{text-align:center}.vp-hero-art{margin:auto}.vp-hero-status{max-width:420px;margin:auto;width:100%}.vp-action-grid,.vp-subscriber-grid,.vp-upgrade-grid,.vp-reports-strip{grid-template-columns:1fr!important}.vp-bell-menu{top:82px!important}}
@media(max-width:720px){.vp-customer-app{padding:10px!important}.vp-customer-topbar{padding:10px 12px;min-height:66px}.vp-top-user strong{font-size:14px}.vp-side-nav{grid-template-columns:1fr}.vp-kpi-row{grid-template-columns:1fr}.vp-kpi-row article{border-inline-start:0!important;border-bottom:1px solid #d7e4f3}.vp-kpi-row article:last-child{border-bottom:0}.vp-form,.vp-price-grid,.vp-mini-grid{grid-template-columns:1fr!important}.vp-page-head h1{font-size:28px!important}.vp-hero{padding:22px!important}.vp-hero h1{font-size:30px!important}.vp-bell-menu{left:10px!important;width:calc(100vw - 20px)!important}}

/* 2026-06-12 renewal + upgrade selector */
.vp-renewal-choice-form{display:grid;gap:18px;margin:0;padding:0;border:0}.renewal-head-clean{margin-bottom:14px!important}.vp-renewal-plan-grid{display:grid;gap:12px;margin:14px 0 18px}.vp-renewal-plan-option{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;border:2px solid #d7e4f3;background:linear-gradient(180deg,#f8fbff,#eef5ff);border-radius:18px;padding:14px 16px;cursor:pointer;transition:.2s ease;min-width:0}.vp-renewal-plan-option input{position:absolute;opacity:0;pointer-events:none}.vp-renewal-plan-option:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(47,111,207,.10)}.vp-renewal-plan-option.is-selected{border-color:#2f6fcf;background:linear-gradient(180deg,#eef5ff,#e8f1ff);box-shadow:0 18px 42px rgba(47,111,207,.16)}.vp-renewal-plan-copy{display:grid;gap:3px;min-width:0}.vp-renewal-plan-copy strong{font-size:18px;font-weight:900;color:#071a33;white-space:normal}.vp-renewal-plan-copy small{font-size:12px;font-weight:800;color:#64748b;line-height:1.6}.vp-renewal-plan-option>b{font-size:16px;color:#1d4ed8;font-weight:900;white-space:nowrap}.vp-renewal-card-single .vp-renewal-total{background:linear-gradient(90deg,#071a33,#0e3a78);border-radius:18px;padding:18px 20px;border-bottom:0;color:#fff}.vp-renewal-card-single .vp-renewal-total span,.vp-renewal-card-single .vp-renewal-total strong{color:#fff}.vp-renewal-card-single .vp-mini-badge.blue{color:#1d4ed8;background:#eaf2ff;border:1px solid #bfdbfe}@media(max-width:760px){.vp-renewal-plan-option{grid-template-columns:46px minmax(0,1fr);}.vp-renewal-plan-option>b{grid-column:1/-1;justify-self:start}.vp-renewal-main{gap:18px}}

/* 2026-06-12 customer sidebar + CTA + grace access polish */
.vp-customer-app .vp-customer-sidebar{
    height:auto!important;
    min-height:calc(100vh - 32px)!important;
    overflow:visible!important;
    padding-bottom:28px!important;
    background:radial-gradient(circle at 30% 0%,rgba(74,144,255,.18),transparent 24%),linear-gradient(180deg,#061b39 0%,#06162f 62%,#041226 100%)!important;
}
.vp-customer-app .vp-side-help{
    margin-top:auto!important;
    overflow:visible!important;
    padding-bottom:18px!important;
}
.vp-customer-app .vp-side-help a.vp-support-link{
    width:100%!important;
    min-height:50px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    margin-top:10px!important;
}
.vp-customer-app .vp-btn,
.vp-customer-app button.vp-btn,
.vp-customer-app a.vp-btn{
    width:100%!important;
    min-height:50px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    margin-inline-start:0!important;
}
.vp-customer-app .vp-demo-card form,
.vp-customer-app .vp-demo-card form .vp-btn{
    width:100%!important;
}
.vp-customer-app .vp-demo-access-kept{
    border:1px solid #cfe1ff!important;
    border-radius:16px!important;
    background:#eef5ff!important;
    padding:12px 14px!important;
    margin:10px 0!important;
}
.vp-customer-app .vp-demo-access-kept p{
    margin:0!important;
    line-height:1.75!important;
    overflow-wrap:anywhere!important;
}
@media(max-width:1160px){
    .vp-customer-app .vp-customer-sidebar{
        min-height:auto!important;
        padding-bottom:24px!important;
    }
}

/* No-SVG build: neutral icon placeholder */
.vp-safe-icon{display:inline-block;width:1.1em;height:1.1em;border-radius:999px;background:currentColor;opacity:.28;vertical-align:-.15em}

/* Global modal interaction state. */
body.modal-open { overflow: hidden; }

/* Upgrade request status: hide package choices while one request is active and
   show a clear, auditable payment/activation timeline instead. */
.vp-upgrade-status-card{display:grid;gap:22px;margin-top:18px}
.vp-upgrade-route{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;padding:18px;border:1px solid #d8e5f5;border-radius:22px;background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%)}
.vp-upgrade-route>div{display:grid;gap:7px;text-align:center;padding:14px;border-radius:18px;background:#fff;border:1px solid #e2ebf6}
.vp-upgrade-route span,.vp-upgrade-status-grid span{font-size:13px;font-weight:800;color:#64748b}
.vp-upgrade-route strong{font-size:21px;color:#0a2144}
.vp-upgrade-route>b{font-size:30px;color:#2f6edb;line-height:1}
.vp-upgrade-status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.vp-upgrade-status-grid>div{min-height:96px}
.vp-upgrade-status-grid .timer{font-size:15px;line-height:1.75;color:#155fc4}
.vp-upgrade-payment-action{margin-top:2px}
@media(max-width:1100px){.vp-upgrade-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.vp-upgrade-route{grid-template-columns:1fr}.vp-upgrade-route>b{transform:rotate(-90deg);text-align:center}.vp-upgrade-status-grid{grid-template-columns:1fr}}