@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;
    }
}


/* ===== Restaurant Menu - Category Form Responsive ===== */
.oc-menu-category-create-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 150px 150px;
    gap:12px;
    align-items:end;
}

.oc-menu-category-create-grid label{
    min-width:0;
}

.oc-menu-category-create-grid input,
.oc-menu-category-create-grid .btn{
    width:100%;
    box-sizing:border-box;
}

@media (max-width:700px){
    .oc-menu-category-create-grid{
        grid-template-columns:1fr;
        gap:16px;
        align-items:stretch;
    }

    .oc-menu-category-create-grid label{
        display:block;
        width:100%;
        margin:0;
    }

    .oc-menu-category-create-grid label > span{
        display:block;
        margin-bottom:7px;
    }

    .oc-menu-category-create-grid input{
        display:block;
        width:100%;
        max-width:none;
    }

    .oc-menu-category-create-grid .btn{
        width:100%;
        min-height:48px;
        margin:2px 0 0;
    }
}

/* ==========================================================
   OfficeCo - Account Dropdown
   ========================================================== */

.account-menu{
    position:relative;
    display:flex;
    align-items:center;
}

.account-menu-toggle{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    font-family:inherit;
}

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

.account-menu.open .account-menu-arrow{
    transform:rotate(180deg);
}

.account-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    width:270px;
    background:#fff;
    border:1px solid #e5eaf1;
    border-radius:16px;
    padding:10px;
    box-shadow:0 20px 50px rgba(15,23,42,.14);
    z-index:9999;
}

.account-dropdown[hidden]{
    display:none !important;
}

.account-dropdown-user{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px;
}

.account-dropdown-avatar{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#eef4ff;
    color:#2563eb;
    font-size:17px;
    font-weight:800;
}

.account-dropdown-user strong{
    display:block;
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#0f172a;
    font-size:13px;
}

.account-dropdown-user small{
    display:block;
    max-width:180px;
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#94a3b8;
    font-size:10px;
    direction:ltr;
    text-align:right;
}

.account-dropdown-divider{
    height:1px;
    background:#edf1f5;
    margin:6px 4px;
}

.account-dropdown > a,
.account-logout-form button{
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 11px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#334155;
    text-decoration:none;
    text-align:right;
    font-family:inherit;
    font-size:12px;
    cursor:pointer;
}

.account-dropdown > a:hover,
.account-logout-form button:hover{
    background:#f8fafc;
    color:#2563eb;
}

.account-dropdown > a span,
.account-logout-form button span{
    width:22px;
    text-align:center;
}

.account-logout-form{
    margin:0;
}

.account-logout-form button{
    color:#dc2626;
}

.account-logout-form button:hover{
    background:#fff5f5;
    color:#dc2626;
}

@media(max-width:760px){

    .account-menu{
        width:100%;
        display:block;
    }

    .account-menu-toggle{
        width:100%;
        justify-content:center;
    }

    .account-dropdown{
        position:static;
        width:100%;
        margin-top:8px;
        box-shadow:none;
        border-radius:12px;
    }
}


/* OfficeCo - My Subscriptions */

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

.account-subscription-card{padding:22px}

.account-subscription-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
}

.account-subscription-head h3{
    margin:5px 0 0;
    font-size:18px;
}

.account-sub-status{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}

.account-sub-status.status-active{
    background:#e7f8f3;
    color:#087f68;
}

.account-sub-status.status-pending{
    background:#fff7df;
    color:#a16207;
}

.account-sub-status.status-expired,
.account-sub-status.status-cancelled{
    background:#f1f5f9;
    color:#64748b;
}

.account-sub-status.status-suspended{
    background:#fff1f2;
    color:#be123c;
}

.account-sub-plan{
    margin:20px 0;
    padding:15px;
    border-radius:12px;
    background:#f8fafc;
}

.account-sub-plan strong{
    display:block;
    color:#0f3f78;
    font-size:16px;
}

.account-sub-plan span{
    display:block;
    margin-top:5px;
    color:#64748b;
    font-size:12px;
}

.account-sub-details > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:11px 0;
    border-bottom:1px solid #edf1f5;
}

.account-sub-details > div:last-child{border-bottom:0}

.account-sub-details span{
    color:#64748b;
    font-size:12px;
}

.account-sub-details strong{
    color:#1e293b;
    font-size:12px;
}

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


/* ==========================================================
   OfficeCo - My Payments
   ========================================================== */

.account-payments-table{
    width:100%;
    border-collapse:collapse;
    min-width:850px;
}

.account-payments-table th{
    text-align:right;
    padding:14px 16px;
    font-size:12px;
    font-weight:700;
    color:#64748b;
    background:#f8fafc;
    border-bottom:1px solid #e8edf3;
    white-space:nowrap;
}

.account-payments-table td{
    padding:16px;
    font-size:13px;
    color:#334155;
    border-bottom:1px solid #edf1f5;
    vertical-align:middle;
}

.account-payments-table tbody tr:last-child td{
    border-bottom:0;
}

.account-payments-table tbody tr:hover{
    background:#fafcff;
}

.payment-reference{
    display:inline-block;
    direction:ltr;
    unicode-bidi:isolate;
    font-family:monospace;
    font-size:12px;
    background:#f8fafc;
    border:1px solid #edf1f5;
    border-radius:7px;
    padding:5px 8px;
}

.payment-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}

.payment-status.status-confirmed{
    background:#e7f8f3;
    color:#087f68;
}

.payment-status.status-pending{
    background:#fff7df;
    color:#a16207;
}

.payment-status.status-rejected{
    background:#fff1f2;
    color:#be123c;
}

@media(max-width:700px){
    .account-payments-table th,
    .account-payments-table td{
        padding:12px;
    }
}


/* ==========================================================
   OfficeCo - Account Profile & Password
   ========================================================== */

.account-form-card{
    max-width:620px;
    margin-top:24px;
    padding:28px !important;
    border-radius:18px;
}

/* Fields spacing */
.account-form-card .field{
    margin-bottom:20px;
}

/* Labels */
.account-form-card label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:700;
    color:#24364f;
}

/* Inputs */
.account-form-card input[type="text"],
.account-form-card input[type="email"],
.account-form-card input[type="password"]{
    width:100%;
    min-height:48px;
    padding:11px 14px;
    border:1px solid #dce4ee;
    border-radius:10px;
    background:#fff;
    font-size:14px;
    line-height:1.4;
    box-sizing:border-box;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.account-form-card input:focus{
    outline:none;
    border-color:#1766aa;
    box-shadow:0 0 0 3px rgba(23,102,170,.08);
}

/* Email stays readable inside RTL page */
.account-form-card input[type="email"]{
    direction:ltr;
    text-align:left;
}

/* Buttons area */
.account-form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin-top:26px;
    padding-top:20px;
    border-top:1px solid #edf1f5;
}

.account-form-actions .btn{
    min-height:42px;
    padding:9px 20px;
    border-radius:10px;
}

/* Mobile */
@media(max-width:700px){

    .account-form-card{
        padding:20px !important;
        border-radius:14px;
    }

    .account-form-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .account-form-actions .btn{
        width:100%;
        text-align:center;
    }
}


/* OfficeCo - Google Login */

.oc-google-login{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:48px;
    margin-top:18px;
    padding:10px 16px;
    background:#fff;
    color:#24364f;
    border:1px solid #dce4ee;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    box-sizing:border-box;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.oc-google-login:hover{
    background:#f8fafc;
    border-color:#c9d5e3;
    box-shadow:0 4px 14px rgba(15,23,42,.06);
}

.oc-google-login svg{
    flex:0 0 auto;
}

.oc-auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:18px 0;
    color:#94a3b8;
    font-size:12px;
}

.oc-auth-divider::before,
.oc-auth-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:#e7edf4;
}

.oc-auth-divider span{
    flex:0 0 auto;
}


/* OfficeCo - Password Reset Pages */

.oc-login-card .success{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:18px 0;
    padding:14px 16px;
    background:#ecfdf5;
    border:1px solid #a7f3d0;
    border-radius:10px;
    color:#047857;
    font-size:14px !important;
    font-weight:600;
    line-height:1.9 !important;
    text-align:right;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
}

.oc-login-card .error{
    width:100%;
    box-sizing:border-box;
    margin:18px 0;
    padding:14px 16px;
    font-size:14px !important;
    line-height:1.8 !important;
    white-space:normal !important;
    word-break:normal !important;
}


/* OfficeCo - Password Reset Layout */

.oc-password-reset-page .oc-login-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    max-width:620px;
    margin:0 auto;
}

.oc-password-reset-page .oc-login-card{
    width:100%;
    max-width:520px;
    margin:0 auto;
}

.oc-password-reset-page .oc-login-logo{
    text-align:center;
}

.oc-password-reset-page h2{
    text-align:center;
}

.oc-password-reset-page > .oc-login-wrap > .oc-login-card > p.muted{
    text-align:center;
    line-height:1.8;
}

.oc-password-reset-page .oc-login-help{
    text-align:center;
    margin-top:20px;
}

@media (max-width:640px){
    .oc-password-reset-page .oc-login-wrap{
        width:100%;
    }

    .oc-password-reset-page .oc-login-card{
        max-width:100%;
    }
}


/* OfficeCo Tech - Facebook Login */
.oc-facebook-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
    padding: 10px 16px;
    border: 1px solid #1877F2;
    border-radius: 10px;
    background: #1877F2;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity .2s ease, transform .2s ease;
}

.oc-facebook-login:hover {
    opacity: .92;
    color: #fff !important;
    text-decoration: none !important;
}

.oc-facebook-login:active {
    transform: translateY(1px);
}

.oc-facebook-login svg {
    flex: 0 0 20px;
    color: #fff;
}


/* ==========================================================
   OFFICECO TECH - QUOTATION ITEMS TABLE WRAP FIX
   V54_QUOTATION_ITEMS_WRAP_FIX
   ========================================================== */

.ocq-doc-table{
    width:100%;
    table-layout:fixed !important;
}

/* Allow quotation cells to behave independently
   from the global th,td { white-space:nowrap } rule */
.ocq-doc-table th,
.ocq-doc-table td{
    white-space:normal !important;
    vertical-align:middle;
}

/* Current table order:
   Total | Unit Price | Qty | Description | # */
.ocq-doc-table th:nth-child(1),
.ocq-doc-table td:nth-child(1){
    width:15%;
}

.ocq-doc-table th:nth-child(2),
.ocq-doc-table td:nth-child(2){
    width:15%;
}

.ocq-doc-table th:nth-child(3),
.ocq-doc-table td:nth-child(3){
    width:10%;
}

.ocq-doc-table th:nth-child(4),
.ocq-doc-table td:nth-child(4){
    width:55%;
}

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

/* Description */
.ocq-doc-table .ocq-item-description{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    line-height:1.75;
    text-align:right;
}

/* Keep numeric values clean */
.ocq-doc-table td:nth-child(1),
.ocq-doc-table td:nth-child(2),
.ocq-doc-table td:nth-child(3),
.ocq-doc-table td:nth-child(5){
    white-space:nowrap !important;
    text-align:center;
}



/* =========================================================
   OFFICECO_DESCRIPTION_TEXTAREA_V56
   Quotation item multiline description
   ========================================================= */

.ocq-items .item-description{
    display:block;
    width:100%;
    min-width:260px;
    min-height:44px;
    height:auto;
    padding:10px 12px;
    border:1px solid #dbe4ee;
    border-radius:10px;
    background:#fff;
    font:inherit;
    line-height:1.65;
    resize:none;
    overflow:hidden;
    box-sizing:border-box;
    white-space:pre-wrap;
}

.ocq-items .item-description:focus{
    outline:none;
    border-color:#0b8d86;
}

.ocq-items td{
    vertical-align:top;
}


/* ==========================================================
   OFFICECO RTL/LTR DESCRIPTION CONTROL V58
   ========================================================== */

.ocq-description-editor{
    display:flex;
    flex-direction:column;
    gap:6px;
    width:100%;
}

.ocq-direction-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    font-size:11px;
    color:#667085;
}

.ocq-direction-row span{
    white-space:nowrap;
}

.ocq-direction-row .item-text-direction{
    width:auto;
    min-width:105px;
    height:30px;
    padding:3px 8px;
    border:1px solid #dbe4ee;
    border-radius:7px;
    background:#f8fafc;
    font-size:11px;
}

.ocq-items textarea.item-description[dir="rtl"]{
    direction:rtl;
    text-align:right;
}

.ocq-items textarea.item-description[dir="ltr"]{
    direction:ltr;
    text-align:left;
}



/* ==========================================================
   OFFICECO WEB DESCRIPTION FINAL V61
   Preserve saved lines + per-item RTL/LTR
   ========================================================== */

.ocq-document .ocq-doc-table td.ocq-item-description {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.75 !important;
}

/* Arabic */
.ocq-document .ocq-doc-table td.ocq-item-description[dir="rtl"] {
    direction: rtl !important;
    text-align: right !important;
}

/* English */
.ocq-document .ocq-doc-table td.ocq-item-description[dir="ltr"] {
    direction: ltr !important;
    text-align: left !important;
}


/* PRINT */
@media print {

    .ocq-document .ocq-doc-table td.ocq-item-description {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .ocq-document .ocq-doc-table td.ocq-item-description[dir="rtl"] {
        direction: rtl !important;
        text-align: right !important;
    }

    .ocq-document .ocq-doc-table td.ocq-item-description[dir="ltr"] {
        direction: ltr !important;
        text-align: left !important;
    }

}


/* OFFICECO DESCRIPTION COMPACT LINE HEIGHT V62 */
.ocq-document .ocq-doc-table td.ocq-item-description {
    line-height: 1.35 !important;
}

@media print {
    .ocq-document .ocq-doc-table td.ocq-item-description {
        line-height: 1.35 !important;
    }
}



/* ==========================================================
   OFFICECO TECH — GLOBAL MOBILE FOUNDATION V1
   Added as final override layer
   ========================================================== */


/* ----------------------------------------------------------
   TABLET + MOBILE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    .container {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .narrow {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* ---------- GENERAL GRID SAFETY ---------- */

    .ocq-grid,
    .ocq-grid-2,
    .ocq-grid-3,
    .form-grid {
        min-width: 0;
    }

    .ocq-grid-2,
    .ocq-grid-3 {
        grid-template-columns: 1fr !important;
    }

    .ocq-grid > *,
    .ocq-grid-2 > *,
    .ocq-grid-3 > *,
    .form-grid > * {
        min-width: 0;
    }


    /* ---------- FORMS ---------- */

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    textarea {
        resize: vertical;
    }


    /* ---------- CARDS ---------- */

    .card,
    .ocq-form-card,
    .ocq-panel {
        max-width: 100%;
    }


    /* ---------- TABLES ---------- */

    .table-wrap,
    .ocq-table-wrap,
    .ocq-doc-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrap table,
    .ocq-table-wrap table,
    .ocq-doc-table-wrap table {
        width: max-content;
        min-width: 100%;
    }


    /* ---------- DASHBOARD ---------- */

    .oc-dashboard-head {
        flex-wrap: wrap;
        gap: 16px;
    }

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

    .oc-app-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }


    /* ---------- QUOTATION ---------- */

    .ocq-view-actions,
    .ocq-filter-actions {
        flex-wrap: wrap;
    }

}


