@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800&display=swap');

:root{
  --bg:#f7f8ff;
  --bg-soft:#f1f3ff;
  --card:#ffffff;
  --text:#101226;
  --muted:#6f7287;
  --line:#e7e9f5;
  --accent:#4f46e5;
  --accent-dark:#342fc4;
  --accent-2:#6f67ff;
  --accent-soft:#eef0ff;
  --cyan:#22c7c9;
  --success:#139768;
  --success-soft:#eaf9f3;
  --danger:#cc3d4a;
  --danger-soft:#fff0f2;
  --warning:#d89016;
  --shadow-sm:0 8px 24px rgba(36,39,76,.06);
  --shadow:0 20px 55px rgba(36,39,76,.10);
  --shadow-lg:0 32px 80px rgba(49,46,129,.16);
  --radius-sm:14px;
  --radius:22px;
  --radius-lg:30px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Alexandria',Tahoma,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 5%,rgba(106,99,255,.12),transparent 26%),
    radial-gradient(circle at 90% 18%,rgba(34,199,201,.07),transparent 24%),
    var(--bg);
  color:var(--text);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--accent);color:#fff}
.container{width:min(1180px,92%);margin:auto}
.narrow{width:min(760px,92%)}
a{color:inherit;text-decoration:none;transition:.22s ease}
img{max-width:100%;display:block}

