/* ==========================================================================
   CuteSMM Layout Theme
   Scope everything under #site-layout to comply with docs
   Brand color derives from meta theme-color: rgb(14,165,233)
   ========================================================================== */

#site-layout{
  --brand: rgb(14,165,233);
  --brand-600: rgb(2,132,199);
  --brand-50: rgb(240,249,255);
  --ink: rgb(16,24,40);
  --muted: rgb(107,114,128);
  --bg: rgb(249,250,251);
  --surface: rgb(255,255,255);
  --stroke: rgba(2,6,23,.08);
  --shadow-s: 0 4px 14px rgba(2,6,23,.08);
  --shadow-m: 0 10px 26px rgba(2,6,23,.12);
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ---------- Global helpers ---------- */
#site-layout .fw-black{ font-weight: 900; }
#site-layout .container, 
#site-layout .container-fluid{ padding-left: 16px; padding-right: 16px; }
#site-layout a{ text-decoration: none; }
#site-layout img{ max-width: 100%; height: auto; }

/* Focus ring */
#site-layout :where(a,button,.chip):focus-visible{
  outline: 0; box-shadow: 0 0 0 4px rgba(14,165,233,.25);
  border-radius: 10px;
}

/* Buttons */
#site-layout .btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-color: rgb(255,255,255);
  box-shadow: var(--shadow-s);
}
#site-layout .btn-outline-brand{
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: rgb(255,255,255);
  box-shadow: var(--shadow-s);
}
#site-layout .btn-icon{
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--stroke); background: var(--surface);
}

/* ----- NAV (public) ----- */
#site-layout .nav-wrap{
  background: var(--surface);
  border-bottom: 1px solid var(--stroke);
  position: sticky; top: 0; z-index: 1030;
}
#site-layout .navbar-brand .brand-logo{ width: 36px; height: 36px; object-fit: contain; }
#site-layout .navbar-brand .brand-text{ font-weight: 900; letter-spacing: .2px; }
#site-layout .nav-wrap .nav-link{ font-weight: 500; }
#site-layout .nav-wrap .nav-link:hover{ color: var(--brand); }

/* ----- SOCIALS ----- */
#site-layout .socials{ display:flex; gap:12px; }
#site-layout .socials a{
  width: 36px; height: 36px; display:inline-grid; place-items:center;
  border-radius: 50%; background: var(--brand-50); color: var(--brand);
}

/* ----- FOOTER ----- */
#site-layout .auth-landing-footer{
  margin-top: 40px; background: var(--surface); border-top:1px solid var(--stroke);
  color: var(--ink);
}
#site-layout .auth-landing-footer .site-title{ font-weight: 900; }
#site-layout .auth-landing-footer .f-list{ list-style:none; padding:0; margin:0; }
#site-layout .auth-landing-footer .f-list li{ margin:8px 0; }
#site-layout .auth-landing-footer .f-list a{ color: var(--ink); }
#site-layout .auth-landing-footer .divider{ border-color: var(--stroke); }
#site-layout .auth-landing-footer .foot-row{
  padding: 10px 0; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
@media (max-width: 575.98px){
  #site-layout .auth-landing-footer .foot-row{ flex-direction: column; text-align: center; }
}

/* ---------- CHIPS ---------- */
#site-layout .chip{
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--ink);
}
#site-layout .chip--tg{ color: rgb(34,169,246); background: rgba(34,169,246,.08); border-color: rgba(34,169,246,.25); }
#site-layout .chip--danger{ color: rgb(220,38,38); background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); }

/* ---------- SCROLLTOP ---------- */
#site-layout .scrolltop{
  position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 1px solid var(--stroke);
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-s);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease;
  transform: translateY(8px); z-index: 1040;
}
#site-layout .scrolltop.show{ opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- AUTH DASHBOARD LAYOUT ---------- */
#site-layout .wrapper{ display:flex; min-height: 100svh; }

/* Sidebar */
#site-layout .sidebar-wrap{
  width: 260px; flex: 0 0 260px; background: var(--surface); border-right:1px solid var(--stroke);
  position: sticky; top: 0; height: 100svh; overflow-y: auto; box-shadow: var(--shadow-s);
}
#site-layout .sidebar-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 14px; border-bottom:1px solid var(--stroke); }
#site-layout .sidebar-head .logo img{ width: 40px; height: 40px; object-fit: contain; }
#site-layout .auth-user-profile{ padding: 14px; border-bottom:1px solid var(--stroke); text-align:center; }
#site-layout .auth-user-profile .avatar img{ width: 72px; height: 72px; border-radius: 20px; object-fit: cover; }
#site-layout .auth-user-profile .username{ font-weight: 900; margin-top: 6px; }
#site-layout .auth-user-profile .balance{ color: var(--brand); font-weight: 700; }

#site-layout .sidebar-menu{ list-style:none; padding: 8px; margin:0; display:grid; gap: 2px; }
#site-layout .sidebar-menu li a{
  display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 10px; color: var(--ink);
}
#site-layout .sidebar-menu li.active a,
#site-layout .sidebar-menu li a:hover{ background: var(--brand-50); color: var(--brand); }
#site-layout .sidebar-menu i{ width: 18px; text-align:center; }

/* Content area */
#site-layout .inner-wrap{ flex: 1 1 auto; min-width: 0; }
#site-layout .top-nav{ position: sticky; top: 0; z-index: 1020; }
#site-layout .topbar{
  background: var(--surface); border-bottom:1px solid var(--stroke);
  padding: 10px 12px; display:flex; align-items:center; justify-content:space-between; gap: 12px;
}
#site-layout .topnav-title{ font-weight: 700; }

/* Mobile behavior */
@media (max-width: 991.98px){
  #site-layout .sidebar-wrap{
    position: fixed; left: 0; top: 0; height: 100svh; transform: translateX(-100%);
    transition: transform .2s ease; z-index: 1050;
  }
  #site-layout.sidebar-open .sidebar-wrap{ transform: translateX(0); }
  #site-layout .sidebar-overlay{
    position: fixed; inset: 0; background: rgba(2,6,23,.35); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .2s ease;
  }
  #site-layout.sidebar-open .sidebar-overlay{ opacity: 1; visibility: visible; }
}

/* Collapsed (desktop) */
@media (min-width: 992px){
  #site-layout.sidebar-collapsed .sidebar-wrap{ width: 84px; flex-basis: 84px; }
  #site-layout.sidebar-collapsed .sidebar-menu span,
  #site-layout.sidebar-collapsed .auth-user-profile .username,
  #site-layout.sidebar-collapsed .auth-user-profile .balance{ display:none; }
  #site-layout.sidebar-collapsed .auth-user-profile .avatar img{ width: 48px; height: 48px; }
}

/* ---------- TABLES & PAGINATION ---------- */
#site-layout .table{ background: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-s); }
#site-layout .pagination{ gap: 4px; }
#site-layout .pagination .page-link{ color: var(--ink); border-color: var(--stroke); }
#site-layout .pagination .active .page-link{ background: var(--brand); border-color: var(--brand); }

/* ---------- RTL helpers ---------- */
#site-layout.rtl .navbar .navbar-toggler{ margin-left: .5rem; }
#site-layout.rtl .sidebar-wrap{ border-right: 0; border-left: 1px solid var(--stroke); }
#site-layout.rtl .sidebar-wrap{ left: auto; right: 0; transform: translateX(100%); }
#site-layout.rtl.sidebar-open .sidebar-wrap{ transform: translateX(0); }


/* ========================== New Order (scoped) ========================== */
/* Scoped to the page */
.neworder {
  --brand: rgb(253,190,2);
  --ink: rgb(17,24,39);
  --muted: rgb(100,116,139);
  --line: rgb(228,231,235);
  --bg: rgb(250,250,252);
  --card: rgb(255,255,255);
  --ok: rgb(16,185,129);
  --warn: rgb(251,146,60);
  --shadow: 0 6px 20px rgba(2,8,23,.06);
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--ink);
}

/* Titles & badges */
.neworder .neworder__title { font-weight: 800; letter-spacing: .2px; }
.neworder .neworder__badge {
  background: linear-gradient(90deg, var(--ok), var(--brand));
  font-weight: 700; color: #000;
}

/* Stats cards */
.neworder .stats-box {
  display:flex; gap:14px; align-items:center;
  background: var(--card); border:1px solid var(--line);
  border-radius:16px; padding:16px 14px; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.neworder .stats-box:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2,8,23,.08); }
.neworder .stats-left { display:grid; place-items:center; }
.neworder .stats-icon {
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background: rgba(253,190,2,.12); color: var(--brand); font-size:18px; font-weight:700;
}
.neworder .stats-icon.orders { background: rgba(59,130,246,.12); color: rgb(59,130,246); }
.neworder .stats-icon.service { background: rgba(16,185,129,.12); color: rgb(16,185,129); }
.neworder .stats-icon.balance { background: rgba(251,146,60,.12); color: rgb(251,146,60); }
.neworder .stats-icon.status  { background: rgba(139,92,246,.12); color: rgb(139,92,246); }
.neworder .stats-txt { margin:0; color: var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.6px; }
.neworder .stats-title { margin:0; font-size:20px; font-weight:800; }

/* Filter toggle */
.neworder .filter-toggle {
  border:1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius:12px; padding:.45rem .75rem; display:inline-flex; align-items:center; gap:.5rem;
  box-shadow: var(--shadow);
}
.neworder .filter-toggle .caret { transition: transform .2s ease; }
.neworder .filter-toggle.collapsed .label { content:"Show Filter"; }
.neworder .filter-toggle.collapsed .caret { transform: rotate(180deg); }

