/* --- Background layers --- */
.rpro-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.rpro-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slight scale helps avoid edge gaps on some devices */
  transform: scale(1.03);
}

/* Utility needed on auth pages (Argon has no Tailwind .hidden) */
.hidden { display: none !important; }

/* Light / Dark image switching
   - default: system preference
   - override: add class "dark-mode" to body
*/
.rpro-bg .bg-light { display: block; }
.rpro-bg .bg-dark { display: none; }

@media (prefers-color-scheme: dark) {
  .rpro-bg .bg-light { display: none; }
  .rpro-bg .bg-dark { display: block; }
}

/* Overlay tint to help readability on busy areas */
.rpro-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Light mode overlay (slightly warm/neutral) */
  background: rgba(255, 255, 255, 0.45);
}

/* Dark mode overlay (deeper) */
@media (prefers-color-scheme: dark) {
  .rpro-bg-overlay { background: rgba(0, 0, 0, 0.45); }
}
body.dark-mode .rpro-bg-overlay { background: rgba(0, 0, 0, 0.45); }

/* Content layer above background */
.rpro-content {
  position: relative;
  z-index: 2;
}

/* Manual overrides should beat system preference */
body.light-mode .rpro-bg .bg-light { display: block !important; }
body.light-mode .rpro-bg .bg-dark  { display: none !important; }

body.dark-mode .rpro-bg .bg-light { display: none !important; }
body.dark-mode .rpro-bg .bg-dark  { display: block !important; }

/* Overlay tint overrides */
body.light-mode .rpro-bg-overlay { background: rgba(255, 255, 255, 0.45) !important; }
body.dark-mode  .rpro-bg-overlay { background: rgba(0, 0, 0, 0.45) !important; }

