/* ============================================================
   TOSHOST — WHMCS Client Area Theme
   Ported from the toshost.com Tailwind design system (app.css)
   so the billing/client area matches the marketing front-end.

   Loaded AFTER Nexus' all.min.css + theme.min.css, so these
   rules win and re-skin the inherited Bootstrap 4.5 markup.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
    --ts-brand: #2b59ff;
    --ts-brand-dark: #1a3ab3;
    --ts-brand-soft: #edf1ff;
    --ts-eco: #10b981;
    --ts-ink: #000c2d;
    --ts-ink-soft: #0f172a;
    --ts-body: #4e5d78;
    --ts-muted: #64748b;
    --ts-surface: #f8faff;
    --ts-border: #e8edf6;

    --ts-acc-wp: #0ea5e9;
    --ts-acc-cloud: #6366f1;
    --ts-acc-dedi: #f59e0b;
    --ts-acc-managed: #8b5cf6;

    --ts-radius: 0.75rem;       /* rounded-xl */
    --ts-radius-lg: 1rem;       /* rounded-2xl */
    --ts-radius-pill: 999px;
    --ts-shadow-soft: 0 10px 40px -12px rgba(43, 89, 255, 0.18);
    --ts-shadow-card: 0 4px 24px -8px rgba(15, 23, 42, 0.10);
    --ts-container: 1280px;
}

/* ---------- Base ---------- */
body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ts-body);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ts-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
}
a { color: var(--ts-brand); }
a:hover { color: var(--ts-brand-dark); }
.container { max-width: var(--ts-container); }

/* ============================================================
   Top utility bar  (mirrors site_header top bar)
   ============================================================ */
.ts-topbar {
    background: var(--ts-ink);
    color: #fff;
    font-size: 12px;
}
.ts-topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
}
.ts-topbar a, .ts-topbar button {
    color: #cbd5e1;
    background: none;
    border: 0;
    text-decoration: none;
    transition: color .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ts-topbar a:hover, .ts-topbar button:hover { color: #fff; }
.ts-topbar .ts-topbar-group { display: flex; align-items: center; gap: 16px; }
.ts-topbar .ts-clientarea { color: var(--ts-eco); font-weight: 600; }
.ts-status-dot {
    width: 6px; height: 6px; border-radius: 999px; background: var(--ts-eco);
    display: inline-block; animation: ts-pulse 2s infinite;
}
@keyframes ts-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ============================================================
   Primary header / navbar  (Toshost sticky bar)
   ============================================================ */
header#header.header { background: transparent; box-shadow: none; border: 0; }

/* Website main menu bar — scrolls away (the WHMCS bar below is the sticky one) */
.ts-header {
    position: relative;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--ts-border);
}
.ts-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}
.ts-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ts-logo img { height: 36px; width: auto; }
.ts-logo .ts-logo-text { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ts-ink); }
.ts-logo .ts-logo-text span { color: var(--ts-brand); }

/* desktop nav */
.ts-nav { display: none; align-items: center; gap: 2px; }
@media (min-width: 992px) { .ts-nav { display: flex; } }
.ts-nav-item { position: relative; }
.ts-nav-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 14px;
    border-radius: var(--ts-radius);
    font-size: 14px; font-weight: 600;
    color: rgba(0, 12, 45, 0.8);
    background: none; border: 0; cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.ts-nav-link:hover, .ts-nav-item:hover .ts-nav-link { background: #f8fafc; color: var(--ts-brand); }
.ts-nav-caret { width: 14px; height: 14px; color: #94a3b8; transition: transform .2s; }
.ts-nav-item:hover .ts-nav-caret { transform: rotate(180deg); color: var(--ts-brand); }

/* mega dropdown */
.ts-dropdown {
    position: absolute; top: 100%; left: 0;
    padding-top: 8px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .2s; z-index: 1040;
}
.ts-dropdown.align-right { left: auto; right: 0; }
.ts-nav-item:hover .ts-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.ts-dropdown-panel {
    background: #fff;
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-lg);
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    width: 330px;
}
.ts-dropdown-panel.two-col { width: 600px; }
.ts-dropdown-grid { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px; }
.ts-dropdown-panel.two-col .ts-dropdown-grid { grid-template-columns: 1fr 1fr; }
.ts-dropdown-link {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px; border-radius: var(--ts-radius);
    text-decoration: none; transition: background .15s;
}
.ts-dropdown-link:hover { background: #f8fafc; }
.ts-dropdown-ico {
    flex: 0 0 auto; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ts-radius);
    background: var(--ts-brand-soft); color: var(--ts-brand);
    transition: transform .2s;
}
.ts-dropdown-ico svg { width: 20px; height: 20px; }
.ts-dropdown-link:hover .ts-dropdown-ico { transform: scale(1.1) rotate(3deg); }
.ts-dropdown-title { display: block; font-size: 14px; font-weight: 700; color: var(--ts-ink); }
.ts-dropdown-link:hover .ts-dropdown-title { color: var(--ts-brand); }
.ts-dropdown-desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ts-muted); }
.ts-dropdown-foot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--ts-border);
    background: rgba(248, 250, 252, 0.6);
    padding: 10px 16px;
    font-size: 12px; font-weight: 700; color: var(--ts-brand);
    text-decoration: none;
}
.ts-dropdown-foot:hover { background: var(--ts-brand-soft); color: var(--ts-brand); }