/* Brand shortcuts */
.neworder .new-bgss { background: var(--bg); border:1px solid var(--line); border-radius:16px; padding:14px; }
.neworder .brand-category {
  display:flex; align-items:center; gap:10px; width:100%;
  border:1px solid var(--line); border-radius:14px; padding:10px 12px;
  background: var(--card); text-decoration:none; color: var(--ink); font-weight:700;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.neworder .brand-category:hover { transform: translateY(-1px); border-color: rgba(2,8,23,.12); box-shadow: var(--shadow); }
.neworder .sershortcut-icon {
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:16px; font-weight:800;
}
.neworder .brand-fb { background: rgb(24,119,242); }
.neworder .brand-ig { background: linear-gradient(135deg, rgb(254,218,117), rgb(250,126,30), rgb(214,41,118), rgb(150,47,191), rgb(79,91,213)); }
.neworder .brand-x { background: rgb(23,23,23); }
.neworder .brand-yt { background: rgb(255,0,0); }
.neworder .brand-sp { background: rgb(30,215,96); color: rgb(17,24,39); }
.neworder .brand-tt { background: rgb(0,0,0); }
.neworder .brand-li { background: rgb(10,102,194); }
.neworder .brand-gg { background: rgb(66,133,244); }
.neworder .brand-tg { background: rgb(0,136,204); }
.neworder .brand-dc { background: rgb(88,101,242); }
.neworder .brand-sc { background: rgb(255,252,0); color: rgb(17,24,39); }
.neworder .brand-twc { background: rgb(145,70,255); }
.neworder .brand-traffic { background: rgb(14,165,233); }
.neworder .brand-reviews { background: rgb(250,204,21); color: rgb(17,24,39); }
.neworder .brand-other { background: rgb(148,163,184); }
.neworder .brand-all { background: var(--brand); color: rgb(17,24,39); }
.neworder .cate-shortcut-txt { font-weight:700; font-size:14px; }

/* Left card + tabs */
.neworder .neworder-card { border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow); }
.neworder .tabs-sky { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.neworder .tabs-sky .tab-ico,
.neworder .tabs-sky .tab-pill {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius:12px; padding:.5rem .8rem; text-decoration:none; font-weight:700;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.neworder .tabs-sky .tab-ico:hover,
.neworder .tabs-sky .tab-pill:hover { transform: translateY(-1px); border-color: rgba(2,8,23,.15); }
.neworder .tabs-sky .tab-pill i { color: var(--brand); }

/* Form */
.neworder .form-group { margin-bottom: 12px; }
.neworder .search-form-group .input-wrapper { position:relative; }
.neworder .search-ico { position:absolute; top:50%; left:12px; transform:translateY(-50%); color: var(--muted); }
.neworder #template-input { padding-left: 38px; }
.neworder .panel-body { background: var(--bg); padding:12px; }

/* Submit CTA */
.neworder .cta-submit {
  width:100%; border-radius:12px; padding:.75rem 1rem; border:0;
  background: linear-gradient(90deg, var(--brand), rgb(255,214,84));
  color:#000; font-weight:900; letter-spacing:.3px; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.neworder .cta-submit:hover { transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 14px 30px rgba(2,8,23,.12); }

/* Right: Best Services */
.neworder .bestsvc-grid {
  display:grid; gap:12px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 576px){
  .neworder .bestsvc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.neworder .bestsvc-card {
  border:1px solid var(--line); border-radius:16px; background: var(--card);
  box-shadow: var(--shadow); padding:14px; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative; overflow:hidden;
}
.neworder .bestsvc-card::after{
  content:""; position:absolute; inset:auto -30% 0; height:6px; background: linear-gradient(90deg, var(--brand), rgb(255,214,84));
  opacity:.8;
}
.neworder .bestsvc-card:hover { transform: translateY(-2px); border-color: rgba(2,8,23,.12); box-shadow: 0 12px 28px rgba(2,8,23,.08); }

.neworder .bestsvc-top { display:flex; align-items:center; gap:10px; }
.neworder .bestsvc-icon {
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:800;
  background: var(--brand); color: rgb(17,24,39);
}
.neworder .is-fb .bestsvc-icon { background: rgb(24,119,242); color: #fff; }
.neworder .is-ig .bestsvc-icon { background: rgb(225,48,108); }
.neworder .is-yt .bestsvc-icon { background: rgb(255,0,0); }
.neworder .is-x  .bestsvc-icon { background: rgb(23,23,23); }
.neworder .is-sp .bestsvc-icon { background: rgb(30,215,96); color: rgb(17,24,39); }
.neworder .is-tt .bestsvc-icon { background: rgb(0,0,0); color:#fff; }

.neworder .bestsvc-title h6 { font-weight:800; }
.neworder .badge.id { background: rgba(2,8,23,.06); color: var(--ink); border-radius:10px; font-weight:800; }
.neworder .bestsvc-price { font-weight:900; font-size:18px; }

.neworder .bestsvc-meta { display:flex; flex-wrap:wrap; gap:8px 12px; margin:10px 0 8px; }
.neworder .bestsvc-meta .meta { display:inline-flex; align-items:center; gap:6px; font-size:13px; color: var(--muted); }
.neworder .bestsvc-meta strong { color: var(--ink); }

.neworder .bestsvc-footer {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.neworder .bestsvc-footer .range { color: var(--muted); font-size:13px; }
.neworder .copy-id { border-radius:10px; }

/* Tabs on right */
.neworder .dash-tabs .nav-link { border:1px solid var(--line)!important; border-bottom: 0!important; border-top-left-radius:12px!important; border-top-right-radius:12px!important; }
.neworder .dash-tabs .nav-link.active { background: var(--card); font-weight:900; }

/* Notes */
.neworder .neworder__note { font-weight:800; color: var(--ink); }
.neworder .neworder__note b { color: var(--brand); }

/* Accessibility & motion */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}

/* =================== Updates Page (scoped) =================== */
.updates-page { font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

.updates-page .btn-gradient{
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
  color: rgb(255,255,255);
  border: 0;
  border-radius: 12px;
  font-weight: 800;
}
.updates-page .btn-gradient:focus,
.updates-page .btn-gradient:hover{ filter: brightness(1.05); }

.updates-page .updates-search .form-control{
  border-radius: 0 12px 12px 0;
  border-left: 0;
}
.updates-page .updates-search .input-group-text{
  border-radius: 12px 0 0 12px;
}

/* Update card */
.updates-page .update-card{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 16px 16px 16px 12px;
  border-radius: 16px;
  background: rgb(255,255,255);
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 12px 24px rgba(2,6,23,.06);
  margin-bottom: 12px;
}
.updates-page .update-card__rail{
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, rgb(14,165,233), rgb(99,102,241));
  border-radius: 8px 0 0 8px;
}
.updates-page .update-card__icon .icon-circle{
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgb(255,255,255);
  background: linear-gradient(135deg, rgb(99,102,241), rgb(139,92,246));
  box-shadow: 0 10px 18px rgba(99,102,241,.25);
}
.updates-page .update-card__head{
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  margin-bottom: 8px;
}
.updates-page .update-card__service,
.updates-page .update-card__date{
  font-weight: 700; color: rgb(17,24,39);
}
.updates-page .update-card__service .label,
.updates-page .update-card__date .label{ color: rgb(55,65,81); font-weight: 700; }
.updates-page .update-card__service .value,
.updates-page .update-card__date .value{ font-weight: 900; }

.updates-page .update-card__content{
  display: flex; align-items: flex-start; gap: 8px;
  color: rgb(31,41,55); line-height: 1.5;
}
.updates-page .update-card__actions .btn{
  border-radius: 10px; border: 1px solid rgba(2,6,23,.08);
}

/* Dropdown menu polishing */
.updates-page .update-filter-dropdown .dropdown-menu{
  border-radius: 12px; border: 1px solid rgba(2,6,23,.08);
}
.updates-page .dropdown-item.active{
  background: rgba(99,102,241,.12); color: rgb(17,24,39); font-weight: 800;
}

/* Pagination */
.updates-page .pagination .page-link{
  border-radius: 10px; border: 1px solid rgba(2,6,23,.12); color: rgb(17,24,39);
}
.updates-page .pagination .page-item.active .page-link{
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
  border-color: transparent; color: rgb(255,255,255);
}

/* RTL minor helpers */
.rtl-nav .dropdown-menu{ text-align: right; }

/* Small devices */
@media (max-width: 575.98px){
  .updates-page .update-card{ grid-template-columns: auto 1fr; }
  .updates-page .update-card__actions{ grid-column: 1 / -1; justify-self: end; }
}



/* ================= Orders Page (scoped) ================= */
.orders-page { font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

/* Search bar */
.orders-page .orders-search .form-control{ border-radius: 0 14px 14px 0; border-left: 0; }
.orders-page .orders-search .input-group-text{ border-radius: 14px 0 0 14px; }

/* Pills */
.orders-page .orders-status-pills{ gap: 8px; flex-wrap: wrap; }
.orders-page .orders-status-pills .nav-link{
  border-radius: 999px; font-weight: 700;
  color: rgb(17,24,39); background: rgb(241,245,249);
  padding: 8px 14px;
}
.orders-page .orders-status-pills .nav-link.active{
  color: rgb(255,255,255);
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
  box-shadow: 0 8px 18px rgba(14,165,233,.24);
}

/* Table look */
.orders-page .well-ord{ background: rgb(255,255,255); border: 1px solid rgba(2,6,23,.06); }
.orders-page .table-head{ background: rgb(248,250,252); z-index: 1; }
.orders-page table thead th{ font-weight: 800; color: rgb(17,24,39); border: 0; }
.orders-page table tbody tr{ border-top: 1px solid rgba(2,6,23,.06); }
.orders-page table tbody tr:hover{ background: rgba(14,165,233,.04); }

/* Order id copy button */
.orders-page .copy-order{ border-radius: 10px; border: 1px solid rgba(2,6,23,.1); }

/* Status chip (uses order['status'] as class) */
.orders-page .status-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-weight: 800;
  border: 1px solid transparent; text-transform: capitalize;
}
.orders-page .btn-bgs.pending, .orders-page .btn-bgs.Pending{ background: rgba(253,230,138,.35); color: rgb(161,98,7); border-color: rgba(253,230,138,.8); }
.orders-page .btn-bgs.inprogress, .orders-page .btn-bgs.Inprogress{ background: rgba(191,219,254,.45); color: rgb(30,64,175); border-color: rgba(191,219,254,.9); }
.orders-page .btn-bgs.processing, .orders-page .btn-bgs.Processing{ background: rgba(187,247,208,.45); color: rgb(22,101,52); border-color: rgba(187,247,208,.9); }
.orders-page .btn-bgs.partial, .orders-page .btn-bgs.Partial{ background: rgba(254,215,170,.45); color: rgb(154,52,18); border-color: rgba(254,215,170,.9); }
.orders-page .btn-bgs.completed, .orders-page .btn-bgs.Completed{ background: rgba(187,247,208,.55); color: rgb(22,101,52); border-color: rgba(187,247,208,.9); }
.orders-page .btn-bgs.canceled, .orders-page .btn-bgs.Canceled{ background: rgba(254,202,202,.55); color: rgb(153,27,27); border-color: rgba(254,202,202,.9); }

/* Pagination */
.orders-page .pagination .page-link{ border-radius: 10px; color: rgb(17,24,39); border: 1px solid rgba(2,6,23,.12); }
.orders-page .pagination .page-item.active .page-link{
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
  color: rgb(255,255,255); border-color: transparent;
}

/* Mobile: turn table rows into cards */
@media (max-width: 991.98px){
  .orders-page table thead { display: none; }
  .orders-page table tbody tr{ display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px; border-radius: 16px; margin-bottom: 12px; box-shadow: 0 12px 24px rgba(2,6,23,.06); }
  .orders-page table tbody td{ display: flex; justify-content: space-between; align-items: center; border: 0 !important; padding: 6px 0; }
  .orders-page table tbody td::before{
    content: attr(data-label);
    font-weight: 800; color: rgb(55,65,81); margin-right: 10px;
  }
  .orders-page .order-actions{ justify-content: flex-end; }
}

/* RTL helpers */
.rtl-nav .nav-link { direction: rtl; }


/* Add Funds page custom styles (scoped) */
.addfunds-page {
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* User chip */
.add-wrap .user-thumb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.adds-title {
  font-weight: 800;
  letter-spacing: .2px;
}

.well-adds.card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .75rem;
}

.invoice-btn {
  white-space: nowrap;
}

/* Inputs & labels */
.form-label i { opacity: .85; }

/* Accordion polish */
.accordion-button i { opacity: .9; }
.accordion-button:not(.collapsed) {
  background: rgba(14,165,233,.08);
  color: rgb(14,165,233);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
}

/* Table tweaks */
.table thead th { font-weight: 700; }
.nowrap { white-space: nowrap; }

/* Invoice print window wrapper (when injected) */
.invoice-print {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: .5rem;
}

/* RTL helpers if needed */
.rtl-table { direction: rtl; }
.rtl-pagination { direction: rtl; }
.rtl-form { direction: rtl; }

/* ================= Affiliates page (scoped) ================= */
#affiliates-page{ font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; }
#affiliates-page .card-glass{ background: rgb(255,255,255); border:1px solid rgba(2,6,23,.08); border-radius: 18px; box-shadow: 0 10px 24px rgba(2,8,23,.06); }

/* Info cards */
#affiliates-page .aff-info-card{ border:1px solid rgba(2,6,23,.08); border-radius: 16px; }
#affiliates-page .aff-info-icon{
  flex:0 0 48px; height:48px; border-radius:12px; display:grid; place-items:center; color:rgb(255,255,255);
  background: linear-gradient(135deg, rgb(14,165,233), rgb(2,132,199)); box-shadow: 0 8px 18px rgba(14,165,233,.25);
}
#affiliates-page .aff-info-icon.is-green{ background: linear-gradient(135deg, rgb(16,185,129), rgb(2,132,199)); }
#affiliates-page .aff-info-icon.is-amber{ background: linear-gradient(135deg, rgb(245,158,11), rgb(234,88,12)); }
#affiliates-page .aff-ref{ display:inline-block; padding:.35rem .5rem; background: rgb(246,248,252); border:1px solid rgba(2,6,23,.08); border-radius: 10px; }

/* Stats */
#affiliates-page .aff-stat{
  height:100%; background: rgb(255,255,255); border:1px solid rgba(2,6,23,.08); border-radius:16px; padding:12px;
  box-shadow: 0 6px 18px rgba(2,8,23,.06);
}
#affiliates-page .aff-stat-ico{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:rgb(255,255,255);
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233));
}
#affiliates-page .aff-stat-label{ color: rgb(75,85,99); font-weight: 700; margin-top: 8px; }
#affiliates-page .aff-stat-val{ font-weight: 900; color: rgb(17,24,39); font-size: 1.1rem; }

/* Payout CTA */
#affiliates-page .aff-cta-ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:rgb(55,43,11);
  background: radial-gradient(60px 60px at 30% 30%, rgba(253,190,2,.22), rgba(255,255,255,.85)),
              linear-gradient(135deg, rgb(253,190,2), rgb(255,205,75));
  border:2px solid rgba(253,190,2,.25);
}
#affiliates-page .payout-btn{ height:48px; line-height:48px; padding:0 18px; border-radius:14px; font-weight:800; }

