/* =========================================================
   Cashsim Modern - Ana Vodafone Inspired Design System
   Clean • White • Mobile-first • RTL/LTR
   ========================================================= */

:root {
  --red:        #e60000;
  --red-dark:   #b80000;
  --red-light:  #fff0f0;
  --text:       #1a1a1a;
  --text-2:     #4a4a4a;
  --muted:      #767676;
  --line:       #ececec;
  --line-2:     #f4f4f6;
  --bg:         #f7f7f9;
  --card:       #ffffff;
  --green:      #00b87a;
  --blue:       #0d6efd;
  --yellow:     #f5a623;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.04);
  --shadow:     0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.08);
  --radius:     16px;
  --radius-lg:  20px;
  --radius-pill: 999px;
  --header-h:   64px;
  --topbar-h:   42px;
  --tabbar-h:   64px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; background: #fff; }
body {
  margin: 0;
  font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
body.rtl { direction: rtl; }
body.ltr { direction: ltr; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

.container { width: min(1180px, 92%); margin: 0 auto; }
.narrow    { width: min(720px, 92%); margin: 0 auto; }

/* Kill the legacy animated background */
.animated-bg { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--line-2); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--red-dark); }

/* ============== Page Loader ============== */
.page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #fff;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 14px;
  transition: opacity .4s ease, visibility .4s ease;
}
.page-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo-wrap {
  width: 84px; height: 84px; border-radius: 22px;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(230,0,0,.18);
  border: 1px solid #ffe0e0;
  animation: loaderPulse 1.1s ease-in-out infinite alternate;
}
.loader-logo-wrap img { width: 60px; height: 60px; object-fit: contain; border-radius: 14px; }
.page-loader b { font-size: 14px; color: var(--muted); font-weight: 700; }
@keyframes loaderPulse { to { transform: translateY(-6px) scale(1.04); } }

/* ============== Top Contact Bar ============== */
.top-bar, .old-top-bar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  height: var(--topbar-h);
  padding: 0 16px;
  display: flex; align-items: center; justify-content: center;
}
.social, .old-social {
  display: flex; align-items: center; gap: 14px;
}
.social a, .old-social a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--line-2);
  border-radius: 50%;
  font-size: 14px;
  transition: all .25s ease;
}
.old-social .wa    { color: #25D366; }
.old-social .wa:hover    { background: #25D366; color: #fff; transform: translateY(-2px); }
.old-social .phone { color: var(--red); }
.old-social .phone:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.old-social .tg    { color: #0088cc; }
.old-social .tg:hover    { background: #0088cc; color: #fff; transform: translateY(-2px); }
.old-social .fb    { color: #1877f2; }
.old-social .fb:hover    { background: #1877f2; color: #fff; transform: translateY(-2px); }

/* ============== Main Header ============== */
.nav, .public-nav, .classic-public-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  height: var(--header-h);
  gap: 12px;
}
.brand, .classic-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--red);
  font-weight: 900;
  flex-shrink: 0;
}
.brand img, .classic-brand img, .brand .logo, .classic-brand .logo {
  width: 40px; height: 40px;
  object-fit: contain;
  border-radius: 10px;
}
.brand h2, .classic-brand h2, .brand span, .classic-brand span {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: var(--red);
  white-space: nowrap;
}

.classic-nav-buttons {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}

.classic-login-link,
.classic-account-link,
.classic-lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px;
  height: 40px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 14px;
  transition: all .25s ease;
  white-space: nowrap;
  position: relative;
  border: 2px solid transparent;
}
.classic-login-link {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}
.classic-login-link:hover { background: var(--red); color: #fff; }
.classic-account-link {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.classic-account-link:hover { background: var(--red-dark); border-color: var(--red-dark); }
.classic-account-link em {
  position: absolute;
  top: -7px;
  inset-inline-end: -7px;
  background: #111;
  color: #fff;
  border-radius: var(--radius-pill);
  min-width: 20px; height: 20px;
  display: grid; place-items: center;
  font-size: 11px;
  font-style: normal;
  padding: 0 5px;
  font-weight: 800;
}
.classic-lang-switch {
  background: var(--line-2);
  color: #444;
  font-weight: 900;
  padding: 0 14px;
}
.classic-lang-switch:hover { background: var(--red-light); color: var(--red); }

/* Hamburger menu */
.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 42px; height: 42px;
  border-radius: 10px;
  color: var(--red);
  font-size: 22px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-toggle:hover { background: var(--red-light); }

/* ============== Mobile Drawer ============== */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; bottom: 0;
  inset-inline-end: -320px;
  width: min(300px, 85vw);
  background: #fff;
  z-index: 100;
  transition: inset-inline-end .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: 0 0 40px rgba(0,0,0,.15);
}
.drawer.open { inset-inline-end: 0; }
.drawer-head {
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.drawer-head h3 { margin: 0; color: var(--red); font-size: 20px; font-weight: 900; }
.drawer-close {
  background: var(--line-2); border: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  display: grid; place-items: center;
}
.drawer-close:hover { background: var(--red-light); color: var(--red); }
.drawer-links {
  flex: 1; overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.drawer-links a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  transition: all .2s;
}
.drawer-links a i {
  width: 22px; text-align: center;
  color: var(--red);
  font-size: 18px;
}
.drawer-links a:hover,
.drawer-links a.active {
  background: var(--red-light);
  color: var(--red);
}
.drawer-links a em {
  margin-inline-start: auto;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.drawer-foot {
  padding: 14px;
  border-top: 1px solid var(--line);
  display: flex; gap: 8px;
}
.drawer-foot .btn { flex: 1; min-height: 42px; padding: 8px 12px; font-size: 14px; }

/* ============== Bottom Mobile Tabbar ============== */
.taskbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(0,0,0,.05);
  height: var(--tabbar-h);
  padding: 4px 0 6px;
}
.taskbar-container {
  display: flex; align-items: center; justify-content: space-around;
  max-width: 600px; margin: 0 auto;
  height: 100%;
}
.taskbar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 4px 6px;
  color: var(--muted);
  font-weight: 700;
  flex: 1;
  transition: color .2s;
  position: relative;
}
.taskbar-item i { font-size: 19px; line-height: 1; }
.taskbar-item span { font-size: 11px; line-height: 1; }
.taskbar-item.active { color: var(--red); }
.taskbar-item.active::before {
  content: '';
  position: absolute;
  top: -4px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 3px;
  background: var(--red);
  border-radius: 0 0 4px 4px;
}

/* ============== WhatsApp Float ============== */
.whatsapp-float {
  position: fixed;
  inset-inline-end: 16px;
  bottom: 16px;
  z-index: 80;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid; place-items: center;
  font-size: 26px;
  box-shadow: 0 8px 24px rgba(37,211,102,.4);
  transition: transform .2s;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }

/* ============== Home Hero Slider ============== */
.home-old-hero {
  position: relative;
  height: min(560px, 60vh);
  min-height: 380px;
  overflow: hidden;
  background: #1a1a1a;
}
.home-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
  background-size: cover; background-position: center;
}
.home-slide.active { opacity: 1; visibility: visible; z-index: 2; }
.slide-vodafone {
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.7)),
    url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1600&h=900&fit=crop');
}
.slide-we {
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.7)),
    url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=1600&h=900&fit=crop');
}
.slide-etisalat {
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.7)),
    url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1600&h=900&fit=crop');
}
.slide-wallet {
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.7)),
    url('https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=1600&h=900&fit=crop');
}
.home-hero-content {
  position: absolute;
  top: 50%;
  inset-inline-start: 8%;
  transform: translateY(-50%);
  max-width: 600px;
  color: #fff;
  animation: heroIn .7s ease;
  z-index: 5;
}
@keyframes heroIn {
  from { opacity: 0; transform: translate(-30px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}
.home-hero-content h1 {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 16px;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
.home-hero-content h1 i {
  font-size: .8em;
  margin-inline-start: 8px;
  opacity: .9;
}
.home-hero-content p {
  font-size: clamp(15px, 1.6vw, 18px);
  margin: 0 0 24px;
  line-height: 1.8;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  opacity: .95;
}
.hero-red-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red);
  color: #fff;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(230,0,0,.35);
  transition: all .25s;
}
.hero-red-btn:hover {
  background: var(--red-dark);
  transform: translateY(-2px);
  color: #fff;
}
.home-dots, .dots.home-dots {
  position: absolute; bottom: 22px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
  z-index: 5;
}
.home-dots .dot, .dots.home-dots .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: all .3s;
  display: block;
  border: 0; padding: 0;
}
.home-dots .dot.active,
.dots.home-dots .dot.active {
  width: 28px;
  border-radius: var(--radius-pill);
  background: var(--red);
}