/* simple dropdown — used for the WHMCS-native nav fallback (no icons/descriptions) */
.ts-dropdown-panel.ts-dropdown-simple { width: auto; min-width: 230px; }
.ts-dd-list { display: flex; flex-direction: column; padding: 8px; }
.ts-dd-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--ts-radius);
    font-size: 14px; font-weight: 600; color: var(--ts-ink);
    text-decoration: none; white-space: nowrap; transition: background .15s, color .15s;
}
.ts-dd-link i { width: 16px; text-align: center; color: var(--ts-muted); transition: color .15s; }
.ts-dd-link:hover { background: #f8fafc; color: var(--ts-brand); }
.ts-dd-link:hover i { color: var(--ts-brand); }
.ts-dd-divider { height: 1px; margin: 6px 8px; background: var(--ts-border); }

/* accent variants for dropdown icons */
.ts-ico-wp      { background: rgba(14,165,233,.1);  color: var(--ts-acc-wp); }
.ts-ico-eco     { background: rgba(16,185,129,.1);  color: var(--ts-eco); }
.ts-ico-brand   { background: rgba(43,89,255,.1);   color: var(--ts-brand); }
.ts-ico-dedi    { background: rgba(245,158,11,.1);  color: var(--ts-acc-dedi); }
.ts-ico-cloud   { background: rgba(99,102,241,.1);  color: var(--ts-acc-cloud); }
.ts-ico-managed { background: rgba(139,92,246,.1);  color: var(--ts-acc-managed); }
.ts-ico-rose    { background: rgba(244,63,94,.1);   color: #f43f5e; }

/* header CTAs */
.ts-header-cta { display: flex; align-items: center; gap: 8px; }
.ts-btn-login {
    display: none; padding: 8px 16px; border-radius: var(--ts-radius);
    font-size: 14px; font-weight: 600; color: var(--ts-ink);
    background: none; border: 0; cursor: pointer; text-decoration: none;
}
@media (min-width: 576px) { .ts-btn-login { display: inline-block; } }
.ts-btn-login:hover { color: var(--ts-brand); }
.ts-btn-get {
    display: none; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: var(--ts-radius);
    background: var(--ts-brand); color: #fff;
    font-size: 14px; font-weight: 600; text-decoration: none;
    box-shadow: var(--ts-shadow-soft); transition: background .15s, transform .15s;
}
@media (min-width: 576px) { .ts-btn-get { display: inline-flex; } }
.ts-btn-get:hover { background: var(--ts-brand-dark); color: #fff; transform: translateY(-1px); }
.ts-nav-toggle {
    display: inline-flex; padding: 8px; border-radius: var(--ts-radius);
    background: none; border: 0; color: var(--ts-ink); cursor: pointer;
}
@media (min-width: 992px) { .ts-nav-toggle { display: none; } }

/* mobile drawer */
.ts-drawer-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0, 12, 45, 0.5); backdrop-filter: blur(4px);
    display: none;
}
.ts-drawer-backdrop.open { display: block; }
.ts-drawer {
    position: fixed; top: 0; right: 0; z-index: 1060;
    height: 100%; width: 88%; max-width: 360px;
    background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,.2);
    transform: translateX(100%); transition: transform .3s;
    display: flex; flex-direction: column;
}
.ts-drawer.open { transform: translateX(0); }
.ts-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--ts-border); }
.ts-drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.ts-drawer-foot { padding: 16px; border-top: 1px solid var(--ts-border); display: flex; flex-direction: column; gap: 8px; }
.ts-drawer-link { display: block; padding: 12px; border-radius: var(--ts-radius); font-weight: 600; color: var(--ts-ink); text-decoration: none; }
.ts-drawer-link:hover { background: var(--ts-brand-soft); color: var(--ts-brand); }
.ts-acc-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 12px; border-radius: var(--ts-radius); font-weight: 600; color: var(--ts-ink); background: none; border: 0; cursor: pointer; }
.ts-acc-toggle:hover { background: var(--ts-brand-soft); }
.ts-acc-panel { display: none; padding: 0 0 8px 12px; }
.ts-acc-panel.open { display: block; }
.ts-acc-panel a { display: block; padding: 8px 12px; font-size: 14px; color: var(--ts-body); text-decoration: none; }
.ts-acc-panel a:hover { color: var(--ts-brand); }
.ts-acc-toggle svg { width: 16px; height: 16px; color: var(--ts-muted); transition: transform .2s; }
.ts-acc-toggle.open svg { transform: rotate(180deg); }