/* Header */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(229,231,246,.9);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 8px 30px rgba(39,42,83,.04);
}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{
  font-size:1.23rem;
  font-weight:800;
  letter-spacing:-.03em;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand::before{
  content:'⚡';
  display:grid;
  place-items:center;
  width:40px;height:40px;
  border-radius:13px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow:0 10px 24px rgba(79,70,229,.25);
}
.nav nav{display:flex;align-items:center;gap:30px;color:#51556a;font-size:.9rem;font-weight:500}
.nav nav a{position:relative;padding:8px 0}
.nav nav a:hover{color:var(--accent)}
.nav nav a::after{content:'';position:absolute;right:0;bottom:0;width:0;height:2px;border-radius:10px;background:var(--accent);transition:.22s}
.nav nav a:hover::after{width:100%}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding:92px 0 74px;
  background:
    radial-gradient(circle at 0 35%,rgba(91,69,255,.18),transparent 28%),
    radial-gradient(circle at 100% 5%,rgba(65,203,205,.10),transparent 22%),
    linear-gradient(180deg,#fff 0%,#f8f9ff 100%);
}
.hero::after{
  content:'';
  position:absolute;
  width:460px;height:460px;
  border:1px solid rgba(93,85,226,.08);
  border-radius:50%;
  left:-190px;bottom:-300px;
  box-shadow:0 0 0 55px rgba(93,85,226,.025),0 0 0 110px rgba(93,85,226,.02);
}
.hero-grid{display:grid;grid-template-columns:1.32fr .78fr;gap:64px;align-items:center;position:relative;z-index:2}
.hero h1{
  font-size:clamp(2.6rem,5.7vw,5.1rem);
  line-height:1.16;
  letter-spacing:-.055em;
  margin:20px 0 24px;
  font-weight:800;
}
.hero h1 strong,.hero h1 span{color:var(--accent)}
.hero p,.lead{font-size:1.1rem;color:var(--muted);max-width:700px}
.pill,.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.8rem;
  font-weight:700;
  color:var(--accent);
  background:linear-gradient(135deg,#f1f2ff,#e9ecff);
  border:1px solid #e2e5ff;
  padding:8px 13px;
  border-radius:999px;
}
.pill::before,.eyebrow::before{content:'✦';color:var(--cyan)}
.actions{display:flex;gap:12px;margin:32px 0 24px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  border:1px solid transparent;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  padding:12px 20px;
  font:700 .9rem 'Alexandria',sans-serif;
  cursor:pointer;
  box-shadow:0 11px 26px rgba(79,70,229,.22);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(79,70,229,.29)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:15px 26px;font-size:.95rem;min-height:52px}
.secondary{background:#fff;color:var(--accent);border-color:#cfd3ff;box-shadow:none}
.secondary:hover{background:#f7f7ff;border-color:#aeb3ff}
.trust,.muted{color:var(--muted);font-size:.85rem}

.hero-card,.card{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(226,228,242,.95);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.hero-card{
  position:relative;
  overflow:hidden;
  padding:36px;
  text-align:center;
  box-shadow:var(--shadow-lg);
  border-color:#e1e3ff;
}
.hero-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(79,70,229,.07),transparent 45%,rgba(34,199,201,.06));
  pointer-events:none;
}
.hero-card>div{font-size:4.4rem;filter:drop-shadow(0 10px 15px rgba(40,43,82,.1))}
.hero-card h2{margin:.5rem 0;font-size:1.45rem}
.mega-price{display:block;font-size:2.35rem;font-weight:800;margin:16px;color:var(--accent)}

/* Sections */
.section{padding:78px 0}
.soft{background:linear-gradient(180deg,rgba(255,255,255,.75),#fff)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
.section-head h2{font-size:2.15rem;letter-spacing:-.035em;margin:.3rem 0;font-weight:800}
.section-head p{color:var(--muted);margin:0}

/* Products / plans */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-card{
  padding:25px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.product-card::before{
  content:'';
  position:absolute;
  width:130px;height:130px;
  border-radius:50%;
  top:-75px;left:-55px;
  background:rgba(79,70,229,.06);
}
.product-card:hover{transform:translateY(-6px);border-color:#d5d8ff;box-shadow:0 24px 55px rgba(55,52,120,.12)}
.product-card .emoji,.emoji{
  display:grid;
  place-items:center;
  width:58px;height:58px;
  border-radius:17px;
  font-size:2rem;
  background:linear-gradient(145deg,#f3f4ff,#fff);
  border:1px solid #e4e6ff;
  box-shadow:0 10px 24px rgba(46,49,100,.07);
}
.product-card h3{font-size:1.05rem;line-height:1.6;margin:1rem 0 .3rem;font-weight:700}
.product-card p{color:var(--muted);font-size:.86rem;flex:1;margin-top:5px}
.price-row{display:flex;gap:10px;align-items:center;margin:16px 0}
.price-row strong{font-size:1.35rem;color:var(--text);font-weight:800}
.price-row del{color:#9b9dae;font-size:.84rem}
.price-row.big strong{font-size:2.25rem;color:var(--accent)}
.product-card .btn{width:100%;margin-top:6px}

/* Features */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.three>div{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow-sm);
}
.three b{display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);width:46px;height:46px;border-radius:14px;margin-bottom:14px}

/* Product detail */
.product-page{display:grid;grid-template-columns:.86fr 1.3fr;gap:64px;align-items:start}
.product-visual{
  aspect-ratio:1/1;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),transparent 20%),
    linear-gradient(145deg,#e9ebff 0%,#f8f9ff 55%,#e8fbfb 100%);
  border:1px solid #dee1fa;
  border-radius:34px;
  display:grid;
  place-items:center;
  text-align:center;
  box-shadow:var(--shadow);
}
.product-visual::after{content:'';position:absolute;width:180px;height:180px;border:1px solid rgba(79,70,229,.12);border-radius:50%;box-shadow:0 0 0 45px rgba(79,70,229,.04),0 0 0 90px rgba(79,70,229,.025)}
.big-emoji{font-size:8rem;position:relative;z-index:1;filter:drop-shadow(0 18px 20px rgba(36,38,80,.12))}
.product-copy{font-size:1rem}
.product-copy h1{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1.25}
.checks{padding:0;list-style:none;display:grid;gap:8px}
.checks li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.checks li:before{content:'✓';display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--success-soft);color:var(--success);font-weight:900;margin-left:8px}
.buybox{margin-top:26px;padding:22px;background:linear-gradient(135deg,#fff,#f8f8ff);border:1px solid #e2e4f7;border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:var(--shadow-sm)}

/* Checkout */
.checkout-grid{display:grid;grid-template-columns:1.35fr .7fr;gap:28px;align-items:start}
.form{display:grid;gap:16px;padding:28px}
.form label{display:grid;gap:7px;font-weight:600;font-size:.9rem}
.form label span{font-size:.76rem;font-weight:400;color:var(--muted)}
input,textarea,select{
  width:100%;
  border:1px solid #dfe2ef;
  border-radius:13px;
  padding:13px 14px;
  background:#fff;
  font:400 .9rem 'Alexandria',sans-serif;
  color:var(--text);
  outline:none;
  transition:.2s ease;
}
input:hover,textarea:hover,select:hover{border-color:#c8cbee}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(79,70,229,.09)}
.split{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.order-summary{padding:26px;position:sticky;top:105px;background:linear-gradient(160deg,#fff,#fafaff)}
.order-summary h3{font-size:1.1rem;margin-bottom:8px}
.order-summary hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.summary-line{display:flex;justify-content:space-between;align-items:center;font-size:1rem}
.summary-line strong{font-size:1.35rem;color:var(--accent)}
.secure{margin-top:20px;padding:12px 14px;border-radius:12px;background:var(--success-soft);color:#167252;font-size:.82rem;font-weight:600}

/* Manual payment UI – works if these classes exist in the payment patch */
.payment-methods,.payment-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 18px}
.payment-option,.payment-method{
  position:relative;
  border:1px solid #e1e3f1;
  border-radius:16px;
  padding:16px;
  background:#fff;
  cursor:pointer;
  transition:.2s ease;
}
.payment-option:hover,.payment-method:hover{border-color:#bfc3ff;box-shadow:0 12px 25px rgba(79,70,229,.08)}
.payment-option.active,.payment-method.active,.payment-option:has(input:checked),.payment-method:has(input:checked){border-color:var(--accent);background:#f8f8ff;box-shadow:0 0 0 3px rgba(79,70,229,.08)}
.payment-details,.bank-details,.cliq-details{background:#f8f9ff;border:1px solid #e4e6f5;border-radius:16px;padding:18px;margin-top:12px}
.payment-details strong,.bank-details strong,.cliq-details strong{color:var(--text)}

.hidden{display:none!important}
.error{padding:13px 15px;background:var(--danger-soft);color:var(--danger);border:1px solid #ffd5da;border-radius:12px;font-size:.85rem}
.center{text-align:center}
.success,.fail{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;margin:0 auto 20px;font-size:2rem;font-weight:900}
.success{background:var(--success-soft);color:var(--success)}
.fail{background:var(--danger-soft);color:var(--danger)}
.downloads{display:grid;gap:12px;margin:28px 0}
.download-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:right;background:#fff;border:1px solid var(--line);padding:17px;border-radius:16px;box-shadow:var(--shadow-sm)}
.download-card:hover{border-color:#cfd3ff}
.download-card span{font-size:2rem}.download-card small{display:block;color:var(--muted)}
.prose{background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:var(--shadow-sm)}
.prose h1,.prose h2,.prose h3{letter-spacing:-.025em}

/* Admin */
.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:20px}
.admin-head h1{margin:0;font-size:2rem;letter-spacing:-.035em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}
.stats .card{padding:25px;position:relative;overflow:hidden}
.stats .card::after{content:'';position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(79,70,229,.06);left:-30px;bottom:-35px}
.stats span{color:var(--muted);display:block;font-size:.85rem}
.stats strong{display:block;font-size:2rem;margin-top:7px;letter-spacing:-.03em}
.table-wrap{padding:22px;overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0;text-align:right}
th{font-size:.82rem;color:#5e6173;font-weight:600;background:#f8f9ff}
th,td{padding:14px 15px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child{border-radius:0 12px 12px 0}th:last-child{border-radius:12px 0 0 12px}
tbody tr{transition:.2s ease}tbody tr:hover{background:#fafaff}
.status{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#f1f2f6;color:#666b7f;font-size:.76rem;font-weight:600}
.status.paid{background:var(--success-soft);color:#167252}.status.failed{background:var(--danger-soft);color:#a82d39}.status.pending{background:#fff7e6;color:#a56c11}
.checkbox{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;justify-content:flex-start;gap:9px}.checkbox input{width:auto}
.back{color:var(--accent);font-weight:600}

/* Footer */
footer{border-top:1px solid var(--line);padding:42px 0;color:var(--muted);background:rgba(255,255,255,.75)}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:24px}
.footer-grid a:hover{color:var(--accent)}

/* Nice scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#f4f5fb}
::-webkit-scrollbar-thumb{background:#cfd2e4;border-radius:20px;border:2px solid #f4f5fb}
::-webkit-scrollbar-thumb:hover{background:#b7bbd2}

@media(max-width:900px){
  .nav nav{gap:16px;font-size:.82rem}
  .hero-grid,.product-page,.checkout-grid{grid-template-columns:1fr}
  .hero{padding-top:56px}
  .hero-card{max-width:620px;width:100%;margin:auto;order:-1}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .three{grid-template-columns:1fr}
  .product-visual{aspect-ratio:16/10}
  .big-emoji{font-size:5rem}
  .order-summary{position:static}
}

@media(max-width:700px){
  .nav{height:70px}.nav nav{display:none}.brand{font-size:1.05rem}.brand::before{width:36px;height:36px}
  .hero{padding:44px 0 50px}.hero h1{font-size:2.55rem}.hero p,.lead{font-size:.98rem}
  .section{padding:52px 0}.section-head{align-items:start;flex-direction:column}.section-head h2{font-size:1.75rem}
  .products-grid{grid-template-columns:1fr}.product-card{padding:21px}
  .buybox{align-items:stretch;flex-direction:column}
  .stats{grid-template-columns:1fr}
  .payment-methods,.payment-options{grid-template-columns:1fr}
  .footer-grid{display:block;text-align:center}.footer-grid>*+*{margin-top:14px}
}

@media(max-width:520px){
  .container,.narrow{width:min(94%,100% - 24px)}
  .hero h1{font-size:2.2rem}.hero-card{padding:24px}.hero-card>div{font-size:3.5rem}
  .section{padding:44px 0}.form{padding:20px}.split{grid-template-columns:1fr}
  .download-card{grid-template-columns:auto 1fr}.download-card .btn{grid-column:1/-1;width:100%}
  .prose{padding:24px}.admin-head{align-items:flex-start;flex-direction:column}.table-wrap{padding:12px}
}


/* ===== Cart + tracking + reviews ===== */
.cart-link{display:inline-flex!important;align-items:center;gap:7px}.cart-badge{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--accent);color:#fff;display:inline-grid;place-items:center;font-size:12px;font-weight:800}.product-actions,.buy-actions,.hero-card-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.product-actions form,.buy-actions form,.hero-card-actions form{margin:0}.product-actions .btn{flex:1}.track-strip{padding:0 0 20px}.track-strip-inner{background:linear-gradient(135deg,#15182f,#4f46e5);color:#fff;border-radius:24px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.track-strip .eyebrow,.track-strip p{color:#dfe2ff}.track-strip h3{margin:4px 0 5px;font-size:25px}.track-strip .btn{background:#fff;color:#312e81}.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}.cart-items{padding:8px 22px}.cart-item{display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}.cart-item:last-child{border-bottom:0}.cart-item-emoji{width:48px;height:48px;display:grid;place-items:center;background:var(--accent-soft);border-radius:14px;font-size:25px}.cart-item-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.cart-item-copy small{color:var(--muted)}.cart-item-price{font-weight:800}.link-danger{border:0;background:transparent;color:var(--danger);cursor:pointer;font:inherit;font-weight:700}.cart-summary{position:sticky;top:110px}.cart-summary .btn{width:100%;margin-top:10px}.summary-line.total{font-size:18px;margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}.empty-cart{text-align:center;padding:55px 25px}.empty-cart>div{font-size:52px}.mini-order-item{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.testimonials-section{overflow:hidden}.carousel-nav{display:flex;gap:8px}.carousel-nav button{width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:13px;font-size:28px;cursor:pointer;color:var(--accent)}.reviews-carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:none}.reviews-carousel::-webkit-scrollbar{display:none}.review-card{flex:0 0 min(360px,86vw);scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-sm)}.review-card p{font-size:16px;line-height:1.9;min-height:92px}.review-stars{letter-spacing:2px;color:#f0a413}.review-person{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}.review-person>span{grid-row:1/3;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:800}.review-person small{color:var(--muted)}.track-page>h1{margin-bottom:4px}.track-form{margin-top:22px}.track-result{margin-top:18px}.track-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.track-head>div{display:flex;flex-direction:column}.track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.track-grid>div{background:var(--bg-soft);padding:14px;border-radius:14px;display:flex;flex-direction:column;gap:4px}.track-products{border-top:1px solid var(--line);padding-top:14px}.track-products>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0}.notice{padding:14px 16px;border-radius:14px;background:var(--bg-soft);margin-top:16px}.pending-note{background:#fff7e8;color:#8b5a00}.paid-note{background:var(--success-soft);color:var(--success)}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr}.cart-summary{position:static}.track-strip-inner{align-items:flex-start}.track-grid{grid-template-columns:1fr}.cart-item{grid-template-columns:48px minmax(0,1fr) auto}.cart-item form{grid-column:2/4}.product-actions .btn{flex:1 1 140px}}
@media(max-width:680px){.nav{align-items:flex-start}.nav nav{gap:9px}.cart-item{grid-template-columns:44px minmax(0,1fr)}.cart-item-price{grid-column:2}.cart-item form{grid-column:2}.track-strip-inner{flex-direction:column}.track-strip .btn{width:100%}.buy-actions{width:100%}.buy-actions>*{width:100%}.buy-actions .btn{width:100%}.carousel-nav{display:none}}


/* =========================================================
   AWTAD / أدوات التاجر - Logo integration
   ========================================================= */
.brand-logo{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-decoration:none;
    flex:0 0 auto;
    padding:0;
    line-height:1;
}
.brand-logo img{
    display:block;
    width:auto;
    height:72px;
    max-width:360px;
    object-fit:contain;
}
.topbar .nav{
    min-height:92px;
}
@media (max-width: 900px){
    .brand-logo img{
        height:58px;
        max-width:280px;
    }
    .topbar .nav{
        min-height:78px;
    }
}
@media (max-width: 620px){
    .topbar .nav{
        gap:10px;
        align-items:center;
    }
    .brand-logo img{
        height:48px;
        max-width:210px;
    }
    .topbar nav{
        gap:8px;
    }
}
@media (max-width: 420px){
    .brand-logo img{
        height:42px;
        max-width:180px;
    }
}


/* ==========================================================
   Layout polish: Cart / Checkout / Track
   Prevents content from touching card edges and improves RTL
   ========================================================== */

.page-title-block{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 26px;
  padding:0 4px;
}
.page-title-block.compact{margin-bottom:18px}
.page-title-block h1{margin:3px 0 4px}
.page-icon,
.payment-icon{
  width:52px;height:52px;flex:0 0 52px;
  display:grid;place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,#f4f2ff,#eef4ff);
  border:1px solid #e4e3ff;
  font-size:24px;
}

/* Cart */
.cart-page .cart-layout{gap:26px}
.cart-items{padding:10px 24px!important;overflow:hidden}
.cart-item{
  padding:22px 4px!important;
  min-width:0;
}
.cart-item-copy strong,
.cart-item-copy small{overflow-wrap:anywhere}
.cart-item-price{padding-inline:10px;direction:ltr;white-space:nowrap}
.cart-summary{
  padding:26px!important;
  overflow:hidden;
}
.summary-title{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:20px;
  padding-bottom:17px;
  border-bottom:1px solid var(--line);
}
.summary-title>span{font-size:1.2rem;font-weight:800;color:var(--text)}
.summary-title>small{color:var(--muted)}
.cart-summary .summary-line{
  padding:13px 0;
  margin:0;
}
.cart-summary .summary-line strong{direction:ltr}
.cart-summary form{margin:0}
.cart-summary .summary-primary,
.cart-summary .summary-secondary{width:100%;justify-content:center}
.cart-summary .summary-secondary{margin-top:10px}

/* Checkout */
.checkout-page .checkout-grid{gap:30px}
.checkout-main{min-width:0}
.checkout-form-card{padding:28px!important}
.checkout-summary{padding:26px!important;overflow:hidden}
.checkout-summary .summary-title{margin-bottom:10px}
.summary-products{margin:0 -4px 16px;padding:0 4px}
.mini-order-item{
  align-items:center;
  padding:13px 2px!important;
  min-width:0;
}
.mini-order-item span{
  min-width:0;
  overflow-wrap:anywhere;
  padding-inline-end:12px;
}
.mini-order-item strong{direction:ltr;white-space:nowrap}

/* Manual payment block */
#manualPayment.payment-panel,
#manualPayment{
  margin-top:22px!important;
  padding:28px!important;
  overflow:hidden;
  border:1px solid #e2e4f4;
  border-radius:22px;
  background:linear-gradient(160deg,#fff,#fbfbff);
}
.payment-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.payment-panel-head h2{margin:3px 0 0}
.payment-order-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  margin-bottom:16px;
  border:1px solid #e4e6f5;
  background:#f8f9ff;
  border-radius:15px;
}
.payment-order-row>span{color:var(--muted);font-weight:700}
.payment-order-row strong{
  direction:ltr;
  overflow-wrap:anywhere;
  text-align:left;
  font-size:1rem;
}
.payment-method-box{
  padding:20px;
  border:1px solid #e4e6f5;
  border-radius:18px;
  background:#fff;
}
.payment-method-title{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:15px;
  margin-bottom:4px;
  border-bottom:1px solid var(--line);
}
.payment-method-title h3{margin:0}
.payment-data-list>div{
  display:grid;
  grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr);
  gap:18px;
  align-items:start;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.payment-data-list>div:last-child{border-bottom:0}
.payment-data-list span{color:var(--muted);font-size:.88rem;font-weight:600}
.payment-data-list strong{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.65;
}
.ltr-value{direction:ltr;text-align:left;unicode-bidi:plaintext}
.payment-help{
  margin:14px 0 0!important;
  padding:12px 14px;
  color:var(--muted);
  background:#fafaff;
  border-radius:12px;
}
.payment-warning{
  margin-top:18px!important;
  padding:15px 17px!important;
  background:#fff7e8!important;
  color:#8b5a00!important;
  border:1px solid #ffe2a8;
  line-height:1.8;
}

/* Also improves the original single-product manual payment markup */
#manualPayment:not(.payment-panel)>h2{margin-bottom:16px}
#manualPayment:not(.payment-panel)>p{
  padding:12px 14px;
  margin:8px 0;
  background:#f8f9ff;
  border-radius:12px;
}
#cliqBox:not(.payment-method-box),
#bankBox:not(.payment-method-box){
  margin-top:15px;
  padding:18px;
  border:1px solid #e4e6f5;
  border-radius:16px;
  background:#fff;
}
#cliqBox:not(.payment-method-box) p,
#bankBox:not(.payment-method-box) p{
  margin:0;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere;
}
#cliqBox:not(.payment-method-box) p:last-child,
#bankBox:not(.payment-method-box) p:last-child{border-bottom:0}

/* Track order */
.track-page{max-width:900px!important}
.track-form{padding:26px!important}
.track-result{
  padding:26px!important;
  overflow:hidden;
}
.polished-track .track-head{
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.order-number-block{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-inline-end:12px;
}
.order-number-block strong{
  direction:ltr;
  text-align:left;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.polished-track .track-grid{
  gap:14px;
  margin:0 0 22px;
}
.polished-track .track-grid>div{
  padding:17px 18px;
  border:1px solid #ececf7;
  min-width:0;
}
.polished-track .track-grid strong{
  margin-top:3px;
  overflow-wrap:anywhere;
}
.track-products{
  margin-top:4px;
  padding-top:20px!important;
}
.track-products h3{margin:0 0 10px}
.track-product-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px!important;
  align-items:center;
  padding:13px 0!important;
}
.track-product-row span{min-width:0;overflow-wrap:anywhere}
.track-product-row strong{direction:ltr;white-space:nowrap}
.polished-track .notice{
  margin-top:20px;
  padding:16px 18px;
  line-height:1.8;
  text-align:center;
}

@media(max-width:900px){
  .checkout-page .checkout-grid{gap:22px}
  .checkout-summary{order:-1;position:static}
}
@media(max-width:680px){
  .page-title-block{align-items:flex-start}
  .page-icon,.payment-icon{width:46px;height:46px;flex-basis:46px}
  .cart-items,.cart-summary,.checkout-form-card,#manualPayment.payment-panel,#manualPayment,.checkout-summary,.track-form,.track-result{
    padding:20px!important;
  }
  .cart-item{
    grid-template-columns:46px minmax(0,1fr) auto!important;
    gap:10px!important;
  }
  .cart-item form{grid-column:2/4!important}
  .payment-order-row{align-items:flex-start;flex-direction:column;gap:5px}
  .payment-data-list>div{
    grid-template-columns:1fr;
    gap:4px;
  }
  .payment-data-list strong{text-align:right}
  .ltr-value{text-align:left!important}
  .track-head{align-items:flex-start!important}
  .polished-track .track-grid{grid-template-columns:1fr!important}
}


/* ==========================================================
   Header / approved logo / favicon-ready layout
   ========================================================== */
.brand-logo::before,
.brand.brand-logo::before{
  content:none!important;
  display:none!important;
}
.topbar .nav{
  height:auto!important;
  min-height:128px!important;
  padding-block:10px;
}
.brand-logo{
  min-width:0;
  overflow:visible;
}
.brand-logo img{
  width:auto!important;
  height:112px!important;
  max-width:560px!important;
  object-fit:contain;
  object-position:center;
}
.nav nav{
  flex-wrap:wrap;
}

/* ==========================================================
   Admin Orders - polished desktop table
   ========================================================== */
.admin-head{
  margin-bottom:22px;
}
.stats{
  margin-bottom:24px;
}
.table-wrap{
  padding:26px!important;
  overflow:visible!important;
}
.admin-orders-toolbar{
  padding-bottom:20px;
  margin:0 0 20px!important;
  border-bottom:1px solid #e9ebf6;
}
.admin-orders-filters{
  gap:12px!important;
}
.admin-orders-filters label{
  color:#555a70;
}
.admin-orders-filters select{
  min-height:44px;
  border-color:#e1e4f1!important;
  box-shadow:0 3px 12px rgba(35,39,72,.025);
}
.bulk-bar{
  margin:2px 0 18px;
  padding:14px 16px;
  border-radius:14px;
  background:#fafaff;
  border:1px solid #ececf7;
}
.bulk-delete{
  box-shadow:none!important;
}
.orders-title-row{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin:4px 0 15px;
}
.orders-title-row h2{
  margin:3px 0 0;
  font-size:1.45rem;
}
.orders-help{
  color:var(--muted);
  font-size:.82rem;
  max-width:420px;
}
.admin-orders-scroll{
  width:100%;
  overflow-x:auto;
  border:1px solid #eceef7;
  border-radius:18px;
  background:#fff;
  scrollbar-color:#c9ccec transparent;
  scrollbar-width:thin;
}
.admin-orders-table{
  min-width:1080px;
  border-collapse:separate!important;
  border-spacing:0!important;
  table-layout:auto;
}
.admin-orders-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  padding:16px 14px!important;
  background:#f7f8fe;
  color:#5e6276;
  font-size:.82rem;
  font-weight:750;
  white-space:nowrap;
  border-bottom:1px solid #e7e9f4;
}
.admin-orders-table thead th:first-child{
  border-radius:0 16px 0 0;
}
.admin-orders-table thead th:last-child{
  border-radius:16px 0 0 0;
}
.admin-orders-table tbody td{
  padding:16px 14px!important;
  border-bottom:1px solid #edf0f7!important;
  background:#fff;
  vertical-align:middle!important;
}
.admin-orders-table tbody tr:last-child td{
  border-bottom:0!important;
}
.admin-orders-table tbody tr:nth-child(even) td{
  background:#fcfcff;
}
.admin-orders-table tbody tr:hover td{
  background:#f8f8ff;
}
.col-check{
  width:48px;
  text-align:center!important;
}
.order-check{
  width:19px!important;
  height:19px!important;
  accent-color:#5b50f3;
  cursor:pointer;
}
.order-no-cell{
  min-width:155px;
}
.order-no-cell strong{
  direction:ltr;
  display:inline-block;
  color:#171a2f;
  font-size:.9rem;
  letter-spacing:.01em;
}
.customer-cell{
  min-width:235px;
}
.customer-cell span{
  direction:ltr;
  display:inline-block;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.amount-cell{
  width:100px;
  white-space:nowrap;
}
.amount-cell strong{
  direction:ltr;
  display:inline-block;
  font-size:1rem;
  color:#15172b;
}
.payment-cell{
  min-width:130px;
}
.payment-badge{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 11px;
  border:1px solid #e5e7f2;
  border-radius:999px;
  background:#fff;
  color:#44485b;
  font-size:.81rem;
  white-space:nowrap;
}
.status-cell{
  min-width:125px;
}
.status{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 12px!important;
  border-radius:999px!important;
  font-size:.79rem!important;
  font-weight:750!important;
  white-space:nowrap;
}
.action-cell{
  min-width:155px;
  text-align:center!important;
}
.admin-approve-btn{
  min-height:42px;
  padding:9px 15px!important;
  white-space:nowrap;
  font-size:.84rem!important;
}
.paid-check{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#08795d;
  font-weight:800;
  white-space:nowrap;
}
.date-cell{
  min-width:168px;
  color:#5e6274;
  white-space:nowrap;
  font-size:.82rem;
}
.empty-orders{
  text-align:center!important;
  padding:34px!important;
  color:var(--muted);
}

/* Responsive */
@media (max-width:1000px){
  .topbar .nav{
    min-height:108px!important;
  }
  .brand-logo img{
    height:94px!important;
    max-width:470px!important;
  }
}
@media (max-width:760px){
  .topbar .nav{
    min-height:90px!important;
    padding-block:8px;
  }
  .brand-logo img{
    height:76px!important;
    max-width:360px!important;
  }
  .orders-title-row{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
  .table-wrap{
    padding:16px!important;
  }
  .admin-orders-scroll{
    border-radius:14px;
  }
}
@media (max-width:520px){
  .brand-logo img{
    height:64px!important;
    max-width:285px!important;
  }
  .topbar .nav{
    min-height:80px!important;
  }
}


/* ==========================================================
   Verified customer reviews
   ========================================================== */
.testimonials-section{display:block!important}
.empty-reviews{
  text-align:center;
  padding:34px!important;
}
.empty-reviews-icon{
  width:56px;height:56px;margin:0 auto 12px;
  display:grid;place-items:center;border-radius:50%;
  background:#f3f1ff;color:#5b50f3;font-size:1.6rem;
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.review-card{
  padding:24px!important;
  min-width:0;
}
.review-stars{
  color:#f3a400;
  letter-spacing:2px;
  font-size:1rem;
  white-space:nowrap;
}
.review-text{
  margin:14px 0 20px;
  line-height:1.9;
  color:#26293c;
}
.review-author{
  display:flex;align-items:center;gap:12px;
}
.review-avatar{
  width:42px;height:42px;flex:0 0 42px;
  display:grid;place-items:center;border-radius:50%;
  background:#f0efff;color:#5b50f3;font-weight:800;
}
.review-author div:last-child{
  display:flex;flex-direction:column;min-width:0;
}
.review-author small{color:var(--muted)}
.review-form-card{padding:30px!important}
.review-order-summary{
  display:flex;justify-content:space-between;gap:16px;
  padding:15px 16px;margin:18px 0;
  background:#f8f9ff;border:1px solid #e7e8f4;border-radius:14px;
}
.review-order-summary strong{direction:ltr}
.rating-field{
  border:0;padding:0;margin:0;
}
.rating-field legend{
  font-weight:700;margin-bottom:9px;
}
.rating-options{
  display:flex;gap:8px;flex-wrap:wrap;
}
.rating-options input{
  position:absolute;opacity:0;pointer-events:none;
}
.rating-options span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:66px;min-height:42px;
  border:1px solid #dedff0;border-radius:11px;background:#fff;cursor:pointer;
}
.rating-options input:checked + span{
  border-color:#5b50f3;background:#f0efff;color:#4b40df;font-weight:800;
}
.admin-reviews-card{padding:24px!important}
.review-admin-text{
  min-width:320px;max-width:520px;line-height:1.7;
}
.review-actions{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.review-actions form{margin:0}
@media(max-width:900px){
  .reviews-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .reviews-grid{grid-template-columns:1fr}
  .review-form-card{padding:20px!important}
}



/* ==========================================================
   OfficeCo Tech public SaaS landing page
   ========================================================== */
.officeco-site{--accent:#0d3975;--accent-dark:#092b59;--accent-2:#1466ad;--cyan:#10b6a5;--bg:#f6f9fc;--bg-soft:#edf5f8;--text:#10233e;--line:#dce7ee;background:#f7fafc}
.officeco-topbar{background:rgba(255,255,255,.94);border-bottom:1px solid #e4edf2}
.officeco-topbar .nav{min-height:88px;height:auto}.officeco-logo img{height:72px;width:auto;max-width:245px;object-fit:contain}.officeco-topbar nav{gap:24px}.officeco-topbar nav a:hover{color:#10a999}.nav-login{padding:9px 16px!important;border:1px solid #cbdde8;border-radius:11px}.nav-login:after{display:none!important}
.officeco-hero{position:relative;overflow:hidden;padding:105px 0 95px;background:radial-gradient(circle at 8% 20%,rgba(16,182,165,.12),transparent 28%),radial-gradient(circle at 90% 20%,rgba(20,102,173,.13),transparent 30%),linear-gradient(180deg,#fff,#f3f8fb)}
.officeco-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.officeco-badge{display:inline-flex;padding:8px 14px;border-radius:999px;background:#eaf7f5;color:#078c81;border:1px solid #cdeee9;font-size:.8rem;font-weight:700}.officeco-hero h1{font-size:clamp(2.7rem,5.5vw,5rem);line-height:1.14;letter-spacing:-.055em;margin:20px 0 24px}.officeco-hero h1 span{color:#0b4c8c}.officeco-hero-copy>p{font-size:1.08rem;color:#617286;max-width:690px}.officeco-trust{display:flex;gap:18px;flex-wrap:wrap;color:#607386;font-size:.82rem;margin-top:25px}.officeco-trust span{display:flex;align-items:center;gap:5px}
.officeco-hero-visual{position:relative;min-height:480px;display:grid;place-items:center}.quote-preview{width:min(420px,90%);min-height:475px;background:#fff;border:1px solid #d9e6ee;border-radius:25px;padding:32px;box-shadow:0 35px 90px rgba(15,55,92,.18);transform:rotate(-2deg);position:relative}.quote-preview:before{content:'';position:absolute;right:0;top:0;width:8px;height:100%;background:linear-gradient(#0d3975,#10b6a5);border-radius:0 25px 25px 0}.preview-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e3ebf0;padding-bottom:25px}.preview-top>div{display:flex;flex-direction:column;text-align:left;direction:ltr}.preview-top b{font-size:1.2rem;color:#0d3975}.preview-top small{color:#8191a0}.preview-logo{width:55px;height:55px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#0d3975,#10b6a5);color:#fff;font-weight:800}.preview-lines{display:grid;gap:9px;margin:32px 0}.preview-lines i{height:8px;border-radius:8px;background:#e8eef2}.preview-lines i:nth-child(2){width:72%}.preview-lines i:nth-child(3){width:48%}.preview-table{margin-top:34px;border:1px solid #e3ebf0;border-radius:12px;overflow:hidden}.preview-table span{display:block;height:45px;border-bottom:1px solid #e3ebf0;background:linear-gradient(90deg,#f5f8fa 30%,#fff 30%)}.preview-table span:last-child{border:0}.preview-total{margin-top:28px;margin-right:auto;width:150px;text-align:left;direction:ltr;border-top:2px solid #10b6a5;padding-top:10px}.preview-total small{display:block;color:#8393a2}.preview-total strong{color:#0d3975;font-size:1.25rem}.floating-chip{position:absolute;background:#fff;border:1px solid #dce8ee;border-radius:13px;padding:11px 16px;box-shadow:0 14px 35px rgba(15,55,92,.13);font-size:.8rem;font-weight:700;color:#0d3975}.chip-one{right:0;top:85px}.chip-two{left:5px;bottom:75px;color:#078c81}
.officeco-center{justify-content:center;text-align:center}.officeco-center>div{max-width:720px}.service-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}.service-card{position:relative;padding:36px;border-radius:26px;background:#fff;border:1px solid #dce7ee;box-shadow:0 16px 45px rgba(20,55,85,.07)}.service-card.featured{border-color:#bcdedc;background:linear-gradient(145deg,#fff,#f6fcfb)}.service-icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#0d3975,#1466ad);color:#fff;font-size:1.5rem;font-weight:800;margin-bottom:22px}.service-card.featured .service-icon{background:linear-gradient(135deg,#0d3975,#10b6a5)}.service-status{position:absolute;left:28px;top:30px;padding:6px 11px;border-radius:999px;background:#e4f7f3;color:#078c81;font-size:.72rem;font-weight:700}.muted-status{background:#eef2f5;color:#71808c}.service-card h3{font-size:1.45rem;margin:5px 0 10px}.service-card p{color:#687b8d}.service-card ul{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:24px 0}.service-card li{font-size:.83rem;color:#425a70}.service-card li:before{content:'✓';color:#0aa796;font-weight:800;margin-left:7px}.coming-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.coming-items span{padding:8px 11px;background:#f2f6f8;border-radius:10px;color:#617587;font-size:.78rem}
.officeco-soft{background:#0c315f;color:#fff}.officeco-soft .section-head h2,.officeco-soft h3{color:#fff}.officeco-soft .section-head p{color:#c2d2df}.officeco-soft .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#55d4c6}.officeco-features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.officeco-features>div{padding:26px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.055)}.officeco-features b{display:block;color:#56d5c7;font-size:1.35rem;margin-bottom:18px}.officeco-features p{color:#c2d2df;font-size:.84rem}
.plan-callout{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:42px;border-radius:28px;background:linear-gradient(135deg,#f0f8fa,#fff);border:1px solid #d5e7eb}.plan-callout h2{font-size:2rem;margin:7px 0}.plan-callout p{color:#65798b;max-width:680px}.plan-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.plan-pill{padding:9px 13px;border-radius:10px;background:#fff;border:1px solid #d8e6eb;color:#0d3975;font-weight:700;font-size:.8rem}.officeco-footer .footer-logo{height:62px;width:auto;max-width:210px;margin-bottom:8px}.officeco-footer p{margin:0}
@media(max-width:900px){.officeco-hero-grid,.service-grid{grid-template-columns:1fr}.officeco-hero{padding:65px 0}.officeco-hero-visual{min-height:420px}.officeco-features{grid-template-columns:repeat(2,1fr)}.plan-callout{flex-direction:column;align-items:flex-start}.plan-actions{justify-content:flex-start}.officeco-logo img{height:58px}.service-card ul{grid-template-columns:1fr}}
@media(max-width:700px){.officeco-topbar .nav{min-height:72px}.officeco-logo img{height:50px;max-width:180px}.officeco-hero h1{font-size:2.55rem}.officeco-hero-visual{min-height:390px}.quote-preview{min-height:390px;padding:24px}.officeco-features{grid-template-columns:1fr}.service-card{padding:25px}.plan-callout{padding:27px}.officeco-trust{gap:9px 15px}}

/* ===== OfficeCo Tech V2 landing polish ===== */
.officeco-site{overflow-x:hidden}
.officeco-topbar .container.nav{width:min(1240px,94%)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:104px!important;padding:8px 0!important}
.officeco-logo{display:flex!important;align-items:center!important;flex:0 0 auto!important}
.officeco-logo img{width:250px!important;height:86px!important;max-width:none!important;object-fit:contain!important}
.officeco-topbar nav{display:flex!important;align-items:center!important;gap:28px!important}
.officeco-hero{padding:76px 0 82px!important;min-height:650px!important}
.officeco-hero .container{width:min(1240px,94%)!important}
.officeco-hero-grid{direction:ltr!important;display:grid!important;grid-template-columns:minmax(430px,.92fr) minmax(520px,1.08fr)!important;gap:72px!important;align-items:center!important}
.officeco-hero-copy{direction:rtl!important;text-align:right!important;grid-column:2!important;grid-row:1!important}
.officeco-hero-visual{direction:rtl!important;grid-column:1!important;grid-row:1!important;min-height:500px!important;width:100%!important;display:grid!important;place-items:center!important}
.officeco-hero h1{font-size:clamp(3rem,4.5vw,4.7rem)!important;margin:18px 0 20px!important}
.officeco-hero-copy>p{font-size:1.05rem!important;line-height:2!important}
.officeco-hero .btn{background:linear-gradient(135deg,#0d3975,#1466ad)!important;box-shadow:0 12px 28px rgba(13,57,117,.2)!important}
.officeco-hero .btn.secondary{background:#fff!important;color:#0d3975!important;border-color:#bfd2df!important;box-shadow:none!important}
.quote-preview{display:block!important;width:420px!important;max-width:88%!important;min-height:470px!important;padding:32px!important;background:#fff!important;border:1px solid #d9e6ee!important;border-radius:26px!important;box-shadow:0 34px 80px rgba(15,55,92,.16)!important;transform:rotate(-1.5deg)!important}
.preview-top{display:flex!important;justify-content:space-between!important;align-items:center!important;padding-bottom:24px!important;border-bottom:1px solid #e3ebf0!important}
.preview-logo{display:grid!important;width:58px!important;height:58px!important;place-items:center!important;border-radius:16px!important;background:linear-gradient(135deg,#0d3975,#10b6a5)!important;color:#fff!important;font-weight:800!important}
.preview-top>div{display:flex!important;flex-direction:column!important;direction:ltr!important;text-align:left!important}.preview-top b{font-size:1.15rem!important;color:#0d3975!important}.preview-top small{color:#8191a0!important}
.preview-lines{display:grid!important;gap:10px!important;margin:32px 0!important}.preview-lines i{display:block!important;height:8px!important;border-radius:10px!important;background:#e8eef2!important}.preview-lines i:nth-child(2){width:72%!important}.preview-lines i:nth-child(3){width:48%!important}
.preview-table{display:block!important;margin-top:30px!important;border:1px solid #e3ebf0!important;border-radius:12px!important;overflow:hidden!important}.preview-table span{display:block!important;height:46px!important;border-bottom:1px solid #e3ebf0!important;background:linear-gradient(90deg,#f4f8fa 30%,#fff 30%)!important}.preview-table span:last-child{border-bottom:0!important}
.preview-total{display:block!important;margin:28px 0 0 auto!important;width:155px!important;direction:ltr!important;text-align:left!important;border-top:2px solid #10b6a5!important;padding-top:10px!important}.preview-total small{display:block!important;color:#8393a2!important}.preview-total strong{display:block!important;color:#0d3975!important;font-size:1.3rem!important}
.floating-chip{z-index:3!important}.chip-one{right:4px!important;top:88px!important}.chip-two{left:0!important;bottom:78px!important}
.officeco-services{padding-top:72px!important}.officeco-services .section-head{margin-bottom:36px!important}
@media(max-width:1000px){.officeco-hero-grid{grid-template-columns:1fr!important;gap:38px!important}.officeco-hero-copy,.officeco-hero-visual{grid-column:1!important}.officeco-hero-copy{grid-row:1!important}.officeco-hero-visual{grid-row:2!important}.officeco-hero{min-height:0!important}.officeco-logo img{width:210px!important;height:76px!important}.officeco-topbar nav{gap:15px!important;font-size:.8rem!important}}
@media(max-width:700px){.officeco-topbar .container.nav{min-height:82px!important}.officeco-logo img{width:175px!important;height:64px!important}.officeco-topbar nav{display:none!important}.officeco-hero{padding:48px 0 58px!important}.officeco-hero h1{font-size:2.55rem!important}.officeco-hero-visual{min-height:420px!important}.quote-preview{width:360px!important;min-height:410px!important;padding:24px!important}.floating-chip{font-size:.7rem!important;padding:8px 11px!important}}


/* =========================================================
   OfficeCo Tech - Authentication & Dashboard
   ========================================================= */

.oc-auth-page {
    min-height: calc(100vh - 160px);
    padding: 70px 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(16,183,165,.10), transparent 30%),
        linear-gradient(135deg, #f7fafc 0%, #eef5f8 100%);
}

.oc-auth-wrap {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 70px;
    align-items: center;
}

.oc-auth-intro h1 {
    margin: 12px 0 18px;
    font-size: clamp(38px,5vw,64px);
    color: #123e73;
}

.oc-auth-intro > p {
    max-width: 650px;
    font-size: 19px;
    line-height: 1.9;
    color: #5c6b7a;
}

.oc-auth-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.oc-auth-points span {
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e1e9ef;
    color: #35526d;
    font-size: 14px;
}

.oc-login-card {
    background: #fff;
    border: 1px solid #e1e9ef;
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 24px 70px rgba(18,62,115,.12);
}

.oc-login-logo {
    margin-bottom: 20px;
}

.oc-login-logo img {
    width: 190px;
    max-width: 70%;
    height: auto;
}

.oc-login-card h2 {
    margin: 0 0 8px;
    color: #123e73;
    font-size: 30px;
}

.oc-login-form {
    margin-top: 25px;
}

.oc-login-form input {
    min-height: 50px;
}

.oc-login-btn {
    width: 100%;
    margin-top: 8px;
}

.oc-login-help {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #edf1f4;
    color: #758391;
    font-size: 13px;
}

.oc-login-help a {
    color: #123e73;
    font-weight: 700;
}


.oc-dashboard {
    min-height: calc(100vh - 150px);
    padding: 55px 0 80px;
    background: #f7fafc;
}

.oc-dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 45px;
}

.oc-dashboard-head h1 {
    margin: 8px 0 5px;
    color: #123e73;
    font-size: 38px;
}

.oc-dashboard-head p {
    margin: 0;
    color: #6f7f8d;
}

.oc-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.oc-user-badge {
    padding: 10px 15px;
    border: 1px solid #dce5eb;
    border-radius: 999px;
    background: #fff;
    color: #526879;
}

.oc-dashboard-section {
    background: #fff;
    border: 1px solid #e2e9ee;
    border-radius: 24px;
    padding: 32px;
}

.oc-app-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 25px;
}

.oc-app-card {
    border: 1px solid #e1e8ed;
    border-radius: 20px;
    padding: 24px;
    background: #fff;
    transition: .2s ease;
}

.oc-app-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(18,62,115,.08);
}

.oc-app-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.oc-app-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #123e73;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}

.oc-app-status {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f0f2f4;
    color: #74808a;
    font-size: 12px;
    font-weight: 700;
}

.oc-app-status.active {
    background: rgba(16,183,165,.12);
    color: #078d80;
}

.oc-app-card h3 {
    margin: 20px 0 10px;
    color: #123e73;
}

.oc-app-card p {
    min-height: 55px;
    color: #70808e;
    line-height: 1.8;
}

.oc-empty-apps {
    text-align: center;
    padding: 50px 25px;
    margin-top: 25px;
}

.oc-empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: #123e73;
    color: #fff;
    font-weight: 800;
}

.oc-account-strip {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    overflow: hidden;
    margin-top: 22px;
    border: 1px solid #e1e8ed;
    border-radius: 18px;
    background: #e1e8ed;
}

.oc-account-strip > div {
    padding: 18px 22px;
    background: #fff;
}

.oc-account-strip small,
.oc-account-strip strong {
    display: block;
}

.oc-account-strip small {
    margin-bottom: 5px;
    color: #8a98a4;
}

.oc-account-strip strong {
    color: #123e73;
}


@media (max-width: 900px) {

    .oc-auth-wrap {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .oc-app-grid {
        grid-template-columns: 1fr;
    }

    .oc-dashboard-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .oc-account-strip {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .oc-auth-page {
        padding: 35px 0;
    }

    .oc-login-card {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .oc-dashboard {
        padding-top: 30px;
    }

    .oc-dashboard-section {
        padding: 22px 16px;
    }

    .oc-dashboard-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}


/* OfficeCo Tech - Quotation Dashboard */
.ocq-page{direction:rtl}
.ocq-head{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:28px}
.ocq-head h1{margin:8px 0;font-size:34px;color:#0d376d}
.ocq-head p{margin:0;color:#738095}
.ocq-kicker{display:inline-block;background:#edf3ff;color:#14518c;padding:7px 12px;border-radius:30px;font-size:13px;font-weight:700}
.ocq-new{white-space:nowrap}

.ocq-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.ocq-stat{background:#fff;border:1px solid #e3e9f1;border-radius:16px;padding:20px}
.ocq-stat span{display:block;color:#78869a;font-size:14px;margin-bottom:10px}
.ocq-stat strong{font-size:29px;color:#0d376d}

.ocq-panel{padding:25px}
.ocq-panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #edf0f5;padding-bottom:18px}
.ocq-panel-head h2{margin:0 0 7px;color:#102d55}
.ocq-panel-head p{margin:0;color:#7a8799}
.ocq-links{display:flex;gap:10px;flex-wrap:wrap}
.ocq-links a,.ocq-open{border:1px solid #dce5ef;padding:8px 13px;border-radius:9px;text-decoration:none;color:#174f87;background:#fff}

.ocq-empty{text-align:center;padding:65px 20px}
.ocq-empty-icon{width:62px;height:62px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;border-radius:18px;background:#0d4c86;color:#fff;font-size:26px;font-weight:800}
.ocq-empty h3{margin:0 0 8px;color:#102d55}
.ocq-empty p{color:#7b8798;margin-bottom:20px}

.ocq-table-wrap{overflow:auto;margin-top:20px}
.ocq-table{width:100%;border-collapse:collapse}
.ocq-table th,.ocq-table td{text-align:right;padding:15px 12px;border-bottom:1px solid #edf0f4}
.ocq-table th{font-size:13px;color:#7a8798}
.ocq-table td{color:#263b55}
.ocq-table td small{display:block;color:#8b96a5;margin-top:4px}

.ocq-status{display:inline-block;padding:6px 10px;border-radius:20px;font-size:12px;font-weight:700}
.ocq-status-draft{background:#f0f2f5;color:#667085}
.ocq-status-sent{background:#e9f2ff;color:#2466a5}
.ocq-status-accepted{background:#e2f7f1;color:#087b68}
.ocq-status-rejected{background:#fff0f0;color:#b74343}

@media(max-width:900px){
 .ocq-stats{grid-template-columns:repeat(2,1fr)}
 .ocq-head,.ocq-panel-head{align-items:stretch;flex-direction:column}
}

/* Quotation Form V2 */
.ocq-form-card{padding:26px;margin-bottom:20px}
.ocq-form-card h2{margin:0 0 22px;color:#12365f;font-size:22px}

.ocq-grid{display:grid;gap:18px}
.ocq-grid-2{grid-template-columns:repeat(2,1fr)}
.ocq-grid-3{grid-template-columns:repeat(3,1fr)}

.ocq-form-card label{display:flex;flex-direction:column;gap:8px;font-weight:600;color:#34475f}
.ocq-form-card input,
.ocq-form-card select,
.ocq-form-card textarea{
 width:100%;box-sizing:border-box;border:1px solid #dce4ee;
 border-radius:10px;padding:12px;background:#fff;font:inherit
}
.ocq-form-card textarea{resize:vertical}

.ocq-section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.ocq-section-head h2{margin:0}
.ocq-section-head p{margin:5px 0 0;color:#7d8998}

.ocq-add-row{border:0;background:#e7f5f3;color:#087c71;border-radius:10px;padding:10px 15px;font-weight:700;cursor:pointer}

.ocq-items{width:100%;border-collapse:collapse}
.ocq-items th{background:#f7f9fc;color:#64748b;padding:12px;text-align:right}
.ocq-items td{padding:9px;border-bottom:1px solid #edf1f5}
.ocq-items td:first-child{width:40px;text-align:center;font-weight:700}
.ocq-items input{min-width:90px}
.ocq-items td:nth-child(2){width:45%}

.remove-quote-row{width:34px;height:34px;border:0;border-radius:8px;background:#fff0f0;color:#b94040;font-size:20px;cursor:pointer}

.ocq-bottom-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px;align-items:start}
.ocq-total-line{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #edf1f5}
.ocq-total-line strong{color:#123e70}

.ocq-tax-check{flex-direction:row!important;align-items:center;margin:18px 0}
.ocq-tax-check input{width:auto!important}

.ocq-grand-total{display:flex;justify-content:space-between;align-items:center;background:#0f4d86;color:#fff;border-radius:13px;padding:18px;margin-top:20px}
.ocq-grand-total strong{font-size:25px}
.ocq-save{width:100%;margin-top:15px}
.ocq-error{background:#fff0f0;color:#a93737;padding:14px 18px;border-radius:10px;margin-bottom:18px}

@media(max-width:900px){
 .ocq-grid-2,.ocq-grid-3,.ocq-bottom-grid{grid-template-columns:1fr}
 .ocq-items-wrap{overflow:auto}
}

/* Quotation Document */
.ocq-view-actions{display:flex;gap:10px;flex-wrap:wrap}
.ocq-document{
 background:#fff;
 border:1px solid #e1e8f0;
 border-radius:18px;
 padding:40px;
 box-shadow:0 10px 35px rgba(25,55,90,.06);
}
.ocq-doc-header{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 gap:30px;
 padding-bottom:25px;
 border-bottom:2px solid #124d84;
}
.ocq-doc-header h2{margin:0 0 8px;color:#123d6c}
.ocq-doc-title{text-align:left}
.ocq-doc-title div{font-size:13px;letter-spacing:2px;color:#718096}
.ocq-doc-title strong{display:block;font-size:30px;color:#123d6c}
.ocq-doc-title span{font-weight:700;color:#0b8d86}

.ocq-doc-meta{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:15px;
 margin:25px 0;
}
.ocq-doc-meta div{
 background:#f7f9fc;
 padding:14px 16px;
 border-radius:10px;
}
.ocq-doc-meta small{display:block;color:#7b8797;margin-bottom:5px}

.ocq-client-box{
 background:#f7fbfb;
 border-right:4px solid #0b948c;
 padding:20px;
 margin-bottom:25px;
 border-radius:10px;
}
.ocq-client-box small{color:#758294}
.ocq-client-box h3{margin:5px 0 8px;color:#123d6c}
.ocq-doc-intro{margin:25px 0;line-height:1.9}

.ocq-doc-table{width:100%;border-collapse:collapse;margin:25px 0}
.ocq-doc-table th{
 background:#123f70;
 color:#fff;
 padding:13px;
 text-align:right;
}
.ocq-doc-table td{
 padding:13px;
 border-bottom:1px solid #e8edf3;
}
.ocq-doc-table th:first-child,
.ocq-doc-table td:first-child{text-align:center;width:45px}

.ocq-doc-summary{
 width:min(470px,100%);
 margin-right:auto;
 margin-top:25px;
}
.ocq-doc-summary>div{
 display:flex;
 justify-content:space-between;
 padding:11px 5px;
 border-bottom:1px solid #e8edf3;
}
.ocq-doc-summary .ocq-doc-total{
 background:#123f70;
 color:#fff;
 border-radius:10px;
 padding:16px;
 margin-top:8px;
}
.ocq-doc-total strong{font-size:20px}
.ocq-doc-terms{
 margin-top:35px;
 padding-top:20px;
 border-top:1px solid #e5eaf0;
 line-height:1.8;
}
.ocq-doc-terms h3{color:#123d6c}

@media(max-width:700px){
 .ocq-document{padding:20px}
 .ocq-doc-header{display:block}
 .ocq-doc-title{text-align:right;margin-top:20px}
 .ocq-doc-meta{grid-template-columns:1fr}
 .ocq-doc-table-wrap{overflow-x:auto}
}

@media print{
 header,.site-header,.ocq-no-print,footer{display:none!important}
 body{background:#fff!important}
 .section{padding:0!important}
 .container{max-width:none!important;width:100%!important}
 .ocq-document{
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
 }
}

/* Quotation Status Control */
.ocq-status-form{
 display:flex;
 align-items:flex-end;
 gap:10px;
 margin-top:12px;
}

.ocq-status-form label{
 display:flex;
 flex-direction:column;
 gap:5px;
 font-size:13px;
 color:#6c7d91;
}

.ocq-status-form select{
 min-width:140px;
 border:1px solid #dce4ee;
 border-radius:9px;
 padding:9px 12px;
 background:#fff;
 font:inherit;
}

.ocq-status-form .btn{
 padding:9px 16px;
}

/* Quotation Settings */
.ocq-settings-form{max-width:1050px;margin:auto}

.ocq-success{
 margin:0 0 20px;
 padding:14px 18px;
 border-radius:10px;
 background:#e7f7f3;
 color:#087c70;
 font-weight:700
}

.ocq-check-setting{
 flex-direction:row!important;
 align-items:center;
 justify-content:space-between;
 min-height:48px
}

.ocq-check-setting input{
 width:20px!important;
 height:20px
}

.ocq-color-field{
 display:flex;
 align-items:center;
 gap:12px;
 border:1px solid #dce4ee;
 border-radius:10px;
 padding:8px 12px;
 background:#fff
}

.ocq-color-field input{
 width:55px!important;
 height:38px;
 padding:2px!important;
 border:0!important
}

.ocq-color-field span{
 direction:ltr;
 font-weight:700
}

.ocq-settings-save{
 display:flex;
 justify-content:flex-start;
 margin:20px 0 35px
}

.ocq-settings-save .btn{
 min-width:200px
}

@media(max-width:760px){
 .ocq-grid-2,
 .ocq-grid-3{grid-template-columns:1fr}
}

/* Dynamic quotation branding */
.ocq-document{
    --quote-primary:#123F73;
    --quote-accent:#00A99D;
}

.ocq-company-brand{
    display:flex;
    align-items:center;
    gap:20px;
}

.ocq-company-logo{
    width:150px;
    min-width:150px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ocq-company-logo img{
    display:block;
    max-width:100%;
    max-height:90px;
    object-fit:contain;
}

.ocq-company-details h2{
    margin:0 0 8px;
    color:var(--quote-primary);
}

.ocq-company-details div{
    margin:3px 0;
}

.ocq-document .ocq-doc-title div,
.ocq-document .ocq-doc-title strong{
    color:var(--quote-primary);
}

.ocq-document .ocq-doc-title span{
    color:var(--quote-accent);
}

.ocq-document .ocq-doc-table thead{
    background:var(--quote-primary);
}

.ocq-document .ocq-doc-total{
    border-color:var(--quote-accent);
}

.ocq-document .ocq-doc-total strong,
.ocq-document .ocq-doc-terms h3{
    color:var(--quote-primary);
}

@media(max-width:700px){
    .ocq-company-brand{
        align-items:flex-start;
        flex-direction:column;
    }

    .ocq-company-logo{
        width:130px;
        min-width:0;
        height:75px;
    }

    .ocq-company-logo img{
        max-height:75px;
    }
}

@media print{
    .ocq-company-logo img{
        max-height:80px;
    }
}

/* ===== OfficeCo Customers UI ===== */

.ocq-form-card{
    background:#fff;
    border:1px solid #e3eaf2;
    border-radius:18px;
    padding:24px;
    margin-top:22px;
    margin-bottom:24px;
    box-shadow:0 8px 25px rgba(17,52,91,.04);
}

.ocq-form-card h3{
    margin:0 0 20px;
    color:#12365f;
    font-size:20px;
}

.ocq-form-card .form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 20px;
    margin-bottom:18px;
}

.ocq-form-card label{
    display:flex;
    flex-direction:column;
    gap:7px;
    font-weight:600;
    color:#34475f;
}

.ocq-form-card input,
.ocq-form-card select,
.ocq-form-card textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid #dbe4ee;
    border-radius:10px;
    background:#fff;
    padding:11px 13px;
    font:inherit;
    color:#172f4f;
    transition:.2s ease;
}

.ocq-form-card input:focus,
.ocq-form-card select:focus,
.ocq-form-card textarea:focus{
    outline:none;
    border-color:#174f87;
    box-shadow:0 0 0 3px rgba(23,79,135,.08);
}

.ocq-form-card textarea{
    min-height:90px;
    resize:vertical;
}

.ocq-form-card > form > .btn{
    margin-top:16px;
}

/* Success / Error messages */
.ocq-panel > .alert{
    display:block;
    width:auto;
    max-width:520px;
    padding:12px 16px;
    margin:18px 0;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    line-height:1.6;
}

.ocq-panel > .alert.success{
    background:#edf9f4;
    border:1px solid #ccecdf;
    color:#167453;
}

.ocq-panel > .alert.error{
    background:#fff1f1;
    border:1px solid #f1cccc;
    color:#a52b2b;
}

/* Customers table */
.ocq-panel > .ocq-table-wrap{
    background:#fff;
    border:1px solid #e3eaf2;
    border-radius:18px;
    padding:8px 18px 14px;
    margin-top:24px;
    box-shadow:0 8px 25px rgba(17,52,91,.04);
}

.ocq-table{
    width:100%;
    border-collapse:collapse;
}

.ocq-table th{
    padding:15px 12px;
    color:#718096;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.ocq-table td{
    padding:15px 12px;
    vertical-align:middle;
    border-top:1px solid #edf1f5;
}

.ocq-table td strong{
    color:#173b67;
}

.ocq-table td small{
    display:block;
    margin-top:4px;
    color:#8996a7;
}

/* Customer action buttons */
.ocq-table td:last-child{
    white-space:nowrap;
}

.ocq-table td:last-child form{
    display:inline-block !important;
    margin-inline-start:5px;
}

.ocq-table td:last-child button.ocq-open{
    cursor:pointer;
    font:inherit;
    background:#fff5f5;
    border-color:#f0cccc;
    color:#b42323;
}

.ocq-table td:last-child button.ocq-open:hover{
    background:#ffe8e8;
}

/* Quote delete button */
.ocq-view-actions .ocq-delete-btn{
    background:#c83c3c;
    border-color:#c83c3c;
    color:#fff;
}

.ocq-view-actions .ocq-delete-btn:hover{
    background:#ad2f2f;
    border-color:#ad2f2f;
}

/* Mobile */
@media (max-width:760px){
    .ocq-form-card{
        padding:18px;
    }

    .ocq-form-card .form-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .ocq-panel{
        padding:18px;
    }

    .ocq-panel > .alert{
        max-width:none;
    }

    .ocq-panel > .ocq-table-wrap{
        padding:5px 10px 12px;
    }
}


/* ===== Quotation Search & Filters ===== */

.ocq-filter-bar{
    display:grid;
    grid-template-columns:minmax(240px,2fr) repeat(3,minmax(145px,1fr)) auto;
    gap:14px;
    align-items:end;
    padding:18px;
    margin-top:20px;
    background:#f8fafc;
    border:1px solid #e3eaf2;
    border-radius:14px;
}

.ocq-filter-bar label{
    display:flex;
    flex-direction:column;
    gap:7px;
    color:#53657a;
    font-size:13px;
    font-weight:700;
}

.ocq-filter-bar input,
.ocq-filter-bar select{
    width:100%;
    min-height:42px;
    box-sizing:border-box;
    border:1px solid #dbe4ee;
    border-radius:9px;
    padding:9px 11px;
    background:#fff;
    color:#17304e;
    font:inherit;
}

.ocq-filter-bar input:focus,
.ocq-filter-bar select:focus{
    outline:none;
    border-color:#174f87;
    box-shadow:0 0 0 3px rgba(23,79,135,.07);
}

.ocq-filter-actions{
    display:flex;
    gap:8px;
}

.ocq-filter-actions .btn{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
}

.ocq-reset-filter{
    background:#fff !important;
    color:#174f87 !important;
    border:1px solid #dbe4ee !important;
}

.ocq-filter-summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:12px 4px 0;
    color:#738195;
    font-size:13px;
}

.ocq-filter-summary strong{
    color:#173b67;
}

.ocq-filter-active{
    background:#edf7f5;
    color:#17705f;
    padding:5px 10px;
    border-radius:20px;
    font-weight:700;
}

@media(max-width:1000px){
    .ocq-filter-bar{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ocq-filter-search{
        grid-column:1/-1;
    }
}

@media(max-width:650px){
    .ocq-filter-bar{
        grid-template-columns:1fr;
    }

    .ocq-filter-search{
        grid-column:auto;
    }

    .ocq-filter-actions{
        width:100%;
    }

    .ocq-filter-actions .btn{
        flex:1;
    }
}

/* ===== QUOTATION A4 PRINT FINAL ===== */
@media print {

    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    html,
    body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    header,
    footer,
    .site-header,
    .site-footer,
    .ocq-no-print {
        display: none !important;
    }

    .section.ocq-page,
    .ocq-page,
    .ocq-page .container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .ocq-document {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        font-size: 10px !important;
    }

    .ocq-doc-header {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .ocq-company-logo img {
        max-height: 48px !important;
        width: auto !important;
    }

    .ocq-company-details h2 {
        font-size: 16px !important;
        margin: 0 !important;
    }

    .ocq-doc-title div {
        font-size: 8px !important;
    }

    .ocq-doc-title strong {
        font-size: 19px !important;
    }

    .ocq-doc-meta {
        margin: 10px 0 !important;
        gap: 6px !important;
    }

    .ocq-doc-meta > div {
        padding: 7px 10px !important;
        min-height: 0 !important;
    }

    .ocq-client-box {
        margin: 10px 0 !important;
        padding: 10px 12px !important;
        min-height: 0 !important;
    }

    .ocq-client-main h3 {
        margin: 2px 0 !important;
        font-size: 14px !important;
    }

    .ocq-client-contact {
        font-size: 8px !important;
        line-height: 1.5 !important;
    }

    .ocq-doc-intro {
        margin: 8px 0 !important;
        padding: 0 !important;
    }

    .ocq-doc-table-wrap {
        margin-top: 8px !important;
        overflow: visible !important;
    }

    .ocq-doc-table {
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: avoid !important;
    }

    .ocq-doc-table th {
        background: var(--quote-primary) !important;
        color: #fff !important;
        padding: 7px 6px !important;
        font-size: 9px !important;
    }

    .ocq-doc-table td {
        padding: 7px 6px !important;
        font-size: 9px !important;
    }

    .ocq-doc-summary {
        margin-top: 10px !important;
        page-break-inside: avoid !important;
    }

    .ocq-doc-summary > div {
        padding: 6px 8px !important;
    }

    .ocq-doc-terms,
    .ocq-doc-footer {
        page-break-inside: avoid !important;
    }

    .ocq-doc-terms {
        margin-top: 10px !important;
        padding: 9px 12px !important;
    }

    .ocq-doc-footer {
        margin-top: 10px !important;
        padding-top: 7px !important;
        font-size: 8px !important;
    }
}


/* =========================================================
   QUOTATION FINAL VISUAL SYNC
   Screen + Print aligned with generated PDF
   ========================================================= */

/* ---------- ITEMS TABLE ---------- */

.ocq-document .ocq-doc-table{
    direction:ltr !important;
    width:100%;
    border-collapse:collapse !important;
    border-spacing:0 !important;
    table-layout:fixed;
}

/* Physical order:
   total | unit price | qty | description | # */

.ocq-document .ocq-doc-table thead,
.ocq-document .ocq-doc-table thead tr{
    background:var(--quote-primary) !important;
}

.ocq-document .ocq-doc-table th{
    background:var(--quote-primary) !important;
    color:#fff !important;
    border-radius:0 !important;
    box-shadow:none !important;
    text-align:center !important;
}

.ocq-document .ocq-doc-table th:first-child,
.ocq-document .ocq-doc-table th:last-child{
    border-radius:0 !important;
}

.ocq-document .ocq-doc-table td{
    border-radius:0 !important;
    text-align:center;
}

.ocq-document .ocq-doc-table th:nth-child(1),
.ocq-document .ocq-doc-table td:nth-child(1){
    width:19% !important;
}

.ocq-document .ocq-doc-table th:nth-child(2),
.ocq-document .ocq-doc-table td:nth-child(2){
    width:18% !important;
}

.ocq-document .ocq-doc-table th:nth-child(3),
.ocq-document .ocq-doc-table td:nth-child(3){
    width:13% !important;
}

.ocq-document .ocq-doc-table th:nth-child(4),
.ocq-document .ocq-doc-table td:nth-child(4){
    width:43% !important;
}

.ocq-document .ocq-doc-table th:nth-child(5),
.ocq-document .ocq-doc-table td:nth-child(5){
    width:7% !important;
}

.ocq-document .ocq-doc-table .ocq-item-description{
    direction:rtl !important;
    text-align:right !important;
}


/* ---------- SUMMARY ---------- */

.ocq-document .ocq-doc-summary{
    direction:rtl;
}

.ocq-document .ocq-doc-summary > div{
    border-radius:0 !important;
}

/* Final total: same brand system as PDF */
.ocq-document .ocq-doc-summary .ocq-doc-total,
.ocq-document .ocq-doc-total{
    background:#f4f7f9 !important;
    color:var(--quote-primary) !important;
    border-top:3px solid var(--quote-primary) !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.ocq-document .ocq-doc-total span,
.ocq-document .ocq-doc-total strong{
    color:var(--quote-primary) !important;
}


/* ---------- PRINT ---------- */

@media print{

    body{
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
    }

    .ocq-document .ocq-doc-table,
    .ocq-document .ocq-doc-table thead,
    .ocq-document .ocq-doc-table tbody,
    .ocq-document .ocq-doc-table tr{
        direction:ltr !important;
    }

    .ocq-document .ocq-doc-table thead,
    .ocq-document .ocq-doc-table thead tr,
    .ocq-document .ocq-doc-table th{
        background:var(--quote-primary) !important;
        color:#fff !important;
        border-radius:0 !important;
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
    }

    .ocq-document .ocq-doc-table .ocq-item-description{
        direction:rtl !important;
        text-align:right !important;
    }

    .ocq-document .ocq-doc-total{
        background:#f4f7f9 !important;
        color:var(--quote-primary) !important;
        border-top:3px solid var(--quote-primary) !important;
        border-radius:0 !important;
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
    }

    .ocq-document .ocq-doc-total span,
    .ocq-document .ocq-doc-total strong{
        color:var(--quote-primary) !important;
    }
}


/* ===== QUOTATION SUBSCRIPTION CARD ===== */
.ocq-subscription-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    margin:0 0 24px;
    padding:22px 24px;
    background:#fff;
    border:1px solid #e7ebef;
    border-radius:16px;
}

.ocq-subscription-info{flex:1;min-width:0}

.ocq-subscription-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.ocq-subscription-title span{
    color:#7b8794;
    font-size:13px;
}

.ocq-subscription-title strong{font-size:18px}

.ocq-subscription-usage{
    font-size:14px;
    margin-bottom:10px;
}

.ocq-subscription-usage strong{font-size:16px}

.ocq-subscription-progress{
    width:100%;
    max-width:520px;
    height:8px;
    background:#edf1f4;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:9px;
}

.ocq-subscription-progress span{
    display:block;
    height:100%;
    background:var(--quote-primary, #153a4a);
    border-radius:20px;
}

.ocq-subscription-meta{
    color:#7b8794;
    font-size:12px;
}

.ocq-subscription-action{flex:0 0 auto}

@media (max-width:700px){
    .ocq-subscription-card{
        flex-direction:column;
        align-items:stretch;
    }

    .ocq-subscription-action .btn{
        width:100%;
        text-align:center;
    }
}

/* ===== OFFICECO SUBSCRIPTION PAGE ===== */

.oc-sub-page{
    padding-top:55px;
    padding-bottom:70px;
}

.oc-sub-head{
    max-width:720px;
    margin:0 auto 28px;
    text-align:center;
}

.oc-sub-head h1{
    margin:12px 0 8px;
    font-size:38px;
    color:#102f57;
}

.oc-sub-head p{
    margin:0;
    color:#718096;
    font-size:16px;
}

.oc-sub-current{
    max-width:820px;
    margin:0 auto 25px;
    padding:16px 22px;
    background:#fff;
    border:1px solid #e1e8ef;
    border-radius:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.oc-sub-current span{
    display:block;
    color:#7b8794;
    font-size:12px;
    margin-bottom:3px;
}

.oc-sub-current strong{
    color:#123b68;
}

.oc-sub-cycle{
    width:max-content;
    margin:0 auto 35px;
    padding:5px;
    display:flex;
    gap:4px;
    background:#eaf0f5;
    border-radius:12px;
}

.oc-sub-cycle button{
    border:0;
    background:transparent;
    padding:11px 24px;
    border-radius:9px;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    color:#5d6b7a;
}

.oc-sub-cycle button.active{
    background:#fff;
    color:#123b68;
    font-weight:700;
    box-shadow:0 2px 8px rgba(16,47,87,.08);
}

.oc-sub-cycle button span{
    display:inline-block;
    margin-right:6px;
    padding:2px 7px;
    border-radius:20px;
    background:#dff7ee;
    color:#16856a;
    font-size:10px;
    font-weight:700;
}

.oc-sub-plans{
    max-width:920px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    align-items:stretch;
}

.oc-sub-plan{
    position:relative;
    background:#fff;
    border:1px solid #dde5ed;
    border-radius:18px;
    padding:30px;
    display:flex;
    flex-direction:column;
    box-shadow:0 10px 30px rgba(20,47,79,.04);
}

.oc-sub-plan.featured{
    border:2px solid #0f5ca8;
    box-shadow:0 14px 38px rgba(15,92,168,.10);
}

.oc-sub-popular{
    position:absolute;
    top:-14px;
    right:25px;
    padding:6px 14px;
    border-radius:30px;
    background:#0f5ca8;
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.oc-sub-brand{
    color:#8290a0;
    font-size:12px;
}

.oc-sub-plan h2{
    margin:7px 0 8px;
    font-size:29px;
    color:#102f57;
}

.oc-sub-description{
    min-height:52px;
    margin:0 0 22px;
    color:#69798a;
    line-height:1.8;
}

.oc-sub-price{
    margin-bottom:14px;
    direction:ltr;
    text-align:right;
}

.oc-sub-price strong{
    color:#102f57;
    font-size:42px;
    line-height:1;
}

.oc-sub-price span{
    color:#718096;
    font-size:14px;
}

.oc-sub-price small{
    display:block;
    margin-top:8px;
    color:#8995a3;
    text-decoration:none;
}

.oc-sub-limit{
    padding:14px 16px;
    margin-bottom:20px;
    background:#f4f8fb;
    border-radius:11px;
    color:#526577;
}

.oc-sub-limit strong{
    color:#0f5ca8;
    font-size:20px;
}

.oc-sub-features{
    margin:0 0 26px;
    padding:0;
    list-style:none;
    flex:1;
}

.oc-sub-features li{
    position:relative;
    padding:8px 26px 8px 0;
    color:#435466;
    border-bottom:1px solid #f0f3f6;
}

.oc-sub-features li:before{
    content:"✓";
    position:absolute;
    right:0;
    color:#16a085;
    font-weight:700;
}

.oc-sub-select{
    width:100%;
    text-align:center;
}

.oc-sub-plan:not(.featured) .oc-sub-select{
    background:#fff;
    color:#0f5ca8;
    border:1px solid #0f5ca8;
}

.oc-sub-payment-note{
    max-width:920px;
    margin:28px auto 0;
    padding:18px 22px;
    background:#fff;
    border:1px solid #e1e8ef;
    border-radius:14px;
    text-align:center;
}

.oc-sub-payment-note strong{
    display:block;
    color:#102f57;
    margin-bottom:4px;
}

.oc-sub-payment-note div{
    color:#0f5ca8;
    font-weight:700;
}

.oc-sub-payment-note p{
    margin:5px 0 0;
    color:#7b8794;
    font-size:12px;
}

@media(max-width:760px){

    .oc-sub-head h1{
        font-size:29px;
    }

    .oc-sub-plans{
        grid-template-columns:1fr;
    }

    .oc-sub-current{
        flex-direction:column;
        align-items:flex-start;
    }

    .oc-sub-plan{
        padding:25px 20px;
    }
}

/* ===== OFFICECO CHECKOUT ===== */

.oc-checkout-page{
    background:#f5f8fb;
    min-height:calc(100vh - 160px);
    padding:48px 0 70px;
    direction:rtl;
}

.oc-checkout-page .container{
    max-width:1120px;
    margin:0 auto;
    padding:0 24px;
}

.oc-checkout-head{
    margin-bottom:28px;
}

.oc-checkout-head > a{
    display:inline-flex;
    align-items:center;
    color:#17649a;
    text-decoration:none;
    font-weight:700;
    margin-bottom:20px;
}

.oc-checkout-head .ocq-kicker{
    display:block;
    font-size:13px;
    color:#168f96;
    font-weight:800;
    margin-bottom:7px;
}

.oc-checkout-head h1{
    margin:0 0 8px;
    font-size:34px;
    color:#102a4c;
}

.oc-checkout-head p{
    margin:0;
    color:#637287;
    font-size:16px;
}

.oc-checkout-grid{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);
    gap:24px;
    align-items:start;
}

.oc-checkout-main{
    display:grid;
    gap:18px;
}

.oc-checkout-box,
.oc-checkout-summary{
    background:#fff;
    border:1px solid #e1e8ef;
    border-radius:18px;
    box-shadow:0 8px 28px rgba(22,52,80,.06);
}

.oc-checkout-box{
    padding:26px;
}

.oc-checkout-box h2{
    margin:0 0 18px;
    color:#102a4c;
    font-size:21px;
}

.oc-payment-methods{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.oc-payment-method{
    appearance:none;
    border:1.5px solid #d9e3ec;
    background:#fff;
    border-radius:14px;
    padding:17px 18px;
    text-align:right;
    cursor:pointer;
    transition:.2s ease;
    font-family:inherit;
}

.oc-payment-method:hover{
    border-color:#168f96;
}

.oc-payment-method.active{
    border-color:#168f96;
    background:#f2fbfb;
    box-shadow:0 0 0 3px rgba(22,143,150,.08);
}

.oc-payment-method strong{
    display:block;
    color:#102a4c;
    font-size:17px;
    margin-bottom:4px;
}

.oc-payment-method span{
    color:#758398;
    font-size:13px;
}

.oc-payment-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding-bottom:18px;
    border-bottom:1px solid #edf1f5;
    margin-bottom:20px;
}

.oc-payment-title span{
    color:#7a8797;
    font-size:13px;
}

.oc-payment-title h2{
    margin:3px 0 0;
}

.oc-payment-amount{
    direction:ltr;
    white-space:nowrap;
    background:#eef8f8;
    color:#087b82;
    border-radius:12px;
    padding:10px 14px;
    font-size:18px;
}

.oc-payment-instruction{
    color:#59697c;
    line-height:1.9;
    margin:0 0 16px;
}

.oc-copy-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    background:#f7f9fb;
    border:1px solid #e5ebf0;
    border-radius:13px;
}

.oc-copy-row > div{
    min-width:0;
}

.oc-copy-row span,
.oc-bank-details > div > span{
    display:block;
    color:#7b8796;
    font-size:12px;
    margin-bottom:4px;
}

.oc-copy-row strong{
    color:#102a4c;
    font-size:17px;
}

.oc-copy-btn{
    flex:0 0 auto;
    border:1px solid #cfdbe5;
    background:#fff;
    color:#17649a;
    border-radius:9px;
    padding:8px 14px;
    cursor:pointer;
    font-family:inherit;
    font-weight:700;
}

.oc-copy-btn:hover{
    background:#eef6fb;
}

.oc-bank-details{
    display:grid;
    gap:14px;
}

.oc-bank-details > div:not(.oc-copy-row){
    padding:14px 17px;
    background:#f7f9fb;
    border-radius:12px;
}

.oc-bank-details strong{
    color:#102a4c;
}

.oc-iban{
    direction:ltr;
    display:block;
    word-break:break-all;
}

.oc-payment-next{
    width:100%;
    margin-top:4px;
    padding:13px 20px;
    border-radius:11px;
    font-size:16px;
}

.oc-payment-next:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.oc-checkout-preview-note{
    display:block;
    text-align:center;
    margin-top:10px;
    color:#8995a5;
}

.oc-checkout-summary{
    padding:26px;
    position:sticky;
    top:24px;
}

.oc-checkout-summary > span{
    color:#78869a;
    font-size:13px;
}

.oc-checkout-summary h2{
    color:#102a4c;
    font-size:30px;
    margin:6px 0 4px;
}

.oc-summary-cycle{
    display:inline-block;
    background:#eef8f8;
    color:#087b82;
    font-weight:800;
    font-size:13px;
    padding:5px 10px;
    border-radius:20px;
    margin:5px 0 18px;
}

.oc-summary-price{
    display:flex;
    align-items:baseline;
    gap:7px;
    direction:ltr;
    justify-content:flex-end;
    padding-bottom:20px;
    border-bottom:1px solid #edf1f5;
}

.oc-summary-price strong{
    color:#102a4c;
    font-size:34px;
}

.oc-summary-price span{
    color:#7a8797;
}

.oc-summary-line{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:16px 0;
    border-bottom:1px solid #edf1f5;
    color:#667588;
}

.oc-summary-line strong{
    color:#102a4c;
    text-align:left;
}

.oc-summary-saving{
    margin-top:16px;
    background:#eef9f4;
    color:#23835e;
    padding:11px 13px;
    border-radius:10px;
    text-align:center;
    font-weight:800;
    font-size:13px;
}

.oc-checkout-summary > p{
    color:#7a8797;
    font-size:13px;
    line-height:1.8;
    margin:18px 0 0;
}

@media(max-width:850px){

    .oc-checkout-page{
        padding:30px 0 50px;
    }

    .oc-checkout-grid{
        grid-template-columns:1fr;
    }

    .oc-checkout-summary{
        position:static;
        order:-1;
    }

}

@media(max-width:560px){

    .oc-checkout-page .container{
        padding:0 15px;
    }

    .oc-checkout-head h1{
        font-size:28px;
    }

    .oc-payment-methods{
        grid-template-columns:1fr;
    }

    .oc-checkout-box,
    .oc-checkout-summary{
        padding:20px;
        border-radius:15px;
    }

    .oc-payment-title{
        align-items:flex-start;
        flex-direction:column;
    }

    .oc-copy-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .oc-copy-btn{
        width:100%;
    }

}


/* ===== SUBSCRIPTION SUCCESS ===== */

.oc-success-card{
    max-width:720px;
    margin:30px auto;
    padding:42px;
    background:#fff;
    border:1px solid #e1e8ef;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(20,47,79,.07);
    text-align:center;
}

.oc-success-icon{
    width:64px;
    height:64px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eaf8f2;
    color:#16845f;
    font-size:32px;
    font-weight:800;
}

.oc-success-card h1{
    color:#102a4c;
    margin:8px 0 10px;
}

.oc-success-card > p{
    color:#6d7c8e;
    line-height:1.9;
}

.oc-success-details{
    margin:25px 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    text-align:right;
}

.oc-success-details > div{
    padding:14px;
    background:#f7f9fb;
    border-radius:10px;
}

.oc-success-details span{
    display:block;
    color:#7b8796;
    font-size:11px;
    margin-bottom:5px;
}

.oc-success-details strong{
    color:#102a4c;
}

.oc-success-status{
    margin:20px 0 25px;
    padding:15px;
    border-radius:11px;
    background:#fff8e8;
    color:#8a6418;
}

.oc-success-status strong,
.oc-success-status span{
    display:block;
}

.oc-success-status span{
    margin-top:4px;
    font-size:12px;
}

@media(max-width:600px){

    .oc-success-card{
        padding:28px 20px;
    }

    .oc-success-details{
        grid-template-columns:1fr;
    }

}


/* ===== ADMIN PLAN EDIT POLISH ===== */

body:has(form[action*="/admin/plan/"]) .container.narrow{
    max-width:900px;
}

body:has(form[action*="/admin/plan/"]) .card{
    padding:32px;
    border-radius:22px;
}

body:has(form[action*="/admin/plan/"]) .form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

body:has(form[action*="/admin/plan/"]) .form label{
    margin:0;
    font-weight:700;
    color:#13233f;
}

body:has(form[action*="/admin/plan/"]) .form label:nth-of-type(1),
body:has(form[action*="/admin/plan/"]) .form label:nth-of-type(2),
body:has(form[action*="/admin/plan/"]) .form label:nth-of-type(3){
    grid-column:span 2;
}

body:has(form[action*="/admin/plan/"]) .form input,
body:has(form[action*="/admin/plan/"]) .form select{
    width:100%;
    min-height:52px;
    margin-top:8px;
    padding:12px 15px;
    border:1px solid #d9e1ee;
    border-radius:13px;
    background:#fff;
    font:inherit;
}

body:has(form[action*="/admin/plan/"]) .form input:disabled{
    background:#f6f8fc;
    color:#667085;
}

body:has(form[action*="/admin/plan/"]) .form button[type="submit"]{
    grid-column:span 2;
    min-height:52px;
    margin-top:8px;
}

@media(max-width:700px){
    body:has(form[action*="/admin/plan/"]) .form{
        grid-template-columns:1fr;
    }

    body:has(form[action*="/admin/plan/"]) .form label,
    body:has(form[action*="/admin/plan/"]) .form label:nth-of-type(1),
    body:has(form[action*="/admin/plan/"]) .form label:nth-of-type(2),
    body:has(form[action*="/admin/plan/"]) .form label:nth-of-type(3),
    body:has(form[action*="/admin/plan/"]) .form button[type="submit"]{
        grid-column:1;
    }
}


/* ===== ADMIN SERVICES POLISH ===== */

body:has(a[href*="/admin/plan/"]) main.section{
    padding-top:55px;
}

body:has(a[href*="/admin/plan/"]) main.section > .container{
    max-width:1180px;
}

body:has(a[href*="/admin/plan/"]) .admin-head{
    margin-bottom:28px;
    align-items:center;
}

body:has(a[href*="/admin/plan/"]) .admin-head h1{
    margin:0 0 7px;
    font-size:34px;
    line-height:1.25;
}

body:has(a[href*="/admin/plan/"]) .admin-head p{
    margin:0;
    color:#667085;
}

body:has(a[href*="/admin/plan/"]) .card{
    padding:28px;
    border-radius:22px;
    margin-bottom:22px !important;
}

body:has(a[href*="/admin/plan/"]) .card h2{
    font-size:26px;
    margin:0 0 4px !important;
}

body:has(a[href*="/admin/plan/"]) .card .status{
    padding:7px 13px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}

body:has(a[href*="/admin/plan/"]) .table-wrap{
    margin-top:22px;
    overflow:hidden;
    border:1px solid #e8edf5;
    border-radius:16px;
}

body:has(a[href*="/admin/plan/"]) .table-wrap table{
    margin:0;
    width:100%;
}

body:has(a[href*="/admin/plan/"]) .table-wrap th{
    padding:14px 12px;
    background:#f6f8fc;
    font-size:13px;
    white-space:nowrap;
}

body:has(a[href*="/admin/plan/"]) .table-wrap td{
    padding:14px 12px;
    vertical-align:middle;
}

body:has(a[href*="/admin/plan/"]) .table-wrap td strong{
    color:#102544;
}

body:has(a[href*="/admin/plan/"]) .table-wrap .btn{
    min-height:auto;
    padding:8px 17px;
    border-radius:11px;
    font-size:14px;
}

body:has(a[href*="/admin/plan/"]) .table-wrap tr:last-child td{
    border-bottom:0;
}

@media(max-width:800px){
    body:has(a[href*="/admin/plan/"]) main.section{
        padding-top:35px;
    }

    body:has(a[href*="/admin/plan/"]) .card{
        padding:20px;
    }

    body:has(a[href*="/admin/plan/"]) .table-wrap{
        overflow-x:auto;
    }

    body:has(a[href*="/admin/plan/"]) .table-wrap table{
        min-width:760px;
    }
}


/* ===== ADMIN COMPANY DETAIL POLISH ===== */

body:has(a[href*="/admin/companies"]) main.section {
    padding-top: 60px;
    padding-bottom: 70px;
}

body:has(a[href*="/admin/companies"]) main.section > .container {
    max-width: 1140px;
}

body:has(a[href*="/admin/companies"]) .admin-head {
    align-items: center;
    margin-bottom: 28px;
}

body:has(a[href*="/admin/companies"]) .admin-head h1 {
    margin: 0 0 8px;
    font-size: 34px;
    line-height: 1.25;
}

body:has(a[href*="/admin/companies"]) .admin-head p {
    margin: 0;
    color: #667085;
}

body:has(a[href*="/admin/companies"]) .stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

body:has(a[href*="/admin/companies"]) .stats .card {
    min-height: 135px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body:has(a[href*="/admin/companies"]) .stats .card span {
    display: block;
    margin-bottom: 12px;
    color: #667085;
}

body:has(a[href*="/admin/companies"]) .stats .card strong {
    font-size: 30px;
    line-height: 1.2;
}

body:has(a[href*="/admin/companies"]) .card {
    border-radius: 20px;
}

body:has(a[href*="/admin/companies"]) .card > h2 {
    margin-top: 0;
    margin-bottom: 22px;
    font-size: 25px;
}

body:has(a[href*="/admin/companies"]) .table-wrap {
    padding: 26px;
}

body:has(a[href*="/admin/companies"]) .table-wrap table {
    margin-top: 18px;
}

body:has(a[href*="/admin/companies"]) .table-wrap th,
body:has(a[href*="/admin/companies"]) .table-wrap td {
    padding: 15px 16px;
}

@media (max-width: 900px) {
    body:has(a[href*="/admin/companies"]) .stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    body:has(a[href*="/admin/companies"]) main.section {
        padding-top: 35px;
    }

    body:has(a[href*="/admin/companies"]) .stats {
        grid-template-columns: 1fr;
    }

    body:has(a[href*="/admin/companies"]) .admin-head {
        align-items: flex-start;
        gap: 16px;
    }
}


/* ===== COMPANY DETAIL FINAL FIX ===== */

body:has(a[href*="/admin/companies"]) main.section {
    padding-top: 95px !important;
}

body:has(a[href*="/admin/companies"]) .admin-head {
    position: relative;
    z-index: 1;
}

body:has(a[href*="/admin/companies"]) .stats .card strong {
    direction: ltr;
    unicode-bidi: isolate;
}


/* ===== COMPANY SUBSCRIPTION + SERVICES POLISH ===== */

body:has(a[href*="/admin/companies"]) .stats + .card {
    padding: 28px 30px;
    min-height: auto;
}

body:has(a[href*="/admin/companies"]) .stats + .card h2 {
    padding-bottom: 16px;
    margin: 0 0 18px;
    border-bottom: 1px solid #e8edf4;
}

body:has(a[href*="/admin/companies"]) .stats + .card p {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px 28px;
    padding: 10px 15px;
    background: #f7f9fc;
    border: 1px solid #edf0f5;
    border-radius: 10px;
}

body:has(a[href*="/admin/companies"]) .stats + .card > div {
    clear: both;
    margin-top: 5px;
}


/* Services card */
body:has(a[href*="/admin/companies"]) .stats + .card + .card {
    padding: 28px 30px;
    min-height: auto;
}

body:has(a[href*="/admin/companies"]) .stats + .card + .card h2 {
    padding-bottom: 16px;
    margin: 0 0 18px;
    border-bottom: 1px solid #e8edf4;
}

body:has(a[href*="/admin/companies"]) .stats + .card + .card p {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 12px 18px;
    background: #f7f9fc;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    font-weight: 600;
}

@media (max-width: 700px) {
    body:has(a[href*="/admin/companies"]) .stats + .card p {
        display: flex;
        margin: 0 0 10px;
    }
}


/* ===== ADMIN SUBSCRIPTION FORM ===== */

.subscription-admin-form {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid #e8edf4;
}

.subscription-admin-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}

.subscription-admin-grid > div {
    min-width: 0;
}

.subscription-admin-grid label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.subscription-admin-grid select,
.subscription-admin-grid input[type="date"] {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: #fff;
    font: inherit;
}

.subscription-admin-grid select:focus,
.subscription-admin-grid input[type="date"]:focus {
    outline: none;
    border-color: #8b9aaa;
}

.subscription-admin-submit .btn {
    height: 46px;
    white-space: nowrap;
    padding-left: 22px;
    padding-right: 22px;
}

@media (max-width: 900px) {
    .subscription-admin-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .subscription-admin-grid {
        grid-template-columns: 1fr;
    }

    .subscription-admin-submit .btn {
        width: 100%;
    }
}


/* ===== ADMIN USER CREATE FORM ===== */

.admin-user-create-form {
    margin: 18px 0 26px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
}

.admin-user-create-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    align-items: end;
}

.admin-user-create-grid > div {
    min-width: 0;
}

.admin-user-create-grid label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
}

.admin-user-create-grid input,
.admin-user-create-grid select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}

.admin-user-create-grid input:focus,
.admin-user-create-grid select:focus {
    outline: none;
    border-color: #8b9aaa;
}

.admin-user-create-submit .btn {
    width: 100%;
    height: 44px;
}

@media (max-width: 900px) {
    .admin-user-create-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .admin-user-create-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== ADMIN USER EDIT ===== */

.user-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
}

.user-actions .btn {
    min-width: 64px;
    white-space: nowrap;
}

.user-edit-row {
    display: none;
}

.user-edit-row.open {
    display: table-row;
}

.user-edit-row > td {
    padding: 0 12px 18px !important;
    border-bottom: 1px solid #e7ecf2;
}

.admin-user-edit-form {
    margin-top: 8px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e3e9f0;
    border-radius: 12px;
}

.admin-user-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.admin-user-edit-grid > div {
    min-width: 0;
}

.admin-user-edit-grid label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
}

.admin-user-edit-grid input,
.admin-user-edit-grid select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}

.admin-user-edit-grid input:focus,
.admin-user-edit-grid select:focus {
    outline: none;
    border-color: #8b9aaa;
}

.admin-user-edit-submit .btn {
    width: 100%;
    height: 44px;
}

@media (max-width: 900px) {
    .admin-user-edit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .admin-user-edit-grid {
        grid-template-columns: 1fr;
    }

    .user-actions {
        flex-direction: column;
    }
}


/* =========================================================
   OfficeCo Tech - Public Pricing
   ========================================================= */

#plans.officeco-plans {
    padding: 85px 0 95px;
    background: #f7fafd;
}

#plans .section-head {
    margin-bottom: 38px;
}

.home-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    align-items: stretch;
}

.home-price-card {
    position: relative;
    background: #fff;
    border: 1px solid #dce7f1;
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 14px 40px rgba(15, 52, 91, .07);
    display: flex;
    flex-direction: column;
    min-height: 480px;
    overflow: hidden;
}

.home-price-card.featured {
    border: 2px solid #0d8f96;
    box-shadow: 0 18px 50px rgba(13, 143, 150, .12);
}

.home-price-card .plan-label {
    display: inline-flex;
    width: fit-content;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 14px;
}

.home-price-card h3 {
    margin: 0 0 8px;
    font-size: 26px;
    color: #0d2d52;
}

.home-price-card .plan-subtitle {
    color: #64748b;
    margin: 0 0 22px;
    min-height: 28px;
}

.home-price-card .plan-price {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    margin: 4px 0 20px;
    direction: ltr;
    justify-content: flex-end;
}

.home-price-card .plan-price strong {
    font-size: 44px;
    line-height: 1;
    color: #0d2d52;
    letter-spacing: -1.5px;
}

.home-price-card .plan-price span {
    color: #64748b;
    font-size: 14px;
    padding-bottom: 5px;
}

.home-price-card .plan-limit {
    background: #f3f7fa;
    border-radius: 12px;
    padding: 14px 16px;
    font-weight: 800;
    color: #0d2d52;
    text-align: center;
    margin-bottom: 20px;
}

.home-price-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

.home-price-card li {
    position: relative;
    padding: 9px 24px 9px 0;
    border-bottom: 1px solid #edf2f6;
    color: #42556c;
}

.home-price-card li::before {
    content: "✓";
    position: absolute;
    right: 0;
    top: 9px;
    color: #0d9f8f;
    font-weight: 900;
}

.home-price-card .plan-yearly {
    margin-top: auto;
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 12px;
    background: #eef8f7;
    color: #176c6d;
    font-size: 14px;
    text-align: center;
}

.home-price-card > .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.home-price-card.featured::before {
    content: "الأكثر نشاطًا";
    position: absolute;
    top: 18px;
    left: -37px;
    width: 145px;
    padding: 7px 0;
    text-align: center;
    background: #0d8f96;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    transform: rotate(-45deg);
}

#plans .pricing-bottom {
    max-width: 900px;
    margin: 30px auto 0;
    text-align: center;
}

#plans .pricing-bottom p {
    color: #64748b;
    margin-bottom: 14px;
}

/* Header register button */
.officeco-topbar .nav-register {
    padding: 9px 15px;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 820px) {
    .home-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .home-price-card {
        min-height: auto;
    }
}

@media (max-width: 600px) {
    #plans.officeco-plans {
        padding: 55px 0 65px;
    }

    .home-price-card {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .home-price-card .plan-price strong {
        font-size: 38px;
    }
}


/* ===== OfficeCo Pricing Final Polish ===== */

.home-price-card {
    padding: 34px 32px;
    min-height: 510px;
}

.home-price-card.featured-price {
    border: 2px solid #10a6a1;
    box-shadow: 0 18px 48px rgba(16,166,161,.13);
}

.home-price-label {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    margin-bottom: 12px;
    border-radius: 20px;
    background: #eef4fa;
    color: #123e73;
    font-size: 13px;
    font-weight: 800;
}

.featured-price .home-price-label {
    background: #e5f8f5;
    color: #087d78;
}

.home-price-badge {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 10px;
    padding: 6px 11px;
    border-radius: 20px;
    background: #10a6a1;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.home-price-card h3 {
    margin: 0 0 18px;
    color: #102f54;
    font-size: 24px;
    line-height: 1.4;
}

.home-price {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
    direction: ltr;
    margin: 0 0 18px;
}

.home-price strong {
    font-size: 46px;
    line-height: 1;
    letter-spacing: -1.5px;
    color: #123e73;
}

.featured-price .home-price strong {
    color: #087f7a;
}

.home-price span {
    padding-bottom: 5px;
    color: #718096;
    font-size: 14px;
}

.home-price-limit {
    margin: 0 0 18px !important;
    padding: 13px 15px;
    border-radius: 12px;
    background: #f3f7fb;
    color: #123e73 !important;
    font-weight: 800;
    text-align: center;
}

.home-price-card ul {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.home-price-card li {
    position: relative;
    padding: 10px 25px 10px 0;
    border-bottom: 1px solid #edf2f6;
    color: #53657a;
}

.home-price-card li::before {
    content: "✓";
    position: absolute;
    right: 0;
    top: 10px;
    color: #10a69d;
    font-weight: 900;
}

.home-yearly {
    margin: 0 0 17px;
    padding: 13px 15px;
    border-radius: 12px;
    background: #eef8f7;
    color: #176d6c;
    text-align: center;
}

.home-yearly strong {
    color: #0b6f6c;
    font-size: 17px;
}

.home-price-card > .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.home-trial-callout {
    max-width: 900px;
    margin: 28px auto 0;
    padding: 22px 26px;
    border: 1px solid #dce7f1;
    border-radius: 18px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(15,52,91,.05);
}

.home-trial-callout > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.home-trial-callout strong {
    color: #123e73;
    font-size: 17px;
}

.home-trial-callout span {
    color: #64748b;
}

.home-trial-callout .btn {
    white-space: nowrap;
}

@media (max-width: 820px) {
    .home-price-card {
        min-height: auto;
    }

    .home-trial-callout {
        flex-direction: column;
        text-align: center;
    }

    .home-trial-callout .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .home-price {
        justify-content: center;
    }

    .home-price strong {
        font-size: 40px;
    }

    .home-price-card {
        padding: 26px 21px;
    }
}


/* ===== OfficeCo Mobile Menu ===== */

.mobile-menu-toggle{
    display:none;
    width:46px;
    height:46px;
    padding:0;
    border:1px solid #e2e8f0;
    border-radius:13px;
    background:#fff;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    flex:0 0 auto;
}

.mobile-menu-toggle span{
    display:block;
    width:22px;
    height:2px;
    border-radius:10px;
    background:#123e73;
    transition:.25s ease;
}

@media (max-width:700px){

    .officeco-topbar .nav{
        position:relative;
        height:76px;
        min-height:76px;
        align-items:center;
    }

    .officeco-topbar .brand-logo img{
        height:58px;
        max-width:190px;
    }

    .mobile-menu-toggle{
        display:flex;
    }

    .officeco-topbar .nav > nav{
        display:none;
        position:absolute;
        top:calc(100% + 1px);
        right:0;
        left:0;
        width:100%;
        padding:12px;
        background:#fff;
        border:1px solid #e6eaf0;
        border-radius:0 0 18px 18px;
        box-shadow:0 18px 35px rgba(15,23,42,.12);
        z-index:100;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
    }

    .officeco-topbar .nav > nav.mobile-open{
        display:flex;
    }

    .officeco-topbar .nav > nav > a{
        display:block;
        width:100%;
        padding:13px 14px;
        border-radius:10px;
        text-align:right;
        font-size:14px;
    }

    .officeco-topbar .nav > nav > a:hover{
        background:#f5f8fb;
    }

    .officeco-topbar .nav > nav .nav-login{
        margin-top:5px;
        border:1px solid #dce4ec;
        text-align:center;
    }

    .officeco-topbar .nav > nav .nav-register{
        margin-top:6px;
        color:#fff;
        text-align:center;
        justify-content:center;
    }

    .mobile-menu-toggle.active span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.active span:nth-child(2){
        opacity:0;
    }

    .mobile-menu-toggle.active span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }
}


/* ===== Mobile Menu Visibility Fix ===== */
@media (max-width:700px){

    .officeco-topbar .nav > nav.mobile-open{
        display:flex !important;
        position:fixed;
        top:76px;
        right:12px;
        left:12px;
        width:auto;
        max-height:calc(100vh - 90px);
        overflow-y:auto;

        padding:12px;

        background:#fff;
        border:1px solid #e2e8f0;
        border-radius:16px;

        box-shadow:
            0 20px 50px rgba(15,23,42,.16);

        z-index:9999;

        flex-direction:column;
        align-items:stretch;
        gap:3px;
    }

    .officeco-topbar .nav > nav.mobile-open > a{
        display:flex !important;
        align-items:center;
        min-height:48px;
        width:100%;
        padding:11px 14px;
    }

    .officeco-topbar .nav > nav.mobile-open .nav-login,
    .officeco-topbar .nav > nav.mobile-open .nav-register{
        justify-content:center;
        text-align:center;
    }
}


/* ===== Product Catalog Checkout ===== */

.oc-sub-page .container.narrow,
body:has(.oc-cat-checkout) .container.narrow {
    max-width: 820px;
}

.oc-cat-checkout {
    max-width: 820px;
    margin: 0 auto;
}

.oc-cat-checkout .oc-sub-head {
    text-align: center;
    margin-bottom: 28px;
}

.oc-cat-checkout .card {
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(18,62,115,.06);
}

.oc-cat-checkout .plan-summary {
    padding: 24px 28px;
    margin-bottom: 18px;
}

.oc-cat-checkout .plan-summary h2 {
    margin: 0 0 20px;
    font-size: 24px;
    color: #123e73;
}

.oc-cat-checkout .plan-meta {
    display: grid !important;
    grid-template-columns: repeat(3,1fr);
    gap: 12px !important;
    margin: 0 !important;
}

.oc-cat-checkout .plan-meta > div {
    padding: 14px;
    border-radius: 12px;
    background: #f6f9fc;
    text-align: center;
}

.oc-cat-checkout .plan-meta small {
    display: block;
    margin-bottom: 6px;
    color: #6d7b8d;
}

.oc-cat-checkout .plan-meta strong {
    font-size: 18px;
    color: #123e73;
}

.oc-cat-checkout .payment-card {
    padding: 26px 28px;
}

.oc-cat-checkout .payment-card > h2 {
    margin: 0 0 8px;
    color: #123e73;
}

.oc-cat-checkout .payment-methods {
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    gap: 14px !important;
    margin: 22px 0 !important;
}

.oc-cat-checkout .payment-method-option {
    position: relative;
    margin: 0 !important;
    padding: 20px !important;
    min-height: 105px;
    border: 2px solid #e3eaf2;
    border-radius: 14px;
    cursor: pointer;
    transition: .2s ease;
}

.oc-cat-checkout .payment-method-option:hover {
    border-color: #9bb8d8;
}

.oc-cat-checkout .payment-method-option:has(input:checked) {
    border-color: #123e73;
    background: #f5f9fd;
    box-shadow: 0 0 0 3px rgba(18,62,115,.06);
}

.oc-cat-checkout .payment-method-option input {
    position: absolute;
    top: 18px;
    left: 18px;
}

.oc-cat-checkout .payment-method-option strong {
    display: block;
    margin-bottom: 6px;
    font-size: 17px;
    color: #123e73;
}

.oc-cat-checkout .payment-method-option p {
    margin: 0 !important;
    color: #66768a;
}

.oc-cat-checkout .payment-details {
    margin: 0 0 22px !important;
    padding: 20px 22px !important;
    border: 1px solid #dce7f2;
    border-radius: 14px;
    background: #f7fafc;
}

.oc-cat-checkout .payment-details > strong {
    display: block;
    margin-bottom: 12px;
    font-size: 17px;
    color: #123e73;
}

.oc-cat-checkout .payment-details p {
    margin: 8px 0;
}

.oc-cat-checkout .field {
    margin-top: 20px;
}

.oc-cat-checkout .field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #243b55;
}

.oc-cat-checkout .field input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #ccd8e5;
    border-radius: 10px;
    background: #fff;
}

.oc-cat-checkout .field input:focus {
    outline: none;
    border-color: #123e73;
    box-shadow: 0 0 0 3px rgba(18,62,115,.08);
}

.oc-cat-checkout .checkout-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

.oc-cat-checkout .checkout-actions .btn {
    min-height: 46px;
    padding: 0 24px;
}

@media (max-width: 700px) {
    .oc-cat-checkout .plan-meta,
    .oc-cat-checkout .payment-methods {
        grid-template-columns: 1fr !important;
    }

    .oc-cat-checkout .plan-summary,
    .oc-cat-checkout .payment-card {
        padding: 20px 16px;
    }

    .oc-cat-checkout .checkout-actions {
        flex-direction: column;
    }

    .oc-cat-checkout .checkout-actions .btn {
        width: 100%;
    }
}

/* ===== Product Catalog Checkout ===== */

.oc-sub-page .container.narrow,
body:has(.oc-cat-checkout) .container.narrow {
    max-width: 820px;
}

.oc-cat-checkout {
    max-width: 820px;
    margin: 0 auto;
}

.oc-cat-checkout .oc-sub-head {
    text-align: center;
    margin-bottom: 28px;
}

.oc-cat-checkout .card {
    border: 1px solid #dbe5f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(18,62,115,.06);
}

.oc-cat-checkout .plan-summary {
    padding: 24px 28px;
    margin-bottom: 18px;
}

.oc-cat-checkout .plan-summary h2 {
    margin: 0 0 20px;
    font-size: 24px;
    color: #123e73;
}

.oc-cat-checkout .plan-meta {
    display: grid !important;
    grid-template-columns: repeat(3,1fr);
    gap: 12px !important;
    margin: 0 !important;
}

.oc-cat-checkout .plan-meta > div {
    padding: 14px;
    border-radius: 12px;
    background: #f6f9fc;
    text-align: center;
}

.oc-cat-checkout .plan-meta small {
    display: block;
    margin-bottom: 6px;
    color: #6d7b8d;
}

.oc-cat-checkout .plan-meta strong {
    font-size: 18px;
    color: #123e73;
}

.oc-cat-checkout .payment-card {
    padding: 26px 28px;
}

.oc-cat-checkout .payment-card > h2 {
    margin: 0 0 8px;
    color: #123e73;
}

.oc-cat-checkout .payment-methods {
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    gap: 14px !important;
    margin: 22px 0 !important;
}

.oc-cat-checkout .payment-method-option {
    position: relative;
    margin: 0 !important;
    padding: 20px !important;
    min-height: 105px;
    border: 2px solid #e3eaf2;
    border-radius: 14px;
    cursor: pointer;
    transition: .2s ease;
}

.oc-cat-checkout .payment-method-option:hover {
    border-color: #9bb8d8;
}

.oc-cat-checkout .payment-method-option:has(input:checked) {
    border-color: #123e73;
    background: #f5f9fd;
    box-shadow: 0 0 0 3px rgba(18,62,115,.06);
}

.oc-cat-checkout .payment-method-option input {
    position: absolute;
    top: 18px;
    left: 18px;
}

.oc-cat-checkout .payment-method-option strong {
    display: block;
    margin-bottom: 6px;
    font-size: 17px;
    color: #123e73;
}

.oc-cat-checkout .payment-method-option p {
    margin: 0 !important;
    color: #66768a;
}

.oc-cat-checkout .payment-details {
    margin: 0 0 22px !important;
    padding: 20px 22px !important;
    border: 1px solid #dce7f2;
    border-radius: 14px;
    background: #f7fafc;
}

.oc-cat-checkout .payment-details > strong {
    display: block;
    margin-bottom: 12px;
    font-size: 17px;
    color: #123e73;
}

.oc-cat-checkout .payment-details p {
    margin: 8px 0;
}

.oc-cat-checkout .field {
    margin-top: 20px;
}

.oc-cat-checkout .field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #243b55;
}

.oc-cat-checkout .field input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #ccd8e5;
    border-radius: 10px;
    background: #fff;
}

.oc-cat-checkout .field input:focus {
    outline: none;
    border-color: #123e73;
    box-shadow: 0 0 0 3px rgba(18,62,115,.08);
}

.oc-cat-checkout .checkout-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

.oc-cat-checkout .checkout-actions .btn {
    min-height: 46px;
    padding: 0 24px;
}

@media (max-width: 700px) {
    .oc-cat-checkout .plan-meta,
    .oc-cat-checkout .payment-methods {
        grid-template-columns: 1fr !important;
    }

    .oc-cat-checkout .plan-summary,
    .oc-cat-checkout .payment-card {
        padding: 20px 16px;
    }

    .oc-cat-checkout .checkout-actions {
        flex-direction: column;
    }

    .oc-cat-checkout .checkout-actions .btn {
        width: 100%;
    }
}

/* Catalog checkout final spacing */

.oc-cat-checkout {
    padding-top: 45px;
    padding-bottom: 60px;
}

.oc-cat-checkout .oc-sub-head {
    margin-bottom: 30px;
}

.oc-cat-checkout .payment-bank p,
.oc-cat-checkout .payment-cliq p {
    line-height: 1.8;
}

.oc-cat-checkout .payment-bank span[dir="ltr"] {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    font-weight: 700;
    letter-spacing: .3px;
}

@media (max-width:700px) {
    .oc-cat-checkout {
        padding-top: 25px;
    }
}

/* ===== Admin Subscriptions ===== */

.oc-admin-subs .container {
    max-width: 1240px;
}

.oc-admin-subs-card {
    padding: 18px;
    margin-top: 24px;
    border-radius: 18px;
    overflow: hidden;
}

.oc-admin-subs-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
}

.oc-admin-subs-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: separate;
    border-spacing: 0;
}

.oc-admin-subs-table th {
    padding: 15px 12px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    background: #f6f8fb;
    text-align: right;
}

.oc-admin-subs-table td {
    padding: 16px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #edf1f5;
    white-space: nowrap;
    font-size: 14px;
}

.oc-admin-subs-table tbody tr:last-child td {
    border-bottom: 0;
}

.oc-admin-subs-table tbody tr:hover {
    background: #fafcff;
}

/* Status */

.oc-sub-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.oc-sub-status.pending {
    background: #fff5d9;
    color: #9a6700;
}

.oc-sub-status.confirmed {
    background: #e7f7ef;
    color: #087443;
}

.oc-sub-status.rejected {
    background: #fdeaea;
    color: #b42318;
}

/* Actions */

.oc-sub-actions {
    min-width: 145px;
}

.oc-sub-actions form {
    display: inline-block !important;
    margin: 2px;
}

.oc-sub-actions .btn {
    min-width: 60px;
    padding: 8px 12px;
    font-size: 13px;
}

/* Keep important values readable */

.oc-admin-subs-table td:nth-child(1),
.oc-admin-subs-table td:nth-child(6),
.oc-admin-subs-table td:nth-child(8) {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Mobile */

@media (max-width: 700px) {

    .oc-admin-subs-card {
        padding: 10px;
    }

    .oc-admin-subs-table th,
    .oc-admin-subs-table td {
        padding: 12px 10px;
        font-size: 12px;
    }

}

/* =========================================================
   OfficeCo Tech - Restaurant Menu Admin UI
   ========================================================= */

.ocq-page{
    padding:42px 0 60px;
}

.ocq-page > .container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}

/* Page Header */
.ocq-page .ocq-head{
    background:#fff;
    border:1px solid #e4eaf2;
    border-radius:18px;
    padding:24px 28px;
    margin-bottom:22px;
    box-shadow:0 8px 30px rgba(24,55,91,.05);
}

.ocq-page .ocq-head h1{
    font-size:30px;
    margin:7px 0 6px;
    line-height:1.3;
}

.ocq-page .ocq-head p{
    line-height:1.8;
}

/* Panels */
.ocq-page .ocq-panel{
    background:#fff;
    border:1px solid #e4eaf2;
    border-radius:18px;
    padding:24px;
    box-shadow:0 8px 30px rgba(24,55,91,.045);
}

.ocq-page .ocq-panel + .ocq-panel{
    margin-top:18px;
}

.ocq-page .ocq-panel-head{
    padding-bottom:16px;
    margin-bottom:20px;
}

.ocq-page .ocq-panel-head h2{
    font-size:20px;
}

/* Statistics */
.ocq-page .ocq-stats{
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:16px;
    margin-bottom:22px;
}

.ocq-page .ocq-stat{
    min-height:112px;
    padding:20px 22px;
    box-shadow:0 6px 22px rgba(24,55,91,.035);
}

.ocq-page .ocq-stat strong{
    font-size:27px;
}

/* Forms */
.ocq-page .form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.ocq-page .form-group{
    margin-bottom:18px;
}

.ocq-page .form-group label{
    display:block;
    margin-bottom:7px;
    font-weight:700;
    color:#263e5d;
}

.ocq-page input[type="text"],
.ocq-page input[type="number"],
.ocq-page input[type="email"],
.ocq-page input[type="tel"],
.ocq-page input[type="url"],
.ocq-page input[type="file"],
.ocq-page select,
.ocq-page textarea{
    width:100%;
    box-sizing:border-box;
    min-height:44px;
    padding:10px 13px;
    border:1px solid #dce4ee;
    border-radius:10px;
    background:#fff;
    font:inherit;
    color:#243b57;
    outline:none;
    transition:border-color .2s, box-shadow .2s;
}

.ocq-page textarea{
    min-height:100px;
    resize:vertical;
}

.ocq-page input:focus,
.ocq-page select:focus,
.ocq-page textarea:focus{
    border-color:#1766aa;
    box-shadow:0 0 0 3px rgba(23,102,170,.08);
}

/* Tables */
.ocq-page table{
    width:100%;
    border-collapse:collapse;
}

.ocq-page table th{
    background:#f7f9fc;
    color:#63748a;
    font-size:13px;
    font-weight:700;
}

.ocq-page table th,
.ocq-page table td{
    padding:13px 12px;
    border-bottom:1px solid #e9eef4;
    vertical-align:middle;
}

.ocq-page table tbody tr:hover{
    background:#fbfcfe;
}

/* Buttons */
.ocq-page .btn{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    padding:9px 17px;
    font-weight:700;
    text-decoration:none;
}

/* Restaurant Menu Hero page - normalize old wrapper */
.ocq-main{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
    padding:42px 0 60px;
    direction:rtl;
}

.ocq-wrap{
    width:100%;
}

.ocq-main .ocq-panel{
    background:#fff;
    border:1px solid #e4eaf2;
    border-radius:18px;
    padding:24px;
    box-shadow:0 8px 30px rgba(24,55,91,.045);
}

.ocq-main .ocq-panel-head{
    margin-bottom:20px;
    padding-bottom:16px;
}

/* Better image cards */
.menu-sort-image,
.menu-hero-sort-item{
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease;
}

.menu-sort-image:hover,
.menu-hero-sort-item:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(24,55,91,.10);
}

/* Responsive */
@media(max-width:900px){

    .ocq-page{
        padding:24px 0 40px;
    }

    .ocq-page > .container,
    .ocq-main{
        width:min(100% - 24px,1180px);
    }

    .ocq-page .ocq-head{
        padding:20px;
    }

    .ocq-page .ocq-head h1{
        font-size:25px;
    }

    .ocq-page .ocq-panel,
    .ocq-main .ocq-panel{
        padding:18px;
    }

    .ocq-page .form-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .ocq-page .ocq-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:560px){

    .ocq-page > .container,
    .ocq-main{
        width:calc(100% - 20px);
    }

    .ocq-page .ocq-stats{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .ocq-page .ocq-stat{
        min-height:auto;
        padding:15px;
    }

    .ocq-page .ocq-stat strong{
        font-size:22px;
    }

    .ocq-page .btn{
        min-height:40px;
        padding:8px 13px;
    }

    .ocq-page table th,
    .ocq-page table td{
        padding:10px 8px;
    }
}


/* ===== OfficeCo Main Navigation Dropdown ===== */

#officeco-main-nav {
    align-items: center;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
}

.nav-dropdown-arrow {
    font-size: 15px;
    line-height: 1;
    transition: transform .2s ease;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 310px;
    padding: 10px;
    background: #fff;
    border: 1px solid rgba(15, 65, 115, .10);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(15, 65, 115, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .2s ease;
    z-index: 1000;
}

.nav-dropdown-menu a {
    display: block;
    padding: 12px 14px;
    border-radius: 11px;
    text-decoration: none;
}

.nav-dropdown-menu a:hover {
    background: #f4f8fc;
}

.nav-dropdown-menu strong,
.nav-dropdown-menu small {
    display: block;
}

.nav-dropdown-menu strong {
    margin-bottom: 3px;
}

.nav-dropdown-menu small {
    opacity: .65;
    font-size: 12px;
    line-height: 1.6;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown.open .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-tools {
    font-weight: 700;
}

@media (max-width: 900px) {

    #officeco-main-nav.mobile-open {
        overflow-y: auto;
        max-height: calc(100vh - 80px);
    }

    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 12px 0;
    }

    .nav-dropdown-menu {
        position: static;
        width: 100%;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        margin: 2px 0 8px;
        padding: 6px;
        border-radius: 12px;
        background: #f7f9fc;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    .nav-dropdown-menu a {
        padding: 10px 12px;
    }
}


/* ===== OfficeCo Home V2 ===== */

.officeco-system-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.officeco-system-grid .service-card{
    min-width:0;
}

.officeco-system-grid .service-icon,
.home-system-price-head .service-icon,
.officeco-how-card .service-icon{
    min-width:54px;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    overflow:hidden;
}

.officeco-coming-system{
    background:linear-gradient(145deg,#f8fbff,#f3f8fc);
    border-style:dashed;
}

.officeco-features-six{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.officeco-features-six > div{
    min-width:0;
}

.officeco-three-plans{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
}

.officeco-three-plans .home-price-card{
    display:flex;
    flex-direction:column;
}

.home-system-price-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.home-system-price-head h3{
    margin:4px 0 0;
}

.home-jod-price{
    margin:0 0 22px;
    padding:10px 12px;
    border-radius:10px;
    background:#f6f9fc;
    font-size:14px;
}

.officeco-three-plans .btn{
    margin-top:auto;
}

.officeco-how{
    background:#fff;
}

.officeco-how-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.officeco-how-card{
    min-width:0;
    padding:28px;
    border:1px solid #e3eaf2;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 35px rgba(17,65,110,.06);
}

.officeco-how-card h3{
    margin:18px 0 10px;
}

.officeco-how-card p{
    margin-bottom:20px;
    line-height:1.9;
}

.officeco-pdf-pending{
    display:inline-flex;
    padding:8px 13px;
    border-radius:999px;
    background:#f1f5f9;
    font-size:13px;
    font-weight:700;
    color:#667085;
}

.officeco-home-cta{
    padding-top:20px;
}

.officeco-final-cta{
    margin-top:0;
}

@media (max-width:1100px){
    .officeco-system-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:900px){
    .officeco-features-six,
    .officeco-three-plans,
    .officeco-how-grid{
        grid-template-columns:1fr;
    }

    .officeco-three-plans{
        max-width:620px;
        margin-left:auto;
        margin-right:auto;
    }
}

@media (max-width:640px){
    .officeco-system-grid{
        grid-template-columns:1fr;
    }

    .officeco-system-grid .service-card,
    .officeco-how-card{
        padding:22px 18px;
    }

    .officeco-features-six{
        gap:12px;
    }

    .home-system-price-head{
        align-items:flex-start;
    }

    .officeco-final-cta{
        text-align:center;
    }
}


/* =========================================================
   OfficeCo Tech - Home Hero Slider
   ========================================================= */

.officeco-hero-slider{
    position:relative;
    overflow:hidden;
    min-height:660px;
}

.officeco-hero-slide{
    display:none;
    width:100%;
}

.officeco-hero-slide.is-active{
    display:block;
    animation:officecoHeroIn .55s ease;
}

@keyframes officecoHeroIn{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* Slider controls */

.officeco-slider-arrow{
    position:absolute;
    z-index:15;
    top:50%;
    transform:translateY(-50%);
    width:46px;
    height:46px;
    border:1px solid rgba(13,70,123,.14);
    border-radius:50%;
    background:rgba(255,255,255,.88);
    color:#0d467b;
    font-size:30px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 30px rgba(15,54,91,.10);
    backdrop-filter:blur(8px);
}

.officeco-slider-prev{
    left:24px;
}

.officeco-slider-next{
    right:24px;
}

.officeco-slider-arrow:hover{
    background:#fff;
    transform:translateY(-50%) scale(1.05);
}

.officeco-slider-dots{
    position:absolute;
    z-index:16;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    direction:ltr;
}

.officeco-slider-dots button{
    width:9px;
    height:9px;
    padding:0;
    border:0;
    border-radius:20px;
    background:#b9c9d8;
    cursor:pointer;
    transition:.25s ease;
}

.officeco-slider-dots button.is-active{
    width:28px;
    background:#0c5d9f;
}


/* =========================================================
   Product Catalog Visual
   ========================================================= */

.catalog-hero-visual{
    min-height:470px;
}

.catalog-device{
    position:relative;
    width:390px;
    min-height:430px;
    padding:22px;
    border:1px solid #dbe6ef;
    border-radius:24px;
    background:#fff;
    box-shadow:0 28px 65px rgba(20,68,108,.13);
    transform:rotate(-2deg);
}

.catalog-device-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.catalog-brand{
    font-size:13px;
    font-weight:800;
    color:#0d467b;
}

.catalog-menu-dots{
    color:#8ba1b5;
    letter-spacing:2px;
}

.catalog-mini-hero{
    height:130px;
    padding:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-radius:17px;
    background:linear-gradient(135deg,#0c4f8b,#08a8a1);
    color:#fff;
}

.catalog-mini-hero span{
    font-size:10px;
    letter-spacing:1.5px;
    opacity:.82;
}

.catalog-mini-hero strong{
    margin-top:5px;
    font-size:27px;
}

.catalog-products-preview{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:16px;
}

.catalog-product{
    min-width:0;
    padding:9px;
    border:1px solid #edf1f5;
    border-radius:13px;
    background:#fff;
}

.catalog-product i{
    display:block;
    height:74px;
    margin-bottom:8px;
    border-radius:9px;
    background:linear-gradient(145deg,#eef4f8,#dce8f0);
}

.catalog-product:nth-child(2) i{
    background:linear-gradient(145deg,#e4f5f2,#bfe4de);
}

.catalog-product:nth-child(3) i{
    background:linear-gradient(145deg,#f2f5fa,#d8e1ef);
}

.catalog-product b,
.catalog-product small{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.catalog-product b{
    font-size:10px;
    color:#173a5c;
}

.catalog-product small{
    margin-top:3px;
    font-size:9px;
    color:#08a099;
}


/* QR card */

.hero-qr-card{
    position:absolute;
    z-index:5;
    right:-25px;
    bottom:35px;
    width:105px;
    padding:13px;
    text-align:center;
    border:1px solid #e1eaf1;
    border-radius:15px;
    background:#fff;
    box-shadow:0 14px 35px rgba(20,68,108,.13);
}

.hero-qr-pattern{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    margin:0 auto 7px;
    border-radius:8px;
    background:
        repeating-linear-gradient(
            45deg,
            #0d467b 0 4px,
            #fff 4px 8px
        );
    color:transparent;
    border:6px solid #fff;
    outline:1px solid #dfe8ef;
}

.hero-qr-card span{
    display:block;
    font-size:9px;
    font-weight:800;
    color:#0d467b;
    letter-spacing:.6px;
}


/* =========================================================
   Restaurant Menu Visual
   ========================================================= */

.menu-hero-visual{
    min-height:485px;
}

.menu-phone{
    position:relative;
    width:310px;
    min-height:465px;
    margin:auto;
    padding:18px 17px 20px;
    border:7px solid #153b60;
    border-radius:36px;
    background:#fff;
    box-shadow:0 30px 70px rgba(13,57,94,.18);
    transform:rotate(2deg);
}

.menu-phone-bar{
    width:70px;
    height:5px;
    margin:-7px auto 14px;
    border-radius:10px;
    background:#d9e3eb;
}

.menu-phone-head{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:13px;
}

.menu-demo-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:11px;
    background:linear-gradient(135deg,#0c4f8b,#08aaa2);
    color:#fff;
    font-size:11px;
    font-weight:900;
}

.menu-phone-head b,
.menu-phone-head small{
    display:block;
}

.menu-phone-head b{
    font-size:12px;
    color:#173a5c;
}

.menu-phone-head small{
    margin-top:2px;
    font-size:9px;
    color:#8293a4;
}

.menu-food-hero{
    height:145px;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    border-radius:18px;
    background:
        radial-gradient(circle at 70% 35%,rgba(255,255,255,.23),transparent 24%),
        linear-gradient(135deg,#0c4d86,#0aa69f);
    color:#fff;
}

.menu-food-hero span{
    font-size:10px;
    opacity:.82;
}

.menu-food-hero strong{
    margin-top:3px;
    font-size:20px;
}

.menu-category-pills{
    display:flex;
    gap:6px;
    margin:14px 0;
}

.menu-category-pills span{
    padding:6px 9px;
    border-radius:20px;
    background:#eff5f8;
    color:#315979;
    font-size:8px;
    font-weight:700;
}

.menu-category-pills span:first-child{
    background:#0d5b98;
    color:#fff;
}

.menu-items-preview{
    display:grid;
    gap:8px;
}

.menu-items-preview > div{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px;
    border:1px solid #edf1f4;
    border-radius:12px;
}

.menu-items-preview i{
    display:block;
    flex:0 0 50px;
    height:44px;
    border-radius:9px;
    background:linear-gradient(145deg,#e0f1ee,#c4e2dc);
}

.menu-items-preview > div:nth-child(2) i{
    background:linear-gradient(145deg,#e6edf5,#cddceb);
}

.menu-items-preview span{
    min-width:0;
}

.menu-items-preview b,
.menu-items-preview small{
    display:block;
}

.menu-items-preview b{
    font-size:10px;
    color:#173a5c;
}

.menu-items-preview small{
    margin-top:3px;
    font-size:9px;
    color:#079b94;
}

.menu-qr-card{
    right:5px;
    bottom:20px;
}


/* =========================================================
   Responsive Hero
   ========================================================= */

@media (max-width:1100px){

    .officeco-slider-prev{
        left:8px;
    }

    .officeco-slider-next{
        right:8px;
    }

    .officeco-slider-arrow{
        width:38px;
        height:38px;
        font-size:25px;
    }

    .catalog-device{
        width:340px;
    }
}

@media (max-width:900px){

    .officeco-hero-slider{
        min-height:auto;
    }

    .officeco-hero-slide .officeco-hero-grid{
        padding-bottom:80px;
    }

    .catalog-hero-visual,
    .menu-hero-visual{
        min-height:440px;
    }

    .officeco-slider-arrow{
        top:auto;
        bottom:18px;
        transform:none;
    }

    .officeco-slider-arrow:hover{
        transform:scale(1.05);
    }

    .officeco-slider-prev{
        left:calc(50% - 92px);
    }

    .officeco-slider-next{
        right:calc(50% - 92px);
    }

    .officeco-slider-dots{
        bottom:32px;
    }
}

@media (max-width:640px){

    .officeco-hero-slide .officeco-hero-grid{
        padding-bottom:76px;
    }

    .catalog-hero-visual{
        min-height:370px;
    }

    .catalog-device{
        width:min(300px,88vw);
        min-height:350px;
        padding:15px;
    }

    .catalog-mini-hero{
        height:100px;
        padding:17px;
    }

    .catalog-mini-hero strong{
        font-size:21px;
    }

    .catalog-product i{
        height:54px;
    }

    .hero-qr-card{
        width:86px;
        right:0;
    }

    .hero-qr-pattern{
        width:50px;
        height:50px;
    }

    .menu-hero-visual{
        min-height:430px;
    }

    .menu-phone{
        width:min(270px,82vw);
        min-height:405px;
        padding:15px;
    }

    .menu-food-hero{
        height:115px;
    }

    .officeco-slider-arrow{
        width:34px;
        height:34px;
        font-size:22px;
    }
}


/* =========================================================
   OfficeCo Tech - FINAL HOME HERO LAYOUT
   ========================================================= */

#officecoHero.officeco-hero{
    padding:0 !important;
    min-height:0 !important;
    background:
        radial-gradient(circle at 8% 35%,rgba(31,143,226,.13),transparent 30%),
        radial-gradient(circle at 92% 20%,rgba(16,182,165,.10),transparent 27%),
        linear-gradient(105deg,#edf7ff 0%,#f8fbff 48%,#eef7fc 100%) !important;
}

#officecoHero .officeco-hero-slide{
    min-height:500px;
}

#officecoHero .officeco-hero-grid{
    width:min(1380px,94%) !important;
    min-height:500px;
    padding:35px 0 45px;
    grid-template-columns:minmax(520px,1.12fr) minmax(470px,.88fr) !important;
    gap:45px !important;
}

/* النص */

#officecoHero .officeco-hero-copy{
    max-width:650px;
}

#officecoHero .officeco-badge{
    padding:7px 14px;
    font-size:.78rem;
}

#officecoHero h1{
    font-size:clamp(2.7rem,4.1vw,4.25rem) !important;
    line-height:1.12 !important;
    margin:14px 0 15px !important;
}

#officecoHero .officeco-hero-copy > p{
    max-width:620px;
    margin-bottom:17px;
    font-size:1rem !important;
    line-height:1.8 !important;
}

#officecoHero .actions{
    margin-top:16px;
}

#officecoHero .officeco-trust{
    margin-top:18px;
    gap:12px 22px;
    font-size:.78rem;
}

/* مساحة الـ Visual */

#officecoHero .officeco-hero-visual{
    min-height:420px !important;
}

/* عرض الأسعار */

#officecoHero .quote-preview{
    width:390px !important;
    min-height:405px !important;
    padding:26px !important;
}

#officecoHero .preview-lines{
    margin:24px 0 !important;
}

#officecoHero .preview-table{
    margin-top:24px !important;
}

#officecoHero .preview-table span{
    height:37px !important;
}

#officecoHero .preview-total{
    margin-top:21px !important;
}

/* كتالوج المنتجات */

#officecoHero .catalog-hero-visual{
    min-height:420px !important;
}

#officecoHero .catalog-device{
    width:410px;
    min-height:390px;
    padding:19px;
}

#officecoHero .catalog-mini-hero{
    height:112px;
}

/* منيو المطاعم */

#officecoHero .menu-hero-visual{
    min-height:420px !important;
}

#officecoHero .menu-phone{
    width:285px;
    min-height:410px;
}

#officecoHero .menu-food-hero{
    height:120px;
}

/* الأسهم */

#officecoHero .officeco-slider-arrow{
    width:42px;
    height:42px;
    border:0;
    background:rgba(255,255,255,.92);
    box-shadow:0 7px 25px rgba(16,65,105,.12);
}

#officecoHero .officeco-slider-prev{
    left:28px;
}

#officecoHero .officeco-slider-next{
    right:28px;
}

/* النقاط */

#officecoHero .officeco-slider-dots{
    bottom:14px;
}

#officecoHero .officeco-slider-dots button{
    width:10px;
    height:10px;
}

#officecoHero .officeco-slider-dots button.is-active{
    width:10px;
    background:#0d5b9e;
}

/* Accent لكل نظام */

#officecoHero .officeco-hero-slide[data-slide="0"] .officeco-badge{
    color:#075a9e;
    background:#e6f2ff;
    border-color:#cfe5fa;
}

#officecoHero .officeco-hero-slide[data-slide="1"] .officeco-badge{
    color:#078f82;
    background:#e7f8f4;
    border-color:#cceee7;
}

#officecoHero .officeco-hero-slide[data-slide="1"] h1 span{
    color:#07998d;
}

#officecoHero .officeco-hero-slide[data-slide="2"] .officeco-badge{
    color:#b56b00;
    background:#fff4dc;
    border-color:#f6dfac;
}

#officecoHero .officeco-hero-slide[data-slide="2"] h1 span{
    color:#e18a09;
}

/* Tablet */

@media(max-width:1000px){

    #officecoHero .officeco-hero-grid{
        grid-template-columns:1fr !important;
        gap:20px !important;
        padding:45px 0 75px;
    }

    #officecoHero .officeco-hero-copy{
        max-width:760px;
        margin:auto;
        text-align:center !important;
    }

    #officecoHero .officeco-hero-copy > p{
        margin-left:auto;
        margin-right:auto;
    }

    #officecoHero .actions,
    #officecoHero .officeco-trust{
        justify-content:center;
    }

    #officecoHero .officeco-hero-visual{
        min-height:400px !important;
    }
}

/* Mobile */

@media(max-width:700px){

    #officecoHero .officeco-hero-grid{
        width:min(92%,520px) !important;
        padding:35px 0 72px;
    }

    #officecoHero h1{
        font-size:2.25rem !important;
        letter-spacing:-.035em !important;
    }

    #officecoHero .officeco-hero-copy > p{
        font-size:.92rem !important;
        line-height:1.75 !important;
    }

    #officecoHero .actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    #officecoHero .actions .btn{
        width:100%;
        padding-left:10px;
        padding-right:10px;
    }

    #officecoHero .officeco-trust{
        justify-content:center;
        gap:7px 12px;
    }

    #officecoHero .officeco-hero-visual{
        min-height:350px !important;
    }

    #officecoHero .quote-preview{
        width:min(320px,88vw) !important;
        min-height:345px !important;
        padding:20px !important;
    }

    #officecoHero .catalog-device{
        width:min(310px,86vw);
        min-height:340px;
    }

    #officecoHero .menu-phone{
        width:min(255px,76vw);
        min-height:385px;
    }

    #officecoHero .floating-chip{
        font-size:.68rem !important;
    }

    #officecoHero .officeco-slider-prev{
        left:12px;
    }

    #officecoHero .officeco-slider-next{
        right:12px;
    }
}


/* =========================================================
   OfficeCo Tech - Premium Systems Section
   ========================================================= */

.oc-systems-premium{
    padding:72px 0 60px;
    background:#fff;
}

.oc-systems-heading{
    margin-bottom:34px;
}

.oc-systems-heading h2{
    margin-bottom:8px;
}

.oc-system-showcase{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    direction:rtl;
}

.oc-system-card{
    position:relative;
    min-width:0;
    min-height:510px;
    padding:25px 25px 22px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #dce8f2;
    border-radius:22px;
    box-shadow:0 12px 35px rgba(22,66,105,.06);
}

.oc-system-card:before{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    border-radius:50%;
    left:-80px;
    bottom:-90px;
    opacity:.35;
    pointer-events:none;
}

/* Quotation */

.oc-system-quotation{
    background:
        linear-gradient(145deg,#ffffff 15%,#f0f7ff 100%);
    border-color:#cfe2f5;
}

.oc-system-quotation:before{
    background:#cce6ff;
}

/* Menu */

.oc-system-menu{
    background:
        linear-gradient(145deg,#fff 12%,#fff8e9 100%);
    border-color:#f4dfb6;
}

.oc-system-menu:before{
    background:#ffe4a5;
}

/* Catalog */

.oc-system-catalog{
    background:
        linear-gradient(145deg,#fff 12%,#ebfaf7 100%);
    border-color:#ccebe5;
}

.oc-system-catalog:before{
    background:#bfece5;
}


/* Tags */

.oc-system-tag{
    position:relative;
    z-index:2;
    display:inline-flex;
    width:max-content;
    max-width:100%;
    padding:7px 12px;
    margin-bottom:20px;
    border-radius:999px;
    font-size:.73rem;
    font-weight:700;
}

.oc-system-quotation .oc-system-tag{
    color:#0965b4;
    background:#e4f2ff;
}

.oc-system-menu .oc-system-tag{
    color:#bf6a00;
    background:#fff0cf;
}

.oc-system-catalog .oc-system-tag{
    color:#078d80;
    background:#dcf6f1;
}


/* Header */

.oc-system-title-row{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.oc-system-icon{
    flex:0 0 52px;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:14px;
    color:#fff;
    font-size:.8rem;
    font-weight:900;
    direction:ltr;
}

.oc-system-quotation .oc-system-icon{
    background:linear-gradient(135deg,#0875dc,#084b9f);
}

.oc-system-menu .oc-system-icon{
    background:linear-gradient(135deg,#ff9d00,#dc6500);
}

.oc-system-catalog .oc-system-icon{
    background:linear-gradient(135deg,#08a99a,#087d91);
}

.oc-system-title-row h3{
    margin:0 0 8px;
    color:#0b3767;
    font-size:1.42rem;
}

.oc-system-title-row p{
    margin:0;
    color:#63778b;
    font-size:.9rem;
    line-height:1.8;
}


/* Features */

.oc-system-features{
    position:relative;
    z-index:2;
    margin:22px 0 20px;
    padding:0;
    list-style:none;
    display:grid;
    gap:9px;
}

.oc-system-features li{
    position:relative;
    padding-right:22px;
    color:#49647e;
    font-size:.86rem;
}

.oc-system-features li:before{
    content:"✓";
    position:absolute;
    right:0;
    top:0;
    font-weight:900;
}

.oc-system-quotation .oc-system-features li:before{
    color:#0875d1;
}

.oc-system-menu .oc-system-features li:before{
    color:#e98600;
}

.oc-system-catalog .oc-system-features li:before{
    color:#079b8d;
}


/* Visual area */

.oc-system-visual{
    position:absolute;
    z-index:1;
    left:18px;
    bottom:78px;
    width:42%;
    height:190px;
    pointer-events:none;
}


/* Quotation visual */

.oc-mini-document{
    position:absolute;
    left:5px;
    bottom:0;
    width:175px;
    height:190px;
    padding:14px;
    border-radius:10px;
    background:#fff;
    border:1px solid #d9e5ef;
    box-shadow:0 15px 30px rgba(20,61,98,.12);
    transform:rotate(-5deg);
    direction:ltr;
}

.oc-mini-doc-head{
    display:flex;
    align-items:center;
    gap:8px;
    padding-bottom:10px;
    border-bottom:1px solid #e6edf3;
}

.oc-mini-doc-head > span{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#096ac1;
    color:#fff;
    font-size:9px;
    font-weight:900;
}

.oc-mini-doc-head b,
.oc-mini-doc-head small{
    display:block;
}

.oc-mini-doc-head b{
    color:#174c7d;
    font-size:9px;
}

.oc-mini-doc-head small{
    color:#91a0ae;
    font-size:7px;
}

.oc-mini-document > i{
    display:block;
    height:4px;
    margin-top:8px;
    border-radius:5px;
    background:#e5edf3;
}

.oc-mini-document > i:nth-of-type(2){
    width:75%;
}

.oc-mini-document > i:nth-of-type(3){
    width:52%;
}

.oc-mini-doc-table{
    margin-top:12px;
    border:1px solid #e4ebf1;
}

.oc-mini-doc-table span{
    display:block;
    height:16px;
    border-bottom:1px solid #e4ebf1;
}

.oc-mini-doc-table span:last-child{
    border:0;
}

.oc-mini-document > strong{
    display:block;
    margin-top:10px;
    text-align:right;
    color:#0c4d89;
    font-size:8px;
}


/* Menu phone */

.oc-mini-phone{
    position:absolute;
    left:10px;
    bottom:0;
    width:125px;
    height:195px;
    padding:11px;
    border:5px solid #183f63;
    border-radius:22px;
    background:#fff;
    box-shadow:0 16px 30px rgba(27,60,90,.14);
    transform:rotate(4deg);
}

.oc-mini-phone-top{
    width:38px;
    height:4px;
    margin:-5px auto 8px;
    border-radius:5px;
    background:#dce4ea;
}

.oc-mini-brand{
    text-align:center;
}

.oc-mini-brand b,
.oc-mini-brand small{
    display:block;
}

.oc-mini-brand b{
    color:#173e63;
    font-size:9px;
}

.oc-mini-brand small{
    color:#94a1ad;
    font-size:6px;
}

.oc-mini-food-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    margin-top:10px;
}

.oc-mini-food-grid span{
    height:55px;
    border-radius:8px;
    background:
        radial-gradient(circle at 50% 40%,#f2a336 0 18%,transparent 19%),
        linear-gradient(145deg,#fff0d8,#f3d09b);
}

.oc-mini-food-grid span:nth-child(2),
.oc-mini-food-grid span:nth-child(3){
    background:
        radial-gradient(circle at 50% 40%,#d96d26 0 18%,transparent 19%),
        linear-gradient(145deg,#ffe5c9,#eab77d);
}


/* Catalog laptop */

.oc-mini-laptop{
    position:absolute;
    left:0;
    bottom:5px;
    width:190px;
    transform:rotate(2deg);
}

.oc-mini-screen{
    height:125px;
    padding:11px;
    border:7px solid #233c51;
    border-bottom-width:10px;
    border-radius:10px 10px 5px 5px;
    background:#fff;
    box-shadow:0 12px 25px rgba(22,57,85,.12);
}

.oc-mini-search{
    width:75%;
    height:8px;
    margin-bottom:10px;
    border-radius:8px;
    background:#e8eff3;
}

.oc-mini-products{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

.oc-mini-products span{
    height:39px;
    border-radius:6px;
    background:linear-gradient(145deg,#edf5f3,#cfe8e3);
}

.oc-mini-products span:nth-child(2),
.oc-mini-products span:nth-child(3){
    background:linear-gradient(145deg,#f0f4f8,#d9e3eb);
}

.oc-mini-keyboard{
    width:215px;
    height:15px;
    margin-left:-13px;
    border-radius:2px 2px 12px 12px;
    background:linear-gradient(#d8e0e6,#9ba9b4);
}


/* Actions */

.oc-system-actions{
    position:relative;
    z-index:5;
    margin-top:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.oc-system-actions .btn{
    width:100%;
    min-width:0;
    padding:11px 8px !important;
    font-size:.82rem;
}


/* =========================================================
   Free Trial Banner
   ========================================================= */

.oc-systems-trial-banner{
    position:relative;
    margin-top:24px;
    padding:25px 28px;
    display:grid;
    grid-template-columns:auto 1.2fr 1.5fr auto;
    align-items:center;
    gap:26px;
    overflow:hidden;
    border:1px solid #cfe5f5;
    border-radius:22px;
    background:
        radial-gradient(circle at 5% 50%,rgba(21,113,206,.13),transparent 22%),
        radial-gradient(circle at 95% 30%,rgba(16,182,165,.12),transparent 24%),
        linear-gradient(110deg,#f1f8ff,#fff,#edfbf9);
}

.oc-trial-gift{
    width:74px;
    height:74px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:linear-gradient(145deg,#fff,#dfefff);
    color:#0873d4;
    font-size:2rem;
    box-shadow:0 12px 28px rgba(17,83,144,.10);
}

.oc-trial-copy strong{
    display:block;
    margin-bottom:5px;
    color:#0b3f73;
    font-size:1.45rem;
}

.oc-trial-copy p{
    margin:0;
    color:#61778c;
    line-height:1.7;
    font-size:.87rem;
}

.oc-trial-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.oc-trial-benefits span{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-height:65px;
    padding:8px;
    text-align:center;
    border-right:1px solid #dbe9f2;
    color:#315a7d;
    font-size:.74rem;
}

.oc-trial-benefits span:first-child{
    border-right:0;
}

.oc-trial-benefits b{
    color:#0871cc;
    font-size:1.2rem;
}

.oc-trial-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
}

.oc-trial-action .btn{
    white-space:nowrap;
}

.oc-trial-action small{
    color:#60768a;
}


/* =========================================================
   Responsive
   ========================================================= */

@media(max-width:1100px){

    .oc-system-card{
        padding:22px 20px;
    }

    .oc-system-visual{
        opacity:.75;
    }

    .oc-systems-trial-banner{
        grid-template-columns:auto 1fr auto;
    }

    .oc-trial-benefits{
        grid-column:1 / -1;
        grid-row:2;
    }
}

@media(max-width:900px){

    .oc-system-showcase{
        grid-template-columns:1fr;
        max-width:650px;
        margin-left:auto;
        margin-right:auto;
    }

    .oc-system-card{
        min-height:430px;
    }

    .oc-system-visual{
        width:35%;
    }

    .oc-systems-trial-banner{
        max-width:650px;
        margin-left:auto;
        margin-right:auto;
        margin-top:20px;
        grid-template-columns:auto 1fr;
    }

    .oc-trial-action{
        grid-column:1 / -1;
    }
}

@media(max-width:600px){

    .oc-systems-premium{
        padding:50px 0 42px;
    }

    .oc-system-card{
        min-height:0;
        padding:20px 17px;
    }

    .oc-system-title-row{
        gap:10px;
    }

    .oc-system-icon{
        flex-basis:45px;
        width:45px;
        height:45px;
        font-size:.67rem;
    }

    .oc-system-title-row h3{
        font-size:1.25rem;
    }

    .oc-system-visual{
        position:relative;
        left:auto;
        bottom:auto;
        width:100%;
        height:175px;
        margin:5px 0 17px;
        display:grid;
        place-items:center;
    }

    .oc-mini-document,
    .oc-mini-phone,
    .oc-mini-laptop{
        left:auto;
        bottom:auto;
    }

    .oc-system-actions{
        grid-template-columns:1fr;
    }

    .oc-systems-trial-banner{
        padding:22px 18px;
        grid-template-columns:1fr;
        text-align:center;
    }

    .oc-trial-gift{
        margin:auto;
    }

    .oc-trial-benefits{
        grid-column:auto;
        grid-row:auto;
    }

    .oc-trial-benefits span{
        border-right:0;
        border-bottom:1px solid #dbe9f2;
    }

    .oc-trial-benefits span:last-child{
        border-bottom:0;
    }

    .oc-trial-action{
        grid-column:auto;
    }

    .oc-trial-action .btn{
        width:100%;
    }
}


/* ===== OfficeCo Anchor + Systems Heading Fix ===== */

/* Keep anchored sections/cards below sticky header */
html{
    scroll-padding-top:110px;
}

#services,
#features,
#plans,
#how-it-works,
#quotation,
#product-catalog,
#restaurant-menu{
    scroll-margin-top:110px;
}

/* Systems section heading */
.oc-systems-premium{
    padding-top:68px !important;
}

.oc-systems-heading{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    margin:0 auto 34px !important;
}

.oc-systems-heading > div{
    width:100%;
    max-width:760px;
    margin:0 auto;
}

.oc-systems-heading .eyebrow{
    display:inline-flex;
    margin-bottom:10px;
}

.oc-systems-heading h2{
    margin:0 0 9px !important;
    font-size:clamp(1.9rem,3vw,2.45rem) !important;
    line-height:1.3;
    color:#0d315c;
}

.oc-systems-heading p{
    margin:0 auto !important;
    max-width:650px;
    line-height:1.8;
    color:#687b8f;
}

@media(max-width:700px){
    html{
        scroll-padding-top:90px;
    }

    #services,
    #features,
    #plans,
    #how-it-works,
    #quotation,
    #product-catalog,
    #restaurant-menu{
        scroll-margin-top:90px;
    }

    .oc-systems-premium{
        padding-top:48px !important;
    }

    .oc-systems-heading{
        margin-bottom:25px !important;
    }

    .oc-systems-heading h2{
        font-size:1.75rem !important;
    }
}


/* ===== OfficeCo Compact Features Strip ===== */

.oc-features-strip{
    position:relative;
    z-index:5;
    background:#fff;
    padding:22px 0 26px;
    border-bottom:1px solid #edf2f6;
}

.oc-features-row{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
    align-items:stretch;
}

.oc-feature-mini{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
    padding:12px 10px;
    border-radius:14px;
    transition:.25s ease;
}

.oc-feature-mini:hover{
    background:#f7fafc;
    transform:translateY(-2px);
}

.oc-feature-mini-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eaf3ff;
    color:#1767b2;
    font-size:1.15rem;
    font-weight:800;
}

.oc-feature-mini:nth-child(2) .oc-feature-mini-icon,
.oc-feature-mini:nth-child(5) .oc-feature-mini-icon{
    background:#e8f8f5;
    color:#168d80;
}

.oc-feature-mini:nth-child(3) .oc-feature-mini-icon,
.oc-feature-mini:nth-child(6) .oc-feature-mini-icon{
    background:#fff3e7;
    color:#e78326;
}

.oc-feature-mini strong{
    display:block;
    color:#12385f;
    font-size:.9rem;
    line-height:1.45;
    margin-bottom:3px;
    white-space:nowrap;
}

.oc-feature-mini small{
    display:block;
    color:#7b8c9e;
    font-size:.7rem;
    line-height:1.55;
}

/* Tablet */
@media(max-width:1100px){
    .oc-features-row{
        grid-template-columns:repeat(3,1fr);
        gap:8px 14px;
    }

    .oc-feature-mini{
        padding:12px;
    }
}

/* Mobile */
@media(max-width:600px){
    .oc-features-strip{
        padding:16px 0 18px;
    }

    .oc-features-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
    }

    .oc-feature-mini{
        align-items:flex-start;
        gap:8px;
        padding:10px 5px;
    }

    .oc-feature-mini-icon{
        flex-basis:34px;
        width:34px;
        height:34px;
        font-size:.95rem;
    }

    .oc-feature-mini strong{
        font-size:.78rem;
        white-space:normal;
    }

    .oc-feature-mini small{
        font-size:.64rem;
    }
}


/* ===== OfficeCo Premium Pricing ===== */

.oc-pricing-section{
    background:#f7fafc;
    padding:72px 0 64px !important;
}

.oc-pricing-heading{
    justify-content:center !important;
    text-align:center;
    margin-bottom:38px !important;
}

.oc-pricing-heading > div{
    width:100%;
}

.oc-pricing-heading h2{
    color:#10365f;
    margin:8px 0 8px;
}

.oc-pricing-heading p{
    max-width:620px;
    margin:0 auto;
    color:#74869a;
    line-height:1.8;
}

.oc-pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.oc-price-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:390px;
    padding:28px;
    background:#fff;
    border:1px solid #e3ebf3;
    border-radius:22px;
    box-shadow:0 12px 35px rgba(18,56,95,.06);
    overflow:hidden;
    transition:.25s ease;
}

.oc-price-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 45px rgba(18,56,95,.11);
}

.oc-price-card:before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:5px;
}

.oc-price-quotation:before{
    background:#1371c8;
}

.oc-price-catalog:before{
    background:#10a598;
}

.oc-price-menu:before{
    background:#f28a18;
}

.oc-price-top{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:25px;
}

.oc-price-icon{
    width:52px;
    height:52px;
    flex:0 0 52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    font-weight:800;
    font-size:.8rem;
    color:#fff;
}

.oc-price-quotation .oc-price-icon{
    background:#1371c8;
}

.oc-price-catalog .oc-price-icon{
    background:#10a598;
}

.oc-price-menu .oc-price-icon{
    background:#f28a18;
}

.oc-price-top small{
    display:block;
    color:#8090a2;
    font-size:.75rem;
    margin-bottom:3px;
}

.oc-price-top h3{
    margin:0;
    color:#11375e;
    font-size:1.15rem;
}

.oc-price-main{
    display:flex;
    align-items:flex-end;
    gap:8px;
    direction:ltr;
    justify-content:flex-end;
    margin:5px 0 22px;
}

.oc-price-main strong{
    color:#0e3157;
    font-size:3rem;
    line-height:1;
    letter-spacing:-2px;
}

.oc-price-main span{
    color:#7c8da0;
    font-size:.82rem;
    padding-bottom:5px;
}

.oc-price-details{
    display:flex;
    flex-direction:column;
    gap:11px;
    padding:18px 0;
    border-top:1px solid #edf1f5;
    color:#586f87;
    font-size:.86rem;
    line-height:1.6;
}

.oc-price-details span:first-child{
    font-weight:700;
    color:#294f74;
}

.oc-price-button{
    margin-top:auto;
    width:100%;
    text-align:center;
}

.oc-price-catalog .oc-price-button{
    background:#0d968b;
    border-color:#0d968b;
}

.oc-price-menu .oc-price-button{
    background:#ed8415;
    border-color:#ed8415;
}

.oc-pricing-note{
    text-align:center;
    color:#7b8da0;
    font-size:.8rem;
    margin:24px 0 0;
}

/* Tablet */
@media(max-width:900px){
    .oc-pricing-grid{
        grid-template-columns:1fr;
        max-width:620px;
        margin:0 auto;
    }

    .oc-price-card{
        min-height:auto;
    }
}

/* Mobile */
@media(max-width:600px){
    .oc-pricing-section{
        padding:50px 0 44px !important;
    }

    .oc-pricing-heading{
        margin-bottom:25px !important;
    }

    .oc-price-card{
        padding:22px;
        border-radius:18px;
    }

    .oc-price-main strong{
        font-size:2.5rem;
    }
}


/* ===== OfficeCo How It Works ===== */

.oc-how-section{
    background:#fff;
    padding:72px 0 68px !important;
}

.oc-how-heading{
    justify-content:center !important;
    text-align:center;
    margin-bottom:38px !important;
}

.oc-how-heading > div{
    width:100%;
}

.oc-how-heading h2{
    color:#10365f;
    margin:8px 0;
}

.oc-how-heading p{
    max-width:650px;
    margin:0 auto;
    color:#74869a;
    line-height:1.8;
}

.oc-how-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.oc-how-card{
    position:relative;
    padding:28px;
    border:1px solid #e3ebf3;
    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 32px rgba(18,56,95,.055);
    overflow:hidden;
}

.oc-how-card:before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:5px;
}

.oc-how-quotation:before{background:#1371c8}
.oc-how-catalog:before{background:#10a598}
.oc-how-menu:before{background:#f28a18}

.oc-how-card-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:25px;
}

.oc-how-icon{
    width:52px;
    height:52px;
    flex:0 0 52px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:.78rem;
    font-weight:800;
}

.oc-how-quotation .oc-how-icon{background:#1371c8}
.oc-how-catalog .oc-how-icon{background:#10a598}
.oc-how-menu .oc-how-icon{background:#f28a18}

.oc-how-card-head small{
    display:block;
    color:#8a99a9;
    font-size:.7rem;
    margin-bottom:3px;
}

.oc-how-card-head h3{
    margin:0;
    color:#11375e;
    font-size:1.12rem;
}

.oc-how-steps{
    display:flex;
    flex-direction:column;
    gap:0;
    margin:4px 0 24px;
}

.oc-how-steps > div{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:53px;
    color:#536b83;
    font-size:.84rem;
}

.oc-how-steps > div:not(:last-child):after{
    content:"";
    position:absolute;
    right:17px;
    top:39px;
    width:1px;
    height:28px;
    background:#dce6ef;
}

.oc-how-steps b{
    position:relative;
    z-index:2;
    width:35px;
    height:35px;
    flex:0 0 35px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef5fc;
    color:#1767b2;
    font-size:.78rem;
}

.oc-how-catalog .oc-how-steps b{
    background:#e9f8f5;
    color:#0d968b;
}

.oc-how-menu .oc-how-steps b{
    background:#fff2e5;
    color:#e57c10;
}

.oc-guide-coming{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:45px;
    border:1px dashed #cad7e4;
    border-radius:12px;
    background:#f8fafc;
    color:#75889b;
    font-size:.78rem;
    font-weight:700;
}

/* Tablet */
@media(max-width:900px){
    .oc-how-grid{
        grid-template-columns:1fr;
        max-width:620px;
        margin:0 auto;
    }
}

/* Mobile */
@media(max-width:600px){
    .oc-how-section{
        padding:50px 0 45px !important;
    }

    .oc-how-heading{
        margin-bottom:26px !important;
    }

    .oc-how-card{
        padding:22px;
        border-radius:18px;
    }
}


/* ===== OfficeCo PDF Guide Buttons ===== */

.oc-guide-download{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    min-height:48px;
    padding:10px 14px;
    margin-top:4px;
    border-radius:12px;
    text-decoration:none !important;
    color:#fff !important;
    font-size:.8rem;
    font-weight:800;
    transition:.22s ease;
    box-shadow:0 7px 18px rgba(18,56,95,.10);
}

.oc-guide-download:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(18,56,95,.16);
}

.oc-guide-download span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:25px;
    padding:0 7px;
    border-radius:7px;
    background:rgba(255,255,255,.18);
    font-size:.65rem;
    font-weight:900;
    letter-spacing:.03em;
}

/* Quotation */
.oc-how-quotation .oc-guide-download{
    background:#1371c8;
}

/* Catalog */
.oc-how-catalog .oc-guide-download{
    background:#10a598;
}

/* Restaurant Menu */
.oc-how-menu .oc-guide-download{
    background:#f28a18;
}

@media(max-width:600px){
    .oc-guide-download{
        min-height:46px;
        font-size:.76rem;
    }
}


/* ===== OfficeCo Legal Pages ===== */

.oc-legal-page{
    background:#f7f9fc;
    min-height:70vh;
    padding-top:60px;
    padding-bottom:80px;
}

.oc-legal-page .container.narrow{
    max-width:900px;
}

.oc-legal-header{
    text-align:center;
    margin:0 auto 30px;
}

.oc-legal-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 14px;
    margin-bottom:14px;
    border-radius:999px;
    background:#eaf3fb;
    color:#124d7c;
    font-size:13px;
    font-weight:800;
}

.oc-legal-header h1{
    margin:0 0 10px;
    color:#123e73;
    font-size:clamp(28px,4vw,42px);
    line-height:1.35;
}

.oc-legal-date{
    margin:0;
    color:#7b8794;
    font-size:14px;
}

.oc-legal-content{
    padding:42px 46px;
    border:1px solid #e3eaf2;
    border-radius:22px;
    background:#fff;
    box-shadow:0 14px 45px rgba(18,62,115,.06);
}

.oc-legal-content h2{
    position:relative;
    margin:38px 0 13px;
    padding-right:16px;
    color:#123e73;
    font-size:20px;
    line-height:1.5;
}

.oc-legal-content h2:first-of-type{
    margin-top:30px;
}

.oc-legal-content h2::before{
    content:"";
    position:absolute;
    right:0;
    top:6px;
    bottom:6px;
    width:4px;
    border-radius:10px;
    background:#1d7fc2;
}

.oc-legal-content p{
    margin:0 0 16px;
    color:#465466;
    font-size:15px;
    line-height:2;
}

.oc-legal-content strong{
    color:#1e344d;
}

.oc-legal-contact{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:36px;
    padding:22px 24px;
    border-radius:16px;
    background:#f3f8fc;
    border:1px solid #e1ebf4;
    color:#465466;
    line-height:1.8;
}

.oc-legal-contact strong{
    color:#123e73;
    font-size:18px;
}

.oc-legal-final{
    margin-top:24px !important;
    padding-top:20px;
    border-top:1px solid #e7edf3;
}

.officeco-footer .footer-links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
}

.officeco-footer .footer-links a{
    white-space:nowrap;
}

.officeco-footer .footer-links span{
    opacity:.35;
}

@media(max-width:700px){

    .oc-legal-page{
        padding-top:36px;
        padding-bottom:55px;
    }

    .oc-legal-header{
        margin-bottom:22px;
    }

    .oc-legal-content{
        padding:27px 20px;
        border-radius:18px;
    }

    .oc-legal-content h2{
        margin-top:30px;
        font-size:18px;
    }

    .oc-legal-content p{
        font-size:14px;
        line-height:1.95;
    }

    .oc-legal-contact{
        padding:18px;
    }

    .officeco-footer .footer-links{
        justify-content:center;
        line-height:2;
    }
}


/* ===== Checkout Legal Consent ===== */

.oc-legal-consent{
    margin:22px 0;
    padding:18px 20px;
    border:1px solid #dce7f0;
    border-radius:14px;
    background:#f7fafc;
}

.oc-legal-consent-label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:0;
    cursor:pointer;
    color:#526173;
    font-size:13px;
    line-height:1.9;
}

.oc-legal-consent-label input[type="checkbox"]{
    width:19px;
    height:19px;
    min-width:19px;
    margin:5px 0 0;
    cursor:pointer;
    accent-color:#176fa8;
}

.oc-legal-consent-label span{
    display:block;
    flex:1;
}

.oc-legal-consent-label a{
    color:#126fa8;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:3px;
}

.oc-legal-consent-label a:hover{
    text-decoration:none;
}

@media(max-width:600px){
    .oc-legal-consent{
        margin:18px 0;
        padding:15px;
        border-radius:12px;
    }

    .oc-legal-consent-label{
        gap:10px;
        font-size:12.5px;
        line-height:1.85;
    }
}


/* ===== OfficeCo Final Mobile Header ===== */
@media (max-width:700px){

    .officeco-topbar{
        position:relative;
        z-index:9998;
        background:#fff;
    }

    .officeco-topbar .nav{
        position:relative;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        width:100%;
        height:76px;
        min-height:76px;
        padding:0 16px;
        gap:12px;
    }

    .officeco-topbar .brand-logo{
        display:flex !important;
        align-items:center;
        margin:0 !important;
        padding:0 !important;
        flex:0 1 auto;
    }

    .officeco-topbar .brand-logo img{
        display:block !important;
        width:auto !important;
        height:55px !important;
        max-width:185px !important;
        object-fit:contain;
    }

    .officeco-topbar .mobile-menu-toggle{
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
        position:relative !important;
        width:44px;
        height:44px;
        min-width:44px;
        flex:0 0 44px;
        margin:0 !important;
        padding:0 !important;
        border:1px solid #dce5ee;
        border-radius:12px;
        background:#fff;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
        z-index:10001;
    }

    .officeco-topbar .mobile-menu-toggle span{
        display:block !important;
        width:21px;
        height:2px;
        background:#123e73;
        border-radius:10px;
    }

    .officeco-topbar .nav > nav{
        display:none !important;
    }

    .officeco-topbar .nav > nav.mobile-open{
        display:flex !important;
        position:fixed !important;
        top:76px !important;
        right:12px !important;
        left:12px !important;
        width:auto !important;
        max-height:calc(100vh - 90px);
        overflow-y:auto;
        padding:10px !important;
        background:#fff;
        border:1px solid #e2e8f0;
        border-radius:15px;
        box-shadow:0 20px 50px rgba(15,23,42,.16);
        flex-direction:column !important;
        align-items:stretch !important;
        gap:2px;
        z-index:10000;
    }

    .officeco-topbar .nav > nav.mobile-open > a{
        display:flex !important;
        align-items:center;
        width:100%;
        min-height:46px;
        padding:10px 13px;
        border-radius:9px;
        text-align:right;
        font-size:14px;
    }

    .officeco-topbar .nav > nav.mobile-open .nav-login,
    .officeco-topbar .nav > nav.mobile-open .nav-register{
        justify-content:center;
        text-align:center;
    }
}

@media (max-width:380px){
    .officeco-topbar .nav{
        padding-left:12px;
        padding-right:12px;
    }

    .officeco-topbar .brand-logo img{
        height:51px !important;
        max-width:170px !important;
    }

    .officeco-topbar .mobile-menu-toggle{
        width:42px;
        height:42px;
        min-width:42px;
        flex-basis:42px;
    }
}


/* ===== OfficeCo Compact Mobile Menu ===== */
@media (max-width:700px){

    .officeco-topbar .nav > nav.mobile-open{
        gap:2px !important;
        padding:10px !important;
    }

    .officeco-topbar .nav > nav.mobile-open > a{
        min-height:44px !important;
        height:auto !important;
        padding:10px 13px !important;
        margin:0 !important;
        line-height:1.4 !important;
    }

    .officeco-topbar .nav > nav.mobile-open .nav-tools{
        margin-bottom:7px !important;
    }

    .officeco-topbar .nav > nav.mobile-open .nav-login,
    .officeco-topbar .nav > nav.mobile-open .nav-register{
        min-height:46px !important;
        justify-content:center !important;
        margin-top:3px !important;
    }
}