/* ══════════════════════════════════════════════════════════════════════
   RentNivas — UI REFRESH (Modern & Premium)
   ──────────────────────────────────────────────────────────────────────
   This file is an ADDITIVE override layer. It is loaded last so every rule
   here wins over the original stylesheet, while the original CSS stays
   completely untouched in index.html.

   Revert options (old UI comes back exactly as before):
     1. Remove the <link rel="stylesheet" href="/ui-refresh.css"> tags, or
     2. git revert <this commit>, or
     3. git reset --hard ui-backup-before-refresh   (pre-refresh snapshot)

   Scope: landing page, auth/register/login screens, role selection,
   tabs, sidebar nav, modals, footer.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens (new variables only — nothing existing is redefined) ── */
:root {
  --ui-r: 14px;
  --ui-r-lg: 20px;
  --ui-soft: 0 1px 2px rgba(24, 21, 15, .04), 0 6px 24px rgba(24, 21, 15, .07);
  --ui-lift: 0 2px 6px rgba(24, 21, 15, .06), 0 18px 44px rgba(24, 21, 15, .13);
  --ui-ring: 0 0 0 4px rgba(194, 113, 79, .16);
  --ui-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ── 2. Global polish ── */
::selection {
  background: rgba(194, 113, 79, .28);
  color: #18150f;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(122, 112, 104, .5);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(194, 113, 79, .75);
  background-clip: content-box;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ui-ring);
}

/* Anchor scroll never hides under the fixed nav */
.lp-section {
  scroll-margin-top: 88px;
}

/* ── 3. Buttons — depth, motion, gradient CTAs ── */
.btn {
  transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease),
              background .25s var(--ui-ease), color .25s var(--ui-ease),
              border-color .25s var(--ui-ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(.98);
}

.btn-terra {
  background: linear-gradient(135deg, #d1805c 0%, #c2714f 55%, #b35e3f 100%);
  box-shadow: 0 1px 2px rgba(24, 21, 15, .1), 0 8px 20px -8px rgba(194, 113, 79, .55);
}

.btn-terra:hover {
  background: linear-gradient(135deg, #db8e6b 0%, #cb7a57 55%, #bd6a49 100%);
  box-shadow: 0 2px 4px rgba(24, 21, 15, .12), 0 16px 30px -10px rgba(194, 113, 79, .65);
}

.btn-dark {
  background: linear-gradient(135deg, #242017 0%, #18150f 100%);
  box-shadow: 0 1px 2px rgba(24, 21, 15, .2), 0 8px 20px -10px rgba(24, 21, 15, .5);
}

.btn-outline,
.btn-soft {
  background: rgba(255, 255, 255, .7);
}

.btn-outline:hover,
.btn-soft:hover {
  box-shadow: var(--ui-soft);
}

/* ── 4. Landing nav — deeper glass + link underline sweep ── */
.lp-nav {
  background: rgba(14, 11, 8, .55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: rgba(255, 255, 255, .08);
}

.lp-nav.scrolled {
  background: rgba(24, 21, 15, .9);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
}

.lp-nav-links a {
  position: relative;
  padding-bottom: 4px;
}

.lp-nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--terra2, #d4845f), var(--terra, #c2714f));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ui-ease);
}

.lp-nav-links a:hover::after,
.lp-nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.lp-nav-right .btn {
  border-radius: 99px;
  padding: 9px 20px;
}

/* ── 5. Hero ── */
.hero-badge {
  background: rgba(18, 14, 10, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .18);
  color: #f6d9c6;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}

.hero-h1 {
  letter-spacing: -2.4px;
  text-shadow: 0 3px 34px rgba(0, 0, 0, .4);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero-h1 .accent {
    background: linear-gradient(100deg, #f2a67c 0%, var(--terra2, #d4845f) 45%, #e88a5a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero-p {
  color: rgba(255, 255, 255, .82);
}

.hero-actions .btn {
  border-radius: 99px;
  padding: 14px 28px;
  font-size: 15.5px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
}

/* ── 6. Section headers ── */
.section-chip {
  background: rgba(194, 113, 79, .09);
  border-color: rgba(194, 113, 79, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  letter-spacing: 1.8px;
}

.section-h2 {
  letter-spacing: -1.4px;
  text-wrap: balance;
}

.section-p {
  color: #6d635a;
  font-size: 16.5px;
}

/* ── 7. How-it-works cards — gradient border + accent reveal ── */
.how-card {
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(160deg, rgba(194, 113, 79, .4), rgba(255, 255, 255, 0) 45%) border-box;
  box-shadow: var(--ui-soft);
}

.how-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--terra, #c2714f), var(--terra2, #d4845f));
  opacity: 0;
  transition: opacity .3s var(--ui-ease);
}

.how-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ui-lift);
}

.how-card:hover::before {
  opacity: 1;
}

/* ── 8. Feature list icons in soft tiles ── */
.feat-item {
  align-items: center;
}

.feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--terra-lt, #fdf0ea);
  border: 1px solid rgba(194, 113, 79, .18);
  font-size: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.feat-img img {
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-lift);
}

/* ── 9. Testimonials ── */
.testi-card {
  box-shadow: var(--ui-soft);
  transition: transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease),
              border-color .3s var(--ui-ease);
}

.testi-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ui-lift);
  border-color: rgba(194, 113, 79, .3);
}