/* Payments table */
#affiliates-page .badge.bg-soft{
  background: rgba(14,165,233,.12); color: rgb(14,165,233); border:1px solid rgba(14,165,233,.25); padding:.35rem .6rem;
  font-weight:800; border-radius: 999px;
}

/* Pagination polish (works with existing Twig logic) */
#affiliates-page .pagination .page-link{ border-radius: 10px; border:1px solid rgba(2,6,23,.12); color: rgb(17,24,39); }
#affiliates-page .pagination .page-item.active .page-link{
  background: linear-gradient(135deg, rgb(99,102,241), rgb(14,165,233)); color: rgb(255,255,255); border-color: transparent;
}

/* RTL helpers */
#affiliates-page.rtl .copy-ref i{ margin-inline: 0  .5rem; }

/* ==========================================================================
   SIGN-IN PAGE — LIGHT, COLORFUL THEME (RGB only) • Bootstrap 5 friendly
   Scope: #page-signin (CuteSMM theming requirement)
   ========================================================================== */
/* ==========================================================================
   LIGHT THEME — COLORFUL UI (RGB/RGBA only) — Scoped to #page-signin
   ========================================================================== */

/* ==========================================================================
   SIGN IN THEME — PRO, LIGHT, RESPONSIVE
   Scope: #page-signin only
   Tech: Bootstrap 5, FA, Roboto | Primary brand rgb(253,190,2)
   ========================================================================== */

#page-signin {
  /* -------- Theme Tokens (RGB/A only) -------- */
  --brand: rgb(253,190,2);
  --brand-strong: rgb(255,170,0);
  --ink: rgb(16,24,40);
  --muted: rgb(102,112,133);
  --bg: rgb(248,249,251);
  --surface: rgb(255,255,255);
  --surface-2: rgb(252,252,253);
  --stroke: rgba(2,6,23,.08);
  --ring: rgba(253,190,2,.4);

  --grad-brand: linear-gradient(135deg, rgba(253,190,2,1), rgba(255,142,38,1));
  --shadow-s: 0 6px 16px rgba(2,6,23,.08);
  --shadow-m: 0 12px 28px rgba(2,6,23,.12);
  --shadow-l: 0 20px 48px rgba(2,6,23,.16);

  --r-s: 10px; --r-m: 14px; --r-l: 18px; --r-xl: 22px;
  --fw-black: 900;

  color: var(--ink);
  background: var(--bg);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Focus ring */
#page-signin :focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--ring) !important;
  border-radius: 10px;
}

/* =========================
   GLOBAL ELEMENTS & UTILS
   ========================= */
#page-signin .section-padding { padding: 72px 0; }
#page-signin .section-padding-sm { padding: 40px 0; }
#page-signin .text-accent { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
#page-signin .btn-brand {
  background: var(--grad-brand); color: rgb(32,32,32); border: 0;
  font-weight: var(--fw-black); border-radius: 999px; box-shadow: var(--shadow-m);
}
#page-signin .btn-brand:hover { filter: brightness(.97); }
#page-signin .btn-outline-brand {
  border: 2px solid var(--brand); color: var(--ink); background: transparent;
  font-weight: var(--fw-black); border-radius: 999px;
}
#page-signin .btn-outline-brand:hover { background: var(--brand); color: rgb(40,40,40); }

/* Input groups */
#page-signin .input-group-text { background: var(--surface); border-color: var(--stroke); }
#page-signin .form-control, #page-signin .form-select { border-color: var(--stroke); }
#page-signin .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }

/* Or divider */
#page-signin .or-divider { position: relative; text-align: center; }
#page-signin .or-divider::before {
  content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:1px; background: var(--stroke);
}
#page-signin .or-divider span { background: var(--surface); padding: 0 10px; position: relative; z-index: 1; color: var(--muted); }

/* Back to top */
#page-signin .back-to-top-btn{
  position: fixed; right: 14px; bottom: 14px;
  width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: var(--grad-brand); color: rgb(32,32,32);
  display: none; align-items: center; justify-content: center; box-shadow: var(--shadow-m);
}
#page-signin .back-to-top-btn.show{ display:flex; }

/* =========================
   HERO
   ========================= */
#page-signin .hero-auth-section {
  background: linear-gradient(180deg, rgba(253,190,2,.08), rgba(255,142,38,.06));
}
#page-signin .hero-title { font-weight: var(--fw-black); }
#page-signin .hero-subtitle { color: var(--muted); }
#page-signin .auth-card {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--r-xl); box-shadow: var(--shadow-l); padding: 18px;
}
#page-signin .auth-card-header { border-bottom: 1px dashed var(--stroke); padding-bottom: 10px; }
#page-signin .auth-title { font-weight: var(--fw-black); }
#page-signin .btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--stroke); border-radius: 999px; background: var(--surface-2); font-weight: 700;
  padding: 10px 14px; box-shadow: var(--shadow-s);
}
#page-signin .hero-media-wrapper { position: relative; }
#page-signin .hero-image {
  width: 100%; height: auto; border-radius: var(--r-xl);
  box-shadow: 0 30px 70px rgba(2,6,23,.18);
}
#page-signin .hero-badge{
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: rgb(32,32,32);
  background: var(--grad-brand); box-shadow: var(--shadow-m);
}
#page-signin .hero-badge.fb{ left: -10px; top: 18%; }
#page-signin .hero-badge.tk{ right: -12px; top: 36%; }
#page-signin .hero-badge.yt{ left: 18%; bottom: -12px; }

/* =========================
   MINI STATS
   ========================= */
#page-signin .stat-item{
  background: var(--surface); border:1px solid var(--stroke); border-radius: var(--r-l);
  box-shadow: var(--shadow-m); padding: 16px; text-align:center;
}
#page-signin .stat-icon{
  width:46px; height:46px; border-radius:12px; margin: 0 auto 10px;
  display:grid; place-items:center; background: rgba(253,190,2,.15); color: var(--ink);
  border:1px solid rgba(253,190,2,.35);
}
#page-signin .stat-value{ font-weight: var(--fw-black); font-size: 1.6rem; }
#page-signin .stat-label{ color: var(--muted); font-size: .925rem; }

/* =========================
   SERVICES (Pills)
   ========================= */
#page-signin .services-board{ background: var(--surface); border:1px solid var(--stroke); border-radius: var(--r-xl); padding: 18px; box-shadow: var(--shadow-l); }
#page-signin .services-pills{
  display:flex; gap: 10px; overflow:auto; padding-bottom: 6px;
}
#page-signin .pill-item{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid var(--stroke);
  background: rgb(248,250,252); font-weight: 800; color: var(--ink);
}
#page-signin .pill-item.active{ border-color: rgba(253,190,2,.45); background: rgba(253,190,2,.12); }
#page-signin .service-pane-title{ font-weight: var(--fw-black); }

/* =========================
   ABOUT SPOTLIGHT
   ========================= */
#page-signin .as-eyebrow{ color: var(--brand-strong); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
#page-signin .as-title{ font-weight: var(--fw-black); }
#page-signin .as-accent{ background: var(--grad-brand); -webkit-background-clip: text; color: transparent; }
#page-signin .as-visual{ position: relative; }
#page-signin .as-person{
  width:100%; height:auto; border-radius: var(--r-xl); box-shadow: var(--shadow-l);
}
#page-signin .as-badge-card{
  position:absolute; right: -16px; top: 14px; background: rgba(255,255,255,.85);
  border:1px solid var(--stroke); border-radius: 16px; padding: 10px 12px; display:flex; gap:10px; align-items:center; backdrop-filter: blur(6px); box-shadow: var(--shadow-m);
}
#page-signin .as-badge-icon{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background: rgba(253,190,2,.18); border:1px solid rgba(253,190,2,.35);
}
#page-signin .as-badge-title{ font-weight: 800; }
#page-signin .as-badge-kpi{ color: rgb(22,163,74); font-weight: 900; }
#page-signin .as-sticker{
  position:absolute; left: 8%; bottom:-16px; background: var(--surface);
  border:1px dashed var(--stroke); border-radius: 999px; padding: 8px 12px; display:flex; gap:8px; align-items:center; box-shadow: var(--shadow-s);
}
#page-signin .as-ig-bubble{
  position:absolute; left: -10px; top: 40%; width: 44px; height: 44px; border-radius: 50%;
  display:grid; place-items:center; background: var(--grad-brand); color: rgb(32,32,32); box-shadow: var(--shadow-m);
}

/* =========================
   HOW IT WORKS (Timeline v3)
   ========================= */
#page-signin .how-v3{ position: relative; }
#page-signin .hiw-track{
  position: absolute; left: 0; right: 0; top: 120px; height: 4px; background: rgba(2,6,23,.06);
  border-radius: 999px; overflow: hidden;
}
#page-signin .hiw-track-progress{
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: var(--grad-brand); transition: width .4s ease;
}
#page-signin .hiw-step{
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-l); padding: 16px;
  box-shadow: var(--shadow-m); height: 100%;
}
#page-signin .hiw-step-top{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 10px; }
#page-signin .hiw-step-badge{
  display:inline-flex; align-items:center; justify-content:center; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(253,190,2,.14); border:1px solid rgba(253,190,2,.38); font-weight: 900;
}
#page-signin .hiw-step-ico{ font-size: 22px; color: var(--brand-strong); }
#page-signin .hiw-step-title{ font-weight: var(--fw-black); margin-bottom: 6px; }
#page-signin .hiw-step-text{ color: var(--muted); }
#page-signin .hiw-step-meta{ display:flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }

