:root{
  --vx-orange:#F78536;
  --vx-deep:#C65F1A;
  --vx-cream:#F9F1E2;
  --vx-ink:#7A3F1B;
  --vx-round:18px;
  --vx-shadow:0 10px 24px rgba(0,0,0,.08);
}

.vx-container{max-width:1100px;margin:0 auto;padding:0 20px;}
.vx-h2{font-size:28px;line-height:1.2;color:var(--vx-orange);margin-bottom:18px;font-weight:800}

/* HERO */
.vx-hero{
  position:relative;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.25)),
    var(--vx-hero, url('/assets/img/hero-beach.jpg')) center/cover no-repeat;
}
.vx-hero-inner{padding:88px 0 56px}
.vx-hero-title{
  font-size:48px;line-height:1.1;font-weight:900;letter-spacing:.2px;
  text-shadow:0 6px 18px rgba(0,0,0,.25);
  margin-bottom:24px;
}

/* SEARCH BAR */
.vx-search{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  background:#FCEFD8;border-radius:28px;padding:10px;box-shadow:var(--vx-shadow);
  max-width:720px;
}
.vx-input{
  display:flex;align-items:center;gap:8px;background:#fff;border-radius:16px;
  padding:10px 14px;flex:1;min-width:220px;border:1px solid rgba(0,0,0,.06);
}
.vx-input input{border:0;outline:0;font-size:16px;width:100%}
.vx-icon{color:var(--vx-orange)}
.vx-btn{
  background:var(--vx-orange);border:0;color:#fff;font-weight:800;
  padding:12px 22px;border-radius:14px;cursor:pointer;transition:.2s;
  box-shadow:0 6px 0 var(--vx-deep); position:relative; top:0;
}
.vx-btn:hover{filter:brightness(1.04)}
.vx-btn:active{top:2px;box-shadow:0 4px 0 var(--vx-deep)}
.vx-btn--light{background:#fff;color:var(--vx-orange);box-shadow:none}

/* SECTIONS */
.vx-section{background:var(--vx-cream);padding:36px 0}
.vx-section:nth-of-type(2){background:#FFF5E7}

/* CARDS */
.vx-card-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
.vx-card{
  display:block;border-radius:22px;overflow:hidden;background:#fff;text-decoration:none;color:var(--vx-ink);
  box-shadow:var(--vx-shadow);transition:transform .2s ease, box-shadow .2s ease;
}
.vx-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(0,0,0,.12)}
.vx-card img{width:100%;height:140px;object-fit:cover;display:block}
.vx-card-txt{padding:12px 14px}
.vx-card-title{font-weight:800;font-size:18px;margin-bottom:4px}
.vx-card-sub{opacity:.65;font-size:13px}

/* HOW IT WORKS + CTA */
.vx-how-wrap{background:var(--vx-cream)}
.vx-how{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
.vx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.vx-step{
  background:#fff;border-radius:18px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;
  box-shadow:var(--vx-shadow);gap:8px;min-height:110px
}
.vx-step-ico{color:var(--vx-orange)}
.vx-step-t{font-weight:700;color:var(--vx-ink)}

.vx-cta{
  background:var(--vx-orange);color:#fff;border-radius:20px;padding:22px;box-shadow:var(--vx-shadow)
}
.vx-cta-t{font-size:18px;line-height:1.4;margin-bottom:14px}

/* RESPONSIVE */
@media (max-width: 1024px){
  .vx-card-row{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 860px){
  .vx-hero-title{font-size:36px}
  .vx-how{grid-template-columns:1fr}
  .vx-card-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
  .vx-hero-inner{padding:64px 0 40px}
  .vx-hero-title{font-size:30px}
  .vx-search{padding:8px;border-radius:18px}
  .vx-card-row{grid-template-columns:1fr}
  .vx-step{min-height:auto}
}

/* Title branding */
.vx-hero-title {
  color: #F78536;
  font-weight: 900;
  text-shadow: none;
  margin-bottom: 24px;
}

/* Steps alignment */
.vx-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.vx-step {
  background: #fff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* CTA below steps */
.vx-cta {
  margin-top: 30px;
  text-align: center;
  background: #F78536;
  color: #fff;
  border-radius: 14px;
  padding: 20px;
}
.vx-cta a.vx-btn {
  margin-top: 10px;
}

/* Map container */
.map-container {
  margin-top: 30px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.map-container iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: none;
}

/* Search Box */
.vx-input {
  position: relative;
}
#searchBox {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
#suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  z-index: 99;
  max-height: 250px;
  overflow-y: auto;
}
.suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}
.suggestion-item:hover {
  background: #f7f7f7;
}

/* === Homepage Premium Tweaks === */

/* Hero title in brand orange */
.vx-hero-title {
  color: #F78536;
  font-weight: 900;
  text-shadow: none;
  margin-bottom: 24px;
}

/* Steps layout */
.vx-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.vx-step {
  background: #fff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* CTA under steps */
.vx-cta {
  margin-top: 30px;
  text-align: center;
  background: #F78536;
  color: #fff;
  border-radius: 14px;
  padding: 20px;
}
.vx-cta a.vx-btn {
  margin-top: 10px;
}

/* Map container */
.map-container {
  margin-top: 30px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.map-container iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: none;
}

/* Premium Search Suggestions */
.vx-input {
  position: relative;
  flex: 1;
}
#searchBox {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
#suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  z-index: 99;
  max-height: 250px;
  overflow-y: auto;
  border-radius: 0 0 8px 8px;
}
.suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}
.suggestion-item:hover {
  background: #f7f7f7;
}
/* ==== MOBILE OPTIMIZATION ==== */

/* General padding adjustments */
@media (max-width: 1024px) {
  .vx-container {
    padding: 0 15px;
  }
}

/* Hero adjustments */
@media (max-width: 768px) {
  .vx-hero-title {
    font-size: 28px;
    line-height: 1.2;
    text-align: center;
  }

  .vx-search {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .vx-btn {
    width: 100%;
  }
}

/* Steps stack vertically on mobile */
@media (max-width: 768px) {
  .vx-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .vx-step {
    text-align: center;
  }
}

/* CTA center text */
@media (max-width: 768px) {
  .vx-cta {
    padding: 16px;
    text-align: center;
  }
  .vx-cta-t {
    font-size: 16px;
  }
  .vx-btn--light {
    width: 100%;
  }
}

/* Map container responsive */
@media (max-width: 768px) {
  .map-container iframe {
    height: 300px;
  }
}

/* Search suggestions on small screens */
@media (max-width: 500px) {
  #suggestions {
    font-size: 13px;
    max-height: 200px;
  }
  .suggestion-item {
    padding: 6px 10px;
  }
}
#suggestions {
    position: absolute;
    top: 100%; /* right below the search box */
    left: 0;
    width: 100%; /* match the width of the parent */
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
    color: #F78536;
}