.testi-stars {
  filter: drop-shadow(0 2px 6px rgba(201, 168, 76, .4));
}

/* ── 10. Support cards (markup uses inline styles → careful overrides) ── */
.lp-section-inner > div:not([class])[style] {
  background: #fff !important;
  border-color: var(--border, #e4ddd3) !important;
  border-radius: var(--ui-r-lg) !important;
  padding: 26px !important;
  box-shadow: var(--ui-soft);
}

.lp-section-inner > div:not([class])[style] > div:not([class])[style] {
  background: #fff !important;
  border-color: var(--border, #e4ddd3) !important;
  border-radius: var(--ui-r) !important;
  box-shadow: var(--ui-soft);
  transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease),
              border-color .25s var(--ui-ease) !important;
}

.lp-section-inner > div:not([class])[style] > div:not([class])[style]:hover {
  transform: translateY(-3px);
  box-shadow: var(--ui-lift);
  border-color: rgba(194, 113, 79, .4) !important;
}

/* ── 11. Closing CTA ── */
.lp-cta {
  background: radial-gradient(1000px 380px at 50% -12%, rgba(194, 113, 79, .28), transparent 62%),
              linear-gradient(135deg, var(--ink, #18150f) 0%, #2d2318 100%);
}

/* ── 12. Footer ── */
.lp-footer {
  background: linear-gradient(180deg, var(--ink, #18150f) 0%, #110e0a 100%);
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.footer-simple-links a {
  position: relative;
  padding-bottom: 3px;
}

.footer-simple-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ui-ease);
}

.footer-simple-links a:hover::after {
  transform: scaleX(1);
}

/* ── 13. Auth screens (login / register / reset) ── */
.auth-left {
  background: radial-gradient(760px 460px at 12% 18%, rgba(194, 113, 79, .3), transparent 58%),
              linear-gradient(150deg, #1e1912 0%, var(--ink, #18150f) 60%, #100d09 100%);
}

.auth-right {
  background: radial-gradient(640px 380px at 82% 8%, rgba(194, 113, 79, .1), transparent 60%),
              var(--bg, #faf8f5);
}

.auth-form {
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--border, #e4ddd3);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-lift);
  padding: 34px;
}

.auth-form-title {
  letter-spacing: -1px;
}

.fg label {
  font-size: 13.5px;
  letter-spacing: .02em;
}

.fg input,
.fg textarea,
.fg select {
  border-radius: 12px;
  padding: 13px 16px;
  box-shadow: inset 0 1px 2px rgba(24, 21, 15, .04);
}

.fg input:focus,
.fg textarea:focus,
.fg select:focus {
  border-color: var(--terra, #c2714f);
  box-shadow: 0 0 0 4px rgba(194, 113, 79, .14);
}

.rn-google-btn {
  border-radius: 12px;
  border-color: var(--border, #e0e0e0);
  transition: transform .25s var(--ui-ease), box-shadow .25s var(--ui-ease),
              background .15s;
}

.rn-google-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(24, 21, 15, .3);
}

.rn-or-divider {
  letter-spacing: .4px;
  color: var(--muted2, #b0a898);
}

/* ── 14. Role selection cards ── */
.role-card {
  box-shadow: var(--ui-soft);
  transition: transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease),
              border-color .3s var(--ui-ease);
}

.role-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ui-lift);
}

.role-card.selected {
  border-color: var(--terra, #c2714f) !important;
  box-shadow: var(--ui-ring), var(--ui-soft);
}

/* ── 15. Tabs (broker/partner panels, filters, ops console) ── */
/* body prefix = higher specificity than the in-page rules loading below */
body .bp-right-tab {
  border-radius: 12px !important;
  border-width: 1.5px !important;
  font-weight: 700 !important;
  transition: all .25s var(--ui-ease) !important;
}

body .bp-right-tab.active {
  background: linear-gradient(135deg, rgba(194, 113, 79, .16), rgba(194, 113, 79, .05)) !important;
  border-color: rgba(194, 113, 79, .6) !important;
  color: var(--terra, #c2714f) !important;
  box-shadow: 0 6px 16px -8px rgba(194, 113, 79, .65) !important;
}

body .bp-right-tab:hover:not(.active) {
  border-color: rgba(194, 113, 79, .4) !important;
  background: #fffdfb !important;
}

body .filter-tab {
  border-radius: 99px !important;
  transition: all .22s var(--ui-ease) !important;
}

body .filter-tab:hover:not(.active) {
  border-color: rgba(194, 113, 79, .45) !important;
}

body .filter-tab.active {
  box-shadow: 0 6px 16px -8px rgba(24, 21, 15, .55) !important;
}

body .admin-tab {
  border-radius: 10px !important;
  transition: all .22s var(--ui-ease) !important;
}

/* Sidebar Owner/Rent role switch */
body .role-btn {
  border-radius: 10px !important;
  transition: all .25s var(--ui-ease) !important;
}

body .role-btn.active {
  background: linear-gradient(135deg, var(--terra2, #d4845f), var(--terra, #c2714f)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -10px rgba(194, 113, 79, .9) !important;
}

/* ── 16. Sidebar nav ── */
.nav-btn {
  position: relative;
  transition: all .25s var(--ui-ease);
}

.nav-btn:hover {
  background: rgba(255, 255, 255, .09);
  transform: translateX(3px);
}

.nav-btn:active {
  transform: translateX(3px) scale(.985);
}

body .nav-btn.active {
  background: rgba(194, 113, 79, .2);
  color: #fff;
}

/* ── 17. Modals ── */
.modal-bg {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

body .modal-box {
  border-radius: var(--ui-r-lg) !important;
  box-shadow: 0 30px 80px -22px rgba(24, 21, 15, .5);
}

/* ── 18. Welcome popup (first-visit) — markup is inline-styled, so these
       are scoped to #welcome-popup-bg with ID/attribute selectors ── */
#welcome-popup-bg {
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

#welcome-popup-bg > div {
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .45) !important;
}

#welcome-popup-bg > div > div:first-child {
  background: radial-gradient(460px 210px at 50% -34%, rgba(194, 113, 79, .45), transparent 66%),
              linear-gradient(135deg, #18150f 0%, #2d2318 100%) !important;
}

#welcome-popup-bg > div > div:last-child {
  padding: 26px 30px 30px !important;
}

#welcome-popup-bg img {
  border-color: rgba(255, 255, 255, .55) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45) !important;
}

#wp-welcome {
  font-size: 30px !important;
}

#wp-to {
  font-family: var(--font, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .5) !important;
}

#wp-welcome ~ div span:last-child {
  color: var(--terra2, #d4845f) !important;
}

#welcome-popup-bg [style*="var(--green-bg)"],
#welcome-popup-bg [style*="var(--amber-bg)"] {
  background: #fbf8f4 !important;
  border: 1px solid rgba(194, 113, 79, .16) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

#welcome-popup-bg [style*="font-size:24px"] {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terra-lt, #fdf0ea);
  border: 1px solid rgba(194, 113, 79, .18);
  border-radius: 12px;
  font-size: 20px !important;
}

#wp-free-title,
#wp-credits-title {
  color: var(--ink, #18150f) !important;
  font-size: 14.5px !important;
  letter-spacing: .01em !important;
}

#wp-guest-btns .btn,
#wp-user-btn .btn {
  border-radius: 99px !important;
}

#wp-get-started,
#wp-user-btn .btn {
  padding: 15px 24px !important;
  font-size: 15.5px !important;
}

