@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  --blue:#1877f2;
  --blue-dark:#0f2f5f;
  --orange:#FFB000;
  --text:#334155;
  --muted:#64748b;
  --light:#f6f9fc;
  --line:#dbe7f3;
  --white:#ffffff;
  --shadow:0 12px 30px rgba(15, 35, 66, .08);
  --radius:18px;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial, Helvetica, sans-serif;color:var(--text);background:radial-gradient(circle at 4% 0%,rgba(24,119,242,.10),transparent 28%),radial-gradient(circle at 100% 2%,rgba(255,176,0,.13),transparent 28%),var(--white);line-height:1.65}
body.no-scroll{overflow:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(100% - 32px,var(--max));margin:auto}
.narrow{width:min(100% - 32px,820px);margin:auto}
.topbar{background:var(--blue);color:#ffffff;font-size:.9rem}
.topbar .container{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(219,231,243,.82)}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:64px}
.brand strong{display:block;color:var(--blue-dark);font-size:1rem}
.brand small{display:block;color:#2f87c7;font-weight:700;font-size:.78rem}
.menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:10px 13px;border-radius:999px;color:var(--blue-dark);font-weight:700;font-size:.95rem;transition:color 0.2s, background 0.2s;text-decoration:none}
.menu a:hover,.menu a.active{background:#eaf2ff;color:var(--blue);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.menu a.cta{background:var(--orange);color:var(--blue-dark);text-decoration:none}
.menu a.cta:hover{text-decoration:none}

/* Dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a::after {
  content: " ▾";
  font-size: 0.8em;
}
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(10,20,40,0.12);
  min-width: 140px;
  z-index: 100;
  list-style: none;
  margin: 4px 0 0 0;
}
/* Invisible bridge to prevent hover loss */
.dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.has-dropdown:hover .dropdown {
  display: flex;
  flex-direction: column;
  animation: dropdownFadeIn 0.2s ease forwards;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.dropdown a {
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: 8px;
}

.nav-toggle{display:none;border:0;background:#f2f7fc;border-radius:10px;width:44px;height:44px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--blue-dark);margin:5px auto;border-radius:4px}
.hero{background:radial-gradient(circle at 12% 15%,rgba(255,176,0,.20),transparent 25%),radial-gradient(circle at 85% 15%,rgba(47,135,199,.20),transparent 27%),linear-gradient(180deg,#ffffff 0%,#eef8ff 100%);padding:52px 0 56px}
.hero-grid,.split,.contact-grid,.cta-grid{display:grid;gap:46px;align-items:center}
.hero-grid,.split{grid-template-columns:1.05fr .95fr}
.contact-grid{grid-template-columns:.9fr 1.1fr;align-items:start}
.cta-grid{grid-template-columns:1fr auto}
.kicker{display:inline-block;color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;margin-bottom:10px}
h1,h2,h3{color:var(--blue-dark);line-height:1.18;margin:0 0 14px}
h1{font-size:clamp(2.2rem,4.8vw,4rem)}
h2{font-size:clamp(1.8rem,3vw,2.7rem)}
h3{font-size:1.16rem}
p{margin:0 0 14px}
.lead{font-size:1.08rem;color:var(--muted)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 20px;border-radius:999px;font-weight:800;border:0;cursor:pointer}
.btn-primary{background:var(--blue);color:#fff}
.btn-secondary{background:#fff;color:var(--blue-dark);border:1px solid var(--line)}
.btn-orange{background:var(--orange);color:var(--blue-dark)}
.hero-img,.image-card{border-radius:24px;box-shadow:var(--shadow);overflow:hidden;display:flex;height:360px}
.hero-img img,.image-card img{width:100%;height:100%;object-fit:cover;display:block}
.split .image-card{height:360px}
.section{padding:78px 0}
.section-light{background:#f5f8ff}
.section-heading{text-align:center;max-width:760px;margin:0 auto 38px}
.grid-3,.grid-4,.grid-2{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card,.service-detail,.contact-form,.info-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.card-icon{width:48px;height:48px;border-radius:14px;background:#eaf2ff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto 15px;transition:background .3s ease,color .3s ease;overflow:hidden}
.card-icon img[data-cms-src]{width:100%;height:100%;object-fit:contain;border-radius:8px}
.card-icon img[data-cms-src][src=""]{display:none}
.coverage-icon{width:64px;height:64px;border-radius:16px;padding:4px}
.card{text-align:center;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.card:hover{border-color:#bfd9f5;transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.09);}
.card:hover .card-icon{background:var(--blue);color:#fff;}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat strong{display:block;color:var(--blue-dark);font-size:1.1rem}
.stat span{display:block;color:var(--muted);font-size:.92rem}
.check-list{list-style:none;padding:0;margin:16px 0 0}
.check-list li{position:relative;padding-left:28px;margin:9px 0}
.check-list li:before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:#eaf2ff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem}
.service-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media(max-width:1000px){ .service-list{grid-template-columns:repeat(2, 1fr);} }
@media(max-width:600px){ .service-list{grid-template-columns:1fr;} }

.service-detail{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  scroll-margin-top:110px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-detail:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.08);
  border-color: #bfd9f5;
}
.service-detail:hover .number{
  background: var(--blue);
  color: #fff;
}
.service-detail h2{
  font-size:1.15rem;
  margin:0;
  line-height:1.3;
}
.service-detail p{
  font-size:0.85rem;
  line-height:1.5;
  color:var(--muted);
  margin-bottom:4px;
}
.service-detail .check-list{
  text-align:left;
  width:100%;
  margin-top:auto; /* Push check-list to bottom */
}
.service-detail .check-list li{
  font-size:0.82rem;
  margin:6px 0;
}
.number{
  width:44px;
  height:44px;
  border-radius:12px;
  background:#eaf2ff;
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  margin-bottom:4px;
  transition: background 0.3s ease, color 0.3s ease;
}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pills span{background:#eaf2ff;border:1px solid #d6e7ff;border-radius:999px;padding:8px 12px;color:var(--blue-dark);font-weight:700;font-size:.9rem}
.cta-section{background:var(--blue);color:#fff}
.cta-section h2,.cta-section p{color:#fff}
.contact-form label{display:block;font-weight:700;color:var(--blue-dark);margin-bottom:14px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:46px;outline:none}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,124,235,.12)}
.info-list{display:grid;gap:12px;margin-top:20px}
.info-list div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.info-list span{display:block;color:var(--muted);font-size:.86rem}
.info-list strong{display:block;color:var(--blue-dark)}
.footer{background:#0f2f5f;color:#dbeafe;padding:58px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.35fr .8fr .9fr 1fr;gap:30px}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.footer-brand img{width:58px}
.footer-brand strong{display:block;color:#fff}
.footer-brand small{display:block;color:#FFB000}
.footer h4{color:#fff;margin:0 0 12px}
.footer a,.footer button{display:block;margin:7px 0;color:#dbeafe;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:18px;display:flex;justify-content:space-between;gap:12px;color:#b7c8dc;font-size:.9rem}
.reveal{opacity:0;transform:translateY(18px);transition:.65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.cookie-banner{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:90}
.reveal{opacity:0;transform:translateY(18px);transition:.65s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.cookie-banner{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:90}
.cookie-banner.show{display:block}
.cookie-card{max-width:1040px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.18);padding:20px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.cookie-card h3{margin:0 0 5px}
.cookie-card p{color:var(--muted);font-size:.94rem}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-modal{display:none;position:fixed;inset:0;background:rgba(15,39,69,.55);z-index:100;align-items:center;justify-content:center;padding:18px}
.cookie-modal.show{display:flex}
.cookie-dialog{background:#fff;border-radius:20px;max-width:720px;width:100%;max-height:92vh;overflow:auto}
.cookie-header,.cookie-footer{padding:22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px}
.cookie-footer{border-top:1px solid var(--line);border-bottom:0;justify-content:flex-end;flex-wrap:wrap}
.cookie-body{padding:22px}
.cookie-close{border:0;background:#eaf2ff;border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:1.3rem}
.cookie-option{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.cookie-option p{color:var(--muted);font-size:.93rem}
.switch{position:relative;width:52px;height:30px;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;cursor:pointer}
.slider:before{content:"";position:absolute;width:22px;height:22px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--blue)}
.switch input:checked + .slider:before{transform:translateX(22px)}
@media(max-width:1000px){.hero-grid,.split,.contact-grid,.cta-grid{grid-template-columns:1fr}.grid-3,.grid-4,.footer-grid{grid-template-columns:repeat(2,1fr)}.topbar-branches{display:none}}
@media(max-width:780px){.topbar .container{justify-content:center;text-align:center}.hide-mobile,.topbar-branches{display:none}.nav-toggle{display:block}.menu{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.menu.show{display:flex}.menu a{text-align:center}
.dropdown { position: static; transform: none; box-shadow: none; border: none; background: transparent; display: none; padding-top: 0; padding-bottom: 0; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: flex; align-items: stretch; }
.has-dropdown > a::after { content: " ▾"; }.stats,.grid-2,.grid-3,.grid-4,.footer-grid,.footer-bottom,.cookie-card{grid-template-columns:1fr;display:grid}.service-detail{grid-template-columns:1fr}.section{padding:60px 0}.hero{padding:44px 0 50px}.cookie-option{grid-template-columns:1fr}}

/* Clean white blocks with only outer shadows */
.hero-img,.image-card{
  background:#ffffff;
  box-shadow:var(--shadow);
}

/* Slightly richer content sections */
.intro-text{
  max-width:880px;
  margin:0 auto 34px;
  text-align:center;
}
.intro-text p{
  color:var(--muted);
  font-size:1.04rem;
}
.quick-info{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
.quick-info h3{
  margin-bottom:8px;
}
.timeline{
  display:grid;
  gap:16px;
  position:relative;
}
.timeline-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  display:grid;
  grid-template-columns:90px 1fr;
  gap:18px;
  align-items:start;
}
.timeline-year{
  background:#eaf2ff;
  color:var(--blue);
  border-radius:999px;
  padding:8px 12px;
  text-align:center;
  font-weight:800;
}
.service-tabs{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.tab-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}
.tab-button{
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--blue-dark);
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.tab-button.active{
  background:var(--blue);
  color:#ffffff;
  border-color:var(--blue);
}
.tab-panel{
  display:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
.tab-panel.active{
  display:block;
}
.accordion{
  display:grid;
  gap:12px;
}
.accordion-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.accordion-trigger{
  width:100%;
  background:#ffffff;
  border:0;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  cursor:pointer;
  text-align:left;
  color:var(--blue-dark);
  font-weight:800;
}
.accordion-trigger span:last-child{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#eaf2ff;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.accordion-body{
  display:none;
  padding:0 20px 20px;
  color:var(--muted);
}
.accordion-item.open .accordion-body{
  display:block;
}
.accordion-item.open .accordion-trigger span:last-child{
  background:var(--blue);
  color:#ffffff;
}
.coverage-panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
}
.coverage-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.coverage-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--line);
  padding:10px 0;
}
.coverage-row:last-child{
  border-bottom:0;
}
.coverage-row strong{
  color:var(--blue-dark);
}
.process-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
.link-more{
  color:var(--blue);
  font-weight:800;
}
.notice-box{
  border-left:4px solid var(--orange);
  background:#fffaf0;
  padding:18px;
  border-radius:14px;
  margin-top:18px;
}
@media(max-width:780px){
  .timeline-item{grid-template-columns:1fr}
  .coverage-row{display:block}
}


/* Final refinements requested */
.hero h1{
  font-size:clamp(1.9rem,3.7vw,3.25rem);
  max-width:760px;
}
.hero .lead{
  font-size:1.02rem;
}
.brand small,
.footer-brand small{
  color:#2f87c7;
}
.menu a.cta{
  background:var(--orange);
  color:var(--blue-dark);
}


/* Homepage hero right column and slider */
.hero-right{
  display:grid;
  gap:16px;
}
.stats-under-image{
  margin-top:0;
  grid-template-columns:repeat(3,1fr);
}
.stats-under-image .stat{
  padding:14px;
}
.stats-under-image .stat strong{
  font-size:.98rem;
}
.stats-under-image .stat span{
  font-size:.84rem;
}
.home-slider-section{
  padding:34px 0 18px;
  background:#ffffff;
}
.home-slider{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}
.slider-track{
  position:relative;
  min-height:230px;
}
.slider-slide{
  display:none;
  grid-template-columns:1.25fr .75fr;
  gap:26px;
  align-items:center;
}
.slider-slide.active{
  display:grid;
}
.slider-slide h2{
  font-size:clamp(1.55rem,2.5vw,2.25rem);
}
.slider-slide p{
  color:var(--muted);
  max-width:700px;
}
.slider-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
.slider-card strong{
  display:block;
  color:var(--blue-dark);
  font-size:1.3rem;
  margin-bottom:8px;
}
.slider-card span{
  display:block;
  color:var(--muted);
}
.slider-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding-top:18px;
  border-top:1px solid var(--line);
  margin-top:18px;
}
.slider-btn{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--blue-dark);
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
}
.slider-btn:hover{
  background:#eaf2ff;
}
.slider-dots{
  display:flex;
  align-items:center;
  gap:8px;
}
.slider-dots button{
  width:10px;
  height:10px;
  border-radius:50%;
  border:0;
  background:#c8d7e8;
  cursor:pointer;
}
.slider-dots button.active{
  background:var(--blue);
}
@media(max-width:1000px){
  .slider-slide{
    grid-template-columns:1fr;
  }
}
@media(max-width:780px){
  .stats-under-image{
    grid-template-columns:1fr;
  }
  .home-slider{
    padding:20px;
  }
  .slider-track{
    min-height:330px;
  }
}


/* Revolution-style homepage slider */
.rev-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 15%,rgba(255,176,0,.20),transparent 25%),
    radial-gradient(circle at 85% 15%,rgba(47,135,199,.20),transparent 27%),
    linear-gradient(180deg,#ffffff 0%,#eef8ff 100%);
  border-bottom:1px solid var(--line);
}
.rev-slides{
  position:relative;
}
.rev-slide{
  display:none;
  min-height:470px;
  padding:48px 0 44px;
}
.rev-slide.active{
  display:block;
}
.rev-grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:42px;
  align-items:center;
}
.rev-content{
  animation:revTextIn .65s ease both;
}
.rev-content h1{
  font-size:clamp(1.95rem,3.6vw,3.3rem);
  max-width:780px;
}
.rev-content .lead{
  font-size:1.03rem;
}
.rev-visual{
  display:grid;
  gap:16px;
  animation:revVisualIn .7s ease both;
}
.rev-feature-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}
.rev-feature-card .check-list{
  margin-top:14px;
}
.rev-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.88);
  color:var(--blue-dark);
  box-shadow:var(--shadow);
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  z-index:5;
}
.rev-arrow:hover{
  background:#ffffff;
  color:var(--blue);
}
.rev-prev{
  left:18px;
}
.rev-next{
  right:18px;
}
.rev-bottom{
  position:relative;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:0 0 20px;
}
.rev-dots{
  display:flex;
  gap:9px;
  align-items:center;
}
.rev-dots button{
  width:11px;
  height:11px;
  border-radius:50%;
  border:0;
  background:#b7c8dc;
  cursor:pointer;
}
.rev-dots button.active{
  background:var(--blue);
}
.rev-progress{
  width:min(220px,40vw);
  height:4px;
  background:rgba(18,50,92,.16);
  border-radius:999px;
  overflow:hidden;
}
.rev-progress span{
  display:block;
  height:100%;
  width:0;
  background:var(--orange);
  border-radius:999px;
}
.rev-slide.active ~ .rev-bottom .rev-progress span{
  animation:none;
}
.stats-under-image{
  margin-top:0;
  grid-template-columns:repeat(3,1fr);
}
.stats-under-image .stat{
  padding:14px;
}
.stats-under-image .stat strong{
  font-size:.98rem;
}
.stats-under-image .stat span{
  font-size:.84rem;
}
@keyframes revTextIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes revVisualIn{
  from{opacity:0;transform:translateX(18px)}
  to{opacity:1;transform:translateX(0)}
}

/* Ensure images inside the hero card fit nicely */
.hero-img img, .image-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
}
@media(max-width:1120px){
  .rev-arrow{
    display:none;
  }
}
@media(max-width:1000px){
  .rev-grid{
    grid-template-columns:1fr;
  }
  .rev-slide{
    min-height:auto;
    padding:42px 0 36px;
  }
}
@media(max-width:780px){
  .stats-under-image{
    grid-template-columns:1fr;
  }
  .rev-bottom{
    flex-direction:column;
  }
}


/* Ecommerce upgrade */
.cart-badge{
  display:inline-flex;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--orange);
  color:var(--blue-dark);
  align-items:center;
  justify-content:center;
  font-size:.74rem;
  font-weight:900;
  margin-left:4px;
}
.shop-toolbar{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  margin-bottom:28px;
}
.shop-filters{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.shop-filters input,
.shop-filters select{
  min-height:46px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
  background:#fff;
  min-width:220px;
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
}
.jumia-card{
  background:#fff;
  border-radius:12px;
  padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  border:1px solid var(--line);
  cursor:pointer;
}
.jumia-card:hover{
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  border-color:#bfd9f5;
  transform:translateY(-4px);
}

/* Image wrap with hover overlay */
.jumia-img-wrap{
  position:relative;
  overflow:hidden;
}
.jumia-img-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(15,47,95,.45);
  opacity:0;
  transition:opacity .25s ease;
}
.jumia-card:hover .jumia-img-wrap::after{
  opacity:1;
}
.pd-view-hint{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  background:rgba(255,255,255,.95);
  color:var(--blue-dark);
  font-size:.78rem;
  font-weight:800;
  padding:5px 14px;
  border-radius:999px;
  white-space:nowrap;
  opacity:0;
  z-index:3;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.jumia-card:hover .pd-view-hint{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ──────────────────────────────────────────
   PRODUCT DETAIL MODAL
   ────────────────────────────────────────── */
.pd-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9000;
  align-items:center;
  justify-content:center;
}
.pd-modal.open{
  display:flex;
}
.pd-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,30,60,.6);
  backdrop-filter:blur(3px);
}
.pd-sheet{
  position:relative;
  background:#ffffff;
  border-radius:20px;
  width:min(900px,96vw);
  max-height:92vh;
  overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.25);
  z-index:1;
  animation:pdSlideUp .28s ease;
}
@keyframes pdSlideUp{
  from{transform:translateY(28px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.pd-close{
  position:absolute;
  top:14px;right:14px;
  background:rgba(0,0,0,.06);
  border:0;
  border-radius:50%;
  width:36px;height:36px;
  font-size:1.3rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  transition:background .2s;
  line-height:1;
  color:var(--text);
}
.pd-close:hover{background:rgba(0,0,0,.15);}
.pd-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
}
@media(max-width:640px){
  .pd-inner{grid-template-columns:1fr;}
}
.pd-gallery{
  padding:24px;
  background:#f8fafc;
  border-radius:20px 0 0 20px;
}
.pd-slider-wrap{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  aspect-ratio:1;
  background:#f0f4f8;
}
.pd-slider{
  display:flex;
  transition:transform .3s ease;
  height:100%;
}
.pd-slide{
  min-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pd-slide img{
  width:100%;height:100%;object-fit:contain;
}
.pd-slide-placeholder{
  width:80px;height:80px;opacity:.4;
}
.pd-arrow{
  position:absolute;
  top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.92);
  border:0;border-radius:50%;
  width:36px;height:36px;
  font-size:1.4rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:background .2s;
  z-index:2;
}
.pd-arrow:hover{background:#fff;}
.pd-prev{left:8px;}
.pd-next{right:8px;}
.pd-dots{
  display:flex;gap:6px;justify-content:center;margin-top:10px;
}
.pd-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--line);border:0;cursor:pointer;padding:0;
  transition:background .2s;
}
.pd-dot.active{background:var(--blue);}
.pd-info{
  padding:28px 28px 28px 24px;
  display:flex;flex-direction:column;gap:12px;
  overflow-y:auto;
  max-height:80vh;
}
.pd-tag{
  background:#fff6d7;color:var(--blue-dark);
  font-size:.72rem;font-weight:800;
  padding:4px 10px;border-radius:4px;align-self:flex-start;
}
.pd-name{
  font-size:1.3rem;margin:0;color:var(--blue-dark);
}
.pd-price{
  font-size:1.5rem;font-weight:900;color:var(--blue-dark);
}
.pd-inquiry{color:var(--muted);font-size:1.1rem;}
.pd-stock-row{
  display:flex;align-items:center;gap:8px;
  font-size:.85rem;
}
.in-stock{color:#16a34a;font-weight:700;}
.out-stock{color:#dc2626;font-weight:700;}
.pd-desc{
  color:var(--muted);font-size:.9rem;line-height:1.6;margin:0;
}
.pd-specs-title{
  font-size:.9rem;font-weight:800;
  color:var(--blue-dark);margin:0 0 8px;
}
.pd-specs-table{
  width:100%;border-collapse:collapse;font-size:.85rem;
}
.pd-specs-table tr{border-bottom:1px solid var(--line);}
.pd-specs-table tr:last-child{border-bottom:none;}
.spec-key{
  padding:6px 10px 6px 0;
  font-weight:700;color:var(--blue-dark);
  width:42%;vertical-align:top;
}
.spec-val{
  padding:6px 0;
  color:var(--text);vertical-align:top;
}
.spec-full{
  padding:6px 0;color:var(--muted);
}
.pd-actions{
  display:flex;gap:10px;align-items:center;margin-top:auto;flex-wrap:wrap;
}
.pd-qty-wrap{
  display:flex;align-items:center;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;
}
.pd-qty-btn{
  background:#f0f4f8;border:0;
  width:34px;height:40px;
  font-size:1.2rem;cursor:pointer;
  transition:background .2s;
}
.pd-qty-btn:hover{background:#dde8f5;}
.pd-qty-input{
  width:48px;text-align:center;border:0;
  font-size:.97rem;font-weight:700;
  outline:none;height:40px;
}
.pd-add-btn{min-width:140px;flex:1;}
.pd-inquire-btn{min-width:140px;}
.jumia-img,
.jumia-img-placeholder{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  background:#f8f9fa;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid #f1f5f9;
}
.jumia-img-placeholder svg{
  width:48px;
  height:48px;
  opacity:0.6;
}
.product-top-tags{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.jumia-tag{
  background:#fff6d7;
  color:var(--blue-dark);
  font-size:.7rem;
  font-weight:800;
  padding:4px 8px;
  border-radius:4px;
  align-self:flex-start;
}
.jumia-card-body{
  padding:12px;
  flex-grow:1;
  display:flex;
  flex-direction:column;
}
.jumia-title{
  font-size:.9rem;
  color:var(--text);
  font-weight:400;
  line-height:1.4;
  margin:0 0 6px 0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  height:2.8em;
}
.jumia-price{
  font-size:1.15rem;
  color:var(--blue-dark);
  font-weight:800;
  margin-bottom:6px;
}
.jumia-stock{
  font-size:.75rem;
  color:var(--muted);
  margin-top:auto;
}
.jumia-card-action{
  padding:0 12px 12px;
}
.btn-block{
  display:block;
  width:100%;
  padding:10px;
  border-radius:4px;
  font-size:.9rem;
  text-transform:uppercase;
  font-weight:700;
  transition:background .2s;
}
}
.btn-block:hover{
  opacity:0.9;
}
.cart-alert{
  background:#eaf2ff;
  color:var(--blue-dark);
  border:1px solid #cfe0ff;
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:18px;
  font-weight:800;
}
.empty-cart{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
  text-align:center;
}
.cart-layout,
.checkout-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:24px;
  align-items:start;
}
.cart-table-wrap,
.order-summary-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.cart-table,
.admin-table{
  width:100%;
  border-collapse:collapse;
}
.cart-table th,
.cart-table td,
.admin-table th,
.admin-table td{
  border-bottom:1px solid var(--line);
  padding:12px;
  text-align:left;
  vertical-align:top;
}
.cart-table th,
.admin-table th{
  color:var(--blue-dark);
  font-size:.9rem;
}
.cart-table td span,
.admin-table small{
  display:block;
  color:var(--muted);
  font-size:.86rem;
}
.cart-table input{
  width:72px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
}
.cart-remove,
.link-danger{
  border:0;
  background:none;
  color:#c53030;
  cursor:pointer;
  font-weight:800;
}
.summary-row,
.checkout-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:12px 0;
}
.summary-row.total{
  font-size:1.12rem;
  color:var(--blue-dark);
  border-bottom:0;
}
.muted-note{
  color:var(--muted);
  font-size:.92rem;
}
.checkout-items{
  margin-bottom:12px;
}
.order-success-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin:26px auto;
  max-width:680px;
  text-align:left;
}

/* =============================================================
   ADMIN DESIGN SYSTEM — fully on-brand with the public site
   Uses the same CSS variables: --blue, --blue-dark, --orange, etc.
   ============================================================= */

/* ---- Shell & Body ---- */
body.admin-body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--light);
  color: var(--text);
}
.admin-shell {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.admin-sidebar {
  width: 256px;
  flex-shrink: 0;
  background: var(--blue-dark);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.admin-sidebar-brand {
  padding: 24px 20px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.admin-sidebar-brand img {
  width: 44px;
  border-radius: 10px;
  background: #fff;
  padding: 4px;
}
.admin-sidebar-brand strong {
  display: block;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.2;
}
.admin-sidebar-brand span {
  display: block;
  color: var(--orange);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-side-menu {
  padding: 12px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.admin-side-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: rgba(255,255,255,.70);
  font-weight: 600;
  font-size: .92rem;
  border-left: 3px solid transparent;
  transition: background .18s, color .18s, border-color .18s;
}
.admin-side-menu a span {
  font-size: 1.05rem;
  flex-shrink: 0;
}
.admin-side-menu a:hover {
  background: rgba(255,255,255,.08);
  color: #ffffff;
}
.admin-side-menu a.active {
  background: rgba(24,119,242,.22);
  color: #ffffff;
  border-left-color: var(--orange);
}
.admin-sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.admin-sidebar-footer small {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: .78rem;
}
.admin-sidebar-footer strong {
  display: block;
  color: #ffffff;
  margin-bottom: 8px;
}
.admin-logout-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(229,62,62,.15);
  color: #fc8181;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .85rem;
  transition: background .18s;
}
.admin-logout-link:hover {
  background: rgba(229,62,62,.28);
  color: #fc8181;
}

/* ---- Content area ---- */
.admin-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #f0f4f9;
}

/* ---- Top bar ---- */
.admin-topbar {
  background: #ffffff;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 2px 8px rgba(15,47,95,.06);
}
.admin-topbar .kicker {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}
.admin-topbar h1 {
  margin: 0;
  font-size: 1.45rem;
  color: var(--blue-dark);
  line-height: 1.2;
}
.admin-top-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.admin-menu-toggle {
  display: none;
  background: var(--light);
  border: 1px solid var(--line);
  color: var(--blue-dark);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 900;
  transition: background .18s;
}
.admin-menu-toggle:hover {
  background: #eaf2ff;
}

/* ---- Main scrolling area ---- */
.admin-main {
  padding: 28px 28px 60px;
  flex: 1;
}

/* ---- Page title row ---- */
.admin-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.admin-title h1 {
  margin: 0;
  font-size: 1.65rem;
  color: var(--blue-dark);
}
.admin-title .kicker {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.admin-title-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.compact-admin-title {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

/* ---- Stat cards ---- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(15,47,95,.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s;
}
.stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  border-radius: 3px 3px 0 0;
}
.stat:hover {
  box-shadow: 0 8px 28px rgba(15,47,95,.12);
}
.stat strong {
  display: block;
  font-size: 1.65rem;
  font-weight: 900;
  color: var(--blue-dark);
  line-height: 1;
}
.stat span {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---- Panel / card container ---- */
.admin-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(15,47,95,.06);
  margin-bottom: 22px;
  overflow: auto;
}
.admin-panel h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--blue-dark);
}
.admin-panel > p {
  color: var(--muted);
  font-size: .9rem;
  margin: 0 0 18px;
}
.admin-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

/* ---- Tables ---- */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th,
.admin-table td {
  border-bottom: 1px solid #eaf0f8;
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}
.admin-table th {
  background: #f6f9fc;
  color: var(--blue-dark);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-table tbody tr {
  transition: background .15s;
}
.admin-table tbody tr:hover {
  background: #f0f6ff;
}
.admin-table small {
  display: block;
  color: var(--muted);
  font-size: .82rem;
}
.admin-table a {
  color: var(--blue);
  font-weight: 700;
}
.admin-table-photo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid var(--line);
}
.admin-table-initials {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eaf2ff;
  color: var(--blue);
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
}

/* ---- Order status badges ---- */
.order-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 800;
  font-size: .78rem;
  background: #eaf2ff;
  color: var(--blue-dark);
  letter-spacing: .03em;
}
.order-status[data-status="Completed"] { background: #d1fae5; color: #065f46; }
.order-status[data-status="Cancelled"] { background: #fee2e2; color: #991b1b; }
.order-status[data-status="New"]       { background: #dbeafe; color: #1e40af; }
.order-status[data-status="Processing"]{ background: #fef3c7; color: #92400e; }

/* ---- Inline forms (update status) ---- */
.inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.inline-form select,
.admin-filter select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  color: var(--text);
  font-size: .88rem;
}
.inline-form button {
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: .85rem;
  transition: background .18s;
}
.inline-form button:hover {
  background: #0f62d3;
}

/* ---- Filter row ---- */
.admin-filter {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Detail grids ---- */
.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}
.order-detail-grid p {
  margin: 0 0 8px;
  font-size: .92rem;
}
.order-detail-grid strong {
  color: var(--blue-dark);
}

/* ---- Product grid (admin edit form) ---- */
.admin-product-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 24px;
  align-items: start;
}
.admin-product-img-preview {
  border-radius: 16px;
  overflow: hidden;
  background: #f0f4f9;
  border: 1px solid var(--line);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.admin-product-img-preview img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.admin-product-img-label {
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
  padding: 10px;
}

/* ---- Forms inside admin modals & pages ---- */
.admin-product-form label,
.admin-modal-form label {
  display: block;
  font-weight: 700;
  color: var(--blue-dark);
  font-size: .88rem;
  margin-bottom: 14px;
}
.admin-product-form input,
.admin-product-form select,
.admin-product-form textarea,
.admin-modal-form input,
.admin-modal-form select,
.admin-modal-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  background: #f8fafc;
  font-size: .95rem;
  color: var(--text);
  transition: border-color .2s, background .2s;
}
.admin-product-form input:focus,
.admin-product-form select:focus,
.admin-product-form textarea:focus,
.admin-modal-form input:focus,
.admin-modal-form select:focus,
.admin-modal-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(24,119,242,.10);
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-help {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .8rem;
}
.admin-current-image {
  margin-bottom: 10px;
}
.admin-current-image img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--line);
}
.admin-current-image span {
  display: block;
  color: var(--muted);
  font-size: .8rem;
  margin-top: 4px;
}

/* ---- Modal ---- */
.admin-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.admin-modal.open {
  display: flex;
}
.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,25,50,.55);
  backdrop-filter: blur(4px);
}
.admin-modal-card {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(10,25,50,.25);
  animation: modalIn .25s ease both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.admin-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 24px 0;
  margin-bottom: 20px;
}
.admin-modal-head h2 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--blue-dark);
}
.admin-modal-head .kicker {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.admin-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f4f9;
  color: var(--blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background .18s;
}
.admin-modal-close:hover {
  background: #fee2e2;
  color: #c53030;
}
.admin-modal-form {
  padding: 0 24px 24px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ---- Buttons — admin edition ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .92rem;
  border: 0;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .12s;
  text-decoration: none;
  line-height: 1.3;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(24,119,242,.30);
}
.btn-primary:hover {
  background: #0f62d3;
  box-shadow: 0 6px 20px rgba(24,119,242,.40);
}
.btn-secondary {
  background: #f0f4f9;
  color: var(--blue-dark);
  border: 1px solid var(--line);
}
.btn-secondary:hover {
  background: #e4edf8;
}
.btn-danger {
  background: #fee2e2;
  color: #c53030;
}
.btn-danger:hover {
  background: #fecaca;
}
.link-danger {
  border: 0;
  background: none;
  color: #c53030;
  cursor: pointer;
  font-weight: 800;
  font-size: .88rem;
  padding: 4px 0;
}
.link-danger:hover { text-decoration: underline; }

/* ---- Error / success messages ---- */
.admin-error {
  background: #fee2e2;
  color: #991b1b;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: 4px solid #c53030;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: .92rem;
}
.admin-success {
  background: #d1fae5;
  color: #065f46;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: 4px solid #059669;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: .92rem;
}

/* ---- Coverage admin grid ---- */
.coverage-admin-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.coverage-admin-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(15,47,95,.06);
}
.coverage-admin-card h4 {
  margin: 0 0 6px;
  color: var(--blue-dark);
}
.coverage-admin-card p {
  color: var(--muted);
  font-size: .9rem;
  margin: 0 0 12px;
}

/* ============================================================
   LOGIN PAGE — premium split-screen, on-brand
   ============================================================ */
body.login-body {
  margin: 0;
  background: var(--blue-dark);
}
.login-shell {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 100vh;
}

/* Left showcase panel */
.login-showcase {
  background: var(--blue-dark);
  background-image:
    radial-gradient(circle at 10% 20%, rgba(24,119,242,.28) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255,176,0,.16) 0%, transparent 40%),
    url('../img/hero-clean.svg');
  background-size: cover, cover, cover;
  background-position: center, center, center right;
  background-repeat: no-repeat;
  color: #ffffff;
  padding: 100px 52px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.login-showcase::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.08);
}
.login-public-link {
  position: absolute;
  top: 28px;
  left: 52px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.60);
  font-weight: 700;
  font-size: .85rem;
  transition: color .2s;
  z-index: 2;
}
.login-public-link:hover { color: #ffffff; }
.login-showcase-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

/* Logo badge */
.login-logo-badge {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  overflow: hidden;
  padding: 10px;
}
.login-logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.login-showcase-content .kicker {
  display: block;
  color: var(--orange);
  font-weight: 800;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .10em;
  margin-bottom: 12px;
}
.login-showcase-content h1 {
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  margin: 0 0 16px;
  line-height: 1.2;
  color: #ffffff;
  font-weight: 900;
}
.login-showcase-content > p {
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* Feature list — simple clean rows, no icon boxes */
.login-feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.login-feature-list > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.login-feature-list > div:last-child {
  border-bottom: 0;
}
.login-feature-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,176,0,.20);
  border: 1px solid rgba(255,176,0,.40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--orange);
  flex-shrink: 0;
  font-weight: 900;
}
.login-feature-list strong {
  display: inline;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  margin-right: 6px;
}
.login-feature-list span {
  display: inline;
  color: rgba(255,255,255,.70);
  font-size: .95rem;
}

/* Right login panel */
.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--blue-dark);
  background-image: radial-gradient(circle at top right, rgba(24,119,242,.15) 0%, transparent 50%),
                    radial-gradient(circle at bottom left, rgba(255,176,0,.08) 0%, transparent 50%);
}
.modern-login-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 42px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 16px 50px rgba(0,0,0,.4);
}
.login-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}
.login-card-header .kicker {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.login-card-header h2 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 1.75rem;
}
.login-card-header > div > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: .88rem;
}
.login-card-header img {
  width: 48px;
  display: none;
  border-radius: 12px;
  border: 2px solid var(--line);
}
.login-field {
  display: block;
  margin-bottom: 20px;
}
.login-field > span {
  display: block;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  font-size: .86rem;
  margin-bottom: 8px;
}
.login-field input[type="text"],
.login-field input[type="password"] {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  font-size: .97rem;
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.login-field input:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 3px rgba(255,176,0,.15);
}
.password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.password-wrap input {
  padding-right: 72px !important;
}
.password-wrap button {
  position: absolute;
  right: 14px;
  background: none;
  border: 0;
  color: var(--orange);
  font-weight: 800;
  font-size: .82rem;
  cursor: pointer;
  letter-spacing: .02em;
}
.login-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.remember-box {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: .85rem;
}
.login-row a {
  color: var(--orange);
  font-weight: 700;
  font-size: .85rem;
}
.login-submit {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  font-size: 1rem;
  margin-bottom: 22px;
  justify-content: center;
  background: var(--orange);
  color: var(--blue-dark);
}
.login-submit:hover {
  background: #ffc400;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,176,0,.3);
}
.login-security-note {
  background: rgba(255, 176, 0, 0.1);
  border: 1px solid rgba(255, 176, 0, 0.3);
  border-left: 4px solid var(--orange);
  color: rgba(255, 255, 255, 0.85);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: .83rem;
  margin-bottom: 14px;
}
.login-security-note strong {
  display: block;
  margin-bottom: 4px;
  font-size: .88rem;
  color: var(--orange);
}
.login-security-note code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 700;
  font-family: monospace;
  color: #fff;
}
.login-footer-note {
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: .78rem;
}

