@charset "UTF-8";
:root {
  --blue: #1453A9;
  --blue-deep: #0C397C;
  --blue-soft: #EAF2FE;
  --bg: #f9f9f9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFD;
  --ink: #13213B;
  --muted: #64738B;
  --line: #E5EAF1;
  --shadow: 0 10px 35px rgba(17, 48, 91, .045);
  --focus: #53A6F5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
html.app-booting body{visibility:hidden}
html[dir=rtl] body{font-family:'Cairo',Tahoma,Arial,sans-serif}
html[dir=ltr] body{font-family:'Roboto',Arial,sans-serif}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink);font-size:14px;font-weight:500;line-height:1.8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;position:relative}
button,a,input,select,textarea{font:inherit;-webkit-tap-highlight-color:transparent}
a{text-decoration:none;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ambient{position:fixed;pointer-events:none;z-index:0;filter:blur(6px);opacity:.7}
.ambient-1{width:510px;height:510px;background:radial-gradient(circle,rgba(20,83,169,.075),transparent 70%);top:-245px;right:calc(50% - 520px)}
.ambient-2{width:460px;height:460px;background:radial-gradient(circle,rgba(80,166,241,.065),transparent 70%);bottom:-210px;left:calc(50% - 500px)}
.page-shell{width:min(100% - 32px,520px);margin:0 auto;position:relative;z-index:1;padding:20px 0 38px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;direction:ltr;min-height:45px}
/* Header: direct hotline action replaces the old brand mark */
.hotline-button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:5px 12px 5px 6px;background:var(--surface);border:1px solid var(--line);border-radius:25px;box-shadow:var(--shadow);direction:ltr;transition:border-color .2s,transform .2s,box-shadow .2s}
.hotline-button:hover{transform:translateY(-2px);border-color:#A9C8F1;box-shadow:0 8px 22px rgba(20,83,169,.11)}
.hotline-icon{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;background:var(--blue);color:#fff;border-radius:25px}
.hotline-icon .icon{width:18px;height:18px;stroke-width:1.9}
.hotline-details{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;white-space:nowrap;line-height:1.35}
.hotline-details>span{color:var(--muted);font-size:10px;font-weight:800}
.hotline-details strong{color:var(--blue);font-size:15px;font-weight:900;line-height:1.5;letter-spacing:.45px}
.topbar-actions{display:flex;align-items:center;gap:8px}
.icon-button{min-height:40px;min-width:40px;border:1px solid var(--line);border-radius:25px;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ink);background:var(--surface);box-shadow:var(--shadow);transition:transform .2s,border-color .2s,background .2s}
.icon-button:hover{transform:translateY(-2px);border-color:rgba(20,83,169,.4)}
.icon-button .icon{width:17px;height:17px}
.lang-button{padding:0 9px;min-width:40px;font-size:11px;font-weight:800;line-height:1;letter-spacing:.1px}.lang-button .translation-icon{width:21px;height:21px;stroke:none;fill:currentColor;color:var(--blue)}
.theme-sun{display:none}
.profile{text-align:center;padding:12px 22px 24px;display:flex;flex-direction:column;align-items:center}
.logo-wrap{height:94px;width:94px;padding:5px;border:1px solid #D5E5FC;border-radius:50px;background:#fff;box-shadow:0 13px 30px rgba(20,83,169,.14);margin-bottom:13px;transition:transform .35s}
.logo-wrap:hover{transform:rotate(0) scale(1.02)}
.logo-wrap img{width:100%;height:100%;display:block;object-fit:contain;border-radius:50px}
.profile-eyebrow{display:flex;align-items:center;gap:7px;color:var(--blue);font-size:11px;font-weight:800;line-height:1.8}
.eyebrow-dot{width:7px;height:7px;background:#2AAA80;border-radius:25px;box-shadow:0 0 0 3px rgba(42,170,128,.12)}
.profile h1{font-weight:900;letter-spacing:-.7px;font-size:29px;line-height:1.5;margin:1px 0 0;color:var(--ink)}
.profile-en{font-size:11px;font-weight:700;line-height:1.4;letter-spacing:3px;color:var(--blue);margin:0}
.profile-description{max-width:390px;margin:11px 0 0;color:var(--muted);font-size:12px;font-weight:600;line-height:2}
/* Image-only banner: replace images/hero-banner.webp with any banner image. */
.hero-card{position:relative;overflow:hidden;border-radius:25px;background:var(--surface);box-shadow:0 14px 34px rgba(20,83,169,.09);border:1px solid var(--line)}
.hero-banner{position:relative;overflow:hidden;background:var(--surface-2);line-height:0}
.hero-banner-image{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.hero-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 19px;background:var(--surface)}
.hero-cta p{flex:1;min-width:0;font-size:11px;line-height:1.9;color:var(--muted);font-weight:700;margin:0}
.shop-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;background:var(--blue);color:#fff;font-size:11px;font-weight:900;padding:11px 14px;border-radius:25px;box-shadow:0 7px 17px rgba(20,83,169,.15);transition:transform .22s,box-shadow .22s,background .22s;min-height:44px;white-space:nowrap}
.shop-button:hover{transform:translateY(-2px);background:var(--blue-deep);box-shadow:0 11px 20px rgba(20,83,169,.25)}
.shop-button .icon{height:16px;width:16px;stroke-width:2}.shop-button .shop-arrow{width:13px;height:13px;margin-inline-start:3px}
.quick-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.quick-row>a{display:flex;align-items:center;gap:8px;min-height:56px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:25px;box-shadow:var(--shadow);font-size:11px;font-weight:800;transition:border-color .2s,transform .2s}
.quick-row>a:hover{transform:translateY(-2px);border-color:rgba(20,83,169,.4)}
.quick-icon{width:29px;height:29px;display:grid;place-items:center;color:var(--blue);background:var(--blue-soft);border-radius:25px;flex-shrink:0}.quick-icon .icon{width:16px;height:16px;stroke-width:2}
.quick-arrow{width:13px;height:13px;margin-inline-start:auto;color:var(--muted)}
.section-heading{display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--muted);font-size:11px;font-weight:800;margin:25px 0 12px;white-space:nowrap}
.small-line{height:1px;background:var(--line);flex:1;max-width:80px}
.tab-bar{display:flex;align-items:center;gap:5px;padding:5px;border-radius:25px;background:#EAF0F7;border:1px solid #DFE7F1;margin-bottom:14px}
.tab-button{width:50%;min-height:43px;border-radius:25px;display:flex;align-items:center;justify-content:center;gap:9px;background:transparent;border:1px solid transparent;color:#62738C;font-size:12px;font-weight:800;transition:color .2s,background .2s,box-shadow .2s}
.tab-button.active{background:var(--surface);color:var(--blue);box-shadow:0 3px 10px rgba(28,54,90,.08);border-color:var(--line)}
.tab-button .icon{width:16px;height:16px;stroke-width:2}
.tab-button:hover:not(.active){color:var(--blue)}
.panel{outline-offset:6px}
.panel-subtitle{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;font-weight:700;margin:0 4px 11px;line-height:1.7}
.panel-count{direction:ltr;letter-spacing:1px;font-size:10px;color:#91A0B5;font-family:inherit}
.social-panel{display:flex;flex-direction:column;gap:10px}
.social-link{min-height:75px;display:flex;align-items:center;gap:13px;direction:inherit;background:var(--surface);border:1px solid var(--line);border-radius:25px;padding:13px 14px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.social-link:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(20,83,169,.075);border-color:#B9CFEC}
.social-icon{width:48px;height:48px;border-radius:25px;display:grid;place-items:center;flex-shrink:0}
.social-icon .icon{width:25px;height:25px;stroke-width:2}
.facebook{background:#EAF2FF;color:#1877F2}
.instagram{background:#FCEDF5;color:#C13584}
.youtube{background:#FFF0F0;color:#EA3323}
.tiktok{background:#EDF0F4;color:#101820}
.whatsapp{background:#E5F9ED;color:#16A56A}
.social-meta{display:flex;flex-direction:column;text-align:start;line-height:1.6;min-width:0}
.social-meta strong{font-size:13px;font-weight:900;color:var(--ink);font-family:inherit}
.social-meta small{font-size:11px;font-weight:600;line-height:1.7;font-family:inherit;color:var(--muted);overflow-wrap:anywhere}
.social-meta small[dir=ltr]{align-self:flex-start;font-family:inherit;letter-spacing:.15px;margin-top:3px}
.social-action{display:grid;place-items:center;width:30px;height:30px;border-radius:25px;margin-inline-start:auto;color:#8CA0BA;flex-shrink:0;border:1px solid var(--line);transition:background .2s,color .2s}
.social-action .icon{width:13px;height:13px}
.social-link:hover .social-action{background:var(--blue);border-color:var(--blue);color:#fff}
.whatsapp-link{border-color:#D0EADD;background:linear-gradient(120deg,#FFFFFF,#F6FFFA)}
.branch-panel{display:flex;flex-direction:column;gap:12px}
.branch-card{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:25px;box-shadow:var(--shadow);transition:border-color .2s,transform .2s}
.branch-card:hover{border-color:#BAD0EB;transform:translateY(-2px)}
.branch-top{display:flex;align-items:center;justify-content:space-between;gap:10px;direction:ltr}
.branch-number{display:inline-flex;align-items:center;gap:7px;color:#91A0B2;font-size:10px;font-weight:800;line-height:1.4;letter-spacing:1.25px;direction:ltr}
.branch-number-line{display:inline-block;background:var(--line);height:1px;width:17px}
.branch-city-badge{font-size:10px;font-weight:800;color:var(--blue);background:var(--blue-soft);padding:4px 10px;border-radius:25px}
.branch-card h4{font-size:17px;font-weight:900;letter-spacing:-.3px;line-height:1.7;margin:8px 0 7px}
.branch-info{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:12px;line-height:2;margin:0 0 15px;min-height:26px}
.branch-info .icon{width:16px;height:16px;flex-shrink:0;color:var(--blue);margin-top:4px}
.branch-hours{border:1px solid var(--line);background:var(--surface-2);border-radius:25px;padding:11px 12px;display:flex;align-items:flex-start;gap:10px}
.branch-hours>.icon{width:17px;height:17px;flex-shrink:0;color:var(--blue);margin-top:6px}
.branch-hours span{display:flex;flex-direction:column;gap:2px}
.branch-hours small{color:var(--muted);font-size:10px;font-weight:600}
.branch-hours strong{font-size:11px;font-weight:900;color:var(--ink);line-height:1.7}
.branch-actions{display:grid;grid-template-columns:1.3fr 1fr 43px;gap:8px;margin-top:13px}
.branch-actions a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:43px;border-radius:25px;font-size:11px;font-weight:900;transition:transform .2s,opacity .2s,background .2s}
.branch-actions a:hover{transform:translateY(-2px)}
.branch-actions .icon{width:16px;height:16px;stroke-width:2}
.branch-map{background:var(--blue);color:#fff}
.branch-map:hover{background:var(--blue-deep)}
.branch-wa{background:#EBF9F1;color:#13784F;border:1px solid #D6F0E2}
.branch-wa:hover{background:#D5F5E3}
.branch-phone{border:1px solid var(--line);color:var(--blue);background:var(--surface-2)}
.branch-phone:hover{background:var(--blue-soft)}
.support-note{display:flex;align-items:center;justify-content:center;gap:7px;color:#75859B;font-size:10px;font-weight:700;text-align:center;margin:22px 0 14px}.support-note .icon{color:#219968;width:16px;height:16px}
.footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;border-top:1px solid var(--line);padding-top:17px;color:var(--muted);font-size:11px;font-weight:700;line-height:1.8;font-family:inherit}
.footer-credit{display:flex;align-items:center;gap:5px}
.footer a{font-size:12px;font-weight:900;line-height:1.5;font-family:inherit;color:var(--blue);direction:ltr;letter-spacing:.2px}
.footer a:hover{text-decoration:underline;text-underline-offset:3px}
html.dark{--bg:#0D1524;--surface:#172238;--surface-2:#1B2941;--ink:#F2F6FC;--muted:#A4B2C9;--line:#2B3B52;--blue-soft:#1D3960;--shadow:0 12px 36px rgba(0,0,0,.08);--focus:#69B8FF; color-scheme:dark}
html.dark .hotline-details strong,html.dark .lang-button .translation-icon{color:#AACDFB}
html.dark .logo-wrap{background:#15294D;border-color:#375987}
html.dark .icon-button{background:#172238}
html.dark .theme-moon{display:none}
html.dark .theme-sun{display:block;color:#E9BD6F}
html.dark .tab-bar{background:#111D2E;border-color:var(--line)}
html.dark .tab-button.active{color:#9BC7FF}
html.dark .quick-icon{color:#9BC7FF}
html.dark .branch-city-badge{color:#AACDFB}
html.dark .branch-info .icon,html.dark .branch-hours>.icon{color:#86B9FB}
html.dark .branch-map{background:#2565B6;color:#fff}
html.dark .branch-phone{color:#AACDFB}
html.dark .whatsapp-link{background:linear-gradient(120deg,#172238,#163128);border-color:#2D5946}
html.dark .branch-wa{background:#173C30;color:#9EF0C0;border-color:#275841}
html.dark .branch-wa:hover{background:#1E513D}
html.dark .facebook{background:#243D61;color:#7AB3FF}
html.dark .instagram{background:#44243E;color:#F69BD4}
html.dark .youtube{background:#482A30;color:#FF8E85}
html.dark .tiktok{background:#293347;color:#fff}
html.dark .whatsapp{background:#184532;color:#80E9AC}
html.dark .footer a,html.dark .profile-eyebrow{color:#A0CBFF}
html.dark .social-link:hover{border-color:#4B72A3}
html[lang=en] .hero-cta p{font-size:10px;line-height:1.8}
html[lang=en] .branch-info{font-size:11px}
@media(max-width:410px){
  .page-shell{width:min(100% - 24px,520px);padding-top:13px}
  .hero-cta{padding:14px 14px;gap:12px}.hero-cta p{font-size:10px}
  .shop-button{font-size:10px;padding:10px 11px;gap:6px}.shop-button .shop-arrow{margin-inline-start:0}
  .quick-row>a{padding:9px 12px;font-size:11px;gap:8px}.quick-icon{width:29px;height:29px}
  .branch-card{padding:16px}.branch-actions{grid-template-columns:1.15fr 1fr 41px;gap:6px}.social-link{padding:11px 12px}
}
@media(max-width:345px){
  .hotline-button{padding-right:8px;gap:7px}.hotline-details>span{font-size:9px}.hotline-details strong{font-size:13px}
  .hero-cta{align-items:stretch;flex-direction:column;gap:9px}.hero-cta p{font-size:11px}
  .shop-button{width:100%}.branch-actions a{font-size:10px}.branch-info{font-size:11px}
}
@media(min-width:880px){.page-shell{padding-top:29px}.profile{padding-top:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
::selection{background:#A4CEFF;color:#09234B}

@media(max-width:410px){html[lang=en] .hero-cta p{font-size:10px}}

html[dir="rtl"] .quick-arrow,
html[dir="rtl"] .shop-arrow,
html[dir="rtl"] .social-action .icon {
    transform: scaleX(1);
}

html[dir="ltr"] .quick-arrow,
html[dir="ltr"] .shop-arrow,
html[dir="ltr"] .social-action .icon {
    transform: scaleX(-1);
}