/**
 * Beach Villa Huren - Bookzo Stylesheet (Simplified)
 * 
 * Minimal branding - only font, colors, and logo
 * Let Bookzo's default styling handle the rest
 */

/* ===== FONT ===== */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/manrope/v15/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FO_F.woff2') format('woff2');
}

/* ===== VARIABLES ===== */
:root {
  --vm-gold: #c9a961;
  --vm-gold-hover: #b8954f;
  --vm-cream: #faf9f5;
  --vm-text: #2d2d2d;
  --vm-font-scale: 0.85; /* 15% reduction */
}

/* ===== BASE ===== */
* {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body {
  background-color: var(--vm-cream) !important;
  color: var(--vm-text) !important;
  font-size: calc(1rem * var(--vm-font-scale)) !important;
}

/* ===== FONT SIZE SCALING ===== */
h1, h2, h3, h4, h5, h6,
p, span, div, label, input, select, textarea, button, a {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ===== LOGO REPLACEMENT ===== */
/* Hide broken Bookzo logo */
img[src*="cdn.bookzoapi"],
img[src*="settings5"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Inject our logo */
[class*="logo"]::before,
header > a:first-child::before {
  content: '' !important;
  display: block !important;
  width: 180px !important;
  height: 50px !important;
  background: url('https://beachvillahuren.nl/images/beachvilla-huren_logo.png') no-repeat left center !important;
  background-size: contain !important;
}

/* ===== PRIMARY BUTTONS - WHITE TEXT, NO HOVER CHANGE ===== */
/* These must have highest specificity to override other rules */
button.btn-primary,
button.btn.btn-primary,
.btn.btn-primary,
.btn-primary,
button[type="submit"] {
  background-color: var(--vm-gold) !important;
  border-color: var(--vm-gold) !important;
  color: white !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
}

/* Primary button hover - same white text */
button.btn-primary:hover,
button.btn.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:hover,
button[type="submit"]:hover {
  background-color: var(--vm-gold-hover) !important;
  border-color: var(--vm-gold-hover) !important;
  color: white !important;
}

/* Ensure btn-circle (the +/- buttons) have white text */
.btn-primary.btn-circle,
button.btn-primary.btn-circle,
.btn.btn-primary.btn-circle {
  background-color: var(--vm-gold) !important;
  border-color: var(--vm-gold) !important;
  color: white !important;
}

.btn-primary.btn-circle:hover,
button.btn-primary.btn-circle:hover,
.btn.btn-primary.btn-circle:hover {
  background-color: var(--vm-gold-hover) !important;
  border-color: var(--vm-gold-hover) !important;
  color: white !important;
}

/* Ensure the b tag inside buttons is also white */
.btn-primary b,
button.btn-primary b,
.btn.btn-primary b,
.btn-primary.btn-circle b,
button.btn-primary.btn-circle b {
  color: white !important;
}

/* ===== VILLA CARD TITLES ===== */
/* Ensure villa/accommodation titles are gold */
[class*="villa"] h1,
[class*="villa"] h2,
[class*="villa"] h3,
[class*="accommodation"] h1,
[class*="accommodation"] h2,
[class*="accommodation"] h3,
[class*="card"] h1,
[class*="card"] h2,
[class*="card"] h3,
[class*="listing"] h1,
[class*="listing"] h2,
[class*="listing"] h3,
[class*="property"] h1,
[class*="property"] h2,
[class*="property"] h3,
.card-title,
.object-name {
  color: var(--vm-gold) !important;
}

/* ===== CALENDAR NAVIGATION - ARROWS ONLY ===== */
/* Only style SVG icons, not button text */
.bs-datepicker-head button svg,
.bs-datepicker-head button path,
[class*="calendar"] button:not(.btn-primary) svg,
[class*="calendar"] button:not(.btn-primary) path,
[class*="datepicker"] button:not(.btn-primary) svg,
button.previous svg,
button.next svg,
button[class*="prev"]:not(.btn-primary) svg,
button[class*="next"]:not(.btn-primary) svg {
  fill: var(--vm-gold) !important;
  stroke: var(--vm-gold) !important;
  color: var(--vm-gold) !important;
}

/* Calendar header buttons (month/year navigation) - NOT primary buttons */
.bs-datepicker-head button:not(.btn-primary),
[class*="datepicker"] button:not(.btn-primary):not(.btn):not([type="submit"]) {
  color: var(--vm-text) !important;
}

.bs-datepicker-head button:not(.btn-primary):hover {
  color: var(--vm-gold) !important;
}

/* ===== LINKS ===== */
a,
a:link,
a:visited,
a:active,
button[class*="link"]:not(.btn-primary),
[role="link"] {
  color: var(--vm-gold) !important;
}

a:hover {
  color: var(--vm-gold-hover) !important;
}

/* ===== LINK-STYLE BUTTONS (text buttons) ===== */
button.btn-link,
button[class*="link"]:not(.btn-primary):not([type="submit"]),
button[class*="text"]:not(.btn-primary):not([type="submit"]) {
  background: transparent !important;
  border: none !important;
  color: var(--vm-gold) !important;
}

button.btn-link:hover,
button[class*="link"]:not(.btn-primary):hover,
button[class*="text"]:not(.btn-primary):hover {
  color: var(--vm-gold-hover) !important;
}

/* Back button */
.btn-back,
button.btn-back {
  color: var(--vm-gold) !important;
}

/* ===== SECONDARY BUTTONS ===== */
.btn-secondary,
button.btn-secondary {
  background-color: var(--vm-gold) !important;
  border-color: var(--vm-gold) !important;
  color: white !important;
}

.btn-secondary:hover,
button.btn-secondary:hover {
  background-color: var(--vm-gold-hover) !important;
  border-color: var(--vm-gold-hover) !important;
  color: white !important;
}

/* ===== "MEER INFO" BUTTON - TRANSPARENT WITH GOLD TEXT ===== */
.more-info-button,
button.more-info-button,
#moreInfoButtonResultCard {
  background-color: transparent !important;
  border: none !important;
  color: var(--vm-gold) !important;
}

.more-info-button:hover,
button.more-info-button:hover,
#moreInfoButtonResultCard:hover {
  background-color: transparent !important;
  border: none !important;
  color: var(--vm-gold-hover) !important;
}

/* ===== HIDE GOLD DECORATIVE ELEMENTS ===== */
/* Progress bars, stepper lines, dividers */
[style*="background"][style*="c9a9"],
[style*="background"][style*="gold"],
[style*="background"][style*="#c9a"],
[class*="step-line"],
[class*="stepper-line"],
[class*="progress-bar"],
[class*="indicator-line"] {
  opacity: 0 !important;
  background: transparent !important;
}

/* ===== BUTTON TEXT - NO UNDERLINE ===== */
button,
button span,
button *,
.btn,
.btn span,
[role="button"],
[role="button"] span {
  text-decoration: none !important;
  text-underline-offset: unset !important;
}

/* ===== FOCUS STATES ===== */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--vm-gold) !important;
  outline: none !important;
}

/* ===== OVERVIEW PAGE - 2 COLUMN LAYOUT ===== */
/* NOTE: Removed - the broad selectors were breaking Bookzo's card layout.
   A 2-column layout would require inspecting Bookzo's actual DOM structure
   and using more specific selectors. */