/* ===========================================================
   BCOST — Core Stylesheet
   Brand: #021e47 (primary / navy) · #fc8503 (secondary / orange)
   Style rules: solid colors only (no gradients), soft shadows,
   rounded corners, generous whitespace.
   =========================================================== */

:root{
  --primary: #021e47;
  --primary-light: #0a2f66;
  --secondary: #fc8503;
  --secondary-light: #ff9c2e;
  --bg: #f4f6fa;
  --card-bg: #ffffff;
  --text-dark: #1b2430;
  --text-muted: #6b7688;
  --border: #e9edf3;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 6px 20px rgba(2, 30, 71, 0.08);
  --shadow-sm: 0 2px 8px rgba(2, 30, 71, 0.06);
}

html[dir="rtl"] body{ font-family: 'Rubik', 'Segoe UI', sans-serif; }
html[dir="rtl"] *:not(i){ font-family: 'Rubik', 'Segoe UI', sans-serif !important; }

body{
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text-dark);
}

a{ text-decoration:none; }
.text-primary-b{ color: var(--primary) !important; }
.text-secondary-b{ color: var(--secondary) !important; }
.bg-primary-b{ background: var(--primary) !important; }
.bg-secondary-b{ background: var(--secondary) !important; }

.btn-primary-b{
  background: var(--primary); border: 1px solid var(--primary); color:#fff;
  border-radius: var(--radius-sm); font-weight:600; padding:.6rem 1.4rem;
  transition: background .15s ease, transform .1s ease;
}
.btn-primary-b:hover{ background: var(--primary-light); color:#fff; transform: translateY(-1px); }

.btn-secondary-b{
  background: var(--secondary); border: 1px solid var(--secondary); color:#fff;
  border-radius: var(--radius-sm); font-weight:600; padding:.6rem 1.4rem;
  transition: background .15s ease, transform .1s ease;
}
.btn-secondary-b:hover{ background: var(--secondary-light); color:#fff; transform: translateY(-1px); }

.btn-outline-b{
  background: transparent; border: 1.5px solid var(--primary); color: var(--primary);
  border-radius: var(--radius-sm); font-weight:600; padding:.55rem 1.35rem;
}
.btn-outline-b:hover{ background: var(--primary); color:#fff; }

.card-b{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-b:hover{ box-shadow: var(--shadow); }

.stat-card{
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.stat-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:#fff;
}

/* ---- Admin shell ---- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width:260px; background: var(--primary); color:#fff; flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  overflow-y:auto; overflow-x:hidden;
}
.admin-sidebar .brand{ padding:1.5rem; text-align:center; border-bottom:1px solid rgba(255,255,255,.1); }
.admin-sidebar .brand small{ color: var(--secondary); letter-spacing:2px; font-weight:700; font-size:.65rem; }
.admin-nav{ padding: 1rem .75rem; flex:1; }
.admin-nav a{
  display:flex; align-items:center; gap:.75rem; color:#c9d3e0; padding:.75rem 1rem;
  border-radius: var(--radius-sm); margin-bottom:.25rem; font-weight:500; font-size:.92rem;
}
.admin-nav a i{ width:18px; text-align:center; }
.admin-nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.admin-nav a.active{ background: var(--secondary); color:#fff; }
.admin-main{ flex:1; min-width:0; }
.admin-topbar{
  background:#fff; border-bottom:1px solid var(--border); padding: .9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20;
}
.admin-content{ padding: 1.75rem; }

.badge-status-active{ background:#e6f6ec; color:#1c8a4c; border-radius:20px; padding:.3rem .7rem; font-weight:600; font-size:.75rem; }
.badge-status-paused{ background:#fdeee0; color:var(--secondary); border-radius:20px; padding:.3rem .7rem; font-weight:600; font-size:.75rem; }
.badge-pending{ background:#fdeee0; color:var(--secondary); border-radius:20px; padding:.25rem .6rem; font-size:.72rem; font-weight:700; }
.badge-paid{ background:#e6f6ec; color:#1c8a4c; border-radius:20px; padding:.25rem .6rem; font-size:.72rem; font-weight:700; }


.table-b thead th{ color: var(--text-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.4px; border-bottom:2px solid var(--border); }
.table-b td{ vertical-align:middle; border-bottom:1px solid var(--border); }

/* ---- Auth page ---- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--primary); padding:1rem; }
.auth-card{ width:100%; max-width:420px; background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); padding:2.5rem; }

/* ---- Public site ---- */
.navbar-public{ background:#fff; box-shadow: var(--shadow-sm); }
.hero-section{ background: var(--primary); color:#fff; padding: 6rem 0 5rem; }
.hero-section h1{ font-weight:800; line-height:1.25; }
.section-title{ font-weight:800; color: var(--primary); }
.section-pad{ padding: 5rem 0; }
.feature-card{ border-radius: var(--radius); padding:2rem; background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-sm); height:100%; }
.feature-icon{ width:54px;height:54px;border-radius:14px;background: var(--secondary); color:#fff; display:flex;align-items:center;justify-content:center; font-size:1.3rem; margin-bottom:1rem; }
.pricing-card{ border-radius: var(--radius); background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-sm); padding:2.2rem; height:100%; }
.pricing-card.highlighted{ border: 2px solid var(--secondary); box-shadow: var(--shadow); position:relative; }
.pricing-badge{ background: var(--secondary); color:#fff; font-size:.7rem; font-weight:700; padding:.3rem .8rem; border-radius:20px; position:absolute; top:-14px; left:50%; transform:translateX(-50%); }
.review-card{ border-radius: var(--radius); background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-sm); padding:2rem; margin: 0 .5rem; }
.faq-item{ border-bottom:1px solid var(--border); padding: 1.2rem 0; }
.footer-public{ background: var(--primary); color:#c9d3e0; padding: 3rem 0 1.5rem; }

/* Language toggle pill */
.lang-toggle{
  font-family: 'Rubik', 'Segoe UI', sans-serif;
  border:1.5px solid var(--border); border-radius:20px; padding:.35rem 1rem; font-weight:700;
  font-size:.8rem; color: var(--primary); background:#fff;
}

@media (max-width: 991px){
  .admin-sidebar{ position:fixed; left:0; top:0; z-index:1050; transform:translateX(-100%); transition:transform .2s ease; }
  html[dir="rtl"] .admin-sidebar{ left:auto; right:0; transform:translateX(100%); }
  .admin-sidebar.show{ transform:translateX(0); }
}


/* ===========================================================
   BCOST — Public Homepage Enhancements
   Hero mockup, stats bar, steps, FAQ chevron, contact, footer.
   No gradients — solid brand colors, soft shadows, rounded corners.
   =========================================================== */

   .hero-section{ position:relative; overflow:hidden; }
   .hero-blob{ position:absolute; border-radius:50%; opacity:.10; background:var(--secondary); pointer-events:none; }
   .hero-blob-1{ width:420px; height:420px; top:-140px; inset-inline-end:-120px; }
   .hero-blob-2{ width:280px; height:280px; bottom:-100px; inset-inline-start:-80px; background:#ffffff; opacity:.06; }
   
   .hero-badge{ background: rgba(252,133,3,.15); color: var(--secondary); border:1px solid rgba(252,133,3,.35); font-weight:700; font-size:.78rem; }
   .hero-btn-outline{ background:transparent; border:1.5px solid rgba(255,255,255,.55); color:#fff; border-radius:8px; padding:.6rem 1.6rem; transition: background .15s ease; }
   .hero-btn-outline:hover{ background: rgba(255,255,255,.1); color:#fff; }
   
   .hero-stat{ text-align:start; }
   .hero-stat-num{ color:#fff; font-weight:800; font-size:1.4rem; line-height:1; }
   .hero-stat-label{ color:#9fb0c9; font-size:.75rem; margin-top:.25rem; }
   
   .hero-mockup{
     background:#fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
     padding: 1.4rem; max-width: 440px; margin-inline-start:auto;
   }
   .hero-mockup-header{ display:flex; gap:.4rem; margin-bottom:1rem; }
   .hero-mockup-header .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
   .hero-mockup-stats{ display:flex; gap:.75rem; margin-bottom:1rem; }
   .hmock-box{ flex:1; background:#f4f6fa; border-radius:12px; padding:.85rem 1rem; }
   .hmock-box.accent{ background:#fff4e8; }
   .hmock-label{ font-size:.7rem; color:#7a8598; text-transform:uppercase; letter-spacing:.4px; }
   .hmock-value{ font-size:1.15rem; font-weight:800; color: var(--primary); margin-top:.15rem; }
   .hmock-box.accent .hmock-value{ color: var(--secondary); }
   .hero-mockup-rows{ display:flex; flex-direction:column; gap:.6rem; }
   .hmock-row{ display:flex; align-items:center; gap:.65rem; border:1px solid var(--border); border-radius:10px; padding:.5rem .7rem; }
   .hmock-icon{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
   .hmock-name{ font-weight:600; font-size:.85rem; flex:1; }
   .hmock-badge{ font-weight:700; font-size:.8rem; color: var(--primary); }
   
   .stats-bar{ background:#fff; border-bottom:1px solid var(--border); padding: 2.5rem 0; }
   .stats-icon{ font-size:1.6rem; color: var(--secondary); margin-bottom:.5rem; }
   .stats-num{ font-size:1.8rem; font-weight:800; color: var(--primary); }
   .stats-label{ color:#7a8598; font-size:.8rem; margin-top:.2rem; }
   
   .eyebrow{ display:inline-block; color: var(--secondary); font-weight:800; font-size:.75rem; letter-spacing:2px; }
   
   .feature-card{ transition: transform .18s ease, box-shadow .18s ease; }
   .feature-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
   
   .steps-row{ position:relative; }
   .step-card{
     background:#fff; border:1px solid var(--border); border-radius: var(--radius);
     padding: 2rem 1.6rem; text-align:center; height:100%; box-shadow: var(--shadow-sm);
     transition: transform .18s ease, box-shadow .18s ease;
   }
   .step-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
   .step-circle{
     width:52px; height:52px; border-radius:50%; background: var(--primary); color:#fff;
     display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem; margin:0 auto;
   }
   
   .pricing-card{ transition: transform .18s ease, box-shadow .18s ease; }
   .pricing-card:hover{ transform: translateY(-4px); }
   .pricing-card.highlighted:hover{ transform: translateY(-8px); }
   
   .quote-icon{ color: var(--border); font-size:1.6rem; float: inline-end; }
   .review-avatar{
     width:38px; height:38px; border-radius:50%; background: var(--primary); color:#fff;
     display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0;
   }
   
   .faq-item{ transition: background .15s ease; border-radius:10px; }
   .faq-item:hover{ background:#f8f9fb; }
   .faq-chevron{ transition: transform .25s ease; color: var(--secondary); }
   
   .contact-info-card{
     background: var(--primary); color:#fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow);
     display:flex; flex-direction:column; gap:1.5rem; justify-content:center;
   }
   .contact-info-item{ display:flex; align-items:center; gap:1rem; color:#fff; }
   .contact-info-item .text-muted{ color:#b8c4d9 !important; }
   .contact-info-icon{
     width:44px; height:44px; border-radius:12px; background: rgba(252,133,3,.18); color: var(--secondary);
     display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
   }
   
   .footer-social{
     width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08); color:#fff;
     display:flex; align-items:center; justify-content:center; transition: background .15s ease;
   }
   .footer-social:hover{ background: var(--secondary); color:#fff; }
   .footer-links li{ margin-bottom:.6rem; color:#b8c4d9; font-size:.9rem; }
   .footer-links a{ color:#b8c4d9; }
   .footer-links a:hover{ color:#fff; }
   
   @media (max-width: 991px){
     .hero-mockup{ margin-inline:auto; margin-top:2rem; }
   }



   /* ===========================================================
   BCOST — Core Stylesheet
   Brand: #021e47 (primary / navy) · #fc8503 (secondary / orange)
   Style rules: solid colors only (no gradients), soft shadows,
   rounded corners, generous whitespace.
   =========================================================== */

:root{
  --primary: #021e47;
  --primary-light: #0a2f66;
  --secondary: #fc8503;
  --secondary-light: #ff9c2e;
  --bg: #f4f6fa;
  --card-bg: #ffffff;
  --text-dark: #1b2430;
  --text-muted: #6b7688;
  --border: #e9edf3;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 6px 20px rgba(2, 30, 71, 0.08);
  --shadow-sm: 0 2px 8px rgba(2, 30, 71, 0.06);
}

html[dir="rtl"] body{ font-family: 'Rubik', 'Segoe UI', sans-serif; }
body{
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text-dark);
}

a{ text-decoration:none; }
.text-primary-b{ color: var(--primary) !important; }
.text-secondary-b{ color: var(--secondary) !important; }
.bg-primary-b{ background: var(--primary) !important; }
.bg-secondary-b{ background: var(--secondary) !important; }

.btn-primary-b{
  background: var(--primary); border: 1px solid var(--primary); color:#fff;
  border-radius: var(--radius-sm); font-weight:600; padding:.6rem 1.4rem;
  transition: background .15s ease, transform .1s ease;
}
.btn-primary-b:hover{ background: var(--primary-light); color:#fff; transform: translateY(-1px); }

.btn-secondary-b{
  background: var(--secondary); border: 1px solid var(--secondary); color:#fff;
  border-radius: var(--radius-sm); font-weight:600; padding:.6rem 1.4rem;
  transition: background .15s ease, transform .1s ease;
}
.btn-secondary-b:hover{ background: var(--secondary-light); color:#fff; transform: translateY(-1px); }

.btn-outline-b{
  background: transparent; border: 1.5px solid var(--primary); color: var(--primary);
  border-radius: var(--radius-sm); font-weight:600; padding:.55rem 1.35rem;
}
.btn-outline-b:hover{ background: var(--primary); color:#fff; }

.card-b{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-b:hover{ box-shadow: var(--shadow); }

.stat-card{
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.stat-icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:#fff;
}

/* ---- Admin shell ---- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width:260px; background: var(--primary); color:#fff; flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  overflow-y:auto; overflow-x:hidden;
}
.admin-sidebar .brand{ padding:1.5rem; text-align:center; border-bottom:1px solid rgba(255,255,255,.1); }
.admin-sidebar .brand small{ color: var(--secondary); letter-spacing:2px; font-weight:700; font-size:.65rem; }
.admin-nav{ padding: 1rem .75rem; flex:1; }
.admin-nav a{
  display:flex; align-items:center; gap:.75rem; color:#c9d3e0; padding:.75rem 1rem;
  border-radius: var(--radius-sm); margin-bottom:.25rem; font-weight:500; font-size:.92rem;
}
.admin-nav a i{ width:18px; text-align:center; }
.admin-nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.admin-nav a.active{ background: var(--secondary); color:#fff; }
.admin-main{ flex:1; min-width:0; }
.admin-topbar{
  background:#fff; border-bottom:1px solid var(--border); padding: .9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20;
}
.admin-content{ padding: 1.75rem; }

.badge-status-active{ background:#e6f6ec; color:#1c8a4c; border-radius:20px; padding:.3rem .7rem; font-weight:600; font-size:.75rem; }
.badge-status-paused{ background:#fdeee0; color:var(--secondary); border-radius:20px; padding:.3rem .7rem; font-weight:600; font-size:.75rem; }
.badge-pending{ background:#fdeee0; color:var(--secondary); border-radius:20px; padding:.25rem .6rem; font-size:.72rem; font-weight:700; }
.badge-paid{ background:#e6f6ec; color:#1c8a4c; border-radius:20px; padding:.25rem .6rem; font-size:.72rem; font-weight:700; }

.biz-logo{ width:50px; height:50px;   }
.biz-logo-lg{ width:72px; height:72px;    }

.table-b thead th{ color: var(--text-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.4px; border-bottom:2px solid var(--border); }
.table-b td{ vertical-align:middle; border-bottom:1px solid var(--border); }

/* ---- Auth page ---- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--primary); padding:1rem; }
.auth-card{ width:100%; max-width:420px; background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); padding:2.5rem; }

/* ---- Public site ---- */
.navbar-public{ background:#fff; box-shadow: var(--shadow-sm); }
.hero-section{ background: var(--primary); color:#fff; padding: 6rem 0 5rem; }
.hero-section h1{ font-weight:800; line-height:1.25; }
.section-title{ font-weight:800; color: var(--primary); }
.section-pad{ padding: 5rem 0; }
.feature-card{ border-radius: var(--radius); padding:2rem; background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-sm); height:100%; }
.feature-icon{ width:54px;height:54px;border-radius:14px;background: var(--secondary); color:#fff; display:flex;align-items:center;justify-content:center; font-size:1.3rem; margin-bottom:1rem; }
.pricing-card{ border-radius: var(--radius); background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-sm); padding:2.2rem; height:100%; }
.pricing-card.highlighted{ border: 2px solid var(--secondary); box-shadow: var(--shadow); position:relative; }
.pricing-badge{ background: var(--secondary); color:#fff; font-size:.7rem; font-weight:700; padding:.3rem .8rem; border-radius:20px; position:absolute; top:-14px; left:50%; transform:translateX(-50%); }
.review-card{ border-radius: var(--radius); background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-sm); padding:2rem; margin: 0 .5rem; }
.faq-item{ border-bottom:1px solid var(--border); padding: 1.2rem 0; }
.footer-public{ background: var(--primary); color:#c9d3e0; padding: 3rem 0 1.5rem; }



@media (max-width: 991px){
  .admin-sidebar{ position:fixed; left:0; top:0; z-index:1050; transform:translateX(-100%); transition:transform .2s ease; }
  html[dir="rtl"] .admin-sidebar{ left:auto; right:0; transform:translateX(100%); }
  .admin-sidebar.show{ transform:translateX(0); }
}

/* ===========================================================
   BCOST — Public Homepage Enhancements
   Hero mockup, stats bar, steps, FAQ chevron, contact, footer.
   No gradients — solid brand colors, soft shadows, rounded corners.
   =========================================================== */

.hero-section{ position:relative; overflow:hidden; }
.hero-blob{ position:absolute; border-radius:50%; opacity:.10; background:var(--secondary); pointer-events:none; }
.hero-blob-1{ width:420px; height:420px; top:-140px; inset-inline-end:-120px; }
.hero-blob-2{ width:280px; height:280px; bottom:-100px; inset-inline-start:-80px; background:#ffffff; opacity:.06; }

.hero-badge{ background: rgba(252,133,3,.15); color: var(--secondary); border:1px solid rgba(252,133,3,.35); font-weight:700; font-size:.78rem; }
.hero-btn-outline{ background:transparent; border:1.5px solid rgba(255,255,255,.55); color:#fff; border-radius:8px; padding:.6rem 1.6rem; transition: background .15s ease; }
.hero-btn-outline:hover{ background: rgba(255,255,255,.1); color:#fff; }

.hero-stat{ text-align:start; }
.hero-stat-num{ color:#fff; font-weight:800; font-size:1.4rem; line-height:1; }
.hero-stat-label{ color:#9fb0c9; font-size:.75rem; margin-top:.25rem; }

.hero-mockup{
  background:#fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
  padding: 1.4rem; max-width: 440px; margin-inline-start:auto;
}
.hero-mockup-header{ display:flex; gap:.4rem; margin-bottom:1rem; }
.hero-mockup-header .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.hero-mockup-stats{ display:flex; gap:.75rem; margin-bottom:1rem; }
.hmock-box{ flex:1; background:#f4f6fa; border-radius:12px; padding:.85rem 1rem; }
.hmock-box.accent{ background:#fff4e8; }
.hmock-label{ font-size:.7rem; color:#7a8598; text-transform:uppercase; letter-spacing:.4px; }
.hmock-value{ font-size:1.15rem; font-weight:800; color: var(--primary); margin-top:.15rem; }
.hmock-box.accent .hmock-value{ color: var(--secondary); }
.hero-mockup-rows{ display:flex; flex-direction:column; gap:.6rem; }
.hmock-row{ display:flex; align-items:center; gap:.65rem; border:1px solid var(--border); border-radius:10px; padding:.5rem .7rem; }
.hmock-icon{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.hmock-name{ font-weight:600; font-size:.85rem; flex:1; }
.hmock-badge{ font-weight:700; font-size:.8rem; color: var(--primary); }

.stats-bar{ background:#fff; border-bottom:1px solid var(--border); padding: 2.5rem 0; }
.stats-icon{ font-size:1.6rem; color: var(--secondary); margin-bottom:.5rem; }
.stats-num{ font-size:1.8rem; font-weight:800; color: var(--primary); }
.stats-label{ color:#7a8598; font-size:.8rem; margin-top:.2rem; }

.eyebrow{ display:inline-block; color: var(--secondary); font-weight:800; font-size:.75rem; letter-spacing:2px; }

.feature-card{ transition: transform .18s ease, box-shadow .18s ease; }
.feature-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }

.steps-row{ position:relative; }
.step-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 2rem 1.6rem; text-align:center; height:100%; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.step-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.step-circle{
  width:52px; height:52px; border-radius:50%; background: var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem; margin:0 auto;
}

.pricing-card{ transition: transform .18s ease, box-shadow .18s ease; }
.pricing-card:hover{ transform: translateY(-4px); }
.pricing-card.highlighted:hover{ transform: translateY(-8px); }

.quote-icon{ color: var(--border); font-size:1.6rem; float: inline-end; }
.review-avatar{
  width:38px; height:38px; border-radius:50%; background: var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0;
}

.faq-item{ transition: background .15s ease; border-radius:10px; }
.faq-item:hover{ background:#f8f9fb; }
.faq-chevron{ transition: transform .25s ease; color: var(--secondary); }

.contact-info-card{
  background: var(--primary); color:#fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:1.5rem; justify-content:center;
}
.contact-info-item{ display:flex; align-items:center; gap:1rem; color:#fff; }
.contact-info-item .text-muted{ color:#b8c4d9 !important; }
.contact-info-icon{
  width:44px; height:44px; border-radius:12px; background: rgba(252,133,3,.18); color: var(--secondary);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}

.footer-social{
  width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08); color:#fff;
  display:flex; align-items:center; justify-content:center; transition: background .15s ease;
}
.footer-social:hover{ background: var(--secondary); color:#fff; }
.footer-links li{ margin-bottom:.6rem; color:#b8c4d9; font-size:.9rem; }
.footer-links a{ color:#b8c4d9; }
.footer-links a:hover{ color:#fff; }

@media (max-width: 991px){
  .hero-mockup{ margin-inline:auto; margin-top:2rem; }
}

/* ===========================================================
   BCOST — Admin Panel Design Enhancement
   Sidebar accents, stat cards, business cards, icon inputs,
   settings plan editor, login page. No gradients, soft shadows.
   =========================================================== */

/* ---- Sidebar active indicator ---- */
.admin-nav a{ position:relative; }
.admin-nav a.active::before{
  content:''; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%);
  width:4px; height:60%; background:#fff; border-radius:0 4px 4px 0;
}
html[dir="rtl"] .admin-nav a.active::before{ border-radius:4px 0 0 4px; }
.admin-nav a{ transition: background .15s ease, padding-inline-start .15s ease; }
.admin-nav a:hover{ padding-inline-start: 1.15rem; }

.admin-topbar{ box-shadow: 0 2px 10px rgba(2,30,71,.04); }

/* ---- Enhanced stat cards (dashboard + business view) ---- */
.stat-card-v2{
  background:#fff; border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent, var(--primary));
  transition: transform .18s ease, box-shadow .18s ease;
  display:flex; align-items:center; gap:1rem; height:100%;
}
.stat-card-v2:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.stat-card-v2 .stat-icon-v2{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff;
  background: var(--accent, var(--primary));
}
.stat-card-v2 .stat-v2-label{ color:#7a8598; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.stat-card-v2 .stat-v2-value{ font-size:1.55rem; font-weight:800; color: var(--primary); line-height:1.15; margin-top:.15rem; }
.stat-card-v2 .stat-v2-value small{ font-size:.9rem; font-weight:700; color:#7a8598; }

/* ---- Chart panel ---- */
.chart-panel{
  background:#fff; border-radius: var(--radius); border:1px solid var(--border);
  box-shadow: var(--shadow-sm); padding: 1.4rem; height:100%;
}
.chart-panel .chart-panel-title{ font-weight:700; color: var(--primary); display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.chart-panel .chart-panel-title i{ color: var(--secondary); }

/* ---- Business cards grid ---- */
.biz-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.biz-card{
  background:#fff; border-radius: var(--radius); border:1px solid var(--border);
  box-shadow: var(--shadow-sm); overflow:hidden; transition: transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.biz-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.biz-card-top{
  padding: 1.25rem 1.25rem .9rem; display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem;
  border-bottom: 1px solid var(--border);
}
.biz-card-logo-wrap{ display:flex; align-items:center; gap:.85rem; min-width:0; }
.biz-card-logo{ width:52px; height:52px;  flex-shrink:0;  }
.biz-card-name-en{ font-weight:700; color: var(--primary); font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.biz-card-name-ar{ color:#7a8598; font-size:.82rem; direction:rtl; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.biz-card-body{ padding: 1rem 1.25rem; flex:1; display:flex; flex-direction:column; gap:.7rem; }
.biz-card-amount-row{ display:flex; align-items:baseline; justify-content:space-between; }
.biz-card-amount{ font-size:1.5rem; font-weight:800; color: var(--primary); }
.biz-card-amount small{ font-size:.85rem; color:#7a8598; font-weight:600; }
.biz-card-cycle{
  font-size:.72rem; font-weight:700; color: var(--secondary); background: rgba(252,133,3,.12);
  padding:.25rem .65rem; border-radius:20px; text-transform:capitalize;
}
.biz-card-meta{ display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:#7a8598; }
.biz-card-meta i{ color: var(--secondary); margin-inline-end:.3rem; }
.biz-card-actions{
  padding: .85rem 1.25rem; border-top:1px solid var(--border); display:flex; gap:.4rem;
  background:#fafbfd;
}
.biz-card-actions .btn{ flex:1; }
.biz-card-status-strip{ height:4px; width:100%; }
.biz-card-status-strip.active{ background:#1c8a4c; }
.biz-card-status-strip.paused{ background: var(--secondary); }

/* ---- View toggle (list/grid) & filter pills ---- */
.view-toggle .btn{ padding:.5rem .8rem; }
.filter-pills{ display:flex; gap:.4rem; flex-wrap:wrap; }
.filter-pills .btn{ border-radius:20px; padding:.4rem 1.1rem; font-size:.85rem; }

/* ---- Icon-prefixed form inputs ---- */
.input-icon-group{ position:relative; }
.input-icon-group i{
  position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%);
  color:#9aa4b2; font-size:.9rem; pointer-events:none;
}
.input-icon-group .form-control,
.input-icon-group .form-select{ padding-inline-start: 2.4rem; }
html[dir="rtl"] .input-icon-group i{ inset-inline-start:auto; inset-inline-end:14px; }

.form-control, .form-select{
  border-radius: 10px; border:1.5px solid var(--border); padding: .62rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus{
  border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(252,133,3,.15);
}
.form-label{ font-weight:600; font-size:.86rem; color:#3a4557; margin-bottom:.4rem; }

.form-section-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm);
}
.form-section-title{
  display:flex; align-items:center; gap:.6rem; font-weight:700; color: var(--primary);
  margin-bottom: 1.1rem; font-size:1rem;
}
.form-section-icon{
  width:34px; height:34px; border-radius:10px; background: rgba(252,133,3,.12); color: var(--secondary);
  display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0;
}

/* Custom file upload button */
.file-upload-zone{
  border:2px dashed var(--border); border-radius: 14px; padding: 1.5rem; text-align:center;
  transition: border-color .15s ease, background .15s ease; cursor:pointer; background:#fafbfd;
}
.file-upload-zone:hover{ border-color: var(--secondary); background: #fff8f0; }
.file-upload-zone input[type="file"]{ display:none; }

/* ---- Settings pricing plan editor cards ---- */
.plan-editor-card{
  border:1.5px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem;
  background:#fafbfd; position:relative; transition: border-color .15s ease;
}
.plan-editor-card:hover{ border-color: rgba(252,133,3,.4); }
.plan-editor-badge{
  position:absolute; top:-11px; inset-inline-start:1rem; background: var(--primary); color:#fff;
  font-size:.7rem; font-weight:700; padding:.2rem .7rem; border-radius:20px;
}
.color-swatch-input{ display:flex; align-items:center; gap:.6rem; border:1.5px solid var(--border); border-radius:10px; padding:.4rem; }
.color-swatch-input input[type="color"]{ width:42px; height:42px; border:none; border-radius:8px; padding:0; cursor:pointer; }

/* ---- Login page enhancement ---- */
.auth-wrap{ position:relative; overflow:hidden; }
.auth-shape{ position:absolute; border-radius:50%; opacity:.08; background:#fff; pointer-events:none; }
.auth-shape-1{ width:320px; height:320px; top:-120px; inset-inline-start:-100px; }
.auth-shape-2{ width:220px; height:220px; bottom:-80px; inset-inline-end:-60px; background: var(--secondary); opacity:.15; }
.auth-card{ position:relative; z-index:1; }
.auth-logo-ring{
  width:76px; height:76px; border-radius:20px; background:#fff; display:flex; align-items:center; justify-content:center;
  margin: 0 auto; box-shadow: 0 8px 24px rgba(2,30,71,.15);
}

/* ---- Section fade-in for admin content ---- */
.fade-in-up{ animation: fadeInUp .45s ease both; }
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

.btn:focus-visible {
  outline: none !important;
  border: none !important;
}
.faq-toggle {
  border-color: none !important;
}



/* ===========================================================
   BCOST — Contact Messages Inbox
   =========================================================== */

   .message-card{
    background:#fff; border:1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); overflow:hidden; border-inline-start: 4px solid var(--border);
    transition: box-shadow .18s ease, transform .18s ease;
  }
  .message-card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); }
  .message-card.unread{ border-inline-start-color: var(--secondary); background: #fffaf3; }
  
  .message-card-header{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    padding: 1.1rem 1.25rem .75rem;
  }
  .message-avatar{
    width:44px; height:44px; border-radius:50%; background: var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; flex-shrink:0;
  }
  .message-new-badge{
    background: var(--secondary); color:#fff; font-size:.65rem; font-weight:800; letter-spacing:.4px;
    padding:.15rem .55rem; border-radius:20px; text-transform:uppercase;
  }
  .message-card-body{
    padding: .25rem 1.25rem 1rem; color:#3a4557; font-size:.92rem; line-height:1.6; white-space:pre-wrap;
  }
  .message-card-actions{
    display:flex; align-items:center; gap:.5rem; padding: .85rem 1.25rem; border-top:1px solid var(--border);
    background:#fafbfd;
  }
  
  .nav-badge{
    background: var(--secondary); color:#fff; font-size:.68rem; font-weight:800;
    min-width:20px; height:20px; border-radius:20px; display:inline-flex; align-items:center; justify-content:center;
    padding:0 .35rem;
  }



  /* ===========================================================
   BCOST — Navbar Toggle (Font Awesome hamburger)
   =========================================================== */

.navbar-toggler-fa{
  width:42px; height:42px; border-radius:12px; border:1.5px solid var(--border);
  background:#fff; display:flex; align-items:center; justify-content:center;
  padding:0; box-shadow: none; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.navbar-toggler-fa:focus{ box-shadow: 0 0 0 3px rgba(252,133,3,.18); }
.navbar-toggler-fa i{ color: var(--primary); font-size:1.05rem; transition: transform .2s ease; }
.navbar-toggler-fa:hover{ border-color: var(--secondary); background: #fff8f0; }
.navbar-toggler-fa:hover i{ color: var(--secondary); }
.navbar-toggler-fa[aria-expanded="true"]{ background: var(--primary); border-color: var(--primary); }
.navbar-toggler-fa[aria-expanded="true"] i{ color:#fff; transform: rotate(90deg); }
.navbar-toggler-fa[aria-expanded="true"] i::before{ content:"\f00d"; } /* fa-xmark */



/* ===========================================================
   BCOST — Rounded SweetAlert2 popups & buttons
   =========================================================== */

   .bcost-swal-popup{
    border-radius: 20px !important;
  }
  .bcost-swal-btn{
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: .6rem 1.6rem !important;
  }
  .bcost-swal-cancel{
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: .6rem 1.6rem !important;
  }