.suggestion-item:hover {
    background-color: #f9f9f9;
}

#suggestions {
  color: #000; /* default text inside suggestions */
}

.suggestion-item {
  color: #F78536 !important; /* brand orange for items */
}


/* --- Suggestions override (force visible + brand color) --- */
.vx-input { position: relative; }

.vx-input #suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 2000;               /* above hero */
  background: #fff !important; /* solid white background */
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  color: #F78536 !important;   /* default text color inside */
}

.vx-input #suggestions * {
  color: #F78536 !important;   /* force all children to orange */
}

.vx-input .suggestion-item {
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}

.vx-input .suggestion-item:hover {
  background: #f8f8f8;
}

/* Keep search box text in brand orange */
.vx-input input#searchBox {
  color: #F78536 !important;
  font-weight: 600;
}

/* Mobile: Swap emphasis between input and button */
@media (max-width: 768px) {
  .vx-search {
    flex-direction: column;
    gap: 8px;
  }

  /* Bigger input */
  .vx-input {
    flex: none;
    width: 100%;
    padding: 16px 14px; /* taller padding */
    border-radius: 14px;
  }
  .vx-input input#searchBox {
    font-size: 18px; /* bigger text */
    padding: 14px 10px;
  }

  /* Smaller button */
  .vx-btn {
    flex: none;
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 10px;
    box-shadow: none;
  }
}