/* ============== Page hero (inner pages) ============== */
.page-hero {
  padding: 44px 0 24px;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
.page-hero.compact { padding: 28px 0 14px; }
.page-hero h1 {
  font-size: clamp(24px, 4vw, 36px);
  margin: 0 0 8px;
  color: var(--text);
  font-weight: 900;
}
.page-hero p {
  color: var(--muted);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ============== Hero app (book / packages) ============== */
.hero-app {
  padding: 36px 0 20px;
  text-align: center;
}
.hero-inner {
  width: min(800px, 92%);
  margin: 0 auto;
}
.hero-inner h1 {
  font-size: clamp(24px, 3.5vw, 34px);
  margin: 0 0 10px;
  color: var(--text);
  font-weight: 900;
}
.hero-inner p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 16px;
}
.hero-actions {
  display: flex; gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============== Sections ============== */
.section { padding: 32px 0 56px; }
.light-section { background: var(--bg); }
.white-section { background: #fff; }
.section-head {
  display: flex; align-items: end;
  justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.section-head.center-title { justify-content: center; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--red-light);
  color: var(--red);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 13px;
}
.section-title {
  font-size: clamp(22px, 3vw, 30px);
  margin: 8px 0 16px;
  color: var(--text);
  font-weight: 900;
}
.section-title.no-margin { margin: 6px 0 0; }
.section-title span { color: var(--red); }
.mt { margin-top: 18px; }

/* ============== Cards (home features) ============== */
.cards, .home-feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: min(1180px, 92%);
  margin: 32px auto;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  transition: all .3s;
  box-shadow: var(--shadow-sm);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--red);
  box-shadow: var(--shadow-lg);
}
.card .icon, .icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  background: var(--red-light);
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 26px;
  color: var(--red);
}
.card h2 {
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--text);
  font-weight: 900;
}
.card p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}
.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--red);
  color: var(--red);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 14px;
  transition: all .2s;
}
.card-link:hover { background: var(--red); color: #fff; }

/* ============== Grids & service/package cards ============== */
.cards-grid, .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.grid.two {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.package-card, .service-card,
.glass-card, .form-card,
.panel-like, .review-card,
.empty-state {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.package-card, .service-card { transition: all .25s; }
.package-card:hover, .service-card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.service-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--red-light);
  color: var(--red);
  display: grid; place-items: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.package-card h3, .service-card h3 {
  margin: 8px 0;
  font-size: 18px;
  color: var(--text);
  font-weight: 900;
}
.package-card p, .service-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.price {
  font-size: 26px;
  font-weight: 900;
  color: var(--red);
  margin: 8px 0;
}
.price small {
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
}
.muted { color: var(--muted); }

/* ============== Badges ============== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-weight: 800;
  font-size: 12px;
}
.badge-info    { background: #e7f1ff; color: #0d6efd; }
.badge-success { background: #e6f8f0; color: var(--green); }
.badge-warning { background: #fff4e0; color: #d97706; }
.badge-danger  { background: var(--red-light); color: var(--red); }
.badge-muted   { background: #f0f0f2; color: #555; }

/* ============== Forms ============== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.field.full { grid-column: 1 / -1; }
.field.end { justify-content: flex-end; }
.field label {
  font-weight: 800;
  color: var(--text);
  font-size: 14px;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  outline: 0;
  transition: all .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(230,0,0,.1);
}
textarea { min-height: 100px; resize: vertical; }
input[type="file"] { padding: 8px; cursor: pointer; }

/* ============== Buttons ============== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: all .2s;
  min-height: 44px;
  line-height: 1;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 18px rgba(230,0,0,.25);
}
.btn-primary:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  color: #fff;
}
.btn-outline {
  background: #fff;
  color: var(--red);
  border: 2px solid var(--red);
}
.btn-outline:hover { background: var(--red); color: #fff; }
.btn-soft {
  background: var(--line-2);
  color: var(--text);
}
.btn-soft:hover { background: var(--text); color: #fff; }
.btn-mini { padding: 6px 14px; font-size: 13px; min-height: 32px; }

.actions {
  display: flex; gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.actions.center  { justify-content: center; }
.actions.between { justify-content: space-between; }
.actions.wrap    { flex-wrap: wrap; }

/* ============== Wallet ============== */
.wallet-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.wallet-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.wallet-card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 0;
  width: 4px; height: 100%;
  background: var(--line);
}
.wallet-card.available::before { background: var(--green); }
.wallet-card.pending::before   { background: var(--blue); }
.wallet-card.points::before    { background: var(--yellow); }
.wallet-card span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.wallet-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
}
.wallet-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.wallet-card.pending strong,
.pending-money, .frozen-amount {
  color: var(--blue);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--blue);
}
.wallet-pill {
  display: inline-flex; align-items: center;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--line-2);
  font-weight: 800;
  font-size: 14px;
}
.wallet-mini {
  display: flex; gap: 14px; flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* ============== Tables ============== */
.table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
th, td {
  padding: 12px 14px;
  text-align: start;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
th {
  background: var(--bg);
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
}
td { color: var(--text-2); }
tr:last-child td { border-bottom: 0; }

/* ============== Boxes ============== */
.safe-box, .note-box, .method-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.7;
}
.safe-box {
  background: #e6f8f0;
  border-color: #b8e6cc;
  color: #0a6b3f;
}
.warning-box {
  background: #fff8e6;
  border: 1px solid #ffd97f;
  color: #7a5500;
  border-radius: 14px;
  padding: 14px 16px;
}
.danger-box {
  background: var(--red-light);
  border: 1px solid #f0b0b0;
  color: var(--red-dark);
  border-radius: 14px;
  padding: 14px 16px;
}
.success-box {
  background: #e6f8f0;
  border: 1px solid #b8e6cc;
  color: #0a6b3f;
  border-radius: 14px;
  padding: 14px 16px;
}
.success-text { color: var(--green); font-weight: 800; }
.method-box b, .method-box span { display: block; }
.method-box b { color: var(--text); font-size: 13px; }
.method-box span {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  margin: 4px 0;
}
.method-box p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* ============== Details & timeline ============== */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.detail {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}
.detail b {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.detail span {
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
}
.timeline { display: grid; gap: 10px; }
.time-item {
  background: var(--bg);
  border-inline-start: 3px solid var(--red);
  border-radius: 12px;
  padding: 12px 14px;
}
.time-item b { color: var(--text); display: block; margin-bottom: 4px; }
.time-item small { color: var(--muted); display: block; font-size: 12px; }
.time-item p { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }

/* ============== Notifications ============== */
.notifications-list {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.notification-card {
  display: flex; gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  transition: all .25s;
}
.notification-card.unread {
  border-color: rgba(13,110,253,.25);
  box-shadow: 0 4px 16px rgba(13,110,253,.06);
}
.notification-card.read { opacity: .8; }
.notification-card:hover { transform: translateY(-2px); }
.notif-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--red-light);
  color: var(--red);
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 18px;
}
.notif-body { flex: 1; min-width: 0; }
.notif-body h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}
.notif-body p {
  margin: 6px 0 8px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}
.notif-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 12px;
}
.notif-meta span, .notif-meta a {
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  color: var(--text-2);
}
.notif-meta a:hover { background: var(--red-light); color: var(--red); }
.mini-between { gap: 10px; }

.mini-notifications {
  display: flex; flex-direction: column;
  gap: 8px;
}
.mini-notification {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.mini-notification.unread {
  background: #fff;
  border-color: rgba(13,110,253,.25);
}
.mini-notification b {
  display: block;
  color: var(--text);
  font-size: 14px;
}
.mini-notification span {
  font-size: 12px;
  color: var(--muted);
}
.mini-notification p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-2);
}
.notif-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
}
.notif-link span {
  min-width: 18px; height: 18px;
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.empty-state i { font-size: 36px; color: var(--red); margin-bottom: 10px; }

/* ============== Split title (track page) ============== */
.split-title {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.split-title h2 { margin: 0; }

/* ============== Reviews & FAQ ============== */
.stars {
  color: #f5a623;
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-size: 16px;
}
.review-card p {
  color: var(--text-2);
  line-height: 1.8;
  margin: 0 0 12px;
  font-size: 15px;
}
.reviewer {
  display: flex; flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.reviewer span { font-weight: 900; color: var(--text); }
.reviewer small { color: var(--muted); font-size: 12px; }

.faq-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 900;
  color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--red);
  font-size: 22px;
  font-weight: 700;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--muted);
  line-height: 1.8;
}