/* --- HERO: text colors per mode --- */
.rpro-hero-title { color: #111827; }      /* light: near-gray-900 */
.rpro-hero-subtitle { color: #374151; }   /* light: gray-700 */
.rpro-hero-muted { color: #6B7280; }      /* light: gray-500 */

/* Dark mode (default for your site) */
body.dark-mode .rpro-hero-title { color: rgba(255,255,255,0.95); }
body.dark-mode .rpro-hero-subtitle { color: rgba(255,255,255,0.78); }
body.dark-mode .rpro-hero-muted { color: rgba(255,255,255,0.65); }

/* Light mode forced */
body.light-mode .rpro-hero-title { color: #111827; }
body.light-mode .rpro-hero-subtitle { color: #374151; }
body.light-mode .rpro-hero-muted { color: #6B7280; }

/* --- HERO: glass mockup --- */
.rpro-hero-mock-wrap{
  /* Glass container */
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

/* Slightly different glass for light mode (less “fog”) */
body.light-mode .rpro-hero-mock-wrap{
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

/* The image itself: a touch translucent so the “glass” feels real */
.rpro-hero-mock{
  opacity: 0.58;
  filter: saturate(2) contrast(1);
}
body.light-mode .rpro-hero-mock{
  opacity: 0.85;
  filter: saturate(4) contrast(0,5);
}

/* --- 3D Neon CTA Button --- */
.rpro-btn-3d{
  position: relative;
  border-radius: 14px;
  padding: 14px 28px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-decoration: none;

  /* Glass base */
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* 3D depth */
  box-shadow:
    0 22px 60px rgba(0,0,0,0.35),
    0 2px 0 rgba(255,255,255,0.06) inset;

  color: rgba(255,255,255,0.95);

  transform: translateY(0);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, background 160ms ease;
}

/* Neon top line highlight */
.rpro-btn-3d::before{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 4px;
  height: 2px;
  border-radius: 999px;

  /* Neon line */
  background: linear-gradient(90deg, rgba(94,234,212,0), rgba(94,234,212,0.95), rgba(232,121,249,0.85), rgba(94,234,212,0));
  filter: blur(0.2px);
  opacity: 0.95;
  pointer-events: none;
}

/* Glow aura */
.rpro-btn-3d::after{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 18px;
  background: radial-gradient(60% 80% at 50% 0%,
    rgba(94,234,212,0.28),
    rgba(232,121,249,0.18),
    rgba(0,0,0,0)
  );
  opacity: 0.9;
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

/* Hover / active interactions */
.rpro-btn-3d:hover{
  transform: translateY(-1px);
  box-shadow:
    0 24px 55px rgba(0,0,0,0.45),
    0 2px 0 rgba(255,255,255,0.08) inset;
  filter: brightness(1.06);
}

.rpro-btn-3d:active{
  transform: translateY(2px);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.05) inset;
}

/* Accessibility focus */
.rpro-btn-3d:focus{
  outline: none;
}
.rpro-btn-3d:focus-visible{
  outline: 2px solid rgba(94,234,212,0.65);
  outline-offset: 3px;
}

/* Light mode tuning: darker text + slightly less glow */
body.light-mode .rpro-btn-3d{
  color: rgba(17,24,39,0.95);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.18),
    0 2px 0 rgba(255,255,255,0.35) inset;
}

body.light-mode .rpro-btn-3d::after{
  opacity: 0.9;
}

/* --- GLASS CARD SYSTEM (reused across sections) --- */
.rpro-glass {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.30);
}

body.light-mode .rpro-glass {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
}

.rpro-card {
  border-radius: 18px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.rpro-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(0,0,0,0.35);
}

body.light-mode .rpro-card:hover {
  box-shadow: 0 26px 60px rgba(0,0,0,0.18);
}

/* Typography helpers (avoid relying on missing dark: variants) */
.rpro-h2 { color: rgba(255,255,255,0.95); }
.rpro-p  { color: rgba(255,255,255,0.72); }

body.light-mode .rpro-h2 { color: #111827; }
body.light-mode .rpro-p  { color: #374151; }

/* --- FEATURE CARD IMAGE OVERLAY --- */
.rpro-feature-image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.12);
}

/* Slightly lighter overlay in light mode */
body.light-mode .rpro-feature-image-overlay {
  background: rgba(0, 0, 0, 0.06);
}

/* --- Feature image sizing (prevents side-cropping on mobile) --- */

/* Mobile first (iPhone SE, small phones) */
.rpro-feature-media {
  height: 9.5rem; /* smaller height = less side crop */
}
.rpro-feature-bg {
  height: 100%;
}

/* Small devices */
@media (min-width: 640px) {
  .rpro-feature-media {
    height: 12rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .rpro-feature-media {
    height: 20rem; /* similar to old h-80 */
  }
}

/* --- SECTION KICKER (e.g. "Features") --- */
.rpro-section-kicker {
  color: rgba(232, 121, 249, 0.95); /* neon purple */
  letter-spacing: 0.16em;
}

/* Dark mode: strong neon + glow */
body.dark-mode .rpro-section-kicker {
  color: rgba(232, 121, 249, 1);
  text-shadow:
    0 0 10px rgba(232, 121, 249, 0.65),
    0 0 22px rgba(232, 121, 249, 0.35);
}

/* Light mode: elegant purple, no glow */
body.light-mode .rpro-section-kicker {
  color: rgba(147, 51, 234, 0.95); /* deeper purple */
  text-shadow: none;
}

/* Subtle divider that works on glass */
.rpro-divider {
  border-top-color: rgba(255,255,255,0.14);
}
body.light-mode .rpro-divider {
  border-top-color: rgba(17,24,39,0.12);
}

.rpro-avatar-ring { background: rgba(255,255,255,0.10); }
body.light-mode .rpro-avatar-ring { background: rgba(17,24,39,0.06); }

/* --- Testimonials: subtitle accent (neon purple muted) --- */
.rpro-testimonial-subtitle {
  color: rgba(232, 121, 249, 0.95); /* neon purple */
}

/* Optional: slightly softer in light mode if needed */
body.light-mode .rpro-testimonial-subtitle {
  color: rgba(168, 85, 247, 0.85);
}

/* --- FAQ section --- */
.rpro-faq-item {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.25rem;
  padding: 1.75rem 2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Dark mode */
body.dark-mode .rpro-faq-item {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
}

/* FAQ title */
.rpro-faq-title {
  color: rgba(232, 121, 249, 0.95);
}

/* FAQ text */
.rpro-faq-text {
  color: rgba(255, 255, 255, 0.75);
}

/* Light mode overrides */
body.light-mode .rpro-faq-title {
  color: rgba(232, 121, 249, 0.95)
}

body.light-mode .rpro-faq-text {
  color: #374151; /* gray-700 */
}

/* Footer links */
.rpro-footer-link {
  color: rgba(255,255,255,0.75);
  transition: color .2s ease;
}

body.light-mode .rpro-footer-link {
  color: rgba(17,24,39,0.7);
}

.rpro-footer-link:hover {
  color: rgba(232,121,249,0.95); /* neon accent */
}

/* --- FOOTER: legal row (do not rely on tailwind gap utilities) --- */
.rpro-footer-legal{
  margin-top: 5rem;                 /* like mt-20 */
  padding-top: 2.5rem;              /* like pt-10 */
  padding-bottom: 4rem;             /* extra room from bottom */
  border-top: 1px solid rgba(255,255,255,0.10);

  display: flex;
  flex-direction: column;
  gap: 1rem;                        /* fallback spacing */
  align-items: center;
  text-align: center;
}

.rpro-footer-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* spacing between links (works even if tailwind gap is missing) */
.rpro-footer-links a{
  margin: 0.25rem 0.75rem;          /* vertical + horizontal */
}

/* Desktop: left/right on one line */
@media (min-width: 640px){
  .rpro-footer-legal{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 2rem;
  }
  .rpro-footer-links{
    justify-content: flex-end;
  }
  .rpro-footer-links a{
    margin: 0 0 0 1.5rem;           /* left spacing only */
  }
}

/* =========================
   NAVBAR (RPRO)
========================= */

/* desktop auth visible, mobile auth hidden */
.rpro-nav-actions{ display:none; }
.rpro-nav-mobile-auth{ display:block; }

@media (min-width: 768px){
  .rpro-nav-actions{
    display:flex;
    align-items:center;
    gap: 0.75rem;
  }
  .rpro-nav-mobile-auth{
    display:none;
  }
}

/* Prevent the right side (auth + toggle) from being squeezed out */
.rpro-no-shrink{
  flex-shrink: 0;
  white-space: nowrap;
}

/* Desktop: let the center menu take remaining space, center it, and allow wrapping */
@media (min-width: 768px){
  .rpro-nav-menu-center{
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0; /* important: allows flex child to shrink properly */
  }
}

/* Link colors per mode */
.rpro-nav { color: #111827; }
body.dark-mode .rpro-nav { color: rgba(255,255,255,0.92); }
.rpro-nav{
  background: transparent !important;
}

.rpro-nav-link{
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: rgba(17,24,39,0.85);
  transition: background 160ms ease, color 160ms ease;
}
body.dark-mode .rpro-nav-link{
  color: rgba(255,255,255,0.82);
}
.rpro-nav-link:hover{
  background: rgba(255,255,255,0.18);
  color: rgba(17,24,39,0.98);
}
body.dark-mode .rpro-nav-link:hover{
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.98);
}

/* Icon links */
.rpro-nav-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.5rem 0.65rem;
  border-radius:999px;
  color: rgba(17,24,39,0.85);
  transition: background 160ms ease, color 160ms ease;
}
body.dark-mode .rpro-nav-icon{ color: rgba(255,255,255,0.80); }
.rpro-nav-icon:hover{ background: rgba(255,255,255,0.18); }
body.dark-mode .rpro-nav-icon:hover{ background: rgba(255,255,255,0.10); }

/* NAV MENU BASE */
.rpro-nav-menu{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* MOBILE (hidden by default) */
@media (max-width: 767px){
  .rpro-nav-menu{
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 5.5rem;
    flex-direction: column;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
    z-index: 50;
  }

  body.light-mode .rpro-nav-menu{
    background: rgba(255,255,255,0.65);
    border-color: rgba(0,0,0,0.08);
  }

  .rpro-nav-menu.is-open{
    display: flex;
  }
}

/* DESKTOP */
@media (min-width: 768px){
  .rpro-nav-menu{
    position: static;
    display: flex !important;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
  }
}


/* Auth buttons */
.rpro-nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.875rem;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.12);
  color: rgba(17,24,39,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  transition: transform 160ms ease, background 160ms ease;
}
body.dark-mode .rpro-nav-cta{
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.08);
}
.rpro-nav-cta:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.18); }
body.dark-mode .rpro-nav-cta:hover{ background: rgba(255,255,255,0.12); }

/* Primary CTA (Register/Dashboard) */
.rpro-nav-cta-primary{
  border: 1px solid rgba(232,121,249,0.55);
  box-shadow:
    0 14px 45px rgba(0,0,0,0.20),
    0 0 0 1px rgba(232,121,249,0.18) inset,
    0 10px 30px rgba(232,121,249,0.18);
}

/* Mobile menu auth block */
.rpro-nav-mobile-auth{
  width: 100%;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.rpro-nav-mobile-auth a{ margin: 0.35rem 0; }

/* Language dropdown glass */
.rpro-lang{ position: relative; display: inline-block; z-index: 60; }
.rpro-lang-btn{
  display:flex;
  align-items:center;
  font-weight:800;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.12);
  color: rgba(17,24,39,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Light mode: glass dropdown */
body.light-mode .rpro-lang-panel{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.60);
}

body.dark-mode .rpro-lang-btn{
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);
}
.rpro-lang-caret{ width: 1rem; height: 1rem; margin-left: 0.5rem; opacity: 0.9; }

.rpro-lang-panel{
  position:absolute;
  right:0;
  top: calc(100% + 4px);
  min-width: 180px;
  padding: 0.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 70px rgba(0,0,0,0.25);
  z-index: 60;
}

body.dark-mode .rpro-lang-panel{
  background: rgba(10,10,20,0.62);
}

.rpro-lang-item{
  display:block;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(17,24,39,0.92);
  font-weight: 700;
}

body.dark-mode .rpro-lang-item{ color: rgba(255,255,255,0.88); }
.rpro-lang-item:hover{
  background: rgba(232,121,249,0.14);
}

/* Right controls group (theme + burger) */
.rpro-nav-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.rpro-nav-right > *{ margin-left: 0.65rem; }

/* Theme toggle pill */
.rpro-theme-toggle{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(17,24,39,0.92);
  box-shadow: 0 14px 40px rgba(0,0,0,0.16);
}

body.dark-mode .rpro-theme-toggle{
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.08);
}
.rpro-theme-label{
  font-weight: 800;
  font-size: 0.85rem;
  margin-left: 0.5rem;
  opacity: 0.9;
}

.rpro-burger{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  z-index: 60;
}

.rpro-burger span{
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,0.85);
}

body.light-mode .rpro-burger{
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.1);
}

body.light-mode .rpro-burger span{
  background: rgba(17,24,39,0.9);
}

/* Default: LIGHT MODE */
.navbar-brand-dark { display: inline-block; }
.navbar-brand-light { display: none; }

/* DARK MODE */
body.dark-mode .navbar-brand-dark { display: none !important; }
body.dark-mode .navbar-brand-light { display: inline-block !important; }

/* LIGHT MODE (explicit, for safety) */
body.light-mode .navbar-brand-dark { display: inline-block !important; }
body.light-mode .navbar-brand-light { display: none !important; }

/* Login as simple text link (desktop) */
.rpro-nav-login-link{
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
  border-radius: 999px;
  color: rgba(17,24,39,0.88);
  transition: background 160ms ease, color 160ms ease;
  margin-right: 0.40rem; /* spacing to Register */
}

body.dark-mode .rpro-nav-login-link{ color: rgba(255,255,255,0.82); }
.rpro-nav-login-link:hover{ background: rgba(255,255,255,0.18); color: rgba(17,24,39,0.98); }
body.dark-mode .rpro-nav-login-link:hover{ background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.98); }