/* ============================================================
   Tech / secure "gap" band — separates the website menu (above)
   from the sticky WHMCS client-area menu (below)
   ============================================================ */
.ts-secure-band {
    position: relative; overflow: hidden;
    background: linear-gradient(90deg, #04081a, #0a1838 50%, #04081a);
    border-top: 1px solid rgba(43, 89, 255, 0.28);
    border-bottom: 1px solid rgba(43, 89, 255, 0.28);
}
.ts-secure-band::before {            /* circuit grid */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
    background-image:
        linear-gradient(rgba(43, 89, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 89, 255, 0.16) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 120% at 50% 50%, #000 35%, transparent 85%);
            mask-image: radial-gradient(ellipse 70% 120% at 50% 50%, #000 35%, transparent 85%);
}
.ts-secure-band::after {             /* sweeping scan glow */
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
    background: linear-gradient(90deg, transparent, rgba(43, 89, 255, 0.22), transparent);
    animation: ts-scan 7s linear infinite;
}
@keyframes ts-scan { 0% { transform: translateX(-120%); } 100% { transform: translateX(420%); } }
.ts-secure-band .container {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 14px 28px; min-height: 44px; padding: 8px 16px;
}
.ts-secure-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #9db8ff; white-space: nowrap;
}
.ts-secure-item svg { width: 15px; height: 15px; color: var(--ts-eco); flex: 0 0 auto; }
.ts-secure-item .ts-secure-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ts-eco); box-shadow: 0 0 8px var(--ts-eco); animation: ts-pulse 2s infinite; }
.ts-secure-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.14); }
@media (max-width: 767px) { .ts-secure-item.opt, .ts-secure-sep { display: none; } }

/* ============================================================
   WHMCS client-area menu — sticky on scroll
   ============================================================ */