/* ============== CTA ============== */
.final-light-cta {
  padding: 56px 0;
  background: #fff;
  text-align: center;
  border-top: 1px solid var(--line);
}
.final-light-cta h2 {
  font-size: clamp(24px, 3.5vw, 32px);
  margin: 0 0 8px;
  color: var(--text);
  font-weight: 900;
}
.final-light-cta p {
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 20px;
  font-size: 16px;
}

/* ============== Pills ============== */
.small-list {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 10px 0;
}
.pill {
  display: inline-flex; align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 12px;
}

/* ============== Code box & success mark ============== */
.code-box {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
  background: var(--bg);
  border: 1px dashed var(--line);
  color: var(--text);
  padding: 18px;
  border-radius: 14px;
  margin: 14px 0;
  text-align: center;
}
.success-mark {
  font-size: 56px;
  color: var(--green);
  margin: 0 auto 8px;
}
.center-card { text-align: center; }

/* ============== Toast (auto-dismiss) ============== */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  padding: 12px 36px 12px 16px;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  font-weight: 800;
  font-size: 14px;
  display: flex; align-items: center; gap: 10px;
  max-width: min(420px, 92%);
  animation: toastIn .35s ease;
}
.rtl .toast { padding: 12px 16px 12px 36px; }
.toast.success { background: #e6f8f0; color: #0a6b3f; border: 1px solid #b8e6cc; }
.toast.error   { background: var(--red-light); color: var(--red-dark); border: 1px solid #f0b0b0; }
.toast.toast-leaving { animation: toastOut .35s ease forwards; }
.toast .toast-close {
  position: absolute;
  inset-inline-end: 8px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  padding: 0 6px;
  opacity: .65;
  line-height: 1;
}
.toast .toast-close:hover { opacity: 1; }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translate(-50%, -20px); }
}