/* ---- Secure admin access refinements ---- */
.admin-header{
  background:#0f2f5f;
  color:#fff;
  padding:14px 0;
}
.admin-nav{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
}
.admin-nav nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.admin-nav a{
  color:#fff;
  font-weight:700;
}
.admin-main{
  padding:34px 0 70px;
  background:#f6f9fc;
  min-height:100vh;
}
.admin-title{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin-bottom:24px;
}
.admin-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:24px;
}
.admin-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  margin-bottom:22px;
  overflow:auto;
}
.admin-filter{
  display:flex;
  gap:10px;
}
.admin-filter select,
.inline-form select,
.admin-product-form input,
.admin-product-form select,
.admin-product-form textarea,
.admin-login-card input{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}
.inline-form{
  display:flex;
  gap:8px;
}
.inline-form button{
  border:0;
  border-radius:10px;
  padding:9px 12px;
  background:var(--blue);
  color:#fff;
  cursor:pointer;
}
.order-status{
  display:inline-flex;
  border-radius:999px;
  padding:6px 10px;
  background:#eaf2ff;
  color:var(--blue-dark);
  font-weight:800;
  font-size:.82rem;
}
.order-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.admin-product-grid{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:22px;
  align-items:start;
}
.admin-product-img-preview{
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  background:#f6f9fc;
  border:1px solid var(--line);
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.admin-product-img-preview img{
  width:100%;
  height:220px;
  object-fit:cover;
}
.admin-product-img-label{
  font-size:.88rem;
  color:var(--muted);
  text-align:center;
  padding:10px;
}
.coverage-admin-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.coverage-admin-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.coverage-admin-card h4{
  margin:0 0 6px;
  color:var(--blue-dark);
}
.coverage-admin-card p{
  color:var(--muted);
  font-size:.9rem;
  margin:0 0 12px;
}
.branch-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#eaf2ff;
  color:var(--blue);
  border-radius:999px;
  padding:3px 10px;
  font-size:.82rem;
  font-weight:800;
}
.company-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.company-facts div{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.company-facts span{
  display:block;
  color:var(--muted);
  font-size:.88rem;
  margin-bottom:6px;
}
.company-facts strong{
  display:block;
  color:var(--blue-dark);
  font-size:1.08rem;
}
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.team-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:70px 1fr;
  gap:16px;
  align-items:start;
}
.team-avatar{
  width:64px;
  height:64px;
  border-radius:18px;
  background:#eaf2ff;
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:1.2rem;
}
.team-card h3{
  margin-bottom:4px;
}
.team-card span{
  display:block;
  color:var(--blue);
  font-weight:800;
}
.team-card small{
  display:block;
  color:var(--muted);
  margin-bottom:10px;
}
.team-card p{
  color:var(--muted);
  margin-bottom:0;
}
@media(max-width:1000px){
  .company-facts,
  .team-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:780px){
  .company-facts,
  .team-grid,
  .team-card{
    grid-template-columns:1fr;
  }
}