.ts-funcbar {
    position: -webkit-sticky; position: sticky; top: 0;
    z-index: 1035;
    background: #fff;
    border-bottom: 1px solid var(--ts-border);
    padding: 0;
    transition: box-shadow .25s, background .25s;
}
.ts-funcbar.is-stuck { box-shadow: 0 8px 30px -12px rgba(15, 23, 42, 0.16); background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ts-funcbar > .container { display: flex; align-items: center; }
.ts-funcbar .collapse.navbar-collapse { width: 100%; }
/* compact brand mark — visible once the bar sticks */
.ts-funcbar-logo { display: none; align-items: center; margin-right: 18px; flex: 0 0 auto; }
.ts-funcbar-logo img { height: 26px; width: auto; }
.ts-funcbar-logo .ts-logo-text { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ts-ink); }
.ts-funcbar-logo .ts-logo-text span { color: var(--ts-brand); }
@media (min-width: 1200px) { .ts-funcbar.is-stuck .ts-funcbar-logo { display: inline-flex; } }
/* nav links inside the WHMCS bar */
.ts-funcbar .navbar-nav .nav-link {
    color: rgba(0, 12, 45, 0.82); font-weight: 600; font-size: 14px;
    padding: 14px 14px; border-radius: 0; transition: color .15s;
}
.ts-funcbar .navbar-nav .nav-link:hover,
.ts-funcbar .navbar-nav .dropdown:hover > .nav-link,
.ts-funcbar .navbar-nav .show > .nav-link { color: var(--ts-brand); }
.ts-funcbar .navbar-nav .nav-link i { color: var(--ts-muted); }
.ts-funcbar .navbar-nav .nav-link:hover i { color: var(--ts-brand); }
.ts-funcbar .dropdown-menu {
    border: 1px solid var(--ts-border); border-radius: var(--ts-radius-lg);
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.18); padding: 8px; margin-top: 2px;
}
.ts-funcbar .dropdown-item { border-radius: var(--ts-radius); font-weight: 600; color: var(--ts-ink); padding: 8px 12px; }
.ts-funcbar .dropdown-item:hover, .ts-funcbar .dropdown-item:focus { background: #f8fafc; color: var(--ts-brand); }
.ts-funcbar .dropdown-divider { border-color: var(--ts-border); }
.ts-funcbar .search .form-control { border-radius: var(--ts-radius); }

/* ============================================================
   Logged-in account topbar (Nexus' .topbar restyle)
   ============================================================ */
.topbar { background: var(--ts-surface); border-bottom: 1px solid var(--ts-border); }
.topbar .btn { color: var(--ts-body); }
.btn-active-client { font-weight: 600; color: var(--ts-ink); }

/* ============================================================
   Buttons — re-skin Bootstrap to Toshost
   ============================================================ */
.btn {
    border-radius: var(--ts-radius);
    font-weight: 600;
    padding: 10px 20px;
    transition: all .2s;
}
.btn-primary, .btn.search {
    background: var(--ts-brand); border-color: var(--ts-brand);
    box-shadow: var(--ts-shadow-soft);
}
.btn-primary:hover, .btn-primary:focus, .btn.search:hover {
    background: var(--ts-brand-dark); border-color: var(--ts-brand-dark);
    transform: translateY(-1px);
}
.btn-success { background: var(--ts-eco); border-color: var(--ts-eco); }
.btn-success:hover { filter: brightness(.95); background: var(--ts-eco); border-color: var(--ts-eco); }
.btn-outline-primary, .btn-default {
    color: var(--ts-ink); background: #fff; border: 1px solid var(--ts-border);
}
.btn-outline-primary:hover, .btn-default:hover {
    color: var(--ts-brand); border-color: var(--ts-brand); background: #fff;
}
.btn.transfer { background: var(--ts-ink); border-color: var(--ts-ink); color: #fff; }
.btn-lg { padding: 14px 28px; font-size: 16px; }

/* ============================================================
   Cards / panels — rounded, soft shadow
   ============================================================ */
.card, .panel {
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-lg);
    box-shadow: var(--ts-shadow-card);
}
.card-header, .panel-heading {
    background: #fff;
    border-bottom: 1px solid var(--ts-border);
    border-top-left-radius: var(--ts-radius-lg);
    border-top-right-radius: var(--ts-radius-lg);
    font-weight: 700; color: var(--ts-ink);
}
.panel-primary > .panel-heading { background: var(--ts-brand); border-color: var(--ts-brand); }

/* ============================================================
   Forms
   ============================================================ */
.form-control {
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    color: var(--ts-ink);
}
.form-control:focus {
    border-color: var(--ts-brand);
    box-shadow: 0 0 0 4px rgba(43, 89, 255, 0.12);
}
.input-group-lg .form-control { border-radius: var(--ts-radius); }

/* ============================================================
   Breadcrumb, badges, alerts, tables, pagination
   ============================================================ */
.master-breadcrumb { background: var(--ts-surface); border-bottom: 1px solid var(--ts-border); }
.breadcrumb { background: transparent; }
.breadcrumb a { color: var(--ts-muted); }
.breadcrumb .active { color: var(--ts-ink); }

.badge-dark, .badge-pill.badge-dark { background: var(--ts-brand); }
.badge-primary { background: var(--ts-brand); }

.alert { border-radius: var(--ts-radius); border: 1px solid transparent; }
.alert-success { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.25); color: #047857; }
.alert-info { background: var(--ts-brand-soft); border-color: rgba(43,89,255,.2); color: var(--ts-brand-dark); }
.alert-danger { background: rgba(244,63,94,.08); border-color: rgba(244,63,94,.25); color: #be123c; }

.table thead th { color: var(--ts-ink); border-bottom: 2px solid var(--ts-border); }
.table td, .table th { border-top: 1px solid var(--ts-border); }

.page-link { color: var(--ts-brand); border-color: var(--ts-border); }
.page-item.active .page-link { background: var(--ts-brand); border-color: var(--ts-brand); }

/* ============================================================
   Homepage hero / domain search
   ============================================================ */
.ts-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(43,89,255,.10), transparent 45%),
        radial-gradient(circle at 85% 0%, rgba(99,102,241,.08), transparent 40%),
        var(--ts-surface);
    padding: 64px 0 56px;
    text-align: center;
}
.ts-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; }
.ts-hero .ts-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: var(--ts-radius-pill);
    background: var(--ts-brand-soft); color: var(--ts-brand);
    padding: 6px 16px; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px;
}
.ts-hero-sub { color: var(--ts-body); max-width: 640px; margin: 12px auto 0; }
.home-shortcuts { background: #fff; }

/* ============================================================
   Manual payment (bKash / Bank) — gateway _link output
   ============================================================ */
.tm-manual { margin: 8px 0; }
.tm-intro { color: var(--ts-body); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.tm-amount-due { display: inline-block; background: var(--ts-brand-soft); color: var(--ts-brand-dark); font-weight: 700; border-radius: var(--ts-radius); padding: 8px 14px; margin-bottom: 16px; }
.tm-methods { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 20px; }
@media (min-width: 576px) { .tm-methods { grid-template-columns: 1fr 1fr; } }
.tm-method { border: 1px solid var(--ts-border); border-radius: var(--ts-radius-lg); overflow: hidden; background: #fff; }
.tm-method-head { background: var(--ts-surface); padding: 10px 14px; font-weight: 700; color: var(--ts-ink); border-bottom: 1px solid var(--ts-border); display: flex; align-items: center; gap: 8px; }
.tm-method-head i { color: var(--ts-brand); }
.tm-tag { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ts-muted); }
.tm-method-body { padding: 14px; font-size: 14px; color: var(--ts-body); }
.tm-pay-to { margin-bottom: 8px; color: var(--ts-ink); }
.tm-copy { background: var(--ts-brand-soft); border: 0; border-radius: 8px; padding: 4px 10px; color: var(--ts-brand-dark); cursor: pointer; font-size: 15px; }
.tm-copy i { margin-left: 4px; font-size: 13px; }
.tm-method-instr { font-size: 13px; color: var(--ts-muted); line-height: 1.5; }
.tm-bank { font-size: 14px; color: var(--ts-ink); }
.tm-bank-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--ts-border); }
.tm-bank-row:last-child { border-bottom: 0; }
.tm-bank-row span { color: var(--ts-muted); }
.tm-bank-row strong { color: var(--ts-ink); text-align: right; }
.tm-form { border: 1px solid var(--ts-border); border-radius: var(--ts-radius-lg); padding: 20px; background: #fff; box-shadow: var(--ts-shadow-card); }
.tm-form-title { font-size: 16px; font-weight: 800; color: var(--ts-ink); margin: 0 0 14px; }
.tm-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .tm-row { grid-template-columns: 1fr 1fr; } }
.tm-field { margin-bottom: 14px; }
.tm-field label { display: block; font-size: 13px; font-weight: 600; color: var(--ts-ink); margin-bottom: 6px; }
.tm-field input, .tm-field select, .tm-field textarea { width: 100%; border: 1px solid var(--ts-border); border-radius: var(--ts-radius); padding: 10px 12px; font-size: 14px; color: var(--ts-ink); background: #fff; }
.tm-field input:focus, .tm-field select:focus, .tm-field textarea:focus { outline: none; border-color: var(--ts-brand); box-shadow: 0 0 0 4px rgba(43, 89, 255, .12); }
.tm-help { display: block; font-size: 12px; color: var(--ts-muted); margin-top: 4px; }
.tm-submit { margin-top: 6px; }
.tm-submit.is-loading { opacity: .7; cursor: progress; }
.tm-status { border: 1px solid var(--ts-border); border-radius: var(--ts-radius-lg); padding: 18px; background: var(--ts-surface); margin-bottom: 16px; }
.tm-badge { display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tm-badge-wait { background: rgba(245, 158, 11, .12); color: #b45309; }
.tm-badge-ok { background: rgba(16, 185, 129, .12); color: #047857; }
.tm-badge-no { background: rgba(244, 63, 94, .12); color: #be123c; }
.tm-status-msg { margin-top: 10px; color: var(--ts-body); font-size: 14px; line-height: 1.6; }
.tm-status-trx { margin-top: 8px; font-size: 13px; color: var(--ts-muted); }
.tm-alert { border-radius: var(--ts-radius); padding: 10px 14px; margin-bottom: 14px; font-size: 14px; background: rgba(244, 63, 94, .08); border: 1px solid rgba(244, 63, 94, .25); color: #be123c; }

/* ============================================================
   bKash "Pay Now" button (gateway _link output)
   ============================================================ */
.bkash-pay-form { margin: 10px 0; }
.btn-bkash {
    display: inline-flex; align-items: center; gap: 12px;
    background: #e2136e; color: #fff; border: 0;
    border-radius: var(--ts-radius); padding: 12px 22px;
    font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
    box-shadow: 0 10px 30px -12px rgba(226, 19, 110, 0.55);
    transition: background .15s, transform .15s, box-shadow .15s;
}
.btn-bkash:hover { background: #c10f5d; transform: translateY(-1px); color: #fff; }
.btn-bkash:active { transform: translateY(0); }
.btn-bkash:disabled, .btn-bkash.is-loading { opacity: .75; cursor: progress; transform: none; }
.btn-bkash-logo {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 6px; padding: 3px 6px;
}
.btn-bkash-logo img { height: 18px; width: auto; display: block; }
.btn-bkash-text { white-space: nowrap; }
.btn-bkash-arrow { transition: transform .15s; }
.btn-bkash:hover .btn-bkash-arrow { transform: translateX(3px); }

/* ============================================================
   One-page checkout — order summary card (orderforms)
   ============================================================ */
.ops-summary {
    background: #fff; border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-card);
    padding: 20px 24px; margin-bottom: 28px;
}
.ops-summary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ops-summary-head h2 { font-size: 20px; font-weight: 800; margin: 0; }
.ops-add { font-size: 13px; font-weight: 600; color: var(--ts-brand); text-decoration: none; white-space: nowrap; }
.ops-add:hover { color: var(--ts-brand-dark); }
.ops-items { border-top: 1px solid var(--ts-border); }
.ops-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ts-border); }
.ops-item-addon { padding-left: 16px; }
.ops-item-addon .ops-item-name::before { content: "↳ "; color: var(--ts-muted); }
.ops-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops-item-name { font-weight: 700; color: var(--ts-ink); font-size: 15px; }
.ops-item-group { font-size: 12px; color: var(--ts-muted); }
.ops-item-domain { font-size: 13px; color: var(--ts-brand); font-weight: 600; }
.ops-item-opts { font-size: 12px; color: var(--ts-body); margin-top: 2px; line-height: 1.4; }
.ops-edit { display: inline-block; font-size: 12px; color: var(--ts-muted); text-decoration: none; margin-top: 5px; }
.ops-edit:hover { color: var(--ts-brand); }
.ops-item-price { text-align: right; flex: 0 0 auto; }
.ops-amt { display: block; font-weight: 800; color: var(--ts-ink); font-size: 15px; }
.ops-cycle { display: block; font-size: 11px; color: var(--ts-muted); text-transform: uppercase; letter-spacing: .04em; }
.ops-totals { padding-top: 14px; }
.ops-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ts-body); padding: 5px 0; }
.ops-row-discount { color: var(--ts-eco); }
.ops-row-total { margin-top: 8px; padding-top: 14px; border-top: 2px solid var(--ts-border); font-size: 18px; font-weight: 800; color: var(--ts-ink); }
.ops-total-amt { color: var(--ts-brand); }
.ops-promo { display: flex; gap: 8px; margin-top: 16px; }
.ops-promo .form-control { flex: 1; }
.ops-promo .btn { flex: 0 0 auto; }
.ops-promo-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 10px 14px; border-radius: var(--ts-radius); background: var(--ts-brand-soft); font-size: 13px; font-weight: 600; color: var(--ts-brand-dark); }
.ops-promo-applied a { color: var(--ts-muted); font-size: 12px; font-weight: 600; }
.ops-promo-applied a:hover { color: #be123c; }

/* ============================================================
   Auth — branded login / split card
   ============================================================ */
.ts-auth {
    display: flex; justify-content: center;
    padding: 40px 0 64px;
}
.ts-auth-card {
    display: grid; grid-template-columns: 1fr;
    width: 100%; max-width: 920px;
    background: #fff;
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-lg);
    box-shadow: var(--ts-shadow-card);
    overflow: hidden;
}
@media (min-width: 768px) { .ts-auth-card { grid-template-columns: 1fr 1fr; } }

/* Brand side */
.ts-auth-aside {
    position: relative; overflow: hidden; display: none;
    background: linear-gradient(150deg, var(--ts-brand-dark), #12246b);
    color: #dbeafe;
}
@media (min-width: 768px) { .ts-auth-aside { display: block; } }
.ts-auth-aside-glow {
    position: absolute; inset: 0; opacity: .9; pointer-events: none;
    background:
        radial-gradient(circle at 20% 15%, rgba(43,89,255,.45), transparent 45%),
        radial-gradient(circle at 90% 90%, rgba(99,102,241,.35), transparent 45%);
}
.ts-auth-aside-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 44px 40px; }
.ts-auth-logo { display: inline-flex; margin-bottom: 28px; }
.ts-auth-logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.ts-auth-logo .ts-logo-text { font-size: 24px; font-weight: 800; color: #fff; }
.ts-auth-logo .ts-logo-text span { color: #fff; }
.ts-auth-headline { color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.ts-auth-sub { color: #bfdbfe; font-size: 15px; line-height: 1.6; margin: 12px 0 28px; max-width: 22rem; }
.ts-auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ts-auth-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #e0e9ff; }
.ts-auth-points svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ts-eco); }
.ts-auth-aside-foot { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #93c5fd; }

/* Form side */
.ts-auth-form { padding: 44px 36px; }
@media (min-width: 576px) { .ts-auth-form { padding: 52px 48px; } }
.ts-auth-form-head { margin-bottom: 28px; }
.ts-auth-form-head h1 { font-size: 26px; font-weight: 800; margin: 0; }
.ts-auth-form-head p { color: var(--ts-muted); margin: 6px 0 0; font-size: 14px; }

.ts-field { margin-bottom: 18px; }
.ts-field > label { display: block; font-size: 13px; font-weight: 600; color: var(--ts-ink); margin-bottom: 7px; }
.ts-field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.ts-field-row label { font-size: 13px; font-weight: 600; color: var(--ts-ink); }
.ts-link-muted { font-size: 13px; color: var(--ts-muted); text-decoration: none; }
.ts-link-muted:hover { color: var(--ts-brand); }

.ts-input-wrap { position: relative; display: flex; align-items: center; }
.ts-input-wrap > i { position: absolute; left: 14px; color: var(--ts-muted); font-size: 14px; pointer-events: none; }
.ts-input-wrap input {
    width: 100%; height: 48px;
    border: 1px solid var(--ts-border); border-radius: var(--ts-radius);
    padding: 0 14px 0 40px; font-size: 14px; color: var(--ts-ink); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.ts-input-wrap input:focus { outline: none; border-color: var(--ts-brand); box-shadow: 0 0 0 4px rgba(43,89,255,.12); }
.ts-input-wrap .btn-reveal-pw {
    position: absolute; right: 6px; height: 36px; width: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--ts-muted); cursor: pointer; border-radius: var(--ts-radius);
}
.ts-input-wrap .btn-reveal-pw:hover { color: var(--ts-brand); background: var(--ts-surface); }

.ts-remember { display: flex; align-items: center; gap: 8px; margin: 4px 0 22px; font-size: 14px; color: var(--ts-body); cursor: pointer; }
.ts-remember input { width: 16px; height: 16px; accent-color: var(--ts-brand); }

.ts-auth-submit { width: 100%; height: 48px; font-size: 15px; }
.ts-auth-register { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--ts-muted); }
.ts-auth-register a { font-weight: 700; color: var(--ts-brand); text-decoration: none; margin-left: 4px; }
.ts-auth-register a:hover { color: var(--ts-brand-dark); }
.ts-auth-form .linked-accounts, .ts-auth-form .social-login { margin-top: 22px; }

/* ============================================================
   Toshost footer  (mirrors site_footer.blade.php — blue-gradient)
   Palette: blue-100 #dbeafe · blue-200 #bfdbfe · blue-300 #93c5fd
   ============================================================ */
footer#footer.footer { background: transparent; }   /* hide Nexus default footer if present */

/* ---------- Pre-footer CTA band ---------- */
.ts-precta {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--ts-brand), var(--ts-acc-cloud));
    color: #fff;
}
.ts-precta::before {                       /* grid-glow overlay (matches frontend) */
    content: ""; position: absolute; inset: 0; opacity: .3; pointer-events: none;
    background:
        radial-gradient(circle at 15% 10%, rgba(43,89,255,.10), transparent 45%),
        radial-gradient(circle at 85% 0%, rgba(99,102,241,.08), transparent 40%);
}
.ts-precta .container {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    padding: 56px 16px; text-align: center;
}
@media (min-width: 992px) {
    .ts-precta .container { flex-direction: row; justify-content: space-between; text-align: left; }
}
.ts-precta h2 { color: #fff; font-size: 28px; font-weight: 800; }
.ts-precta p { color: rgba(237,241,255,.9); margin-top: 8px; max-width: 36rem; }
.ts-precta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; flex-shrink: 0; }
.ts-precta .ts-btn-white { background: #fff; color: var(--ts-brand); border-radius: var(--ts-radius); padding: 14px 28px; font-weight: 600; text-decoration: none; }
.ts-precta .ts-btn-white:hover { background: var(--ts-ink); color: #fff; }
.ts-precta .ts-btn-glass { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: var(--ts-radius); padding: 14px 28px; font-weight: 600; text-decoration: none; }
.ts-precta .ts-btn-glass:hover { background: rgba(255,255,255,.2); }

/* ---------- Footer shell ---------- */
.ts-footer {
    position: relative; overflow: hidden;
    background: linear-gradient(to bottom, var(--ts-brand-dark), #12246b);
    color: #dbeafe;
}
.ts-footer-accent {                        /* thin gradient accent line at very top */
    position: relative; z-index: 10; height: 4px; width: 100%;
    background: linear-gradient(to right, var(--ts-eco), rgba(255,255,255,.7), var(--ts-acc-cloud));
}
.ts-footer-map {                           /* world-map / globe watermark */
    pointer-events: none; user-select: none;
    position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
    width: 60%; max-width: 48rem; opacity: .4; mix-blend-mode: screen; display: none;
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 78%);
            mask-image: radial-gradient(circle, #000 55%, transparent 78%);
}
@media (min-width: 768px) { .ts-footer-map { display: block; } }

.ts-footer-main { position: relative; z-index: 10; padding: 56px 0; }
@media (min-width: 992px) { .ts-footer-main { padding: 72px 0; } }
.ts-footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
@media (min-width: 576px) { .ts-footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ts-footer-grid { grid-template-columns: repeat(12, 1fr); gap: 32px; } }
.ts-footer-brand { grid-column: span 2; }
@media (min-width: 576px) { .ts-footer-brand { grid-column: span 3; } }
@media (min-width: 992px) { .ts-footer-brand { grid-column: span 4; } }
.ts-footer-cols { grid-column: span 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 576px) { .ts-footer-cols { grid-column: span 3; grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .ts-footer-cols { grid-column: span 8; grid-template-columns: repeat(5, 1fr); } }

.ts-footer-logo img { height: 36px; filter: brightness(0) invert(1); }
.ts-footer-logo .ts-logo-text { font-size: 24px; font-weight: 800; color: #fff; }
.ts-footer-logo .ts-logo-text span { color: var(--ts-brand); }
.ts-footer p.ts-footer-desc { margin-top: 16px; max-width: 24rem; font-size: 14px; line-height: 1.6; color: #bfdbfe; }

/* newsletter */
.ts-news { margin-top: 24px; max-width: 24rem; }
.ts-news label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.ts-news-row { display: flex; gap: 8px; }
.ts-news input {
    height: 44px; flex: 1; border-radius: var(--ts-radius);
    border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05);
    padding: 0 16px; font-size: 14px; color: #fff;
}
.ts-news input::placeholder { color: #93c5fd; }
.ts-news input:focus { outline: none; border-color: var(--ts-brand); background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px rgba(43,89,255,.2); }
.ts-news button {
    height: 44px; flex: 0 0 auto; border: 0; border-radius: var(--ts-radius);
    background: var(--ts-brand); color: #fff; padding: 0 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.ts-news button:hover { background: var(--ts-brand-dark); }
.ts-news .ts-news-fine { margin-top: 8px; font-size: 12px; color: #93c5fd; }

.ts-footer-contact { list-style: none; padding: 0; margin: 24px 0 0; }
.ts-footer-contact li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; color: #bfdbfe; }
.ts-footer-contact svg { width: 16px; height: 16px; color: var(--ts-brand); flex: 0 0 auto; }
.ts-footer-contact a { color: #bfdbfe; text-decoration: none; }
.ts-footer-contact a:hover { color: #fff; }
.ts-socials { display: flex; gap: 12px; margin-top: 20px; }
.ts-socials a {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ts-radius); background: rgba(255,255,255,.05); color: #dbeafe; transition: all .15s;
}
.ts-socials a:hover { background: var(--ts-brand); color: #fff; }
.ts-socials svg { width: 16px; height: 16px; }

.ts-footer-col h6 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 16px; }
.ts-footer-col ul { list-style: none; padding: 0; margin: 0; }
.ts-footer-col li { margin-bottom: 10px; }
.ts-footer-col a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #bfdbfe; text-decoration: none; text-transform: capitalize; transition: color .15s; }
.ts-footer-col a:hover { color: #fff; }
.ts-footer-col .ts-badge { border-radius: 4px; background: rgba(43,89,255,.2); color: var(--ts-brand); font-size: 10px; font-weight: 700; padding: 1px 6px; text-transform: uppercase; }

/* trust badges — glass cards */
.ts-trust { margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.15); display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .ts-trust { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .ts-trust { grid-template-columns: repeat(4, 1fr); } }
.ts-trust-item {
    display: flex; align-items: center; gap: 12px;
    border-radius: var(--ts-radius-lg); border: 1px solid rgba(255,255,255,.05);
    background: rgba(255,255,255,.06); padding: 16px; transition: border-color .15s;
}
.ts-trust-item:hover { border-color: rgba(255,255,255,.15); }
.ts-trust-ico { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ts-radius); background: rgba(16,185,129,.1); color: var(--ts-eco); }
.ts-trust-ico svg { width: 20px; height: 20px; }
.ts-trust-item .t { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.ts-trust-item .d { display: block; font-size: 12px; color: #bfdbfe; }

/* bottom bar */
.ts-footer-bottom { position: relative; z-index: 10; border-top: 1px solid rgba(255,255,255,.15); }
.ts-footer-bottom .container { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px; font-size: 12px; color: #bfdbfe; }
@media (min-width: 576px) { .ts-footer-bottom .container { flex-direction: row; justify-content: space-between; } }
.ts-footer-bottom .ts-bottom-right { display: flex; align-items: center; gap: 16px; }
.ts-pay { display: flex; align-items: center; gap: 10px; }
.ts-pay span.l { color: #93c5fd; }
.ts-pay .ts-pay-badge { border-radius: 6px; background: rgba(255,255,255,.05); padding: 4px 8px; font-size: 10px; font-weight: 700; color: #dbeafe; }
.ts-totop { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ts-radius); background: rgba(255,255,255,.05); color: #dbeafe; transition: all .15s; }
.ts-totop:hover { background: var(--ts-brand); color: #fff; }
.ts-totop svg { width: 16px; height: 16px; }