/* ============================================================================
   rr-modern.css — RideshareRenter UI modernization (site-wide)
   Goal: one cohesive brand-green system, modern cards/buttons/spacing.
   Strategy: additive overrides only (no HTML changes). Safe + reversible.
   Brand green: #14B889. Loaded after the theme's style.css.
   ============================================================================ */

:root{
  --rr-green:#14B889;
  --rr-green-d:#0FA074;
  --rr-green-dd:#0B7E5E;
  --rr-green-soft:rgba(20,184,137,.12);
  --rr-ink:#0f1b2d;
  --rr-muted:#5b6b7f;
  --rr-line:#e9eef3;
  --rr-radius:14px;
  --rr-radius-sm:10px;
  --rr-shadow:0 6px 20px rgba(15,27,45,.08);
  --rr-shadow-h:0 14px 34px rgba(15,27,45,.16);
}

/* Re-point the theme's blue accent variables at brand green. This flips every
   element that uses var(--rr-blue)/var(--fleet-blue) in one shot; hardcoded-hex
   elements are handled by the targeted rules further down. */
:root{
  --rr-blue:#14B889!important;
  --fleet-blue:#0FA074!important;
}

/* ---------------------------------------------------------------------------
   1. BUTTONS — unify on brand green, consistent shape, tactile hover
   --------------------------------------------------------------------------- */
.btn{
  border-radius:var(--rr-radius-sm)!important;
  font-weight:600!important;
  letter-spacing:.01em;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease!important;
}
.btn:hover{transform:translateY(-2px)!important;filter:brightness(1.04);box-shadow:var(--rr-shadow-h)!important;}

