@font-face {
  font-family: "Gulfs Display";
  src:
    url("/assets/fonts/gulfs-display-normal.woff2") format("woff2"),
    url("/assets/fonts/gulfs-display-normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3%;
  --primary: 0 0% 5%;
  --primary-foreground: 0 0% 100%;
  --secondary: 200 30% 97%;
  --secondary-foreground: 0 0% 5%;
  --muted: 200 20% 96%;
  --muted-foreground: 0 0% 40%;
  --accent: 200 60% 94%;
  --accent-foreground: 200 60% 30%;
  --border: 200 20% 92%;
  --ring: 200 60% 50%;
  --radius: 0.75rem;
  --cyan: 200 70% 50%;
  --cyan-light: 200 70% 95%;
  --cyan-dark: 200 70% 35%;
  --gradient-primary: linear-gradient(135deg, hsl(0 0% 5%) 0%, hsl(0 0% 20%) 100%);
  --gradient-hero: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(200 30% 98%) 100%);
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(200 20% 99%) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 255, 0.7) 100%);
  --gradient-cyan: linear-gradient(135deg, hsl(200 70% 50%) 0%, hsl(200 70% 60%) 100%);
  --shadow-soft: 0 4px 20px -4px hsl(200 50% 50% / 0.08);
  --shadow-elevated: 0 20px 40px -12px hsl(200 50% 50% / 0.15);
  --shadow-glow: 0 0 0 1px hsl(200 50% 50% / 0.08), 0 20px 50px -15px hsl(200 50% 50% / 0.18);
}

.font-display {
    font-family: "Gulfs Display", serif;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.dark .form-input,
.dark form {
    border-color: hsl(var(--foreground) / 0.2);
}

.cal-inline-container {
    width: 100%;
    height: auto;
    min-height: 650px;
    overflow: visible;
}

.booking-calendar {
    scroll-margin-top: 6rem;
}

.faq-summary {
    list-style: none;
    cursor: pointer;
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-summary + p {
    padding-bottom: 2rem;
}

@media (max-width: 767px) {
    .cal-inline-container {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        min-height: 720px;
    }
}