@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
/* ============================================================================
   rb_navy.css  (v8 — LIGHT redesign)   Northbound
   Light checkout / login matching the Northbound mockup.
   White card, light promo aside, blue gradient CTAs, pill tabs, light wizard.
   Loaded LAST (overrides LESS + admin).
   ============================================================================ */
:root{
  color-scheme:light;   /* stop browser dark-mode from forcing native inputs dark */
  --rb-primary:#2f6bff;
  --rb-primary-2:#4f93ff;
  --rb-grad:linear-gradient(90deg,#2f6bff 0%,#4f93ff 100%);
  --rb-grad-135:linear-gradient(135deg,#2f6bff 0%,#4f93ff 100%);
  --rb-ink:#0f1c3f;          /* headings / navy */
  --rb-text:#33415a;         /* body text */
  --rb-muted:#7a8aa8;        /* secondary text / placeholders */
  --rb-line:#e4e9f2;         /* borders */
  --rb-line-2:#d3dbea;
  --rb-field:#ffffff;
  --rb-field-soft:#f6f8fc;
  --rb-page-1:#eef2fb;
  --rb-page-2:#f7f9fd;
  --rb-aside-1:#eaf1ff;
  --rb-aside-2:#f6f9ff;
  --rb-soft-blue:#eaf1ff;    /* active pill / icon chips */
  --rb-on-accent:#ffffff;
  --rb-error:#e5484d;
  --rb-card-shadow:0 30px 70px -34px rgba(23,43,99,.35), 0 0 0 1px rgba(23,43,99,.04);
  --rb-font:'Cairo','Inter',-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ============================ PAGE ==================================== */
body.rb-navy{
  color-scheme:light !important;
  background:var(--rb-page-2) !important;
  background:
     radial-gradient(1000px 560px at 15% 8%, rgba(47,107,255,.10) 0%, rgba(47,107,255,0) 60%),
     radial-gradient(820px 620px at 92% 106%, rgba(79,147,255,.10) 0%, rgba(79,147,255,0) 60%),
     linear-gradient(180deg, var(--rb-page-1) 0%, var(--rb-page-2) 100%) !important;
  background-attachment:fixed !important;
  color:var(--rb-text) !important;
  font-family:var(--rb-font) !important;
}
body.rb-navy *{ font-family:var(--rb-font); }
/* The universal rule above has higher specificity than Font Awesome's own
   `.fa{font-family:FontAwesome}`, so it was overriding every <i class="fa">
   with Cairo/Inter — which has no glyphs at FA's private-use codepoints,
   rendering all icons (fa-motorcycle, fa-sign-in, …) as empty boxes.
   Restore the icon font on FA elements and their glyph pseudo-elements. */
body.rb-navy .fa,
body.rb-navy .fa:before,
body.rb-navy .fa:after,
body.rb-navy [class^="fa-"]:before,
body.rb-navy [class*=" fa-"]:before{ font-family:'FontAwesome' !important; }
body.rb-navy p, body.rb-navy span, body.rb-navy small, body.rb-navy li,
body.rb-navy h1,body.rb-navy h2,body.rb-navy h3,body.rb-navy h4,body.rb-navy legend{ color:var(--rb-text); }
body.rb-navy .container{ position:relative; z-index:1; }

/* ============================ HEADER (top bar + steps) ================ */
.navbar{ border:0 !important; background:#fff !important; margin-bottom:0 !important;
  box-shadow:0 1px 0 rgba(23,43,99,.06), 0 6px 24px -18px rgba(23,43,99,.4); }
#navbar2{ background:#fff; }
#navbar2 .container{ padding-top:6px; padding-bottom:6px; }
/* let the three header cells wrap: row1 = lock + logo, row2 = steps full width */
#headermain{ display:flex; flex-wrap:wrap; align-items:center; }
.col-headermain-lock{ order:1; flex:1 1 0; min-width:180px; }
.col-headermain-logo{ order:2; flex:1 1 auto; text-align:center; }
.col-headermain-steps{ order:3; flex:1 1 100%; width:100%; margin-top:6px;
  border-top:1px solid var(--rb-line); padding-top:12px; }
/* keep a symmetric right spacer so the logo stays centered */
.col-headermain-logo{ margin:0 auto; }
#logo .xlogo{ max-height:64px !important; filter:none !important; }
body.rb-navy .col-headermain-logo{ text-align:center !important; }
body.rb-navy #logo .xlogo, body.rb-navy .xlogo{ filter:none !important; }
.security-message,.col-headermain-lock .text-muted{ color:var(--rb-ink) !important; font-weight:700 !important; font-size:13.5px; }
.security-message .fa,.col-headermain-lock .fa{ color:var(--rb-primary) !important; }
#top.info-back-top{ background:#fff !important; border-bottom:1px solid var(--rb-line); }
#top-links,#top-links li,#top .btn-link{ color:var(--rb-muted) !important; }

/* ---- step wizard (.bs-wizard) — light ---- */
body.rb-navy .bs-wizard{ border-bottom:0 !important; margin:0 auto; max-width:760px; }
body.rb-navy .bs-wizard-stepnum{ color:var(--rb-ink) !important; font-weight:700 !important; font-size:14px; }
body.rb-navy .bs-wizard-stepnum .fa{ color:var(--rb-muted) !important; margin-inline-start:6px; }
body.rb-navy .bs-wizard >.bs-wizard-step >.progress{ background-color:#e3e9f5 !important; height:3px; }
body.rb-navy .bs-wizard >.bs-wizard-step >.progress >.progress-bar{ background:var(--rb-grad) !important; background-color:var(--rb-primary) !important; }
body.rb-navy .bs-wizard >.bs-wizard-step >.bs-wizard-dot{ background:#c9d3e6 !important; border:0 !important; width:34px; height:34px; }
body.rb-navy .bs-wizard >.bs-wizard-step >.bs-wizard-dot::after{ color:#fff !important; font-weight:800; line-height:34px; }
body.rb-navy .bs-wizard >.bs-wizard-step.complete >.bs-wizard-dot,
body.rb-navy .bs-wizard >.bs-wizard-step.active >.bs-wizard-dot{ background:var(--rb-grad-135) !important; box-shadow:0 8px 18px -6px rgba(47,107,255,.6) !important; }
body.rb-navy .bs-wizard >.bs-wizard-step.disabled >.bs-wizard-dot{ background:#c9d3e6 !important; }
body.rb-navy .bs-wizard >.bs-wizard-step.disabled >.bs-wizard-stepnum{ color:var(--rb-muted) !important; }

/* ====================== SPLIT-SCREEN SHELL (the card) ================ */
body.xtensions-account-page .container{ padding-top:8px; }
body.xtensions-account-page .row{ margin-inline:0 !important; }
#xlogin.login-panel-bg{
  position:relative; display:flex; flex-wrap:nowrap;
  width:100%; max-width:1040px; min-height:560px;
  margin:26px auto 56px !important; padding:0 !important;
  background:#ffffff;
  border:1px solid var(--rb-line); border-radius:26px; overflow:hidden;
  box-shadow:var(--rb-card-shadow);
}

/* ---- brand / promo hero (light) ---- */
.rb-aside{
  position:relative; flex:0 0 40%; max-width:40%;
  padding:48px 40px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  background:linear-gradient(160deg, var(--rb-aside-1) 0%, var(--rb-aside-2) 100%);
  border-inline-end:1px solid var(--rb-line);
  overflow:hidden;
}
.rb-aside .rb-aside-icon{
  width:104px; height:104px; margin:0 auto 22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid rgba(47,107,255,.28);
  box-shadow:0 16px 34px -18px rgba(47,107,255,.55);
}
.rb-aside .rb-aside-icon .fa{ font-size:46px; color:var(--rb-primary); }
.rb-aside .rb-brand{ position:relative; font-weight:800; font-size:22px; letter-spacing:.5px; color:var(--rb-ink); margin:0 0 4px; text-align:center; }
.rb-aside .rb-brand b{ color:var(--rb-primary); }
.rb-aside .rb-tagline{ position:relative; font-size:15.5px; font-weight:600; line-height:1.9; color:var(--rb-text); margin:2px 0 8px; }
.rb-aside .rb-perks{ position:relative; list-style:none; margin:16px 0 0; padding:0; }
.rb-aside .rb-perks li{ position:relative; color:var(--rb-text); font-size:14.5px; font-weight:600; margin:16px 0; padding-inline-start:46px; min-height:34px; display:flex; align-items:center; }
.rb-aside .rb-perks li .fa{
  position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:10px; background:var(--rb-soft-blue);
  color:var(--rb-primary); font-size:16px; display:flex; align-items:center; justify-content:center;
}
.rb-aside .rb-aside-foot{ position:relative; margin-top:auto; padding-top:24px; color:var(--rb-muted); font-size:12px; text-align:center; }

/* ---- form pane ---- */
#xlogin > .login-section,
#xlogin > #loginPage{
  flex:1 1 auto; min-width:0;
  max-width:none !important; margin:0 !important;
  background:#fff !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; padding:44px 48px !important;
  align-self:stretch; overflow:auto;
}
#xlogin > .login-section::before, #xlogin > .login-section::after{ display:none !important; }

.profile-card, .login-panel-bg #xlogin-otp{
  max-width:1040px !important; margin:14px auto !important;
  background:#fff !important;
  border:1px solid var(--rb-line) !important; border-radius:20px !important;
  padding:24px 28px !important; box-shadow:var(--rb-card-shadow) !important; position:relative; overflow:hidden;
}

/* heading */
.section-heading,.section-heading.accountpage{ color:var(--rb-ink) !important; font-weight:800 !important; font-size:22px !important; text-align:start !important; padding-top:2px !important; }
.section-subheading,.login-section .lead{ color:var(--rb-muted) !important; }

/* ================================= TABS (pills) ====================== */
#accountTabs,.tabbable .nav-tabs,.nav-tabs{ border-bottom:1px solid var(--rb-line) !important; margin:0 0 22px !important; display:flex; gap:6px; }
#accountTabs > li > a,.tabbable .nav-tabs > li > a{
  color:var(--rb-muted) !important; font-weight:700 !important; font-size:15px !important;
  padding:12px 18px !important; margin:0 !important; border:0 !important; border-radius:12px 12px 0 0 !important;
  background:transparent !important; transition:color .18s, background .18s;
}
#accountTabs > li > a:hover,.tabbable .nav-tabs > li > a:hover{ color:var(--rb-ink) !important; background:var(--rb-field-soft) !important; border:0 !important; }
#accountTabs > li.active,.tabbable .nav-tabs > li.active{ border:0 !important; background:transparent !important; }
#accountTabs > li.active > a,.tabbable .nav-tabs > li.active > a,
#accountTabs > li.active > a:hover,#accountTabs > li.active > a:focus{
  color:var(--rb-primary) !important; background:var(--rb-soft-blue) !important; border:0 !important; position:relative;
}
#accountTabs > li.active > a::after,.tabbable .nav-tabs > li.active > a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:3px; border-radius:3px;
  background:var(--rb-grad);
}
#accountTabs > li > a .fa,.tabbable .nav-tabs > li > a .fa{ margin-inline-start:8px; font-size:15px; opacity:.9; }

/* ================================ INPUTS (floating material labels) == */
.group{ margin-bottom:18px !important; }
.group .inputMaterial,.input-group.group input.inputMaterial,.group select.inputMaterial,.group textarea.inputMaterial{
  background:var(--rb-field) !important; color:var(--rb-ink) !important; color-scheme:light !important;
  border:1px solid var(--rb-line) !important; border-radius:12px !important; height:52px !important;
  padding:18px 14px 6px !important; transition:border-color .18s,box-shadow .18s,background .18s;
}
/* inner field icons (email / password) via inline SVG. Icon sits on the physical LEFT
   (= inline-end in RTL); the floating label/placeholder stays on the right, no overlap. */
.group input[name="email"].inputMaterial,.group input[name="telephone"].inputMaterial{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237a8aa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.81.36 1.6.68 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.24a2 2 0 0 1 2.11-.45c.74.32 1.53.55 2.34.68A2 2 0 0 1 22 16.92z'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:left 14px center !important; background-size:20px !important;
  padding-inline-end:44px !important;
}
.group input[name="password"].inputMaterial{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237a8aa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:left 14px center !important; background-size:20px !important;
  padding-inline-end:44px !important;
}
.group{ position:relative; }
.group textarea.inputMaterial{ height:auto !important; }
.group .inputMaterial:focus,.input-group.group input.inputMaterial:focus,.group select.inputMaterial:focus{
  border-color:var(--rb-primary) !important; background:#fff !important;
  box-shadow:0 0 0 3px rgba(47,107,255,.16) !important; outline:0 !important;
}
.group .inputMaterial::placeholder{ color:var(--rb-muted) !important; }
.group label,.input-group.group label{ color:var(--rb-muted) !important; font-weight:600 !important; }
.group.focus label,.group.filled label,.group.filledalways label,.group .intl-tel-input+label{ background:#fff !important; border-radius:6px !important; padding:0 6px !important; }
.group.focus label{ color:var(--rb-primary) !important; }
.group.filled label{ color:var(--rb-muted) !important; }
.input-group.group button{ border-radius:0 12px 12px 0 !important; }
.group select.inputMaterial+label+labelselect::after{ border-top-color:var(--rb-primary) !important; }
.group label>span.required:after,.form-group label>span.required:after,.group required:after{ color:var(--rb-error) !important; }

/* radios / checkboxes */
.input-radio:checked,.input-checkbox:checked,a.heading-panel[aria-expanded="true"]::before{ border:none !important; box-shadow:0 0 0 10px var(--rb-primary) inset !important; }
.input-radio,.input-checkbox{ border-color:var(--rb-line-2) !important; }
.is_checkbox label,.checkbox label{ color:var(--rb-text) !important; font-weight:500 !important; }

/* =============================== BUTTONS ============================= */
input[type="submit"].btn.btn-success,button.btn.btn-success,
#button-register,#button-login,#button_otp_login,#button-otp-register,#button-social-register,
#smspro_login_check_mobile_btn,#smspro_change_mobile_btn,.btn.mybutton{
  background:var(--rb-grad) !important; background-image:var(--rb-grad) !important; background-color:var(--rb-primary) !important;
  color:var(--rb-on-accent) !important; border:0 !important; border-radius:13px !important; height:52px;
  font-weight:800 !important; font-size:15px !important; letter-spacing:.2px;
  box-shadow:0 14px 28px -10px rgba(47,107,255,.6) !important; transition:transform .15s,box-shadow .15s,filter .15s !important;
}
input[type="submit"].btn.btn-success:hover,button.btn.btn-success:hover,
#button-register:hover,#button-login:hover,#button_otp_login:hover,#smspro_login_check_mobile_btn:hover{
  transform:translateY(-1px) !important; filter:brightness(1.04) !important; box-shadow:0 18px 34px -10px rgba(47,107,255,.7) !important;
}
/* ghost secondary */
a.btn.btn-success,a.btn.btn-success.width100{
  background:#fff !important; background-image:none !important;
  color:var(--rb-primary) !important; border:1px solid var(--rb-line-2) !important; border-radius:13px !important;
  height:50px; line-height:34px; font-weight:700 !important; box-shadow:none !important;
}
a.btn.btn-success:hover,a.btn.btn-success.width100:hover{ background:var(--rb-soft-blue) !important; color:var(--rb-primary) !important; border-color:var(--rb-primary) !important; }
.btn.btn-success-alternate,.btn.btn-default,.btn-default{ background:#fff !important; color:var(--rb-primary) !important; border:1px solid var(--rb-line-2) !important; border-radius:13px !important; font-weight:600 !important; }
.btn.btn-success-alternate:hover,.btn-default:hover{ background:var(--rb-soft-blue) !important; color:var(--rb-primary) !important; }
.btn.progress-bar-striped.active{ background-color:var(--rb-primary) !important; }
.width100{ width:100% !important; }
.buttons{ margin-top:10px; }

/* =============================== LINKS / MISC ======================= */
body.rb-navy a,.footer-separator a,a.pointer,.xclosethepopup,.login-section a,.text-separator{ color:var(--rb-primary) !important; }
body.rb-navy a:hover,.footer-separator a:hover{ color:#1b4fd6 !important; }
.footer-separator{ border-top:1px solid var(--rb-line) !important; padding-top:14px !important; margin-top:16px !important; }
.login-panel-bg .separator,.separator{ border-bottom:1px dashed var(--rb-line) !important; margin:24px 0 16px !important; }
.text-separator,.separator.login-panel-bg+label,.separator.login-panel-bg+label.is_or{ background:transparent !important; color:var(--rb-muted) !important; }
#xagreep,.agree,.is_checkbox{ color:var(--rb-text) !important; }
#xagreep a,.agree a{ color:var(--rb-primary) !important; }

/* alerts */
.alert{ border-radius:12px !important; border:1px solid var(--rb-line) !important; }
.alert-warning{ color:#8a5a00 !important; background:#fff6e6 !important; border-color:#ffe0a3 !important; }
.alert-danger{ color:#a32127 !important; background:#fdecec !important; border-color:#f6c2c4 !important; }
.alert-success{ color:#1c7a43 !important; background:#e9f9ef !important; border-color:#b6e6c8 !important; }
.xerror,.text-danger{ color:var(--rb-error) !important; }
.group.has-error .inputMaterial{ border-color:var(--rb-error) !important; }
.coupon.alert,.couponapplied{ color:#8a5a00 !important; }
#nprogress .bar{ background:var(--rb-primary) !important; }
#nprogress .peg{ box-shadow:0 0 10px var(--rb-primary),0 0 5px var(--rb-primary) !important; }
#nprogress .spinner-icon{ border-top-color:var(--rb-primary) !important; border-left-color:var(--rb-primary) !important; }

/* ====================== CHECKOUT / PAYMENT (light) ================== */
body.rb-navy #step_login_panel,body.rb-navy #step_address_panel,body.rb-navy #step_payment_panel,
body.rb-navy #xcheckout,body.rb-navy #xconfirm{ color:var(--rb-text); }
body.rb-navy .panel,body.rb-navy .panel-default,body.rb-navy .well,body.rb-navy .inlineaddress{
  position:relative; background:#fff !important;
  border:1px solid var(--rb-line) !important; border-radius:16px !important; color:var(--rb-text) !important;
  box-shadow:var(--rb-card-shadow) !important; overflow:hidden;
}
body.rb-navy .panel-heading,body.rb-navy .panel-title,body.rb-navy h3,body.rb-navy h4{ background:transparent !important; color:var(--rb-ink) !important; border-color:var(--rb-line) !important; font-weight:700 !important; }
body.rb-navy .panel-body{ background:transparent !important; }
#step_login_panel .tabbable .nav-tabs>li.active,#step_login_panel .pside-bar .nav-tabs>li.active{ border-top:0 !important; border-bottom:3px solid var(--rb-primary) !important; }
body.rb-navy table,body.rb-navy td,body.rb-navy th,body.rb-navy .table{ color:var(--rb-text) !important; border-color:var(--rb-line) !important; }
body.rb-navy hr{ border-color:var(--rb-line) !important; }
body.rb-navy .radio,body.rb-navy .checkbox,body.rb-navy label.address-label,body.rb-navy .address-list label{ color:var(--rb-text) !important; }
body.rb-navy #existingAddress .panel.panel-default,body.rb-navy .address-list li,body.rb-navy ul.list-group>li{ transition:border-color .15s, box-shadow .15s; }
body.rb-navy .radio:hover,body.rb-navy .address-list label:hover{ border-color:var(--rb-primary) !important; }

/* ---- "continue to payment" progress button ---- */
body.rb-navy #progress-continue,body.rb-navy .progress-continue{ height:54px !important; border-radius:14px !important; overflow:hidden; background:transparent !important; box-shadow:0 12px 26px -10px rgba(47,107,255,.55) !important; }
body.rb-navy #progress-continue .progress-bar,
body.rb-navy .progress-bar.progress-bar-success,
body.rb-navy #button-payment{
  background:var(--rb-grad) !important; background-image:var(--rb-grad) !important; background-color:var(--rb-primary) !important;
  color:var(--rb-on-accent) !important; height:54px !important; line-height:54px !important; border-radius:14px !important; box-shadow:none !important;
}
body.rb-navy #progress-continue .progress-bar span,body.rb-navy #button-payment span{ color:var(--rb-on-accent) !important; font-weight:800 !important; font-size:15px !important; }
body.rb-navy #progress-continue-disabled{ border-radius:14px !important; overflow:hidden; }
body.rb-navy #progress-continue-disabled .progress-bar,body.rb-navy #button-payment-disabled{ background:#e7ecf6 !important; color:var(--rb-muted) !important; height:54px !important; line-height:54px !important; }
body.rb-navy #progress-continue-disabled .progress-bar span{ color:var(--rb-muted) !important; }

/* =============================== FOOTER ============================= */
footer.footer{ background:#fff; border-top:1px solid var(--rb-line); margin-top:26px; padding:18px 0; }
footer.footer .text-muted,footer.footer a.text-muted{ color:var(--rb-muted) !important; }
footer.footer .footercontact a,footer.footer a[href^="mailto"]{ color:var(--rb-primary) !important; }
footer.footer .footerlogos img{ max-height:30px; width:auto; background:#fff; border:1px solid var(--rb-line); border-radius:8px; padding:3px 6px; margin:3px; }
footer.footer .fa-phone{ color:var(--rb-primary) !important; }
footer.footer .policy a{ color:var(--rb-muted) !important; }

/* ====================== SIGNUP fallback (register.twig) ============= */
#content > h1{ color:var(--rb-ink) !important; font-weight:800; }
#register_form{ position:relative; max-width:680px; margin:14px auto 34px;
  background:#fff !important; border:1px solid var(--rb-line) !important;
  border-radius:20px !important; padding:30px !important; box-shadow:var(--rb-card-shadow) !important; color:var(--rb-text) !important; overflow:hidden; }
#register_form legend{ color:var(--rb-ink) !important; font-size:18px !important; border-bottom:1px solid var(--rb-line) !important; padding-bottom:10px !important; margin-bottom:18px !important; }
#register_form label,#register_form .control-label,#register_form .radio-inline,#register_form .checkbox{ color:var(--rb-ink) !important; }
#register_form .form-control,#register_form input[type="text"],#register_form input[type="email"],#register_form input[type="tel"],#register_form input[type="password"],#register_form select,#register_form textarea{
  background:#fff !important; color:var(--rb-ink) !important; border:1px solid var(--rb-line) !important; border-radius:12px !important; box-shadow:none !important; height:46px; }
#register_form .form-control:focus{ border-color:var(--rb-primary) !important; box-shadow:0 0 0 3px rgba(47,107,255,.16) !important; }
#register_form a{ color:var(--rb-primary) !important; }
#register_form .btn,#register_form .btn-primary,#register_form input[type="submit"]{ background:var(--rb-grad) !important; color:#fff !important; border:0 !important; border-radius:13px !important; font-weight:800 !important; box-shadow:0 14px 28px -10px rgba(47,107,255,.6) !important; }

/* ====================== MOCKUP EXTRAS ============================== */
/* --- checkout top bar (trust | logo | back-to-cart) --- */
.rb-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0 10px; }
.rb-tb-trust{ display:flex; align-items:center; gap:10px; flex:1 1 0; min-width:0; }
.rb-tb-trust > .fa{ color:var(--rb-primary); font-size:22px; }
.rb-tb-trust b{ display:block; color:var(--rb-ink); font-size:14px; font-weight:800; line-height:1.3; }
.rb-tb-trust small{ display:block; color:var(--rb-muted); font-size:12px; }
.rb-tb-logo{ flex:0 0 auto; text-align:center; }
.rb-tb-logo .xlogo{ max-height:60px !important; width:auto; }
.rb-tb-cart{ display:flex; align-items:center; gap:10px; flex:1 1 0; justify-content:flex-end; color:var(--rb-ink) !important; font-weight:700; font-size:14px; }
.rb-tb-cart:hover{ color:var(--rb-primary) !important; }
.rb-tb-cart .rb-cart-wrap{ position:relative; display:inline-flex; align-items:center; }
.rb-tb-cart .rb-cart-wrap > .fa{ font-size:24px; color:var(--rb-ink); }
.rb-cart-badge{ position:absolute; top:-9px; inset-inline-start:-9px; background:var(--rb-primary); color:#fff !important;
  border-radius:50%; min-width:19px; height:19px; font-size:11px; font-weight:800; line-height:19px; text-align:center; padding:0 4px; box-shadow:0 3px 8px -2px rgba(47,107,255,.7); }

/* --- steps row + numbered wizard --- */
.rb-steps{ border-top:1px solid var(--rb-line); padding:14px 0 6px; }
body.rb-navy .bs-wizard >.bs-wizard-step >.bs-wizard-dot{ position:relative; }
body.rb-navy #step1 >.bs-wizard-dot::after{ content:"1" !important; }
body.rb-navy #step2 >.bs-wizard-dot::after{ content:"2" !important; }
body.rb-navy #step3 >.bs-wizard-dot::after{ content:"3" !important; }
body.rb-navy .bs-wizard >.bs-wizard-step >.bs-wizard-dot::after{
  position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center;
  color:#fff !important; font-weight:800; font-size:15px;
}
.rb-step-sub{ font-size:12px; color:var(--rb-muted); margin-top:2px; }

/* --- phone-verify card (wraps {{ smslogin }}) --- */
.rb-phone-verify{ margin-top:18px; padding:18px 16px; border:1px solid var(--rb-line); border-radius:14px; background:var(--rb-field-soft); }
.rb-phone-verify .rb-pv-title{ color:var(--rb-ink); font-weight:800; font-size:15px; text-align:center; }
.rb-phone-verify .rb-pv-sub{ color:var(--rb-muted); font-size:12.5px; text-align:center; margin:2px 0 12px; }
.rb-phone-verify .group{ margin-bottom:0 !important; }
.rb-phone-verify .btn{ height:48px; }

/* --- footer: help block + trust badges + payment cards --- */
.rb-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.rb-foot-help{ display:flex; align-items:center; gap:12px; flex:1 1 220px; }
.rb-foot-help > .fa{ font-size:26px; color:var(--rb-primary); }
.rb-foot-help b{ display:block; color:var(--rb-ink); font-size:13.5px; font-weight:800; }
.rb-foot-help .rb-foot-contact{ color:var(--rb-muted); font-size:12.5px; }
.rb-foot-help .rb-foot-contact a{ color:var(--rb-primary) !important; }
.rb-foot-help .fa-whatsapp{ color:#25D366 !important; margin-inline-start:4px; }
.rb-foot-trust{ display:flex; align-items:center; gap:22px; flex:1 1 240px; justify-content:center; }
.rb-foot-trust .rb-trust{ display:flex; align-items:center; gap:8px; color:var(--rb-text); font-size:13px; font-weight:600; }
.rb-foot-trust .rb-trust .fa{ color:#1c7a43; font-size:16px; }
.rb-foot-pay{ display:flex; align-items:center; gap:8px; flex:1 1 240px; justify-content:flex-end; flex-wrap:wrap; }
.rb-foot-pay .rb-foot-pay-title{ width:100%; text-align:end; color:var(--rb-muted); font-size:12px; margin-bottom:4px; }
.rb-foot-pay img,footer.footer .footerlogos img{ max-height:30px; width:auto; background:#fff; border:1px solid var(--rb-line); border-radius:8px; padding:3px 7px; margin:3px; box-shadow:0 4px 10px -6px rgba(23,43,99,.4); }

/* --- login heading + subtitle --- */
.section-subheading{ color:var(--rb-muted) !important; font-size:14px; margin:2px 0 18px; }
/* remember-me / forgot row */
.rb-form-row{ display:flex; align-items:center; justify-content:space-between; margin:2px 0 14px; }
.rb-form-row .rb-remember{ display:flex; align-items:center; gap:8px; color:var(--rb-text); font-size:13.5px; font-weight:500; margin:0; }
.rb-form-row a{ font-size:13.5px; font-weight:600; }

/* =============================== RESPONSIVE ========================= */
@media (max-width:880px){
  #xlogin.login-panel-bg{ flex-direction:column; max-width:480px; min-height:auto; }
  .rb-aside{ flex-basis:auto; max-width:100%; padding:30px 26px 24px; border-inline-end:0; border-bottom:1px solid var(--rb-line); }
  .rb-aside .rb-aside-icon{ width:84px; height:84px; margin-bottom:16px; }
  .rb-aside .rb-aside-icon .fa{ font-size:38px; }
  .rb-aside .rb-perks{ display:none; }
  .rb-aside .rb-aside-foot{ display:none; }
  #xlogin > .login-section,#xlogin > #loginPage{ padding:28px 24px !important; }
  #headermain{ justify-content:center; }
  .col-headermain-lock{ order:2; flex:1 1 100%; text-align:center; margin-top:4px; }
  .rb-topbar{ flex-wrap:wrap; justify-content:center; text-align:center; }
  .rb-tb-trust,.rb-tb-cart{ flex:1 1 100%; justify-content:center; }
  .rb-tb-logo{ order:-1; flex:1 1 100%; }
  .rb-foot{ flex-direction:column; text-align:center; }
  .rb-foot-help,.rb-foot-trust,.rb-foot-pay{ justify-content:center; }
  .rb-foot-pay .rb-foot-pay-title{ text-align:center; }
  .rb-step-sub{ display:none; }
}
@media (max-width:480px){
  #xlogin.login-panel-bg{ border-radius:18px; margin:14px auto 40px !important; }
  .rb-aside{ padding:24px 20px 20px; }
  .rb-aside .rb-brand{ font-size:20px; }
  #xlogin > .login-section,#xlogin > #loginPage{ padding:24px 18px !important; }
  #accountTabs > li > a{ font-size:14px !important; padding:10px 12px !important; }
  #logo .xlogo{ max-height:44px !important; }
}