/* Public website branch strip and login link */
.branch-strip{
  background:#ffffff;
  border-bottom:1px solid var(--line);
  font-size:.88rem;
  color:var(--muted);
  padding:6px 0;
}
.branch-strip .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.branch-strip a{
  color:var(--blue);
  font-weight:800;
}
/* Products page */
.products-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.product-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s,box-shadow .2s;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(15,35,66,.14);
}
.product-card-img{
  width:100%;
  height:180px;
  object-fit:cover;
  background:#f6f9fc;
}
.product-card-body{
  padding:20px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.product-card-body h3{
  margin:0 0 6px;
  font-size:1.05rem;
}
.product-card-body .price{
  color:var(--blue);
  font-weight:900;
  font-size:1.1rem;
  margin-bottom:10px;
}
.product-card-body p{
  color:var(--muted);
  font-size:.9rem;
  flex:1;
  margin-bottom:14px;
}
.product-badge{
  display:inline-block;
  background:#eaf2ff;
  color:var(--blue);
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  padding:2px 10px;
  margin-bottom:10px;
}
/* Shop / Cart */
.shop-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:28px;
  align-items:start;
}
.cart-table{
  width:100%;
  border-collapse:collapse;
}
.cart-table th,
.cart-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:.94rem;
}
.cart-table th{
  background:#f6f9fc;
  color:var(--muted);
  font-weight:800;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.cart-qty-btn{
  background:#eaf2ff;
  color:var(--blue);
  border:0;
  border-radius:8px;
  width:28px;
  height:28px;
  cursor:pointer;
  font-size:1.1rem;
  font-weight:900;
}
.cart-remove{
  background:none;
  border:0;
  color:#e53e3e;
  cursor:pointer;
  font-size:1.05rem;
}
.order-summary-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  position:sticky;
  top:96px;
}
.order-summary-card h3{
  margin:0 0 18px;
}
.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:.94rem;
}
.summary-row:last-of-type{
  border-bottom:0;
  font-weight:900;
  font-size:1.05rem;
  color:var(--blue-dark);
  padding-top:12px;
}
.checkout-grid{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:28px;
  align-items:start;
}
.checkout-section{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  margin-bottom:20px;
}
.checkout-section h3{
  margin:0 0 18px;
  color:var(--blue-dark);
}
.payment-methods{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:20px;
}
.payment-method{
  border:2px solid var(--line);
  border-radius:14px;
  padding:14px 10px;
  cursor:pointer;
  text-align:center;
  transition:border-color .2s,background .2s;
}
.payment-method.active,
.payment-method:hover{
  border-color:var(--blue);
  background:#eaf2ff;
}
.payment-method img{
  height:32px;
  margin:0 auto 6px;
  object-fit:contain;
}
.payment-method span{
  display:block;
  font-size:.82rem;
  font-weight:800;
  color:var(--blue-dark);
}
.coverage-map-wrap{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.coverage-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.coverage-tab{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 18px;
  cursor:pointer;
  font-size:.9rem;
  font-weight:800;
  color:var(--muted);
  transition:background .2s,color .2s,border-color .2s;
}
.coverage-tab.active,
.coverage-tab:hover{
  background:var(--blue);
  color:#ffffff;
  border-color:var(--blue);
}
.branch-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.branch-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.branch-card h4{
  margin:0 0 6px;
  color:var(--blue-dark);
}
.branch-card p{
  color:var(--muted);
  font-size:.9rem;
  margin:0;
}
.branch-card .branch-badge{
  margin-bottom:12px;
}
/* About page sections (formerly .service-detail overrides) */
.service-about-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
}
.service-about-detail.reverse{
  direction:rtl;
}
.service-about-detail.reverse > *{
  direction:ltr;
}
.service-detail-img{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.service-detail-img img{
  width:100%;
  height:320px;
  object-fit:cover;
}
.service-detail-body h2{
  margin:0 0 14px;
}
.service-detail-body p{
  color:var(--muted);
  line-height:1.7;
}
.checklist{
  list-style:none;
  padding:0;
  margin:16px 0 0;
}
.checklist li{
  padding:6px 0 6px 26px;
  position:relative;
  color:var(--muted);
}
.checklist li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--blue);
  font-weight:900;
}
/* Contact page */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
}
.contact-info-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}
.contact-info-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:20px;
}
.contact-info-item:last-child{
  margin-bottom:0;
}
.contact-icon{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:12px;
  background:#eaf2ff;
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}
.contact-info-item h4{
  margin:0 0 3px;
  font-size:.95rem;
}
.contact-info-item p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}
.map-embed{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  margin-top:20px;
}
/* Services page */
.services-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.service-item{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow);
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.service-icon{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:14px;
  background:#eaf2ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
}
.service-item h3{
  margin:0 0 6px;
}
.service-item p{
  margin:0;
  color:var(--muted);
  font-size:.93rem;
}
@media(max-width:1000px){
  .products-grid,
  .branch-cards{
    grid-template-columns:repeat(2,1fr);
  }
  .shop-grid,
  .checkout-grid,
  .service-detail,
  .contact-grid{
    grid-template-columns:1fr;
  }
  .coverage-admin-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:780px){
  .products-grid,
  .branch-cards,
  .services-list,
  .coverage-admin-grid{
    grid-template-columns:1fr;
  }
  .payment-methods{
    grid-template-columns:repeat(2,1fr);
  }
}
/* Admin panel extended */
.admin-tabs{
  display:flex;
  gap:6px;
  border-bottom:2px solid var(--line);
  margin-bottom:24px;
  flex-wrap:wrap;
}
.admin-tab{
  padding:9px 18px;
  border:0;
  background:none;
  cursor:pointer;
  font-weight:800;
  color:var(--muted);
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  font-size:.94rem;
  transition:color .2s,border-color .2s;
}
.admin-tab.active,
.admin-tab:hover{
  color:var(--blue);
  border-bottom-color:var(--blue);
}
.tab-panel{
  display:none;
}
.tab-panel.active{
  display:block;
}
.badge-pill{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
  background:#eaf2ff;
  color:var(--blue);
}
.badge-pill.success{
  background:#d4edda;
  color:#155724;
}
.badge-pill.warning{
  background:#fff3cd;
  color:#856404;
}
.badge-pill.danger{
  background:#f8d7da;
  color:#721c24;
}
.data-table th.sortable{
  cursor:pointer;
  user-select:none;
}
.data-table th.sortable:hover{
  color:var(--blue);
}
.chart-placeholder{
  background:#f6f9fc;
  border:1px solid var(--line);
  border-radius:var(--radius);
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:.9rem;
}

































































































































































































































































































































































































































































































































































































































































































































































































  }
  .login-card-header{
    display:flex;
  }
  .login-showcase h1{
    font-size:1.8rem;
  }
}