.rpro-lang-btn{ position: relative; z-index: 3; }


/* Hide burger on desktop (menu already visible) */
@media (min-width: 768px){
  .rpro-burger{
    display: none !important;
  }
}

.rpro-lang-panel{
  max-height: 60vh;
  overflow-y: auto;
}
/* MOBILE: language dropdown becomes a fixed floating panel (prevents top/bottom clipping) */
@media (max-width: 767px){

  /* allow the panel to be positioned against viewport */
  .rpro-lang{ position: static; }

  .rpro-lang-panel{
    position: fixed;
    left: 12px;
    right: 12px;

    /* below the navbar area (your nav is h-24 => ~96px) */
    top: calc(96px + 10px + env(safe-area-inset-top));
    bottom: calc(12px + env(safe-area-inset-bottom));

    /* glass look */
    border-radius: 16px;

    /* IMPORTANT: scroll works reliably on iOS + shows all languages */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* make sure you can always scroll to the last items */
    padding-bottom: 10px;

    /* keep it above the mobile menu */
    z-index: 9999;
  }

  /* optional: slightly smaller row height so more languages fit */
  .rpro-lang-item{
    padding: 0.55rem 0.75rem;
  }
}

/* =========================
   AUTH (LOGIN) UI
========================= */

/* Auth navbar spacing */
.rpro-auth-nav{
  padding-top: 14px;
}

