/*
Theme Name: OxyRiver Exact Reference
Author: OxyRiver
Description: Responsive OxyRiver website with mobile menu, polished sections and editable content.
Version: 4.0.0
*/

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#17385f;font-family:Inter,Arial,Helvetica,sans-serif}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.oxy-site{width:100%;overflow:hidden}

/* Hero: original supplied artwork is used on desktop without altering its proportions. */
.oxy-hero{
  position:relative;width:100%;aspect-ratio:1536/530;
  background:url("assets/images/reference-hero.png") center top/100% 100% no-repeat;
}
.oxy-desktop-hit{position:absolute;z-index:5;display:block;height:8%;border-bottom:2px solid transparent;transition:.2s ease}
.oxy-desktop-hit:hover,.oxy-desktop-hit:focus-visible{border-bottom-color:#1457b8;outline:none}
.oxy-h-home{left:33.5%;top:7%;width:5%}
.oxy-h-about{left:40.7%;top:7%;width:6.8%}
.oxy-h-process{left:48.4%;top:7%;width:8%}
.oxy-h-products{left:57.8%;top:7%;width:6.8%}
.oxy-h-quality{left:66%;top:7%;width:6%}
.oxy-h-contact{left:72.7%;top:7%;width:7.3%}
.oxy-h-touch{right:5.5%;top:5.2%;width:11.5%;height:8.5%;border:0}
.oxy-h-explore{left:5.5%;top:82%;width:15%;height:12%;border:0}

.oxy-mobile-topbar,.oxy-mobile-menu{display:none}

/* Product artwork remains the supplied image; the new slogan is an integrated section heading. */
.oxy-products{background:#fff}
.oxy-products-intro{padding:74px 24px 40px}
.oxy-section-intro{text-align:center;max-width:900px;margin:0 auto}
.oxy-kicker{display:block;text-transform:uppercase;letter-spacing:2.5px;font-size:12px;font-weight:800;color:#3c89bd;margin-bottom:12px}
.oxy-section-intro h1,.oxy-section-intro h2{margin:0;color:#123f78;letter-spacing:-.8px;font-weight:800;line-height:1.12}
.oxy-section-intro h1{font-size:42px}
.oxy-section-intro h2{font-size:42px}
.oxy-section-intro p{font-size:17px;line-height:1.7;color:#63758a;margin:16px auto 0;max-width:760px}
.oxy-product-art{
  position:relative;width:100%;aspect-ratio:1536/494;
  background:url("assets/images/reference-products.png") center top/100% 100% no-repeat;
}
.oxy-product-link{position:absolute;z-index:3;display:block}
.oxy-product-link:hover{outline:2px solid rgba(21,91,170,.22);outline-offset:4px;border-radius:12px}
.p1{left:8%;top:18%;width:17%;height:68%}.p2{left:27%;top:18%;width:20%;height:68%}.p3{left:49%;top:18%;width:20%;height:68%}.p4{left:72%;top:18%;width:20%;height:68%}

/* Shared section system */
.oxy-section{padding:96px 24px;position:relative}
.oxy-container{max-width:1180px;margin:0 auto}
.oxy-section-intro{margin-bottom:48px}
.oxy-section-intro h2{font-size:44px}
.oxy-section-intro:after{content:"";display:block;width:58px;height:3px;background:#2186c1;border-radius:4px;margin:19px auto 0}

/* Process */
.oxy-process{background:linear-gradient(145deg,#f2f9fe,#fff)}
.oxy-process-copy{max-width:1000px;margin:0 auto 48px;padding:30px 36px;background:#fff;border:1px solid #dceaf4;border-left:4px solid #2186c1;border-radius:16px;box-shadow:0 14px 36px rgba(19,62,102,.08)}
.oxy-process-copy p{margin:0;color:#50657a;font-size:17px;line-height:1.85}
.oxy-step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.oxy-step{background:#fff;border:1px solid #dfeaf3;border-radius:18px;padding:30px 24px;box-shadow:0 12px 30px rgba(18,57,96,.07);transition:transform .25s,box-shadow .25s}
.oxy-step:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(18,57,96,.12)}
.oxy-step span{font-size:13px;font-weight:900;color:#2489c4;letter-spacing:1.5px}
.oxy-step h3{margin:13px 0 9px;font-size:24px;color:#123f78}
.oxy-step p{margin:0;color:#65778a;line-height:1.65}

/* Quality */
.oxy-quality{background:#fff}
.oxy-quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.oxy-info-card{padding:34px 30px;min-height:270px;border:1px solid #dce8f2;border-radius:20px;background:linear-gradient(180deg,#fff,#f7fbfe);box-shadow:0 14px 36px rgba(18,57,96,.07)}
.oxy-card-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#e9f6fd;color:#137bb8;font-weight:900;font-size:20px;margin-bottom:20px}
.oxy-info-card h3{margin:0 0 13px;font-size:23px;color:#123f78}
.oxy-info-card p{color:#5e7185;line-height:1.65;margin:8px 0}
.oxy-info-card strong{color:#17385f}

/* About */
.oxy-about{background:linear-gradient(145deg,#f4faff,#fff)}
.oxy-about-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:stretch}
.oxy-about-copy{background:#fff;border-radius:22px;border:1px solid #deebf4;padding:38px 42px;box-shadow:0 15px 38px rgba(18,57,96,.07)}
.oxy-about-copy p{font-size:17px;line-height:1.85;color:#566b7f;margin:0 0 18px}
.oxy-about-copy p:last-child{margin-bottom:0}
.oxy-mission{font-size:20px!important;color:#123f78!important;padding:17px 0;border-top:1px solid #e5eef5;border-bottom:1px solid #e5eef5}
.oxy-feature-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.oxy-feature-list div{background:#123f78;color:#fff;border-radius:18px;padding:25px 22px;display:flex;flex-direction:column;gap:15px;justify-content:center;min-height:145px}
.oxy-feature-list span{font-size:12px;opacity:.7;letter-spacing:1.5px}
.oxy-feature-list strong{font-size:17px;line-height:1.35}

/* Reviews */
.oxy-reviews{background:#fff}
.oxy-review-stage{
  position:relative;
  overflow:hidden;
  padding:10px 4px 20px;
}
.oxy-review-track{
  display:grid;
  grid-template-columns:repeat(4,minmax(240px,1fr));
  gap:20px;
}
.oxy-review{
  position:relative;
  min-height:250px;
  padding:30px 25px 26px;
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#f5faff);
  border:1px solid #d9e8f2;
  box-shadow:0 13px 32px rgba(18,57,96,.08);
  transition:transform .25s ease,box-shadow .25s ease;
  overflow:hidden;
}
.oxy-review::before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,#1557ad,#42a8d6);
}
.oxy-review:hover{
  transform:translateY(-7px);
  box-shadow:0 20px 42px rgba(18,57,96,.14);
}
.oxy-stars{
  letter-spacing:3px;
  color:#2186c1;
  font-size:14px;
  margin-bottom:16px;
}
.oxy-review p{
  font-size:15px;
  line-height:1.72;
  color:#5d7084;
  min-height:105px;
  margin:0 0 20px;
}
.oxy-review strong{
  display:block;
  padding-top:15px;
  border-top:1px solid #e4edf4;
  font-size:13px;
  color:#17385f;
}

/* Footer Explore OxyDrops button */
.oxy-footer-top{
  width:100%;
  display:grid;
  grid-template-columns:220px 1fr auto;
  align-items:center;
  gap:42px;
}
.oxy-footer-links{
  display:flex;
  flex-direction:column;
  gap:13px;
  align-items:flex-start;
}
.oxy-footer-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:#dbe7f1;
}
.oxy-footer-row a{
  color:#fff;
  font-weight:700;
  transition:opacity .2s;
}
.oxy-footer-row a:hover{opacity:.75}
.oxy-footer-label{
  color:#8dc8e8;
  font-weight:800;
  min-width:74px;
}
.oxy-footer-sep{opacity:.45}
.oxy-oxydrops-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:190px;
  padding:16px 20px;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(145deg,#287fb5,#0c4f86);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -4px 0 rgba(4,30,55,.25),
    0 10px 20px rgba(0,0,0,.25);
  font-size:15px;
  font-weight:800;
  letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .18s ease,box-shadow .18s ease;
}
.oxy-oxydrops-button::before{
  content:"";
  position:absolute;
  left:10px;right:10px;top:6px;height:32%;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent);
  pointer-events:none;
}
.oxy-oxydrops-button:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -4px 0 rgba(4,30,55,.25),
    0 15px 28px rgba(0,0,0,.30);
}
.oxy-oxydrops-button:active{
  transform:translateY(1px);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.28),0 4px 10px rgba(0,0,0,.2);
}
.oxy-oxydrops-button b{font-size:18px}

/* Footer */
.oxy-footer{background:#0d3158;color:#fff;padding:34px 20px}
.oxy-footer-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}
.oxy-footer-inner img{width:150px;height:auto;object-fit:contain;background:#fff;border-radius:10px;padding:5px}
.oxy-footer-divider{width:100%;height:1px;background:rgba(255,255,255,.18)}
.oxy-footer-copy{font-size:14px;letter-spacing:.2px;color:#e4edf5;text-align:center}
/* Contact */
.oxy-contact{background:linear-gradient(145deg,#f2f9fe,#fff)}
.oxy-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.oxy-contact-card{display:flex;align-items:center;gap:16px;padding:23px 24px;background:#fff;border:1px solid #d9e8f2;border-radius:18px;box-shadow:0 12px 30px rgba(18,57,96,.07);transition:.25s}
.oxy-contact-card:hover{transform:translateY(-5px);border-color:#86bfdd;box-shadow:0 18px 38px rgba(18,57,96,.12)}
.oxy-contact-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#e9f6fd;color:#147db9;font-size:23px;font-weight:800;flex:0 0 auto}
.oxy-contact-card span:nth-child(2){display:flex;flex-direction:column;gap:5px;min-width:0}
.oxy-contact-card strong{color:#123f78;font-size:17px}.oxy-contact-card small{color:#64778a;font-size:13px;overflow-wrap:anywhere}.oxy-contact-card b{margin-left:auto;color:#2186c1}

/* Footer */
.oxy-footer{background:#0d3158;color:#fff;padding:34px 20px}
.oxy-footer-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;text-align:center}
.oxy-footer-inner img{width:150px;height:auto;object-fit:contain;background:#fff;border-radius:10px;padding:5px}
.oxy-footer-inner div{font-size:14px;letter-spacing:.2px;color:#e4edf5}

/* Mobile / tablet: the desktop artwork's embedded menu is hidden by the responsive hero treatment.
   A single 3-dot control exposes the same navigation links, so no duplicate menus appear. */
@media(max-width:900px){
  .oxy-hero{
    aspect-ratio:auto;
    min-height:540px;
    background-size:auto 100%;
    background-position:left bottom;
  }
  .oxy-hero:before{
    content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:100px;
    background:linear-gradient(180deg,#f7fbff 82%,rgba(247,251,255,0) 100%);
  }
  .oxy-mobile-topbar{display:flex;position:absolute;z-index:20;top:0;left:0;right:0;height:92px;padding:15px 20px;align-items:center;justify-content:space-between}
  .oxy-mobile-logo img{width:160px;height:auto}
  .oxy-menu-toggle{width:48px;height:48px;border:1px solid #d7e6f1;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;gap:3px;cursor:pointer;box-shadow:0 8px 22px rgba(18,57,96,.12)}
  .oxy-menu-toggle span{width:4px;height:4px;border-radius:50%;background:#123f78;display:block}
  .oxy-mobile-menu{position:absolute;z-index:19;display:flex;top:82px;right:18px;width:min(280px,calc(100% - 36px));padding:12px;background:rgba(255,255,255,.98);border:1px solid #d9e7f1;border-radius:18px;box-shadow:0 18px 45px rgba(18,57,96,.18);flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s}
  .oxy-mobile-menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .oxy-mobile-menu a{padding:13px 15px;border-radius:10px;color:#123f78;font-weight:700}
  .oxy-mobile-menu a:hover{background:#edf7fd}
  .oxy-mobile-menu .oxy-mobile-cta{background:#1557ad;color:#fff;margin-top:5px}
  .oxy-desktop-hit{display:none}

  .oxy-products-intro{padding:60px 20px 34px}
  .oxy-section-intro h1,.oxy-section-intro h2{font-size:34px}
  .oxy-section-intro p{font-size:16px}
  .oxy-product-art{aspect-ratio:1536/494}
  .oxy-section{padding:75px 20px}
  .oxy-step-grid,.oxy-quality-grid,.oxy-contact-grid{grid-template-columns:1fr 1fr}
  .oxy-about-layout{grid-template-columns:1fr}
  .oxy-review-stage{height:480px;padding:0 8px}
  .oxy-review-track{
    display:flex;
    flex-direction:column;
    gap:14px;
    animation:reviewUp 28s linear infinite;
  }
  .oxy-review{
    min-height:190px;
    flex:0 0 auto;
  }
  .oxy-review p{min-height:0;margin-bottom:14px}
  .oxy-review-stage:hover .oxy-review-track{animation-play-state:paused}
  .oxy-footer-top{
    grid-template-columns:1fr;
    gap:26px;
    text-align:left;
  }
  .oxy-footer-brand{justify-self:start}
  .oxy-footer-links{width:100%}
  .oxy-oxydrops-button{justify-self:center}
}
@keyframes reviewUp{
  0%{transform:translateY(0)}
  100%{transform:translateY(-52%)}
}

@media(max-width:600px){
  .oxy-hero{min-height:500px;background-size:auto 100%;background-position:left bottom}
  .oxy-mobile-topbar{height:82px;padding:12px 16px}
  .oxy-mobile-logo img{width:145px}
  .oxy-menu-toggle{width:44px;height:44px}
  .oxy-products-intro{padding:52px 18px 28px}
  .oxy-section-intro h1,.oxy-section-intro h2{font-size:29px}
  .oxy-section-intro{margin-bottom:36px}
  .oxy-section{padding:62px 16px}
  .oxy-process-copy{padding:24px 23px}
  .oxy-process-copy p,.oxy-about-copy p{font-size:15px;line-height:1.75}
  .oxy-step-grid,.oxy-quality-grid,.oxy-contact-grid{grid-template-columns:1fr}
  .oxy-step{min-height:auto}
  .oxy-about-copy{padding:28px 24px}
  .oxy-feature-list{grid-template-columns:1fr}
  .oxy-feature-list div{min-height:105px}
  .oxy-review{min-height:185px;padding:25px 22px}
  .oxy-review p{font-size:14px}
  .oxy-review-stage{height:430px}
  .oxy-footer{padding:30px 16px}
  .oxy-footer-inner img{width:135px}
  .oxy-footer-row{font-size:13px;gap:9px}
  .oxy-footer-label{min-width:68px}
  .oxy-oxydrops-button{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}


/* ===== v5 responsive hero + 3D mobile navigation ===== */
.oxy-menu-toggle{
  display:none;
  position:absolute;
  z-index:30;
  top:18px;
  right:18px;
  width:52px;
  height:52px;
  padding:0;
  border:1px solid rgba(255,255,255,.9);
  border-radius:16px;
  background:linear-gradient(145deg,#ffffff,#dceaf5);
  box-shadow:8px 8px 18px rgba(10,54,91,.22),-3px -3px 8px rgba(255,255,255,.95);
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  transform:perspective(500px) rotateX(3deg);
  transition:transform .18s ease,box-shadow .18s ease;
}
.oxy-menu-toggle:hover{
  transform:perspective(500px) rotateX(0) translateY(-2px);
  box-shadow:10px 12px 24px rgba(10,54,91,.25),-3px -3px 9px rgba(255,255,255,.95);
}
.oxy-menu-toggle:active{
  transform:perspective(500px) rotateX(0) translateY(1px);
  box-shadow:inset 3px 3px 8px rgba(10,54,91,.16),inset -3px -3px 8px rgba(255,255,255,.9);
}
.oxy-menu-toggle span{
  display:block;width:5px;height:5px;border-radius:50%;
  background:#124a88;
  box-shadow:0 1px 1px rgba(0,0,0,.18);
}
.oxy-mobile-menu{
  display:none;
  position:absolute;
  z-index:29;
  top:82px;
  right:18px;
  width:min(310px,calc(100% - 36px));
  padding:12px;
  flex-direction:column;
  gap:4px;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(235,246,253,.99));
  border:1px solid #d1e2ee;
  border-radius:22px;
  box-shadow:14px 18px 35px rgba(10,54,91,.23),-5px -5px 12px rgba(255,255,255,.95);
  transform-origin:top right;
  transform:perspective(700px) rotateX(-10deg) scale(.96);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.oxy-mobile-menu.is-open{
  opacity:1;visibility:visible;
  transform:perspective(700px) rotateX(0) scale(1);
}
.oxy-menu-title{
  padding:9px 13px 12px;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#3a84b7;
  border-bottom:1px solid #dceaf3;
}
.oxy-mobile-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px;
  border-radius:13px;
  color:#123f78;
  font-weight:750;
  font-size:15px;
  background:rgba(255,255,255,.62);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  transition:.18s ease;
}
.oxy-mobile-menu a:hover{
  background:#e9f6fd;
  transform:translateX(3px);
}
.oxy-mobile-menu .oxy-mobile-cta{
  margin-top:6px;
  color:#fff;
  background:linear-gradient(135deg,#175fae,#0c427e);
  box-shadow:0 8px 18px rgba(12,66,126,.25);
}
.oxy-mobile-menu .oxy-mobile-cta:hover{background:linear-gradient(135deg,#216dbd,#0d4b8d)}

/* Footer v5 */
.oxy-footer{
  background:linear-gradient(145deg,#0b2c50,#123f6f);
  padding:0;
  color:#fff;
}
.oxy-footer-inner{
  max-width:1180px;
  margin:0 auto;
  padding:42px 28px 22px;
  display:block;
  text-align:left;
}
.oxy-footer-top{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:55px;
  align-items:center;
}
.oxy-footer-brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.oxy-footer-brand img{
  width:190px;
  height:auto;
  padding:8px 12px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.oxy-footer-links{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.oxy-footer-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 18px;
  min-height:38px;
  padding:7px 0;
  color:#e3edf6;
  font-size:15px;
}
.oxy-footer-row a{
  color:#fff;
  font-weight:700;
  transition:.18s;
}
.oxy-footer-row a:hover{color:#7fd0ff}
.oxy-footer-label{
  min-width:95px;
  color:#82cef3;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-size:11px;
}
.oxy-footer-sep{opacity:.45}
.oxy-footer-divider{
  height:1px;
  background:rgba(255,255,255,.2);
  margin:27px 0 18px;
}
.oxy-footer-copy{
  text-align:center;
  color:#e5edf5;
  font-size:13px;
  letter-spacing:.25px;
}

/* On tablets and phones the complete supplied hero image is shown at its
   natural aspect ratio, rather than cropping it. The original artwork
   remains visible; the white navigation strip simply prevents the artwork's
   desktop labels from becoming a second mobile menu. */
@media(max-width:900px){
  .oxy-hero{
    min-height:0;
    aspect-ratio:1536/530;
    background-size:100% auto;
    background-position:center top;
    background-repeat:no-repeat;
    background-color:#fff;
  }
  .oxy-hero:before{
    content:"";
    position:absolute;
    z-index:10;
    left:27%;
    top:0;
    width:56%;
    height:23%;
    background:rgba(255,255,255,.96);
    pointer-events:none;
  }
  .oxy-menu-toggle{display:flex}
  .oxy-mobile-menu{display:flex}
  .oxy-desktop-hit{display:none}
  .oxy-footer-top{grid-template-columns:1fr;gap:30px}
  .oxy-footer-brand{justify-content:flex-start}
  .oxy-footer-brand img{width:170px}
}
@media(max-width:600px){
  .oxy-menu-toggle{top:12px;right:13px;width:48px;height:48px;border-radius:15px}
  .oxy-mobile-menu{top:72px;right:13px;width:calc(100% - 26px)}
  .oxy-hero:before{left:26%;width:59%;height:25%}
  .oxy-footer-inner{padding:34px 18px 18px}
  .oxy-footer-top{gap:24px}
  .oxy-footer-row{align-items:flex-start;gap:8px 14px;line-height:1.5}
  .oxy-footer-label{min-width:82px}
  .oxy-footer-divider{margin-top:22px}
}


/* v7 footer-only update: keep logo, footer content and Explore OxyDrops in one row
   on larger screens, with a smaller button. No other page sections are changed. */
@media(min-width:901px){
  .oxy-footer-top{
    display:grid !important;
    grid-template-columns:180px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:28px !important;
  }
  .oxy-footer-brand img{width:150px !important}
  .oxy-footer-links{gap:8px !important}
  .oxy-oxydrops-button{
    min-width:145px !important;
    padding:11px 14px !important;
    gap:9px !important;
    border-radius:12px !important;
    font-size:13px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(4,30,55,.25),0 7px 14px rgba(0,0,0,.23) !important;
  }
  .oxy-oxydrops-button::before{
    left:8px !important;right:8px !important;top:5px !important;
    border-radius:9px !important;
  }
  .oxy-oxydrops-button b{font-size:15px !important}
}


/* OxyDrops standalone page integration */
/* OxyDrops page v4 — screenshot-inspired layout, standalone and editable */
.oxy-drops-site{background:#fff}
.oxy-drops-site .oxy-header{
  background:#041c45;
  border-bottom:1px solid rgba(255,255,255,.35);
  backdrop-filter:none;
}
.oxy-drops-site .oxy-nav{height:80px;max-width:1500px;padding:0 34px}
.oxy-drops-site .oxy-logo{width:235px;flex-basis:235px}
.oxy-drops-site .oxy-logo img{max-height:58px;width:auto}
.oxy-drops-site .oxy-menu{gap:34px}
.oxy-drops-site .oxy-menu a{
  color:#fff;border:0;padding:30px 0 26px;font-size:16px;
}
.oxy-drops-site .oxy-menu a:hover,.oxy-drops-site .oxy-menu a.active{color:#fff;border:0}
.oxy-drops-site .oxy-menu .oxy-drops-back{
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;padding:12px 18px;
}
.oxy-drops-site .oxy-menu .oxy-drops-back:hover{background:rgba(255,255,255,.1)}
.oxy-drops-site .oxy-menu .oxy-drops-back span{margin-left:8px}
.oxy-drops-site .oxy-social{display:none}

.oxy-drops-hero-v4{
  min-height:738px;position:relative;overflow:hidden;
  background:linear-gradient(100deg,#031c51 0%,#062b7a 47%,#0066c9 100%);
  color:#fff;
}
.oxy-drops-hero-bg{
  position:absolute;right:0;top:0;width:55%;height:100%;
  background-image:url('assets/oxydrops-hero-right.jpg');
  background-size:cover;background-position:center center;
}
.oxy-drops-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,#06266e 0%,rgba(4,37,111,.92) 34%,rgba(3,39,104,.28) 61%,rgba(0,42,100,.02) 100%);
}
.oxy-drops-hero-content-v4{
  position:relative;z-index:2;max-width:1500px;margin:auto;
  min-height:738px;padding:62px 60px 38px;
  width:100%;
}
.oxy-drops-brand-mark{display:none}
.oxy-drops-hero-content-v4 h1{
  margin:0;font-family:Georgia,'Times New Roman',serif;font-size:88px;
  line-height:.95;color:#fff;font-weight:700;letter-spacing:-3px;
}
.oxy-drops-hero-content-v4 h1 sup{font-family:Arial,sans-serif;font-size:18px;vertical-align:top;letter-spacing:0;margin-left:7px}
.oxy-drops-packed{
  margin-top:22px;font-size:19px;letter-spacing:8px;font-weight:600;color:#fff;
}
.oxy-drops-divider{
  width:430px;max-width:65%;display:flex;align-items:center;gap:15px;margin:18px 0 17px;color:#55c8ff
}
.oxy-drops-divider:before,.oxy-drops-divider:after{content:"";height:1px;background:rgba(255,255,255,.75);flex:1}
.oxy-drops-divider span{font-size:11px}
.oxy-drops-hero-content-v4 h2{
  font-size:30px;color:#4dc7ff;margin:0 0 14px;font-weight:800;letter-spacing:.5px
}
.oxy-drops-hero-content-v4>p{
  max-width:560px;font-size:18px;line-height:1.75;color:#f3f9ff;margin:0 0 30px
}
.oxy-drops-feature-row{display:flex;gap:35px;align-items:flex-start;margin:0 0 28px}
.oxy-drops-feature-row>div{
  width:105px;text-align:center;display:flex;flex-direction:column;align-items:center
}
.drops-icon{
  width:76px;height:76px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;
  font-size:30px;margin-bottom:10px;color:#fff
}
.oxy-drops-feature-row strong{font-size:16px;line-height:1.15;color:#fff}
.oxy-drops-feature-row small{font-size:15px;line-height:1.15;color:#fff}
.oxy-drops-order-box{
  width:735px;max-width:100%;border:1px solid rgba(255,255,255,.85);
  border-radius:17px;padding:18px 25px;display:flex;align-items:center;gap:25px;
  background:rgba(3,24,70,.28);backdrop-filter:blur(3px)
}
.drops-order-phone,.drops-order-sizes{display:flex;align-items:center;gap:14px}
.drops-order-phone{min-width:285px}
.drops-phone-icon{
  width:56px;height:56px;border-radius:50%;background:#176fe5;display:grid;place-items:center;
  font-size:25px;color:#fff
}
.drops-order-box small{display:block;color:#65caff;font-size:14px;margin-bottom:4px}
.drops-order-box strong{display:block;color:#fff;font-size:17px}
.drops-order-divider{width:1px;height:52px;background:rgba(255,255,255,.45)}
.drops-order-sizes{flex:1;display:block}
.drops-order-sizes strong{letter-spacing:1px}

.oxy-drops-v4-container{max-width:1220px;margin:auto;padding:0 24px}
.oxy-drops-about-v4{padding:85px 0;text-align:center;background:#fff;color:#092b60}
.oxy-drops-section-label{
  display:block;text-transform:uppercase;letter-spacing:4px;color:#078ce1;font-size:12px;font-weight:900;margin-bottom:12px
}
.oxy-drops-about-v4 h2,.oxy-drops-products-v4 h2,.oxy-drops-quality-v4 h2,.oxy-drops-why-v4 h2{
  font-size:46px;line-height:1.1;margin:0 0 16px;color:#062d68;letter-spacing:-1px
}
.oxy-drops-about-v4 p{max-width:760px;margin:auto;color:#58708b;font-size:18px;line-height:1.8}
.oxy-drops-products-v4{padding:90px 0;background:linear-gradient(180deg,#edf9ff,#fff);text-align:center}
.drops-section-intro{max-width:720px;margin:0 auto 45px;color:#58708b;font-size:17px;line-height:1.7}
.oxy-drops-bottle-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.oxy-drops-bottle-cards article{
  background:#fff;border:1px solid #d7ecfa;border-radius:25px;padding:30px 20px;
  box-shadow:0 18px 45px rgba(0,82,150,.1);transition:.25s
}
.oxy-drops-bottle-cards article:hover{transform:translateY(-7px);box-shadow:0 25px 60px rgba(0,82,150,.16)}
.mini-drop-bottle{
  margin:10px auto 28px;width:105px;height:190px;border:2px solid #7ac8ef;border-radius:15px 15px 22px 22px;
  background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(164,224,255,.42),rgba(255,255,255,.95));
  position:relative;box-shadow:inset -12px 0 20px rgba(0,120,190,.08),0 18px 30px rgba(0,88,150,.14)
}
.mini-drop-bottle:before{
  content:"";position:absolute;top:-29px;left:23px;width:55px;height:30px;border-radius:8px 8px 2px 2px;background:#086cc0
}
.mini-drop-bottle:after{
  content:"Oxy\A Drops";white-space:pre;position:absolute;left:8px;right:8px;top:63px;padding:14px 2px;
  border-radius:7px;background:#0569b8;color:#fff;font-size:16px;line-height:1;font-weight:900
}
.mini-drop-bottle.small{height:150px;width:88px}.mini-drop-bottle.small:after{top:48px}
.mini-drop-bottle.medium{height:190px}
.mini-drop-bottle.large{height:225px;width:115px}
.mini-drop-bottle.xlarge{height:255px;width:125px}
.oxy-drops-bottle-cards h3{margin:0 0 7px;color:#07539a;font-size:23px}
.oxy-drops-bottle-cards p{margin:0;color:#61788e}

.oxy-drops-quality-v4{padding:90px 0;background:#f7fcff;text-align:center}
.drops-quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:42px}
.drops-quality-grid>div{
  background:#fff;border-radius:24px;padding:35px;text-align:left;border:1px solid #dceefa;
  box-shadow:0 15px 45px rgba(0,73,140,.08)
}
.drops-quality-grid span{font-size:40px;font-weight:900;color:#087fd0}
.drops-quality-grid h3{margin:10px 0;color:#073f7c;font-size:22px}
.drops-quality-grid p{color:#61788e;line-height:1.65;margin:0}
.oxy-drops-why-v4{padding:75px 0;background:linear-gradient(120deg,#03235d,#057dcc);color:#fff}
.drops-why-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.oxy-drops-why-v4 h2{color:#fff;margin-bottom:14px}
.drops-why-inner p{max-width:680px;color:#dff5ff;font-size:17px;line-height:1.7;margin:0}
.drops-white-btn{
  flex:0 0 auto;border:1px solid #fff;border-radius:999px;padding:15px 24px;color:#fff;font-weight:800
}
.drops-white-btn span{margin-left:12px;font-size:20px}

.oxy-drops-footer{background:#031d46;color:#dcecff;padding-top:45px}
.oxy-drops-footer .oxy-footer-grid{max-width:1400px}
.oxy-drops-footer img{filter:none;background:#fff;border-radius:12px;padding:8px 12px;width:260px}
.oxy-drops-footer h3{color:#fff}
.oxy-drops-footer a,.oxy-drops-footer p{color:#c9dff4}
.oxy-drops-footer .oxy-copy{color:#c0d4e8;border-top-color:rgba(255,255,255,.16);text-align:center}

@media(max-width:1100px){
  .oxy-drops-site .oxy-menu{gap:18px}
  .oxy-drops-site .oxy-menu a{font-size:14px}
  .oxy-drops-hero-content-v4 h1{font-size:72px}
  .oxy-drops-hero-bg{width:52%}
  .oxy-drops-bottle-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .oxy-drops-site .oxy-nav{height:76px;padding:0 18px}
  .oxy-drops-site .oxy-logo{width:190px;flex-basis:190px}
  .oxy-drops-site .oxy-logo img{max-height:52px}
  .oxy-drops-site .oxy-menu{display:none}
  .oxy-drops-site .oxy-mobile{display:block;background:#087fd0}
  .oxy-drops-hero-v4{min-height:780px}
  .oxy-drops-hero-bg{width:100%;opacity:.45;background-position:62% center}
  .oxy-drops-hero-overlay{background:linear-gradient(180deg,rgba(3,26,75,.95),rgba(3,35,91,.84) 45%,rgba(0,60,120,.48))}
  .oxy-drops-hero-content-v4{min-height:780px;padding:45px 22px 28px}
  .oxy-drops-hero-content-v4 h1{font-size:58px;letter-spacing:-2px}
  .oxy-drops-packed{font-size:13px;letter-spacing:4px}
  .oxy-drops-hero-content-v4 h2{font-size:23px}
  .oxy-drops-hero-content-v4>p{font-size:15px}
  .oxy-drops-feature-row{gap:5px;justify-content:space-between}
  .oxy-drops-feature-row>div{width:24%}
  .drops-icon{width:53px;height:53px;font-size:21px}
  .oxy-drops-feature-row strong,.oxy-drops-feature-row small{font-size:12px}
  .oxy-drops-order-box{flex-direction:column;align-items:stretch;gap:15px}
  .drops-order-phone{min-width:0}
  .drops-order-divider{width:100%;height:1px}
  .oxy-drops-about-v4 h2,.oxy-drops-products-v4 h2,.oxy-drops-quality-v4 h2,.oxy-drops-why-v4 h2{font-size:34px}
  .oxy-drops-bottle-cards,.drops-quality-grid{grid-template-columns:1fr}
  .drops-why-inner{flex-direction:column;align-items:flex-start}
  .oxy-drops-footer .oxy-footer-grid{grid-template-columns:1fr 1fr}
}

/* OxyRiver requested content + responsive product/review refinements.
   Scoped to the OxyRiver site so the OxyDrops page remains visually unchanged. */
.oxy-site:not(.oxy-drops-site) .oxy-footer img{filter:none!important;opacity:1}
.oxy-site:not(.oxy-drops-site) .oxy-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{height:245px;padding-bottom:18px}
.oxy-site:not(.oxy-drops-site) .oxy-bottle{transform-origin:bottom center;transition:transform .35s ease,filter .35s ease}
.oxy-site:not(.oxy-drops-site) .oxy-card:hover .oxy-bottle{transform:translateY(-8px) rotate(1deg) scale(1.05);filter:saturate(1.08)}
/* 500ml */
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-1{width:64px;height:160px;border-radius:15px 15px 21px 21px}
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-1:before{left:14px;width:34px;height:28px}
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-1 .oxy-label{top:58px;font-size:9px}
/* 1000ml */
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-2{width:72px;height:190px}
/* 2000ml */
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-3{width:84px;height:218px;border-radius:18px 18px 27px 27px}
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-3:before{left:19px;width:43px;height:32px}
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-3 .oxy-label{top:82px}
/* 20 litre jar: wider, large-capacity 3D silhouette */
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-4{width:126px;height:178px;border-radius:25px 25px 19px 19px;background:linear-gradient(90deg,rgba(255,255,255,.88),rgba(190,229,211,.5) 48%,rgba(255,255,255,.96));box-shadow:inset -16px 0 24px rgba(70,170,110,.10),inset 10px 0 12px rgba(255,255,255,.72),0 15px 25px rgba(20,100,55,.15)}
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-4:before{top:-23px;left:42px;width:42px;height:26px;border:0;border-radius:6px 6px 2px 2px;background:linear-gradient(90deg,#0a7a37,#0d9347,#075d2c);box-shadow:inset 5px 0 7px rgba(255,255,255,.18)}
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-4:after{content:"";position:absolute;left:12px;right:12px;top:25px;height:18px;border-radius:50%;border:2px solid rgba(130,190,155,.45);box-shadow:0 8px 0 rgba(255,255,255,.28)}
.oxy-site:not(.oxy-drops-site) .oxy-bottle.bottle-4 .oxy-label{top:67px;left:9px;right:9px;padding:9px 2px;border-top-width:4px;border-bottom-width:4px;font-size:11px}

/* About copy remains readable with the added company story. */
.oxy-site:not(.oxy-drops-site) .oxy-about-copy-text p{margin:0 0 15px}
.oxy-site:not(.oxy-drops-site) .oxy-about-copy-text strong{color:#075a2a}

/* Long quality-process statement */
.oxy-site:not(.oxy-drops-site) .oxy-process>.oxy-container>.oxy-subtitle{max-width:930px}

/* Five image-free customer cards with subtle motion and clean typography. */
.oxy-site:not(.oxy-drops-site) .oxy-reviews-intro{color:#d9f0df}
.oxy-site:not(.oxy-drops-site) .oxy-review-grid-five{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.oxy-site:not(.oxy-drops-site) .oxy-review-effect{min-height:235px;padding:26px 21px;display:flex;flex-direction:column;justify-content:flex-start;position:relative;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}
.oxy-site:not(.oxy-drops-site) .oxy-review-effect:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,#087a35,#19a653,#7bdc9a);transform:scaleX(.25);transform-origin:left;transition:transform .35s ease}
.oxy-site:not(.oxy-drops-site) .oxy-review-effect:hover{transform:translateY(-9px) rotate(-.5deg);box-shadow:0 24px 50px rgba(0,0,0,.18)}
.oxy-site:not(.oxy-drops-site) .oxy-review-effect:hover:before{transform:scaleX(1)}
.oxy-site:not(.oxy-drops-site) .oxy-review-effect .stars{color:#f3b51b;letter-spacing:3px;font-size:18px;margin-bottom:14px;text-shadow:0 1px 0 rgba(0,0,0,.06)}
.oxy-site:not(.oxy-drops-site) .oxy-review-effect p{font-size:15px;line-height:1.65;margin:0 0 18px;color:#53665b;flex:1}
.oxy-site:not(.oxy-drops-site) .oxy-review-effect strong{font-size:14px;letter-spacing:.2px;color:#075a2a}

/* Better responsive behavior for OxyRiver only. */
@media(max-width:1200px){
 .oxy-site:not(.oxy-drops-site) .oxy-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .oxy-site:not(.oxy-drops-site) .oxy-review-grid-five{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 .oxy-site:not(.oxy-drops-site) .oxy-product-grid{grid-template-columns:1fr 1fr;gap:14px}
 .oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{height:215px}
 .oxy-site:not(.oxy-drops-site) .oxy-product-body{padding:17px}
 .oxy-site:not(.oxy-drops-site) .oxy-product-body h3{font-size:19px}
 .oxy-site:not(.oxy-drops-site) .oxy-product-body p{font-size:13px}
 .oxy-site:not(.oxy-drops-site) .oxy-review-grid-five{grid-template-columns:1fr;gap:15px}
 .oxy-site:not(.oxy-drops-site) .oxy-review-effect{min-height:0;padding:24px}
 .oxy-site:not(.oxy-drops-site) .oxy-about-copy-text p{font-size:15px;line-height:1.7}
 .oxy-site:not(.oxy-drops-site) .oxy-process>.oxy-container>.oxy-subtitle{font-size:15px;line-height:1.75}
 .oxy-site:not(.oxy-drops-site) .oxy-contact-inner{grid-template-columns:1fr}
 .oxy-site:not(.oxy-drops-site) .oxy-contact-btn{grid-column:auto}
}
@media(max-width:480px){
 .oxy-site:not(.oxy-drops-site) .oxy-product-grid{grid-template-columns:1fr}
 .oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{height:225px}
}

/* Elementor content fallback area */
.oxy-standard-content{max-width:1250px;margin:0 auto;padding:80px 24px;min-height:45vh}
.oxy-standard-title{font-size:48px;line-height:1.1;color:#073f20;margin:0 0 28px}
.oxy-standard-body{font-size:17px;line-height:1.8;color:var(--muted)}
.oxy-standard-body img{max-width:100%;height:auto}
.oxy-elementor-content{width:100%;overflow:hidden}
@media(max-width:760px){.oxy-standard-content{padding:55px 18px}.oxy-standard-title{font-size:34px}}

/* OxyRiver Home — product/review visibility and responsive polish */
.oxy-site:not(.oxy-drops-site) .oxy-product-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}
.oxy-site:not(.oxy-drops-site) .oxy-product-card{
  min-width:0;
}
.oxy-site:not(.oxy-drops-site) .oxy-product-image{
  display:block;
  width:auto;
  height:220px;
  max-width:88%;
  margin:0 auto;
  object-fit:contain;
  filter:drop-shadow(0 18px 14px rgba(5,80,35,.16));
  transition:transform .35s ease,filter .35s ease;
}
.oxy-site:not(.oxy-drops-site) .oxy-product-card:hover .oxy-product-image{
  transform:translateY(-8px) scale(1.045) rotate(-1deg);
  filter:drop-shadow(0 25px 20px rgba(5,80,35,.22));
}
.oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{
  min-height:250px;
  height:250px;
  padding:15px 10px 5px;
  align-items:center;
}
.oxy-site:not(.oxy-drops-site) .oxy-review-grid-five{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.oxy-site:not(.oxy-drops-site) .oxy-review-effect{
  opacity:1;
  transform:none;
  animation:oxyReviewReveal .7s cubic-bezier(.2,.75,.25,1) both;
  animation-delay:var(--review-delay,0ms);
}
.oxy-site:not(.oxy-drops-site) .oxy-product-card.oxy-reveal{
  opacity:1;
  transform:none;
  animation:oxyProductReveal .7s cubic-bezier(.2,.75,.25,1) both;
}
.oxy-site:not(.oxy-drops-site) .oxy-product-card:nth-child(1){animation-delay:80ms}
.oxy-site:not(.oxy-drops-site) .oxy-product-card:nth-child(2){animation-delay:170ms}
.oxy-site:not(.oxy-drops-site) .oxy-product-card:nth-child(3){animation-delay:260ms}
.oxy-site:not(.oxy-drops-site) .oxy-product-card:nth-child(4){animation-delay:350ms}

@keyframes oxyProductReveal{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes oxyReviewReveal{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:1200px){
  .oxy-site:not(.oxy-drops-site) .oxy-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .oxy-site:not(.oxy-drops-site) .oxy-review-grid-five{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .oxy-site:not(.oxy-drops-site) .oxy-product-grid{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{
    min-height:205px;
    height:205px;
    padding:10px 5px 0;
  }
  .oxy-site:not(.oxy-drops-site) .oxy-product-image{
    height:175px;
    max-width:94%;
  }
  .oxy-site:not(.oxy-drops-site) .oxy-product-body{
    padding:16px 14px 19px;
  }
  .oxy-site:not(.oxy-drops-site) .oxy-product-body h3{
    font-size:18px;
  }
  .oxy-site:not(.oxy-drops-site) .oxy-product-body p{
    font-size:12.5px;
    line-height:1.5;
  }
  .oxy-site:not(.oxy-drops-site) .oxy-review-grid-five{
    grid-template-columns:1fr;
    gap:15px;
  }
  .oxy-site:not(.oxy-drops-site) .oxy-review-effect{
    min-height:0;
  }
}
@media(max-width:430px){
  .oxy-site:not(.oxy-drops-site) .oxy-product-grid{
    grid-template-columns:1fr;
  }
  .oxy-site:not(.oxy-drops-site) .oxy-product-image{
    height:210px;
  }
}
@media(prefers-reduced-motion:reduce){
  .oxy-site:not(.oxy-drops-site) .oxy-product-card.oxy-reveal,
  .oxy-site:not(.oxy-drops-site) .oxy-review-effect{
    animation:none;
  }
}

/* OxyRiver Home product photography — realistic bottle/jar images */
.oxy-site:not(.oxy-drops-site) .oxy-product-card{
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 42px rgba(5,79,35,.12);
  transform-style:preserve-3d;
  transition:transform .35s ease, box-shadow .35s ease;
}
.oxy-site:not(.oxy-drops-site) .oxy-product-card:hover{
  transform:translateY(-9px) perspective(900px) rotateX(1deg);
  box-shadow:0 28px 60px rgba(5,79,35,.20);
}
.oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{
  height:430px;
  min-height:430px;
  padding:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
  background:#eaf7f1;
  position:relative;
}
.oxy-site:not(.oxy-drops-site) .oxy-bottle-stage:after{
  content:"";
  position:absolute;
  inset:auto 12% 7px;
  height:24px;
  border-radius:50%;
  background:rgba(4,80,38,.16);
  filter:blur(12px);
  z-index:1;
  pointer-events:none;
}
.oxy-site:not(.oxy-drops-site) .oxy-product-image{
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  display:block;
  object-fit:cover;
  object-position:center center;
  filter:saturate(1.04) contrast(1.02) drop-shadow(0 18px 15px rgba(0,55,30,.12));
  transform:translateZ(0) scale(1.01);
  transition:transform .5s cubic-bezier(.2,.75,.25,1), filter .5s ease;
  position:relative;
  z-index:2;
}
.oxy-site:not(.oxy-drops-site) .oxy-product-card:hover .oxy-product-image{
  transform:translateZ(20px) scale(1.035);
  filter:saturate(1.08) contrast(1.03) drop-shadow(0 28px 24px rgba(0,55,30,.20));
}
.oxy-site:not(.oxy-drops-site) .oxy-product-body{
  padding:22px 22px 24px;
  background:#fff;
}
@media(max-width:1200px){
  .oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{height:390px;min-height:390px}
}
@media(max-width:760px){
  .oxy-site:not(.oxy-drops-site) .oxy-product-grid{grid-template-columns:1fr 1fr;gap:14px}
  .oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{height:310px;min-height:310px}
  .oxy-site:not(.oxy-drops-site) .oxy-product-body{padding:15px 14px 18px}
}
@media(max-width:430px){
  .oxy-site:not(.oxy-drops-site) .oxy-product-grid{grid-template-columns:1fr}
  .oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{height:400px;min-height:400px}
}

/* OxyRiver Home — high-resolution product framing + contact social links.
   Scoped to the OxyRiver page so OxyDrops remains unchanged. */
.oxy-site:not(.oxy-drops-site) .oxy-product-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{
  height:410px;
  min-height:410px;
  padding:0;
  overflow:hidden;
  background:#f4fbf7;
  display:flex;
  align-items:center;
  justify-content:center;
}
.oxy-site:not(.oxy-drops-site) .oxy-product-image{
  width:100%;
  height:100%;
  max-width:100%;
  margin:0;
  display:block;
  object-fit:contain;
  object-position:center center;
  filter:saturate(1.08) contrast(1.05) drop-shadow(0 20px 18px rgba(0,55,30,.14));
  transform:none;
  transition:transform .45s cubic-bezier(.2,.75,.25,1),filter .45s ease;
}
.oxy-site:not(.oxy-drops-site) .oxy-product-card:hover .oxy-product-image{
  transform:scale(1.035);
  filter:saturate(1.1) contrast(1.06) drop-shadow(0 28px 24px rgba(0,55,30,.22));
}
.oxy-site:not(.oxy-drops-site) .oxy-product-body{
  min-height:132px;
}
.oxy-site:not(.oxy-drops-site) .oxy-social-link{
  border:0;
  cursor:pointer;
}
.oxy-site:not(.oxy-drops-site) .oxy-social-link svg{
  width:19px;
  height:19px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.oxy-site:not(.oxy-drops-site) .oxy-social-link .fill,
.oxy-site:not(.oxy-drops-site) .oxy-whatsapp svg{
  fill:currentColor;
  stroke:none;
}
.oxy-site:not(.oxy-drops-site) .oxy-social-link:hover{
  background:#0a873c;
  color:#fff;
  transform:translateY(-2px);
}
@media(max-width:1100px){
  .oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{height:360px;min-height:360px}
}
@media(max-width:760px){
  .oxy-site:not(.oxy-drops-site) .oxy-bottle-stage{height:360px;min-height:360px}
  .oxy-site:not(.oxy-drops-site) .oxy-product-image{width:100%;height:100%;object-fit:contain}
}

/* OxyRiver About — animated water visual (OxyRiver page only) */
.oxy-about-water{
  background-image:url('assets/about-oxyriver-water-animated.webp');
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 24px 60px rgba(5,79,35,.16);
  isolation:isolate;
}
.oxy-about-water:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 45%,rgba(0,95,50,.08));
  pointer-events:none;
}
.oxy-about-shimmer{
  position:absolute;
  z-index:2;
  inset:-20% -35%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 48%,transparent 56%);
  transform:translateX(-65%) rotate(5deg);
  animation:oxyAboutShimmer 7s ease-in-out infinite;
  pointer-events:none;
}
.oxy-about-water .oxy-water-drop{
  display:none;
}
.oxy-drop{
  position:absolute;
  z-index:3;
  width:12px;
  height:18px;
  border-radius:70% 70% 70% 15%;
  background:rgba(224,250,255,.92);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 3px 10px rgba(0,110,180,.18);
  transform:rotate(45deg);
  opacity:0;
  pointer-events:none;
}
.oxy-drop-1{left:22%;top:17%;animation:oxyDropFloat 4.8s ease-in-out 0s infinite}
.oxy-drop-2{left:58%;top:11%;animation:oxyDropFloat 5.6s ease-in-out 1.2s infinite}
.oxy-drop-3{left:79%;top:27%;animation:oxyDropFloat 5.1s ease-in-out 2s infinite}
.oxy-drop-4{left:38%;top:31%;animation:oxyDropFloat 6s ease-in-out 2.8s infinite}

@keyframes oxyAboutShimmer{
  0%,55%{transform:translateX(-65%) rotate(5deg);opacity:0}
  65%{opacity:1}
  85%,100%{transform:translateX(65%) rotate(5deg);opacity:0}
}
@keyframes oxyDropFloat{
  0%{transform:translateY(12px) rotate(45deg) scale(.55);opacity:0}
  18%{opacity:.85}
  65%{transform:translateY(-34px) rotate(45deg) scale(1);opacity:.7}
  100%{transform:translateY(-62px) rotate(45deg) scale(.75);opacity:0}
}
@media(max-width:760px){
  .oxy-about-water{
    min-height:360px;
    background-position:center;
  }
  .oxy-drop-1{left:18%}
  .oxy-drop-2{left:57%}
  .oxy-drop-3{left:78%}
  .oxy-drop-4{left:36%}
}
@media(prefers-reduced-motion:reduce){
  .oxy-about-shimmer,.oxy-drop{animation:none!important}
}

/* OxyRiver About visual — robust image-based version.
   The visual is intentionally scoped to the OxyRiver home/about section only. */
.oxy-site:not(.oxy-drops-site) .oxy-about-water{
  min-height:520px;
  height:520px;
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:#dff5e9;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 24px 70px rgba(5,79,35,.18);
  isolation:isolate;
}
.oxy-site:not(.oxy-drops-site) .oxy-about-water-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  z-index:0;
  transform:scale(1.012);
  filter:saturate(1.04) contrast(1.02);
}
.oxy-site:not(.oxy-drops-site) .oxy-about-water::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 38%,rgba(0,70,35,.08));
}
.oxy-site:not(.oxy-drops-site) .oxy-about-shimmer{
  position:absolute;
  inset:-35% -55%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 43%,rgba(255,255,255,.30) 50%,transparent 57%);
  transform:translateX(-65%) rotate(5deg);
  animation:oxyAboutShimmerStrong 7s ease-in-out infinite;
}
.oxy-site:not(.oxy-drops-site) .oxy-water-glow{
  position:absolute;
  z-index:2;
  width:220px;
  height:220px;
  right:-55px;
  top:-70px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,0) 68%);
  animation:oxyWaterGlow 5s ease-in-out infinite;
  pointer-events:none;
}
.oxy-site:not(.oxy-drops-site) .oxy-drop{
  position:absolute;
  z-index:3;
  display:block;
  width:13px;
  height:20px;
  border-radius:72% 72% 72% 18%;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(173,235,255,.72));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 4px 14px rgba(0,95,160,.22),inset 2px 2px 3px rgba(255,255,255,.75);
  transform:rotate(45deg);
  opacity:0;
  pointer-events:none;
}
.oxy-site:not(.oxy-drops-site) .oxy-drop-1{left:18%;top:20%;animation:oxyDropFloat2 4.6s ease-in-out .2s infinite}
.oxy-site:not(.oxy-drops-site) .oxy-drop-2{left:42%;top:12%;animation:oxyDropFloat2 5.2s ease-in-out 1.0s infinite}
.oxy-site:not(.oxy-drops-site) .oxy-drop-3{left:68%;top:18%;animation:oxyDropFloat2 4.9s ease-in-out 1.8s infinite}
.oxy-site:not(.oxy-drops-site) .oxy-drop-4{left:82%;top:34%;animation:oxyDropFloat2 5.6s ease-in-out 2.5s infinite}
.oxy-site:not(.oxy-drops-site) .oxy-drop-5{left:30%;top:43%;animation:oxyDropFloat2 5.0s ease-in-out 3.1s infinite}
.oxy-site:not(.oxy-drops-site) .oxy-drop-6{left:57%;top:31%;animation:oxyDropFloat2 5.4s ease-in-out 3.7s infinite}
@keyframes oxyAboutShimmerStrong{
  0%,48%{transform:translateX(-70%) rotate(5deg);opacity:0}
  58%{opacity:.8}
  82%,100%{transform:translateX(70%) rotate(5deg);opacity:0}
}
@keyframes oxyDropFloat2{
  0%{transform:translateY(18px) rotate(45deg) scale(.45);opacity:0}
  15%{opacity:.92}
  62%{transform:translateY(-42px) rotate(45deg) scale(1);opacity:.72}
  100%{transform:translateY(-76px) rotate(45deg) scale(.72);opacity:0}
}
@keyframes oxyWaterGlow{
  0%,100%{transform:scale(.9);opacity:.45}
  50%{transform:scale(1.12);opacity:.8}
}
@media(max-width:1100px){
  .oxy-site:not(.oxy-drops-site) .oxy-about-water{min-height:470px;height:470px}
}
@media(max-width:760px){
  .oxy-site:not(.oxy-drops-site) .oxy-about-water{min-height:360px;height:360px;border-radius:24px}
  .oxy-site:not(.oxy-drops-site) .oxy-about-water-image{object-position:center center}
}
@media(prefers-reduced-motion:reduce){
  .oxy-site:not(.oxy-drops-site) .oxy-about-shimmer,
  .oxy-site:not(.oxy-drops-site) .oxy-water-glow,
  .oxy-site:not(.oxy-drops-site) .oxy-drop{animation:none!important}
}

/* OxyRiver About visual visibility fix.
   The About visual previously inherited .oxy-reveal {opacity:0} without
   a reveal script, which made the entire left panel invisible. */
.oxy-site:not(.oxy-drops-site) #about .oxy-about-water.oxy-reveal{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}
.oxy-site:not(.oxy-drops-site) #about .oxy-about-water-image{
  opacity:1 !important;
  visibility:visible !important;
}
/* Keep the visual framed cleanly on all screen sizes. */
.oxy-site:not(.oxy-drops-site) #about .oxy-about-water{
  display:block !important;
}


/* OxyDrops product cards v5 — real bottle photography, proper frames, depth */
.oxy-drops-site .oxy-drops-bottle-cards-v5{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  align-items:stretch;
}
.oxy-drops-site .drops-product-card{
  position:relative;
  overflow:hidden;
  padding:0 0 28px;
  border:1px solid rgba(105,184,226,.28);
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff 0%,#f3fbff 100%);
  box-shadow:0 18px 50px rgba(0,72,132,.12);
  transform:translateZ(0);
  transition:transform .35s ease,box-shadow .35s ease;
}
.oxy-drops-site .drops-product-card:hover{
  transform:translateY(-10px) perspective(900px) rotateX(1deg);
  box-shadow:0 30px 70px rgba(0,72,132,.20);
}
.oxy-drops-site .drops-product-image{
  position:relative;
  width:100%;
  height:430px;
  overflow:hidden;
  background:#eaf8ff;
}
.oxy-drops-site .drops-product-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.001);
  transition:transform .45s ease,filter .45s ease;
}
.oxy-drops-site .drops-product-card:hover .drops-product-image img{
  transform:scale(1.035);
  filter:saturate(1.05) contrast(1.03);
}
.oxy-drops-site .drops-product-image:after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:16px;
  height:24px;
  border-radius:50%;
  background:rgba(0,79,126,.16);
  filter:blur(12px);
  pointer-events:none;
}
.oxy-drops-site .drops-product-badge{
  position:absolute;
  top:18px;
  left:18px;
  z-index:3;
  padding:9px 15px;
  border-radius:999px;
  background:rgba(3,91,170,.92);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
  box-shadow:0 8px 20px rgba(0,69,135,.22);
}
.oxy-drops-site .drops-product-card h3{
  margin:22px 24px 7px;
  color:#07539a;
  font-size:25px;
}
.oxy-drops-site .drops-product-card p{
  margin:0 24px;
  color:#61788e;
  line-height:1.6;
}
.oxy-drops-site .drops-product-soon .drops-product-badge{
  background:#0a7fc5;
}
@media(max-width:900px){
  .oxy-drops-site .oxy-drops-bottle-cards-v5{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .oxy-drops-site .oxy-drops-bottle-cards-v5{grid-template-columns:1fr}
  .oxy-drops-site .drops-product-image{height:390px}
}

/* Scoped OxyDrops navigation/footer base styles */
.oxy-drops-site .oxy-header{position:sticky;top:0;z-index:100;background:#041c45;border-bottom:1px solid rgba(255,255,255,.35);backdrop-filter:none}
.oxy-drops-site .oxy-nav{max-width:1500px;margin:auto;height:80px;padding:0 34px;display:flex;align-items:center;gap:40px}
.oxy-drops-site .oxy-logo{width:235px;flex:0 0 235px}
.oxy-drops-site .oxy-logo img{display:block;width:auto;max-width:100%;max-height:58px}
.oxy-drops-site .oxy-menu{display:flex;align-items:center;justify-content:center;gap:34px;margin-left:auto}
.oxy-drops-site .oxy-menu a{font-size:16px;font-weight:600;color:#fff;padding:30px 0 26px;border-bottom:0;transition:.2s}
.oxy-drops-site .oxy-menu a:hover,.oxy-drops-site .oxy-menu a.active{color:#fff;border:0}
.oxy-drops-site .oxy-menu .oxy-drops-back{border:1px solid rgba(255,255,255,.9);border-radius:999px;padding:12px 18px}
.oxy-drops-site .oxy-social{display:none}
.oxy-drops-site .oxy-mobile{display:none;margin-left:auto;background:#087fd0;color:#fff;border:0;border-radius:9px;padding:10px 13px;font-size:20px}
.oxy-drops-site .oxy-footer-grid{max-width:1400px;margin:auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.oxy-drops-site .oxy-footer-grid img{display:block}
.oxy-drops-site .oxy-footer-grid p{line-height:1.5}
.oxy-drops-site .oxy-copy{max-width:1400px;margin:35px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;text-align:center}
.oxy-drops-site .oxy-mobile-open{display:flex}
@media(max-width:1100px){
 .oxy-drops-site .oxy-menu{gap:18px}
 .oxy-drops-site .oxy-menu a{font-size:14px}
}
@media(max-width:760px){
 .oxy-drops-site .oxy-nav{height:76px;padding:0 18px}
 .oxy-drops-site .oxy-logo{width:190px;flex-basis:190px}
 .oxy-drops-site .oxy-logo img{max-height:52px}
 .oxy-drops-site .oxy-menu{display:none;position:absolute;top:76px;left:0;right:0;background:#041c45;padding:18px 22px;flex-direction:column;align-items:flex-start;gap:0}
 .oxy-drops-site .oxy-menu.oxy-mobile-open{display:flex}
 .oxy-drops-site .oxy-menu a{padding:12px 0}
 .oxy-drops-site .oxy-menu .oxy-drops-back{padding:10px 15px}
 .oxy-drops-site .oxy-mobile{display:block}
 .oxy-drops-site .oxy-footer-grid{grid-template-columns:1fr 1fr}
}

/* ================================================================
 * Employee portal additions — scoped; existing OxyRiver/OxyDrops design
 * remains untouched.
 * ================================================================ */
.oxy-global-emp-button{position:absolute;z-index:60;top:16px;right:18px;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:linear-gradient(145deg,#123f78,#1557ad);color:#fff;font-size:13px;font-weight:800;box-shadow:0 8px 22px rgba(18,57,96,.22);border:1px solid rgba(255,255,255,.65)}
.oxy-global-emp-button:hover{transform:translateY(-1px);color:#fff}
.oxy-global-emp-button span{font-size:15px}
.oxy-emp-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.oxy-emp-modal.is-open{display:flex}
.oxy-emp-modal-backdrop{position:absolute;inset:0;background:rgba(5,28,52,.56);backdrop-filter:blur(5px)}
.oxy-emp-modal-card{position:relative;z-index:2;width:min(430px,100%);padding:34px;border-radius:24px;background:#fff;border:1px solid #d9e8f2;box-shadow:0 28px 80px rgba(3,31,61,.28)}
.oxy-emp-modal-card h2{margin:6px 0 8px;color:#123f78;font-size:30px}
.oxy-emp-modal-card p{margin:0 0 22px;color:#63758a;line-height:1.6}
.oxy-emp-modal-card label,.oxy-employee-login-card label,.oxy-profile-form label,.oxy-entry-form label,.oxy-password-panel label{display:flex;flex-direction:column;gap:7px;color:#274d73;font-size:13px;font-weight:800}
.oxy-emp-modal-card label+label{margin-top:15px}
.oxy-emp-modal-card input,.oxy-employee-login-card input,.oxy-profile-form input,.oxy-profile-form textarea,.oxy-entry-form input,.oxy-entry-form textarea,.oxy-entry-form select,.oxy-password-panel input,.oxy-employee-filters select,.oxy-employee-filters input{width:100%;border:1px solid #cfdeea;border-radius:11px;padding:12px 13px;background:#fbfdff;color:#17385f;font:inherit;font-weight:500;outline:none}
.oxy-emp-modal-card input:focus,.oxy-employee-login-card input:focus,.oxy-profile-form input:focus,.oxy-profile-form textarea:focus,.oxy-entry-form input:focus,.oxy-entry-form textarea:focus,.oxy-password-panel input:focus{border-color:#2186c1;box-shadow:0 0 0 3px rgba(33,134,193,.1)}
.oxy-emp-modal-card input[readonly],.oxy-employee-login-card input[readonly]{background:#edf5fa;color:#60758a}
.oxy-emp-login-submit,.oxy-emp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 17px;background:linear-gradient(145deg,#1557ad,#2186c1);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 9px 20px rgba(21,87,173,.2);text-decoration:none}
.oxy-emp-login-submit{width:100%;margin-top:19px}
.oxy-emp-login-submit:hover,.oxy-emp-btn:hover{transform:translateY(-1px);color:#fff}
.oxy-emp-modal-card small{display:block;margin-top:14px;color:#7a8da0;line-height:1.5}
.oxy-emp-modal-close{position:absolute;right:13px;top:10px;width:36px;height:36px;border:0;background:transparent;color:#5c7084;font-size:27px;cursor:pointer}
.oxy-employee-body{min-height:100vh;background:#f3f8fc;color:#17385f}
.oxy-employee-login-wrap{min-height:100vh;display:grid;place-items:center;padding:30px;background:radial-gradient(circle at 10% 0%,#e4f4ff,#f5f9fc 48%,#eaf4fa)}
.oxy-employee-login-card{width:min(460px,100%);padding:38px;border-radius:26px;background:#fff;border:1px solid #d9e8f2;box-shadow:0 25px 70px rgba(18,57,96,.15)}
.oxy-employee-login-card img{width:160px;margin:0 auto 20px}
.oxy-employee-kicker{display:block;text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:900;color:#2186c1}
.oxy-employee-login-card h1{margin:7px 0 8px;text-align:center;color:#123f78;font-size:32px}
.oxy-employee-login-card>p{text-align:center;color:#65798d;line-height:1.6;margin:0 0 24px}
.oxy-employee-login-card label+label{margin-top:16px}
.oxy-employee-login-card button{width:100%;margin-top:20px}
.oxy-emp-alert{padding:12px 15px;border-radius:12px;margin-bottom:18px;font-size:14px;font-weight:700}
.oxy-emp-alert.success{background:#e8f8ee;color:#167340;border:1px solid #bde8ce}
.oxy-emp-alert.error{background:#fff0f0;color:#b32727;border:1px solid #f2c2c2}
.oxy-emp-back{display:block;text-align:center;margin-top:18px;color:#1557ad;font-weight:800}
.oxy-employee-top{position:sticky;top:0;z-index:100;background:#0d3158;color:#fff;border-bottom:1px solid rgba(255,255,255,.16);box-shadow:0 5px 22px rgba(5,31,56,.12)}
.oxy-employee-top-inner{max-width:1320px;margin:auto;min-height:76px;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.oxy-employee-top img{width:145px;height:auto;background:#fff;padding:4px;border-radius:8px}
.oxy-employee-top-inner>div{display:flex;align-items:center;gap:14px;font-size:13px;color:#dceaf4}
.oxy-employee-top-inner form{display:inline}
.oxy-employee-top button{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:9px;padding:9px 13px;font-weight:800;cursor:pointer}
.oxy-employee-shell{max-width:1320px;margin:auto;padding:30px 24px 60px}
.oxy-employee-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:24px}
.oxy-employee-heading h1{margin:5px 0 8px;color:#123f78;font-size:34px;letter-spacing:-.7px}
.oxy-employee-heading p{margin:0;color:#65798d;line-height:1.6;max-width:700px}
.oxy-employee-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.oxy-emp-btn.secondary{background:#0d3158}.oxy-emp-btn.ghost{background:#eef6fb;color:#1557ad;box-shadow:none;border:1px solid #cfe0eb}.oxy-emp-btn.ghost:hover{color:#1557ad}
.oxy-employee-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.oxy-stat{background:#fff;border:1px solid #dbe8f1;border-radius:18px;padding:22px 24px;box-shadow:0 12px 30px rgba(18,57,96,.06)}
.oxy-stat span{display:block;color:#6b7f91;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}.oxy-stat strong{display:block;margin-top:8px;color:#123f78;font-size:27px}.oxy-stat.due strong{color:#d62d2d}.oxy-stat.paid strong{color:#158447}
.oxy-employee-filters{background:#fff;border:1px solid #dbe8f1;border-radius:16px;padding:15px 18px;margin-bottom:20px}.oxy-employee-filters form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.oxy-employee-filters label{min-width:150px;display:flex;flex-direction:column;gap:6px;color:#47627a;font-size:12px;font-weight:800}.oxy-employee-filters label select,.oxy-employee-filters label input{margin-top:0}
.oxy-employee-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}
.oxy-customer-sidebar,.oxy-panel{background:#fff;border:1px solid #dbe8f1;border-radius:20px;box-shadow:0 12px 30px rgba(18,57,96,.06)}
.oxy-customer-sidebar{position:sticky;top:95px;overflow:hidden}.oxy-side-head{display:flex;justify-content:space-between;align-items:center;padding:18px 18px;border-bottom:1px solid #e4edf4}.oxy-side-head h2{margin:0;color:#123f78;font-size:19px}.oxy-side-head a{color:#1557ad;font-weight:900;font-size:13px}.oxy-customer-list{max-height:calc(100vh - 180px);overflow:auto}.oxy-customer-list>a{display:block;padding:15px 17px;border-bottom:1px solid #edf2f6;transition:.18s}.oxy-customer-list>a:hover{background:#f6fbfe}.oxy-customer-list>a.active{background:#eaf6fd;border-left:4px solid #2186c1;padding-left:13px}.oxy-customer-list strong{display:block;color:#1a4267;font-size:14px}.oxy-customer-list small{display:block;color:#7a8da0;margin-top:4px}.oxy-customer-list b{display:block;margin-top:8px;color:#d62d2d;font-size:12px}

.oxy-customer-search{padding:12px 14px;border-bottom:1px solid #e4edf4;background:#fbfdff}
.oxy-customer-search input{width:100%;padding:10px 12px;border:1px solid #d3e2ec;border-radius:10px;background:#fff;color:#17385f;outline:none}
.oxy-customer-search input:focus{border-color:#2186c1;box-shadow:0 0 0 3px rgba(33,134,193,.10)}
.oxy-customer-item[hidden]{display:none}
.oxy-customer-list>a em{display:block;margin-top:5px;color:#91a2b1;font-size:10px;font-style:normal}
.oxy-customer-no-results{padding:16px!important}
.oxy-employee-body input[type=number]{-moz-appearance:textfield}
.oxy-employee-body input[type=number]::-webkit-outer-spin-button,
.oxy-employee-body input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.oxy-customer-main{min-width:0;display:grid;gap:20px}.oxy-panel{padding:22px}.oxy-panel-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.oxy-panel-title h2{margin:4px 0 0;color:#123f78;font-size:23px}.oxy-customer-due{font-weight:900;color:#d62d2d}.oxy-danger-link{border:0;background:none;color:#c62929;font-weight:800;cursor:pointer}.oxy-profile-form,.oxy-entry-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.oxy-profile-form .full,.oxy-entry-form .full{grid-column:1/-1}.oxy-profile-form textarea,.oxy-entry-form textarea{resize:vertical}
.oxy-entry-form{padding:18px;background:#f7fbfe;border:1px solid #dceaf4;border-radius:16px;margin-bottom:18px}.oxy-entry-form small{font-size:10px;color:#7890a4;font-weight:600}.oxy-bill-preview{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0}.oxy-bill-preview span{font-weight:900;color:#123f78}.oxy-bill-preview img{width:75px;height:75px;object-fit:cover;border-radius:10px;border:1px solid #d4e2eb}.oxy-bill-preview small{flex:1;min-width:180px}
.oxy-history-wrap{overflow:auto}.oxy-history{width:100%;border-collapse:collapse;min-width:800px}.oxy-history th{padding:12px 10px;background:#f0f7fb;color:#48647b;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px}.oxy-history td{padding:13px 10px;border-bottom:1px solid #e7eef3;color:#466178;font-size:13px;vertical-align:top}.oxy-history td strong{display:block;color:#173f64}.oxy-history td small{display:block;color:#8a9aaa;margin-top:4px;max-width:180px}.paid-text{color:#158447!important;font-weight:800}.due-text{color:#d62d2d!important;font-weight:800}.bill-link,.table-action{color:#1557ad;font-weight:800}.table-delete{border:0;background:none;color:#c62929;font-weight:800;cursor:pointer;margin-top:5px}.table-action{display:block}.oxy-empty{text-align:center;color:#7d8f9f;padding:25px!important}.oxy-password-panel{display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:center}.oxy-password-panel h2{margin:5px 0 8px;color:#123f78;font-size:22px}.oxy-password-panel p{color:#667a8d;line-height:1.6;margin:0}.oxy-password-panel form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
@media(max-width:900px){
 .oxy-global-emp-button{top:18px;right:78px;padding:9px 12px;font-size:12px}
 .oxy-employee-heading{align-items:flex-start;flex-direction:column}.oxy-employee-actions{justify-content:flex-start}.oxy-employee-stats{grid-template-columns:1fr 1fr}.oxy-employee-layout{grid-template-columns:1fr}.oxy-customer-sidebar{position:relative;top:auto}.oxy-customer-list{max-height:300px}.oxy-password-panel{grid-template-columns:1fr}.oxy-password-panel form{grid-template-columns:1fr 1fr}.oxy-password-panel form .oxy-emp-btn{grid-column:1/-1}
}
@media(max-width:600px){
 .oxy-global-emp-button{top:12px;right:70px;font-size:11px;padding:8px 10px}
 .oxy-global-emp-button span{display:none}.oxy-emp-modal-card{padding:28px 22px}.oxy-employee-shell{padding:22px 14px 45px}.oxy-employee-top-inner{padding:10px 14px;min-height:68px}.oxy-employee-top-inner>div>span{display:none}.oxy-employee-heading h1{font-size:27px}.oxy-employee-stats{grid-template-columns:1fr}.oxy-employee-actions{width:100%}.oxy-employee-actions .oxy-emp-btn{width:100%}.oxy-employee-filters form{align-items:stretch}.oxy-employee-filters label{width:100%}.oxy-employee-filters .oxy-emp-btn{width:100%}.oxy-profile-form,.oxy-entry-form{grid-template-columns:1fr}.oxy-profile-form .full,.oxy-entry-form .full{grid-column:auto}.oxy-panel{padding:16px}.oxy-panel-title{align-items:flex-start;flex-direction:column}.oxy-password-panel form{grid-template-columns:1fr}.oxy-password-panel form .oxy-emp-btn{grid-column:auto}.oxy-employee-login-card{padding:30px 22px}.oxy-employee-login-card h1{font-size:28px}
}
.oxy-footer-explore-row{align-items:flex-start}.oxy-footer-explore-links{display:flex;flex-direction:column;gap:7px}.oxy-footer-explore-links a{display:block}

/* Final polish: EMP Login is a 3D popup and OxyDrops Explore is a vertical column. */
body.oxy-emp-modal-open{overflow:hidden}
.oxy-emp-modal{perspective:1400px}
.oxy-emp-modal-card{transform-style:preserve-3d;transform:rotateX(-10deg) rotateY(3deg) translateY(34px) scale(.88);opacity:0;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .28s ease;box-shadow:0 42px 110px rgba(3,31,61,.38),0 12px 0 rgba(33,134,193,.12)}
.oxy-emp-modal.is-open .oxy-emp-modal-card{transform:rotateX(0) rotateY(0) translateY(0) scale(1);opacity:1}
.oxy-emp-modal-card::after{content:"";position:absolute;inset:8px;border-radius:18px;border:1px solid rgba(33,134,193,.12);pointer-events:none;transform:translateZ(-1px)}
.oxy-emp-modal-logo{display:flex;justify-content:center;margin:0 0 16px}
.oxy-emp-modal-logo img{width:170px;height:auto;max-height:72px;object-fit:contain}
.oxy-emp-modal-card .oxy-employee-kicker{text-align:left;margin-bottom:2px}
.oxy-emp-modal-card .oxy-emp-alert{margin:0 0 16px}
.oxy-emp-modal-card .oxy-emp-login-submit{font-size:14px;min-height:48px}
.oxy-drops-site .oxy-footer-grid .oxy-drops-footer-explore{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.oxy-drops-site .oxy-footer-grid .oxy-drops-footer-explore h3{margin:0 0 5px}
.oxy-drops-site .oxy-footer-grid .oxy-drops-footer-explore a{display:block!important;width:max-content;line-height:1.35}
@media(max-width:760px){.oxy-drops-site .oxy-footer-grid .oxy-drops-footer-explore{align-items:flex-start}}

/* Employee product-line editor: preserves the existing portal visual language. */
.oxy-products-box{grid-column:1/-1;border:1px solid #d9e5ef;border-radius:16px;padding:18px;background:#f8fbfd}
.oxy-products-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.oxy-products-head strong{display:block;color:#0b355f;font-size:16px}.oxy-products-head small{display:block;color:#6c7d8b;margin-top:3px}
.oxy-product-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(120px,.7fr) minmax(140px,.8fr) auto;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid #e7eef4}
.oxy-product-row:last-child{border-bottom:0}
.oxy-product-remove{border:1px solid #e3b8b8;background:#fff7f7;color:#a52a2a;border-radius:10px;padding:10px 12px;cursor:pointer}
.oxy-products-total{text-align:right;padding-top:12px;color:#24435d;font-size:14px}.oxy-products-total strong{color:#0b4f92;font-size:17px}
@media(max-width:760px){.oxy-product-row{grid-template-columns:1fr 1fr}.oxy-product-remove{grid-column:1/-1}.oxy-products-head{align-items:flex-start;flex-direction:column}}


/* Employee dashboard visual upgrade: 3D depth and clear borders.
   Scope is limited to the employee portal; the public OxyRiver template remains unchanged. */
body.oxy-employee-dashboard-body .oxy-employee-shell{position:relative}
body.oxy-employee-dashboard-body .oxy-panel,
body.oxy-employee-dashboard-body .oxy-customer-sidebar,
body.oxy-employee-dashboard-body .oxy-stat,
body.oxy-employee-dashboard-body .oxy-employee-filters{
  border:1px solid #c8dbe8;
  box-shadow:0 2px 0 rgba(255,255,255,.95) inset,0 1px 0 rgba(13,49,88,.08),0 12px 24px rgba(13,49,88,.09),0 18px 0 -13px rgba(33,134,193,.12);
}
body.oxy-employee-dashboard-body .oxy-panel{border-radius:18px;position:relative;overflow:hidden}
body.oxy-employee-dashboard-body .oxy-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;
  border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(33,134,193,.06);
}
body.oxy-employee-dashboard-body .oxy-stat{border-top:3px solid #2186c1}
body.oxy-employee-dashboard-body .oxy-stat.due{border-top-color:#d62d2d}
body.oxy-employee-dashboard-body .oxy-stat.paid{border-top-color:#158447}
body.oxy-employee-dashboard-body .oxy-employee-heading h1{text-shadow:0 1px 0 #fff}
body.oxy-employee-dashboard-body .oxy-emp-btn{
  border:1px solid rgba(8,57,95,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(5,39,70,.18),0 5px 12px rgba(13,49,88,.14);
  transform:translateY(0);transition:transform .18s,box-shadow .18s;
}
body.oxy-employee-dashboard-body .oxy-emp-btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(5,39,70,.18),0 9px 18px rgba(13,49,88,.18)}
body.oxy-employee-dashboard-body .oxy-entry-form,
body.oxy-employee-dashboard-body .oxy-products-box{
  border:1px solid #c5dce9;box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(18,57,96,.05);
}
.oxy-pdf-import-panel{background:linear-gradient(145deg,#fff,#f5fbff)}
.oxy-import-badge{font-size:10px;font-weight:900;letter-spacing:.8px;color:#158447;background:#e9f8ef;border:1px solid #bfe8ce;border-radius:999px;padding:7px 10px}
.oxy-pdf-help{margin:0 0 15px;color:#65798d;font-size:13px;line-height:1.6}
.oxy-pdf-import-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.oxy-pdf-drop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px dashed #9fc6dc;border-radius:14px;background:#f8fcff;color:#123f78;font-weight:800}
.oxy-pdf-drop input{max-width:100%}.oxy-pdf-drop small{width:100%;font-size:11px;color:#7890a4;font-weight:600}
@media(max-width:760px){.oxy-pdf-import-form{grid-template-columns:1fr}.oxy-import-badge{align-self:flex-start}}

/* EMP dashboard landing menu */
.oxy-employee-home-body{background:linear-gradient(180deg,#f4f8fb 0%,#eef4f8 100%)}
.oxy-employee-home{max-width:1180px;margin:0 auto;padding:54px 28px 70px}
.oxy-home-hero{text-align:center;margin:10px auto 34px}
.oxy-home-hero h1{font-size:42px;line-height:1.08;margin:10px 0 12px;color:#0b3453;letter-spacing:-1px}
.oxy-home-hero p{margin:0 auto;color:#5f7180;font-size:16px;max-width:650px}
.oxy-emp-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:28px 0}
.oxy-emp-menu-card{min-height:245px;padding:30px;border-radius:22px;background:#fff;border:1px solid rgba(10,48,78,.09);box-shadow:0 14px 35px rgba(8,44,70,.09);text-decoration:none!important;display:flex;flex-direction:column;align-items:flex-start;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;position:relative;overflow:hidden}
.oxy-emp-menu-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:#1474ad}
.oxy-emp-menu-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(8,44,70,.14);border-color:rgba(20,116,173,.25)}
.oxy-emp-menu-card.customers:before{background:#1976a8}.oxy-emp-menu-card.payments:before{background:#2f8f6b}.oxy-emp-menu-card.due:before{background:#d56b32}
.oxy-menu-icon{width:58px;height:58px;border-radius:16px;background:#edf6fb;display:grid;place-items:center;font-size:27px;font-weight:800;color:#0b5d8c;margin-bottom:24px}
.oxy-emp-menu-card.payments .oxy-menu-icon{background:#edf8f3;color:#267957}.oxy-emp-menu-card.due .oxy-menu-icon{background:#fff2e9;color:#bd5724}
.oxy-emp-menu-card strong{font-size:25px;color:#0a3452;margin-bottom:8px}
.oxy-emp-menu-card small{font-size:14px;line-height:1.55;color:#6a7c89;max-width:260px}
.oxy-emp-menu-card b{margin-top:auto;padding-top:22px;color:#0b6b9f;font-size:13px}
.oxy-home-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:700px;margin:28px auto 0}
.oxy-home-summary>div{background:#fff;border-radius:18px;padding:20px 24px;box-shadow:0 8px 25px rgba(8,44,70,.07);display:flex;justify-content:space-between;align-items:center}
.oxy-home-summary span{color:#6b7c88;font-size:13px}.oxy-home-summary strong{font-size:22px;color:#0a3452}
@media(max-width:800px){.oxy-emp-menu-grid{grid-template-columns:1fr}.oxy-home-hero h1{font-size:34px}.oxy-home-summary{grid-template-columns:1fr}}

/* ================================================================
   EMP Billing + GSTR upgrade
   ================================================================ */
.oxy-emp-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.oxy-emp-menu-card{min-height:245px;border-radius:24px;padding:30px;display:flex;flex-direction:column;justify-content:flex-start;position:relative;overflow:hidden;border:1px solid rgba(18,63,120,.10);box-shadow:0 18px 45px rgba(18,63,120,.12),inset 0 1px 0 rgba(255,255,255,.85);background:linear-gradient(145deg,#fff,#f3f8fd);transition:.25s}
.oxy-emp-menu-card:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-50px;top:-50px;background:rgba(64,139,203,.10)}
.oxy-emp-menu-card:hover{transform:translateY(-7px);box-shadow:0 26px 55px rgba(18,63,120,.18)}
.oxy-emp-menu-card .oxy-menu-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#123f78;color:#fff;font-size:22px;font-weight:800;box-shadow:0 10px 20px rgba(18,63,120,.2);margin-bottom:22px}
.oxy-emp-menu-card strong{font-size:23px;color:#123f78;position:relative}.oxy-emp-menu-card small{font-size:14px;line-height:1.6;color:#66788d;margin:10px 0 22px;max-width:320px}.oxy-emp-menu-card b{margin-top:auto;color:#287db5;font-size:13px}
.oxy-bill-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);gap:24px}
.oxy-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.oxy-form-grid label,.oxy-bill-form>form>label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:800;color:#45617b}
.oxy-form-grid input,.oxy-form-grid select,.oxy-bill-form textarea,.oxy-bill-item input{border:1px solid #d9e4ef;border-radius:12px;padding:12px 13px;background:#fff;font:inherit;color:#17385f;outline:none}
.oxy-form-grid input:focus,.oxy-form-grid select:focus,.oxy-bill-form textarea:focus,.oxy-bill-item input:focus{border-color:#2b82bc;box-shadow:0 0 0 3px rgba(43,130,188,.10)}
.oxy-items-head{display:flex;justify-content:space-between;align-items:center;margin:22px 0 10px}.oxy-items-head h3{margin:0;color:#123f78}
.oxy-bill-item{display:grid;grid-template-columns:1.6fr .65fr .85fr 42px;gap:9px;margin-bottom:9px}.oxy-remove-item{border:0;border-radius:12px;background:#fff0f0;color:#bd3f46;font-size:20px;cursor:pointer}
.oxy-bill-totals{margin:20px 0;padding:17px;border-radius:16px;background:#f5f9fd;display:grid;gap:8px;color:#536d86}.oxy-bill-totals span{display:flex;justify-content:space-between}.oxy-bill-totals .grand{padding-top:10px;border-top:1px solid #dbe7f1;color:#123f78;font-size:17px}.oxy-bill-totals strong{color:#123f78}
.oxy-mini-invoice{margin-top:18px;border-radius:20px;background:#fff;padding:22px;box-shadow:0 15px 40px rgba(18,63,120,.12);border:1px solid #e1ebf4}.mini-brand{font-weight:900;letter-spacing:3px;font-size:22px;color:#123f78}.mini-line{height:4px;background:linear-gradient(90deg,#123f78,#45a1d0);border-radius:4px;margin:13px 0 22px}.oxy-mini-invoice p{font-size:13px;color:#66788d}.mini-total{margin-top:28px;padding:18px;border-radius:15px;background:#123f78;color:#fff;display:flex;justify-content:space-between;align-items:center}.mini-total strong{font-size:23px}.oxy-help{font-size:12px;color:#77899b;line-height:1.6;margin-top:18px}.oxy-invoice-success{margin-top:24px;border-left:5px solid #2b8b63}.oxy-invoice-success h2{margin-top:0;color:#123f78}
.oxy-gstr-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.oxy-gstr-summary>div{padding:22px;border-radius:18px;background:linear-gradient(145deg,#fff,#f4f8fc);box-shadow:0 12px 32px rgba(18,63,120,.10);border:1px solid #e0eaf3}.oxy-gstr-summary span{display:block;color:#71859a;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}.oxy-gstr-summary strong{display:block;color:#123f78;font-size:25px;margin-top:8px}
.oxy-panel-title{display:flex;justify-content:space-between;align-items:center;gap:15px}.oxy-export-actions{display:flex;gap:8px;flex-wrap:wrap}.oxy-table-wrap{overflow:auto}.oxy-gstr-table table{width:100%;border-collapse:separate;border-spacing:0;margin-top:16px}.oxy-gstr-table th{background:#123f78;color:#fff;text-align:left;padding:13px;font-size:11px;white-space:nowrap}.oxy-gstr-table td{padding:13px;border-bottom:1px solid #e7eef5;color:#4d647c;font-size:12px;vertical-align:top}.oxy-gstr-table tr:nth-child(even) td{background:#f8fbfd}
.oxy-emp-top-link{margin-right:14px;color:#fff;font-weight:700}
@media(max-width:900px){.oxy-emp-menu-grid,.oxy-bill-grid,.oxy-gstr-summary{grid-template-columns:1fr}.oxy-form-grid{grid-template-columns:1fr}}
@media(max-width:600px){.oxy-bill-item{grid-template-columns:1fr 1fr 1fr 40px}.oxy-bill-item input:first-child{grid-column:1/-1}.oxy-panel-title{align-items:flex-start;flex-direction:column}}

.oxy-sales-analytics{margin-top:24px}.oxy-sales-total{font-size:26px;color:#123f78}.oxy-sales-filter{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto auto;gap:10px;align-items:end;margin-top:18px}.oxy-sales-filter label{font-size:11px;font-weight:800;color:#61768a}.oxy-sales-filter input,.oxy-sales-filter select{display:block;width:100%;margin-top:6px;border:1px solid #d9e4ef;border-radius:10px;padding:10px;background:#fff;color:#17385f}
@media(max-width:1000px){.oxy-sales-filter{grid-template-columns:1fr 1fr}.oxy-sales-filter .oxy-emp-btn{width:100%;text-align:center}}


/* Billing page: premium 3D card depth, raised fields and state selector. */
body.oxy-bills-body{background:radial-gradient(circle at 10% 0%,rgba(67,155,211,.14),transparent 34%),linear-gradient(180deg,#f3f8fc 0%,#eaf2f7 100%)}
body.oxy-bills-body .oxy-bill-form,body.oxy-bills-body .oxy-bill-preview,body.oxy-bills-body .oxy-bills-list,body.oxy-bills-body .oxy-invoice-success{border:1px solid #c7dbe8;border-radius:24px;box-shadow:0 2px 0 rgba(255,255,255,.95) inset,0 1px 0 rgba(11,52,83,.08),0 18px 38px rgba(11,52,83,.11),0 20px 0 -14px rgba(33,134,193,.10);position:relative;overflow:hidden}
body.oxy-bills-body .oxy-bill-form:before,body.oxy-bills-body .oxy-bill-preview:before,body.oxy-bills-body .oxy-bills-list:before{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(255,255,255,.78);border-radius:24px;box-shadow:inset 0 0 0 1px rgba(33,134,193,.05)}
body.oxy-bills-body .oxy-form-grid input,body.oxy-bills-body .oxy-form-grid select,body.oxy-bills-body .oxy-bill-form textarea,body.oxy-bills-body .oxy-bill-item input{border:1px solid #c9dbe7;background:linear-gradient(180deg,#fff,#f7fbfe);box-shadow:inset 0 2px 4px rgba(13,49,88,.05),0 2px 5px rgba(13,49,88,.05);transition:.18s ease}
body.oxy-bills-body .oxy-form-grid select{appearance:auto;cursor:pointer;font-weight:700}
body.oxy-bills-body .oxy-form-grid input:focus,body.oxy-bills-body .oxy-form-grid select:focus,body.oxy-bills-body .oxy-bill-form textarea:focus,body.oxy-bills-body .oxy-bill-item input:focus{transform:translateY(-1px);border-color:#2186c1;box-shadow:0 0 0 3px rgba(33,134,193,.12),inset 0 2px 4px rgba(13,49,88,.05),0 7px 14px rgba(13,49,88,.09)}
body.oxy-bills-body .oxy-bill-totals{border:1px solid #cbdfea;background:linear-gradient(145deg,#f9fcff,#edf5fa);box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(18,57,96,.07)}
body.oxy-bills-body .oxy-emp-btn.primary{border:1px solid rgba(8,57,95,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(5,39,70,.18),0 10px 20px rgba(13,49,88,.18)}
body.oxy-bills-body .oxy-emp-btn.primary:hover{transform:translateY(-2px)}
body.oxy-bills-body .oxy-table-wrap table{border-collapse:separate;border-spacing:0;width:100%;border:1px solid #d5e3ec;border-radius:16px;overflow:hidden;box-shadow:0 7px 18px rgba(13,49,88,.06)}
body.oxy-bills-body .oxy-table-wrap th{background:linear-gradient(180deg,#154f84,#103e6a);color:#fff;padding:13px;font-size:11px;white-space:nowrap}
body.oxy-bills-body .oxy-table-wrap td{background:#fff;padding:13px;border-bottom:1px solid #e4edf3;color:#4d647c;font-size:12px}
body.oxy-bills-body .oxy-table-wrap tr:nth-child(even) td{background:#f7fbfd}
body.oxy-bills-body .oxy-table-wrap tr:hover td{background:#eef7fc}


/* v4 billing form consistency: every customer field uses the same raised 3D surface. */
body.oxy-bills-body .oxy-form-grid label,
body.oxy-bills-body .oxy-bill-address-field{position:relative}
body.oxy-bills-body .oxy-form-grid input,
body.oxy-bills-body .oxy-form-grid select,
body.oxy-bills-body .oxy-bill-address-field textarea,
body.oxy-bills-body .oxy-bill-item input{
    width:100%;min-height:46px;border:1px solid #c9dbe7;border-radius:12px;
    background:linear-gradient(180deg,#ffffff 0%,#f7fbfe 100%);
    color:#17385f;font:inherit;font-weight:600;outline:none;
    box-sizing:border-box;padding:12px 13px;
    box-shadow:inset 0 2px 4px rgba(13,49,88,.045),0 3px 7px rgba(13,49,88,.07);
}
body.oxy-bills-body .oxy-form-grid select.oxy-bill-select,
body.oxy-bills-body .oxy-form-grid select#oxyGstMode{
    appearance:none;-webkit-appearance:none;cursor:pointer;
    padding-right:42px;
    background-image:linear-gradient(45deg,transparent 50%,#2b668e 50%),linear-gradient(135deg,#2b668e 50%,transparent 50%),linear-gradient(180deg,#fff,#f7fbfe);
    background-position:calc(100% - 19px) 20px,calc(100% - 13px) 20px,0 0;
    background-size:6px 6px,6px 6px,100% 100%;background-repeat:no-repeat;
}
body.oxy-bills-body .oxy-form-grid input:focus,
body.oxy-bills-body .oxy-form-grid select:focus,
body.oxy-bills-body .oxy-bill-address-field textarea:focus,
body.oxy-bills-body .oxy-bill-item input:focus{
    transform:translateY(-1px);border-color:#2186c1;
    box-shadow:0 0 0 3px rgba(33,134,193,.12),inset 0 2px 4px rgba(13,49,88,.045),0 8px 16px rgba(13,49,88,.10)
}
body.oxy-bills-body .oxy-bill-address-field{margin-top:15px}
body.oxy-bills-body .oxy-state-field select{font-weight:700}
body.oxy-bills-body .oxy-state-field select:invalid{color:#7890a4}
@media(max-width:900px){body.oxy-bills-body .oxy-form-grid{grid-template-columns:1fr}.oxy-bill-address-field{margin-top:15px}}

/* EMP dashboard password card */
.oxy-emp-menu-card.password{cursor:default;}
.oxy-emp-menu-card.password:before{background:#7b5bb5}
.oxy-emp-menu-card.password .oxy-menu-icon{background:#f1ecfb;color:#6c4da8}
.oxy-dashboard-password-form{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:8px;position:relative;z-index:2}
.oxy-dashboard-password-form label{display:flex;flex-direction:column;gap:5px;color:#46627b;font-size:11px;font-weight:800}
.oxy-dashboard-password-form input{width:100%;box-sizing:border-box;border:1px solid #d4e1ec;border-radius:10px;padding:9px 10px;background:#fff;color:#17385f;font:inherit;outline:none}
.oxy-dashboard-password-form input:focus{border-color:#7b5bb5;box-shadow:0 0 0 3px rgba(123,91,181,.10)}
.oxy-dashboard-password-form .oxy-emp-btn{grid-column:1/-1;justify-self:start;padding:10px 14px;font-size:12px}
@media(max-width:900px){.oxy-dashboard-password-form{grid-template-columns:1fr}.oxy-dashboard-password-form .oxy-emp-btn{grid-column:auto;width:100%}}

/* EMP customer search: compact 3D control */
.oxy-customer-search-enhanced{position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px!important;background:linear-gradient(145deg,#f8fcff,#e8f1f6)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 7px 18px rgba(18,71,100,.10)!important}
.oxy-search-icon{position:absolute;left:25px;z-index:2;font-size:22px;line-height:1;color:#277aa4;pointer-events:none;text-shadow:1px 1px 1px rgba(255,255,255,.8)}
.oxy-search-count{position:absolute;right:24px;z-index:2;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:800;color:#3e6073;background:linear-gradient(145deg,#fff,#dce9f0);box-shadow:1px 2px 4px rgba(30,70,90,.12);pointer-events:none}
.oxy-customer-search-enhanced .oxy-customer-search-3d{padding-left:42px!important;padding-right:68px!important}
.oxy-customer-search-3d{
  appearance:none!important;
  border:1px solid rgba(30,90,130,.22)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#ffffff,#eaf3f8)!important;
  box-shadow:inset 1px 1px 2px rgba(255,255,255,.9), inset -1px -1px 3px rgba(30,80,110,.08), 0 6px 14px rgba(12,63,92,.12)!important;
  min-height:44px!important;
  padding:0 16px 0 42px!important;
  transition:.18s ease!important;
}
.oxy-customer-search-3d:focus{
  outline:none!important;
  border-color:rgba(18,120,170,.45)!important;
  box-shadow:inset 1px 1px 2px rgba(255,255,255,.95), inset -1px -1px 3px rgba(30,80,110,.08), 0 8px 20px rgba(12,100,150,.18)!important;
  transform:translateY(-1px);
}
/* Compact 3D Kolkata timestamp badge */
.oxy-customer-item em{
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  margin-top:5px!important;
  padding:3px 8px!important;
  border-radius:8px!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-style:normal!important;
  color:#496170!important;
  background:linear-gradient(145deg,#f8fbfd,#e5eef3)!important;
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.95), 0 2px 5px rgba(30,70,90,.10)!important;
}

.oxy-bill-form .oxy-emp-btn.primary{
  min-height:48px;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(5,65,105,.20), inset 0 1px 0 rgba(255,255,255,.22);
}

/* Vehicle Document Management */
.oxy-vehicle-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.oxy-vehicle-list{position:sticky;top:18px}
.oxy-vehicle-items{display:grid;gap:8px}
.oxy-vehicle-item{display:block;text-decoration:none;padding:15px;border:1px solid #dbe7ef;border-radius:14px;background:linear-gradient(145deg,#fff,#eef6fa);box-shadow:0 7px 16px rgba(12,63,92,.08);color:#17385f;transition:.18s}
.oxy-vehicle-item:hover,.oxy-vehicle-item.active{transform:translateY(-2px);border-color:#6ba9c9;box-shadow:0 10px 22px rgba(12,63,92,.14)}
.oxy-vehicle-item strong{display:block;font-size:15px}.oxy-vehicle-item small{display:block;margin-top:5px;color:#62798a}
.oxy-vehicle-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.oxy-vehicle-form label{display:flex;flex-direction:column;gap:6px;font-weight:800;color:#38586d;font-size:12px}
.oxy-vehicle-form input,.oxy-vehicle-form textarea{width:100%;box-sizing:border-box;border:1px solid #d3e2eb;border-radius:12px;padding:11px 12px;background:#fff;color:#17385f;font:inherit}
.oxy-vehicle-form input:focus,.oxy-vehicle-form textarea:focus{outline:none;border-color:#6da9c7;box-shadow:0 0 0 3px rgba(42,130,172,.1)}
.oxy-vehicle-form .full{grid-column:1/-1}
.oxy-vehicle-doc-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px;border-radius:16px;background:linear-gradient(145deg,#f8fcff,#eaf3f7);box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(18,71,100,.08)}
.oxy-vehicle-doc-grid label{font-size:11px}
.oxy-vehicle-note{color:#587082;line-height:1.55}
.oxy-emp-menu-card.vehicles{border-color:rgba(42,130,172,.22)}
@media(max-width:900px){.oxy-vehicle-grid{grid-template-columns:1fr}.oxy-vehicle-list{position:static}.oxy-vehicle-form,.oxy-vehicle-doc-grid{grid-template-columns:1fr}.oxy-vehicle-form .full,.oxy-vehicle-doc-grid{grid-column:auto}}