/* Cleaner public team page */
.team-grid{
  align-items:stretch;
}
.team-card{
  grid-template-columns:1fr !important;
  text-align:center;
  padding:18px !important;
  gap:14px !important;
}
.team-photo,
.team-card .team-avatar{
  width:100% !important;
  height:260px !important;
  border-radius:22px !important;
}
.team-photo{
  object-fit:cover;
  border:0 !important;
  box-shadow:none !important;
}
.team-card .team-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.4rem;
  background:#eaf2ff;
  color:var(--blue);
}
.team-info h3,
.team-card h3{
  margin:2px 0 4px;
  font-size:1.1rem;
}
.team-info span,
.team-card span{
  font-size:.92rem;
}
.team-info small,
.team-card small{
  margin-bottom:0;
  font-size:.82rem;
}
.team-card p{
  display:none !important;
}
@media(max-width:1000px){
  .team-photo,
  .team-card .team-avatar{
    height:300px !important;
  }
}
@media(max-width:780px){
  .team-photo,
  .team-card .team-avatar{
    height:340px !important;
  }
}


/* Team page moderation and grouping */
.team-group-list{
  display:grid;
  gap:28px;
}
.team-group{
  display:grid;
  gap:14px;
}
.team-group-heading{
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
}
.team-group-heading h3{
  margin:0;
  color:var(--blue-dark);
  font-size:1.1rem;
}
.team-group-heading::after{
  content:"";
  height:3px;
  width:46px;
  border-radius:999px;
  background:var(--orange);
}
.team-card{
  grid-template-columns:1fr !important;
  text-align:center;
  padding:0 !important;
  gap:0 !important;
  overflow:hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
}
.team-photo,
.team-card .team-avatar{
  width:100% !important;
  height:240px !important;
  border-radius:0 !important;
}
.team-photo{
  object-fit:cover;
  border:0 !important;
  box-shadow:none !important;
}
.team-card .team-info{
  padding:16px 12px;
}
.team-card .team-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  background:#eaf2ff;
  color:var(--blue);
}
.team-info h3,
.team-card h3{
  margin:0 0 3px;
  font-size:1rem;
}
.team-info span,
.team-card span{
  font-size:.88rem;
}
.team-info small,
.team-card small{
  font-size:.78rem;
  margin-bottom:0;
}
.team-card p{
  display:none !important;
}
@media(max-width:1000px){
  .team-photo,
  .team-card .team-avatar{
    height:210px !important;
  }
}
@media(max-width:780px){
  .team-photo,
  .team-card .team-avatar{
    height:240px !important;
  }
}