/* ============== Footer ============== */
.app-footer, .classic-footer {
  background: #fff;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
  padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
}
.footer-links {
  display: flex; gap: 16px; flex-wrap: wrap;
  justify-content: center;
}
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--red); }
.made-with {
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.made-with:hover { color: var(--red); }

/* ============== Auth & Legal pages ============== */
.auth-section .form-card {
  max-width: 480px;
  margin: 0 auto;
}
.legal-page { line-height: 1.9; }
.legal-page h2 {
  font-size: 20px;
  margin-top: 22px;
  color: var(--text);
  font-weight: 900;
}
.legal-page p { color: var(--text-2); }

/* Reveal placeholder (no animation by default, keeps backward compat) */
.reveal { opacity: 1; }

/* ============== MOBILE (<= 768px) ============== */
@media (max-width: 768px) {
  :root {
    --header-h: 58px;
    --topbar-h: 38px;
  }

  /* Top bar smaller */
  .top-bar, .old-top-bar { padding: 0 12px; }
  .social a, .old-social a { width: 28px; height: 28px; font-size: 13px; }
  .social, .old-social { gap: 10px; }

  /* Header: hide auth buttons, show hamburger */
  .nav, .public-nav, .classic-public-nav { padding: 0 12px; }
  .brand h2, .classic-brand h2 { font-size: 17px; }
  .brand img, .classic-brand img { width: 36px; height: 36px; }
  .classic-nav-buttons { display: none; }
  .menu-toggle { display: inline-flex; }

  /* Show bottom tabbar */
  .taskbar { display: block; }
  body { padding-bottom: var(--tabbar-h); }

  /* Move WhatsApp button up so tabbar doesn't cover it */
  .whatsapp-float {
    bottom: calc(var(--tabbar-h) + 12px);
    width: 48px; height: 48px;
    font-size: 23px;
  }

  /* Smaller home hero on mobile */
  .home-old-hero { height: 420px; min-height: 380px; }
  .home-hero-content {
    inset-inline-start: 6%;
    inset-inline-end: 6%;
    max-width: none;
    text-align: center;
  }

  /* Stack form grids */
  .form-grid { grid-template-columns: 1fr; }
  .grid.two { grid-template-columns: 1fr; }

  /* Section heads stack */
  .section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .split-title { justify-content: center; text-align: center; }

  /* Toast position adjusted */
  .toast { top: 64px; font-size: 13px; }
}

@media (max-width: 480px) {
  .section { padding: 24px 0 40px; }
  .container, .narrow { width: 94%; }
  .home-hero-content h1 { font-size: 26px; }
  .home-hero-content p { font-size: 14px; }
  .hero-red-btn { padding: 12px 24px; font-size: 15px; }
  .package-card, .service-card,
  .glass-card, .form-card, .panel-like { padding: 18px; }
  .card { padding: 24px 18px; }
  .card .icon, .icon { width: 56px; height: 56px; font-size: 22px; }
  .wallet-card { padding: 18px; }
  .wallet-card strong { font-size: 22px; }
  .price { font-size: 22px; }
  .section-title { font-size: 22px; }
  .home-old-hero { height: 380px; min-height: 360px; }

  /* On smallest screens, buttons can be full width inside actions.center */
  .actions.center .btn { flex: 1 1 calc(50% - 5px); min-width: 130px; }
  .drawer-foot .btn { font-size: 13px; padding: 6px 10px; min-height: 38px; }
}

/* ============== PRINT ============== */
@media print {
  .nav, .top-bar, .taskbar, .whatsapp-float,
  .app-footer, .drawer, .drawer-overlay,
  .toast, .menu-toggle, .page-loader {
    display: none !important;
  }
  body { background: #fff; padding: 0; }
}

/* =========================================================
   FINAL MERGE FRONT FIXES - use original frontend as base
   ========================================================= */
a, a:link, a:visited, a:hover, a:active, .btn, .taskbar-item { text-decoration: none !important; }
.whatsapp-float { display: none !important; }
.desktop-service-links{display:flex;align-items:center;gap:12px;margin-inline:auto;min-width:0;overflow:hidden;white-space:nowrap}
.desktop-service-links a{font-weight:900;font-size:13px;color:#555;padding:8px 10px;border-radius:999px;transition:.2s}
.desktop-service-links a:hover{background:#fff0f0;color:var(--red)}
.nav,.public-nav,.classic-public-nav{min-height:var(--header-h);height:auto;padding-block:10px}.classic-nav-buttons{gap:8px;flex-wrap:nowrap}.classic-login-link,.classic-account-link,.classic-lang-switch{height:40px;padding:0 14px;font-size:13px}.brand h2,.classic-brand h2{font-size:20px;max-width:220px;overflow:hidden;text-overflow:ellipsis}.brand img,.classic-brand img{object-fit:contain;background:#fff}.btn{min-height:42px;border-radius:999px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;border:2px solid transparent;white-space:nowrap}.btn-primary{background:var(--red);border-color:var(--red);color:#fff}.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark)}.btn-outline{background:#fff;border-color:var(--red);color:var(--red)}.btn-outline:hover{background:var(--red);color:#fff}.hero-app{background:linear-gradient(135deg,#a60202,#ff1d2d);color:#fff;padding:70px 0 56px;position:relative;overflow:hidden}.hero-app:before{content:'';position:absolute;inset:auto -70px -90px auto;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12)}.hero-inner{width:min(1050px,92%);margin:auto;text-align:center;position:relative}.hero-inner h1{font-size:clamp(28px,4vw,46px);font-weight:900;margin:0 0 12px}.hero-inner p{max-width:720px;margin:0 auto 22px;color:rgba(255,255,255,.85)}.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.section{padding:56px 0}.section-title{font-weight:900;color:#191919;text-align:center}.section-title span{color:var(--red)}.grid,.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.service-card,.package-card,.glass-card,.form-card,.panel-like,.wallet-card{background:#fff;border:1px solid #eee;border-radius:22px;box-shadow:0 8px 26px rgba(0,0,0,.05);padding:24px;overflow:hidden}.service-card:hover,.package-card:hover{border-color:var(--red);transform:translateY(-4px);transition:.25s}.service-icon,.card .icon,.icon{background:#fff0f0;color:var(--red)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field.full{grid-column:1/-1}.field label{font-weight:900;color:#444;margin-bottom:7px;display:block}.field input,.field select,.field textarea,input,select,textarea{width:100%;border:1px solid #dedede;border-radius:14px;min-height:46px;padding:10px 13px;font-family:inherit;background:#fff;color:#1a1a1a;outline:0}.field textarea,textarea{min-height:110px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(230,0,0,.08)}.actions,.hero-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.actions.center{justify-content:center}.toast{border-radius:16px}.badge{border-radius:999px;padding:6px 10px;font-weight:900;font-size:12px}.badge-info{background:#edf5ff;color:#0d6efd}.badge-success{background:#e8fff4;color:#008856}.badge-warning{background:#fff6e0;color:#9c6500}.badge-danger{background:#fff0f0;color:var(--red)}.badge-muted{background:#f2f2f2;color:#555}.note-box,.safe-box,.wallet-mini,.empty-state{background:#fff7f7;border:1px solid #ffe1e1;border-radius:16px;padding:14px 16px;margin:14px 0;color:#555}.wallet-mini{display:flex;gap:14px;flex-wrap:wrap;align-items:center}.price{color:var(--red);font-weight:900;font-size:26px}.taskbar{background:rgba(255,255,255,.98);border-top:1px solid #eee;box-shadow:0 -6px 22px rgba(0,0,0,.08)}.taskbar-item{color:#777}.taskbar-item.active,.taskbar-item:hover{color:var(--red);background:#fff0f0}.app-footer{padding-bottom:calc(24px + env(safe-area-inset-bottom))}.made-with{color:#888!important;background:transparent!important;border:0!important;padding:0!important;border-radius:0!important}.made-with:hover{color:var(--red)!important}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.table{min-width:760px}.drawer-links a{text-decoration:none!important}.drawer-links a em{background:var(--red);color:#fff;border-radius:999px;font-size:11px;padding:1px 6px;margin-inline-start:6px}
@media(max-width:960px){.desktop-service-links{display:none}.classic-nav-buttons{margin-inline-start:auto}}
@media(max-width:768px){.classic-nav-buttons{display:none!important}.menu-toggle{display:inline-flex}.form-grid{grid-template-columns:1fr}.section{padding:38px 0}.hero-app{padding:48px 0 40px}.grid,.cards-grid{grid-template-columns:1fr}.service-card,.package-card,.glass-card,.form-card,.panel-like,.wallet-card{padding:20px;border-radius:18px}.taskbar-container{justify-content:space-between;gap:0}.taskbar-item{min-width:auto;flex:1;padding:7px 4px}.taskbar-item span{font-size:10px}.taskbar-item i{font-size:18px}.brand h2,.classic-brand h2{font-size:17px;max-width:170px}.top-bar,.old-top-bar{height:38px}.toast{left:12px;right:12px;transform:none;max-width:none}.actions .btn,.hero-actions .btn{flex:1 1 auto}}
@media(max-width:420px){.container,.narrow{width:94%}.brand h2,.classic-brand h2{max-width:135px}.brand img,.classic-brand img{width:34px;height:34px}.nav,.public-nav,.classic-public-nav{padding-inline:10px}.menu-toggle{width:38px;height:38px}.section-title{font-size:22px}.btn{width:100%}.drawer-foot{gap:8px}.drawer-foot .btn{width:auto}.wallet-mini{font-size:13px}}

/* =========================================================
   UI FIX PACK - professional client area, no overlaps
   ========================================================= */
a, a:link, a:visited, a:hover, a:active, button, .btn { text-decoration: none !important; }
.whatsapp-float { display: none !important; }

/* Desktop quick menu after login */
.client-menu{
  position: sticky;
  top: var(--header-h);
  z-index: 45;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.035);
}
.client-menu-inner{
  width:min(1180px,92%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  overflow-x:auto;
  padding:10px 0;
  scrollbar-width:none;
}
.client-menu-inner::-webkit-scrollbar{display:none;}
.client-menu a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 15px;
  border-radius:999px;
  background:#fff;
  color:#333;
  border:1px solid #eee;
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  transition:.2s ease;
}
.client-menu a i{color:var(--red);}
.client-menu a:hover,
.client-menu a.active{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
  box-shadow:0 8px 20px rgba(230,0,0,.14);
}
.client-menu a:hover i,
.client-menu a.active i{color:#fff;}
.client-menu a em{
  min-width:18px;height:18px;border-radius:999px;background:#111;color:#fff;
  display:inline-grid;place-items:center;font-size:11px;font-style:normal;padding:0 5px;
}

/* Better header spacing */
.public-nav,.classic-public-nav,.nav{align-items:center;}
.classic-nav-buttons{align-items:center;}
.classic-login-link,.classic-account-link,.classic-lang-switch{height:38px;min-width:auto;}
.desktop-service-links{max-width:520px;}

/* Dashboard redesigned */
.dashboard-page{padding:28px 0 56px;background:var(--bg);}
.dashboard-hero-clean{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:24px;
  margin-bottom:18px;
  box-shadow:var(--shadow-sm);
}
.dashboard-hero-clean h1{margin:8px 0 6px;font-size:clamp(24px,3vw,34px);font-weight:900;color:#111;}
.dashboard-hero-clean p{margin:0;color:var(--muted);line-height:1.8;max-width:650px;}
.dashboard-main-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-width:320px;}
.dashboard-main-actions .btn{min-width:125px;}
.dashboard-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:18px 0;
}
.dash-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px 18px 16px;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
  min-height:108px;
}
.dash-stat:before{content:'';position:absolute;inset-inline-start:0;top:0;width:5px;height:100%;background:#ddd;}
.dash-stat.available:before{background:var(--green);}
.dash-stat.pending:before{background:var(--blue);}
.dash-stat.points:before{background:var(--yellow);}
.dash-stat.orders:before{background:var(--red);}
.dash-stat span{display:block;color:var(--muted);font-size:13px;font-weight:800;margin-bottom:8px;}
.dash-stat strong{display:block;font-size:24px;font-weight:900;color:#111;line-height:1.2;word-break:break-word;}
.dash-stat strong small{font-size:12px;color:#777;font-weight:800;}
.dash-stat.pending strong{color:var(--blue);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--blue);}
.dashboard-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:18px;margin:18px 0;align-items:start;}
.clean-panel{border-radius:22px;box-shadow:var(--shadow-sm);}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.panel-title-row h3{margin:0;font-size:20px;font-weight:900;color:#111;}
.account-mini-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.account-mini-list div{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px;}
.account-mini-list b{display:block;color:var(--muted);font-size:12px;margin-bottom:4px;}
.account-mini-list span{font-weight:900;color:#111;font-size:14px;}
.account-quick-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.account-quick-actions .btn{min-width:140px;}
.account-history-page .grid.two{align-items:start;}
.responsive-table table{min-width:720px;}

/* Old wallet cards stay stable if used elsewhere */
.wallet-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:stretch;}
.actions.center{gap:12px;margin:12px 0 20px;}
.actions.center .btn{flex:0 0 auto;}

@media(max-width:1100px){
  .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dashboard-grid{grid-template-columns:1fr;}
  .dashboard-hero-clean{align-items:flex-start;flex-direction:column;}
  .dashboard-main-actions{width:100%;min-width:0;justify-content:flex-start;}
}
@media(max-width:960px){
  .client-menu{display:none;}
}
@media(max-width:768px){
  .dashboard-page{padding:20px 0 42px;}
  .dashboard-hero-clean{padding:20px;border-radius:20px;}
  .dashboard-main-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;}
  .dashboard-main-actions .btn{width:100%;min-width:0;}
  .dashboard-main-actions .btn:nth-child(3){grid-column:1/-1;}
  .dashboard-stats{grid-template-columns:1fr 1fr;gap:10px;}
  .dash-stat{padding:16px 14px;min-height:98px;border-radius:18px;}
  .dash-stat strong{font-size:20px;}
  .account-mini-list{grid-template-columns:1fr;}
  .panel-title-row{align-items:flex-start;}
}
@media(max-width:480px){
  .dashboard-stats{grid-template-columns:1fr;}
  .dashboard-main-actions{grid-template-columns:1fr;}
  .dashboard-main-actions .btn:nth-child(3){grid-column:auto;}
  .account-quick-actions .btn{width:100%;min-width:0;}
  .actions.center .btn{width:auto;flex:1 1 130px;}
}

/* Company grouped services */
.company-service-sections{display:grid;gap:22px;margin-top:22px;}
.service-company-block{background:#fff;border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:var(--shadow-sm);}
.service-company-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.service-company-head>span{width:58px;height:58px;border-radius:18px;background:var(--red-light);color:var(--red);display:grid;place-items:center;font-size:24px;flex:none;}
.service-company-head h3{margin:0;font-size:25px;font-weight:900;color:#111;}
.service-company-head p{margin:4px 0 0;color:var(--muted);line-height:1.7;}
.service-company-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
@media(max-width:768px){.service-company-block{padding:18px;border-radius:20px}.service-company-head>span{width:48px;height:48px;font-size:20px}.service-company-head h3{font-size:21px}.service-company-grid{grid-template-columns:1fr}}


/* Company logos integration */
.nav-company-link{display:inline-flex;align-items:center;gap:8px}.nav-company-logo{width:22px;height:22px;object-fit:contain}.drawer-company-link{display:flex;align-items:center;gap:10px}.drawer-company-logo{width:22px;height:22px;object-fit:contain;flex:0 0 22px}@media(max-width:960px){.nav-company-logo{width:20px;height:20px}}


/* NetPack safe final visual touches: logos + mobile spacing only */
.nav-company-link{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nav-company-logo{width:24px;height:24px;object-fit:contain;flex:0 0 24px}
.drawer-company-link{display:flex!important;align-items:center!important;gap:10px!important}
.drawer-company-logo{width:24px;height:24px;object-fit:contain;flex:0 0 24px}
.classic-public-nav{align-items:center}
.desktop-service-links{align-items:center}
@media(max-width:1100px){
  .desktop-service-links{gap:10px}
  .desktop-service-links a{padding-inline:8px}
  .nav-company-logo{width:20px;height:20px}
}
@media(max-width:768px){
  .classic-public-nav{min-height:74px;padding-inline:14px}
  .classic-brand h2{font-size:18px;line-height:1.1}
  .classic-brand .logo{width:42px;height:42px;object-fit:contain}
  .classic-nav-buttons{gap:8px}
  .classic-login-link,.classic-account-link{min-height:42px;padding:9px 12px;font-size:13px}
  .classic-lang-switch{width:42px;height:42px;min-width:42px}
  .menu-toggle{width:44px;height:44px;min-width:44px}
}

/* =========================================================
   RESPONSIVE AUDIT PACK - phone/tablet/laptop safety
   Keeps the current front design, prevents overlapping buttons/forms
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden;}
img,video,iframe{max-width:100%;height:auto;}
.container,.narrow{max-width:1180px;}
.form-card,.glass-card,.panel-like,.service-card,.package-card,.wallet-card,.clean-panel{min-width:0;}
.form-grid,.grid,.cards-grid,.dashboard-grid,.dashboard-stats{min-width:0;}
.field,.field>*{min-width:0;}
input,select,textarea,button{max-width:100%;}
.btn{min-height:38px;line-height:1.25;text-align:center;}
.actions,.hero-actions,.account-quick-actions,.dashboard-main-actions{min-width:0;}
.actions.wrap,.account-quick-actions{row-gap:8px;}
.table-wrap,.responsive-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-wrap table,.responsive-table table{white-space:nowrap;}
.receipt-preview img,.receipt-img{max-width:100%;border-radius:14px;object-fit:contain;}
.pin-row,.password-row,.field .input-action-row{display:flex;gap:8px;align-items:stretch;min-width:0;}
.pin-row input,.password-row input,.field .input-action-row input{flex:1 1 auto;min-width:0;}
.pin-row .btn,.password-row .btn,.field .input-action-row .btn{flex:0 0 auto;}
.book-form-card .field>div[style*="display:flex"]{min-width:0;}
.book-form-card .field>div[style*="display:flex"] input{min-width:0;}
.book-form-card .field>div[style*="display:flex"] .btn{flex:0 0 auto;}
.booking-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.booking-tabs::-webkit-scrollbar{display:none;}
.booking-tabs a{white-space:nowrap;}
.client-menu-inner{padding-inline:4px;}
.taskbar{padding-bottom:env(safe-area-inset-bottom);}
.taskbar-container{max-width:100%;}
.toast{word-break:break-word;}

@media(max-width:1024px){
  .desktop-service-links{max-width:430px;overflow-x:auto;scrollbar-width:none;}
  .desktop-service-links::-webkit-scrollbar{display:none;}
  .classic-public-nav{gap:10px;}
}
@media(max-width:768px){
  body{padding-bottom:72px;}
  .top-bar.old-top-bar{display:none;}
  .public-nav,.classic-public-nav,.nav{position:sticky;top:0;z-index:80;min-height:66px;}
  .classic-brand{min-width:0;max-width:55%;}
  .classic-brand h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .drawer{width:min(88vw,360px);max-width:360px;}
  .drawer-links a{min-height:44px;}
  .section{padding-left:0;padding-right:0;}
  .form-card{padding:18px;border-radius:20px;}
  .form-grid,.compact-grid{grid-template-columns:1fr!important;gap:13px;}
  .field.full{grid-column:auto;}
  .wallet-mini{gap:8px;}
  .wallet-mini span{display:block;margin-bottom:4px;}
  .booking-hero{padding:30px 0!important;}
  .booking-wizard{gap:10px!important;}
  .wizard-step{align-items:flex-start;}
  .booking-tabs{flex-wrap:nowrap;justify-content:flex-start;padding-bottom:4px;}
  .booking-tabs a{flex:0 0 auto!important;min-width:92px;}
  .book-form-card .field>div[style*="display:flex"]{display:flex!important;}
  .book-form-card .field>div[style*="display:flex"] .btn{width:auto!important;min-width:76px;padding-inline:12px;}
  .actions .btn,.hero-actions .btn{width:auto;flex:1 1 135px;}
  .actions.wrap .btn,.inline-form .btn{width:auto;flex:0 0 auto;}
  .table-wrap{border-radius:14px;}
}
@media(max-width:480px){
  .container,.narrow{width:94%;}
  .classic-brand{max-width:62%;}
  .classic-brand h2{font-size:16px;max-width:112px;}
  .classic-brand .logo{width:36px;height:36px;}
  .menu-toggle{width:40px;height:40px;min-width:40px;}
  .form-card{padding:15px;}
  .btn{padding:10px 13px;font-size:13px;}
  .book-form-card .field>div[style*="display:flex"]{gap:6px;}
  .book-form-card .field>div[style*="display:flex"] .btn{min-width:68px;font-size:12px;}
  .taskbar-item span{font-size:9.5px;}
  .taskbar-item i{font-size:17px;}
  .toast{left:10px;right:10px;bottom:82px;}
}

/* =========================================================
   FINAL NO-OVERLAP FIX - payment cards + all form controls
   ========================================================= */
.payment-choice-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  margin:16px 0;
  overflow:hidden;
}
.payment-title{
  display:block;
  font-weight:900;
  color:#111;
  margin-bottom:12px;
  font-size:16px;
}
.payment-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
.payment-option-card{
  min-width:0;
  min-height:58px;
  border:1px solid #dedede;
  border-radius:18px;
  padding:12px 14px;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  line-height:1.45;
  font-weight:900;
  color:#222;
  transition:.18s ease;
  overflow:hidden;
}
.payment-option-card:hover{
  border-color:var(--red);
  background:var(--red-light);
}
.payment-option-card input[type="radio"]{
  appearance:auto!important;
  -webkit-appearance:auto!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  flex:0 0 18px!important;
  margin:0!important;
  padding:0!important;
  accent-color:var(--red);
  box-shadow:none!important;
}
.payment-option-card span{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
}
.receipt-pay-box{
  display:none;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
/* keep every radio/checkbox inside forms compact, not stretched by generic input width */
.form-card input[type="radio"],
.form-card input[type="checkbox"],
.panel-like input[type="radio"],
.panel-like input[type="checkbox"]{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  flex:0 0 18px!important;
  padding:0!important;
}
.book-form-card .btn,
.form-card .btn{
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}
.book-form-card .field,
.book-form-card label,
.book-form-card small,
.book-form-card .note-box{
  overflow-wrap:anywhere;
}
.book-form-card select,
.book-form-card input,
.book-form-card textarea{
  min-width:0;
}
@media(max-width:768px){
  .payment-choice-box{padding:14px;border-radius:18px;}
  .payment-options{grid-template-columns:1fr;gap:10px;}
  .payment-option-card{min-height:52px;padding:11px 12px;font-size:14px;}
  .payment-option-card input[type="radio"]{width:17px!important;height:17px!important;min-width:17px!important;flex-basis:17px!important;}
}
@media(max-width:420px){
  .payment-option-card{font-size:13px;border-radius:16px;}
  .payment-title{font-size:15px;}
}

/* =========================================================
   FINAL RESPONSIVE HARDENING v57 - no-overlap across phone/tablet/laptop
   ========================================================= */
:where(.container,.narrow,.section,.form-card,.glass-card,.panel-like,.wallet-card,.service-card,.package-card,.company-block,.package-box,.extra-box,.testimonial-box,.faq-box){min-width:0;}
:where(.form-card,.glass-card,.panel-like,.wallet-card,.service-card,.package-card,.company-block,.package-box,.extra-box,.testimonial-box,.faq-box){overflow:hidden;}
:where(.form-grid,.grid,.cards-grid,.packages-grid,.extra-grid,.testimonials-grid,.faq-grid,.company-grid,.dashboard-grid,.dashboard-stats){min-width:0;}
:where(.field,.field label,.field small,.note-box,.safe-box,.admin-account-note,.wallet-mini,.detail,.badge,.price,.btn){min-width:0;}
:where(input,select,textarea){max-width:100%;min-width:0;}
:where(.btn,.btn-red,.btn-line,.classic-login-link,.classic-account-link,.classic-lang-switch){white-space:normal;line-height:1.25;overflow-wrap:anywhere;text-align:center;}
:where(.btn,.btn-red,.btn-line){display:inline-flex;align-items:center;justify-content:center;gap:8px;vertical-align:middle;}
:where(.actions,.hero-actions,.home-account-actions,.account-quick-actions,.dashboard-main-actions){min-width:0;flex-wrap:wrap;}
:where(.actions,.hero-actions,.home-account-actions,.account-quick-actions,.dashboard-main-actions) > *{min-width:0;}
:where(.table-wrap,.responsive-table){overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
:where(table,.table){width:100%;}
:where(td,th){overflow-wrap:normal;}

/* Payment method cards: compact and aligned, never huge */
.payment-choice-box{max-width:100%;}
.payment-options{grid-template-columns:repeat(2,minmax(210px,320px));justify-content:end;align-items:stretch;max-width:720px;margin-inline-start:auto;margin-inline-end:0;}
body.ltr .payment-options{justify-content:start;margin-inline-start:0;margin-inline-end:auto;}
.payment-option-card{width:100%;max-width:320px;min-height:56px;justify-content:flex-start;}
.payment-option-card input[type="radio"]{display:inline-block!important;}
.payment-option-card span{font-size:14px;line-height:1.45;}
.receipt-pay-box.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

/* Inline input + small button rows */
.book-form-card .field > div[style*="display:flex"],
.input-action-row,.pin-row,.password-row{display:flex!important;align-items:stretch;gap:8px;width:100%;}
.book-form-card .field > div[style*="display:flex"] input,
.input-action-row input,.pin-row input,.password-row input{flex:1 1 auto;min-width:0;}
.book-form-card .field > div[style*="display:flex"] .btn,
.input-action-row .btn,.pin-row .btn,.password-row .btn{flex:0 0 auto;width:auto!important;min-width:72px;}

/* Header and taskbar safety */
.classic-public-nav,.public-nav,.nav{max-width:100%;}
.classic-brand,.brand{min-width:0;}
.classic-brand h2,.brand h2,.classic-brand span,.brand span{overflow:hidden;text-overflow:ellipsis;}
.desktop-service-links{min-width:0;}
.taskbar-container{max-width:100%;overflow:hidden;}
.taskbar-item{min-width:0;}
.taskbar-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;}

@media(max-width:900px){
  .payment-options{grid-template-columns:repeat(2,minmax(190px,1fr));max-width:100%;}
  .payment-option-card{max-width:none;}
  .receipt-pay-box.form-grid{grid-template-columns:1fr!important;}
}
@media(max-width:768px){
  .container,.narrow{width:min(94%,100% - 20px);}
  .payment-options{grid-template-columns:1fr;justify-content:stretch;margin-inline:auto;}
  .payment-option-card{max-width:100%;min-height:50px;}
  .book-form-card .btn[type="submit"]{width:100%;margin-top:8px;}
  .book-form-card > a.btn{width:100%;margin-top:8px;}
  .classic-public-nav,.public-nav,.nav{padding-inline:12px;gap:8px;}
  .drawer{width:min(88vw,340px);}
}
@media(max-width:480px){
  .container,.narrow{width:calc(100% - 20px);}
  .form-card,.glass-card,.panel-like,.wallet-card,.service-card,.package-card{padding:14px!important;border-radius:17px!important;}
  .field label{font-size:13px;}
  input,select,textarea{font-size:14px;min-height:44px;padding:9px 11px;}
  .btn,.btn-red,.btn-line{font-size:12.5px;padding:9px 12px;min-height:40px;}
  .payment-choice-box{padding:12px;border-radius:16px;}
  .payment-option-card{padding:10px 11px;gap:8px;font-size:13px;}
  .payment-option-card span{font-size:13px;}
  .payment-option-card input[type="radio"]{width:16px!important;height:16px!important;min-width:16px!important;flex-basis:16px!important;}
  .book-form-card .field > div[style*="display:flex"] .btn{min-width:64px;padding-inline:10px;}
}

/* =========================================================
   NETPACK FINAL REAL DEVICE FIX v58
   هدفها منع أي قطع أو دخول عناصر في بعض على اللاب/التابلت/الموبايل
   ========================================================= */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}
*{box-sizing:border-box;}

/* Client shortcut menu: no hidden horizontal scroll, wrap cleanly */
.client-menu{
  overflow:visible!important;
  height:auto!important;
}
.client-menu-inner{
  width:min(1420px, calc(100% - 32px))!important;
  max-width:calc(100% - 32px)!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
  overflow:visible!important;
  padding:10px 0 12px!important;
  direction:rtl;
}
.client-menu a{
  flex:0 1 auto!important;
  max-width:190px!important;
  min-width:0!important;
  min-height:40px!important;
  height:auto!important;
  padding:9px 14px!important;
  white-space:normal!important;
  text-align:center!important;
  line-height:1.35!important;
  overflow:visible!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}
.client-menu a i{flex:0 0 auto!important;}
.client-menu a em{flex:0 0 auto!important;}

/* Top header safety on medium laptops */
.classic-public-nav,
.public-nav,
.nav{
  width:100%!important;
  max-width:100%!important;
  overflow:visible!important;
}
.classic-brand{flex:0 1 auto!important;}
.desktop-service-links{
  flex:1 1 auto!important;
  max-width:none!important;
  min-width:0!important;
  justify-content:center!important;
  overflow:visible!important;
  flex-wrap:wrap!important;
  row-gap:5px!important;
}
.desktop-service-links a{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}
.classic-nav-buttons{
  flex:0 0 auto!important;
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  max-width:360px!important;
  overflow:visible!important;
}
.classic-login-link,
.classic-account-link,
.classic-lang-switch{
  flex:0 0 auto!important;
  overflow:visible!important;
}

/* Any horizontal tab groups must wrap instead of being cut */
.booking-tabs,
.company-tabs,
.filter-tabs,
.tabs,
.category-tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:8px!important;
  overflow:visible!important;
  max-width:100%!important;
}
.booking-tabs a,
.company-tabs a,
.filter-tabs a,
.tabs a,
.category-tabs a{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:180px!important;
  white-space:normal!important;
  text-align:center!important;
  line-height:1.25!important;
}

/* Dashboard hero/actions no collisions */
.dashboard-hero-clean,
.dashboard-main-actions,
.account-quick-actions,
.actions,
.hero-actions{
  max-width:100%!important;
  overflow:visible!important;
}
.dashboard-main-actions .btn,
.account-quick-actions .btn,
.actions .btn,
.hero-actions .btn{
  min-width:0!important;
  white-space:normal!important;
  text-align:center!important;
  line-height:1.25!important;
}

/* Cards and text never clip important labels */
.glass-card,.form-card,.panel-like,.wallet-card,.clean-panel,.package-card,.service-card{
  max-width:100%!important;
}
.badge,.price,.wallet-mini,.note-box,.safe-box,.detail,.field label{
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:anywhere!important;
}

@media(max-width:1200px){
  .client-menu-inner{width:calc(100% - 22px)!important;max-width:calc(100% - 22px)!important;gap:8px!important;}
  .client-menu a{font-size:12.5px!important;padding:8px 12px!important;max-width:170px!important;}
  .desktop-service-links{display:none!important;}
  .classic-nav-buttons{max-width:520px!important;margin-inline-start:auto!important;}
}
@media(max-width:960px){
  .client-menu{display:none!important;}
  .classic-nav-buttons{display:flex!important;}
}
@media(max-width:768px){
  .classic-nav-buttons{display:none!important;}
  .menu-toggle{display:inline-flex!important;}
  .booking-tabs,.company-tabs,.filter-tabs,.tabs,.category-tabs{justify-content:flex-start!important;}
  .booking-tabs a,.company-tabs a,.filter-tabs a,.tabs a,.category-tabs a{max-width:none!important;flex:1 1 calc(50% - 8px)!important;}
}
@media(max-width:480px){
  .booking-tabs a,.company-tabs a,.filter-tabs a,.tabs a,.category-tabs a{flex:1 1 100%!important;}
  .drawer{width:92vw!important;}
  .dashboard-main-actions .btn,
  .account-quick-actions .btn,
  .actions .btn,
  .hero-actions .btn{width:100%!important;flex:1 1 100%!important;}
}

/* =========================================================
   NETPACK MOBILE POLISH v59
   إصلاح نهائي لواجهة الموبايل: بدون فراغ جانبي، بدون ضخامة، بدون تداخل
   ========================================================= */
html, body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overscroll-behavior-x:none;
}
body{position:relative;}
body *{max-width:100%;}

/* Drawer: hide completely off-canvas, no side strip/sliver on RTL/LTR */
.drawer{
  inset-inline-end:auto!important;
  left:auto!important;
  right:0!important;
  width:min(320px,86vw)!important;
  transform:translateX(105%)!important;
  transition:transform .28s ease!important;
  will-change:transform;
}
body.rtl .drawer{
  right:auto!important;
  left:0!important;
  transform:translateX(-105%)!important;
}
.drawer.open{transform:translateX(0)!important;}
.drawer-overlay{backdrop-filter:blur(1px);}
.drawer-links a{font-size:14px!important;padding:11px 13px!important;border-radius:12px!important;min-height:42px!important;}
.drawer-links a i{font-size:16px!important;width:20px!important;}
.drawer-lang-switch{
  margin-top:8px!important;
  background:linear-gradient(135deg,#009b63,#00b979)!important;
  color:#fff!important;
  justify-content:center!important;
  border-radius:999px!important;
  box-shadow:0 8px 18px rgba(0,168,107,.16)!important;
}
.drawer-lang-switch i{color:#fff!important;}

/* Smarter language pill - v60: premium green instead of black */
.classic-lang-switch{
  background:linear-gradient(135deg,#009b63,#00b979)!important;
  color:#fff!important;
  border:1px solid #00a86b!important;
  gap:6px!important;
  min-width:72px!important;
  height:38px!important;
  padding:0 13px!important;
  box-shadow:0 8px 18px rgba(0,168,107,.18)!important;
}
.classic-lang-switch i{font-size:13px!important;color:#fff!important;}
.classic-lang-switch span{font-weight:900!important;font-size:12px!important;letter-spacing:.3px!important;}
.classic-lang-switch:hover{background:linear-gradient(135deg,#008856,#00a86b)!important;border-color:#008856!important;color:#fff!important;transform:translateY(-1px);}

/* Mobile header: clean compact top */
@media(max-width:768px){
  :root{--header-h:64px;--tabbar-h:62px;}
  .top-bar,.old-top-bar{display:none!important;}
  .classic-public-nav,.public-nav,.nav{
    min-height:64px!important;
    height:64px!important;
    padding:0 16px!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  .classic-brand,.brand{gap:8px!important;min-width:0!important;}
  .classic-brand .logo,.brand .logo,.classic-brand img,.brand img{
    width:42px!important;height:42px!important;border-radius:10px!important;object-fit:contain!important;
  }
  .classic-brand h2,.brand h2{
    font-size:22px!important;line-height:1!important;max-width:150px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  .menu-toggle{
    width:42px!important;height:42px!important;min-width:42px!important;border-radius:12px!important;font-size:25px!important;background:#fff!important;color:var(--red)!important;
  }
  .drawer{width:min(300px,82vw)!important;}
}

/* Dashboard mobile: smaller, balanced and premium */
@media(max-width:768px){
  .container,.narrow{width:calc(100% - 28px)!important;margin-inline:auto!important;}
  .dashboard-page{padding:16px 0 84px!important;}
  .dashboard-hero-clean{
    padding:20px 18px!important;
    border-radius:22px!important;
    margin:10px 0 14px!important;
    gap:16px!important;
    text-align:center!important;
    align-items:center!important;
  }
  .dashboard-hero-clean > div:first-child{width:100%!important;}
  .dashboard-hero-clean .eyebrow{
    font-size:12.5px!important;
    padding:7px 13px!important;
    border-radius:999px!important;
    display:inline-flex!important;
    margin:0 auto 8px!important;
  }
  .dashboard-hero-clean h1{
    font-size:30px!important;
    line-height:1.25!important;
    margin:8px 0!important;
    letter-spacing:-.4px!important;
    text-align:center!important;
  }
  .dashboard-hero-clean p{
    font-size:15px!important;
    line-height:1.75!important;
    max-width:100%!important;
    margin:0 auto!important;
    text-align:center!important;
  }
  .dashboard-main-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
  }
  .dashboard-main-actions .btn,
  .account-quick-actions .btn,
  .actions .btn,
  .hero-actions .btn{
    width:100%!important;
    min-height:46px!important;
    padding:9px 10px!important;
    border-radius:18px!important;
    font-size:14px!important;
    line-height:1.25!important;
    box-shadow:none!important;
    flex:initial!important;
  }
  .dashboard-main-actions .btn:nth-child(3){grid-column:auto!important;}
  .dashboard-main-actions .btn i{font-size:15px!important;}
  .dashboard-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin:14px 0!important;
  }
  .dash-stat{
    padding:13px 12px!important;
    min-height:86px!important;
    border-radius:17px!important;
  }
  .dash-stat span{font-size:12px!important;margin-bottom:6px!important;line-height:1.35!important;}
  .dash-stat strong{font-size:19px!important;line-height:1.15!important;}
  .dash-stat strong small{font-size:10px!important;}
  .dashboard-grid{gap:12px!important;margin:12px 0!important;}
  .clean-panel,.panel-like{border-radius:18px!important;padding:16px!important;}
  .panel-title-row h3{font-size:18px!important;}
}
@media(max-width:380px){
  .dashboard-hero-clean h1{font-size:27px!important;}
  .dashboard-main-actions{grid-template-columns:1fr!important;}
  .dashboard-stats{grid-template-columns:1fr 1fr!important;}
  .dash-stat strong{font-size:17px!important;}
}

/* Package/provider mobile cards: less massive, no hidden side gap */
@media(max-width:768px){
  .section{padding:28px 0 82px!important;}
  .provider-hero,.packages-landing{padding:28px 0 24px!important;}
  .provider-hero-inner{display:flex!important;align-items:center!important;gap:12px!important;}
  .provider-hero-logo{width:58px!important;height:58px!important;border-radius:16px!important;margin:0!important;padding:8px!important;}
  .provider-hero h1,.packages-landing h1{font-size:28px!important;line-height:1.2!important;margin:0 0 6px!important;}
  .provider-hero p,.packages-landing p{font-size:14px!important;line-height:1.65!important;margin:0!important;}
  .operator-tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin:16px 0!important;
  }
  .operator-tabs a{
    padding:8px 10px!important;
    font-size:13px!important;
    min-height:42px!important;
    justify-content:center!important;
    border-radius:14px!important;
  }
  .operator-tabs img{width:21px!important;height:21px!important;}
  .category-head{margin-bottom:12px!important;}
  .category-head h2{font-size:24px!important;line-height:1.25!important;margin:0 0 4px!important;}
  .provider-grid{grid-template-columns:1fr!important;gap:12px!important;}
  .provider-card{
    min-height:0!important;
    padding:18px 16px!important;
    border-radius:20px!important;
  }
  .provider-card h3{font-size:22px!important;line-height:1.3!important;margin-bottom:8px!important;}
  .provider-card p{font-size:14px!important;line-height:1.65!important;min-height:0!important;margin-bottom:10px!important;}
  .pkg-meta{gap:7px!important;margin-bottom:10px!important;}
  .pkg-meta span{font-size:12px!important;padding:6px 9px!important;}
  .price{font-size:24px!important;margin:8px 0 12px!important;}
  .provider-card .btn{min-height:44px!important;border-radius:16px!important;font-size:14px!important;}
}

/* Bottom bar: compact and never covers content badly */
@media(max-width:768px){
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px)!important;}
  .taskbar{
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom))!important;
    padding:5px 0 calc(5px + env(safe-area-inset-bottom))!important;
    border-radius:18px 18px 0 0!important;
  }
  .taskbar-container{width:100%!important;max-width:100%!important;padding:0 5px!important;gap:2px!important;}
  .taskbar-item{padding:5px 2px!important;min-width:0!important;border-radius:13px!important;}
  .taskbar-item i{font-size:18px!important;}
  .taskbar-item span{font-size:10.5px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .taskbar-item.active{background:#fff3f3!important;}
  .taskbar-item.active::before{top:-5px!important;width:26px!important;height:3px!important;}
}

/* Strict no sideways leakage on common wrappers */
@media(max-width:768px){
  .provider-grid,.operator-grid,.cards-grid,.grid,.dashboard-grid,.dashboard-stats,
  .provider-card,.operator-card,.service-card,.package-card,.form-card,.glass-card,.panel-like,.wallet-card,.clean-panel,
  .book-form-card,.payment-choice-box,.payment-options,.receipt-pay-box{
    max-width:100%!important;
    overflow:hidden!important;
  }
  .table-wrap,.responsive-table{overflow-x:auto!important;overflow-y:hidden!important;}
  input,select,textarea{font-size:14px!important;}
}


/* =========================================================
   NETPACK MOBILE FINAL v61
   إصلاح فتح منيو الموبايل RTL/LTR + تصغير واجهة الهاتف + لون بادج الإشعارات
   ========================================================= */

/* Notification badge: green, not black */
.classic-account-link em,
.client-menu a em,
.drawer-links a em {
  background: #00a86b !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 6px 14px rgba(0,168,107,.28) !important;
}

/* Drawer overlay and drawer z-index must beat page/header */
.drawer-overlay {
  z-index: 9998 !important;
  background: rgba(15,23,42,.46) !important;
}
.drawer {
  z-index: 9999 !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  background: #fff !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .28s ease, opacity .18s ease, visibility .18s ease !important;
}

/* Critical fix: RTL open state needs higher specificity than body.rtl .drawer */
body.rtl .drawer {
  left: 0 !important;
  right: auto !important;
  transform: translateX(-110%) !important;
}
body.ltr .drawer,
body:not(.rtl) .drawer {
  right: 0 !important;
  left: auto !important;
  transform: translateX(110%) !important;
}
body.rtl .drawer.open,
body.ltr .drawer.open,
body:not(.rtl) .drawer.open,
.drawer.open {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.drawer-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Prevent drawer from leaving a visible side strip when closed */
@media (max-width: 768px) {
  .drawer {
    width: min(290px, 82vw) !important;
    max-width: 82vw !important;
    box-shadow: 0 18px 45px rgba(15,23,42,.20) !important;
  }
  .drawer-head {
    padding: 14px 15px !important;
    min-height: 62px !important;
  }
  .drawer-head h3 {
    font-size: 18px !important;
    line-height: 1 !important;
  }
  .drawer-close {
    width: 34px !important;
    height: 34px !important;
  }
  .drawer-links {
    padding: 10px !important;
    gap: 5px !important;
  }
  .drawer-links a {
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    border-radius: 12px !important;
    line-height: 1.2 !important;
  }
  .drawer-links a i {
    font-size: 15px !important;
    width: 18px !important;
  }
  .drawer-company-logo {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
  }
  .drawer-foot {
    padding: 10px !important;
    gap: 7px !important;
  }
  .drawer-foot .btn {
    min-height: 38px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    padding: 7px 10px !important;
  }
}

/* Mobile interface: cleaner sizing, less huge cards/buttons */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  .classic-public-nav, .public-nav, .nav {
    height: 60px !important;
    min-height: 60px !important;
    padding-inline: 14px !important;
  }
  .menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
    font-size: 23px !important;
  }
  .classic-brand h2, .brand h2 {
    font-size: 20px !important;
    max-width: 135px !important;
  }
  .classic-brand .logo, .brand .logo,
  .classic-brand img, .brand img {
    width: 39px !important;
    height: 39px !important;
  }

  .dashboard-page {
    padding-top: 14px !important;
  }
  .dashboard-hero-clean {
    padding: 18px 16px !important;
    border-radius: 20px !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }
  .dashboard-hero-clean .eyebrow {
    font-size: 12px !important;
    padding: 6px 11px !important;
    margin-bottom: 6px !important;
  }
  .dashboard-hero-clean h1 {
    font-size: clamp(24px, 7vw, 28px) !important;
    line-height: 1.25 !important;
    margin: 7px 0 !important;
  }
  .dashboard-hero-clean p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  .dashboard-main-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .dashboard-main-actions .btn,
  .account-quick-actions .btn,
  .actions .btn,
  .hero-actions .btn {
    min-height: 42px !important;
    padding: 8px 9px !important;
    border-radius: 16px !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }
  .dashboard-main-actions .btn i,
  .account-quick-actions .btn i {
    font-size: 14px !important;
  }
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .dash-stat {
    min-height: 78px !important;
    padding: 11px 10px !important;
    border-radius: 16px !important;
  }
  .dash-stat span {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }
  .dash-stat strong {
    font-size: 17px !important;
  }
  .clean-panel, .panel-like, .glass-card, .form-card, .wallet-card {
    border-radius: 17px !important;
    padding: 15px !important;
  }

  /* Package cards smaller and fully inside viewport */
  .provider-card, .package-card, .service-card {
    padding: 16px 14px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .provider-card h3, .package-card h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  .provider-card p, .package-card p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }
  .price {
    font-size: 22px !important;
  }
  .provider-card .btn, .package-card .btn {
    min-height: 42px !important;
    font-size: 13.5px !important;
    border-radius: 15px !important;
  }

  /* Bottom nav compact */
  .taskbar {
    height: calc(58px + env(safe-area-inset-bottom)) !important;
    padding-top: 4px !important;
  }
  .taskbar-item {
    padding: 4px 2px !important;
    border-radius: 12px !important;
  }
  .taskbar-item i {
    font-size: 17px !important;
  }
  .taskbar-item span {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
}

/* Very small Android screens */
@media (max-width: 390px) {
  .container, .narrow {
    width: calc(100% - 22px) !important;
  }
  .dashboard-main-actions {
    grid-template-columns: 1fr !important;
  }
  .dashboard-hero-clean h1 {
    font-size: 24px !important;
  }
  .classic-brand h2, .brand h2 {
    font-size: 18px !important;
    max-width: 120px !important;
  }
}


/* =========================================================
   NETPACK v62 final responsive/book form polish
   ========================================================= */
@media(max-width:768px){
  .book-form-card .form-grid,
  .receipt-pay-box.form-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .book-form-card{
    padding:16px!important;
    border-radius:18px!important;
  }
  .booking-hero{
    padding:28px 0 20px!important;
  }
  .booking-hero h1{
    font-size:24px!important;
    line-height:1.25!important;
  }
  .booking-hero p{
    font-size:13.5px!important;
    line-height:1.65!important;
  }
  .booking-wizard{
    gap:9px!important;
    margin-bottom:14px!important;
  }
  .wizard-step{
    padding:11px 12px!important;
    border-radius:14px!important;
    align-items:center!important;
  }
  .wizard-no{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
    font-size:13px!important;
  }
  .safe-box,.admin-account-note,.note-box,.wallet-mini{
    font-size:13px!important;
    padding:11px 12px!important;
    border-radius:13px!important;
  }
  .pin-row,.password-row,.field .input-action-row,
  .book-form-card .field > div[style*="display:flex"]{
    gap:7px!important;
  }
  .book-form-card .field > div[style*="display:flex"] .btn{
    width:auto!important;
    min-width:68px!important;
    flex:0 0 auto!important;
    padding-inline:12px!important;
  }
  .payment-options{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .payment-option-card{
    min-height:46px!important;
    padding:10px 12px!important;
    border-radius:16px!important;
    justify-content:flex-start!important;
  }
  .payment-option-card span{
    font-size:13.5px!important;
    line-height:1.3!important;
  }
  .payment-option-card input[type="radio"]{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    flex:0 0 18px!important;
  }
  select,input,textarea{
    max-width:100%!important;
  }
}


/* =========================================================
   NETPACK v65 wallet hold + coupons responsive polish
   ========================================================= */
.coupon-row,.wallet-hold-note{
  background:#f6fff9;
  border:1px solid #d9f7e4;
  color:#075f38;
  border-radius:14px;
  padding:11px 13px;
  font-weight:800;
}
@media(max-width:768px){
  .book-form-card .field input[name="coupon_code"]{
    min-height:42px!important;
    font-size:14px!important;
  }
  .payment-choice-box{
    border-radius:17px!important;
    padding:13px!important;
  }
  .book-form-card .btn[type="submit"]{
    width:100%!important;
    min-height:44px!important;
  }
}