.rpro-auth-nav-link{
  display:inline-flex;
  align-items:center;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(17,24,39,0.92);
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
  text-decoration: none;
}

body.dark-mode .rpro-auth-nav-link{
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.08);
}

.rpro-auth-nav-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.18);
}

/* Card glass */
.rpro-auth-glass{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 26px 70px rgba(0,0,0,0.40);
}

/* Dark mode: more transparent glass */
body.dark-mode .rpro-auth-glass{
  background: rgba(255,255,255,0.06);
}

/* Light mode: slightly darker glass (as you wanted) */
body.light-mode .rpro-auth-glass{
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 22px 55px rgba(0,0,0,0.18);
}

/* Input glass (override Argon white inputs) */
.rpro-auth-glass .form-control{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow: none !important;
}

/* Light mode inputs: darker glass + dark text */
body.light-mode .rpro-auth-glass .form-control{
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(17,24,39,0.95) !important;
}

.rpro-auth-glass .form-control::placeholder{
  color: rgba(255,255,255,0.55) !important;
}
body.light-mode .rpro-auth-glass .form-control::placeholder{
  color: rgba(17,24,39,0.55) !important;
}

/* Input-group icon chip */
.rpro-auth-glass .input-group-text{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.82) !important;
}
body.light-mode .rpro-auth-glass .input-group-text{
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(17,24,39,0.75) !important;
}