/* Compact admin system and modal forms */
.admin-shell{
  grid-template-columns:245px 1fr !important;
}
.admin-sidebar{
  padding:16px 14px !important;
}
.admin-sidebar-brand{
  padding:6px 6px 14px !important;
  margin-bottom:12px !important;
}
.admin-sidebar-brand img{
  width:38px !important;
  height:38px !important;
  border-radius:11px !important;
}
.admin-sidebar-brand strong{
  font-size:.98rem !important;
}
.admin-sidebar-brand span,
.admin-sidebar-footer small{
  font-size:.74rem !important;
}
/* Admin responsive */
@media(max-width:1100px){
  .admin-shell{
    flex-direction: column;
  }
  .admin-sidebar{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    width: 280px;
    box-shadow: 0 0 50px rgba(0,0,0,0.2);
  }
  .admin-sidebar.open{
    display: flex;
  }
  .admin-menu-toggle{
    display: block;
  }
  .admin-topbar{
    padding: 16px 20px;
  }
  .admin-main{
    padding: 20px;
  }
}
@media(max-width:900px){
  .admin-stats{
    grid-template-columns:repeat(2,1fr);
  }
  .admin-product-grid{
    grid-template-columns:1fr;
  }
  .order-detail-grid{
    grid-template-columns:1fr;
  }
  .coverage-admin-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .login-shell {
    grid-template-columns: 1fr;
  }
  .login-showcase {
    display: none;
  }
  .login-panel {
    padding: 20px;
  }
  .login-card-header img {
    display: block;
  }
}
@media(max-width:600px){
  .admin-stats{
    grid-template-columns:1fr;
  }
  .admin-table th,
  .admin-table td,
  .data-table th,
  .data-table td{
    padding:14px !important;
  }
  .form-grid-2{
    grid-template-columns:1fr;
  }
  .admin-modal-card{
    width:100%;
  }
}


