/* ===========================================================================
   File Type: CSS
   File Name: index.css
   File Location: C:\xampp\htdocs\taxi_app\assets\css\index.css
   Purpose:
     Shared customer-facing stylesheet for /taxi_app/index.php and the simple
     services pages under /taxi_app/services/.
     Keeps the centered-logo layout, left notifications button, right 3-dots
     menu, responsive vehicle cards, services category cards, provider cards,
     working account modals, active bottom-nav underline states, and mobile-
     friendly spacing.
   Database Tables Indirectly Related Through PHP Files:
     - theme_settings
     - registered_user
     - advertisements
     - drivers
     - vehicle_settings
     - add_settings
     - public_notifications
     - app_announcements
     - app_announcement_reads
   Connected Files:
     - /taxi_app/index.php
     - /taxi_app/services/_shared.php
     - /taxi_app/services/index.php
     - /taxi_app/services/list.php
     - /taxi_app/admin/theme_control.php
     - /taxi_app/admin/theme_pages.php
   Theme Compatibility:
     - Values from admin/theme_control.php are injected as CSS variables
       by PHP using theme_settings.
     - This file uses those variables and keeps safe defaults.
   =========================================================================== */

:root{
  --page-bg:#f3f4f6;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --text-color:#111827;
  --muted-color:#6b7280;
  --accent:#ff6a00;
  --accent-2:#ff8c2a;
  --accent-soft:#fff3e6;
  --top-nav-bg:#ff6a00;
  --top-nav-text:#ffffff;
  --browser-bar-color:#ff6a00;
  --top-nav-shadow:0 14px 32px rgba(15,23,42,.10);
  --top-nav-radius:30px;
  --bottom-nav-bg:#ffffff;
  --bottom-nav-text:#6b7280;
  --bottom-nav-shadow:0 -10px 30px rgba(15,23,42,.08);
  --bottom-nav-radius:24px;
  --veh-icon-bg:linear-gradient(135deg,rgba(255,106,0,.16),rgba(255,106,0,.08));
  --veh-icon-color:var(--accent);
  --veh-icon-border:1px solid rgba(255,106,0,.15);
  --veh-icon-size:42px;
  --veh-taxi-icon-color:var(--veh-icon-color);
  --veh-motorcycle-icon-color:var(--veh-icon-color);
  --veh-minibus-icon-color:var(--veh-icon-color);
  --veh-bus-icon-color:var(--veh-icon-color);
  --veh-gender-bg:transparent;
  --veh-gender-border:0;
  --veh-gender-male-color:rgba(157,70,158,.42);
  --veh-gender-female-color:rgba(157,70,158,.34);
  --veh-gender-size:34px;
  --veh-pill-ok-bg:rgba(22,163,74,.12);
  --veh-pill-ok-border:rgba(22,163,74,.20);
  --veh-pill-ok-text:#166534;
  --veh-pill-no-bg:rgba(239,68,68,.12);
  --veh-pill-no-border:rgba(239,68,68,.20);
  --veh-pill-no-text:#991b1b;
  --veh-name-bg:var(--btn-primary-bg);
  --veh-name-text:var(--btn-primary-text);
  --veh-taxi-male-title-bg:var(--veh-name-bg);
  --veh-taxi-male-title-text:var(--veh-name-text);
  --veh-taxi-female-title-bg:var(--veh-name-bg);
  --veh-taxi-female-title-text:var(--veh-name-text);
  --veh-motorcycle-title-bg:var(--veh-name-bg);
  --veh-motorcycle-title-text:var(--veh-name-text);
  --veh-minibus-title-bg:var(--veh-name-bg);
  --veh-minibus-title-text:var(--veh-name-text);
  --veh-bus-title-bg:var(--veh-name-bg);
  --veh-bus-title-text:var(--veh-name-text);
  --veh-card-shadow:0 14px 30px rgba(15,23,42,.10);
  --btn-primary-active:#d85a00;
  --btn-secondary-active:#d7dce3;
  --card-bg:#ffffff;
  --card-border:rgba(17,24,39,.08);
  --container-bg:rgba(255,255,255,.94);
  --container-border:rgba(17,24,39,.08);
  --container-shadow:0 14px 32px rgba(15,23,42,.10);
  --notice-bg:#f7f0d6;
  --notice-text:#8a6f08;
  --notice-border:#c8b766;
  --btn-primary-bg:#ff6a00;
  --btn-primary-hover:#f15b00;
  --btn-primary-text:#ffffff;
  --btn-secondary-bg:#eef2f7;
  --btn-secondary-hover:#e2e8f0;
  --btn-secondary-text:#111827;
  --input-bg:#ffffff;
  --input-border:rgba(17,24,39,.10);
  --input-text-color:var(--text-color);
  --input-hint-color:#FAFAFA;
  --radius:22px;
  --userbg:transparent;
  --topbarH:90px;
  --footerNavH:84px;
  --bottomBarH:0px;
  --t-fast:all .14s ease;
  --t:all .20s ease;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;max-width:100%;overflow:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text-color);background:var(--page-bg)}