/* ----------------------------------------------------------
   PHONE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .container {
        width: calc(100% - 24px) !important;
    }


    /* ---------- SPACING ---------- */

    .section {
        padding-top: 32px;
        padding-bottom: 32px;
    }


    /* ---------- TYPOGRAPHY ---------- */

    h1 {
        overflow-wrap: anywhere;
    }

    h2,
    h3,
    p {
        overflow-wrap: break-word;
    }


    /* ---------- BUTTONS ---------- */

    .actions {
        width: 100%;
        gap: 10px;
    }

    .actions > .btn,
    .actions > a.btn {
        flex: 1 1 100%;
    }


    /* ---------- FORMS ---------- */

    .form {
        padding: 18px;
    }

    .split,
    .form-grid {
        grid-template-columns: 1fr !important;
    }


    /* ---------- DASHBOARD ---------- */

    .oc-dashboard-head {
        align-items: stretch !important;
    }

    .oc-dashboard-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .oc-dashboard-actions .btn,
    .oc-dashboard-actions a {
        width: 100%;
    }

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


    /* ---------- QUOTATION FORMS ---------- */

    .ocq-form-card {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ocq-grid,
    .ocq-grid-2,
    .ocq-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }


    /* ---------- QUOTATION ACTIONS ---------- */

    .ocq-view-actions,
    .ocq-filter-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .ocq-view-actions > *,
    .ocq-filter-actions > * {
        width: 100%;
        max-width: 100%;
    }


    /* ---------- TABLE MOBILE SAFETY ---------- */

    .table-wrap,
    .ocq-table-wrap,
    .ocq-doc-table-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}


/* ----------------------------------------------------------
   SMALL PHONE
   ---------------------------------------------------------- */

@media (max-width: 480px) {

    .container {
        width: calc(100% - 20px) !important;
    }

    .card {
        border-radius: 16px;
    }

    .form {
        padding: 15px;
    }

    .btn,
    button {
        min-height: 44px;
    }

}


/* ==========================================================
   END OFFICECO GLOBAL MOBILE FOUNDATION V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — MOBILE HEADER FINAL V2
   ========================================================== */

@media (max-width:700px){

    /* HEADER */
    .officeco-topbar{
        position:sticky !important;
        top:0 !important;
        z-index:1000 !important;
        background:rgba(255,255,255,.98) !important;
    }

    .officeco-topbar .container.nav{
        position:relative !important;
        width:calc(100% - 24px) !important;
        max-width:none !important;
        min-height:72px !important;
        height:72px !important;

        margin:0 auto !important;
        padding:5px 0 !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;

        gap:12px !important;
    }


    /* LOGO */
    .officeco-topbar .brand-logo{
        display:flex !important;
        align-items:center !important;

        width:auto !important;
        max-width:calc(100% - 64px) !important;

        margin:0 !important;
        padding:0 !important;

        flex:0 1 auto !important;
    }

    .officeco-topbar .brand-logo img{
        display:block !important;

        width:auto !important;
        height:58px !important;
        max-width:190px !important;
        max-height:58px !important;

        object-fit:contain !important;
    }


    /* HAMBURGER */
    .officeco-topbar .mobile-menu-toggle{
        display:flex !important;

        width:44px !important;
        height:44px !important;
        min-width:44px !important;

        padding:0 !important;
        margin:0 !important;

        flex:0 0 44px !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        gap:5px !important;

        border:1px solid #dbe5eb !important;
        border-radius:12px !important;

        background:#fff !important;

        cursor:pointer !important;
        box-shadow:0 4px 14px rgba(20,43,60,.06) !important;
    }

    .officeco-topbar .mobile-menu-toggle span{
        display:block !important;

        width:20px !important;
        height:2px !important;

        margin:0 !important;

        border-radius:10px !important;
        background:#183b4e !important;

        transition:
            transform .2s ease,
            opacity .2s ease !important;
    }


    /* CLOSED MENU */
    .officeco-topbar .nav > nav{
        display:none !important;
    }


    /* OPEN MENU */
    .officeco-topbar .nav > nav.mobile-open{
        position:absolute !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;

        top:calc(100% + 8px) !important;
        right:0 !important;
        left:0 !important;

        width:100% !important;

        gap:3px !important;

        padding:10px !important;
        margin:0 !important;

        background:#fff !important;

        border:1px solid #e1e9ee !important;
        border-radius:16px !important;

        box-shadow:0 18px 45px rgba(24,59,78,.14) !important;

        z-index:1100 !important;
    }


    /* MENU LINKS */
    .officeco-topbar .nav > nav.mobile-open > a{
        display:flex !important;
        align-items:center !important;

        width:100% !important;
        min-height:44px !important;

        padding:10px 13px !important;
        margin:0 !important;

        border-radius:10px !important;

        font-size:.92rem !important;
        font-weight:600 !important;
        line-height:1.4 !important;

        text-align:right !important;
    }

    .officeco-topbar .nav > nav.mobile-open > a::after{
        display:none !important;
    }

    .officeco-topbar .nav > nav.mobile-open > a:hover{
        background:#f4f8fa !important;
    }


    /* TOOLS */
    .officeco-topbar .nav > nav.mobile-open .nav-tools{
        color:#079b8d !important;
        background:#effaf8 !important;
    }


    /* LOGIN / REGISTER */
    .officeco-topbar .nav > nav.mobile-open .nav-login,
    .officeco-topbar .nav > nav.mobile-open .nav-register{
        width:100% !important;
        min-height:44px !important;

        margin:2px 0 0 !important;
        padding:10px 13px !important;

        justify-content:center !important;

        text-align:center !important;
    }


    /* ACCOUNT MENU */
    .officeco-topbar .nav > nav.mobile-open .account-menu{
        display:block !important;

        width:100% !important;

        margin:2px 0 0 !important;
    }

    .officeco-topbar .nav > nav.mobile-open .account-menu-toggle{
        width:100% !important;
        min-height:44px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        margin:0 !important;
    }

}


/* SMALL PHONES */

@media (max-width:380px){

    .officeco-topbar .container.nav{
        width:calc(100% - 20px) !important;
        min-height:66px !important;
        height:66px !important;
    }

    .officeco-topbar .brand-logo img{
        height:52px !important;
        max-height:52px !important;
        max-width:165px !important;
    }

    .officeco-topbar .mobile-menu-toggle{
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
        flex-basis:42px !important;
    }

    .officeco-topbar .nav > nav.mobile-open{
        top:calc(100% + 6px) !important;
    }

}


/* ==========================================================
   END OFFICECO MOBILE HEADER FINAL V2
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — MOBILE MENU COMPACT V3
   ========================================================== */

@media (max-width:700px){

    .officeco-topbar .nav > nav.mobile-open{
        top:calc(100% + 6px) !important;

        padding:8px !important;
        gap:2px !important;

        max-height:calc(100vh - 90px) !important;
        overflow-y:auto !important;
        overscroll-behavior:contain !important;

        border-radius:14px !important;

        background:#fff !important;
    }


    /* MAIN LINKS */

    .officeco-topbar .nav > nav.mobile-open > a{
        min-height:38px !important;

        padding:7px 11px !important;
        margin:0 !important;

        font-size:.88rem !important;
        line-height:1.25 !important;

        border-radius:9px !important;
    }


    /* TOOLS */

    .officeco-topbar .nav > nav.mobile-open .nav-tools{
        margin-top:2px !important;
    }


    /* ACCOUNT WRAPPER */

    .officeco-topbar .nav > nav.mobile-open .account-menu{
        position:relative !important;

        width:100% !important;

        margin:3px 0 0 !important;
        padding:0 !important;
    }


    /* ACCOUNT BUTTON */

    .officeco-topbar .nav > nav.mobile-open .account-menu-toggle{
        width:100% !important;
        min-height:40px !important;

        padding:7px 11px !important;
        margin:0 !important;

        border-radius:9px !important;

        font-size:.88rem !important;
    }


    /* ACCOUNT DROPDOWN:
       on mobile it becomes part of main menu flow */

    .officeco-topbar .nav > nav.mobile-open .account-dropdown{
        position:static !important;

        width:100% !important;
        min-width:0 !important;

        margin:5px 0 0 !important;
        padding:7px !important;

        transform:none !important;

        border:1px solid #e5ecef !important;
        border-radius:10px !important;

        box-shadow:none !important;

        background:#f8fafb !important;
    }

    .officeco-topbar .nav > nav.mobile-open .account-dropdown[hidden]{
        display:none !important;
    }


    /* USER INFORMATION */

    .officeco-topbar .account-dropdown-user{
        padding:7px !important;
        gap:8px !important;
    }

    .officeco-topbar .account-dropdown-avatar{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
    }

    .officeco-topbar .account-dropdown-user strong{
        font-size:.82rem !important;
    }

    .officeco-topbar .account-dropdown-user small{
        font-size:.7rem !important;
    }


    /* ACCOUNT LINKS */

    .officeco-topbar .account-dropdown > a{
        min-height:36px !important;

        padding:6px 8px !important;

        font-size:.8rem !important;
        line-height:1.25 !important;
    }


    /* LOGOUT MUST STAY INSIDE MENU */

    .officeco-topbar .account-logout-form{
        width:100% !important;

        margin:0 !important;
        padding:0 !important;
    }

    .officeco-topbar .account-logout-form button{
        width:100% !important;
        min-height:36px !important;

        margin:0 !important;
        padding:6px 8px !important;

        font-size:.8rem !important;

        box-shadow:none !important;
    }


    /* DIVIDERS */

    .officeco-topbar .account-dropdown-divider{
        margin:4px 0 !important;
    }

}


/* ==========================================================
   END OFFICECO MOBILE MENU COMPACT V3
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — MOBILE ACCOUNT MENU FINAL FIX
   ========================================================== */

@media (max-width:700px){

    /* Account wrapper */
    .officeco-topbar #officeco-main-nav.mobile-open .account-menu{
        position:relative !important;
        display:block !important;
        width:100% !important;
        margin:3px 0 0 !important;
        padding:0 !important;
    }


    /* Account button */
    .officeco-topbar #officeco-main-nav.mobile-open .account-menu-toggle{
        display:flex !important;
        width:100% !important;
        min-height:40px !important;
        margin:0 !important;
        padding:7px 12px !important;

        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        border:1px solid #e1e7ec !important;
        border-radius:10px !important;

        background:#f7f8f9 !important;
        color:#263746 !important;

        font-size:.88rem !important;
        box-shadow:none !important;
    }


    /* CRITICAL:
       hidden account dropdown must hide EVERYTHING */
    .officeco-topbar #officeco-account-dropdown[hidden]{
        display:none !important;
    }


    /* Open dropdown becomes part of mobile menu */
    .officeco-topbar #officeco-main-nav.mobile-open
    #officeco-account-dropdown:not([hidden]){
        position:static !important;
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        margin:5px 0 0 !important;
        padding:7px !important;

        transform:none !important;

        border:1px solid #e5ebef !important;
        border-radius:10px !important;

        background:#f8fafb !important;

        box-shadow:none !important;
        z-index:auto !important;
    }


    /* User information */
    .officeco-topbar #officeco-account-dropdown
    .account-dropdown-user{
        display:flex !important;
        padding:7px !important;
        gap:8px !important;
    }


    /* Account links */
    .officeco-topbar #officeco-account-dropdown > a{
        display:flex !important;

        width:100% !important;
        min-height:36px !important;

        margin:0 !important;
        padding:6px 9px !important;

        align-items:center !important;

        border-radius:8px !important;

        font-size:.8rem !important;
    }


    /* Logout form */
    .officeco-topbar #officeco-account-dropdown
    .account-logout-form{
        display:block !important;

        position:static !important;

        width:100% !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;
    }

    .officeco-topbar #officeco-account-dropdown
    .account-logout-form button{
        display:flex !important;

        position:static !important;

        width:100% !important;
        min-height:36px !important;

        margin:0 !important;
        padding:6px 9px !important;

        align-items:center !important;

        border:0 !important;
        border-radius:8px !important;

        background:transparent !important;

        box-shadow:none !important;
        transform:none !important;

        font-size:.8rem !important;
    }

}


/* ==========================================================
   END OFFICECO MOBILE ACCOUNT MENU FINAL FIX
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — DASHBOARD MOBILE FINAL V1
   ========================================================== */

