/* ============================================================
   JOMETECH HOSTING — UNIFIED CSS
   Used on both standalone PHP pages AND WHMCS pages
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
body { margin: 0; font-family: 'DM Sans', sans-serif; color: #1c2136; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: 'Sora', sans-serif; }

/* ── HIDE WHMCS DEFAULT TOP BAR + DARK NAVBAR (we use our own) ── */
header.header-bar,
nav.navbar.navbar-main,
#header,
.top-bar,
.navbar-header-bg,
nav#nav,
nav#main-menu,
.main-navbar { display: none !important; }

/* ── PROMO BAR ── */
.jt-promo-bar { background: #0000CC !important; color: #fff !important; padding: 10px 24px !important; text-align: center !important; font-size: .85rem !important; font-weight: 500 !important; }
.jt-promo-bar a { color: #ffd0d0 !important; font-weight: 700 !important; text-decoration: none !important; margin-left: 14px !important; white-space: nowrap !important; }
.jt-promo-bar a:hover { color: #fff !important; }
.jt-promo-bar strong { font-weight: 700 !important; }

/* ── HEADER ── */
.jt-page-header { background: #fff !important; border-bottom: 1px solid #e8eaf2 !important; box-shadow: 0 2px 12px rgba(0,0,204,.05) !important; position: sticky !important; top: 0 !important; z-index: 1000 !important; }
.jt-page-header-inner { max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; display: flex !important; align-items: center !important; gap: 32px !important; min-height: 72px !important; }
.jt-page-logo { display: flex !important; align-items: center !important; flex-shrink: 0 !important; text-decoration: none !important; }
.jt-page-logo img { height: 44px !important; width: auto !important; }
.jt-page-nav { flex: 1 !important; }
.jt-page-nav-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 4px !important; }
.jt-page-nav-list > li { position: relative !important; }
.jt-page-nav-list > li > a { display: flex !important; align-items: center !important; gap: 5px !important; padding: 14px 14px !important; color: #3a4260 !important; font-family: 'DM Sans', sans-serif !important; font-size: .9rem !important; font-weight: 500 !important; text-decoration: none !important; transition: color .15s !important; white-space: nowrap !important; }
.jt-page-nav-list > li > a:hover, .jt-page-nav-list > li.jt-pg-has-drop:hover > a { color: #0000CC !important; }
.jt-page-nav-list > li > a .fa-angle-down { font-size: .78rem !important; opacity: .6 !important; transition: transform .2s !important; }
.jt-page-nav-list > li.jt-pg-has-drop:hover > a .fa-angle-down { transform: rotate(180deg) !important; }
.jt-pg-drop { position: absolute !important; top: 100% !important; left: 0 !important; background: #fff !important; border: 1.5px solid #e8eaf2 !important; border-radius: 12px !important; box-shadow: 0 12px 40px rgba(0,0,0,.14) !important; padding: 6px !important; min-width: 240px !important; list-style: none !important; margin: 0 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-8px) !important; transition: all .18s !important; z-index: 1001 !important; }
.jt-pg-has-drop:hover .jt-pg-drop { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
.jt-pg-drop li a { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 14px !important; border-radius: 8px !important; color: #3a4260 !important; font-size: .875rem !important; font-weight: 500 !important; text-decoration: none !important; transition: background .15s, color .15s !important; }
.jt-pg-drop li a:hover { background: #e6e6ff !important; color: #0000CC !important; }
.jt-pg-drop li a .fa, .jt-pg-drop li a .fab { color: #0000CC !important; font-size: .9rem !important; width: 16px !important; text-align: center !important; }
.jt-page-cta { display: flex !important; align-items: center !important; gap: 12px !important; flex-shrink: 0 !important; }
.jt-page-login { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: #3a4260 !important; font-size: .88rem !important; font-weight: 500 !important; text-decoration: none !important; padding: 8px 12px !important; transition: color .15s !important; }
.jt-page-login:hover { color: #0000CC !important; }
.jt-page-cart { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: #FE2D2B !important; color: #fff !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; font-size: .85rem !important; padding: 10px 20px !important; border-radius: 9px !important; text-decoration: none !important; transition: background .18s !important; white-space: nowrap !important; }
.jt-page-cart:hover { background: #c0201e !important; color: #fff !important; }

/* ── HERO ── */
.jt-hero { background: linear-gradient(135deg, #040d1f 0%, #0a0055 55%, #16003a 100%); padding: 80px 0 90px; position: relative; overflow: hidden; }
.jt-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 60%, rgba(0,0,204,.3) 0%, transparent 50%), radial-gradient(circle at 85% 20%, rgba(254,45,43,.15) 0%, transparent 45%); pointer-events: none; }
.jt-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
.jt-hero .jt-container { position: relative; z-index: 2; }
.jt-hero-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 50px; padding: 7px 16px; color: rgba(255,255,255,.85); font-size: .82rem; font-weight: 600; margin-bottom: 24px; }
.jt-hero-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.jt-hero h1 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.4rem); color: #fff; letter-spacing: -.04em; line-height: 1.1; margin: 0 0 20px; }
.jt-hero h1 span { color: #FE2D2B; }
.jt-hero p { color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.75; margin-bottom: 32px; max-width: 580px; }

/* ── SECTIONS ── */
.jt-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.jt-section { padding: 80px 0; }
.jt-section-grey { background: #f7f9ff; }
.jt-section-header { text-align: center; margin-bottom: 56px; }
.jt-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #0000CC; margin-bottom: 12px; }
.jt-section-header h2 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); color: #07102a; letter-spacing: -.03em; margin: 0 0 14px; line-height: 1.2; }
.jt-section-header p { color: #5a6278; font-size: .975rem; max-width: 600px; margin: 0 auto; line-height: 1.75; }

/* ── FEATURES ── */
.jt-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
@media(max-width: 991px) { .jt-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 575px) { .jt-feat-grid { grid-template-columns: 1fr; } }
.jt-feat-card { background: #fff; border: 2px solid #eef0f8; border-radius: 18px; padding: 32px 28px; transition: border-color .22s, transform .22s, box-shadow .22s; }
.jt-feat-card:hover { border-color: #0000CC; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,204,.1); }
.jt-feat-icon { width: 54px; height: 54px; background: linear-gradient(135deg,#e6e6ff,#d0d0ff); border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.jt-feat-icon .fa { font-size: 1.4rem; color: #0000CC; }
.jt-feat-card h4 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; color: #07102a; margin: 0 0 10px; }
.jt-feat-card p { font-size: .875rem; color: #5a6278; line-height: 1.65; margin: 0 0 14px; }

/* ── PLAN CARDS ── */
.jt-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media(max-width: 991px) { .jt-plans { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 575px) { .jt-plans { grid-template-columns: 1fr; } }
.jt-plans-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media(max-width: 991px) { .jt-plans-3 { grid-template-columns: 1fr; } }
.jt-plan { background: #fff; border: 2px solid #eef0f8; border-radius: 20px; padding: 30px 22px; position: relative; transition: border-color .22s, transform .22s, box-shadow .22s; display: flex; flex-direction: column; }
.jt-plan:hover { border-color: #0000CC; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,204,.1); }
.jt-plan.popular { border-color: #0000CC; box-shadow: 0 8px 32px rgba(0,0,204,.18); transform: scale(1.03); }
.jt-plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #FE2D2B; color: #fff; font-family: 'Sora', sans-serif; font-size: .65rem; font-weight: 800; padding: 4px 14px; border-radius: 50px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.jt-plan-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: #0000CC; margin-bottom: 10px; }
.jt-plan-price { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2.6rem; color: #07102a; letter-spacing: -.04em; line-height: 1; margin: 4px 0 8px; display: flex; align-items: baseline; gap: 2px; }
.jt-plan-price sup { font-family: 'Sora', sans-serif; font-size: 1.2rem; font-weight: 700; color: #07102a; vertical-align: top; position: relative; top: 8px; margin-right: 1px; }
.jt-plan-price span { font-size: .85rem; font-weight: 500; color: #8f9aaa; align-self: flex-end; padding-bottom: 8px; }
.jt-plan-price .hp-price, .jt-plan-price .wh-price, .jt-plan-price .em-price { font-size: 2.6rem; font-weight: 800; color: #07102a; padding: 0; }
.jt-plan-billed { font-size: .8rem; color: #8f9aaa; margin: 0 0 12px; min-height: 18px; }
.jt-plan-desc { font-size: .82rem; color: #5a6278; margin-bottom: 16px; }
.jt-plan-features { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.jt-plan-features li { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; border-bottom: 1px solid #f4f6fb; font-size: .84rem; color: #3a4260; line-height: 1.45; }
.jt-plan-features li:last-child { border-bottom: none; }
.jt-plan-features li .fa { color: #0000CC; font-size: .85rem; flex-shrink: 0; margin-top: 2px; }
.jt-order-btn { display: block; text-align: center; padding: 12px; border-radius: 10px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: .88rem; text-decoration: none; transition: background .18s, transform .15s; }
.jt-order-btn.primary { background: #0000CC; color: #fff; }
.jt-order-btn.primary:hover { background: #0000a3; transform: translateY(-1px); }
.jt-order-btn.outline { background: transparent; color: #0000CC; border: 2px solid #0000CC; }
.jt-order-btn.outline:hover { background: #0000CC; color: #fff; }

/* ── BILLING TOGGLE ── */
.jt-billing-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.jt-toggle-switch { position: relative; display: inline-block; width: 52px; height: 28px; cursor: pointer; margin: 0; }
.jt-toggle-switch input { opacity: 0; width: 0; height: 0; }
.jt-toggle-slider { position: absolute; inset: 0; background: #e0e4ef; border-radius: 28px; transition: background .25s; }
.jt-toggle-slider::before { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .25s; }
.jt-toggle-switch input:checked + .jt-toggle-slider { background: #0000CC; }
.jt-toggle-switch input:checked + .jt-toggle-slider::before { transform: translateX(24px); }
.jt-toggle-label { font-family: 'DM Sans', sans-serif; font-size: .9rem; font-weight: 500; color: #8f9aaa; transition: color .2s; }
.jt-toggle-label.active { color: #07102a; font-weight: 700; }
.jt-toggle-save { display: inline-block; background: #FE2D2B; color: #fff; font-size: .65rem; font-weight: 800; padding: 2px 8px; border-radius: 50px; text-transform: uppercase; margin-left: 6px; vertical-align: middle; }

/* ── CTA ── */
.jt-cta { background: linear-gradient(135deg, #0000CC 0%, #0000a3 100%); padding: 64px 0; text-align: center; }
.jt-cta h2 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 2.2rem); color: #fff; margin: 0 0 12px; }
.jt-cta p { color: rgba(255,255,255,.78); font-size: .95rem; margin: 0 auto 28px; max-width: 560px; line-height: 1.7; }
.jt-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.jt-btn-white { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #0000CC !important; font-family: 'Sora', sans-serif; font-weight: 700; font-size: .9rem; padding: 14px 28px; border-radius: 10px; text-decoration: none !important; border: 2px solid #fff; transition: transform .15s; }
.jt-btn-white:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.jt-btn-outline-white { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff !important; font-family: 'Sora', sans-serif; font-weight: 700; font-size: .9rem; padding: 14px 28px; border-radius: 10px; text-decoration: none !important; border: 2px solid rgba(255,255,255,.4); transition: background .15s; }
.jt-btn-outline-white:hover { background: rgba(255,255,255,.1); }

/* ─────────────────────────────────────────────────────
   WHMCS BUTTON OVERRIDES — make all WHMCS buttons match brand
   ───────────────────────────────────────────────────── */
.btn-success,
.btn.btn-success,
button.btn-success,
a.btn-success,
input[type="submit"].btn-success {
  background-color: #0000CC !important;
  border-color: #0000CC !important;
  color: #fff !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  transition: background .18s !important;
}
.btn-success:hover, .btn.btn-success:hover, button.btn-success:hover, a.btn-success:hover {
  background-color: #0000a3 !important;
  border-color: #0000a3 !important;
}

.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary {
  background-color: #0000CC !important;
  border-color: #0000CC !important;
  color: #fff !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: background .18s !important;
}
.btn-primary:hover { background-color: #0000a3 !important; border-color: #0000a3 !important; }

.btn-danger { background-color: #FE2D2B !important; border-color: #FE2D2B !important; color: #fff !important; border-radius: 8px !important; }
.btn-danger:hover { background-color: #c0201e !important; border-color: #c0201e !important; }

/* WHMCS panel/page-header tweaks */
.page-header { border-bottom-color: #e8eaf2 !important; padding-bottom: 16px !important; margin-bottom: 24px !important; }
.page-header h1, .page-header h2 { font-family: 'Sora', sans-serif !important; color: #07102a !important; font-weight: 700 !important; }

/* WHMCS sidebar (My Account) */
.list-group .list-group-item { border-color: #e8eaf2 !important; }
.list-group .list-group-item:hover { background: #f7f9ff !important; color: #0000CC !important; }
.list-group .list-group-item.active { background: #0000CC !important; border-color: #0000CC !important; color: #fff !important; }
.list-group-item h3, .list-group-item .h3 { font-family: 'Sora', sans-serif !important; }

/* Active status badges */
.label-success, .badge-success {
  background-color: #d4f7e0 !important;
  color: #1d8d4a !important;
  border-radius: 50px !important;
  padding: 6px 16px !important;
  font-weight: 600 !important;
}
.label-danger, .badge-danger {
  background-color: #fde4e3 !important;
  color: #c0201e !important;
  border-radius: 50px !important;
  padding: 6px 16px !important;
  font-weight: 600 !important;
}

/* WHMCS dark navbar/sub-header on logged-in pages */
header.header-bar, .header-lined, nav.navbar {
  display: none !important;
}

/* ─────────────────────────────────────────────────────
   FOOTER — UNIFIED FOR STANDALONE + WHMCS PAGES
   ───────────────────────────────────────────────────── */
section.jt-footer {
  background: #07102a !important;
  color: rgba(255,255,255,.65) !important;
  padding: 64px 0 0 !important;
  margin: 60px calc(50% - 50vw) 0 !important;
  width: 100vw !important;
  font-family: 'DM Sans', sans-serif !important;
}
section.jt-footer .jt-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}
section.jt-footer .jt-footer-grid {
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1fr 1fr !important;
  gap: 48px !important;
  padding-bottom: 48px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
@media(max-width: 991px) { section.jt-footer .jt-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } }
@media(max-width: 575px) { section.jt-footer .jt-footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }
section.jt-footer .jt-footer-brand img { height: 36px !important; width: auto !important; margin-bottom: 12px !important; display: block !important; }
section.jt-footer .jt-footer-brand-name { font-family: 'Sora', sans-serif !important; font-weight: 800 !important; font-size: 1.2rem !important; color: #fff !important; margin-bottom: 14px !important; }
section.jt-footer .jt-footer-brand-name span { color: #FE2D2B !important; }
section.jt-footer .jt-footer-brand p { font-size: .875rem !important; line-height: 1.75 !important; color: rgba(255,255,255,.5) !important; margin: 0 0 20px !important; }
section.jt-footer .jt-footer-social { display: flex !important; gap: 10px !important; }
section.jt-footer .jt-footer-social a { width: 34px !important; height: 34px !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: rgba(255,255,255,.6) !important; font-size: .85rem !important; text-decoration: none !important; transition: background .18s, color .18s !important; }
section.jt-footer .jt-footer-social a:hover { background: #0000CC !important; border-color: #0000CC !important; color: #fff !important; }
section.jt-footer .jt-footer-col h4 { font-family: 'Sora', sans-serif !important; font-weight: 700 !important; font-size: .72rem !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: #fff !important; margin: 0 0 18px !important; padding: 0 !important; }
section.jt-footer .jt-footer-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
section.jt-footer .jt-footer-col ul li { margin-bottom: 10px !important; padding: 0 !important; font-size: .875rem !important; color: rgba(255,255,255,.5) !important; line-height: 1.5 !important; }
section.jt-footer .jt-footer-col ul li a, section.jt-footer a { color: rgba(255,255,255,.5) !important; font-size: .875rem !important; text-decoration: none !important; transition: color .15s !important; font-family: 'DM Sans', sans-serif !important; }
section.jt-footer .jt-footer-col ul li a:hover, section.jt-footer a:hover { color: #fff !important; }
section.jt-footer .jt-footer-payments { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; padding: 20px 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
section.jt-footer .jt-footer-pay-label { font-size: .75rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: rgba(255,255,255,.35) !important; margin-right: 6px !important; }
section.jt-footer .jt-pay-badge { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(255,255,255,.65) !important; font-size: .72rem !important; font-weight: 700 !important; padding: 5px 14px !important; border-radius: 5px !important; letter-spacing: .04em !important; display: inline-block !important; }
section.jt-footer .jt-pay-eco { color: #a8ff94 !important; border-color: rgba(168,255,148,.3) !important; }
section.jt-footer .jt-footer-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 20px 0 24px !important; flex-wrap: wrap !important; gap: 12px !important; }
section.jt-footer .jt-footer-bottom p { font-size: .82rem !important; color: rgba(255,255,255,.3) !important; margin: 0 !important; }
section.jt-footer .jt-footer-legal { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
section.jt-footer .jt-footer-legal a { font-size: .82rem !important; color: rgba(255,255,255,.4) !important; }
section.jt-footer .jt-footer-sep { color: rgba(255,255,255,.15) !important; }

.jt-whatsapp-float { position: fixed !important; bottom: 28px !important; right: 28px !important; z-index: 9999 !important; width: 56px !important; height: 56px !important; border-radius: 50% !important; background: #25d366 !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.6rem !important; text-decoration: none !important; box-shadow: 0 6px 24px rgba(37,211,102,.5) !important; transition: transform .2s !important; }
.jt-whatsapp-float:hover { transform: scale(1.1) !important; color: #fff !important; }

body, html { overflow-x: hidden !important; }

/* Prose pages (legal) */
.jt-prose { max-width: 760px; margin: 0 auto; padding: 60px 20px; }
.jt-prose h1 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2.2rem; color: #07102a; letter-spacing: -.03em; margin: 0 0 8px; }
.jt-prose .jt-prose-meta { color: #8f9aaa; font-size: .85rem; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid #eef0f8; }
.jt-prose h2 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.3rem; color: #07102a; margin: 32px 0 12px; letter-spacing: -.02em; }
.jt-prose h3 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.05rem; color: #07102a; margin: 24px 0 10px; }
.jt-prose p, .jt-prose li { font-size: .95rem; color: #3a4260; line-height: 1.75; margin: 0 0 14px; }
.jt-prose ul, .jt-prose ol { padding-left: 22px; margin-bottom: 16px; }
.jt-prose strong { color: #07102a; font-weight: 700; }
.jt-prose a { color: #0000CC; }
/* ============================================================
   JOMETECH HEADER — FULLY RESPONSIVE
   Append to bottom of jt_pages.css
   Replaces older mobile header rules
   ============================================================ */

/* Burger button (hidden on desktop) */
.jt-page-burger {
  display: none;
  background: transparent;
  border: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 10px;
  margin-left: auto;
  z-index: 1002;
  position: relative;
}
.jt-page-burger span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: #07102a;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}

/* Burger animates to X when open */
body.jt-menu-open .jt-page-burger span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
body.jt-menu-open .jt-page-burger span:nth-child(2) {
  opacity: 0;
}
body.jt-menu-open .jt-page-burger span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Body lock when menu open */
body.jt-menu-open {
  overflow: hidden !important;
}

/* === TABLET / MOBILE (≤991px) === */
@media (max-width: 991px) {

  /* Header sizing */
  .jt-page-header { position: sticky; top: 0; z-index: 1001; }
  .jt-page-header-inner {
    padding: 0 16px !important;
    min-height: 60px !important;
    gap: 12px !important;
    position: relative;
  }
  .jt-page-logo img { height: 34px !important; }

  /* Show burger */
  .jt-page-burger { display: flex !important; }

  /* Slide-in nav from right side */
  .jt-page-nav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    bottom: 0 !important;
    width: 86% !important;
    max-width: 360px !important;
    background: #fff !important;
    z-index: 1001 !important;
    box-shadow: -10px 0 40px rgba(0,0,0,.15) !important;
    overflow-y: auto !important;
    transition: right .3s cubic-bezier(.4,0,.2,1) !important;
    padding: 80px 0 30px !important;
    margin: 0 !important;
    border: none !important;
  }
  body.jt-menu-open .jt-page-nav { right: 0 !important; }

  /* Backdrop overlay */
  body.jt-menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(7,16,42,.6);
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: jtBackdropIn .25s ease;
  }
  @keyframes jtBackdropIn { from{opacity:0} to{opacity:1} }

  /* Nav list stacks */
  .jt-page-nav-list {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  .jt-page-nav-list > li {
    width: 100%;
    border-bottom: 1px solid #f1f3f9;
  }
  .jt-page-nav-list > li:last-child { border-bottom: none; }

  /* Top-level nav links */
  .jt-page-nav-list > li > a {
    padding: 16px 24px !important;
    font-size: .98rem !important;
    color: #07102a !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    width: 100%;
    justify-content: space-between !important;
  }
  .jt-page-nav-list > li > a:hover { background: #f7f9ff !important; color: #0000CC !important; }

  /* Dropdowns: visible inline, click to expand */
  .jt-pg-drop {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: #f7f9ff !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    min-width: 100% !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .jt-pg-has-drop.open > .jt-pg-drop {
    max-height: 500px;
  }
  .jt-pg-has-drop:hover > .jt-pg-drop { max-height: 0; } /* disable hover on touch */
  .jt-pg-has-drop.open:hover > .jt-pg-drop { max-height: 500px; }

  .jt-pg-drop li a {
    padding: 12px 32px 12px 48px !important;
    font-size: .9rem !important;
    border-radius: 0 !important;
  }

  /* Rotate caret when expanded */
  .jt-pg-has-drop.open > a .fa-angle-down {
    transform: rotate(180deg) !important;
  }

  /* CTA buttons stack at bottom of menu */
  .jt-page-cta {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 20px 24px !important;
    border-top: 1px solid #f1f3f9 !important;
    margin-top: 12px !important;
  }
  .jt-page-cta > * { width: 100% !important; justify-content: center !important; }
  .jt-page-login {
    border: 1.5px solid #e8eaf2 !important;
    border-radius: 9px !important;
    padding: 12px 16px !important;
  }

  /* Promo bar tighter */
  .jt-promo-bar {
    font-size: .76rem !important;
    padding: 8px 14px !important;
    line-height: 1.4 !important;
  }
  .jt-promo-bar strong { font-weight: 700; }
  .jt-promo-cta {
    display: inline-block !important;
    margin-left: 6px !important;
  }
}

/* === SMALL MOBILE (≤575px) === */
@media (max-width: 575px) {
  .jt-page-header-inner { min-height: 56px !important; padding: 0 12px !important; }
  .jt-page-logo img { height: 30px !important; }

  /* Promo bar shorter text on tiny screens */
  .jt-promo-bar { font-size: .72rem !important; padding: 7px 10px !important; }

  .jt-page-nav { width: 92% !important; }
}

/* === DESKTOP — keep desktop nav clean === */
@media (min-width: 992px) {
  .jt-page-burger { display: none !important; }
  .jt-page-nav {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    overflow: visible !important;
  }
  body.jt-menu-open { overflow: auto !important; }
  body.jt-menu-open::before { display: none !important; }
}

/* Hide mobile CTA wrapper on desktop, show desktop CTA */
@media (min-width: 992px) {
  .jt-mobile-cta-wrap { display: none !important; }
  .jt-cta-desktop { display: flex !important; }
}
@media (max-width: 991px) {
  .jt-cta-desktop { display: none !important; }
  .jt-mobile-cta-wrap { display: block !important; padding: 0 !important; border-bottom: none !important; }
  .jt-mobile-cta-wrap .jt-page-cta { display: flex !important; }
}
/* ============================================================
   JOMETECH — WHMCS CART FORM FIX
   Fixes: input icons overlapping placeholder text
          font inconsistency
          field spacing/alignment
   Append to bottom of jt_pages.css
   OR upload as separate file and link in header.tpl
   ============================================================ */

/* === FORM FIELDS WITH ICONS — fix overlap === */
/* WHMCS uses .field-icon class for the icon and input has padding-left for space */

.signup-container .form-control,
#containerNewUserSignup .form-control,
.checkout-container .form-control,
form .form-group .form-control {
  padding-left: 44px !important;   /* room for icon */
  height: 48px !important;
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  color: #07102a !important;
  border: 1.5px solid #e8eaf2 !important;
  border-radius: 10px !important;
  background: #fff !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
}

.signup-container .form-control:focus,
#containerNewUserSignup .form-control:focus,
.checkout-container .form-control:focus,
form .form-group .form-control:focus {
  border-color: #0000CC !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 204, .08) !important;
  outline: none !important;
}

/* Icon positioning fix */
.field-icon,
.form-group .field-icon,
.input-group .field-icon,
i.field-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #8f9aaa !important;
  font-size: 0.95rem !important;
  z-index: 2 !important;
  pointer-events: none !important;
  width: auto !important;
  height: auto !important;
}

/* Ensure parent has position:relative so icons anchor properly */
.form-group,
.signup-container .form-group,
#containerNewUserSignup .form-group {
  position: relative !important;
  margin-bottom: 18px !important;
}

/* Placeholder color */
.signup-container .form-control::placeholder,
#containerNewUserSignup .form-control::placeholder,
form .form-group .form-control::placeholder {
  color: #8f9aaa !important;
  opacity: 1 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* === SELECT DROPDOWNS (like country picker) === */
.signup-container select.form-control,
#containerNewUserSignup select.form-control,
form select.form-control {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4l3 4 3-4' fill='none' stroke='%238f9aaa' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px !important;
  padding-right: 40px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* === PHONE INPUT GROUP (with country flag) === */
.iti, .intl-tel-input {
  width: 100% !important;
}
.iti__flag-container {
  z-index: 3 !important;
}
.iti input[type="tel"], .intl-tel-input input[type="tel"] {
  padding-left: 90px !important;
}

/* === LABELS === */
.signup-container label,
#containerNewUserSignup label,
form .form-group label {
  font-family: 'Sora', 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  color: #3a4260 !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* === SECTION HEADERS — "Sign Up", "Personal Information", "Billing Address" === */
.signup-container h2,
#containerNewUserSignup h2,
.checkout-container h2,
.section-title,
.signup-section-title,
.divider-text-center {
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  color: #07102a !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  margin: 28px 0 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #eef0f8 !important;
}

/* Style the page intro text */
.checkout-container > p,
.checkout-page-intro {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1.05rem !important;
  color: #07102a !important;
  text-align: center !important;
  margin: 24px 0 !important;
  padding: 16px !important;
}

/* === BUTTONS === */
.btn-primary,
.signup-container .btn-primary,
button[type="submit"].btn-primary {
  background: #0000CC !important;
  border-color: #0000CC !important;
  color: #fff !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  transition: transform .15s, box-shadow .15s !important;
}
.btn-primary:hover {
  background: #000099 !important;
  border-color: #000099 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 204, .25) !important;
}

/* "Already Registered?" button — secondary style */
.btn-default,
.btn-secondary,
a.btn-default[href*="login"] {
  background: #e6e6ff !important;
  border-color: #e6e6ff !important;
  color: #0000CC !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
}
.btn-default:hover {
  background: #d4d4ff !important;
  color: #0000CC !important;
}

/* === GOOGLE SIGN-IN BUTTON === */
.btn-google,
.google-signin,
a[href*="google"][class*="btn"] {
  background: #fff !important;
  border: 1.5px solid #e8eaf2 !important;
  color: #07102a !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.btn-google:hover {
  border-color: #0000CC !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06) !important;
}

/* === SIDEBAR CATEGORIES + ACTIONS PANELS === */
.sidebar-container .panel,
.cart-sidebar .panel,
.panel-default {
  border: 1.5px solid #eef0f8 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .03) !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
}

.panel-heading {
  background: #f7f9ff !important;
  border-bottom: 1px solid #eef0f8 !important;
  padding: 14px 20px !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  color: #07102a !important;
}

.panel-body, .panel .list-group {
  padding: 0 !important;
}

.panel .list-group-item {
  border: none !important;
  border-bottom: 1px solid #f4f6fb !important;
  padding: 14px 20px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.92rem !important;
  color: #3a4260 !important;
  background: transparent !important;
  transition: background .15s, color .15s !important;
}
.panel .list-group-item:last-child {
  border-bottom: none !important;
}
.panel .list-group-item:hover {
  background: #f7f9ff !important;
  color: #0000CC !important;
}
.panel .list-group-item.active {
  background: #0000CC !important;
  color: #fff !important;
}
.panel .list-group-item.active i,
.panel .list-group-item.active .fa {
  color: #fff !important;
}

/* === RESPONSIVE === */
@media (max-width: 767px) {
  .signup-container .form-control,
  #containerNewUserSignup .form-control,
  .checkout-container .form-control,
  form .form-group .form-control {
    font-size: 16px !important;  /* prevents iOS zoom on focus */
    height: 46px !important;
  }
  .signup-container h2 {
    font-size: 1.2rem !important;
  }
  /* Stack form rows on mobile */
  .row .col-sm-6,
  .row .col-md-6 {
    margin-bottom: 12px !important;
  }
}

/* === BOOTSTRAP COL FIX (form fields side-by-side) === */
form .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}
form .row > [class*="col-"] {
  padding-left: 10px !important;
  padding-right: 10px !important;
}


/* === JOMETECH MODERN CLIENT AREA 2026 === */

/*
|--------------------------------------------------------------------------
| DESIGN TOKENS
|--------------------------------------------------------------------------
*/

:root {
    --jtc-blue: #0000CC;
    --jtc-blue-dark: #000099;
    --jtc-red: #FE2D2B;

    --jtc-navy: #171B35;
    --jtc-text: #3A4260;
    --jtc-muted: #70798F;

    --jtc-bg: #F6F7FB;
    --jtc-soft: #F9FAFD;
    --jtc-border: #E4E7EF;

    --jtc-radius-sm: 10px;
    --jtc-radius: 14px;
    --jtc-radius-lg: 20px;

    --jtc-shadow:
        0 8px 30px rgba(23,27,53,.07);

    --jtc-shadow-lg:
        0 18px 55px rgba(23,27,53,.10);
}


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

html,
body {
    background: var(--jtc-bg) !important;
}

body {
    color: var(--jtc-text) !important;

    font-family:
        "DM Sans",
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    -webkit-font-smoothing: antialiased;
}


/*
|--------------------------------------------------------------------------
| PROMO BAR
|--------------------------------------------------------------------------
*/

.jt-promo-bar {
    min-height: 38px !important;

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

    gap: 22px !important;

    padding: 8px 18px !important;

    background: var(--jtc-blue) !important;

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

.jt-promo-bar a {
    font-weight: 700 !important;
    white-space: nowrap !important;
}


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

.jt-page-header {
    background: rgba(255,255,255,.98) !important;

    border-bottom: 1px solid var(--jtc-border) !important;

    box-shadow:
        0 5px 22px rgba(23,27,53,.035) !important;

    position: relative !important;
    z-index: 1000 !important;
}

.jt-page-header-inner {
    max-width: 1240px !important;

    min-height: 82px !important;

    margin: 0 auto !important;

    padding: 0 26px !important;

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

    gap: 22px !important;
}

.jt-page-logo {
    flex: 0 0 auto !important;
}

.jt-page-logo img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-height: 49px !important;
    max-width: 235px !important;
}


/*
|--------------------------------------------------------------------------
| DESKTOP NAVIGATION
|--------------------------------------------------------------------------
*/

.jt-page-nav {
    flex: 1 1 auto !important;
}

.jt-page-nav-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

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

.jt-page-nav-list > li > a {
    min-height: 44px !important;

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

    gap: 7px !important;

    padding: 10px 13px !important;

    border-radius: 9px !important;

    color: var(--jtc-navy) !important;

    font-size: 14.5px !important;
    font-weight: 600 !important;

    text-decoration: none !important;

    transition:
        background .15s ease,
        color .15s ease !important;
}

.jt-page-nav-list > li > a:hover {
    background: #F4F5FA !important;
    color: var(--jtc-blue) !important;
}


/*
|--------------------------------------------------------------------------
| DESKTOP DROPDOWNS
|--------------------------------------------------------------------------
*/

.jt-pg-drop {
    min-width: 235px !important;

    padding: 8px !important;

    border: 1px solid var(--jtc-border) !important;

    border-radius: 13px !important;

    background: #fff !important;

    box-shadow: var(--jtc-shadow-lg) !important;
}

.jt-pg-drop a {
    padding: 10px 11px !important;

    border-radius: 8px !important;

    color: var(--jtc-text) !important;

    font-size: 14px !important;

    text-decoration: none !important;
}

.jt-pg-drop a:hover {
    background: #F4F5FA !important;
    color: var(--jtc-blue) !important;
}


/*
|--------------------------------------------------------------------------
| HEADER ACTIONS
|--------------------------------------------------------------------------
*/

.jt-page-cta {
    flex: 0 0 auto !important;

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

    gap: 8px !important;
}

.jt-page-cart,
.jt-mobile-account {
    min-height: 43px !important;

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

    gap: 7px !important;

    padding: 0 15px !important;

    border-radius: 11px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease !important;
}

.jt-page-cart {
    background: var(--jtc-red) !important;
    color: #fff !important;

    border: 1px solid var(--jtc-red) !important;

    box-shadow:
        0 6px 18px rgba(254,45,43,.18) !important;
}

.jt-page-cart:hover {
    transform: translateY(-1px) !important;

    box-shadow:
        0 9px 23px rgba(254,45,43,.24) !important;
}

.jt-mobile-account {
    border: 1px solid var(--jtc-blue) !important;

    background: #fff !important;
    color: var(--jtc-blue) !important;
}


/*
|--------------------------------------------------------------------------
| CONTENT WIDTH
|--------------------------------------------------------------------------
*/

.container,
.container-fluid {
    max-width: 1240px;
}

#main-body {
    padding-top: 28px !important;
    padding-bottom: 60px !important;
}


/*
|--------------------------------------------------------------------------
| BREADCRUMB / PAGE STRIP
|--------------------------------------------------------------------------
*/

.breadcrumb,
.master-breadcrumb {
    background: transparent !important;

    border: 0 !important;

    padding-top: 14px !important;
    padding-bottom: 14px !important;

    font-size: 13.5px !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--jtc-muted) !important;
}


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

.card,
.panel,
.list-group {
    border: 1px solid var(--jtc-border) !important;

    border-radius: var(--jtc-radius) !important;

    background: #fff !important;

    box-shadow: var(--jtc-shadow) !important;

    overflow: hidden;
}

.card-header,
.panel-heading {
    padding: 17px 20px !important;

    background: #FBFCFE !important;

    border-bottom:
        1px solid var(--jtc-border) !important;

    color: var(--jtc-navy) !important;

    font-weight: 700 !important;
}

.card-body,
.panel-body {
    padding: 22px !important;
}


/*
|--------------------------------------------------------------------------
| LOGIN PAGE / AUTHENTICATION
|--------------------------------------------------------------------------
*/

.logincontainer,
.login-wrapper,
#loginForm,
form[action*="login"] {
    max-width: 100% !important;
}

.logincontainer .card,
#main-body .card {
    border-radius: 17px !important;
}

.logincontainer {
    max-width: 580px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.logincontainer .card-body {
    padding: 36px 34px !important;
}

.logincontainer h1,
.logincontainer h2,
.logincontainer h3,
#main-body h1 {
    color: var(--jtc-navy) !important;

    letter-spacing: -.02em !important;
}

.logincontainer h1,
#main-body h1 {
    font-weight: 700 !important;
}

.logincontainer .text-muted {
    color: var(--jtc-muted) !important;
}


/*
|--------------------------------------------------------------------------
| FORM FIELDS
|--------------------------------------------------------------------------
*/

.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
    min-height: 48px !important;

    border:
        1px solid #DCE1EB !important;

    border-radius: 10px !important;

    background: #fff !important;

    color: var(--jtc-navy) !important;

    font-size: 15px !important;

    box-shadow: none !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease !important;
}

textarea.form-control {
    min-height: 120px !important;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
    border-color:
        rgba(0,0,204,.65) !important;

    box-shadow:
        0 0 0 4px
        rgba(0,0,204,.07) !important;

    outline: none !important;
}

.input-group-text,
.input-group-addon {
    border-color: #DCE1EB !important;

    background: #F2F4F8 !important;

    color: #596174 !important;
}


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

label,
.form-label {
    margin-bottom: 7px !important;

    color: #414A69 !important;

    font-size: 13.5px !important;
    font-weight: 700 !important;

    letter-spacing: .01em !important;
}


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

.btn {
    min-height: 43px !important;

    padding: 9px 18px !important;

    border-radius: 10px !important;

    font-weight: 700 !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease !important;
}

.btn-primary,
.btn-success {
    border-color: var(--jtc-blue) !important;

    background: var(--jtc-blue) !important;

    color: #fff !important;

    box-shadow:
        0 6px 16px rgba(0,0,204,.15) !important;
}

.btn-primary:hover,
.btn-success:hover {
    border-color: var(--jtc-blue-dark) !important;

    background: var(--jtc-blue-dark) !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 9px 22px rgba(0,0,204,.20) !important;
}

.btn-outline-primary {
    border-color: var(--jtc-blue) !important;
    color: var(--jtc-blue) !important;
}

.btn-outline-primary:hover {
    background: var(--jtc-blue) !important;
    color: #fff !important;
}


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

.table {
    background: #fff !important;

    border-radius: var(--jtc-radius) !important;

    overflow: hidden !important;
}

.table thead th {
    padding: 13px 15px !important;

    border-bottom:
        1px solid var(--jtc-border) !important;

    background: #F8F9FC !important;

    color: #555E78 !important;

    font-size: 12.5px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: .035em !important;
}

.table td {
    padding: 14px 15px !important;

    vertical-align: middle !important;

    border-color: #EEF0F5 !important;
}


/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.sidebar .card,
.sidebar .panel {
    margin-bottom: 18px !important;
}


/*
|--------------------------------------------------------------------------
| ALERTS
|--------------------------------------------------------------------------
*/

.alert {
    border: 0 !important;

    border-radius: 11px !important;

    padding: 14px 16px !important;
}


/*
|--------------------------------------------------------------------------
| MOBILE HEADER — CLEAN SINGLE ROW
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .jt-page-header-inner {
        min-height: 72px !important;

        padding:
            10px 14px !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 7px !important;
    }


    /*
     * Force correct visual order regardless
     * of PHP markup order.
     */

    .jt-page-logo {
        order: 1 !important;

        flex:
            1 1 auto !important;

        min-width: 0 !important;
    }

    .jt-page-cta {
        order: 2 !important;

        margin-left: auto !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        width: auto !important;

        gap: 6px !important;
    }

    .jt-page-mobile-toggle {
        order: 3 !important;

        flex: 0 0 42px !important;
    }


    /*
     * Logo
     */

    .jt-page-logo img {
        max-width: 165px !important;
        max-height: 42px !important;
    }


    /*
     * Account / cart
     */

    .jt-mobile-account,
    .jt-page-cart {
        height: 42px !important;
        min-height: 42px !important;

        padding: 0 11px !important;

        border-radius: 10px !important;

        font-size: 13.5px !important;

        flex:
            0 0 auto !important;
    }


    /*
     * Hamburger
     */

    .jt-page-mobile-toggle {
        display: inline-flex !important;

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

        width: 42px !important;
        height: 42px !important;

        padding: 0 !important;

        border:
            1px solid var(--jtc-border) !important;

        border-radius: 10px !important;

        background: #fff !important;

        color: var(--jtc-navy) !important;

        font-size: 18px !important;
    }


    /*
     * Dropdown menu
     */

    .jt-page-nav {
        order: 4 !important;

        position: absolute !important;

        top: 100% !important;
        left: 10px !important;
        right: 10px !important;

        width: auto !important;

        border:
            1px solid var(--jtc-border) !important;

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

        box-shadow:
            var(--jtc-shadow-lg) !important;
    }


    /*
     * Content starts closer to header.
     */

    #main-body {
        padding-top: 20px !important;
    }


    /*
     * Auth cards
     */

    .logincontainer .card-body {
        padding: 28px 25px !important;
    }

}


/*
|--------------------------------------------------------------------------
| SMALL PHONES
|--------------------------------------------------------------------------
*/

@media (max-width: 560px) {

    .jt-promo-bar {
        min-height: 36px !important;

        padding: 7px 10px !important;

        gap: 12px !important;

        font-size: 11.5px !important;
    }

    .jt-page-header-inner {
        min-height: 68px !important;

        padding:
            9px 10px !important;

        gap: 5px !important;
    }

    .jt-page-logo img {
        max-width: 145px !important;
        max-height: 39px !important;
    }

    .jt-mobile-account {
        width: 39px !important;
        height: 39px !important;

        padding: 0 !important;
    }

    .jt-mobile-account span {
        display: none !important;
    }

    .jt-page-cart {
        width: 39px !important;
        height: 39px !important;

        padding: 0 !important;
    }

    .jt-page-cart span {
        display: none !important;
    }

    .jt-page-mobile-toggle {
        width: 39px !important;
        height: 39px !important;

        flex-basis: 39px !important;
    }

    .logincontainer {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .logincontainer .card-body,
    .card-body {
        padding: 23px 20px !important;
    }

    #main-body {
        padding-top: 16px !important;
    }

}


/* === END JOMETECH MODERN CLIENT AREA 2026 === */







/* === JOMETECH MOBILE HEADER FINAL === */

@media (max-width: 900px) {

    /*
     * Compact single-line header
     */

    .jt-page-header-inner {
        min-height: 74px !important;
        height: auto !important;

        padding: 10px 14px !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 7px !important;
    }


    /*
     * Logo
     */

    .jt-page-logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .jt-page-logo img {
        width: auto !important;
        height: auto !important;

        max-width: 165px !important;
        max-height: 42px !important;
    }


    /*
     * Login + Cart stay together
     */

    .jt-page-cta {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        width: auto !important;
        min-width: 0 !important;

        margin-left: auto !important;

        gap: 6px !important;

        overflow: visible !important;
    }


    .jt-mobile-account,
    .jt-page-cart {
        width: auto !important;
        min-width: 42px !important;
        max-width: none !important;

        height: 42px !important;

        padding: 0 11px !important;

        display: inline-flex !important;

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

        gap: 6px !important;

        flex: 0 0 auto !important;

        overflow: visible !important;

        border-radius: 10px !important;

        line-height: 1 !important;
    }


    /*
     * Force text visible on normal phones
     */

    .jt-mobile-account span,
    .jt-page-cart span {
        display: inline !important;

        width: auto !important;

        overflow: visible !important;

        white-space: nowrap !important;
    }


    /*
     * Hamburger
     */

    .jt-page-mobile-toggle {
        position: static !important;

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

        flex: 0 0 42px !important;

        margin: 0 !important;

        display: inline-flex !important;

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


    /*
     * Remove unnecessary header whitespace
     */

    .jt-page-header,
    .jt-page-header-inner,
    .jt-page-logo,
    .jt-page-cta {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /*
     * Login screen spacing
     */

    #main-body {
        padding-top: 28px !important;
    }

    .logincontainer {
        max-width: 570px !important;
        margin-top: 0 !important;
    }

    .logincontainer .card {
        border-radius: 18px !important;

        box-shadow:
            0 15px 45px
            rgba(23,27,53,.08) !important;
    }

    .logincontainer .card-body {
        padding: 30px 26px !important;
    }

}


/*
 * Smaller phones:
 * keep Login visible, Cart becomes icon-only.
 */

@media (max-width: 520px) {

    .jt-page-header-inner {
        min-height: 68px !important;

        padding: 9px 10px !important;

        gap: 5px !important;
    }

    .jt-page-logo img {
        max-width: 135px !important;
        max-height: 38px !important;
    }

    .jt-mobile-account {
        height: 39px !important;

        padding: 0 9px !important;

        font-size: 12.5px !important;
    }

    .jt-page-cart {
        width: 39px !important;
        min-width: 39px !important;
        height: 39px !important;

        padding: 0 !important;
    }

    .jt-page-cart span {
        display: none !important;
    }

    .jt-page-mobile-toggle {
        width: 39px !important;
        min-width: 39px !important;
        height: 39px !important;

        flex-basis: 39px !important;
    }

    #main-body {
        padding-top: 20px !important;
    }

}


/*
 * Very narrow screens:
 * Login becomes icon-only too.
 */

@media (max-width: 410px) {

    .jt-page-logo img {
        max-width: 125px !important;
    }

    .jt-mobile-account {
        width: 39px !important;
        min-width: 39px !important;

        padding: 0 !important;
    }

    .jt-mobile-account span {
        display: none !important;
    }

}


/* === END JOMETECH MOBILE HEADER FINAL === */



/* =========================================================
   JOMETECH MOBILE MENU — FINAL FIX
   ========================================================= */

@media (max-width: 900px) {

    .jt-page-header,
    .jt-page-header-inner {
        overflow: visible !important;
    }


    /* Menu hidden normally */

    .jt-page-nav {
        display: none !important;

        position: absolute !important;

        top: 100% !important;
        left: 10px !important;
        right: 10px !important;

        width: auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;

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

        overflow: visible !important;

        background: #fff !important;

        border: 1px solid #E4E7EF !important;
        border-top: 0 !important;

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

        box-shadow:
            0 20px 45px
            rgba(23,27,53,.14) !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 999999 !important;
    }


    /* Show when hamburger is open */

    .jt-page-header.jt-mobile-nav-open
    .jt-page-nav {
        display: block !important;
    }


    /* Main list */

    .jt-page-nav-list {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        height: auto !important;
        max-height: none !important;

        gap: 2px !important;

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

        overflow: visible !important;

        list-style: none !important;
    }


    .jt-page-nav-list > li {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        height: auto !important;

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


    .jt-page-nav-list > li > a {
        display: flex !important;

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

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

        padding: 11px 12px !important;

        border-radius: 8px !important;

        color: #171B35 !important;

        background: transparent !important;

        font-size: 14.5px !important;
        font-weight: 650 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    .jt-page-nav-list > li > a:hover {
        background: #F5F6FA !important;
        color: #0000CC !important;
    }


    /*
     * Submenus
     */

    .jt-page-nav .jt-pg-drop {
        display: none !important;

        position: static !important;

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

        height: auto !important;
        max-height: none !important;

        margin: 2px 0 6px !important;

        padding: 5px !important;

        overflow: visible !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        background: #F7F8FC !important;

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

        box-shadow: none !important;
    }


    .jt-page-nav
    .jt-pg-has-drop.jt-mobile-sub-open
    > .jt-pg-drop {
        display: block !important;
    }


    .jt-page-nav .jt-pg-drop li {
        display: block !important;

        width: 100% !important;

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


    .jt-page-nav .jt-pg-drop a {
        display: flex !important;

        align-items: center !important;

        gap: 9px !important;

        width: 100% !important;

        padding: 10px 11px !important;

        border-radius: 7px !important;

        color: #4B536A !important;

        background: transparent !important;

        font-size: 14px !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    .jt-page-nav .jt-pg-drop a:hover {
        background: #fff !important;
        color: #0000CC !important;
    }


    /* Keep login/card content clear of open menu */

    .jt-page-header.jt-mobile-nav-open {
        margin-bottom: 0 !important;
    }

}


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



/* =========================================================
   JOMETECH MOBILE NAV — SOLID PANEL FIX
   ========================================================= */

@media (max-width: 900px) {

    .jt-page-header {
        position: relative !important;
        overflow: visible !important;
        z-index: 99999 !important;
    }

    .jt-page-header-inner {
        position: relative !important;
        overflow: visible !important;
    }


    /* CLOSED */

    .jt-page-nav {
        display: none !important;
    }


    /* OPEN */

    .jt-page-header.jt-mobile-nav-open .jt-page-nav {
        display: block !important;

        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: auto !important;

        max-height: calc(100vh - 145px) !important;

        margin: 0 !important;
        padding: 12px 14px 16px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: #ffffff !important;

        border-top: 1px solid #E7E9F0 !important;
        border-bottom: 1px solid #E7E9F0 !important;

        border-radius: 0 !important;

        box-shadow:
            0 20px 35px
            rgba(23,27,53,.16) !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        z-index: 999999 !important;
    }


    /* MAIN LIST */

    .jt-page-header.jt-mobile-nav-open
    .jt-page-nav-list {

        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: auto !important;

        gap: 3px !important;

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

        background: #fff !important;

        list-style: none !important;
    }


    .jt-page-header.jt-mobile-nav-open
    .jt-page-nav-list > li {

        display: block !important;

        position: relative !important;

        width: 100% !important;
        height: auto !important;

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

        background: #fff !important;
    }


    .jt-page-header.jt-mobile-nav-open
    .jt-page-nav-list > li > a {

        display: flex !important;

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

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

        padding: 11px 13px !important;

        border-radius: 9px !important;

        background: #fff !important;
        color: #171B35 !important;

        font-size: 15px !important;
        font-weight: 650 !important;

        line-height: 1.3 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    .jt-page-header.jt-mobile-nav-open
    .jt-page-nav-list > li > a:hover {

        background: #F5F6FA !important;
        color: #0000CC !important;
    }


    /* SUBMENUS */

    .jt-page-header.jt-mobile-nav-open
    .jt-pg-drop {

        display: none !important;

        position: static !important;

        width: 100% !important;
        height: auto !important;

        margin: 3px 0 7px !important;
        padding: 6px !important;

        background: #F6F7FB !important;

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

        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }


    .jt-page-header.jt-mobile-nav-open
    .jt-pg-has-drop.jt-mobile-sub-open
    > .jt-pg-drop {

        display: block !important;
    }


    .jt-page-header.jt-mobile-nav-open
    .jt-pg-drop li {

        display: block !important;

        width: 100% !important;
        margin: 0 !important;
    }


    .jt-page-header.jt-mobile-nav-open
    .jt-pg-drop a {

        display: flex !important;

        align-items: center !important;

        gap: 9px !important;

        width: 100% !important;

        padding: 10px 11px !important;

        border-radius: 7px !important;

        background: transparent !important;
        color: #4B536A !important;

        font-size: 14px !important;

        text-decoration: none !important;
    }


    .jt-page-header.jt-mobile-nav-open
    .jt-pg-drop a:hover {

        background: #fff !important;
        color: #0000CC !important;
    }


    /* Prevent old menu CSS from floating items */

    .jt-page-nav-list li,
    .jt-page-nav-list ul,
    .jt-page-nav-list a {

        float: none !important;
    }

}


/* =========================================================
   END JOMETECH MOBILE NAV SOLID PANEL
   ========================================================= */