/*
  South Padre Condo Rentals — Fun Background + Font CSS
  Version 3.0

  Goal:
  - Make Hostfully feel less plain.
  - Add beachy background, softer cards, rounder search boxes, and nicer fonts.
  - DO NOT force headline/button colors, so you can still change colors in Hostfully.

  Recommended Hostfully color settings:
  Headline/Sub-Headline: #FFFFFF
  Primary color: whatever you like
  Secondary color: whatever you like
*/

/* Fun, friendly beach fonts */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap');

:root {
  --spcr-ink: #18333a;
  --spcr-muted: #6c7b80;
  --spcr-card: rgba(255, 255, 255, 0.92);
  --spcr-sand: #fff4df;
  --spcr-seafoam: #e9fbf8;
  --spcr-border: rgba(18, 49, 58, 0.13);
  --spcr-shadow: 0 18px 45px rgba(6, 76, 90, 0.13);
  --spcr-soft-shadow: 0 10px 26px rgba(6, 76, 90, 0.09);
}

/* Overall page vibe */
html,
body {
  min-height: 100%;
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--spcr-ink);
  background:
    radial-gradient(circle at 12% 3%, rgba(129, 238, 226, 0.38), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(255, 202, 116, 0.38), transparent 28%),
    linear-gradient(180deg, #fffdf8 0%, var(--spcr-seafoam) 42%, var(--spcr-sand) 100%) !important;
}

/* Add a subtle beachy pattern without changing brand colors */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.42;
  background:
    radial-gradient(circle at 15% 22%, rgba(255,255,255,0.78) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 38%, rgba(255,255,255,0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 75%, rgba(255,255,255,0.50) 0 2px, transparent 3px);
  background-size: 180px 180px, 220px 220px, 260px 260px;
}

/* Headings: fun/elegant, but DO NOT force color */
h1, h2, h3, h4, h5,
.heading,
.title {
  font-family: "Playfair Display", Georgia, serif !important;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

/* Body text feels friendlier */
p, li, label, input, select, textarea, button {
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Make hero text readable but let Hostfully color picker control the actual color */
.hero h1,
.hero h2,
.banner h1,
.banner h2,
.jumbotron h1,
.jumbotron h2,
.cover h1,
.cover h2,
[class*="hero"] h1,
[class*="hero"] h2,
[class*="Hero"] h1,
[class*="Hero"] h2,
[class*="banner"] h1,
[class*="banner"] h2,
[class*="Banner"] h1,
[class*="Banner"] h2 {
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.65) !important;
}

.hero p,
.banner p,
.jumbotron p,
.cover p,
[class*="hero"] p,
[class*="Hero"] p,
[class*="banner"] p,
[class*="Banner"] p {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55) !important;
}

/* Give large hero/banner sections a more designed feel without changing text colors */
.hero,
.banner,
.jumbotron,
.cover,
[class*="hero"],
[class*="Hero"],
[class*="banner"],
[class*="Banner"] {
  overflow: visible;
}

/* Search area — bigger, softer, vacation-site feel */
.search,
.search-form,
.search-box,
.filters,
.filter-panel,
.availability-search,
[class*="Search"],
[class*="search"],
[class*="Filter"],
[class*="filter"],
[class*="availability"],
[class*="Availability"] {
  background: var(--spcr-card) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--spcr-border) !important;
  border-radius: 28px !important;
  box-shadow: var(--spcr-shadow) !important;
}

/* Fields */
input,
select,
textarea,
.form-control {
  border-radius: 16px !important;
  border: 1px solid var(--spcr-border) !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(129, 238, 226, 0.22) !important;
}

/* Buttons: shape only, NOT colors */
button,
input[type="submit"],
input[type="button"],
.btn,
.button,
a.btn,
a.button {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  box-shadow: var(--spcr-soft-shadow);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover,
a.btn:hover,
a.button:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--spcr-shadow);
}

/* Cards / property blocks */
.card,
.panel,
.well,
.thumbnail,
.property,
.property-card,
.listing,
.listing-card,
.result,
.result-card {
  background: var(--spcr-card) !important;
  border: 1px solid var(--spcr-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--spcr-soft-shadow) !important;
  overflow: hidden !important;
}

/* Card hover */
.card:hover,
.panel:hover,
.property-card:hover,
.listing-card:hover,
.result-card:hover {
  box-shadow: var(--spcr-shadow) !important;
}

/* Images inside cards */
.card img,
.panel img,
.thumbnail img,
.property img,
.property-card img,
.listing img,
.listing-card img,
.result img,
.result-card img {
  border-radius: 0 !important;
}

/* Give content sections a cleaner container feel where possible */
.container,
.content,
.main,
main {
  border-radius: 24px;
}

/* Labels/badges: shape only */
.badge,
.label,
.tag {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

/* Footer: keep simple, do not fight Hostfully colors too much */
footer,
.footer {
  border-top: 1px solid var(--spcr-border);
}

/* Mobile polish */
@media (max-width: 768px) {
  html,
  body {
    font-size: 16px !important;
  }

  h1 {
    font-size: 2.4rem;
  }

  .search,
  .search-form,
  .search-box,
  .filters,
  .filter-panel,
  .availability-search,
  [class*="Search"],
  [class*="search"] {
    border-radius: 20px !important;
  }

  .card,
  .panel,
  .well,
  .thumbnail,
  .property,
  .property-card,
  .listing,
  .listing-card,
  .result,
  .result-card {
    border-radius: 18px !important;
  }
}