/* =========================
   MARKETS (Cards)
   ========================= */
#page-signin .mk-card{
  position: relative; display:flex; gap: 12px; align-items:center; padding: 14px;
  border:1px solid var(--stroke); background: var(--surface); border-radius: var(--r-l);
  text-decoration:none; color: inherit; box-shadow: var(--shadow-m); overflow:hidden;
}
#page-signin .mk-card:hover .mk-shine{ opacity:1; transform: translateX(120%); }
#page-signin .mk-flag img{ border-radius: 8px; box-shadow: var(--shadow-s); }
#page-signin .mk-card-title{ font-weight: 900; margin-bottom: 2px; }
#page-signin .mk-card-text{ color: var(--muted); margin:0; }
#page-signin .mk-shine{
  content:""; position:absolute; left:-120%; top:0; width: 40%; height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-60%); opacity:0; transition: transform .7s ease, opacity .7s ease;
}
#page-signin .mk-ring{
  position:absolute; inset:-1px; border-radius: inherit; border:1px solid rgba(253,190,2,.25); pointer-events:none;
}

/* =========================
   TESTIMONIALS v4
   ========================= */
#page-signin .t4-grid{
  display:grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 16px;
}
@media (min-width: 768px){ #page-signin .t4-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
#page-signin .t4-card{
  position: relative; background: var(--surface); border:1px solid var(--stroke); border-radius: var(--r-xl);
  padding: 16px; box-shadow: var(--shadow-l); overflow: hidden;
}
#page-signin .t4-top{ display:flex; align-items:center; justify-content: space-between; }
#page-signin .t4-badge{
  width: 40px; height: 40px; border-radius: 12px; display:grid; place-items:center;
  background: rgba(253,190,2,.15); border:1px solid rgba(253,190,2,.35);
}
#page-signin .t4-stars{ color: var(--brand-strong); font-size: .95rem; }
#page-signin .t4-headline{ font-weight: var(--fw-black); margin: 10px 0 6px; }
#page-signin .t4-quote{ position: relative; margin: 0; }
#page-signin .t4-text{ color: var(--muted); margin: 10px 0; }
#page-signin .t4-author{ display:flex; gap:10px; align-items:center; }
#page-signin .t4-avatar{ border-radius: 999px; box-shadow: var(--shadow-s); }
#page-signin .t4-name{ font-weight: 900; }
#page-signin .t4-loc{ color: var(--muted); font-size: .9rem; }

/* =========================
   PAYMENTS v4 — UNIQUE, GLASSY, 3D
   ========================= */
#page-signin .payments-v4{
  background: linear-gradient(180deg, rgba(253,190,2,.06), rgba(255,142,38,.04));
  position: relative;
}
#page-signin .payv4-eyebrow{
  color: var(--brand-strong); font-weight: 900; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px;
}
#page-signin .payv4-title{ font-weight: var(--fw-black); }
#page-signin .payv4-grad{ background: var(--grad-brand); -webkit-background-clip: text; color: transparent; }
#page-signin .payv4-subtitle{ color: var(--muted); }

#page-signin .payv4-chips{ display:flex; flex-wrap: wrap; gap:10px; margin: 12px 0 18px; }
#page-signin .payv4-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius: 999px; background: rgba(253,190,2,.12);
  border:1px solid rgba(253,190,2,.32); font-weight: 800; color: var(--ink);
}

/* Grid */
#page-signin .pmv4-grid{
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px;
}
@media (min-width: 576px){ #page-signin .pmv4-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 992px){ #page-signin .pmv4-grid{ grid-template-columns: repeat(4,minmax(0,1fr)); } }

/* Card */
#page-signin .pmv4-card{
  position: relative; isolation: isolate; overflow: hidden;
  background: rgba(255,255,255,.7); backdrop-filter: blur(10px);
  border: 1px solid rgba(2,6,23,.08); border-radius: var(--r-xl);
  box-shadow: var(--shadow-l);
  display:flex; align-items:center; justify-content:center; flex-direction: column;
  gap: 10px; padding: 20px 12px; text-align:center; cursor: default;

  /* 3D tilt variables set in JS */
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .15s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
#page-signin .pmv4-card:hover{
  border-color: rgba(253,190,2,.38);
  box-shadow: 0 24px 60px rgba(2,6,23,.22);
}
#page-signin .pmv4-card img{ max-width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(2,6,23,.12)); }

/* Aura + Shine */
#page-signin .pmv4-aura{
  content:""; position: absolute; inset: -30%; z-index: -1;
  background: radial-gradient( circle at var(--tx,50%) var(--ty,50%), rgba(253,190,2,.25), rgba(255,255,255,0) 45% );
  transition: opacity .3s ease; opacity: .6;
}
#page-signin .pmv4-shine{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.5) 35%, rgba(255,255,255,0) 50%);
  transform: translateX(-120%); opacity: 0;
}
#page-signin .pmv4-card:hover .pmv4-shine{
  animation: pmv4Sweep 1200ms ease forwards;
}
@keyframes pmv4Sweep{
  0%{ transform: translateX(-120%); opacity: 0; }
  15%{ opacity: .6; }
  100%{ transform: translateX(120%); opacity: 0; }
}

/* Name */
#page-signin .pmv4-name{
  font-weight: 800; color: var(--ink); font-size: .95rem; opacity: .95;
}

/* Tooltip (BS) - subtle accent */
#page-signin .tooltip .tooltip-inner{
  background: var(--ink); color: rgb(255,255,255);
  border-radius: 8px; border:1px solid rgba(253,190,2,.35);
}

/* Hover ring */
#page-signin .pmv4-card::after{
  content:""; position:absolute; inset:0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(253,190,2,.25); opacity: 0; transition: opacity .25s ease;
}
#page-signin .pmv4-card:hover::after{ opacity: 1; }

/* =========================
   FAQ
   ========================= */
#page-signin .accordion-button{ font-weight: 800; }
#page-signin .accordion-button:not(.collapsed){ color: var(--ink); background: rgba(253,190,2,.08); }
#page-signin .accordion-item{ border-color: var(--stroke); }

/* =========================
   RTL Tweaks
   ========================= */
#page-signin.rtl{ direction: rtl; }
#page-signin.rtl .input-group > :first-child{ border-right: 0; }
#page-signin.rtl .hero-content, #page-signin.rtl .section-header{ text-align: right; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 991.98px){
  #page-signin .hero-auth-section .hero-media-wrapper{ display:none; }
}








/* =========================================================================
   STYLE: Sign In Page (Light, Colorful, Mobile-first)
   - All selectors prefixed with #page-signin  (CuteSMM docs)
   - RGB/RGBA colors only
   - Balanced shadows, rounded corners, friendly motion
   ========================================================================= */

/* ---------------------------
   0) CSS Variables (Theme)
   --------------------------- */

/* =========================================================
   TYPOGRAPHY STANDARDIZATION (scoped to #page-signin)
   - Paste at the very end of your CSS
   - Unifies font family + a single responsive type scale
   ========================================================= */

#page-signin{
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Line-heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* Responsive type scale (rem = 16px base) */
  --fs-xs: 0.8125rem;                                     /* 13 */
  --fs-sm: 0.875rem;                                       /* 14 */
  --fs-base: 1rem;                                         /* 16 */
  --fs-md: 1.125rem;                                       /* 18 */
  --fs-lg: 1.25rem;                                        /* 20 */
  --fs-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);         /* 22–28 */
  --fs-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);       /* 28–36 */
  --fs-3xl: clamp(2rem, 1.3rem + 2.6vw, 2.75rem);          /* 32–44 */
  --fs-4xl: clamp(2.25rem, 1.4rem + 3vw, 3.25rem);         /* 36–52 */
}

/* Base text everywhere */
#page-signin,
#page-signin p,
#page-signin li,
#page-signin label,
#page-signin input,
#page-signin button,
#page-signin .form-control{
  font-family: var(--font-family);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

/* Headings (consistent weights & scale) */
#page-signin h1,
#page-signin .h1,
#page-signin .hero-title{
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 900;
}
#page-signin h2,
#page-signin .h2,
#page-signin .section-title{
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: 900;
}
#page-signin h3,
#page-signin .h3,
#page-signin .service-pane-title,
#page-signin .hiw-step-title,
#page-signin .t4-headline{
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 800;
}
#page-signin h4,
#page-signin .h4,
#page-signin .auth-title,
#page-signin .mk-card-title,
#page-signin .ap-benefit-title{
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 800;
}

/* Lead / subcopy */
#page-signin .lead,
#page-signin .section-subtitle,
#page-signin .hero-subtitle,
#page-signin .as-lead,
#page-signin .hiw-lead{
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

/* Small UI text */
#page-signin .form-label,
#page-signin .form-check-label,
#page-signin .payv4-note,
#page-signin .t4-loc,
#page-signin .mk-card-text,
#page-signin .faq-accordion-wrapper .accordion-body,
#page-signin .ap-note{
  font-size: var(--fs-sm);
}

/* Buttons / chips / pills (one size) */
#page-signin .btn,
#page-signin .pill-item,
#page-signin .payv4-chip,
#page-signin .whyv2-chip,
#page-signin .cta-chip,
#page-signin .pmv3-chip,
#page-signin .payv4-actions .btn,
#page-signin .hiw-step-cta.btn{
  font-size: var(--fs-base);
  font-weight: 800;
}
#page-signin .btn.btn-sm{ font-size: var(--fs-sm); }

/* Stats */
#page-signin .stat-value{
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  font-weight: 900;
  line-height: var(--lh-tight);
}
#page-signin .stat-label{ font-size: var(--fs-sm); }

/* Misc component titles (keep consistent) */
#page-signin .as-title,
#page-signin .mk-title,
#page-signin .payv4-title,
#page-signin .hiw-title,
#page-signin .cta-title{
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: 900;
}

/* Accordion button text */
#page-signin .accordion-button{
  font-size: var(--fs-base);
  font-weight: 800;
}

/* Placeholders */
#page-signin ::placeholder{ font-size: var(--fs-base); }

/* Icon-only badges (don’t affect global text) */
#page-signin .hero-badge,
#page-signin .as-badge-icon,
#page-signin .whyv2-icon{ font-size: 1.2rem; }



#page-signin {
  /* Brand + accents (RGB only) */
  --brand: rgb(253, 190, 2);          /* primary (requested) */
  --brand-ink: rgb(47, 38, 8);
  --sky: rgb(14, 165, 233);
  --rose: rgb(255, 99, 132);
  --lime: rgb(124, 207, 99);
  --violet: rgb(155, 135, 245);

  /* Surfaces / text */
  --bg: rgb(250, 250, 248);
  --surface: rgb(255, 255, 255);
  --muted: rgb(93, 94, 98);
  --border: rgb(230, 230, 228);

  /* Alphas */
  --brand-08: rgba(253, 190, 2, .08);
  --brand-14: rgba(253, 190, 2, .14);
  --sky-10: rgba(14, 165, 233, .10);

  /* Radii + shadows */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --sh-s: 0 6px 14px rgba(18,18,18,.06);
  --sh-m: 0 12px 28px rgba(18,18,18,.10);
  --ring: 0 0 0 4px rgba(253,190,2,.22);

  /* Typography */
  --font: 'Roboto', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------------------------
   1) Base + Helpers
   --------------------------- */