/* Remember me */
.rpro-auth-glass .custom-control-label span{
  color: rgba(255,255,255,0.70) !important;
}
body.light-mode .rpro-auth-glass .custom-control-label span{
  color: rgba(17,24,39,0.65) !important;
}

/* Better auth button: reuse landing CTA */
.rpro-auth-submit{
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
  border-radius: 14px;
}

.rpro-auth-glass .input-group-prepend,
.rpro-auth-glass .input-group-text{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Make the whole input-group look like one glass field */
.rpro-auth-glass .input-group-alternative{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 12px !important;
  overflow: hidden; /* hides inner seams */
  box-shadow: none !important;
}

body.light-mode .rpro-auth-glass .input-group-alternative{
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}

/* Remove the inner seam between icon area and input */
.rpro-auth-glass .input-group-text{
  padding-left: 14px;
  padding-right: 12px;
}

.rpro-auth-glass .form-control{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* --- AUTH CHECKBOX (transparent, not white) --- */
.rpro-auth-glass .custom-control-label::before{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: none !important;
}

body.light-mode .rpro-auth-glass .custom-control-label::before{
  background: rgba(17,24,39,0.08) !important;
  border: 1px solid rgba(17,24,39,0.18) !important;
}

/* checked state */
.rpro-auth-glass .custom-control-input:checked ~ .custom-control-label::before{
  background: rgba(232,121,249,0.22) !important;
  border-color: rgba(232,121,249,0.45) !important;
}

/* check mark */
.rpro-auth-glass .custom-control-label::after{
  opacity: 0.95;
}

/* --- AUTH CARD: no hover pop (doesn't affect landing cards) --- */
.rpro-auth-card{
  transition: none !important;
}

.rpro-auth-card:hover{
  transform: none !important;
  box-shadow: inherit !important;
}

/* --- AUTH INPUT GROUP: keep icons, remove divider lines --- */
.rpro-auth-glass .input-group { border-radius: 12px; overflow: hidden; }

.rpro-auth-glass .input-group-text{
  border-right: 0 !important;
}

.rpro-auth-glass .form-control{
  border-left: 0 !important;
}
/* Keep auth card responsive and consistent */
.rpro-auth-wrap{
  width: 100%;
  max-width: 520px;          /* feels right for login */
  margin-left: auto;
  margin-right: auto;
}

/* Auth form dividers: tighter spacing */
.rpro-auth-glass .rpro-divider{
  margin-top: 1.25rem;   /* 20px */
  margin-bottom: 1.25rem;
  opacity: 0.65;
}

/* Even tighter on small screens */
@media (max-width: 640px){
  .rpro-auth-glass .rpro-divider{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* Prevent logo from shrinking on small screens */
.rpro-nav-logo {
  flex-shrink: 0;
}

/* =========================
   AUTH NAVBAR – MOBILE TUNING
========================= */

@media (max-width: 480px){

  /* Smaller auth buttons (Login / Register) */
  .rpro-auth-nav-link{
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
  }

  /* Theme toggle pill smaller */
  .rpro-theme-toggle{
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
  }

  .rpro-theme-label{
    display: none; /* icon-only on very small screens */
  }

  /* Reduce spacing between right-side items */
  .rpro-nav-right > *{
    margin-left: 0.4rem;
  }
}
@media (max-width: 480px){
  .rpro-nav-logo img{
    max-width: 92px;
    height: auto;
  }
}
/* Hide language switch on auth pages */
.rpro-auth .rpro-lang{
  display: none !important;
}


/* =========================
   AUTOFILL FIX (Auth inputs)
========================= */
.rpro-auth-glass input.form-control:-webkit-autofill,
.rpro-auth-glass input.form-control:-webkit-autofill:hover,
.rpro-auth-glass input.form-control:-webkit-autofill:focus,
.rpro-auth-glass textarea.form-control:-webkit-autofill,
.rpro-auth-glass textarea.form-control:-webkit-autofill:hover,
.rpro-auth-glass textarea.form-control:-webkit-autofill:focus,
.rpro-auth-glass select.form-control:-webkit-autofill,
.rpro-auth-glass select.form-control:-webkit-autofill:hover,
.rpro-auth-glass select.form-control:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
  caret-color: rgba(255,255,255,0.92);
  transition: background-color 999999s ease-in-out 0s;
}

body.light-mode .rpro-auth-glass input.form-control:-webkit-autofill,
body.light-mode .rpro-auth-glass input.form-control:-webkit-autofill:hover,
body.light-mode .rpro-auth-glass input.form-control:-webkit-autofill:focus,
body.light-mode .rpro-auth-glass textarea.form-control:-webkit-autofill,
body.light-mode .rpro-auth-glass textarea.form-control:-webkit-autofill:hover,
body.light-mode .rpro-auth-glass textarea.form-control:-webkit-autofill:focus,
body.light-mode .rpro-auth-glass select.form-control:-webkit-autofill,
body.light-mode .rpro-auth-glass select.form-control:-webkit-autofill:hover,
body.light-mode .rpro-auth-glass select.form-control:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(17,24,39,0.95) !important;
  caret-color: rgba(17,24,39,0.95);
}

/* =========================
   INTL-TEL-INPUT (Auth forms) – final
========================= */

/* allow dropdown to escape */
.rpro-auth-glass .rpro-phone-group{
  overflow: visible !important;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
}

/* prepend icon stays fixed */
.rpro-auth-glass .rpro-phone-group .input-group-prepend{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  z-index: 2;
}

/* KEY: make iti behave like a flex child (no wrapping / no multi-line) */
.rpro-auth-glass .rpro-phone-group .iti{
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

/* input must fill available width and not create its own “row” */
.rpro-auth-glass .rpro-phone-group .iti input{
  width: 100% !important;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* keep dial code on one line */
.rpro-auth-glass .rpro-phone-group .iti__selected-dial-code{
  white-space: nowrap;
}

/* make the flag button clickable and aligned */
.rpro-auth-glass .rpro-phone-group .iti__flag-container{
  z-index: 5;
}
.rpro-auth-glass .rpro-phone-group .iti__selected-flag{
  background: transparent !important;
  display: flex;
  align-items: center;
}

/* Dropdown: “glass” like your language menu */
.rpro-auth-glass .rpro-phone-group .iti__country-list{
  z-index: 9999 !important;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 20px 70px rgba(0,0,0,0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow-x: hidden;
}

body.dark-mode .rpro-auth-glass .rpro-phone-group .iti__country-list{
  background: rgba(10,10,20,0.62);
  color: rgba(255,255,255,0.92);
}

body.light-mode .rpro-auth-glass .rpro-phone-group .iti__country-list{
  background: rgba(255,255,255,0.55);
  color: rgba(17,24,39,0.95);
}

/* hover row */
.rpro-auth-glass .rpro-phone-group .iti__country:hover{
  background: rgba(232,121,249,0.14);
}
/* =========================
   PROSE (CKEditor content) – readable in dark & light
   Apply by wrapping HTML with: <div class="rpro-prose prose ...">
========================= */

.rpro-prose{
  color: rgba(17,24,39,0.88);
}

body.dark-mode .rpro-prose{
  color: rgba(255,255,255,0.82);
}

/* Headings */
.rpro-prose h1,
.rpro-prose h2,
.rpro-prose h3,
.rpro-prose h4{
  color: rgba(17,24,39,0.95);
  font-weight: 800;
}

body.dark-mode .rpro-prose h1,
body.dark-mode .rpro-prose h2,
body.dark-mode .rpro-prose h3,
body.dark-mode .rpro-prose h4{
  color: rgba(255,255,255,0.95);
}

/* Links */
.rpro-prose a{
  color: rgba(147, 51, 234, 0.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.dark-mode .rpro-prose a{
  color: rgba(232,121,249,0.95);
}

/* Lists + separators */
.rpro-prose hr{
  border-color: rgba(17,24,39,0.12);
}
body.dark-mode .rpro-prose hr{
  border-color: rgba(255,255,255,0.12);
}

/* Blockquotes */
.rpro-prose blockquote{
  border-left: 4px solid rgba(232,121,249,0.55);
  background: rgba(255,255,255,0.06);
  padding: 0.75rem 1rem;
  border-radius: 14px;
}
body.light-mode .rpro-prose blockquote{
  background: rgba(255,255,255,0.35);
}
body.dark-mode .rpro-prose blockquote{
  background: rgba(0,0,0,0.18);
}
/* =========================
   BLOG UI
========================= */

.rpro-blog-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.30);
}

body.light-mode .rpro-blog-card{
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
}

.rpro-blog-media{
  aspect-ratio: 3 / 2;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.rpro-blog-divider{
  border-color: rgba(255,255,255,0.14);
}
body.light-mode .rpro-blog-divider{
  border-color: rgba(17,24,39,0.12);
}

.rpro-blog-share{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.90);
  transition: transform 160ms ease, background 160ms ease;
}

body.light-mode .rpro-blog-share{
  background: rgba(255,255,255,0.55);
  border-color: rgba(0,0,0,0.10);
  color: rgba(17,24,39,0.85);
}

.rpro-blog-share:hover{
  transform: translateY(-1px);
  background: rgba(232,121,249,0.14);
}

/* Pagination pills */
.rpro-blog-pagination{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.rpro-blog-pagebtn{
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.875rem;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

body.light-mode .rpro-blog-pagebtn{
  background: rgba(255,255,255,0.55);
  border-color: rgba(0,0,0,0.10);
  color: rgba(17,24,39,0.90);
}

.rpro-blog-pagebtn:hover{
  transform: translateY(-1px);
  background: rgba(232,121,249,0.14);
}

.rpro-blog-pagebtn.is-active{
  border-color: rgba(232,121,249,0.55);
  box-shadow: 0 10px 30px rgba(232,121,249,0.18);
}

.rpro-blog-pagebtn.is-disabled{
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* =========================
   PROSE (CKEditor / Blog content)
========================= */

.rpro-prose{ color: rgba(17,24,39,0.88); }
body.dark-mode .rpro-prose{ color: rgba(255,255,255,0.82); }

/* Headings */
.rpro-prose h1,
.rpro-prose h2,
.rpro-prose h3,
.rpro-prose h4{
  color: rgba(17,24,39,0.95);
  font-weight: 800;
}
body.dark-mode .rpro-prose h1,
body.dark-mode .rpro-prose h2,
body.dark-mode .rpro-prose h3,
body.dark-mode .rpro-prose h4{
  color: rgba(255,255,255,0.95);
}

/* Links */
.rpro-prose a{
  color: rgba(147, 51, 234, 0.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.dark-mode .rpro-prose a{
  color: rgba(232,121,249,0.95);
}

/* hr */
.rpro-prose hr{ border-color: rgba(17,24,39,0.12); }
body.dark-mode .rpro-prose hr{ border-color: rgba(255,255,255,0.12); }

/* Blockquotes */
.rpro-prose blockquote{
  border-left: 4px solid rgba(232,121,249,0.55);
  background: rgba(255,255,255,0.06);
  padding: 0.75rem 1rem;
  border-radius: 14px;
}
body.light-mode .rpro-prose blockquote{ background: rgba(255,255,255,0.35); }
body.dark-mode .rpro-prose blockquote{ background: rgba(0,0,0,0.18); }
/* Featured image sizing */
.rpro-blog-featured{
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
/* Slightly stronger glass for long-form reading */
.rpro-article{
  background: rgba(0,0,0,0.20);
}
body.light-mode .rpro-article{
  background: rgba(255,255,255,0.35);
}