/* primary / publish actions */
.btn.publish, a.publish.btn, .btn-primary, .home-cta-row .btn, .browse, a.browse{
  background:var(--rr-green)!important;color:#fff!important;border:none!important;
  box-shadow:0 4px 14px rgba(20,184,137,.30)!important;
}
/* secondary -> green outline (kills the blue-on-blue invisible text bug) */
.btn-secondary, a.btn-secondary, .home-cta-row .btn-secondary{
  background:#fff!important;color:var(--rr-green-dd)!important;
  border:1.5px solid var(--rr-green)!important;box-shadow:none!important;
}
/* transparent (on dark hero) -> white outline */
.btn-transparent, a.btn-transparent{
  background:transparent!important;color:#fff!important;
  border:1.5px solid rgba(255,255,255,.7)!important;
}
.promo .btn, .promo a.btn{background:var(--rr-green)!important;color:#fff!important;border:none!important;}

/* ---------------------------------------------------------------------------
   2. PROMO / CTA BANDS — flat blue -> brand gradient
   --------------------------------------------------------------------------- */
.promo{background:linear-gradient(135deg,#0f1b2d,#143a36)!important;}

/* ---------------------------------------------------------------------------
   3. LISTING / PRODUCT CARDS (homepage carousels + search results)
   --------------------------------------------------------------------------- */
.simple-prod, .products .simple-prod{
  border-radius:var(--rr-radius)!important;
  overflow:hidden!important;
  border:1px solid var(--rr-line)!important;
  background:#fff!important;
  box-shadow:var(--rr-shadow)!important;
  transition:transform .18s ease, box-shadow .18s ease!important;
}
.simple-prod:hover{transform:translateY(-5px)!important;box-shadow:var(--rr-shadow-h)!important;}
.simple-prod .title, .simple-prod .title a{font-weight:700!important;color:var(--rr-ink)!important;}
/* price/offer pill accent */
.simple-prod .price, .simple-prod .day-offer-label, .simple-prod .offer{color:var(--rr-green-dd)!important;}

/* search-results list items (if theme uses .listing-card / .cell) */
.listing-card, .search .cell, .listing-grid > li{
  border-radius:var(--rr-radius)!important;
  transition:transform .18s ease, box-shadow .18s ease!important;
}
.listing-card:hover, .search .cell:hover{transform:translateY(-4px)!important;box-shadow:var(--rr-shadow-h)!important;}

/* ---------------------------------------------------------------------------
   4. VEHICLE-TYPE TILES + INFO CARDS
   --------------------------------------------------------------------------- */
.box > a, .box > div > a{transition:transform .15s ease, box-shadow .15s ease!important;}
.box > a:hover, .box > div > a:hover{transform:translateY(-3px)!important;box-shadow:var(--rr-shadow)!important;}

/* ---------------------------------------------------------------------------
   5. SECTION HEADINGS + HERO TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1, .bkg-hero-content h1{letter-spacing:-.025em!important;font-weight:800!important;}
h2, h3{letter-spacing:-.02em;}

/* ---------------------------------------------------------------------------
   6. LISTING-DETAIL PAGE — recolor inline blue buttons to brand green
   (inline styles are beaten by !important here). Targets contact CTAs.
   --------------------------------------------------------------------------- */
/* SMS + "Message Owner" + generic blue inline buttons */
.rr-quick-contact a[href^="sms:"],
a[href*="user/login"][style*="0d6efd"],
a[style*="#0d6efd"]{
  background:var(--rr-green)!important;border-color:var(--rr-green)!important;color:#fff!important;
}
/* keep WhatsApp its native green, Call green — already on-brand */
.rr-quick-contact a[href^="tel:"]{background:var(--rr-green-dd)!important;}
.master-button{border-radius:var(--rr-radius-sm)!important;font-weight:600!important;}

/* NOTE: turo-listing.css colors the sidebar CTAs with high-specificity
   `body#item .master-button.contact{...!important}` rules. We must out-specify
   them (body#item + element `a` + class) so order-of-load can't matter. */
body#item a.master-button.phone,
body#item a.master-button.contact,
body#item a.master-button.email,
body#item a.master-button.masked{
  background:var(--rr-green)!important;background-image:none!important;
  color:#fff!important;border:none!important;
}
body#item a.master-button.vapi-ai-call{
  background:linear-gradient(135deg,var(--rr-green),var(--rr-green-dd))!important;color:#fff!important;
}
body#item a.im-contact2{background:var(--rr-green)!important;color:#fff!important;border-color:var(--rr-green)!important;}
/* price accent */
.price-amount{color:var(--rr-green-dd)!important;}
/* profile/photo accent borders that used blue */
[style*="solid #0d6efd"]{border-color:var(--rr-green)!important;}

/* ---------------------------------------------------------------------------
   7. FORM FOCUS STATES — green focus ring for inputs/search
   --------------------------------------------------------------------------- */
input:focus, select:focus, textarea:focus, .search-field:focus-within{
  outline:none!important;
  border-color:var(--rr-green)!important;
  box-shadow:0 0 0 3px var(--rr-green-soft)!important;
}

/* ---------------------------------------------------------------------------
   8. MARKETPLACE NOTICE (from geomode) — make it look intentional
   --------------------------------------------------------------------------- */
.rr-marketplace-notice{
  background:var(--rr-green-soft)!important;
  border:1px solid var(--rr-green)!important;
  border-radius:var(--rr-radius)!important;
  padding:14px 16px!important;color:var(--rr-ink)!important;
}
.rr-marketplace-notice strong{color:var(--rr-green-dd)!important;}

/* ---------------------------------------------------------------------------
   9. LINKS — brand-tint the footer/info links that were blue
   --------------------------------------------------------------------------- */
a.text-link, .links a, .home-browse-head .eyebrow{color:var(--rr-green-dd)!important;}

/* ---------------------------------------------------------------------------
   10. SEARCH / RESULTS — alert button, active tabs & view toggles
   (these use hardcoded blue hexes, so target them explicitly)
   --------------------------------------------------------------------------- */
.open-alert-box.btn{background:var(--rr-green)!important;color:#fff!important;border:none!important;}
/* active result tabs + grid/list/detail view toggles */
.all.active, .tabs a.active, .listing-tabs a.active,
.view-as .active, .active.list, .active.grid, .active.detail{
  color:var(--rr-green-dd)!important;
  border-bottom-color:var(--rr-green)!important;
}
.view-as .active svg, .active.list svg, .active.grid svg, .active.detail svg{color:var(--rr-green)!important;}
/* favorites / saved active state */
.actions-fav.active, .fav.active, .save.active{color:var(--rr-green)!important;}