#page-signin {
  font-family: var(--font);
  color: rgb(28,28,27);
  background:
    radial-gradient(1100px 360px at 0% -20%, var(--brand-08), rgba(255,255,255,0) 70%),
    radial-gradient(1100px 360px at 100% -10%, var(--sky-10), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--bg) 0%, rgb(255,255,255) 100%);
}

#page-signin .section-padding { padding-block: clamp(2rem, 4vw, 3.5rem); }
#page-signin .section-padding-sm { padding-block: clamp(1.25rem, 3vw, 2rem); }
#page-signin .text-accent { color: var(--brand); }

#page-signin a { color: var(--sky); text-decoration: none; }
#page-signin a:hover { color: var(--brand); text-decoration: underline; }
#page-signin :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* ---------------------------
   2) Buttons
   --------------------------- */
#page-signin .btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-color: var(--brand-ink);
  --bs-btn-border-color: rgba(0,0,0,0);
  --bs-btn-hover-bg: rgb(255, 197, 26);
  --bs-btn-hover-color: var(--brand-ink);
  --bs-btn-focus-shadow-rgb: 253,190,2;
  font-weight: 800; border-radius: 999px; box-shadow: var(--sh-s);
}
#page-signin .btn-outline-brand{
  border-radius: 999px;
  border: 2px solid var(--brand);
  color: var(--brand-ink);
  background: rgba(253,190,2,.08);
  font-weight: 800;
}
#page-signin .btn-outline-brand:hover{ background: var(--brand); color: var(--brand-ink); }
#page-signin .btn-google{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-weight:800; border:1px solid var(--border); background: var(--surface);
  border-radius: 999px; box-shadow: var(--sh-s);
}

/* ---------------------------
   3) Hero
   --------------------------- */
#page-signin .hero-auth-section{
  position: relative;
}
#page-signin .hero-title{ font-weight: 900; }
#page-signin .hero-media-wrapper{
  position: relative; max-width: 600px; margin-left: auto;
  filter: saturate(1.05);
}
#page-signin .hero-image{
  border-radius: var(--r-l); box-shadow: var(--sh-m); background: var(--surface);
}
#page-signin .hero-badge{
  position:absolute; display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  color: var(--brand-ink); background: var(--brand); box-shadow: var(--sh-m);
  animation: floatY 5.2s ease-in-out infinite;
}
#page-signin .hero-badge.fb{ left:75px; top:52%; }
#page-signin .hero-badge.tk{ left:460px; top:60%; animation-delay: .6s; }
#page-signin .hero-badge.yt{ left:22%; bottom:-18px; animation-delay: 1.2s; }
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* ---------------------------
   4) Auth Card
   --------------------------- */
#page-signin .auth-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-l);
  box-shadow: var(--sh-m); padding: 1.25rem;
}
#page-signin .auth-card-header{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.5rem;
}
#page-signin .auth-title{ font-weight: 900; margin:0; }
#page-signin .auth-link a{ font-weight: 800; }

#page-signin .input-group-text{
  background: rgba(253,190,2,.10); border-color: var(--border); font-weight: 800;
}
#page-signin .form-control{
  border-color: var(--border);
}
#page-signin .form-control:focus{ box-shadow: var(--ring); border-color: rgba(253,190,2,.6); }
#page-signin .link-forgot{ font-weight: 800; }

#page-signin .or-divider{
  display:flex; align-items:center; justify-content:center; gap:.8rem; margin:1rem 0;
}
#page-signin .or-divider::before,
#page-signin .or-divider::after{
  content:""; height:1px; background: var(--border); flex:1;
}
#page-signin .or-divider span{ font-weight:800; color: var(--muted); }

/* ---------------------------
   5) Mini Stats
   --------------------------- */
#page-signin .stat-item{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-m);
  padding: 1rem; text-align:center; box-shadow: var(--sh-s); transition: transform .15s ease;
}
#page-signin .stat-item:hover{ transform: translateY(-2px); }
#page-signin .stat-icon{ font-size:1.4rem; color: var(--brand-ink); background: var(--brand-14); display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; margin-bottom:.5rem; }
#page-signin .stat-value{ font-weight: 900; font-size: clamp(1.25rem, 2.7vw, 1.8rem); }
#page-signin .stat-label{ color: var(--muted); font-weight: 700; }

/* ---------------------------
   6) Services — Pills & Pane
   --------------------------- */
#page-signin .services-pills{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
#page-signin .pill-item{
  border:1px solid var(--border); background: var(--surface); border-radius: 999px; padding:.45rem .8rem;
  display:inline-flex; align-items:center; gap:.45rem; font-weight:800; color: rgb(55,55,55); box-shadow: var(--sh-s);
  transition: background .12s ease, color .12s ease, transform .12s ease, border-color .12s ease;
}
#page-signin .pill-item.active,
#page-signin .pill-item:hover{
  background: linear-gradient(90deg, var(--brand), var(--sky));
  color: var(--brand-ink); border-color: rgba(0,0,0,0); transform: translateY(-1px);
}
#page-signin .service-pane-content{ background: var(--surface); border:1px solid var(--border); border-radius: var(--r-m); padding:1rem; box-shadow: var(--sh-s); }
#page-signin .service-pane-title{ font-weight: 900; }

/* ---------------------------
   7) Why Cards
   --------------------------- */
/* =========================================================================
   WHY V2 — Light, colorful, mobile-first (scoped to #page-signin)
   ========================================================================= */

/* Section wrapper */
#page-signin .why-v2 .section-header .section-title { font-weight: 900; }
#page-signin .why-v2 .section-header .section-subtitle { color: var(--muted); }

/* Chips row */
#page-signin .whyv2-chips{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:.75rem 0 1.25rem;
}
#page-signin .whyv2-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .7rem; border-radius:999px; font-weight:800;
  background: rgba(14,165,233,.09); color: rgb(9,108,150); border:1px solid rgba(14,165,233,.22);
}

/* KPIs */
#page-signin .whyv2-kpi{
  background: var(--surface); border:1px solid var(--border); border-radius: 14px;
  padding:.9rem; text-align:center; box-shadow: var(--sh-s);
}
#page-signin .whyv2-kpi-label{ font-weight:800; color: var(--muted); }
#page-signin .whyv2-kpi-value{ font-weight:900; font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Feature cards */
#page-signin .whyv2-card{
  position:relative; background: var(--surface);
  border:1px solid var(--border); border-radius: 18px; padding: 1rem .95rem 1.1rem;
  box-shadow: var(--sh-s); overflow:hidden; isolation:isolate;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#page-signin .whyv2-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-m); border-color: rgba(253,190,2,.45); }
#page-signin .whyv2-card-top{ display:flex; align-items:center; justify-content:space-between; }

#page-signin .whyv2-icon{
  width:56px; height:56px; display:grid; place-items:center; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--sky)); color: var(--brand-ink);
  box-shadow: var(--sh-s); font-size:1.25rem;
}

#page-signin .whyv2-tag{
  font-size:.75rem; font-weight:900; padding:.25rem .55rem; border-radius:999px;
  color: var(--brand-ink); background: var(--brand-08); border:1px solid rgba(253,190,2,.28);
}

#page-signin .whyv2-title{ margin:.7rem 0 .25rem; font-weight:900; }
#page-signin .whyv2-text{ color: var(--muted); margin-bottom:.65rem; }

/* Bullets */
#page-signin .whyv2-bullets{ list-style:none; padding:0; margin:0 0 .5rem 0; }
#page-signin .whyv2-bullets li{
  display:flex; align-items:flex-start; gap:.5rem; line-height:1.35; margin:.35rem 0;
  font-weight:500; color: rgb(48,48,48);
}
#page-signin .whyv2-bullets i{
  color: var(--lime); margin-top:.15rem;
}

/* Card actions */
#page-signin .whyv2-actions{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.6rem;
}
#page-signin .whyv2-link{
  display:inline-flex; align-items:center; gap:.45rem; font-weight:800; color: var(--sky); text-decoration:none;
}
#page-signin .whyv2-link:hover{ color: var(--brand); text-decoration:underline; }
#page-signin .whyv2-link-icon{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background: rgba(253,190,2,.12); color: var(--brand-ink); border:1px solid rgba(253,190,2,.28);
}

/* Expanded body */
#page-signin .whyv2-more{ margin-top:.6rem; }
#page-signin .whyv2-more-body{
  background: rgba(14,165,233,.06); border:1px dashed rgba(14,165,233,.35);
  border-radius: 14px; padding: .7rem .8rem; color: rgb(40,40,40);
}

/* Subtle ambient glow */
#page-signin .whyv2-glow{
  content:""; position:absolute; inset:-40% -40% auto -40%; height:42%;
  background:
    radial-gradient(320px 160px at 12% 8%, rgba(253,190,2,.15), rgba(255,255,255,0)),
    radial-gradient(300px 160px at 88% 92%, rgba(14,165,233,.12), rgba(255,255,255,0));
  filter: blur(10px); z-index:-1; pointer-events:none;
}

/* RTL niceties */
#page-signin.rtl .whyv2-actions{ flex-direction: row-reverse; }
#page-signin.rtl .whyv2-bullets li{ flex-direction:row-reverse; }

/* ---------------------------
   8) HIW Timeline
   --------------------------- */
/* ============ HOW IT WORKS — V3 (scoped) ============ */
#page-signin .how-v3 {
  --brand: rgb(253,190,2);
  --ink: #0f172a;
  --muted: #6b7280;
  --card: rgba(255,255,255,0.72);
  --ring: rgba(253,190,2,0.35);
  --stroke: rgba(15,23,42,0.06);
  position: relative;
}

#page-signin .how-v3 .hiw-eyebrow{
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .25rem;
}

#page-signin .how-v3 .hiw-title{
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 .5rem 0;
}

#page-signin .how-v3 .hiw-accent{
  background: linear-gradient(90deg, var(--brand), #ff7a00 60%, #ff3d3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#page-signin .how-v3 .hiw-lead{
  color: var(--muted);
  max-width: 720px;
  margin: 0 auto 1.25rem;
}

/* Progress rail behind cards */
#page-signin .how-v3 .hiw-track{
  position: relative;
  height: 4px;
  background: var(--stroke);
  border-radius: 999px;
  margin: 2rem auto 1.5rem;
  width: min(780px, 92%);
}
#page-signin .how-v3 .hiw-track-progress{
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), #ff7a00);
  border-radius: inherit;
  transition: width .6s ease;
}

/* Cards grid */
#page-signin .how-v3 .hiw-grid{ position: relative; z-index: 1; }

#page-signin .how-v3 .hiw-step{
  height: 100%;
  background: var(--card);
  backdrop-filter: blur(6px);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: 0 8px 24px rgba(2,8,23,0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}

#page-signin .how-v3 .hiw-step::after{
  content: "";
  position: absolute; inset: -1px -1px auto -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), #ff7a00, #ff3d3d);
  opacity: .0;
  transition: opacity .3s ease;
}