/* =========================================================
   Refined public typography and homepage slider — Sep 2026
   ========================================================= */
:root{
  --font-body:"Manrope","Segoe UI",Arial,sans-serif;
  --font-heading:"Plus Jakarta Sans","Manrope","Segoe UI",Arial,sans-serif;
}
body{
  font-family:var(--font-body);
  font-size:15px;
}
h1,h2,h3,h4,h5,h6,
.rev-content h1,
.section-heading h2{
  font-family:var(--font-heading);
  letter-spacing:-.025em;
}
.kicker{
  font-size:.94rem !important;
  line-height:1.25;
  letter-spacing:.07em;
  font-weight:800;
  margin-bottom:9px;
}
h1{
  font-size:clamp(1.85rem,3.15vw,2.8rem);
  line-height:1.12;
}
h2{
  font-size:clamp(1.48rem,2.35vw,2.08rem);
  line-height:1.16;
}
h3{
  font-size:1.06rem;
}
.hero h1{
  font-size:clamp(1.75rem,2.8vw,2.48rem);
  line-height:1.12;
}
.section-heading{
  max-width:720px;
  margin-bottom:30px;
}
.section-heading h2{
  font-size:clamp(1.48rem,2.25vw,2rem);
  line-height:1.18;
}
.section-heading p,
.lead{
  font-size:.98rem;
}

