@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
:root{
  --ru-blue:#2563eb;
  --ru-blue-dark:#0b2b4a;
  --ru-border:#e2e8f0;
  --ru-bg:#f5f7fb;
}

html,body{height:100%;}
body{
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--ru-bg);
}

/* Global: remove strong shadows (vibe like your sample) */
*,*::before,*::after{
  box-shadow:none !important;
  text-shadow:none !important;
}

.btn:focus, .btn:active, .btn:focus-visible,
.form-control:focus, .form-select:focus{
  box-shadow:none !important;
}

/* Topbar */
.ru-topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ru-border);
}
.ru-topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.ru-brand{display:flex; align-items:center; gap:.75rem;}
.ru-logo{
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  background: transparent;
}
.ru-logo img{width:100%; height:100%; object-fit:contain;}
.ru-brand-name{
  font-weight:600;
  color: var(--ru-blue-dark);
  letter-spacing:.01em;
  font-size: 1.02rem;
}

.ru-brand-text{display:flex;flex-direction:column;line-height:1.05;}
.ru-brand-title{font-weight:600;color:var(--ru-blue-dark);letter-spacing:.01em;font-size:1.06rem;}
.ru-brand-sub{font-size:.78rem;color:#2563eb;font-weight:500;margin-top:2px;}

/* Nav */
.ru-nav a{
  text-decoration:none;
  color:#334155;
  font-weight:500;
  padding:.34rem .62rem;
  border-radius:10px;
  font-size: .9rem;
  transition: all .2s;
}
.ru-nav a:hover{background:#f1f5f9; color:#0f172a;}

/* Buttons */
.ru-btn-blue{
  background: var(--ru-blue);
  color:#fff;
  border-radius: 12px;
  border: 1px solid var(--ru-blue);
  font-weight: 600;
  transition: all .2s;
}
.ru-btn-blue:disabled, .ru-btn-blue.disabled,
button[data-otp-verify]:disabled, button[data-driver-submit]:disabled {
  background: #ffffff !important;
  color: #94a3b8 !important;
  border: 1px solid #cbd5e1 !important;
  opacity: 0.75 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.ru-btn-blue:not(:disabled),
button[data-otp-verify]:not(:disabled),
button[data-driver-submit]:not(:disabled) {
  background: var(--ru-blue) !important;
  border-color: var(--ru-blue) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
.ru-btn-blue:hover:not(:disabled), .ru-btn-blue:focus:not(:disabled){
  background: var(--ru-blue) !important;
  border-color: var(--ru-blue) !important;
  filter:brightness(.95);
  color:#fff !important;
}
.ru-btn-outline{
  border:1px solid rgba(15,23,42,0.08);
  border-radius:12px;
  background:#fff;
  font-weight:500;
  color:#0f172a;
  transition: all .2s;
}
.ru-btn-outline:hover, .ru-btn-outline:focus{
  background:#f8fafc !important;
  color:#0f172a !important;
  border-color: var(--ru-border) !important;
}

/* Sections */
.ru-section{padding: 64px 0;}
.ru-section-title{font-weight:600; color:var(--ru-blue-dark); text-align:center; font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing:-0.02em;}
.ru-section-sub{max-width:780px; margin:10px auto 0; text-align:center; color:#94A3B8; font-size:.9rem;}
.ru-card{
  border:1px solid rgba(15,23,42,0.05);
  border-radius: 16px;
  background:#fff;
}

/* Portal: hide sections when not in Home view */
.ru-section-hidden{ display:none !important; }

/* FAQ styling (clean + smaller text like reference) */
.ru-faq-cats .list-group-item{
  border:1px solid rgba(15,23,42,0.06);
  border-radius: 12px;
  margin-bottom: .55rem;
  font-weight: 500;
  color:#0f172a;
  background:#fff;
  font-size: .9rem;
  transition: all .2s;
}
.ru-faq-cats .list-group-item.active{
  background: rgba(37,99,235,.08) !important;
  border-color: rgba(37,99,235,.22) !important;
  color:#0b2b4a !important;
}
.ru-faq-acc .accordion-item{
  border:1px solid var(--ru-border);
  border-radius: 14px;
  overflow:hidden;
  margin-bottom: .8rem;
}
.ru-faq-acc .accordion-button{
  font-weight: 500;
  font-size: .9rem;
  padding: .78rem .95rem;
  background:#fff;
}
.ru-faq-acc .accordion-button:not(.collapsed){
  background: rgba(37,99,235,.06);
  color:#0b2b4a;
}
.ru-faq-acc .accordion-body{
  color:#475569;
  font-size: .93rem;
  line-height: 1.65;
}


/* Keep content visible under fixed topbar */
/* Home hero should start immediately under the fixed topbar (no white strip)
   so we don't rely on body padding that reveals the page background. */
body.home{ padding-top: 0 !important; margin:0; background: var(--ru-bg-primary, #0f172a); }


/* Smaller top header controls */
.ru-topbar .btn{padding:.4rem .75rem;font-size:.9rem;}
.ru-topbar .form-control{padding:.45rem .85rem;font-size:.9rem;}


/* Keep top header always visible while scrolling */
.ru-topbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 3000 !important;
  transform: none !important;
  opacity: 1 !important;
}


/* ===== Mobile header + offcanvas ===== */
.ru-desktop-topbar{ display:block; }
.ru-mobile-topbar{ display:none; }

.ru-mobile-topbar{
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
}
.ru-mobile-menu-btn{
  width:44px;
  height:44px;
  border:1px solid var(--ru-card-border, rgba(15,23,42,.15));
  border-radius:12px;
  background:var(--ru-card-bg, #ffffff);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background-color 0.3s, border-color 0.3s;
}
.ru-mobile-burger{ width:18px; display:flex; flex-direction:column; gap:4px; }
.ru-mobile-burger span{ display:block; height:2px; background:var(--ru-text-primary, #0f172a); border-radius:999px; transition:background-color 0.3s; }
.ru-mobile-brand{
  flex:1;
  text-align:center;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--ru-text-primary, #0f172a);
  font-size:1rem;
  margin:0 .35rem;
}

[data-bs-theme="dark"] .ru-mobile-menu-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
[data-bs-theme="dark"] .ru-mobile-burger span {
  background: #ffffff !important;
}
[data-bs-theme="dark"] .ru-mobile-brand {
  color: #ffffff !important;
}

[data-bs-theme="light"] .ru-mobile-menu-btn {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
}
[data-bs-theme="light"] .ru-mobile-burger span {
  background: #0f172a !important;
}
[data-bs-theme="light"] .ru-mobile-brand {
  color: #0f172a !important;
}

/* Footer Logo */
.ru-footer-logo {
  width: 44px;
  height: auto;
  transition: filter 0.3s, opacity 0.3s;
}
[data-bs-theme="dark"] .ru-footer-logo {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
[data-bs-theme="light"] .ru-footer-logo {
  filter: none;
  opacity: 1;
}
.ru-mobile-logo{
  width:42px;
  height:42px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--ru-border);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ru-mobile-logo img{ width:100%; height:100%; object-fit:contain; }

.ru-mobile-offcanvas{
  /* Partial-width drawer on mobile (same vibe as Passenger/Driver) */
  --bs-offcanvas-width: clamp(210px, 60vw, 320px);
  width: var(--bs-offcanvas-width) !important;
  background:#ffffff;
  color:#0f172a;
  border-right:1px solid #e2e8f0;
}
.ru-mobile-offcanvas .offcanvas-header{ border-bottom:1px solid #e2e8f0; }
.ru-mobile-offcanvas .offcanvas-title{ font-weight:800; letter-spacing:.02em; color:#0f172a; }
.ru-mobile-nav-list{ display:flex; flex-direction:column; gap:.5rem; margin:.2rem 0 1rem; }
.ru-mobile-nav-list a{
  text-decoration:none;
  color:#0f172a;
  border:1px solid #dbe3ef;
  border-radius:14px;
  padding:.72rem .82rem;
  font-weight:700;
  background:#fff;
 display:flex; align-items:center; gap:.7rem; }

/* Emoji icons in mobile menu (keeps look consistent with login.php menu) */
.ru-mobile-nav-list .ru-nav-emoji{
  width: 1.4rem;
  display:inline-flex;
  justify-content:center;
  font-size: 1.1rem;
  line-height: 1;
}
.ru-mobile-nav-list a:hover{ background:#f8fafc; border-color:#bfd0ea; color:#0f172a; }
.ru-mobile-search-form{ display:flex; gap:.45rem; margin:.15rem 0 .85rem; }
.ru-mobile-search-form input{
  flex:1;
  border:1px solid #dbe3ef;
  background:#fff;
  color:#0f172a;
  border-radius:14px;
  padding:.62rem .74rem;
  outline:none;
}
.ru-mobile-search-form input::placeholder{ color:#64748b; }
.ru-mobile-search-form button{
  border:1px solid #2563eb;
  background:#2563eb;
  color:#fff;
  border-radius:14px;
  padding:.62rem .78rem;
  font-weight:800;
}
.ru-mobile-actions{ display:flex; flex-direction:column; gap:.5rem; }
.ru-mobile-actions .btn{ width:100%; }
.ru-mobile-actions .ru-btn-outline{ border-color:#dbe3ef; color:#0f172a; background:#fff; }
.ru-mobile-actions .ru-btn-outline:hover{ background:#f8fafc; }

/* remove tiny white strip issues on top */
html, body{ margin:0; }
.ru-topbar{ border-top:0 !important; top:0 !important; }

@media (max-width: 768px){
  .ru-desktop-topbar{ display:none !important; }
  .ru-mobile-topbar{ display:flex !important; }
  .ru-topbar{ padding-top:max(0px, env(safe-area-inset-top)); }
}


/* Keep anchored sections visible below the fixed topbar */
section[id]{ scroll-margin-top: 110px; }

.ru-mobile-nav-list a i{ width:1.25rem; text-align:center; opacity:.9; }
.ru-mobile-nav-list a span{ flex:1; }


/* SweetAlert (mobile-friendly + no stroke) */
.swal2-popup.rv-popup{width:92vw !important;max-width:520px !important;border-radius:16px !important;padding:1rem 1rem .9rem !important;}
.swal2-popup.rv-popup .swal2-html-container{margin:.5rem 0 0 0 !important;}
.swal2-popup.rv-popup .swal2-input,.swal2-popup.rv-popup .swal2-textarea,.swal2-popup.rv-popup .swal2-file{font-size:.95rem !important;}
.swal2-popup.rb-popup{width:92vw !important;max-width:520px !important;border-radius:18px !important;}
.swal2-popup.rv-popup, .swal2-popup.rv-popup *, .swal2-popup.rb-popup, .swal2-popup.rb-popup *{-webkit-text-stroke:0 !important;text-shadow:none !important;}
.swal2-actions{flex-wrap:wrap !important;gap:.45rem !important;}
.swal2-actions .btn{margin:0 !important;}
@media (max-width:576px){.swal2-popup.rv-popup{padding:.9rem .85rem .8rem !important;}}