#page-signin .how-v3 .hiw-step:hover{
  transform: translateY(-4px);
  border-color: var(--ring);
  box-shadow: 0 14px 36px rgba(2,8,23,0.12);
}
#page-signin .how-v3 .hiw-step:hover::after{ opacity: 1; }

/* Top row */
#page-signin .how-v3 .hiw-step-top{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .6rem;
}
#page-signin .how-v3 .hiw-step-badge{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  font-weight: 800; color: #111827; background: #fff;
  border: 2px solid var(--ring);
  box-shadow: 0 4px 12px rgba(253,190,2,0.25);
}
#page-signin .how-v3 .hiw-step-ico{
  font-size: 1.35rem; line-height: 1; color: var(--brand);
  filter: drop-shadow(0 8px 14px rgba(253,190,2,.25));
}

/* Titles & body */
#page-signin .how-v3 .hiw-step-title{
  font-weight: 800; margin: .25rem 0 .25rem; line-height: 1.2;
}
#page-signin .how-v3 .hiw-step-text{ color: var(--muted); margin-bottom: .65rem; }

/* Meta chips */
#page-signin .how-v3 .hiw-step-meta{
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem;
}
#page-signin .how-v3 .hiw-step-meta span{
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px dashed var(--stroke);
  background: rgba(255,255,255,.7);
  padding: .35rem .55rem; border-radius: 999px; font-size: .8rem;
}

/* CTA */
#page-signin .how-v3 .hiw-step-cta.btn{
  --bs-btn-border-radius: 12px;
  --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .8rem; font-weight: 600;
}

/* Mobile vertical connector */
@media (max-width: 991.98px){
  #page-signin .how-v3 .hiw-track{ display:none; }
  #page-signin .how-v3 .hiw-grid{
    position: relative;
  }
  #page-signin .how-v3 .hiw-grid::before{
    content:"";
    position:absolute; left: 20px; top: .2rem; bottom: .2rem;
    width: 3px; background: var(--stroke); border-radius: 999px;
  }
  #page-signin .how-v3 .hiw-step{
    padding-left: 3.2rem;
  }
  #page-signin .how-v3 .hiw-step-badge{
    position:absolute; left: .65rem; top: .85rem;
  }
}

/* =========================================================================
   TESTIMONIALS — V4
   - Light, colorful cards with brand accent
   - Mobile: horizontal snap; Desktop: responsive grid
   - Scoped to #page-signin to follow CuteSMM theming guidelines
   ========================================================================= */
#page-signin {
  --brand: rgb(253,190,2);        /* Primary brand color */
  --ink: #0f172a;                 /* Headline/text (dark slate for contrast) */
  --muted: #61738a;               /* Muted text */
  --card-bg: #ffffff;             /* Card base */
  --soft: #f6f8fb;                /* Soft section background */
  --ring: rgba(253,190,2,.45);    /* Focus ring / glow */
}

#page-signin .testimonials-v4 {
  background: linear-gradient(180deg, var(--soft) 0%, #fff 100%);
  position: relative;
}

#page-signin .testimonials-v4 .section-title {
  font-weight: 900;
  letter-spacing: -.3px;
  color: var(--ink);
}

#page-signin .testimonials-v4 .text-accent {
  color: var(--brand);
}

/* Grid / Horizontal snapping on mobile */
#page-signin .t4-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  padding-bottom: 8px;
}
#page-signin .t4-grid::-webkit-scrollbar { height: 8px; }
#page-signin .t4-grid::-webkit-scrollbar-thumb {
  background: rgba(31,41,55,.15);
  border-radius: 10px;
}

@media (min-width: 576px) {
  #page-signin .t4-grid { grid-template-columns: repeat(2, 1fr); overflow: visible; }
}
@media (min-width: 992px) {
  #page-signin .t4-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Card */
#page-signin .t4-card {
  position: relative;
  scroll-snap-align: start;
  background:
    radial-gradient(1200px 200px at -20% -40%, rgba(253,190,2,.12), transparent 60%),
    linear-gradient(180deg, #fff, #fff);
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
  padding: 22px 20px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  will-change: transform;
  overflow: hidden;
}
#page-signin .t4-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 42px rgba(15,23,42,.09);
  border-color: rgba(253,190,2,.35);
}

/* Decorative sparkle & shine */
#page-signin .t4-sparkle,
#page-signin .t4-shine {
  position: absolute;
  pointer-events: none;
  inset: 0;
}
#page-signin .t4-sparkle {
  background:
    radial-gradient(12px 12px at 15% 25%, rgba(253,190,2,.35), transparent 70%),
    radial-gradient(10px 10px at 85% 15%, rgba(36,99,235,.18), transparent 70%),
    radial-gradient(9px 9px at 90% 70%, rgba(16,185,129,.18), transparent 70%),
    radial-gradient(8px 8px at 25% 85%, rgba(244,63,94,.18), transparent 70%);
  filter: blur(.2px);
}
#page-signin .t4-shine {
  background: radial-gradient(350px 80px at -10% -30%, rgba(253,190,2,.18), transparent 65%);
  mix-blend-mode: screen;
}

/* Top row */
#page-signin .t4-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
#page-signin .t4-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(253,190,2,.25), rgba(253,190,2,.12));
  color: #915c00;
  border: 1px solid rgba(253,190,2,.35);
}

/* Stars (auto-filled by JS) */
#page-signin .t4-stars { font-size: 14px; color: var(--brand); }

/* Headline & quote */
#page-signin .t4-headline {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 6px 0 10px;
  color: var(--ink);
}
#page-signin .t4-quote {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 14px;
  padding: 14px 14px 14px 42px;
}
#page-signin .t4-quote-ico {
  position: absolute; left: 12px; top: 12px;
  color: rgba(253,190,2,.9);
  font-size: 18px;
}
#page-signin .t4-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Author */
#page-signin .t4-author {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
}
#page-signin .t4-avatar {
  border-radius: 50%;
  border: 2px solid var(--brand);
  padding: 2px;
  background: #fff;
}
#page-signin .t4-name { color: var(--ink); font-weight: 800; display: block; }
#page-signin .t4-loc  { color: var(--muted); font-size: .9rem; }
/* =========================================================================
   ABOUT — PREMIER PARTNER (Screenshot style)  |  Scoped to #page-signin
   ========================================================================= */
/* ==========================================================================
   ABOUT CUTESMM — Glass, 3D device, animated KPIs
   Scope: #page-signin .about-cutesmm
   Brand: rgb(253,190,2)
   ========================================================================== */

#page-signin .about-cutesmm{
  --brand: rgb(253,190,2);
  --ink: rgb(16,24,40);
  --muted: rgb(102,112,133);
  --surface: rgb(255,255,255);
  --bg-subtle: rgb(248,249,251);
  --stroke: rgba(2,6,23,.08);
  --ring: rgba(253,190,2,.35);
  --grad: linear-gradient(135deg, rgba(253,190,2,1), rgba(255,142,38,1));
  --shadow-m: 0 12px 28px rgba(2,6,23,.12);
  --shadow-l: 0 20px 48px rgba(2,6,23,.16);
  color: var(--ink);
}

#page-signin .about-cutesmm .ac-eyebrow{
  color: rgb(255,170,0); text-transform: uppercase; letter-spacing: .6px; font-weight: 900; margin-bottom: 6px;
}
#page-signin .about-cutesmm .ac-title{ font-weight: 900; line-height: 1.15; }
#page-signin .about-cutesmm .ac-accent{ background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
#page-signin .about-cutesmm .ac-subtitle{ color: var(--muted); max-width: 760px; }

/* Pills (reasons) */
#page-signin .about-cutesmm .ac-pills{ display:grid; gap:12px; }
#page-signin .about-cutesmm .ac-pill{
  display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:16px;
  background: var(--surface); border:1px solid var(--stroke); box-shadow: var(--shadow-m);
}
#page-signin .about-cutesmm .ac-pill i{
  width:44px; height:44px; display:grid; place-items:center; border-radius:12px;
  background: rgba(253,190,2,.15); border:1px solid rgba(253,190,2,.35);
}
#page-signin .about-cutesmm .ac-pill-title{ font-weight: 900; margin: 2px 0 4px; }
#page-signin .about-cutesmm .ac-pill-text{ color: var(--muted); margin: 0; }

/* Trust bar */
#page-signin .about-cutesmm .ac-trust{
  display:flex; align-items:center; gap:10px; color: var(--muted);
  background: var(--surface); border:1px dashed var(--stroke); padding:10px 14px; border-radius:999px;
}
#page-signin .about-cutesmm .ac-trust-stars{ color: rgb(252,191,33); }
#page-signin .about-cutesmm .ac-trust-stars .fa-star{ margin-right:2px; }

/* Visual / Device */
#page-signin .about-cutesmm .ac-visual{ position: relative; }
#page-signin .about-cutesmm .ac-aura{
  position:absolute; inset:-10%; border-radius:28px; z-index:0;
  background: radial-gradient( 600px 300px at 70% 10%, rgba(253,190,2,.25), rgba(255,255,255,0) );
  filter: blur(6px);
}
#page-signin .about-cutesmm .ac-device{
  position: relative; z-index:1; width:100%; max-width:520px; margin-inline:auto;
  transform-style: preserve-3d; perspective: 1000px; outline: none;
}
#page-signin .about-cutesmm .ac-device-frame{
  border-radius: 28px; padding: 10px; background: rgba(255,255,255,.75);
  border: 1px solid var(--stroke); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-l);
}
#page-signin .about-cutesmm .ac-screen{
  display:block; width:100%; height:auto; border-radius: 20px; box-shadow: 0 18px 38px rgba(2,6,23,.18);
}

/* Floating UI cards */
#page-signin .about-cutesmm .ac-card{
  position:absolute; right:-14px; top:-18px; width: 60%; min-width: 260px;
  background: rgba(255,255,255,.8); backdrop-filter: blur(10px);
  border:1px solid rgba(2,6,23,.1); border-radius:16px; box-shadow: var(--shadow-l); padding: 12px;
  transform: translateZ(40px);
}
#page-signin .about-cutesmm .ac-card-head{
  display:flex; align-items:center; gap:8px; font-weight: 900; margin-bottom: 8px;
}
#page-signin .about-cutesmm .ac-card-list{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
#page-signin .about-cutesmm .ac-card-list .dot{
  display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px;
}
#page-signin .about-cutesmm .dot--ok{ background: rgb(22,163,74); }
#page-signin .about-cutesmm .dot--wait{ background: rgb(234,179,8); }

#page-signin .about-cutesmm .ac-chip{
  position:absolute; left:-10px; bottom:16%; transform: translateZ(30px);
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  background: rgba(253,190,2,.12); border:1px solid rgba(253,190,2,.32); font-weight: 800;
  box-shadow: var(--shadow-m);
}
#page-signin .about-cutesmm .ac-chat{
  position:absolute; left: -10px; top: -14px; transform: translateZ(50px);
}
#page-signin .about-cutesmm .ac-chat-bubble{
  background: var(--surface); border:1px solid var(--stroke); border-radius: 14px; padding: 10px 12px;
  box-shadow: var(--shadow-m);
}