/* More balanced, polished homepage slider */
.rev-hero{
  background:
    radial-gradient(circle at 88% 12%,rgba(24,119,242,.10),transparent 29%),
    radial-gradient(circle at 8% 90%,rgba(255,176,0,.10),transparent 27%),
    #f8fbff;
}
.rev-slide{
  min-height:430px;
  padding:38px 0 34px;
}
.rev-grid{
  grid-template-columns:.94fr 1.06fr;
  gap:38px;
}
.rev-content{
  max-width:640px;
}
.rev-content .kicker{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border:1px solid rgba(24,119,242,.16);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 4px 14px rgba(15,47,95,.05);
  margin-bottom:14px;
}
.rev-slide[data-slide-theme="orange"] .rev-content .kicker{
  color:#a65b00;
  border-color:rgba(255,176,0,.24);
  background:rgba(255,248,225,.92);
}
.rev-content h1{
  font-size:clamp(1.78rem,2.75vw,2.48rem) !important;
  line-height:1.10;
  font-weight:800;
  max-width:650px;
  margin-bottom:14px;
  text-wrap:balance;
}
.rev-content .lead{
  font-size:.98rem;
  line-height:1.7;
  max-width:625px;
}
.rev-content .actions{
  margin-top:20px;
}
.rev-visual{
  gap:12px;
}
.rev-visual .hero-img{
  height:330px;
  border-radius:24px;
  border:1px solid rgba(24,119,242,.10);
  background:#ffffff;
  box-shadow:0 18px 48px rgba(15,47,95,.14);
  overflow:hidden;
}
.rev-visual .hero-img img{
  width:100%;
  height:100% !important;
  max-height:none !important;
  object-fit:cover;
  border-radius:0;
}
.rev-arrow{
  width:40px;
  height:40px;
  font-size:1.65rem;
  box-shadow:0 8px 24px rgba(15,47,95,.12);
}
.rev-bottom{
  padding:0 0 16px;
}
.stats-under-image{
  gap:10px;
}
.stats-under-image .stat{
  padding:11px 12px;
}
.stats-under-image .stat strong{
  font-size:.9rem;
}
.stats-under-image .stat span{
  font-size:.76rem;
  line-height:1.35;
}
.product-page-filters{
  justify-content:flex-end;
  margin:0 0 18px;
}
.product-page-filters input,
.product-page-filters select{
  min-height:42px;
}
.db-live-note{
  color:var(--muted);
  font-size:.84rem;
}
@media(max-width:1000px){
  .rev-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .rev-content{
    max-width:760px;
  }
  .rev-visual .hero-img{
    height:310px;
  }
}
@media(max-width:640px){
  .kicker{
    font-size:.86rem !important;
  }
  .rev-slide{
    padding:30px 0 26px;
  }
  .rev-content h1{
    font-size:clamp(1.65rem,7vw,2.08rem) !important;
  }
  .rev-content .lead{
    font-size:.92rem;
    line-height:1.6;
  }
  .rev-visual .hero-img{
    height:240px;
  }
  .section-heading h2,
  h2{
    font-size:1.55rem;
  }
}