@media (max-width:700px){

    /* PAGE */
    .oc-dashboard{
        min-height:calc(100vh - 72px) !important;
        padding:24px 0 45px !important;
    }


    /* HEADER */
    .oc-dashboard-head{
        display:grid !important;
        grid-template-columns:1fr !important;

        width:100% !important;

        gap:16px !important;
        margin-bottom:22px !important;

        align-items:stretch !important;
    }

    .oc-dashboard-head > div:first-child{
        width:100% !important;
        min-width:0 !important;
    }

    .oc-dashboard-head .eyebrow{
        margin-bottom:4px !important;
    }


    /* WELCOME TITLE */
    .oc-dashboard-head h1{
        width:100% !important;

        margin:8px 0 5px !important;

        color:#123e73 !important;

        font-size:clamp(25px,7.2vw,30px) !important;
        line-height:1.35 !important;

        overflow-wrap:normal !important;
        word-break:normal !important;
        hyphens:none !important;
    }


    /* COMPANY */
    .oc-dashboard-head p{
        margin:0 !important;

        font-size:13px !important;
        line-height:1.6 !important;

        overflow-wrap:break-word !important;
    }


    /* USER ACTIONS */
    .oc-dashboard-actions{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;

        width:100% !important;

        gap:8px !important;

        align-items:center !important;
    }

    .oc-user-badge{
        display:flex !important;
        align-items:center !important;

        width:100% !important;
        min-width:0 !important;
        min-height:42px !important;

        padding:8px 12px !important;

        border-radius:12px !important;

        direction:ltr !important;
        text-align:left !important;

        font-size:12px !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .oc-dashboard-actions form{
        margin:0 !important;
    }

    .oc-dashboard-actions form .btn{
        width:auto !important;
        min-width:112px !important;
        min-height:42px !important;

        padding:8px 12px !important;

        white-space:nowrap !important;
    }


    /* MAIN TOOLS PANEL */
    .oc-dashboard-section{
        width:100% !important;

        padding:18px 14px !important;

        border-radius:18px !important;
    }

    .oc-dashboard-section .section-head{
        display:block !important;

        margin-bottom:14px !important;
    }

    .oc-dashboard-section .section-head h2{
        margin:5px 0 3px !important;

        font-size:27px !important;
        line-height:1.3 !important;
    }

    .oc-dashboard-section .section-head p{
        margin:0 !important;

        font-size:13px !important;
        line-height:1.7 !important;
    }


    /* APP GRID */
    .oc-app-grid{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;

        width:100% !important;

        gap:12px !important;
        margin-top:16px !important;
    }

    .oc-app-card{
        width:100% !important;
        min-width:0 !important;

        padding:17px !important;

        border-radius:16px !important;
    }

    .oc-app-card:hover{
        transform:none !important;
    }

    .oc-app-top{
        gap:10px !important;
    }

    .oc-app-icon{
        width:46px !important;
        height:46px !important;

        border-radius:13px !important;

        font-size:16px !important;
    }

    .oc-app-status{
        padding:5px 9px !important;
        font-size:11px !important;
    }

    .oc-app-card h3{
        margin:14px 0 6px !important;

        font-size:18px !important;
        line-height:1.4 !important;
    }

    .oc-app-card p{
        min-height:0 !important;

        margin:0 0 14px !important;

        font-size:13px !important;
        line-height:1.7 !important;
    }

    .oc-app-card > .btn{
        width:100% !important;
        min-height:42px !important;
    }


    /* EMPTY STATE */
    .oc-empty-apps{
        margin-top:16px !important;
        padding:30px 16px !important;
    }


    /* ACCOUNT STRIP */
    .oc-account-strip{
        display:grid !important;
        grid-template-columns:1fr !important;

        margin-top:14px !important;

        border-radius:15px !important;
    }

    .oc-account-strip > div{
        min-width:0 !important;

        padding:13px 15px !important;
    }

    .oc-account-strip small{
        margin-bottom:2px !important;

        font-size:11px !important;
    }

    .oc-account-strip strong{
        font-size:13px !important;
        line-height:1.5 !important;

        overflow-wrap:break-word !important;
        word-break:normal !important;
    }

}


/* VERY SMALL PHONES */

@media (max-width:380px){

    .oc-dashboard-head h1{
        font-size:24px !important;
    }

    .oc-dashboard-actions{
        grid-template-columns:1fr !important;
    }

    .oc-dashboard-actions form,
    .oc-dashboard-actions form .btn{
        width:100% !important;
    }

    .oc-dashboard-section{
        padding:16px 12px !important;
    }

}


/* ==========================================================
   END OFFICECO DASHBOARD MOBILE FINAL V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — QUOTATION DASHBOARD MOBILE CARDS V1
   ========================================================== */

@media (max-width:700px){

    /* ---------- PAGE ---------- */

    .ocq-page{
        padding:22px 0 36px !important;
    }

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


    /* ---------- HEADER ---------- */

    .ocq-page .ocq-head{
        padding:18px !important;
        margin-bottom:16px !important;
        border-radius:16px !important;
        gap:16px !important;
    }

    .ocq-page .ocq-head h1{
        font-size:26px !important;
        line-height:1.35 !important;
    }

    .ocq-page .ocq-head p{
        font-size:14px !important;
        line-height:1.7 !important;
    }

    .ocq-page .ocq-head > .btn,
    .ocq-page .ocq-head > a.btn{
        width:100% !important;
    }


    /* ---------- SUBSCRIPTION ---------- */

    .ocq-page .ocq-subscription-card{
        padding:18px !important;
        border-radius:16px !important;
        gap:15px !important;
    }

    .ocq-page .ocq-subscription-action{
        width:100% !important;
    }

    .ocq-page .ocq-subscription-action .btn{
        width:100% !important;
    }


    /* ---------- STATS ---------- */

    .ocq-page .ocq-stats{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
        margin-bottom:18px !important;
    }

    .ocq-page .ocq-stat{
        min-width:0 !important;
        min-height:106px !important;
        padding:15px !important;
        border-radius:15px !important;
    }

    .ocq-page .ocq-stat span{
        margin-bottom:7px !important;
        font-size:13px !important;
    }

    .ocq-page .ocq-stat strong{
        font-size:23px !important;
    }

    /* Fifth statistic alone = full width */
    .ocq-page .ocq-stats .ocq-stat:last-child:nth-child(odd){
        grid-column:1 / -1 !important;
        min-height:88px !important;
    }


    /* ---------- QUOTATION PANEL ---------- */

    .ocq-page .ocq-panel{
        padding:16px !important;
        border-radius:16px !important;
    }

    .ocq-page .ocq-panel-head{
        display:block !important;
        padding-bottom:15px !important;
        margin-bottom:15px !important;
    }

    .ocq-page .ocq-panel-head h2{
        font-size:21px !important;
    }

    .ocq-page .ocq-panel-head p{
        font-size:13px !important;
    }

    .ocq-page .ocq-links{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:8px !important;
        width:100% !important;
        margin-top:14px !important;
    }

    .ocq-page .ocq-links a{
        min-width:0 !important;
        padding:9px 5px !important;
        text-align:center !important;
        white-space:nowrap !important;
    }


    /* ---------- FILTERS ---------- */

    .ocq-page .ocq-filter-bar{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:11px !important;
        padding:14px !important;
        margin-top:15px !important;
        border-radius:13px !important;
    }

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

    .ocq-page .ocq-filter-bar label{
        min-width:0 !important;
        gap:5px !important;
        font-size:12px !important;
    }

    .ocq-page .ocq-filter-bar input,
    .ocq-page .ocq-filter-bar select{
        min-width:0 !important;
        min-height:40px !important;
        padding:8px 9px !important;
        font-size:12px !important;
    }

    .ocq-page .ocq-filter-actions{
        grid-column:1 / -1 !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        width:100% !important;
    }

    .ocq-page .ocq-filter-actions .btn{
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .ocq-filter-summary{
        padding:12px 2px 2px !important;
        font-size:12px !important;
    }


    /* ======================================================
       QUOTATION TABLE -> MOBILE CARDS
       Applies only to main quotation dashboard table
       ====================================================== */

    .ocq-page .ocq-panel > .ocq-table-wrap{
        width:100% !important;
        max-width:100% !important;
        margin-top:16px !important;
        overflow:visible !important;
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table thead{
        display:none !important;
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody{
        display:grid !important;
        width:100% !important;
        gap:12px !important;
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody tr{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        width:100% !important;
        min-width:0 !important;
        padding:14px !important;
        gap:0 !important;
        background:#fff !important;
        border:1px solid #e2e9f1 !important;
        border-radius:15px !important;
        box-shadow:0 5px 18px rgba(24,55,91,.045) !important;
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td{
        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        min-width:0 !important;
        padding:9px 7px !important;
        border-bottom:1px solid #edf1f5 !important;
        color:#263b55 !important;
        font-size:13px !important;
        overflow-wrap:anywhere !important;
    }

    /* Labels */

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td::before{
        display:block !important;
        margin-bottom:4px !important;
        color:#8996a7 !important;
        font-size:10px !important;
        font-weight:700 !important;
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(1)::before{
        content:"رقم العرض";
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(2)::before{
        content:"التاريخ";
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(3)::before{
        content:"العميل";
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(4)::before{
        content:"الإجمالي";
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(5)::before{
        content:"الحالة";
    }


    /* Quote number + date */

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(1),
    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(2){
        border-top:0 !important;
    }


    /* Customer */

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(3){
        grid-column:1 / -1 !important;
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(3) small{
        margin-top:3px !important;
        font-size:11px !important;
    }


    /* Total */

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(4){
        font-weight:700 !important;
        color:#123e73 !important;
    }


    /* Status */

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(5){
        align-items:flex-start !important;
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table .ocq-status{
        width:auto !important;
        padding:5px 10px !important;
    }


    /* Open button */

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(6){
        grid-column:1 / -1 !important;
        display:block !important;
        padding:11px 0 0 !important;
        border-bottom:0 !important;
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table tbody td:nth-child(6)::before{
        display:none !important;
    }

    .ocq-page .ocq-panel > .ocq-table-wrap > .ocq-table .ocq-open{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        min-height:40px !important;
        margin:0 !important;
        border:1px solid #d8e3ef !important;
        border-radius:10px !important;
        background:#f7faff !important;
        color:#174f87 !important;
        font-weight:800 !important;
        text-decoration:none !important;
    }

}


/* ==========================================================
   END OFFICECO QUOTATION DASHBOARD MOBILE CARDS V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — QUOTATION FORM MOBILE V1
   Item table -> mobile cards
   ========================================================== */

@media (max-width:700px){

    /* ---------- FORM CARDS ---------- */

    .ocq-page .ocq-form-card{
        width:100% !important;
        max-width:100% !important;
        padding:18px 15px !important;
        margin-bottom:16px !important;
        border-radius:18px !important;
        overflow:hidden !important;
    }

    .ocq-page .ocq-form-card h2{
        font-size:22px !important;
        line-height:1.35 !important;
        margin-bottom:18px !important;
    }


    /* ---------- ITEMS SECTION HEADER ---------- */

    .ocq-page .ocq-section-head{
        display:flex !important;
        flex-direction:row !important;
        align-items:flex-start !important;
        justify-content:space-between !important;
        gap:12px !important;
        margin-bottom:16px !important;
    }

    .ocq-page .ocq-section-head > div{
        flex:1 1 auto !important;
        min-width:0 !important;
    }

    .ocq-page .ocq-section-head h2{
        margin:0 0 5px !important;
    }

    .ocq-page .ocq-section-head p{
        margin:0 !important;
        font-size:13px !important;
        line-height:1.6 !important;
    }

    .ocq-page .ocq-add-row{
        flex:0 0 auto !important;
        width:auto !important;
        min-width:74px !important;
        padding:9px 11px !important;
        font-size:11px !important;
        line-height:1.35 !important;
    }


    /* ---------- TABLE -> CARDS ---------- */

    .ocq-page .ocq-items{
        display:block !important;
        width:100% !important;
        border-collapse:separate !important;
    }

    .ocq-page .ocq-items thead{
        display:none !important;
    }

    .ocq-page .ocq-items tbody{
        display:block !important;
        width:100% !important;
    }

    .ocq-page .ocq-items tr.quote-item{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:13px 10px !important;

        position:relative !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 0 15px !important;
        padding:42px 12px 14px !important;

        border:1px solid #e1e8f0 !important;
        border-radius:16px !important;

        background:#fff !important;

        box-shadow:0 4px 14px rgba(18,62,115,.04) !important;
    }


    /* ---------- ALL CELLS ---------- */

    .ocq-page .ocq-items tr.quote-item > td{
        display:block !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;

        padding:0 !important;
        border:0 !important;

        text-align:right !important;
        vertical-align:top !important;
    }


    /* ---------- ROW NUMBER ---------- */

    .ocq-page .ocq-items tr.quote-item > td:nth-child(1){
        position:absolute !important;
        top:12px !important;
        right:12px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:28px !important;
        height:28px !important;

        border-radius:8px !important;

        background:#123e73 !important;
        color:#fff !important;

        font-size:12px !important;
        font-weight:800 !important;
    }


    /* ---------- DESCRIPTION ---------- */

    .ocq-page .ocq-items tr.quote-item > td:nth-child(2){
        grid-column:1 / -1 !important;
    }

    .ocq-page .ocq-items tr.quote-item > td:nth-child(2)::before{
        content:"الوصف";
        display:block;
        margin-bottom:6px;
        color:#64748b;
        font-size:11px;
        font-weight:700;
    }

    .ocq-page .ocq-items .ocq-description-editor{
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .ocq-items .item-description{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        min-height:72px !important;

        padding:10px 11px !important;

        font-size:14px !important;
        line-height:1.65 !important;
    }

    .ocq-page .ocq-items .ocq-direction-row{
        width:100% !important;
        margin-top:3px !important;
    }

    .ocq-page .ocq-items .item-text-direction{
        min-width:105px !important;
        width:auto !important;
    }


    /* ---------- QUANTITY ---------- */

    .ocq-page .ocq-items tr.quote-item > td:nth-child(3)::before{
        content:"الكمية";
        display:block;
        margin-bottom:6px;
        color:#64748b;
        font-size:11px;
        font-weight:700;
    }


    /* ---------- UNIT PRICE ---------- */

    .ocq-page .ocq-items tr.quote-item > td:nth-child(4)::before{
        content:"سعر الوحدة";
        display:block;
        margin-bottom:6px;
        color:#64748b;
        font-size:11px;
        font-weight:700;
    }


    /* ---------- INPUTS ---------- */

    .ocq-page .ocq-items tr.quote-item > td:nth-child(3) input,
    .ocq-page .ocq-items tr.quote-item > td:nth-child(4) input{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        height:44px !important;

        padding:9px 10px !important;

        border:1px solid #dbe4ee !important;
        border-radius:10px !important;

        background:#fff !important;

        box-sizing:border-box !important;

        direction:ltr !important;
        text-align:center !important;

        font-size:14px !important;
    }


    /* ---------- LINE TOTAL ---------- */

    .ocq-page .ocq-items tr.quote-item > td:nth-child(5){
        grid-column:1 / -1 !important;

        display:grid !important;
        grid-template-columns:auto 1fr !important;
        align-items:center !important;
        gap:12px !important;

        padding-top:11px !important;

        border-top:1px solid #edf1f5 !important;
    }

    .ocq-page .ocq-items tr.quote-item > td:nth-child(5)::before{
        content:"الإجمالي";
        color:#64748b;
        font-size:12px;
        font-weight:700;
    }

    .ocq-page .ocq-items tr.quote-item > td:nth-child(5) input{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        height:42px !important;

        padding:8px 11px !important;

        border:0 !important;
        border-radius:9px !important;

        background:#f5f8fc !important;

        color:#123e73 !important;

        direction:ltr !important;
        text-align:left !important;

        font-weight:800 !important;

        box-sizing:border-box !important;
    }


    /* ---------- DELETE ---------- */

    .ocq-page .ocq-items tr.quote-item > td:nth-child(6){
        position:absolute !important;
        top:11px !important;
        left:12px !important;

        width:30px !important;
        height:30px !important;
    }

    .ocq-page .ocq-items .remove-quote-row{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        width:30px !important;
        height:30px !important;

        padding:0 !important;

        border-radius:8px !important;

        font-size:19px !important;
        line-height:1 !important;
    }


    /* ---------- TERMS ---------- */

    .ocq-page .ocq-form-card textarea{
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .ocq-page .ocq-total-line{
        gap:15px !important;
        align-items:center !important;
    }

    .ocq-page .ocq-total-line strong{
        direction:ltr !important;
        white-space:nowrap !important;
    }

    .ocq-page .ocq-grand-total{
        gap:15px !important;
        padding:15px !important;
    }

    .ocq-page .ocq-grand-total strong{
        direction:ltr !important;
        white-space:nowrap !important;
        font-size:21px !important;
    }

}


/* ==========================================================
   END OFFICECO QUOTATION FORM MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — QUOTATION VIEW MOBILE V1
   Screen only — does not affect print/PDF
   ========================================================== */

@media screen and (max-width:700px){

    /* ---------- DOCUMENT ---------- */

    .ocq-page .ocq-document{
        width:100% !important;
        max-width:100% !important;
        padding:18px 14px !important;
        border-radius:16px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }


    /* ---------- HEADER ---------- */

    .ocq-document .ocq-doc-header{
        display:flex !important;
        flex-direction:column !important;
        gap:16px !important;
        padding-bottom:18px !important;
    }

    .ocq-document .ocq-company-brand{
        width:100% !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:12px !important;
    }

    .ocq-document .ocq-company-logo{
        width:100px !important;
        min-width:100px !important;
        height:65px !important;
    }

    .ocq-document .ocq-company-logo img{
        max-height:65px !important;
    }

    .ocq-document .ocq-company-details{
        flex:1 !important;
        min-width:0 !important;
    }

    .ocq-document .ocq-company-details h2{
        font-size:17px !important;
        line-height:1.5 !important;
        margin:0 !important;
    }

    .ocq-document .ocq-doc-title{
        width:100% !important;
        margin:0 !important;
        text-align:right !important;
    }

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

    .ocq-document .ocq-doc-title strong{
        font-size:25px !important;
        line-height:1.3 !important;
    }


    /* ---------- META ---------- */

    .ocq-document .ocq-doc-meta{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:7px !important;
        margin:18px 0 !important;
    }

    .ocq-document .ocq-doc-meta > div{
        min-width:0 !important;
        padding:10px 7px !important;
        text-align:center !important;
    }

    .ocq-document .ocq-doc-meta small{
        font-size:10px !important;
        margin-bottom:4px !important;
    }

    .ocq-document .ocq-doc-meta strong{
        display:block !important;
        font-size:11px !important;
        overflow-wrap:anywhere !important;
    }


    /* ---------- CLIENT ---------- */

    .ocq-document .ocq-client-box{
        display:block !important;
        width:100% !important;
        padding:15px !important;
        margin-bottom:18px !important;
        box-sizing:border-box !important;
    }

    .ocq-document .ocq-client-main,
    .ocq-document .ocq-client-contact{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .ocq-document .ocq-client-main{
        direction:rtl !important;
        text-align:right !important;
    }

    .ocq-document .ocq-client-main h3{
        font-size:18px !important;
    }

    .ocq-document .ocq-client-contact{
        direction:ltr !important;
        text-align:left !important;
        margin-top:12px !important;
        padding-top:12px !important;
        border-top:1px solid #e3ecef !important;
        font-size:11px !important;
        overflow-wrap:anywhere !important;
    }


    /* ---------- INTRO ---------- */

    .ocq-document .ocq-doc-intro{
        margin:18px 0 !important;
        font-size:13px !important;
        line-height:1.8 !important;
        overflow-wrap:anywhere !important;
    }


    /* ======================================================
       ITEMS TABLE -> MOBILE CARDS
       ====================================================== */

    .ocq-document .ocq-doc-table-wrap{
        width:100% !important;
        max-width:100% !important;
        margin:18px 0 !important;
        overflow:visible !important;
    }

    .ocq-document .ocq-doc-table{
        display:block !important;
        width:100% !important;
        margin:0 !important;
    }

    .ocq-document .ocq-doc-table thead{
        display:none !important;
    }

    .ocq-document .ocq-doc-table tbody{
        display:block !important;
        width:100% !important;
    }

    .ocq-document .ocq-doc-table tr{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:0 !important;

        width:100% !important;
        margin:0 0 12px !important;

        background:#fff !important;
        border:1px solid #e1e8f0 !important;
        border-radius:13px !important;

        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .ocq-document .ocq-doc-table td{
        display:block !important;
        width:auto !important;
        min-width:0 !important;

        padding:10px 11px !important;
        border:0 !important;
        border-bottom:1px solid #edf1f5 !important;

        text-align:right !important;
        white-space:normal !important;
        box-sizing:border-box !important;
    }


    /* Description = original column 4 */

    .ocq-document .ocq-doc-table td:nth-child(4){
        grid-column:1 / -1 !important;
        grid-row:1 !important;

        padding-top:35px !important;
        min-height:72px !important;

        position:relative !important;
    }

    .ocq-document .ocq-doc-table td:nth-child(4)::before{
        content:"الوصف";
        position:absolute;
        top:9px;
        right:11px;

        font-size:10px;
        font-weight:700;
        color:#8290a3;
    }


    /* Item number */

    .ocq-document .ocq-doc-table td:nth-child(5){
        position:absolute !important;
        width:28px !important;
        height:28px !important;
        padding:4px !important;

        margin-top:8px !important;
        margin-right:calc(100% - 40px) !important;

        border:0 !important;
        border-radius:8px !important;

        background:var(--quote-primary) !important;
        color:#fff !important;

        text-align:center !important;
        line-height:20px !important;
        font-size:11px !important;
        font-weight:800 !important;

        z-index:2 !important;
    }


    /* Quantity */

    .ocq-document .ocq-doc-table td:nth-child(3){
        grid-column:1 !important;
        grid-row:2 !important;
    }

    .ocq-document .ocq-doc-table td:nth-child(3)::before{
        content:"الكمية";
    }


    /* Unit price */

    .ocq-document .ocq-doc-table td:nth-child(2){
        grid-column:2 !important;
        grid-row:2 !important;
    }

    .ocq-document .ocq-doc-table td:nth-child(2)::before{
        content:"سعر الوحدة";
    }


    /* Line total */

    .ocq-document .ocq-doc-table td:nth-child(1){
        grid-column:1 / -1 !important;
        grid-row:3 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        background:#f6f9fc !important;
        border-bottom:0 !important;

        color:var(--quote-primary) !important;
        font-weight:800 !important;
    }

    .ocq-document .ocq-doc-table td:nth-child(1)::before{
        content:"الإجمالي";
        color:#6d7c90;
        font-size:11px;
        font-weight:700;
    }


    /* Labels for qty + price */

    .ocq-document .ocq-doc-table td:nth-child(2)::before,
    .ocq-document .ocq-doc-table td:nth-child(3)::before{
        display:block;
        margin-bottom:5px;
        color:#8290a3;
        font-size:10px;
        font-weight:700;
    }


    /* Description direction remains controlled by saved item direction */

    .ocq-document .ocq-doc-table td.ocq-item-description[dir="rtl"]{
        direction:rtl !important;
        text-align:right !important;
    }

    .ocq-document .ocq-doc-table td.ocq-item-description[dir="ltr"]{
        direction:ltr !important;
        text-align:left !important;
    }


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

    .ocq-document .ocq-doc-summary{
        width:100% !important;
        max-width:100% !important;
        margin:18px 0 0 !important;
    }

    .ocq-document .ocq-doc-summary > div{
        gap:15px !important;
        padding:11px 5px !important;
        font-size:12px !important;
    }

    .ocq-document .ocq-doc-summary strong{
        direction:ltr !important;
        white-space:nowrap !important;
    }

    .ocq-document .ocq-doc-summary .ocq-doc-total{
        padding:14px !important;
        border-radius:11px !important;
    }

    .ocq-document .ocq-doc-total strong{
        font-size:16px !important;
    }


    /* ---------- TERMS ---------- */

    .ocq-document .ocq-doc-terms{
        margin-top:25px !important;
        padding-top:16px !important;
        font-size:12px !important;
        line-height:1.8 !important;
        overflow-wrap:anywhere !important;
    }

    .ocq-document .ocq-doc-terms h3{
        font-size:17px !important;
        margin:0 0 10px !important;
    }


    /* ======================================================
       TOP ACTION AREA
       ====================================================== */

    .ocq-page .ocq-head.ocq-no-print{
        gap:14px !important;
    }

    .ocq-page .ocq-status-form{
        display:grid !important;
        grid-template-columns:1fr auto !important;
        align-items:end !important;
        gap:8px !important;
        width:100% !important;
    }

    .ocq-page .ocq-status-form label{
        min-width:0 !important;
    }

    .ocq-page .ocq-status-form select{
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .ocq-status-form .btn{
        white-space:nowrap !important;
    }

    .ocq-page .ocq-view-actions{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
        width:100% !important;
    }

    .ocq-page .ocq-view-actions > *{
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    .ocq-page .ocq-view-actions form{
        display:block !important;
    }

    .ocq-page .ocq-view-actions .btn,
    .ocq-page .ocq-view-actions form .btn{
        display:flex !important;
        width:100% !important;
        min-height:42px !important;

        align-items:center !important;
        justify-content:center !important;

        padding:9px 8px !important;
        box-sizing:border-box !important;
        text-align:center !important;
    }

}


/* ==========================================================
   END OFFICECO QUOTATION VIEW MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — QUOTATION VIEW MOBILE ITEMS V2
   Qty | Unit Price | Total
   Screen only
   ========================================================== */

@media screen and (max-width:700px){

    /* 3 equal columns under description */
    .ocq-document .ocq-doc-table tr{
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;
    }


    /* ---------- DESCRIPTION ---------- */

    .ocq-document .ocq-doc-table td:nth-child(4){
        grid-column:1 / -1 !important;
        grid-row:1 !important;
    }


    /* ---------- QUANTITY ---------- */

    .ocq-document .ocq-doc-table td:nth-child(3){
        grid-column:3 !important;
        grid-row:2 !important;

        display:block !important;
        padding:11px 8px !important;

        background:#fff !important;
        border-bottom:0 !important;
        border-left:1px solid #edf1f5 !important;

        text-align:center !important;
    }


    /* ---------- UNIT PRICE ---------- */

    .ocq-document .ocq-doc-table td:nth-child(2){
        grid-column:2 !important;
        grid-row:2 !important;

        display:block !important;
        padding:11px 8px !important;

        background:#fff !important;
        border-bottom:0 !important;
        border-left:1px solid #edf1f5 !important;

        text-align:center !important;
    }


    /* ---------- TOTAL ---------- */

    .ocq-document .ocq-doc-table td:nth-child(1){
        grid-column:1 !important;
        grid-row:2 !important;

        display:block !important;

        padding:11px 8px !important;

        background:#f6f9fc !important;
        border-bottom:0 !important;

        text-align:center !important;

        color:var(--quote-primary) !important;
        font-weight:800 !important;
    }


    /* ---------- LABELS ---------- */

    .ocq-document .ocq-doc-table td:nth-child(1)::before,
    .ocq-document .ocq-doc-table td:nth-child(2)::before,
    .ocq-document .ocq-doc-table td:nth-child(3)::before{
        display:block !important;

        margin:0 0 6px !important;

        color:#8290a3 !important;

        font-size:9px !important;
        line-height:1.3 !important;
        font-weight:700 !important;

        text-align:center !important;
        white-space:normal !important;
    }


    /* ---------- VALUES ---------- */

    .ocq-document .ocq-doc-table td:nth-child(1),
    .ocq-document .ocq-doc-table td:nth-child(2),
    .ocq-document .ocq-doc-table td:nth-child(3){
        direction:ltr !important;
        white-space:nowrap !important;
        font-size:13px !important;
        line-height:1.4 !important;
    }


    /* Keep labels RTL */
    .ocq-document .ocq-doc-table td:nth-child(1)::before,
    .ocq-document .ocq-doc-table td:nth-child(2)::before,
    .ocq-document .ocq-doc-table td:nth-child(3)::before{
        direction:rtl !important;
    }

}


/* ==========================================================
   END OFFICECO QUOTATION VIEW MOBILE ITEMS V2
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — QUOTATION VIEW MOBILE ITEMS V3
   Fix RTL grid + clipped total
   ========================================================== */

@media screen and (max-width:700px){

    /* Card itself uses LTR grid coordinates.
       Individual text direction is controlled below. */
    .ocq-document .ocq-doc-table tr{
        direction:ltr !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        overflow:hidden !important;
    }


    /* ---------- DESCRIPTION ---------- */

    .ocq-document .ocq-doc-table td:nth-child(4){
        grid-column:1 / 4 !important;
        grid-row:1 !important;

        width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }


    /* ---------- QUANTITY : RIGHT ---------- */

    .ocq-document .ocq-doc-table td:nth-child(3){
        grid-column:3 !important;
        grid-row:2 !important;
    }


    /* ---------- UNIT PRICE : CENTER ---------- */

    .ocq-document .ocq-doc-table td:nth-child(2){
        grid-column:2 !important;
        grid-row:2 !important;
    }


    /* ---------- TOTAL : LEFT ---------- */

    .ocq-document .ocq-doc-table td:nth-child(1){
        grid-column:1 !important;
        grid-row:2 !important;
    }


    /* ---------- ALL THREE CELLS ---------- */

    .ocq-document .ocq-doc-table td:nth-child(1),
    .ocq-document .ocq-doc-table td:nth-child(2),
    .ocq-document .ocq-doc-table td:nth-child(3){
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        padding:10px 6px 12px !important;
        margin:0 !important;

        box-sizing:border-box !important;

        text-align:center !important;
        direction:ltr !important;

        border-bottom:0 !important;
        background:#fff !important;

        white-space:nowrap !important;
        overflow:visible !important;

        font-size:12px !important;
        line-height:1.35 !important;
    }


    /* separators */
    .ocq-document .ocq-doc-table td:nth-child(2),
    .ocq-document .ocq-doc-table td:nth-child(3){
        border-left:1px solid #edf1f5 !important;
    }


    /* Total highlight */
    .ocq-document .ocq-doc-table td:nth-child(1){
        background:#f6f9fc !important;
        color:var(--quote-primary) !important;
        font-weight:800 !important;
    }


    /* ---------- LABELS ---------- */

    .ocq-document .ocq-doc-table td:nth-child(1)::before,
    .ocq-document .ocq-doc-table td:nth-child(2)::before,
    .ocq-document .ocq-doc-table td:nth-child(3)::before{
        display:block !important;

        width:100% !important;
        margin:0 0 5px !important;

        direction:rtl !important;
        text-align:center !important;

        color:#8290a3 !important;
        font-size:9px !important;
        line-height:1.25 !important;
        font-weight:700 !important;

        white-space:normal !important;
    }


    /* Description keeps its saved RTL/LTR setting */
    .ocq-document .ocq-doc-table td.ocq-item-description[dir="rtl"]{
        direction:rtl !important;
        text-align:right !important;
    }

    .ocq-document .ocq-doc-table td.ocq-item-description[dir="ltr"]{
        direction:ltr !important;
        text-align:left !important;
    }


    /* Item number stays in upper-left corner */
    .ocq-document .ocq-doc-table td:nth-child(5){
        direction:ltr !important;
    }

}


/* ==========================================================
   END OFFICECO QUOTATION VIEW MOBILE ITEMS V3
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — CATALOG MANAGE MOBILE V1
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    /* ---------- PAGE ---------- */

    .ocq-page{
        overflow-x:hidden;
    }

    .ocq-page > .container{
        width:100%;
        max-width:100%;
        padding-left:14px;
        padding-right:14px;
    }


    /* ---------- HEADER ---------- */

    .ocq-page .ocq-head{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }

    .ocq-page .ocq-head > div{
        width:100%;
        min-width:0;
    }

    .ocq-page .ocq-head h1{
        font-size:26px;
        line-height:1.35;
    }

    .ocq-page .ocq-head p{
        font-size:13px;
        line-height:1.8;
    }

    .ocq-page .ocq-head .ocq-new{
        width:100%;
        min-height:48px;
        display:flex;
        align-items:center;
        justify-content:center;
    }


    /* ---------- STATS ---------- */

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

    .ocq-page .ocq-stat{
        width:100%;
        min-width:0;
    }

    .ocq-page .ocq-stat .btn{
        width:100%;
    }


    /* ---------- PANELS ---------- */

    .ocq-page .ocq-panel{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow:hidden;
    }

    .ocq-page .ocq-panel-head{
        gap:10px;
    }

    .ocq-page .ocq-panel-head > div{
        min-width:0;
    }


    /* ---------- CATALOG MANAGEMENT BUTTONS ---------- */

    .ocq-page .ocq-panel a.btn{
        min-height:46px;
    }


    /* ---------- QR SECTION ---------- */

    .ocq-page .ocq-panel img[src*="/catalog/qr"]{
        width:180px !important;
        max-width:100% !important;
        height:auto !important;
        margin:0 auto;
    }

    .ocq-page #catalog-public-url{
        display:block;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box;
        font-size:12px;
    }

    .ocq-page #catalog-public-url + div{
        width:100%;
    }

    .ocq-page #catalog-public-url + div .btn{
        flex:1 1 100%;
        width:100%;
        justify-content:center;
    }

}


/* ==========================================================
   END OFFICECO CATALOG MANAGE MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — CATALOG QR MOBILE V2
   QR centered + URL + full-width actions
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    /* Main QR layout */
    .ocq-page .catalog-qr-layout{
        display:flex !important;
        flex-direction:column !important;
        grid-template-columns:none !important;
        width:100% !important;
        max-width:100% !important;
        gap:18px !important;
        align-items:stretch !important;
        margin-top:18px !important;
    }


    /* QR image box */
    .ocq-page .catalog-qr-image{
        width:210px !important;
        max-width:85% !important;
        margin:0 auto !important;
        padding:12px !important;
        box-sizing:border-box !important;
    }

    .ocq-page .catalog-qr-image img{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        margin:0 auto !important;
    }


    /* URL information */
    .ocq-page .catalog-qr-info{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .catalog-qr-info label{
        display:block !important;
        width:100% !important;
        margin-bottom:8px !important;
    }

    .ocq-page #catalog-public-url{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:46px !important;
        box-sizing:border-box !important;
        direction:ltr !important;
        text-align:left !important;
        font-size:12px !important;
    }


    /* Actions */
    .ocq-page .catalog-qr-actions{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:10px !important;
        margin-top:12px !important;
    }

    .ocq-page .catalog-qr-actions .btn{
        display:flex !important;
        width:100% !important;
        max-width:100% !important;
        min-height:46px !important;
        margin:0 !important;
        align-items:center !important;
        justify-content:center !important;
        box-sizing:border-box !important;
        text-align:center !important;
    }

}


/* ==========================================================
   END OFFICECO CATALOG QR MOBILE V2
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — CATALOG PRODUCTS MOBILE V1
   Product cards
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    /* ---------- PRODUCTS TABLE ---------- */

    .ocq-page .ocq-table-wrap{
        width:100%;
        max-width:100%;
        overflow:visible !important;
    }

    .ocq-page .ocq-table{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .ocq-table thead{
        display:none !important;
    }

    .ocq-page .ocq-table tbody{
        display:block !important;
        width:100% !important;
    }

    .ocq-page .ocq-table tbody tr{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        width:100% !important;
        margin:0 0 12px !important;
        padding:14px !important;
        border:1px solid #dfe7f0 !important;
        border-radius:15px !important;
        background:#fff !important;
        overflow:hidden !important;
    }

    .ocq-page .ocq-table tbody td{
        display:block !important;
        width:auto !important;
        min-width:0 !important;
        padding:10px 8px !important;
        border:0 !important;
        text-align:right !important;
        overflow-wrap:anywhere;
    }


    /* ---------- PRODUCT NAME ---------- */

    .ocq-page .ocq-table tbody td:nth-child(1){
        grid-column:1 / -1;
        padding-top:2px !important;
        padding-bottom:13px !important;
        margin-bottom:2px;
        border-bottom:1px solid #edf1f5 !important;
        font-size:16px;
        color:#0b3768;
    }

    .ocq-page .ocq-table tbody td:nth-child(1)::before{
        content:"المنتج";
        display:block;
        margin-bottom:5px;
        font-size:11px;
        font-weight:600;
        color:#8997aa;
    }

    .ocq-page .ocq-table tbody td:nth-child(1) strong{
        font-size:16px;
        line-height:1.55;
    }


    /* ---------- CATEGORY ---------- */

    .ocq-page .ocq-table tbody td:nth-child(2)::before{
        content:"القسم";
        display:block;
        margin-bottom:4px;
        font-size:11px;
        font-weight:600;
        color:#8997aa;
    }


    /* ---------- PART NUMBER ---------- */

    .ocq-page .ocq-table tbody td:nth-child(3)::before{
        content:"رقم الصنف";
        display:block;
        margin-bottom:4px;
        font-size:11px;
        font-weight:600;
        color:#8997aa;
    }


    /* ---------- STATUS ---------- */

    .ocq-page .ocq-table tbody td:nth-child(4){
        grid-column:1 / -1;
        border-top:1px solid #edf1f5 !important;
        border-bottom:1px solid #edf1f5 !important;
    }

    .ocq-page .ocq-table tbody td:nth-child(4)::before{
        content:"الحالة";
        display:block;
        margin-bottom:4px;
        font-size:11px;
        font-weight:600;
        color:#8997aa;
    }


    /* ---------- ACTIONS ---------- */

    .ocq-page .ocq-table tbody td:nth-child(5){
        grid-column:1 / -1;
        padding:12px 0 0 !important;
    }

    .ocq-page .ocq-table tbody td:nth-child(5) > div{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        width:100%;
    }

    .ocq-page .ocq-table tbody td:nth-child(5) .ocq-open,
    .ocq-page .ocq-table tbody td:nth-child(5) .btn{
        width:100% !important;
        min-height:42px;
        display:flex !important;
        align-items:center;
        justify-content:center;
        margin:0 !important;
        text-align:center !important;
    }

    .ocq-page .ocq-table tbody td:nth-child(5) form{
        width:100%;
        margin:0 !important;
    }

    .ocq-page .ocq-table tbody td:nth-child(5) form .btn{
        width:100% !important;
    }

}


/* ==========================================================
   END OFFICECO CATALOG PRODUCTS MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — CATALOG PRODUCTS MOBILE V2
   Dedicated labels scope
   ========================================================== */

@media screen and (max-width:700px){

    .ocq-page
    .catalog-products-panel
    > .ocq-table-wrap
    > .ocq-table
    tbody td:nth-child(1)::before{
        content:"المنتج" !important;
    }

    .ocq-page
    .catalog-products-panel
    > .ocq-table-wrap
    > .ocq-table
    tbody td:nth-child(2)::before{
        content:"القسم" !important;
    }

    .ocq-page
    .catalog-products-panel
    > .ocq-table-wrap
    > .ocq-table
    tbody td:nth-child(3)::before{
        content:"رقم الصنف" !important;
    }

    .ocq-page
    .catalog-products-panel
    > .ocq-table-wrap
    > .ocq-table
    tbody td:nth-child(4)::before{
        content:"الحالة" !important;
    }

    /* Actions column must not have a label */
    .ocq-page
    .catalog-products-panel
    > .ocq-table-wrap
    > .ocq-table
    tbody td:nth-child(5)::before{
        content:none !important;
        display:none !important;
    }

}


/* ==========================================================
   END OFFICECO CATALOG PRODUCTS MOBILE V2
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — CATALOG PRODUCT EDIT MOBILE V1
   Images + upload + actions
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    /* ---------- CURRENT PRODUCT IMAGES ---------- */

    .ocq-page #catalog-current-images{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        width:100% !important;
        max-width:100% !important;
    }

    .ocq-page #catalog-current-images .catalog-sortable-image{
        width:100% !important;
        max-width:100% !important;
        padding:10px !important;
        border-radius:16px !important;
        box-sizing:border-box !important;
    }

    /* Larger product image */
    .ocq-page #catalog-current-images .catalog-sortable-image > img{
        width:100% !important;
        height:auto !important;
        max-height:320px !important;
        aspect-ratio:1 / 1 !important;
        object-fit:contain !important;
        background:#f7f9fc !important;
        border-radius:12px !important;
    }

    /* Primary image label */
    .ocq-page #catalog-current-images [data-primary-label]{
        width:100% !important;
        min-height:44px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        box-sizing:border-box !important;
        font-size:14px !important;
    }

    /* Image buttons */
    .ocq-page #catalog-current-images [data-primary-button],
    .ocq-page #catalog-current-images .catalog-sortable-image > .btn{
        width:100% !important;
        min-height:44px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        box-sizing:border-box !important;
    }


    /* ---------- FILE UPLOAD ---------- */

    .ocq-page input[type="file"]{
        width:100% !important;
        max-width:100% !important;
        min-height:50px !important;
        padding:7px !important;
        box-sizing:border-box !important;
        border:1px solid #dfe6ef !important;
        border-radius:12px !important;
        background:#fff !important;
        font-size:13px !important;
    }

    .ocq-page input[type="file"]::file-selector-button{
        min-height:34px;
        padding:6px 12px;
        margin-inline-end:8px;
        border:0;
        border-radius:8px;
        background:#eef4fb;
        color:#123b69;
        font-family:inherit;
        font-weight:700;
        cursor:pointer;
    }


    /* ---------- PRODUCT FORM FIELDS ---------- */

    .ocq-page textarea{
        max-width:100% !important;
        box-sizing:border-box !important;
    }


    /* ---------- FINAL FORM ACTIONS ---------- */

    .ocq-page form > div:last-child{
        max-width:100% !important;
    }

}


/* ==========================================================
   END OFFICECO CATALOG PRODUCT EDIT MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — CATALOG CATEGORIES MOBILE V1
   Add category + categories cards
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    /* ======================================================
       ADD CATEGORY FORM
       ====================================================== */

    .ocq-page .catalog-category-add-panel form > div[style*="grid-template-columns"]{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        width:100% !important;
        max-width:100% !important;
    }

    .ocq-page .catalog-category-add-panel form > div[style*="grid-template-columns"] > div{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    .ocq-page .catalog-category-add-panel input,
    .ocq-page .catalog-category-add-panel select{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .ocq-page .catalog-category-add-panel form > div:last-child{
        width:100% !important;
    }

    .ocq-page .catalog-category-add-panel .ocq-new{
        width:100% !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        min-height:46px !important;
    }


    /* ======================================================
       CATEGORIES TABLE -> CARDS
       ====================================================== */

    .ocq-page .catalog-categories-list-panel .ocq-table-wrap{
        width:100% !important;
        max-width:100% !important;
        overflow:visible !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table{
        display:block !important;
        width:100% !important;
        border:0 !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table thead{
        display:none !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        width:100% !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table tbody tr{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        padding:12px !important;
        margin:0 !important;
        background:#fff !important;
        border:1px solid #e1e8f0 !important;
        border-radius:16px !important;
        box-sizing:border-box !important;
        box-shadow:0 3px 12px rgba(17,45,78,.03) !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:12px !important;
        width:100% !important;
        min-width:0 !important;
        padding:10px 4px !important;
        border:0 !important;
        border-bottom:1px solid #edf1f5 !important;
        text-align:right !important;
        box-sizing:border-box !important;
    }


    /* Remove labels inherited from quotation/product tables */

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td::before{
        content:none !important;
        display:none !important;
    }


    /* Correct category labels */

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(1)::before{
        content:"القسم" !important;
        display:block !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(2)::before{
        content:"الترتيب" !important;
        display:block !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(3)::before{
        content:"الحالة" !important;
        display:block !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(-n+3)::before{
        flex:0 0 auto !important;
        font-size:12px !important;
        line-height:1.3 !important;
        font-weight:600 !important;
        color:#8190a5 !important;
    }


    /* Category name */

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(1) strong{
        font-size:16px !important;
        color:#123b6d !important;
        line-height:1.5 !important;
        overflow-wrap:anywhere !important;
    }


    /* Actions */

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(4){
        display:block !important;
        padding:10px 4px 0 !important;
        border-bottom:0 !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(4) > div{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        width:100% !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(4) .ocq-open,
    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(4) form{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(4) > div > a{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-height:42px !important;
        padding:8px 12px !important;
        border:1px solid #d9e3ef !important;
        border-radius:10px !important;
        text-decoration:none !important;
        box-sizing:border-box !important;
    }

    .ocq-page .catalog-categories-list-panel .ocq-table tbody td:nth-child(4) form button{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        min-height:42px !important;
        padding:8px 12px !important;
        border-radius:10px !important;
        background:#14559a !important;
        color:#fff !important;
        text-decoration:none !important;
        box-sizing:border-box !important;
    }

}

/* ==========================================================
   END OFFICECO CATALOG CATEGORIES MOBILE V1
   ========================================================== */



/* ==========================================================
   OFFICECO TECH — CATEGORY EDIT MOBILE V1
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    /* Edit fields: one field per row */
    .ocq-page .catalog-category-edit-panel
    .catalog-category-edit-grid{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:16px !important;
        width:100% !important;
    }

    .ocq-page .catalog-category-edit-panel
    .catalog-category-edit-grid > div{
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .catalog-category-edit-panel input,
    .ocq-page .catalog-category-edit-panel select{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    /* Save / Cancel */
    .ocq-page .catalog-category-edit-panel
    .catalog-category-edit-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
        width:100% !important;
    }

    .ocq-page .catalog-category-edit-panel
    .catalog-category-edit-actions .btn{
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        text-align:center !important;
        justify-content:center !important;
    }

    /* Delete panel */
    .ocq-page .catalog-category-delete-panel form{
        width:100% !important;
    }

    .ocq-page .catalog-category-delete-panel form .btn{
        width:100% !important;
        text-align:center !important;
        justify-content:center !important;
    }

}

/* ==========================================================
   END OFFICECO CATEGORY EDIT MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — CATALOG SETTINGS MOBILE V1
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    /* ---------- GENERAL ---------- */

    .ocq-page .catalog-settings-form{
        width:100%;
        min-width:0;
    }

    .ocq-page .catalog-settings-form .ocq-panel{
        width:100%;
        min-width:0;
        overflow:hidden;
    }

    .ocq-page .catalog-settings-form input,
    .ocq-page .catalog-settings-form select,
    .ocq-page .catalog-settings-form textarea{
        max-width:100%;
        box-sizing:border-box;
    }


    /* ---------- CATALOG INFORMATION ---------- */

    .ocq-page .catalog-settings-info-panel .ocq-grid-2{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .ocq-page .catalog-settings-info-panel input[type="text"],
    .ocq-page .catalog-settings-info-panel input[type="email"],
    .ocq-page .catalog-settings-info-panel textarea{
        width:100% !important;
    }

    .ocq-page .catalog-settings-info-panel input[type="file"]{
        display:block;
        width:100% !important;
        min-width:0 !important;
        font-size:13px;
    }

    .ocq-page .catalog-settings-info-panel textarea{
        min-height:120px;
        resize:vertical;
    }


    /* ---------- HERO ---------- */

    .ocq-page .catalog-settings-hero-panel img{
        width:100% !important;
        height:auto !important;
        max-height:none !important;
        object-fit:cover;
    }

    .ocq-page .catalog-settings-hero-panel input[type="file"]{
        display:block;
        width:100% !important;
        min-width:0 !important;
        font-size:13px;
    }

    .ocq-page .catalog-settings-hero-panel small{
        line-height:1.8 !important;
    }


    /* ---------- COLORS ---------- */

    .ocq-page .catalog-settings-colors-panel .ocq-grid-2{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .ocq-page .catalog-settings-colors-panel input[type="color"]{
        display:block;
        width:100% !important;
        height:52px !important;
        padding:6px !important;
        border-radius:12px;
        cursor:pointer;
    }


    /* ---------- PUBLISH STATUS ---------- */

    .ocq-page .catalog-settings-publish-panel > label{
        width:100%;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:12px !important;
        padding:14px !important;
        border:1px solid #e3e8ef;
        border-radius:14px;
        background:#f8fafc;
        box-sizing:border-box;
    }

    .ocq-page .catalog-settings-publish-panel input[type="checkbox"]{
        flex:0 0 auto;
        width:18px !important;
        height:18px !important;
        margin:0 !important;
    }


    /* ---------- FINAL ACTIONS ---------- */

    .ocq-page .catalog-settings-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
        width:100%;
    }

    .ocq-page .catalog-settings-actions .btn,
    .ocq-page .catalog-settings-actions button{
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        justify-content:center;
        text-align:center;
    }

}

/* ==========================================================
   END OFFICECO CATALOG SETTINGS MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — MENU CATEGORIES MOBILE V1
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    /* ---------- ADD CATEGORY ---------- */

    .ocq-page .menu-category-add-panel
    .oc-menu-category-create-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        width:100% !important;
    }

    .ocq-page .menu-category-add-panel
    .oc-menu-category-create-grid > *{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    .ocq-page .menu-category-add-panel
    .oc-menu-category-create-grid label{
        display:block !important;
    }

    .ocq-page .menu-category-add-panel
    .oc-menu-category-create-grid label span{
        display:block !important;
        margin-bottom:7px !important;
    }

    .ocq-page .menu-category-add-panel
    .oc-menu-category-create-grid input{
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .menu-category-add-panel
    .oc-menu-category-create-grid button{
        width:100% !important;
        justify-content:center !important;
    }


    /* ---------- CURRENT CATEGORIES ---------- */

    .ocq-page .menu-categories-table-wrap{
        overflow:visible !important;
        width:100% !important;
        margin-top:16px !important;
    }

    .ocq-page .menu-categories-table{
        display:block !important;
        width:100% !important;
        border-collapse:separate !important;
    }

    .ocq-page .menu-categories-table thead{
        display:none !important;
    }

    .ocq-page .menu-categories-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
        width:100% !important;
    }

    .ocq-page .menu-categories-table
    .menu-category-row{
        display:block !important;
        width:100% !important;
        border:1px solid #e3eaf3 !important;
        border-radius:16px !important;
        padding:12px !important;
        background:#fff !important;
        overflow:hidden !important;
    }

    .ocq-page .menu-categories-table
    .menu-category-row td{
        display:block !important;
        width:100% !important;
        padding:10px 4px !important;
        text-align:right !important;
        border:0 !important;
        border-bottom:1px solid #edf1f6 !important;
    }

    .ocq-page .menu-categories-table
    .menu-category-row td[data-label]::before{
        content:attr(data-label);
        display:block;
        margin-bottom:5px;
        color:#8290a6;
        font-size:12px;
        font-weight:700;
    }

    .ocq-page .menu-categories-table
    .menu-category-name strong{
        display:block !important;
        font-size:17px !important;
        line-height:1.45 !important;
    }

    .ocq-page .menu-categories-table
    .menu-category-actions{
        padding-top:10px !important;
        padding-bottom:0 !important;
        border-bottom:0 !important;
    }

    .ocq-page .menu-category-actions-inner{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        width:100% !important;
    }

    .ocq-page .menu-category-actions-inner > a,
    .ocq-page .menu-category-actions-inner > form{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
    }

    .ocq-page .menu-category-actions-inner .btn,
    .ocq-page .menu-category-actions-inner form .btn{
        display:flex !important;
        width:100% !important;
        min-width:0 !important;
        justify-content:center !important;
        align-items:center !important;
        margin:0 !important;
    }

    .ocq-page .menu-categories-list-panel{
        overflow:hidden !important;
    }

}

/* ==========================================================
   END OFFICECO MENU CATEGORIES MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — MENU CATEGORY EDIT MOBILE V1
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    .ocq-page .menu-category-edit-panel{
        width:100% !important;
        min-width:0 !important;
        overflow:hidden !important;
    }

    .ocq-page .menu-category-edit-form{
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .menu-category-edit-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
        width:100% !important;
        min-width:0 !important;
        align-items:stretch !important;
    }

    .ocq-page .menu-category-edit-grid > label{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:0 !important;
    }

    .ocq-page .menu-category-edit-grid > label > span{
        display:block !important;
        margin-bottom:7px !important;
    }

    .ocq-page .menu-category-edit-grid input,
    .ocq-page .menu-category-edit-grid select{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:0 !important;
    }

    .ocq-page .menu-category-edit-actions{
        display:block !important;
        width:100% !important;
        margin-top:20px !important;
    }

    .ocq-page .menu-category-edit-actions .btn{
        display:flex !important;
        width:100% !important;
        min-width:0 !important;
        justify-content:center !important;
        align-items:center !important;
        margin:0 !important;
    }

}

/* ==========================================================
   END OFFICECO MENU CATEGORY EDIT MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — MENU PRODUCTS MOBILE V1
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    /* Header buttons */

    .ocq-page .menu-products-head-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        width:100% !important;
    }

    .ocq-page .menu-products-head-actions .btn{
        display:flex !important;
        width:100% !important;
        min-width:0 !important;
        justify-content:center !important;
        align-items:center !important;
        margin:0 !important;
    }


    /* Products panel */

    .ocq-page .menu-products-list-panel{
        width:100% !important;
        min-width:0 !important;
        overflow:hidden !important;
    }

    .ocq-page .menu-products-table-wrap{
        width:100% !important;
        overflow:visible !important;
    }

    .ocq-page .menu-products-table{
        display:block !important;
        width:100% !important;
        border-collapse:separate !important;
    }

    .ocq-page .menu-products-table thead{
        display:none !important;
    }

    .ocq-page .menu-products-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        width:100% !important;
    }


    /* Product card */

    .ocq-page .menu-products-table .menu-product-row{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        padding:12px !important;
        border:1px solid #e3eaf3 !important;
        border-radius:16px !important;
        background:#fff !important;
        overflow:hidden !important;
    }

    .ocq-page .menu-products-table .menu-product-row td{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        padding:10px 4px !important;
        text-align:right !important;
        border:0 !important;
        border-bottom:1px solid #edf1f6 !important;
    }

    .ocq-page .menu-products-table
    .menu-product-row td[data-label]::before{
        content:attr(data-label);
        display:block;
        margin-bottom:6px;
        color:#8290a6;
        font-size:12px;
        font-weight:700;
    }


    /* Image */

    .ocq-page .menu-products-table
    .menu-product-image img{
        display:block !important;
        width:100% !important;
        height:150px !important;
        max-width:100% !important;
        object-fit:cover !important;
        border-radius:12px !important;
    }


    /* Product name */

    .ocq-page .menu-products-table
    .menu-product-name strong{
        display:block !important;
        font-size:17px !important;
        line-height:1.5 !important;
    }


    /* Actions */

    .ocq-page .menu-products-table
    .menu-product-actions{
        padding-top:10px !important;
        padding-bottom:0 !important;
        border-bottom:0 !important;
    }

    .ocq-page .menu-product-actions-inner{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        width:100% !important;
    }

    .ocq-page .menu-product-actions-inner > a,
    .ocq-page .menu-product-actions-inner > form{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
    }

    .ocq-page .menu-product-actions-inner .btn,
    .ocq-page .menu-product-actions-inner form .btn{
        display:flex !important;
        width:100% !important;
        min-width:0 !important;
        justify-content:center !important;
        align-items:center !important;
        margin:0 !important;
    }

}

/* ==========================================================
   END OFFICECO MENU PRODUCTS MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — MENU PRODUCT FORM MOBILE V1
   Add + Edit product
   Mobile only
   ========================================================== */

@media screen and (max-width:700px){

    .ocq-page .menu-product-form-panel{
        width:100% !important;
        min-width:0 !important;
        overflow:hidden !important;
    }

    .ocq-page .menu-product-main-form{
        width:100% !important;
        min-width:0 !important;
    }


    /* ---------- MAIN FIELDS ---------- */

    .ocq-page .menu-product-fields-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .menu-product-fields-grid > label{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:0 !important;
    }

    .ocq-page .menu-product-fields-grid label > span,
    .ocq-page .menu-product-main-form > label > span{
        display:block !important;
        margin-bottom:7px !important;
    }

    .ocq-page .menu-product-fields-grid input,
    .ocq-page .menu-product-fields-grid select,
    .ocq-page .menu-product-main-form textarea,
    .ocq-page .menu-product-main-form > label select{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    .ocq-page .menu-product-main-form textarea{
        resize:vertical !important;
    }


    /* ---------- SAVE ---------- */

    .ocq-page .menu-product-save-actions{
        width:100% !important;
        margin-top:20px !important;
    }

    .ocq-page .menu-product-save-actions .btn{
        display:flex !important;
        width:100% !important;
        justify-content:center !important;
        align-items:center !important;
        margin:0 !important;
    }


    /* ---------- FILE INPUTS ---------- */

    .ocq-page .menu-product-main-form input[type="file"],
    .ocq-page .menu-product-upload-form input[type="file"]{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow:hidden !important;
    }


    /* ---------- IMAGE UPLOAD ---------- */

    .ocq-page .menu-product-upload-section{
        width:100% !important;
        min-width:0 !important;
        margin-top:26px !important;
        padding-top:22px !important;
    }

    .ocq-page .menu-product-upload-form{
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .menu-product-upload-form label{
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .menu-product-upload-form label > span{
        display:block !important;
        margin-bottom:7px !important;
    }

    .ocq-page .menu-product-upload-form .btn{
        display:flex !important;
        width:100% !important;
        justify-content:center !important;
        align-items:center !important;
    }


    /* ---------- CURRENT IMAGES ---------- */

    .ocq-page .menu-product-images-section{
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .menu-product-images-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        width:100% !important;
        min-width:0 !important;
    }

    .ocq-page .menu-product-images-grid .menu-sort-image{
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
    }

    .ocq-page .menu-product-images-grid
    .menu-sort-image > img{
        width:100% !important;
        height:auto !important;
        max-height:240px !important;
        object-fit:cover !important;
    }

    .ocq-page .menu-product-images-grid
    .menu-sort-image form{
        max-width:100% !important;
    }

    .ocq-page .menu-product-images-grid
    .menu-sort-image .btn{
        max-width:100% !important;
    }

}

/* ==========================================================
   END OFFICECO MENU PRODUCT FORM MOBILE V1
   ========================================================== */


/* ==========================================================
   OFFICECO TECH — FAQ PAGE V1
   ========================================================== */

.oc-faq-page{
    background:
        radial-gradient(circle at top right, rgba(18,83,145,.08), transparent 32%),
        #f7f9fc;
    min-height:70vh;
}

.oc-faq-page .container.narrow{
    max-width:920px;
}

.oc-faq-header{
    text-align:center;
    margin:0 auto 40px;
}

.oc-faq-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 15px;
    border-radius:999px;
    background:#eaf3ff;
    color:#125391;
    font-weight:800;
    font-size:13px;
    margin-bottom:14px;
}

.oc-faq-header h1{
    margin:0;
    color:#10243e;
    font-size:clamp(32px,5vw,48px);
    line-height:1.25;
    letter-spacing:-.035em;
}

.oc-faq-header p{
    max-width:650px;
    margin:14px auto 0;
    color:#64748b;
    font-size:17px;
    line-height:1.9;
}

.oc-faq-group{
    margin-bottom:38px;
}

.oc-faq-group-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:15px;
}

.oc-faq-group-head > span{
    flex:0 0 46px;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#125391;
    color:#fff;
    font-size:14px;
    font-weight:900;
    box-shadow:0 8px 22px rgba(18,83,145,.18);
}

.oc-faq-group-head h2{
    margin:0 0 3px;
    color:#10243e;
    font-size:22px;
}

.oc-faq-group-head p{
    margin:0;
    color:#7b8797;
    font-size:14px;
}

.oc-faq-item{
    background:#fff;
    border:1px solid #e3e9f1;
    border-radius:17px;
    margin-bottom:11px;
    overflow:hidden;
    box-shadow:0 5px 18px rgba(15,23,42,.035);
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.oc-faq-item:hover{
    border-color:#cbd9e8;
    box-shadow:0 8px 25px rgba(15,23,42,.06);
}

.oc-faq-item[open]{
    border-color:#b9d2ea;
    box-shadow:0 9px 28px rgba(18,83,145,.07);
}

.oc-faq-item summary{
    position:relative;
    list-style:none;
    cursor:pointer;
    padding:20px 58px 20px 22px;
    color:#172b45;
    font-size:16px;
    font-weight:800;
    line-height:1.7;
    user-select:none;
}

.oc-faq-item summary::-webkit-details-marker{
    display:none;
}

.oc-faq-item summary::before{
    content:"+";
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#eef5fc;
    color:#125391;
    font-size:21px;
    font-weight:500;
    line-height:1;
    transition:.2s ease;
}

.oc-faq-item[open] summary::before{
    content:"−";
    background:#125391;
    color:#fff;
}

.oc-faq-answer{
    padding:0 58px 20px 22px;
}

.oc-faq-answer p{
    margin:0;
    color:#5f6f82;
    line-height:2;
    font-size:15px;
}

.oc-faq-answer strong{
    color:#243c59;
}

.oc-faq-featured{
    border-color:#b8d6f1;
    background:linear-gradient(135deg,#ffffff,#f4f9ff);
}

.oc-faq-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-top:45px;
    padding:30px;
    border-radius:24px;
    background:linear-gradient(135deg,#0d477d,#1468a8);
    color:#fff;
    box-shadow:0 16px 40px rgba(13,71,125,.18);
}

.oc-faq-cta span{
    display:block;
    font-size:13px;
    font-weight:800;
    opacity:.8;
    margin-bottom:5px;
}

.oc-faq-cta h2{
    margin:0 0 6px;
    color:#fff;
    font-size:22px;
}

.oc-faq-cta p{
    margin:0;
    color:rgba(255,255,255,.82);
    line-height:1.8;
}

.oc-faq-cta .btn{
    flex:0 0 auto;
    background:#fff;
    color:#125391;
    border-color:#fff;
    white-space:nowrap;
}

.oc-faq-cta .btn:hover{
    background:#f1f7fc;
}


/* ---------- MOBILE ---------- */

@media screen and (max-width:700px){

    .oc-faq-page{
        padding-top:30px;
    }

    .oc-faq-header{
        margin-bottom:30px;
    }

    .oc-faq-header h1{
        font-size:32px;
    }

    .oc-faq-header p{
        font-size:15px;
        line-height:1.8;
    }

    .oc-faq-group{
        margin-bottom:32px;
    }

    .oc-faq-group-head{
        align-items:flex-start;
    }

    .oc-faq-group-head > span{
        flex-basis:42px;
        width:42px;
        height:42px;
        border-radius:12px;
    }

    .oc-faq-group-head h2{
        font-size:19px;
    }

    .oc-faq-group-head p{
        font-size:13px;
        line-height:1.6;
    }

    .oc-faq-item{
        border-radius:14px;
    }

    .oc-faq-item summary{
        padding:17px 52px 17px 16px;
        font-size:15px;
    }

    .oc-faq-item summary::before{
        right:15px;
        width:27px;
        height:27px;
    }

    .oc-faq-answer{
        padding:0 16px 18px;
    }

    .oc-faq-answer p{
        font-size:14px;
        line-height:1.9;
    }

    .oc-faq-cta{
        flex-direction:column;
        align-items:stretch;
        padding:24px 20px;
        border-radius:19px;
    }

    .oc-faq-cta h2{
        font-size:20px;
    }

    .oc-faq-cta .btn{
        width:100%;
        text-align:center;
    }
}

/* END OFFICECO TECH — FAQ PAGE V1 */


/* ==========================================================
   OFFICECO TECH — FAQ PAGE V2
   Desktop + Mobile layout correction
   ========================================================== */

/* ---------- MAIN FAQ PAGE ---------- */

.oc-faq-page{
    width:100% !important;
    max-width:none !important;
    padding:70px 0 80px !important;
    background:
        radial-gradient(circle at top right, rgba(18,83,145,.08), transparent 32%),
        #f7f9fc !important;
}


/* ---------- MAIN CONTAINER ---------- */

.oc-faq-page > .container.narrow{
    width:min(1120px, calc(100% - 48px)) !important;
    max-width:1120px !important;
    min-width:0 !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:0 !important;
    padding-right:0 !important;
}


/* ---------- HERO ---------- */

.oc-faq-page .oc-faq-header{
    width:100% !important;
    max-width:820px !important;
    margin:0 auto 52px !important;
    text-align:center;
}

.oc-faq-page .oc-faq-header h1{
    font-size:46px !important;
    line-height:1.25 !important;
}

.oc-faq-page .oc-faq-header p{
    max-width:720px !important;
    font-size:17px !important;
    line-height:1.9 !important;
}


/* ---------- FAQ GROUP ---------- */

.oc-faq-page .oc-faq-group{
    width:100% !important;
    max-width:none !important;

    margin:0 0 42px !important;

    padding:26px !important;

    background:rgba(255,255,255,.58);
    border:1px solid #e7edf4;
    border-radius:24px;

    box-shadow:
        0 8px 30px rgba(15,23,42,.035);
}


/* ---------- GROUP HEADER ---------- */

.oc-faq-page .oc-faq-group-head{
    width:100% !important;
    margin-bottom:20px !important;
}

.oc-faq-page .oc-faq-group-head > div{
    min-width:0 !important;
    flex:1 1 auto !important;
}

.oc-faq-page .oc-faq-group-head h2{
    font-size:24px !important;
}

.oc-faq-page .oc-faq-group-head p{
    font-size:14px !important;
}


/* ---------- FAQ ITEMS ---------- */

.oc-faq-page .oc-faq-item{
    display:block !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    margin:0 0 12px !important;

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

    overflow:hidden;
}

.oc-faq-page .oc-faq-item:last-child{
    margin-bottom:0 !important;
}


/* ---------- QUESTION ---------- */

.oc-faq-page .oc-faq-item > summary{
    display:block !important;

    width:100% !important;
    max-width:none !important;

    padding:20px 62px 20px 24px !important;

    font-size:16px !important;
    line-height:1.7 !important;

    text-align:right !important;
}


/* ---------- ANSWER ---------- */

.oc-faq-page .oc-faq-answer{
    width:100% !important;
    max-width:none !important;

    padding:
        0
        62px
        22px
        24px !important;
}

.oc-faq-page .oc-faq-answer p{
    width:100% !important;
    max-width:none !important;

    font-size:15px !important;
    line-height:2 !important;

    text-align:right !important;
}


/* ---------- CTA ---------- */

.oc-faq-page .oc-faq-cta{
    width:100% !important;
    max-width:none !important;

    margin-top:50px !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width:900px){

    .oc-faq-page > .container.narrow{
        width:calc(100% - 36px) !important;
    }

    .oc-faq-page .oc-faq-group{
        padding:22px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width:700px){

    .oc-faq-page{
        padding:32px 0 50px !important;
    }


    /* Main mobile width */

    .oc-faq-page > .container.narrow{
        width:calc(100% - 28px) !important;
        max-width:none !important;

        margin-left:auto !important;
        margin-right:auto !important;

        padding:0 !important;
    }


    /* Hero */

    .oc-faq-page .oc-faq-header{
        width:100% !important;
        margin-bottom:34px !important;
    }

    .oc-faq-page .oc-faq-badge{
        font-size:12px !important;
        padding:7px 13px !important;
    }

    .oc-faq-page .oc-faq-header h1{
        font-size:32px !important;
        line-height:1.3 !important;
    }

    .oc-faq-page .oc-faq-header p{
        font-size:15px !important;
        line-height:1.85 !important;
        padding:0 4px !important;
    }


    /* FAQ group card */

    .oc-faq-page .oc-faq-group{
        width:100% !important;

        margin-bottom:24px !important;
        padding:16px !important;

        border-radius:18px !important;
    }


    /* Group heading */

    .oc-faq-page .oc-faq-group-head{
        gap:11px !important;
        margin-bottom:15px !important;
    }

    .oc-faq-page .oc-faq-group-head > span{
        flex:0 0 40px !important;

        width:40px !important;
        height:40px !important;

        border-radius:11px !important;
        font-size:12px !important;
    }

    .oc-faq-page .oc-faq-group-head h2{
        font-size:19px !important;
        line-height:1.45 !important;
    }

    .oc-faq-page .oc-faq-group-head p{
        margin-top:3px !important;

        font-size:12.5px !important;
        line-height:1.65 !important;
    }


    /* Questions */

    .oc-faq-page .oc-faq-item{
        margin-bottom:9px !important;
        border-radius:13px !important;
    }

    .oc-faq-page .oc-faq-item > summary{
        min-height:58px !important;

        padding:
            15px
            49px
            15px
            14px !important;

        font-size:14px !important;
        line-height:1.65 !important;

        display:flex !important;
        align-items:center !important;
    }

    .oc-faq-page .oc-faq-item summary::before{
        right:13px !important;

        width:26px !important;
        height:26px !important;

        border-radius:8px !important;
        font-size:19px !important;
    }


    /* Answers */

    .oc-faq-page .oc-faq-answer{
        padding:
            0
            14px
            16px
            14px !important;
    }

    .oc-faq-page .oc-faq-answer p{
        font-size:13.5px !important;
        line-height:1.9 !important;
    }


    /* CTA */

    .oc-faq-page .oc-faq-cta{
        margin-top:30px !important;
        padding:22px 18px !important;
        border-radius:17px !important;
    }

    .oc-faq-page .oc-faq-cta h2{
        font-size:19px !important;
    }

    .oc-faq-page .oc-faq-cta p{
        font-size:14px !important;
    }

}


/* ==========================================================
   SMALL MOBILE — iPhone SE etc.
   ========================================================== */

@media screen and (max-width:390px){

    .oc-faq-page > .container.narrow{
        width:calc(100% - 24px) !important;
    }

    .oc-faq-page .oc-faq-group{
        padding:13px !important;
    }

    .oc-faq-page .oc-faq-header h1{
        font-size:30px !important;
    }

}


/* ==========================================================
   END OFFICECO TECH — FAQ PAGE V2
   ========================================================== */



/* ==========================================================
   OFFICECO TECH — ADMIN SUBSCRIPTIONS MOBILE V1
   Mobile only
   ========================================================== */

@media screen and (max-width:700px) {

    /* Page */
    .oc-admin-subs {
        overflow-x:hidden !important;
    }

    .oc-admin-subs > .container {
        width:100% !important;
        max-width:100% !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }


    /* Header */
    .oc-admin-subs .ocq-head {
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:18px !important;
    }

    .oc-admin-subs .ocq-head > div {
        width:100% !important;
        min-width:0 !important;
    }

    .oc-admin-subs .ocq-head h1 {
        font-size:34px !important;
        line-height:1.2 !important;
    }

    .oc-admin-subs .ocq-head p {
        font-size:15px !important;
        line-height:1.8 !important;
    }

    .oc-admin-subs .ocq-head > .btn {
        width:100% !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        min-height:44px !important;
    }


    /* Main card */
    .oc-admin-subs-card {
        width:100% !important;
        padding:10px !important;
        margin-top:20px !important;
        overflow:visible !important;
    }

    .oc-admin-subs-table-wrap {
        width:100% !important;
        overflow:visible !important;
    }


    /* Convert table to cards */
    .oc-admin-subs-table {
        display:block !important;
        width:100% !important;
        min-width:0 !important;
    }

    .oc-admin-subs-table thead {
        display:none !important;
    }

    .oc-admin-subs-table tbody {
        display:block !important;
        width:100% !important;
    }

    .oc-admin-subs-table .oc-admin-sub-row {
        display:block !important;
        width:100% !important;
        margin:0 0 14px !important;
        padding:8px 14px !important;

        background:#fff !important;
        border:1px solid #e5eaf1 !important;
        border-radius:16px !important;

        box-shadow:0 5px 18px rgba(15,23,42,.035) !important;
    }


    /* Cells */
    .oc-admin-subs-table .oc-admin-sub-row > td {
        width:100% !important;
        min-width:0 !important;

        display:flex !important;
        justify-content:space-between !important;
        align-items:center !important;
        gap:14px !important;

        padding:10px 0 !important;
        border:0 !important;
        border-bottom:1px solid #edf1f5 !important;

        text-align:left !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    .oc-admin-subs-table .oc-admin-sub-row > td:last-child {
        border-bottom:0 !important;
    }


    /* Field labels */
    .oc-admin-subs-table .oc-admin-sub-row > td::before {
        content:attr(data-label);

        flex:0 0 88px;
        min-width:88px;

        color:#8491a7;
        font-size:12px;
        font-weight:700;

        text-align:right;
    }


    /* Values */
    .oc-admin-subs-table .oc-admin-sub-row > td > strong {
        color:#10213b;
        font-weight:800;
    }


    /* Status */
    .oc-admin-subs-table .oc-sub-status {
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-height:32px !important;
        padding:5px 11px !important;
        white-space:nowrap !important;
    }


    /* Actions */
    .oc-admin-subs-table .oc-sub-actions {
        align-items:stretch !important;
        flex-wrap:wrap !important;
    }

    .oc-admin-subs-table .oc-sub-actions::before {
        align-self:center;
    }

    .oc-admin-subs-table .oc-sub-actions form {
        flex:1 1 calc(50% - 5px) !important;
        margin:0 !important;
    }

    .oc-admin-subs-table .oc-sub-actions form .btn {
        width:100% !important;
        min-height:40px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        margin:0 !important;
    }


    /* Empty table state */
    .oc-admin-subs-table tbody > tr:not(.oc-admin-sub-row) {
        display:block !important;
        width:100% !important;
    }

    .oc-admin-subs-table tbody > tr:not(.oc-admin-sub-row) > td {
        display:block !important;
        width:100% !important;
        text-align:center !important;
        padding:25px 15px !important;
    }

}

/* END OFFICECO TECH — ADMIN SUBSCRIPTIONS MOBILE V1 */


/* ==========================================================
   OFFICECO TECH — ADMIN COMPANY DETAIL MOBILE V1
   Mobile only
   ========================================================== */

@media screen and (max-width:700px) {

    /* ---------- Page ---------- */

    .admin-company-detail-page .container{
        width:100%;
        max-width:100%;
        padding-left:12px;
        padding-right:12px;
    }


    /* ---------- Header ---------- */

    .admin-company-detail-page .admin-company-detail-head{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:18px !important;
    }

    .admin-company-detail-page .admin-company-detail-head > div:first-child{
        width:100%;
        min-width:0;
    }

    .admin-company-detail-page .admin-company-detail-head h1{
        font-size:30px !important;
        line-height:1.25 !important;
        overflow-wrap:anywhere;
    }

    .admin-company-detail-page .admin-company-detail-head p{
        font-size:15px !important;
        line-height:1.8 !important;
    }

    .admin-company-detail-page .admin-company-detail-actions{
        width:100%;
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:10px !important;
    }

    .admin-company-detail-page .admin-company-detail-actions > a,
    .admin-company-detail-page .admin-company-detail-actions > form{
        width:100%;
        margin:0 !important;
    }

    .admin-company-detail-page .admin-company-detail-actions .btn{
        width:100%;
        min-width:0;
        text-align:center;
        white-space:nowrap;
    }


    /* ---------- Stats ---------- */

    .admin-company-detail-page .admin-company-detail-stats{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    .admin-company-detail-page .admin-company-detail-stats .card{
        min-width:0;
        padding:20px 16px !important;
    }

    .admin-company-detail-page .admin-company-detail-stats strong{
        overflow-wrap:anywhere;
    }


    /* ---------- Main cards ---------- */

    .admin-company-detail-page .admin-company-subscription-card,
    .admin-company-detail-page .admin-company-services-card,
    .admin-company-detail-page .admin-company-users-card{
        width:100%;
        min-width:0;
        padding:20px 16px !important;
        border-radius:18px;
    }

    .admin-company-detail-page .admin-company-subscription-card h2,
    .admin-company-detail-page .admin-company-services-card h2,
    .admin-company-detail-page .admin-company-users-card h2{
        font-size:25px !important;
        line-height:1.35;
    }


    /* ---------- Subscription ---------- */

    .admin-company-detail-page .subscription-admin-grid{
        grid-template-columns:1fr !important;
        gap:15px !important;
    }

    .admin-company-detail-page .subscription-admin-grid > div{
        width:100%;
        min-width:0;
    }

    .admin-company-detail-page .subscription-admin-grid select,
    .admin-company-detail-page .subscription-admin-grid input{
        width:100%;
        max-width:100%;
    }

    .admin-company-detail-page .subscription-admin-submit label{
        display:none;
    }

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


    /* ---------- Services ---------- */

    .admin-company-detail-page .admin-company-services-card p{
        margin:0;
        padding:13px 14px;
        background:#f8fafc;
        border:1px solid #e7ecf2;
        border-radius:11px;
        line-height:1.6;
    }

    .admin-company-detail-page .admin-company-services-card p + p{
        margin-top:8px;
    }


    /* ---------- User create form ---------- */

    .admin-company-detail-page .admin-user-create-form{
        width:100%;
        min-width:0;
        margin:18px 0 24px;
        padding:16px;
    }

    .admin-company-detail-page .admin-user-create-grid{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .admin-company-detail-page .admin-user-create-grid > div{
        width:100%;
        min-width:0;
    }

    .admin-company-detail-page .admin-user-create-grid input,
    .admin-company-detail-page .admin-user-create-grid select{
        width:100%;
        max-width:100%;
    }


    /* ---------- Users table -> mobile cards ---------- */

    .admin-company-detail-page .admin-company-users-card.table-wrap{
        overflow:visible !important;
    }

    .admin-company-detail-page .admin-company-users-table{
        display:block;
        width:100% !important;
        min-width:0 !important;
        border:0 !important;
    }

    .admin-company-detail-page .admin-company-users-table thead{
        display:none !important;
    }

    .admin-company-detail-page .admin-company-users-table tbody{
        display:block;
        width:100%;
    }

    .admin-company-detail-page .admin-company-users-table .admin-company-user-row{
        display:block;
        width:100%;
        margin:0 0 14px;
        padding:12px;
        background:#fff;
        border:1px solid #e4eaf1;
        border-radius:15px;
        box-shadow:0 5px 16px rgba(15,23,42,.035);
    }

    .admin-company-detail-page .admin-company-users-table .admin-company-user-row > td{
        display:flex !important;
        width:100% !important;
        min-width:0;
        align-items:flex-start;
        justify-content:space-between;
        gap:14px;
        padding:10px 0 !important;
        border:0 !important;
        border-bottom:1px solid #edf1f5 !important;
        text-align:left;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .admin-company-detail-page .admin-company-users-table .admin-company-user-row > td:last-child{
        border-bottom:0 !important;
        padding-bottom:0 !important;
    }

    .admin-company-detail-page .admin-company-users-table .admin-company-user-row > td::before{
        content:attr(data-label);
        flex:0 0 92px;
        color:#7b8ba3;
        font-size:13px;
        font-weight:800;
        text-align:right;
    }

    .admin-company-detail-page .admin-company-users-table .admin-company-user-row > td > strong{
        min-width:0;
        overflow-wrap:anywhere;
    }


    /* ---------- User actions ---------- */

    .admin-company-detail-page .user-actions{
        width:100%;
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:8px !important;
    }

    .admin-company-detail-page .user-actions > form{
        width:100%;
        margin:0 !important;
    }

    .admin-company-detail-page .user-actions .btn{
        width:100%;
        min-width:0;
        margin:0;
    }


    /* ---------- User edit row ---------- */

    .admin-company-detail-page .admin-company-users-table .user-edit-row{
        display:none;
        width:100%;
    }

    .admin-company-detail-page .admin-company-users-table .user-edit-row.open{
        display:block !important;
        margin:-6px 0 16px;
    }

    .admin-company-detail-page .admin-company-users-table .user-edit-row > td{
        display:block !important;
        width:100% !important;
        padding:0 !important;
        border:0 !important;
    }

    .admin-company-detail-page .admin-user-edit-form{
        width:100%;
        min-width:0;
        margin:0;
        padding:16px;
        background:#f8fafc;
        border:1px solid #dfe6ee;
        border-radius:15px;
    }

    .admin-company-detail-page .admin-user-edit-grid{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .admin-company-detail-page .admin-user-edit-grid > div{
        width:100%;
        min-width:0;
    }

    .admin-company-detail-page .admin-user-edit-grid input,
    .admin-company-detail-page .admin-user-edit-grid select{
        width:100%;
        max-width:100%;
    }

    .admin-company-detail-page .admin-user-edit-submit .btn{
        width:100%;
    }
}


/* Extra-small phones */

@media screen and (max-width:390px) {

    .admin-company-detail-page .admin-company-detail-head h1{
        font-size:28px !important;
    }

    .admin-company-detail-page .admin-company-detail-stats{
        grid-template-columns:1fr 1fr !important;
    }

}


/* END OFFICECO TECH — ADMIN COMPANY DETAIL MOBILE V1 */


/* ==========================================================
   OFFICECO TECH — ADMIN COMPANY USER EMAIL WRAP FIX
   ========================================================== */

@media screen and (max-width:700px) {

    .admin-company-detail-page
    .admin-company-users-table
    .admin-company-user-row
    > td[data-label="البريد"]{
        min-width:0 !important;
        overflow:hidden;
    }

    .admin-company-detail-page
    .admin-company-users-table
    .admin-company-user-row
    > td[data-label="البريد"]{
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    .admin-company-detail-page
    .admin-company-users-table
    .admin-company-user-row
    > td[data-label="البريد"]::before{
        flex-shrink:0;
    }

}


/* END OFFICECO TECH — ADMIN COMPANY USER EMAIL WRAP FIX */


/* ==========================================================
   OFFICECO TECH — ADMIN EMAIL RECIPIENT ADDRESS MOBILE FIX
   ========================================================== */

@media screen and (max-width:700px) {

    .email-admin-page
    .admin-email-recipients-table
    .recipient-row
    .recipient-email-cell {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .email-admin-page
    .admin-email-recipients-table
    .recipient-row
    .recipient-email-cell {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    .email-admin-page
    .admin-email-recipients-table
    .recipient-row
    .recipient-email-cell::before {
        flex: 0 0 92px !important;
        min-width: 92px !important;
    }

}

/* END OFFICECO TECH — ADMIN EMAIL RECIPIENT ADDRESS MOBILE FIX */


/* ==========================================================
   OFFICECO TECH — ADMIN SERVICES MOBILE V1
   /admin/products
   Mobile only
   ========================================================== */

@media screen and (max-width:700px) {

    /* ------------------------------------------------------
       Page
       ------------------------------------------------------ */

    .admin-services-page,
    .admin-services-page .admin-services-container {
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .admin-services-page .admin-services-container {
        padding-left:14px;
        padding-right:14px;
    }


    /* ------------------------------------------------------
       Header
       ------------------------------------------------------ */

    .admin-services-page .admin-head {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:14px;
    }

    .admin-services-page .admin-head > div {
        width:100%;
        min-width:0;
    }

    .admin-services-page .admin-head .btn {
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
    }


    /* ------------------------------------------------------
       Service cards
       ------------------------------------------------------ */

    .admin-services-page .admin-service-card {
        width:100%;
        max-width:100%;
        min-width:0;
        overflow:hidden;
        padding:18px 14px;
    }

    .admin-services-page .admin-service-card h2 {
        overflow-wrap:anywhere;
    }


    /* ------------------------------------------------------
       Remove desktop table overflow
       ------------------------------------------------------ */

    .admin-services-page .admin-services-table-wrap {
        width:100%;
        max-width:100%;
        overflow:visible !important;
        margin-top:16px;
    }

    .admin-services-page .admin-services-table {
        display:block;
        width:100% !important;
        min-width:0 !important;
        border:0;
    }

    .admin-services-page .admin-services-table thead {
        display:none;
    }

    .admin-services-page .admin-services-table tbody {
        display:block;
        width:100%;
    }


    /* ------------------------------------------------------
       Each plan becomes a mobile card
       ------------------------------------------------------ */

    .admin-services-page .admin-service-plan-row {
        display:block;
        width:100%;
        margin:0 0 12px;
        padding:10px 12px;
        border:1px solid #e4e9f1;
        border-radius:14px;
        background:#fff;
        overflow:hidden;
    }

    .admin-services-page .admin-service-plan-row:last-child {
        margin-bottom:0;
    }

    .admin-services-page .admin-service-plan-row > td {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        width:100% !important;
        min-width:0 !important;

        padding:10px 0 !important;
        border:0 !important;
        border-bottom:1px solid #edf0f5 !important;

        text-align:left;
        white-space:normal !important;
        overflow-wrap:anywhere;
    }

    .admin-services-page
    .admin-service-plan-row > td:last-child {
        border-bottom:0 !important;
    }


    /* ------------------------------------------------------
       Mobile labels
       ------------------------------------------------------ */

    .admin-services-page
    .admin-service-plan-row > td::before {
        content:attr(data-label);

        flex:0 0 92px;

        font-weight:700;
        color:#758096;
        text-align:right;
    }

    .admin-services-page
    .admin-service-plan-row > td > strong {
        min-width:0;
        overflow-wrap:anywhere;
    }


    /* ------------------------------------------------------
       Action
       ------------------------------------------------------ */

    .admin-services-page
    .admin-service-plan-action {
        display:block !important;
        padding-top:12px !important;
    }

    .admin-services-page
    .admin-service-plan-action::before {
        display:none;
    }

    .admin-services-page
    .admin-service-plan-action .btn {
        display:flex;
        width:100%;
        min-height:42px;
        align-items:center;
        justify-content:center;
        margin:0;
    }

}

/* END OFFICECO TECH — ADMIN SERVICES MOBILE V1 */


/* OFFICECO_SALON_DASHBOARD_R121 */

/* Salon management page only */
body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
main {
    width: min(1100px, 100%);
    max-width: 1100px;
    margin-inline: auto;
    padding: 30px 18px 55px;
}

/* Heading */
body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
main > h1 {
    font-size: 27px;
    font-weight: 800;
    color: #123761;
    margin-bottom: 10px;
}

body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
main > p {
    color: #718198;
    font-size: 14px;
}

/* Cards */
body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
main section,
body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
main .card {
    border: 1px solid #dfe8f2;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(15, 35, 65, .035);
}

/* Statistics */
body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
main .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0;
}

/* Salon management links */
body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
main a[href*="/salon/"] {
    border-radius: 10px;
    transition: background .2s, border-color .2s;
}

body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
main a[href*="/salon/"]:hover {
    background: #eef5fc;
    border-color: #bad0e7;
}

/* Typography */
body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
main,
body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
main * {
    font-family: Alexandria, sans-serif;
}

/* Mobile */
@media(max-width:700px) {
    body:has(a[href*="/salon/profile"]):has(a[href*="/salon/services"])
    main {
        padding: 20px 12px 40px;
    }

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


/* ==========================================================
   OFFICECO_MARKETING_LANDING_CSS_R6349
   SEO marketing landing pages only
   ========================================================== */

.oc-system-landing {
    --landing-ink: #14233b;
    --landing-muted: #61718a;
    --landing-accent: #4f46e5;
    --landing-border: #e4e9f3;
    color: var(--landing-ink);
    background: #fff;
    overflow: clip;
}

.oc-system-landing *,
.oc-system-landing *::before,
.oc-system-landing *::after {
    box-sizing: border-box;
}

.oc-system-landing .oc-system-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(76px, 9vw, 130px) 0;
    background:
        radial-gradient(circle at 15% 15%,
            rgba(111, 174, 255, .22), transparent 38%),
        radial-gradient(circle at 85% 80%,
            rgba(118, 93, 255, .17), transparent 40%),
        linear-gradient(135deg, #f5f8ff 0%, #ffffff 58%, #eef3ff 100%);
    text-align: center;
}

.oc-system-landing .oc-system-hero .container {
    max-width: 1040px;
}

.oc-system-landing .oc-system-hero h1 {
    max-width: 930px;
    margin: 24px auto 22px;
    font-size: clamp(2.1rem, 4.5vw, 4rem);
    line-height: 1.35;
    letter-spacing: -.035em;
    color: var(--landing-ink);
}

.oc-system-landing .oc-system-hero p {
    max-width: 770px;
    margin: 0 auto;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 2;
    color: var(--landing-muted);
}

.oc-system-landing .oc-system-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 34px auto 0;
}

.oc-system-landing .oc-system-actions .btn {
    width: auto;
    min-width: 190px;
    max-width: 100%;
    padding: 14px 24px !important;
    font-size: .94rem;
    white-space: normal;
    text-align: center;
}

.oc-system-landing .oc-system-section {
    padding: clamp(65px, 7vw, 105px) 0;
}

.oc-system-landing .oc-system-section:nth-of-type(odd) {
    background: #f8faff;
}

.oc-system-landing .oc-system-section h2 {
    margin: 0 0 22px;
    font-size: clamp(1.7rem, 3vw, 2.55rem);
    line-height: 1.5;
    color: var(--landing-ink);
}

.oc-system-landing .oc-system-section > .container > p {
    max-width: 860px;
    margin: 0 0 28px;
    color: var(--landing-muted);
    font-size: 1.04rem;
    line-height: 2;
}

.oc-system-landing .oc-system-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}

.oc-system-landing .oc-system-features .card {
    min-width: 0;
    padding: 30px 26px;
    border: 1px solid var(--landing-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(30, 50, 90, .055);
    transition: transform .25s ease, box-shadow .25s ease;
}

.oc-system-landing .oc-system-features .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(30, 50, 90, .11);
}

.oc-system-landing .oc-system-features .card h3 {
    margin: 0 0 13px;
    font-size: 1.14rem;
    line-height: 1.65;
    color: var(--landing-ink);
}

.oc-system-landing .oc-system-features .card p {
    margin: 0;
    color: var(--landing-muted);
    line-height: 1.95;
    font-size: .96rem;
}

.oc-system-landing #how-it-works ol {
    display: grid;
    gap: 16px;
    margin: 26px 0 0;
    padding-inline-start: 30px;
    max-width: 850px;
}

.oc-system-landing #how-it-works li {
    padding: 8px 0;
    line-height: 1.9;
    color: var(--landing-muted);
}

.oc-system-landing #faq details {
    max-width: 900px;
    margin: 0 0 14px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--landing-border);
    border-radius: 16px;
}

.oc-system-landing #faq summary {
    cursor: pointer;
    font-weight: 700;
    line-height: 1.8;
    color: var(--landing-ink);
}

.oc-system-landing #faq details p {
    margin: 15px 0 0;
    color: var(--landing-muted);
    line-height: 1.95;
}

.oc-system-landing .oc-system-cta {
    background: linear-gradient(135deg, #18254d, #4338a6) !important;
    color: #fff;
    text-align: center;
}

.oc-system-landing .oc-system-cta h2,
.oc-system-landing .oc-system-cta p {
    color: #fff !important;
    margin-inline: auto !important;
}

.oc-system-landing .oc-system-cta .btn {
    margin-top: 18px;
    background: #fff;
    color: #302b83;
    border-color: transparent;
}

.oc-system-landing .oc-system-cta .btn:hover {
    background: #edf1ff;
}

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

@media (max-width: 600px) {
    .oc-system-landing .oc-system-hero {
        padding: 65px 0 75px;
    }

    .oc-system-landing .oc-system-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .oc-system-landing .oc-system-features .card {
        padding: 24px 21px;
    }

    .oc-system-landing .oc-system-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .oc-system-landing .oc-system-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .oc-system-landing #faq details {
        padding: 17px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oc-system-landing .oc-system-features .card {
        transition: none;
    }

    .oc-system-landing .oc-system-features .card:hover {
        transform: none;
    }
}

/* END OFFICECO_MARKETING_LANDING_CSS_R6349 */