/* KPIs */
#page-signin .about-cutesmm .ac-kpis{
  display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; margin-top: 36px;
}
@media (min-width: 768px){
  #page-signin .about-cutesmm .ac-kpis{ grid-template-columns: repeat(4,minmax(0,1fr)); }
}
#page-signin .about-cutesmm .ac-kpi{
  background: var(--surface); border:1px solid var(--stroke); border-radius:16px; padding:14px;
  text-align:center; box-shadow: var(--shadow-m);
}
#page-signin .about-cutesmm .ac-kpi i{
  display:grid; place-items:center; width:42px; height:42px; margin:0 auto 6px;
  border-radius:12px; background: rgba(253,190,2,.14); border:1px solid rgba(253,190,2,.35);
}
#page-signin .about-cutesmm .ac-kpi-num{
  font-weight: 900; font-size: 1.6rem;
}
#page-signin .about-cutesmm .ac-kpi-text{
  font-weight: 900; font-size: 1.1rem;
}
#page-signin .about-cutesmm .ac-kpi-label{
  color: var(--muted); font-size: .92rem;
}

/* Hover shine for device */
#page-signin .about-cutesmm .ac-device-frame::after{
  content:""; position:absolute; inset:0; border-radius: 28px; pointer-events:none;
  background: linear-gradient(110deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 40%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%); opacity: 0;
}
#page-signin .about-cutesmm .ac-device:hover .ac-device-frame::after{
  animation: acSweep 1200ms ease forwards;
}
@keyframes acSweep{
  0%{ transform: translateX(-120%); opacity: 0; }
  15%{ opacity:.7; }
  100%{ transform: translateX(120%); opacity: 0; }
}

/* Focus ring for keyboard users */
#page-signin .about-cutesmm .ac-device:focus-visible{
  box-shadow: 0 0 0 6px var(--ring);
  border-radius: 30px;
}

/* RTL support */
#page-signin.rtl .about-cutesmm .ac-card{ right:auto; left:-14px; }
#page-signin.rtl .about-cutesmm .ac-chip{ left:auto; right:-10px; }
#page-signin.rtl .about-cutesmm .ac-chat{ left:auto; right:-10px; }

/* Spacing tweaks on small screens */
@media (max-width: 991.98px){
  #page-signin .about-cutesmm .ac-card{ position: absolute; top: auto; bottom: -18px; left: 50%; right:auto; transform: translate(-50%,0) translateZ(40px); }
  #page-signin .about-cutesmm .ac-chip{ bottom: auto; top: -12px; }
  #page-signin .about-cutesmm .ac-chat{ top: auto; bottom: -12px; }
}

/* ---------------------------
  10) Payments v3 — Colorful grid
  --------------------------- */
/* ===== Payments v4 — Colorful, glassy, mobile-first (scoped) ===== */
#page-signin .payments-v4{
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(1200px 520px at 0% -10%, rgba(30,144,255,.08), rgba(255,255,255,0) 70%),
    radial-gradient(1200px 520px at 100% 110%, rgba(253,190,2,.10), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgb(239,247,255) 0%, rgb(255,255,255) 100%);
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Header */
#page-signin .payv4-eyebrow{
  margin: 0 0 .25rem; font-weight: 900; letter-spacing: .35px; color: var(--sky);
}
#page-signin .payv4-title{
  margin: 0 0 .45rem; font-weight: 900; line-height: 1.15;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); color: rgb(24,24,24);
}
#page-signin .payv4-grad{
  background: linear-gradient(90deg, var(--brand), var(--sky));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#page-signin .payv4-subtitle{ color: var(--text-2); max-width: 52ch; }

/* Chips */
#page-signin .payv4-chips{ display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: .9rem 0 1.1rem; }
#page-signin .payv4-chip{
  display: inline-flex; align-items: center; padding: .45rem .8rem; border-radius: 999px;
  font-weight: 800; background: rgb(255,255,255); color: rgb(60,60,60);
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 18px rgba(18,18,18,.06);
}

/* Actions */
#page-signin .payv4-actions .btn{ border-radius: 12px; }
@media (max-width: 575.98px){
  #page-signin .payv4-actions .btn{ width: 100%; }
}
#page-signin .payv4-note{ color: var(--text-2); }

/* Grid */
#page-signin .pmv4-grid{
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 991.98px){ #page-signin .pmv4-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 575.98px){ #page-signin .pmv4-grid{ grid-template-columns: repeat(2,1fr); } }

/* Card */
#page-signin .pmv4-card{
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .45rem; min-height: 102px;
  padding: .9rem .8rem; border-radius: 16px; cursor: default; overflow: hidden;

  /* colorful gradient border with white fill */
  background:
    linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box,
    linear-gradient(135deg, var(--sky), var(--brand)) border-box;
  border: 1px solid transparent;

  box-shadow: 0 10px 24px rgba(18,18,18,.06);
  transition: transform .18s ease, box-shadow .22s ease, filter .18s ease;
}

/* Rotate border gradients for variety */
#page-signin .pmv4-card:nth-child(6n+1){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--rose), var(--brand)) border-box; }
#page-signin .pmv4-card:nth-child(6n+2){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--sky),  var(--peach)) border-box; }
#page-signin .pmv4-card:nth-child(6n+3){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--lime), var(--sky))   border-box; }
#page-signin .pmv4-card:nth-child(6n+4){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--lav),  var(--brand)) border-box; }
#page-signin .pmv4-card:nth-child(6n+5){ background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--peach),var(--lav))   border-box; }
#page-signin .pmv4-card:nth-child(6n){   background: linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box, linear-gradient(135deg, var(--teal), var(--rose))  border-box; }

/* Auras + shine */
#page-signin .pmv4-aura{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:16px;
  background:
    radial-gradient(160px 80px at 30% 30%, rgba(253,190,2,.16), rgba(255,255,255,0) 70%),
    radial-gradient(140px 70px at 70% 70%, rgba(100,181,246,.12), rgba(255,255,255,0) 70%);
  transition: opacity .18s ease, transform .18s ease;
}
#page-signin .pmv4-shine{
  content:""; position:absolute; top:-22%; bottom:-22%; width: 42%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 80%);
  transform: translateX(-140%) rotate(16deg); pointer-events:none; z-index: 1; opacity: .0;
  transition: transform .6s ease, opacity .35s ease;
}

/* Logo & name */
#page-signin .pmv4-card img{
  position:relative; z-index:2; max-width:100%; object-fit:contain;
  transition: filter .18s ease, transform .18s ease;
}
#page-signin .pmv4-name{
  position:relative; z-index:2; margin:0; font-size:.82rem; font-weight:800; letter-spacing:.2px; color: rgb(95,93,89);
}

/* Hover */
#page-signin .pmv4-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 38px rgba(18,18,18,.12); }
#page-signin .pmv4-card:hover img{ filter: grayscale(0%) contrast(110%); transform: scale(1.03); }
#page-signin .pmv4-card:hover .pmv4-aura{ opacity: 1; transform: scale(1.02); }
#page-signin .pmv4-card:hover .pmv4-shine{ transform: translateX(160%) rotate(16deg); opacity: .8; }

/* Dark tooltip on light bg (keeps RGB) */
#page-signin .tooltip-inner{ background: rgb(35,35,35); color: rgb(255,255,255); font-weight:600; }
#page-signin .tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
#page-signin .tooltip.bs-tooltip-top .tooltip-arrow::before{ border-top-color: rgb(35,35,35); }


/* ---------------------------
  12) Final CTA
  --------------------------- */
#page-signin .final-cta-section{ text-align:center; }
#page-signin .cta-title{ font-weight: 900; }
/* ===== Final CTA v2 (scoped) ===== */
#page-signin .final-cta-v2{
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(700px 360px at 0% 0%, rgba(253,190,2,.14), rgba(255,255,255,0) 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(100,181,246,.12), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgb(245,248,255) 0%, rgb(255,255,255) 100%);
  border-block: 1px solid rgba(0,0,0,.05);
}

/* Eyebrow / titles */
#page-signin .final-cta-v2 .cta-eyebrow{
  font-weight:900; letter-spacing:.3px; color: var(--sky); margin-bottom:.15rem;
}
#page-signin .final-cta-v2 .cta-title{
  font-weight: 900; color: rgb(24,24,24);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom:.35rem;
}
#page-signin .final-cta-v2 .cta-subtitle{
  color: var(--text-2); max-width: 56ch; margin: 0 auto;
}
@media (min-width: 992px){
  #page-signin .final-cta-v2 .cta-subtitle{ margin: 0; }
}

/* Chips */
#page-signin .final-cta-v2 .cta-chips{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin: .9rem 0 1.1rem;
  justify-content:center;
}
@media (min-width: 992px){
  #page-signin .final-cta-v2 .cta-chips{ justify-content:flex-start; }
}
#page-signin .final-cta-v2 .cta-chip{
  display:inline-flex; align-items:center; padding:.45rem .8rem; border-radius:999px; font-weight:800;
  background: rgb(255,255,255); color: rgb(60,60,60);
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 18px rgba(18,18,18,.06);
}

/* Trust line */
#page-signin .final-cta-v2 .cta-trust{ color: var(--text-2); }

/* Visual block */
#page-signin .final-cta-v2 .cta-visual{
  position: relative; min-height: 220px;
  background:
    linear-gradient(0deg, rgb(255,255,255), rgb(255,255,255)) padding-box,
    linear-gradient(135deg, var(--sky), var(--brand)) border-box;
  border: 1px solid transparent; border-radius: 18px; padding: 16px;
  box-shadow: 0 14px 32px rgba(18,18,18,.10);
}

/* KPI card inside visual */
#page-signin .final-cta-v2 .cta-kpi-card{
  position: relative; z-index: 2; background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 12px 28px rgba(18,18,18,.08);
}
#page-signin .final-cta-v2 .kpi-top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem;
}
#page-signin .final-cta-v2 .kpi-badge{
  width: 36px; height: 36px; border-radius: 10px; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(253,190,2,.25), rgba(253,190,2,.12));
  color: rgb(145,92,0); border: 1px solid rgba(253,190,2,.35);
}
#page-signin .final-cta-v2 .kpi-stars{ color: var(--brand); font-size: 14px; letter-spacing: 2px; }
#page-signin .final-cta-v2 .kpi-head{ font-weight: 900; color: rgb(24,24,24); }
#page-signin .final-cta-v2 .kpi-sub{ color: var(--text-2); font-size:.95rem; }

/* Floating social bubbles */
#page-signin .final-cta-v2 .cta-icon{
  position:absolute; display:grid; place-items:center; width:50px; height:50px;
  border-radius:50%; color: rgb(55,43,11);
  background: radial-gradient(60px 60px at 30% 30%, rgba(253,190,2,.22), rgba(255,255,255,.85)),
              var(--grad-brand, linear-gradient(135deg, var(--brand), rgb(255,205,75)));
  border: 2px solid rgba(253,190,2,.25); box-shadow: 0 12px 24px rgba(18,18,18,.10);
  animation: floatY 6s ease-in-out infinite;
}
#page-signin .final-cta-v2 .cta-icon.ig{ right: 18px; top: -18px; animation-delay: .1s; }
#page-signin .final-cta-v2 .cta-icon.yt{ left: -14px; bottom: 18px; animation-delay: .6s; }
#page-signin .final-cta-v2 .cta-icon.tk{ right: -12px; bottom: -14px; animation-delay: 1.2s; }

/* Mobile tweaks */
@media (max-width: 575.98px){
  #page-signin .final-cta-v2 .cta-visual{ min-height: 200px; }
}