body.user-bg{background:var(--userbg)!important;background-image:none!important}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{border:none;background:none}
:focus-visible{outline:3px solid rgba(255,106,0,.30);outline-offset:2px;border-radius:12px}
.app,.section,.section-main{width:100%;height:100%}
.section-main{position:relative;overflow:hidden;isolation:isolate}
.topbar-inbox{position:fixed;top:0;left:0;right:0;z-index:1700;display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:12px;padding:0 14px 2px;padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right));margin-top:0;background:var(--top-nav-bg);color:var(--top-nav-text);border-bottom-left-radius:var(--top-nav-radius);border-bottom-right-radius:var(--top-nav-radius);box-shadow:var(--top-nav-shadow,var(--container-shadow))}
.topbar-slot{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-slot.left,.topbar-slot.right{position:relative;z-index:6}
.topbar-slot.right{justify-content:flex-end}
.brand{display:flex;align-items:center;justify-content:center;min-width:0;position:relative;z-index:1;pointer-events:none}
.logo{width:64px;height:74px;border-radius:0px;display:grid;place-items:center;background:transparent;overflow:hidden;flex:0 0 auto;pointer-events:none}
.logo--center{margin:0 auto}
.logo i{font-size:20px;color:var(--top-nav-text)}
.logo-img{max-width:100%;max-height:100%;object-fit:contain;display:block;pointer-events:none}
.icon-btn{width:42px;height:42px;border:none;border-radius:0;background:transparent;display:grid;place-items:center;position:relative;color:var(--top-nav-text);transition:var(--t);box-shadow:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.icon-btn:hover{transform:translateY(-1px);background:transparent;opacity:.88}
.icon-btn i{font-size:21px}
.notif-dot{position:absolute;top:7px;right:7px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#fff;color:var(--accent);font-size:10px;font-weight:1000;display:none;align-items:center;justify-content:center}
.notif-dot.show{display:flex}
.content-scroll{position:absolute;top:var(--topbarH);left:0;right:0;bottom:var(--footerNavH);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 14px calc(env(safe-area-inset-bottom) + 18px)}
.page-stack{display:flex;flex-direction:column;gap:14px}
.spacer-bottom{height:12px}
.notice-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--notice-bg);color:var(--notice-text);border:2px solid var(--notice-border);border-radius:18px;padding:16px 18px;box-shadow:0 10px 24px rgba(17,24,39,.06)}
.notice-copy{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.notice-strip .txt{font-size:18px;font-weight:1000;line-height:1.2;text-align:center;overflow-wrap:anywhere;word-break:break-word}
.notice-strip .subtxt{font-size:13px;font-weight:800;line-height:1.45;text-align:center;opacity:.86;overflow-wrap:anywhere;word-break:break-word}
.notice-strip i{font-size:22px;opacity:.95}
.index-inline-announcements{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.index-inline-announcement,.index-top-left-card{background:rgba(255,255,255,.94);border:1px solid rgba(17,24,39,.08);border-radius:20px;box-shadow:var(--container-shadow);padding:14px 16px}
.index-inline-announcement-title,.index-top-left-title{font-size:14px;font-weight:1000;line-height:1.25;color:#111827}
.index-inline-announcement-body,.index-top-left-body{margin-top:6px;font-size:13px;line-height:1.5;color:#4b5563;overflow-wrap:anywhere;word-break:break-word}
.index-inline-announcement-link,.index-top-left-link{margin-top:10px;display:inline-flex;align-items:center;gap:8px;font-weight:900;color:var(--accent)}
.index-top-left-announcements{display:grid;grid-template-columns:minmax(0,320px);gap:12px;justify-content:start}
.index-top-left-image{width:100%;margin-top:10px;border-radius:16px;display:block;border:1px solid rgba(17,24,39,.08)}
.ad-stage{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;margin:0}
.ad-slider{position:relative;overflow:hidden;border-radius:18px;background:var(--card-bg);box-shadow:var(--container-shadow);min-height:clamp(212px,42vw,352px);border:1px solid var(--card-border);padding:2px;touch-action:pan-y;user-select:none;cursor:grab;direction:ltr;--ad-slide-gap:14px}
.ad-slider.is-paused,.ad-slider.is-dragging,.ad-slider:active{cursor:grabbing}
.ad-slides{display:flex;flex-wrap:nowrap;width:100%;transition:none;will-change:transform;direction:ltr;gap:var(--ad-slide-gap)}
.ad-slide{min-width:100%;width:100%;flex:0 0 100%;padding:2px;box-sizing:border-box;direction:ltr}
.ad-slide-link{display:block;position:relative;border-radius:18px;overflow:hidden;background:#dbeafe;min-height:clamp(212px,42vw,352px);height:clamp(212px,42vw,352px);width:calc(100% - 2px);margin:0 auto;box-shadow:none;direction:ltr}
.ad-slide-link img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(1.02)}
.ad-slide-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.10),rgba(15,23,42,.52));display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,4vw,28px);color:#fff;text-align:left}
.ad-badge{position:absolute;top:12px;left:18px;display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;color:#fff;font-size:11px;font-weight:1000;box-shadow:0 10px 20px rgba(15,23,42,.15);direction:ltr}
.ad-slide-title{font-size:clamp(24px,5vw,36px);font-weight:1000;line-height:1.05;text-shadow:0 4px 18px rgba(0,0,0,.25)}
.ad-slide-sub{margin-top:8px;font-size:13px;font-weight:900;opacity:.96}
.ad-pagers{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px;direction:ltr}
.ad-pagers button{width:10px;height:10px;border:none;border-radius:999px;background:rgba(17,24,39,.12);cursor:pointer;transition:var(--t)}
.ad-pagers button.active{width:26px;background:var(--accent)}
.no-ads{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.92);border:1px dashed rgba(17,24,39,.16);color:rgba(17,24,39,.72);font-weight:900;font-size:13px;box-shadow:var(--container-shadow)}
.welcome-mini{
  width:min(92vw,720px);
  margin:0 auto;
  padding:14px 20px;
  border-radius:18px;
  background:var(--welcome-bg,#fff4ec);
  border:var(--welcome-border,1px solid rgba(255,106,0,.18));
  color:var(--welcome-text,#9a3412);
  font-weight:1000;
  text-align:center;
  box-shadow:var(--container-shadow)
}
.vehicle-section-clean{display:flex;flex-direction:column;gap:12px}
.veh-grid-clean{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.veh-card-clean{position:relative;overflow:hidden;min-height:178px;border-radius:22px;background:linear-gradient(160deg,#ffffff 0%,#f8fafc 58%,#eef2f7 100%);border:1px solid rgba(17,24,39,.08);box-shadow:var(--veh-card-shadow);display:flex;flex-direction:column;justify-content:space-between;transition:var(--t);padding:14px 14px 18px}
.veh-card-clean:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(15,23,42,.14)}
.veh-card-clean.is-disabled{opacity:.60;filter:grayscale(.08);cursor:not-allowed}
.veh-card-clean.is-disabled:hover{transform:none;box-shadow:0 14px 30px rgba(15,23,42,.10)}
.veh-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px;min-height:28px}
.veh-gender-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  min-width:0;
  padding:0;
  border-radius:0;
  background:var(--veh-gender-bg,transparent);
  border:var(--veh-gender-border,0);
  color:var(--veh-gender-male-color,rgba(157,70,158,.42));
  font-size:var(--veh-gender-size,28px);
  line-height:1;
  flex:0 0 auto;
  box-shadow:none
}
.veh-gender-mark.female{color:var(--veh-gender-female-color,rgba(157,70,158,.34))}
.veh-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:8px 10px 4px
}
.veh-modern-icon{
  font-size:var(--veh-icon-size,54px);
  line-height:1;
  color:var(--veh-icon-color,var(--accent));
  filter:drop-shadow(0 10px 16px rgba(15,23,42,.12))
}
.veh-card-clean[data-veh="taxi_male"] .veh-modern-icon,
.veh-card-clean[data-veh="taxi_female"] .veh-modern-icon,
.veh-card-clean[data-veh="taxi"] .veh-modern-icon{color:var(--veh-taxi-icon-color,var(--veh-icon-color,var(--accent)))}
.veh-card-clean[data-veh="motorcycle"] .veh-modern-icon{color:var(--veh-motorcycle-icon-color,var(--veh-icon-color,var(--accent)));transform:translateY(1px)}
.veh-card-clean[data-veh="minibus"] .veh-modern-icon{color:var(--veh-minibus-icon-color,var(--veh-icon-color,var(--accent)))}
.veh-card-clean[data-veh="bus"] .veh-modern-icon{color:var(--veh-bus-icon-color,var(--veh-icon-color,var(--accent)))}
.veh-pill-clean{padding:7px 10px;border-radius:999px;font-size:11px;font-weight:1000;border:1px solid rgba(17,24,39,.08);background:#fff;color:#0f172a;white-space:nowrap}
.veh-pill-clean.ok{background:var(--veh-pill-ok-bg,rgba(22,163,74,.12));border-color:var(--veh-pill-ok-border,rgba(22,163,74,.20));color:var(--veh-pill-ok-text,#166534)}
.veh-pill-clean.no{background:var(--veh-pill-no-bg,rgba(239,68,68,.12));border-color:var(--veh-pill-no-border,rgba(239,68,68,.20));color:var(--veh-pill-no-text,#991b1b)}
.veh-watermark,.veh-watermark-image{display:none!important}
.veh-title-text{max-width:100%;text-align:center;background:transparent;color:var(--veh-name-text,var(--btn-primary-bg,var(--accent)));padding:0;font-size:var(--veh-title-size,clamp(20px,3.8vw,31px));font-weight:1000;line-height:1.2;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere;word-break:break-word;box-shadow:none}
.veh-card-clean[data-veh="taxi_male"] .veh-title-text{color:var(--veh-taxi-male-title-text,var(--veh-name-text))}
.veh-card-clean[data-veh="taxi_female"] .veh-title-text{color:var(--veh-taxi-female-title-text,var(--veh-name-text))}
.veh-card-clean[data-veh="motorcycle"] .veh-title-text{color:var(--veh-motorcycle-title-text,var(--veh-name-text))}
.veh-card-clean[data-veh="minibus"] .veh-title-text{color:var(--veh-minibus-title-text,var(--veh-name-text))}
.veh-card-clean[data-veh="bus"] .veh-title-text{color:var(--veh-bus-title-text,var(--veh-name-text))}
.cta-secondary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 16px;border-radius:22px;font-size:15px;font-weight:1000;color:var(--btn-secondary-text);background:var(--btn-secondary-bg);border:1px solid rgba(17,24,39,.08);box-shadow:var(--container-shadow);transition:var(--t)}
.cta-secondary:hover{transform:translateY(-2px);background:var(--btn-secondary-hover)}
.cta-secondary i{color:var(--accent)}
.bottom-store-section{padding:4px 0 2px}
.sheet-subitem-form{margin:0}
.bottom-store-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bottom-store-btn{min-height:58px;border-radius:20px;border:1px solid rgba(17,24,39,.08);background:var(--card-bg);color:var(--text-color);box-shadow:var(--container-shadow);display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;font-weight:1000;transition:var(--t)}
.bottom-store-btn i{font-size:20px;color:var(--accent)}
.bottom-store-btn:hover{transform:translateY(-2px);background:var(--surface-2)}

.bottom-store-install{width:100%;min-height:58px;border-radius:20px;border:1px solid rgba(17,24,39,.08);background:var(--btn-primary-bg);color:var(--btn-primary-text);box-shadow:var(--container-shadow);display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;font-weight:1000;transition:var(--t);margin-bottom:12px}
.bottom-store-install:hover{background:var(--btn-primary-hover);transform:translateY(-2px)}
.install-help-list{margin:14px 0 0;padding-left:22px;display:grid;gap:10px}
.install-help-list li{background:#f8fafc;border:1px solid rgba(17,24,39,.08);border-radius:18px;padding:12px 14px;line-height:1.7;font-weight:900}
.install-help-note{margin-top:14px}
.install-help-note.is-hidden{display:none}
html[dir="rtl"] .install-help-list{padding-left:0;padding-right:22px}
.hero-wrap{border-radius:24px;overflow:hidden;box-shadow:var(--container-shadow);background:#e5e7eb}
.hero-media{width:100%;display:block;object-fit:cover;max-height:280px}
.map-block{position:relative;z-index:1;overflow:hidden;border-radius:24px;box-shadow:var(--container-shadow);min-height:180px;background:#e5e7eb}
.home-map{width:100%;min-height:180px}
.map-block,.home-map,.leaflet-container{position:relative;z-index:1}
.leaflet-pane,.leaflet-top,.leaflet-bottom,.leaflet-control-container{z-index:1!important}
.footer-nav-inbox{position:fixed;left:0;right:0;bottom:0;z-index:1700;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right));background:var(--bottom-nav-bg);border-top:1px solid rgba(17,24,39,.08);box-shadow:var(--bottom-nav-shadow);border-top-left-radius:var(--bottom-nav-radius);border-top-right-radius:var(--bottom-nav-radius)}
.fbtn{min-height:54px;border-radius:0;display:flex;align-items:center;justify-content:center;color:var(--bottom-nav-text);font-weight:1000;transition:var(--t);padding:0;position:relative;background:transparent;box-shadow:none;cursor:pointer}
a.fbtn{text-decoration:none}
.fbtn i{font-size:22px}
.fbtn span{display:none!important}
.fbtn::after{content:'';position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:0;height:3px;border-radius:999px;background:var(--bottom-nav-active-underline-color,var(--accent));transition:var(--t)}
.fbtn.active{background:transparent;color:var(--accent);box-shadow:none}
.fbtn.active::after{width:22px}
.fbtn:hover{transform:translateY(-1px)}
.menu-overlay{position:fixed;inset:0;background:rgba(15,23,42,.18);opacity:0;pointer-events:none;transition:var(--t);z-index:1900}
.menu-overlay.show{opacity:1;pointer-events:auto}
.menu-sheet{position:fixed;inset:0;z-index:1910;width:100vw;max-width:100vw;height:100vh;max-height:100vh;background:#f9fafb;border:none;border-radius:0;box-shadow:0 32px 90px rgba(15,23,42,.28);padding:0;opacity:0;pointer-events:none;transition:var(--t);transform:translateY(100%);display:flex;flex-direction:column}
.menu-sheet.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.menu-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(16px + env(safe-area-inset-top)) 16px 14px;min-height:72px;background:#fff;position:sticky;top:0;z-index:3;border-bottom:1px solid rgba(17,24,39,.07)}
.menu-sheet-title{flex:1;font-size:18px;font-weight:1000;text-align:center;color:#111827}
.menu-sheet-body{flex:1;overflow:auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom));background:#f9fafb}
.menu-sheet-head-space{width:40px;flex:0 0 40px}
.menu-sheet-back{flex:0 0 auto}
.modal-close{width:40px;height:40px;border-radius:14px;border:1px solid rgba(17,24,39,.10);background:#fff;display:grid;place-items:center;transition:var(--t);cursor:pointer}
.modal-close:hover{transform:translateY(-1px);background:#fff4ec}
.sheet-item{width:100%;display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:10px;border-radius:18px;border:1px solid rgba(17,24,39,.08);background:#f8fafc;font-weight:1000;transition:var(--t);cursor:pointer}
.sheet-item:hover{transform:translateY(-2px);background:#fff4ec;border-color:rgba(255,106,0,.22)}
.sheet-item i{width:24px;text-align:center;color:var(--accent);font-size:18px}
.sheet-item-main{display:flex;align-items:center;gap:14px;min-width:0}
.sheet-toggle{justify-content:space-between}
.sheet-toggle-icon{width:auto!important;margin-left:12px;transition:transform .18s ease}
.sheet-toggle.is-open .sheet-toggle-icon{transform:rotate(180deg)}
.sheet-submenu{display:flex;flex-direction:column;gap:8px;margin:-2px 0 12px;padding:0 6px 0 18px}
.sheet-submenu[hidden]{display:none!important}
.sheet-subtitle{padding:0 6px 4px;font-size:12px;font-weight:1000;color:var(--muted-color);text-transform:uppercase;letter-spacing:.04em}
.sheet-subitem,.sheet-subitem-button{display:flex;align-items:center;justify-content:flex-start;min-height:46px;padding:0 14px;border-radius:16px;background:#fff;border:1px solid rgba(17,24,39,.08);font-weight:900;color:var(--text-color)}
.sheet-subitem:hover,.sheet-subitem-button:hover{background:#fff4ec;border-color:rgba(255,106,0,.22)}
.sheet-subitem-button{width:100%;text-align:inherit;background:transparent;cursor:pointer;font:inherit}
.sheet-subitem-button.danger{color:#991b1b;background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.18)}
.sheet-subitem-button span{pointer-events:none}
.sheet-install-block{margin-top:2px;margin-bottom:10px;padding:14px;border-radius:22px;border:1px solid rgba(17,24,39,.08);background:#fff8f3;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.sheet-install-title{font-size:14px;font-weight:1000;color:var(--text-color);text-align:center;margin-bottom:12px}
.sheet-install-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sheet-install-actions.has-pwa{grid-template-columns:repeat(3,minmax(0,1fr))}
.sheet-install-btn{min-height:52px;border-radius:18px;border:1px solid rgba(17,24,39,.08);box-shadow:var(--container-shadow);display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;font-weight:1000;transition:var(--t);text-align:center}
.sheet-install-btn i{font-size:19px}
.sheet-install-btn.primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}
.sheet-install-btn.primary:hover{background:var(--btn-primary-hover);transform:translateY(-2px)}
.sheet-install-btn.secondary{background:var(--card-bg);color:var(--text-color)}
.sheet-install-btn.secondary i{color:var(--accent)}
.sheet-install-btn.secondary:hover{transform:translateY(-2px);background:var(--surface-2)}
.sheet-install-btn span{overflow-wrap:anywhere;word-break:break-word;line-height:1.15}
body.overlay-open{overflow:hidden}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.52);display:none;align-items:center;justify-content:center;padding:18px;z-index:2200}
.modal.show{display:flex}
.modal-card{width:min(620px,100%);max-height:min(86vh,840px);background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:28px;box-shadow:0 28px 70px rgba(15,23,42,.22);overflow:hidden;display:flex;flex-direction:column;position:relative;z-index:2201}
.modal.notifications-drawer{padding:0;align-items:stretch;justify-content:flex-end;background:rgba(15,23,42,.18)}
.modal.notifications-drawer .modal-card{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0;border:none;box-shadow:0 32px 90px rgba(15,23,42,.28);transform:translateX(100%);transition:transform .28s ease}
.modal.notifications-drawer.show .modal-card{transform:translateX(0)}
html[dir="rtl"] .modal.notifications-drawer .modal-card{transform:translateX(-100%)}
html[dir="rtl"] .modal.notifications-drawer.show .modal-card{transform:translateX(0)}
.modal.fullscreen-panel{padding:0;align-items:stretch;justify-content:flex-end;background:rgba(15,23,42,.18)}
.modal.fullscreen-panel .modal-card{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0;border:none;box-shadow:0 32px 90px rgba(15,23,42,.28)}
.modal.fullscreen-panel .modal-head{padding:calc(16px + env(safe-area-inset-top)) 16px 14px;min-height:72px;background:#fff;position:sticky;top:0;z-index:2}
.modal.fullscreen-panel .modal-title{flex:1;justify-content:center;text-align:center;color:#111827}
.modal.fullscreen-panel .modal-body{flex:1;overflow:auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom));background:#f9fafb}
.modal.fullscreen-panel .modal-head-space{width:40px;flex:0 0 40px}
.modal-card.small{width:min(440px,100%)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:#fff8f3;border-bottom:1px solid rgba(17,24,39,.07)}
.modal-title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:1000}
.modal-body{padding:16px}
.drawer-head{padding:calc(16px + env(safe-area-inset-top)) 16px 14px;min-height:72px;background:#fff;position:sticky;top:0;z-index:2}
.drawer-title{justify-content:center;flex:1;text-align:center;color:#111827}
.drawer-head-space{width:40px;flex:0 0 40px}
.drawer-body{flex:1;overflow:auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom));background:#f9fafb}
.modal-back-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:none;border-radius:14px;background:#fff4ec;color:var(--accent);font-size:13px;font-weight:1000;cursor:pointer;flex:0 0 auto}
.modal-back-btn:hover{background:#ffe8d7}
.modal-body.center{text-align:center}
.modal-body.scrollable{overflow:auto}
.citem{display:flex;align-items:center;gap:12px;padding:14px 14px;border-radius:18px;background:#f8fafc;border:1px solid rgba(17,24,39,.08);font-weight:1000;margin-bottom:10px;transition:var(--t)}
.citem:hover{transform:translateY(-1px);background:#fff4ec}
.citem i{color:var(--accent)}
.u-msg{padding:12px 14px;border-radius:18px;border:1px solid rgba(22,163,74,.22);background:rgba(22,163,74,.10);color:#166534;margin-bottom:12px;font-weight:1000;font-size:13px;display:flex;gap:10px;align-items:flex-start}
.u-msg.err{border-color:rgba(239,68,68,.22);background:rgba(239,68,68,.10);color:#991b1b}
.account-box{display:flex;flex-direction:column;gap:10px}
.account-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.atab{border:1px solid rgba(17,24,39,.08);background:#f4f6f8;border-radius:16px;padding:12px 10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:1000;transition:var(--t)}
.atab.active{background:#fff4ec;border-color:rgba(255,106,0,.22);color:var(--accent)}
.atab:hover{transform:translateY(-1px)}
.tab-content{display:none}
.tab-content.active{display:block}
.aform{display:flex;flex-direction:column;gap:10px}
.aform label{font-size:12px;font-weight:1000;color:#374151;margin-top:6px}
.aform input,.aform textarea{width:100%;padding:12px 13px;border-radius:16px;border:1px solid var(--input-border);background:var(--input-bg);outline:none;transition:var(--t)}
.aform input:focus,.aform textarea:focus{border-color:rgba(255,106,0,.42);box-shadow:0 0 0 4px rgba(255,106,0,.12)}
.input-wrap{position:relative}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none;background:transparent;padding:8px;border-radius:12px;color:#6b7280;cursor:pointer}
.pw-toggle:hover{background:#f3f4f6}
.btn-wide{width:100%;padding:13px 14px;border-radius:18px;border:1px solid rgba(17,24,39,.08);cursor:pointer;font-size:14px;font-weight:1000;display:flex;align-items:center;justify-content:center;gap:10px;transition:var(--t)}
.btn-wide.primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}
.btn-wide.primary:hover{background:var(--btn-primary-hover);transform:translateY(-1px)}
.btn-wide.ok{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.20);color:#166534}
.btn-wide.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.20);color:#991b1b}
.account-helper-link{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-weight:900;text-decoration:none;color:var(--accent)}
.account-helper-link i{font-size:14px}
.success-icon{font-size:54px;color:var(--accent);margin:4px 0 10px}
.success-text{font-weight:1000;color:#1f2937;margin-bottom:12px}
.pw-match-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;margin-top:8px;color:rgba(17,24,39,.72)}
.pw-dot{width:10px;height:10px;border-radius:999px;background:#9ca3af;flex:0 0 10px}
.pw-dot.ok{background:#16a34a}
.pw-dot.bad{background:#dc2626}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 12px;border-radius:18px;border:1px solid rgba(17,24,39,.08);background:#f8fafc;margin-bottom:10px}
.set-label{display:flex;flex-direction:column;gap:2px}
.set-title{font-size:13px;font-weight:1000}
.set-sub{font-size:12px;color:#6b7280}
.colorpick{width:54px;height:42px;padding:0;border-radius:14px;border:1px solid rgba(17,24,39,.10);background:transparent}
.set-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.btn-mini{border:1px solid rgba(17,24,39,.08);background:#f4f6f8;border-radius:16px;padding:10px 12px;cursor:pointer;font-weight:1000;display:flex;align-items:center;gap:8px;transition:var(--t)}
.btn-mini.primary{background:var(--btn-primary-bg);color:var(--btn-primary-text)}
.btn-mini:hover{transform:translateY(-1px)}
.notification-list{display:flex;flex-direction:column;gap:12px;min-height:100%}
.notification-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:calc(100vh - 160px);padding:24px;border-radius:24px;background:#fff;border:1px dashed rgba(17,24,39,.12);color:#6b7280;font-weight:1000;text-align:center}
.notification-empty-state i{font-size:34px;color:var(--accent)}
.notification-item{padding:14px;border-radius:18px;background:#fff;border:1px solid rgba(17,24,39,.08);box-shadow:0 10px 22px rgba(15,23,42,.05)}
.notification-item-title{font-size:14px;font-weight:1000;color:#1f2937}
.notification-item-body{margin-top:6px;font-size:13px;line-height:1.45;color:#4b5563}
.notification-image-wrap,.notification-link-wrap{margin-top:10px}
.notification-image{width:100%;border-radius:16px;display:block}
.notification-item-meta{margin-top:8px;font-size:11px;font-weight:1000;color:#9ca3af}
.live-announcement-toast-stack{position:fixed;top:calc(var(--topbarH) + 10px);left:12px;right:12px;z-index:1900;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.live-announcement-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:20px;background:#111827;color:#fff;border:1px solid rgba(255,255,255,.10);box-shadow:0 20px 42px rgba(15,23,42,.28)}
.live-announcement-toast__icon{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;flex:0 0 36px;background:rgba(255,255,255,.12);color:#fff}
.live-announcement-toast__body{flex:1;min-width:0}
.live-announcement-toast__title{font-size:14px;font-weight:1000;line-height:1.25;color:#fff}
.live-announcement-toast__text{margin-top:4px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.82);overflow-wrap:anywhere;word-break:break-word}
.live-announcement-toast__actions{display:flex;align-items:center;gap:8px;margin-top:10px}
.live-announcement-toast__btn,.live-announcement-toast__close{border:none;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--t-fast);font-weight:1000}
.live-announcement-toast__btn{padding:8px 12px;font-size:12px;background:rgba(255,255,255,.12);color:#fff}
.live-announcement-toast__btn.primary{background:var(--accent);color:#fff}
.live-announcement-toast__close{width:32px;height:32px;flex:0 0 32px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
.live-announcement-toast__btn:hover,.live-announcement-toast__close:hover{transform:translateY(-1px)}
@media (max-width:640px){.live-announcement-toast-stack{top:calc(var(--topbarH) + 8px);left:10px;right:10px}.live-announcement-toast{padding:13px 14px;border-radius:18px}}
.login-tab-mode .account-tabs{display:none}
.login-tab-mode #tabRegister,.login-tab-mode #tabReset{display:none!important}
.login-tab-mode #tabLogin{display:block!important}
.login-tab-mode .modal-card{max-width:460px}
.service-page-heading{padding:16px 18px;border-radius:22px;background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,244,236,.96));border:1px solid rgba(255,106,0,.14);box-shadow:var(--container-shadow)}
.service-page-heading h1{font-size:22px;font-weight:1000;line-height:1.2}
.service-page-heading p{margin-top:8px;color:var(--muted-color);font-size:14px;line-height:1.55}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.service-category-card{border-radius:22px;background:linear-gradient(160deg,#ffffff 0%,#f8fafc 58%,#eef2f7 100%);border:1px solid rgba(17,24,39,.08);box-shadow:var(--container-shadow);padding:18px;display:flex;flex-direction:column;gap:12px;transition:var(--t);min-height:170px}
.service-category-card:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(15,23,42,.14)}
.service-category-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:var(--veh-icon-bg);color:var(--veh-icon-color);border:var(--veh-icon-border)}
.service-category-icon i{font-size:22px}
.service-category-title{font-size:18px;font-weight:1000;line-height:1.2}
.service-category-desc{font-size:13px;line-height:1.55;color:var(--muted-color)}
.service-category-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:1000}
.service-list-grid{display:grid;grid-template-columns:1fr;gap:14px}
.service-provider-card{border-radius:24px;background:#fff;border:1px solid rgba(17,24,39,.08);box-shadow:var(--container-shadow);overflow:hidden;display:flex;flex-direction:column}
.service-provider-image{width:100%;height:190px;object-fit:cover;display:block;background:#e5e7eb}
.service-provider-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.service-provider-title{font-size:18px;font-weight:1000;line-height:1.2}
.service-provider-text{font-size:14px;line-height:1.6;color:#4b5563}
.service-provider-phone{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:#fff4ec;border:1px solid rgba(255,106,0,.18);font-weight:1000;color:#9a3412}
.service-provider-phone i{color:var(--accent)}
.service-provider-actions{display:flex;gap:10px;flex-wrap:wrap}
.service-provider-actions a{flex:1 1 180px;min-height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:1000;border:1px solid rgba(17,24,39,.08);transition:var(--t)}
.service-provider-actions .call-btn{background:var(--btn-primary-bg);color:var(--btn-primary-text)}
.service-provider-actions .call-btn:hover{background:var(--btn-primary-hover);transform:translateY(-1px)}
.service-provider-actions .back-btn{background:var(--btn-secondary-bg);color:var(--btn-secondary-text)}
.service-provider-actions .back-btn:hover{background:var(--btn-secondary-hover);transform:translateY(-1px)}
.service-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;color:var(--muted-color);padding:0 2px}
.service-breadcrumb a{color:var(--accent)}
.service-empty-note{padding:18px;border-radius:20px;background:#fff;border:1px dashed rgba(17,24,39,.16);box-shadow:var(--container-shadow)}
html[dir="rtl"] .veh-name-ribbon{text-align:center;border-top-right-radius:20px;border-top-left-radius:20px}
html[dir="rtl"] .sheet-item,html[dir="rtl"] .modal-title,html[dir="rtl"] .citem,html[dir="rtl"] .notice-strip,html[dir="rtl"] .sheet-item-main,html[dir="rtl"] .service-provider-phone,html[dir="rtl"] .service-breadcrumb{flex-direction:row-reverse}
html[dir="rtl"] .menu-sheet,html[dir="rtl"] .modal-card,html[dir="rtl"] .service-page-heading,html[dir="rtl"] .service-provider-body{text-align:right}
html[dir="rtl"] .ad-slide-overlay{text-align:right;direction:rtl}
html[dir="rtl"] .ad-badge{left:auto;right:18px;direction:rtl}
html[dir="rtl"] .pw-toggle{right:auto;left:10px}
html[dir="rtl"] .sheet-toggle-icon{margin-left:0;margin-right:12px}
html[dir="rtl"] .sheet-submenu{padding:0 18px 0 6px}
html[dir="rtl"] .sheet-subitem-button{text-align:right}
.overlay-open .home-map,.overlay-open #homeMap,.overlay-open .leaflet-container,.overlay-open .leaflet-pane,.overlay-open .leaflet-control-container{pointer-events:none!important}
@media (max-width:640px){
  .logo{width:68px;height:68px}
  .ad-slider{padding:2px}
  .ad-slide{padding:2px}.ad-slide-link img,.ad-slide-link{min-height:212px;height:212px}
  .ad-slide-title{font-size:24px}
  .notice-strip .txt{font-size:16px}
  .notice-strip .subtxt{font-size:12px}
  .index-top-left-announcements{grid-template-columns:1fr}
  .account-tabs{grid-template-columns:1fr}
  .sheet-install-actions,.sheet-install-actions.has-pwa{grid-template-columns:1fr}
  .sheet-install-btn{min-height:58px}
  .service-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .veh-grid-clean{grid-template-columns:1fr 1fr;gap:12px}
  .veh-card-clean{min-height:178px;padding:12px 12px 14px}
  .veh-icon-bubble{max-width:132px;min-height:62px}
  .veh-modern-icon{font-size:var(--veh-icon-size,42px)}
  .veh-gender-mark{width:var(--veh-gender-size,34px);height:var(--veh-gender-size,34px);font-size:calc(var(--veh-gender-size,34px) * .62)}
  .veh-icon-bubble{width:78px;height:64px}
  .veh-modern-icon{font-size:var(--veh-icon-size,42px)}
  .veh-name-ribbon{padding:11px 12px 13px;min-height:60px}
  .bottom-store-row{gap:10px}
  .bottom-store-btn,.bottom-store-install{min-height:54px;padding:10px 10px;font-size:13px}
  .service-provider-image{height:170px}
  .service-provider-actions a{flex-basis:100%}
}
@media (max-width:380px){
  .topbar-inbox{grid-template-columns:44px 1fr 44px;padding:0 10px 2px;padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right));margin-top:0}
  .icon-btn{width:38px;height:38px}
  .logo{width:64px;height:64px}
  .footer-nav-inbox{padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}
  .fbtn i{font-size:20px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }

.bottom-store-install:active{background:var(--btn-primary-active);transform:translateY(0)}
.cta-secondary:active,.topbar__btn:active,.lang__btn:active,.mctrl:active{background:var(--btn-secondary-active)}

/* Shared input text colors. */
input,select,textarea{color:var(--input-text-color,var(--text-color));}
input::placeholder,textarea::placeholder{color:var(--input-hint-color,#FAFAFA)!important;opacity:1;}