#wp-browse {
  padding: 11px 24px !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 1.5px solid var(--border2, #d4ccbf) !important;
  color: var(--soft, #4a4035) !important;
}

#wp-browse:hover {
  background: #fff !important;
  border-color: var(--ink, #18150f) !important;
  color: var(--ink, #18150f) !important;
}

/* ── 19. Mobile refinements ── */
@media (max-width: 768px) {
  .lp-nav {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .hero-h1 {
    letter-spacing: -1.4px;
  }

  .hero-actions .btn {
    padding: 13px 24px;
    font-size: 15px;
  }

  .feat-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .auth-form {
    padding: 26px 22px;
    box-sizing: border-box;
  }

  .lp-section {
    scroll-margin-top: 76px;
  }
}

/* ── 21. Nav fit at narrower desktop widths (pills added width) ── */
.lp-nav-links a {
  white-space: nowrap;
}

@media (min-width: 769px) and (max-width: 1280px) {

  .lp-nav-links {
    gap: 20px;
    margin-left: 22px;
  }

  .lp-nav-links a {
    font-size: 14.5px;
  }

  .lp-nav-right {
    gap: 8px;
  }

  .lp-nav-right .btn {
    padding: 8px 16px;
    font-size: 13.5px;
  }

  #lp-nav-mob-tutorial {
    padding: 7px 13px !important;
    font-size: 13px !important;
    gap: 5px !important;
  }
}

/* ── 22. Tighter tier for ~900-1024px so the right buttons never clip ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .lp-nav {
    padding: 0 4%;
  }

  .lp-nav-links {
    gap: 14px;
    margin-left: 12px;
  }

  .lp-nav-links a {
    font-size: 14px;
  }

  .lp-nav-right {
    gap: 6px;
  }

  .lp-nav-right .btn {
    padding: 8px 13px;
    font-size: 13px;
  }

  .lp-nav-links #lp-nav-mob-tutorial,
  #lp-nav-mob-tutorial {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    gap: 5px !important;
  }
}

/* ── 23. Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  .btn:hover,
  .how-card:hover,
  .testi-card:hover,
  .role-card:hover,
  .nav-btn:hover,
  .lp-section-inner > div:not([class])[style] > div:not([class])[style]:hover {
    transform: none !important;
  }
}