/* Reuse existing keyframes (fallback) */
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ===== Final CTA v2 (scoped to #page-signin) ===== */
#page-signin .final-cta-section.cta-v2{
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(700px 360px at 0% 0%, rgba(253,190,2,.14), rgba(255,255,255,0) 70%),
    radial-gradient(700px 420px at 100% 100%, rgba(100,181,246,.12), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgb(245,248,255) 0%, rgb(255,255,255) 100%);
  border-block: 1px solid rgba(0,0,0,.05);
}

/* ===== CTA v3 — Glass stats banner (scoped) ===== */
#page-signin .cta-v3{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(900px 360px at 0% -10%, rgba(253,190,2,.12), rgba(255,255,255,0) 70%),
    radial-gradient(900px 360px at 100% 110%, rgba(100,181,246,.12), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgb(245,248,255) 0%, #fff 100%);
  border-block: 1px solid rgba(0,0,0,.05);
}

#page-signin .cta3-eyebrow{
  font-weight:900; letter-spacing:.35px; color: var(--sky); margin-bottom:.2rem;
}
#page-signin .cta3-title{
  font-weight:900; color: rgb(24,24,24);
  font-size: clamp(1.6rem, 3.2vw, 2.45rem); margin:0 0 .35rem;
}
#page-signin .cta3-grad{
  background: linear-gradient(90deg, var(--brand), var(--sky));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#page-signin .cta3-subtitle{
  color: var(--text-2); max-width: 56ch; margin:0 auto .6rem;
}
@media (min-width: 992px){ #page-signin .cta3-subtitle{ margin:0 0 .6rem 0; } }

#page-signin .cta3-list{
  list-style:none; padding:0; margin:.6rem 0 1.1rem; display:grid; gap:.4rem;
}
#page-signin .cta3-list li{
  display:flex; align-items:flex-start; gap:.5rem; color: rgb(48,48,48); font-weight:600;
}
#page-signin .cta3-list i{ color: var(--lime); margin-top:.15rem; }

#page-signin .cta3-actions .btn{ border-radius:12px; }
#page-signin .cta3-trust{ color: var(--text-2); }

/* Glass card */
#page-signin .cta3-card{
  position:relative; background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px; padding: 16px; box-shadow: 0 14px 32px rgba(18,18,18,.08);
}
#page-signin .cta3-ring{
  position:absolute; inset:-1px; border-radius:18px; pointer-events:none;
  background: linear-gradient(135deg, var(--brand), var(--sky));
  opacity:.15; filter: blur(10px);
}
#page-signin .cta3-card-row{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; position:relative; z-index:1;
}
@media (max-width: 575.98px){
  #page-signin .cta3-card-row{ grid-template-columns:1fr; }
}
#page-signin .cta3-kpi{
  background:#fff; border:1px solid rgba(15,23,42,.06); border-radius:14px;
  padding:12px 14px; text-align:center;
}
#page-signin .kpi-value{
  font-weight:900; font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: rgb(24,24,24);
}
#page-signin .kpi-label{ color: var(--text-2); font-weight:700; font-size:.95rem; }

#page-signin .cta3-note{
  position:relative; z-index:1; margin-top:10px; text-align:center;
  color: rgb(70,66,62); font-weight:700;
}

/* Buttons behave well on mobile */
@media (max-width: 575.98px){
  #page-signin .cta3-actions .btn{ width:100%; }
}


/* ---------------------------
  13) Back to Top
  --------------------------- */
#page-signin .back-to-top-btn{
  position: fixed; right: 16px; bottom: 16px; z-index: 999; width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--sky)); color: var(--brand-ink); border: none; box-shadow: var(--sh-m);
  display: grid; place-items: center; transform: translateY(16px); opacity: 0; visibility: hidden; transition: all .22s ease;
}
#page-signin .back-to-top-btn.show{ transform: translateY(0); opacity: 1; visibility: visible; }

/* ---------------------------
  14) RTL small fixes
  --------------------------- */
#page-signin.rtl .auth-card-header{ flex-direction: row-reverse; }
#page-signin.rtl .hero-content { text-align: start; }


/* =========================
   SIGNUP — Light, colorful (Bootstrap 5)
   Scoped under #page-signup (per CuteSMM docs)
   ========================= */
#page-signup{
  --brand: rgb(14,165,233);
  --brand-2: rgb(2,132,199);
  --ink: rgb(17,24,39);
  --muted: rgb(99,102,241);
  --text-2: rgb(82,88,102);
  --line: rgba(15,23,42,.08);
  --surface: rgb(255,255,255);
  --soft: rgb(246,248,252);
  --ring: 0 0 0 4px rgba(14,165,233,.20);

  font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 360px at 0% -20%, rgba(14,165,233,.10), rgba(255,255,255,0) 70%),
    radial-gradient(1100px 360px at 100% -10%, rgba(253,190,2,.14), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #fff 0%, var(--soft) 100%);
}

#page-signup .auth-wrap{ padding-block: clamp(1.5rem, 4vw, 3rem); }
#page-signup .auth-grid{ align-items: stretch; }

/* Cards */
#page-signup .signup-card{
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 16px 36px rgba(2,8,23,.06);
}

/* Visual */
#page-signup .signup-visual{
  position: relative;
  min-height: 260px;
  background: linear-gradient(180deg, rgba(14,165,233,.06), rgba(255,255,255,1));
}
#page-signup .signup-visual img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4/3;
}
#page-signup .visual-badges{
  position: absolute; inset: 0; pointer-events: none;
}
#page-signup .vb{
  position: absolute; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: #fff; color: var(--brand);
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(2,8,23,.10);
  animation: floatY 6s ease-in-out infinite;
}
#page-signup .vb-1{ left: 10px; top: 12%; }
#page-signup .vb-2{ right: 14px; top: 38%; animation-delay: .6s; }
#page-signup .vb-3{ left: 18%; bottom: 10px; animation-delay: 1.2s; }
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* Headings */
#page-signup .auth-title{ font-weight: 900; letter-spacing: .2px; margin-bottom: .25rem; }
#page-signup .auth-lead{ color: var(--text-2); margin-bottom: 1rem; }
#page-signup .text-brand{ color: var(--brand); }

/* Inputs */
#page-signup .form-label{ font-weight: 700; color: rgb(51,51,51); }
#page-signup .input-group-lg > .form-control,
#page-signup .input-group-lg > .input-group-text{ padding: .9rem 1rem; }
#page-signup .input-group-text{
  background: #fff; border-color: var(--line); border-right: 0;
}
#page-signup .form-control{
  border-color: var(--line);
}
#page-signup .form-control:focus{
  border-color: var(--brand);
  box-shadow: var(--ring);
}
#page-signup .btn-eye{
  border-color: var(--line);
}

/* Buttons */
#page-signup .btn-brand{
  --bs-btn-bg: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  --bs-btn-border-color: rgba(0,0,0,0);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--brand-2);
  --bs-btn-hover-border-color: rgba(0,0,0,0);
  font-weight: 800; border-radius: 14px; box-shadow: 0 14px 28px rgba(14,165,233,.25);
}
#page-signup .link-brand{ color: var(--brand); font-weight: 800; text-decoration: none; }
#page-signup .link-brand:hover{ color: rgb(2,132,199); text-decoration: underline; }

/* OR divider */
#page-signup .or-divider{
  display: flex; align-items: center; gap: .75rem; color: var(--text-2);
}
#page-signup .or-divider::before,
#page-signup .or-divider::after{
  content: ""; height: 1px; background: var(--line); flex: 1;
}

/* Footer helper */
#page-signup .auth-foot{ color: var(--text-2); }

/* RTL tweaks (scoped) */
#page-signup.rtl .input-group-text{ border-left: 0; border-right: 1px solid var(--line); }
#page-signup.rtl .btn-eye{ border-radius: .5rem 0 0 .5rem; }

/* Small devices polish */
@media (max-width: 575.98px){
  #page-signup .input-group-lg > .form-control,
  #page-signup .input-group-lg > .input-group-text{ padding: .8rem .9rem; }
}

/* Scoped styling */
.childpanel {
  --brand: rgb(253,190,2);
  --ink: rgb(17,24,39);
  --muted: rgb(100,116,139);
  --line: rgb(228,231,235);
  --bg: rgb(248,249,251);
  --card: rgb(255,255,255);
  --shadow: 0 8px 24px rgba(2,8,23,.06);
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--ink);
}

.childpanel .cp-title { font-weight: 900; letter-spacing: .2px; }
.childpanel .cp-eyebrow {
  display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:10px; background: rgba(253,190,2,.2); color: var(--ink);
}
.childpanel .cp-section { margin-top: 18px; }

.childpanel .cp-section-title {
  font-weight: 800; letter-spacing: .2px; display:flex; align-items:center; gap:.5rem;
}

.childpanel .cp-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* Steps */
.childpanel .cp-steps .cp-step-card{
  background: var(--card); border:1px solid var(--line); border-radius:16px;
  padding:14px; box-shadow: var(--shadow); height:100%;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.childpanel .cp-steps .cp-step-card:hover{ transform: translateY(-2px); border-color: rgba(2,8,23,.12); }

.childpanel .cp-step-badge{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background: linear-gradient(90deg, var(--brand), rgb(255,214,84)); color:#000;
  font-weight:900; margin-bottom:8px;
}
.childpanel .cp-step-title{ font-weight:800; margin-bottom:4px; }
.childpanel .cp-step-text{ color: var(--muted); margin:0; }

/* Feature cards */
.childpanel .cp-feature-card{
  display:flex; gap:12px; align-items:flex-start; background: var(--card);
  border:1px solid var(--line); border-radius:14px; padding:12px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.childpanel .cp-feature-card:hover{ transform: translateY(-1px); border-color: rgba(2,8,23,.12); box-shadow: var(--shadow); }
.childpanel .cp-feature-img{ width:48px; height:48px; object-fit:contain; border-radius:10px; }
.childpanel .cp-feature-title{ margin:0; font-weight:800; }
.childpanel .cp-feature-text{ margin:2px 0 0; color: var(--muted); }

/* NS card */
.childpanel .cp-ns-lead{ font-weight:700; }
.childpanel .cp-ns-card .list-group-item{ background: transparent; }
.childpanel .cp-ns { font-weight:800; }
.childpanel .cp-copy { border-radius: 10px; }

/* Form */
.childpanel .form-label{ font-weight:700; }
.childpanel .input-group-text{ background: var(--bg); border-color: var(--line); }
.childpanel .form-control, .childpanel .form-select{ border-color: var(--line); }
.childpanel .btn-brand{
  background: linear-gradient(90deg, var(--brand), rgb(255,214,84));
  color:#000; font-weight:900; letter-spacing:.2px; border:0; border-radius:12px;
  box-shadow: var(--shadow);
}
.childpanel .btn-brand:hover{ filter: brightness(1.02); }

/* FAQ */
.childpanel .accordion-button .cp-faq-num{
  display:inline-grid; place-items:center; width:28px; height:28px; margin-right:.5rem;
  border-radius:8px; background: rgba(253,190,2,.25); font-weight:800; color:#000;
}
.childpanel .accordion-button{ font-weight:700; }
.childpanel .accordion-body .cp-ans{
  display:inline-block; font-weight:800; margin-right:.5rem; color: var(--ink);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}