/* ── DESIGN TOKENS ── */
    :root {
      --cream:        #F9F5ED;
      --cream-alt:    #F2EDE1;
      --moss:         #737654;
      --moss-bg:      #6e704c;
      --brown:        hsl(30,47%,27%);
      --brown-dark:   hsl(30,47%,22%);
      --stone:        #b9b5a4;
      --charcoal:     #3d3a30;
      --border-col:   #d6d0c0;
      --muted-fg:     #8c8c72;
      --card-bg:      #F9F5ED;
      --accred-bg:    #c9c8b6;

      --font-display: 'Amatic SC', cursive;
      --font-serif:   'Lora', 'Palatino Linotype', Georgia, serif;
      --font-sans:    'Inter', system-ui, sans-serif;
    }

    

    /* ── MAIN CONTENT AREA ── */
    .page-top {
      padding-top: 70px;
      padding-bottom: 0;
    }

    .container-wide {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ── BACK LINK ── */
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-serif);
      font-size: 12px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted-fg);
      margin-bottom: 22px;
      transition: color .2s;
    }
    .back-link:hover { color: var(--charcoal); }
    .back-link svg { flex-shrink: 0; }

    /* ── PAGE HEADING ── */
    .page-heading {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-serif);
      font-size: 26px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--charcoal);
      margin-bottom: 6px;
    }
    .page-heading svg { color: var(--brown); }

    .page-sub {
      font-family: var(--font-serif);
      font-size: 15px;
      color: var(--muted-fg);
      margin-bottom: 36px;
    }

    /* ── GRID ── */
    .avail-grid {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 40px;
      align-items: start;
      padding-bottom: 80px;
    }

    /* ── CALENDAR CARD ── */
    .cal-card {
      background: var(--card-bg);
      border: 1px solid var(--border-col);
      border-radius: 8px;
      padding: 28px;
    }

    /* ── CUSTOM CALENDAR ── */
    .cal-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .cal-months-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    .cal-month-label {
      font-family: var(--font-serif);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--charcoal);
      text-align: center;
      margin-bottom: 14px;
    }

    .cal-nav-btn {
      background: none;
      border: 1px solid var(--border-col);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--charcoal);
      transition: border-color .2s, color .2s;
    }
    .cal-nav-btn:hover { border-color: var(--charcoal); }

    .cal-header-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      margin-bottom: 6px;
    }
    .cal-header-row span {
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted-fg);
      text-align: center;
      padding: 4px 0;
    }

    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }

    .cal-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-serif);
      font-size: 18px;
      color: var(--charcoal);
      border-radius: 50%;
      cursor: pointer;
      transition: background .15s, color .15s;
      position: relative;
      user-select: none;
    }
    .cal-day:hover:not(.cal-day--disabled):not(.cal-day--empty) {
      background: hsl(30,47%,27%,.15);
    }
    .cal-day--empty { cursor: default; }
    .cal-day--disabled {
      color: var(--stone);
      text-decoration: line-through;
      cursor: not-allowed;
      opacity: 0.5;
    }
    .cal-day--past {
      color: var(--stone);
      cursor: not-allowed;
      opacity: 0.4;
    }
    .cal-day--selected {
      background: var(--brown) !important;
      color: var(--cream) !important;
      border-radius: 50%;
    }
    .cal-day--in-range {
      background: hsl(30,47%,27%,.15);
      border-radius: 0;
      color: var(--charcoal);
    }
    .cal-day--range-start {
      background: var(--brown) !important;
      color: var(--cream) !important;
      border-radius: 50% 0 0 50%;
    }
    .cal-day--range-end {
      background: var(--brown) !important;
      color: var(--cream) !important;
      border-radius: 0 50% 50% 0;
    }
    .cal-day--today {
      font-weight: 700;
    }

    /* Legend */
    .cal-legend {
      display: flex;
      gap: 24px;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border-col);
    }
    .cal-legend span {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      color: var(--muted-fg);
    }
    .legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .legend-dot--selected { background: var(--brown); }
    .legend-dot--unavail { background: var(--stone); opacity: .6; }

    /* ── BOOKING CARD ── */
    .booking-card {
      background: var(--card-bg);
      border: 1px solid var(--border-col);
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 16px -4px rgba(60,50,30,.08);
      position: sticky;
      top: 100px;
    }

    .booking-price-label {
      font-family: var(--font-serif);
      font-size: 22px;
      color: var(--charcoal);
      margin-bottom: 20px;
    }
    .booking-price-label .price-val {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    .booking-price-label .price-suffix {
      font-size: 14px;
      color: var(--muted-fg);
      font-weight: 400;
      margin-left: 4px;
    }

    .fields-group {
      border: 1px solid var(--border-col);
      border-radius: 8px;
      overflow: visible;
      margin-bottom: 0;
    }

    .date-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid var(--border-col);
    }

    .date-cell {
      padding: 12px;
    }
    .date-cell:first-child { border-right: 1px solid var(--border-col); }

    .field-label {
      font-family: var(--font-sans);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--charcoal);
      margin-bottom: 4px;
    }

    .field-value {
      font-family: var(--font-serif);
      font-size: 15px;
      color: var(--charcoal);
    }
    .field-value.placeholder { color: var(--muted-fg); }

    /* Date inputs */
    .date-input {
      width: 100%;
      border: 0;
      border-radius: 6px;
      padding: 0;
      font-family: var(--font-serif);
      font-size: 15px;
      color: var(--charcoal);
      background: var(--card-bg);
      outline: none;
      cursor: pointer;
      transition: border-color .2s, box-shadow .2s;
      -webkit-appearance: none;
	  outline:none;
	  box-shadow:none!important;
    }
    .date-input:focus {
      border-color: var(--brown);
      box-shadow: 0 0 0 3px hsl(30,47%,27%,.12);
    }
    .date-input::-webkit-calendar-picker-indicator {
      opacity: 0.5;
      cursor: pointer;
    }
    .date-input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
    .date-input::-webkit-datetime-edit { padding: 0; }

    /* Counter number input */
    .counter-input {
      width: 38px;
      height: 32px;
      border: 1px solid var(--border-col);
      border-radius: 6px;
      text-align: center;
      font-family: var(--font-serif);
      font-size: 15px;
      color: var(--charcoal);
      background: var(--card-bg);
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      -moz-appearance: textfield;
    }
    .counter-input:focus {
      border-color: var(--brown);
      box-shadow: 0 0 0 3px hsl(30,47%,27%,.12);
    }
    .counter-input::-webkit-inner-spin-button,
    .counter-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

    /* Guests dropdown */
    .guests-trigger {
      width: 100%;
      padding: 12px;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background .15s;
    }
    .guests-trigger:hover { background: rgba(115,118,84,.08); }

    .guests-trigger .guests-left { text-align: left; }

    .chevron {
      transition: transform .25s;
      color: var(--muted-fg);
    }
    .chevron.open { transform: rotate(180deg); }

    .guests-dropdown {
      position: absolute;
      left: -1px; right: -1px;
      top: calc(100% + 6px);
      background: var(--card-bg);
      border: 1px solid var(--border-col);
      border-radius: 8px;
      box-shadow: 0 8px 24px -4px rgba(60,50,30,.12);
      z-index: 30;
      padding: 16px;
      display: none;
    }
    .guests-dropdown.open { display: block; }

    .guests-wrap { position: relative; }

    .counter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
    }
    .counter-row + .counter-row { border-top: 1px solid var(--border-col); }

    .counter-label { font-size: 16px; font-weight: 500; color: var(--charcoal); }
    .counter-sub { font-size: 14px; color: var(--muted-fg); }

    .counter-controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .counter-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border-col);
      background: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--charcoal);
      transition: border-color .15s;
    }
    .counter-btn:hover:not(:disabled) { border-color: var(--charcoal); }
    .counter-btn:disabled { opacity: 0.3; cursor: not-allowed; }

    .counter-val {
      font-size: 14px;
      color: var(--charcoal);
      min-width: 20px;
      text-align: center;
    }

    .guests-note {
    font-size: 12px;
    color: var(--muted-fg);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-col);
    line-height: 1.625;
}

    /* Validation msg */
    .val-msg {
      font-size: 14px;
      color: #c0392b;
      margin-top: 10px;
    }

    /* CTA Button */
    .btn-reserve {
      width: 100%;
      margin-top: 16px;
      padding: 14px 24px;
      background: var(--brown);
      color: var(--cream);
      border: none;
      border-radius: 100px;
      font-family: var(--font-serif);
      font-size: 14px;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: background .2s;
    }
    .btn-reserve:hover:not(:disabled) { background: var(--brown-dark); }
    .btn-reserve:disabled { opacity: 0.5; cursor: not-allowed; }

    .not-charged {
      text-align: center;
      font-size: 12px;
      color: var(--muted-fg);
      margin-top: 10px;
    }

    /* Breakdown */
    .breakdown {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--border-col);
    }

    .breakdown-row {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: var(--charcoal);
      margin-bottom: 8px;
    }
    .breakdown-row span:first-child { text-decoration: underline; text-underline-offset: 2px; }

    .breakdown-total {
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 600;
      color: var(--charcoal);
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border-col);
    }

    /* ── ACCREDITATION SECTION ── */
    .accred-section {
      background: var(--accred-bg);
      padding: 26px 0;
    }

    .accred-logos {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: nowrap;
    }

    .accred-logo {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
    }

    /* ── FOOTER ── */
    footer {
      background: var(--moss-bg);
      color: rgba(249,245,237,.85);
      padding: 64px 0 40px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }

    .footer-logo-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .footer-brand {
      font-family: var(--font-serif);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(249,245,237,.95);
      margin-bottom: 2px;
      line-height: 1.3;
    }
    .footer-tagline {
      font-family: var(--font-serif);
      font-size: 15px;
      font-style: italic;
      color: rgba(249,245,237,.6);
      margin-top: 16px;
    }

    .footer-heading {
      font-family: var(--font-serif);
      font-size: 17px;
      color: rgba(249,245,237,.95);
      margin-bottom: 20px;
    }

    footer ul {
      list-style: none;
    }
    footer li { margin-bottom: 10px; }
    footer a {
      color: rgba(249,245,237,.65);
      font-size: 14px;
      transition: color .2s;
    }
    footer a:hover { color: rgba(249,245,237,.95); }

    .footer-contact-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 14px;
    }
    .footer-contact-item svg { flex-shrink: 0; margin-top: 2px; opacity: .5; }
    .footer-contact-item span, .footer-contact-item a {
      color: rgba(249,245,237,.65);
      font-size: 14px;
    }

    .footer-social {
      display: flex;
      gap: 14px;
      margin-top: 20px;
    }
    .footer-social a {
      color: rgba(249,245,237,.45);
      transition: color .2s;
    }
    .footer-social a:hover { color: rgba(249,245,237,.9); }

    .footer-bottom {
      border-top: 1px solid rgba(249,245,237,.1);
      padding-top: 28px;
      text-align: center;
      color: rgba(249,245,237,.4);
      font-size: 13px;
    }

    /* Floating CTA */
    .floating-cta {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 50;
      background: var(--brown);
      color: var(--cream);
      padding: 12px 24px;
      border-radius: 100px;
      font-family: var(--font-serif);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      box-shadow: 0 4px 12px -2px rgba(102,71,33,.3);
      transition: transform .2s, box-shadow .2s;
    }
    .floating-cta:hover {
      transform: scale(1.04);
      box-shadow: 0 6px 20px -4px rgba(102,71,33,.4);
    }

    /* ── MOBILE NAV ── */
    .mobile-nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      top: 96px;
      background: var(--cream);
      z-index: 40;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
    }
    .mobile-nav-overlay.open { display: flex; }
    .mobile-nav-overlay a {
      font-family: var(--font-serif);
      font-size: 14px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--charcoal);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .avail-grid { grid-template-columns: 1fr; }
      .cal-months-wrap { grid-template-columns: 1fr; gap: 24px; }
      nav, .btn-book { display: none; }
      .mobile-toggle { display: flex; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .accred-logos { flex-wrap: wrap; gap: 12px; }
      .accred-logo { flex: 0 0 22%; }
    }

    @media (max-width: 600px) {
      .footer-grid { grid-template-columns: 1fr; }
      .booking-card { border-radius: 8px; padding: 18px; }
    }