/* ==========================================================================
   result.css — Room Availability Results
   West Home Hotel
   ========================================================================== */

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

   :root {
     --wh-ink: #1B2430;
     --wh-ink-soft: #384254;
     --wh-cream: #FAF7F2;
     --wh-cream-dark: #F0EAE0;
     --wh-gold: #B8860B;
     --wh-gold-soft: #E8D8A8;
     --wh-green: #2F6F4E;
     --wh-green-bg: #EAF4EE;
     --wh-amber: #C97B1F;
     --wh-amber-bg: #FBF0E1;
     --wh-red: #B3423A;
     --wh-red-bg: #FBEAE8;
     --wh-muted: #6B7280;
     --wh-border: #E4DFD5;
     --wh-radius: 14px;
     --wh-shadow: 0 6px 24px rgba(27, 36, 48, 0.08);
     --wh-shadow-hover: 0 12px 32px rgba(27, 36, 48, 0.14);
   }

   /* ==========================================================================
   availability-form.css — Check Room Availability
   West Home Hotel — matches result.css design tokens
   ========================================================================== */

   #check-availability {
     --wh-ink: #1B2430;
     --wh-ink-soft: #384254;
     --wh-cream: #FAF7F2;
     --wh-cream-dark: #F0EAE0;
     --wh-gold: #B8860B;
     --wh-gold-soft: #E8D8A8;
     --wh-red: #B3423A;
     --wh-red-bg: #FBEAE8;
     --wh-muted: #6B7280;
     --wh-border: #E4DFD5;
     --wh-radius: 14px;
     --wh-shadow: 0 6px 24px rgba(27, 36, 48, 0.08);

     font-family: 'Inter', sans-serif;
     background: transparent;
     padding: 3.5rem 1.25rem;
     display: flex;
     justify-content: center;
   }

   #check-availability * {
     box-sizing: border-box;
   }

   .avail-form-card {
    width: 100%;
    max-width: 80%;
    border: 1px solid var(--wh-border);
    border-radius: var(--wh-radius);
    box-shadow: var(--wh-shadow);
    padding: 2.5rem 2.25rem;
    position: relative;
    margin-top: -153px;
    z-index: 500;
    overflow: hidden;
}


/* Keep content above overlay */
.avail-form-card > * {
    position: relative;
    z-index: 2;
}
/* Dark Overlay */
.avail-form-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgb(0, 0, 0),
        rgb(0, 0, 0)
    );
    z-index: 1;
}


   .avail-form-eyebrow {
     font-size: 0.75rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--wh-gold);
     font-weight: 700;
     text-align: center;
     margin: 0 0 0.5rem;
   }

   .avail-form-card h2 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(1.5rem, 3vw, 1.9rem);
     font-weight: 700;
     color: var(--wh-cream);
     text-align: center;
     margin: 0 0 0.5rem;
     line-height: 1.25;
   }

   .avail-form-sub {
     font-size: 0.92rem;
     color: #E8D8A8;
     margin: 0 0 1.75rem;
     line-height: 1.5;
     text-align: center;
   }

   .avail-form-row {
       display: flex;
       align-items: flex-end;
       gap: 1rem;
       margin-bottom: 1.5rem;
     }

     .avail-form-field {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 0.4rem;
     }


   .avail-form-field label {
     font-size: 0.78rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--wh-gold);
   }

   .avail-form-field input[type="date"] {
     font-family: 'Inter', sans-serif;
     font-size: 0.95rem;
     color: var(--wh-ink);
     background: var(--wh-cream);
     border: 1.5px solid var(--wh-border);
     border-radius: 9px;
     padding: 0.75rem 0.9rem;
     transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
     width: 100%;
   }

   .avail-form-field input[type="date"]:hover {
     border-color: var(--wh-gold-soft);
   }

   .avail-form-field input[type="date"]:focus {
     outline: none;
     border-color: var(--wh-gold);
     background: #fff;
     box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
   }

   /* Mark fields red when the browser flags them invalid on submit attempt */
   .avail-form-field input.avail-input-invalid {
     border-color: var(--wh-red);
     background: var(--wh-red-bg);
   }

   /* ---------- Inline error message (replaces alert()) ---------- */
   .avail-form-error {
     display: flex;
     align-items: flex-start;
     gap: 0.6rem;
     background: var(--wh-red-bg);
     border: 1px solid rgba(179, 66, 58, 0.25);
     color: var(--wh-red);
     font-size: 0.88rem;
     font-weight: 500;
     border-radius: 9px;
     padding: 0.75rem 1rem;
     margin-bottom: 1.25rem;
     animation: avail-shake 0.4s ease;
   }

   .avail-form-error::before {
     content: "\f071"; /* fa-triangle-exclamation */
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
     margin-top: 0.1rem;
     flex-shrink: 0;
   }

   .avail-form-error[hidden] {
     display: none;
   }

   @keyframes avail-shake {
     0%, 100% { transform: translateX(0); }
     20% { transform: translateX(-4px); }
     40% { transform: translateX(4px); }
     60% { transform: translateX(-3px); }
     80% { transform: translateX(3px); }
   }

   /* ---------- Submit button ---------- */

   .avail-form-submit {
       flex-shrink: 0;
       width: auto;
       min-width: 220px;
       height: 48px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.6rem;
       background: #4b4e53 ;
       color: #fff;
       border: none;
       font-family: 'Inter', sans-serif;
       font-size: 0.95rem;
       font-weight: 600;
       padding: 0 1.8rem;
       border-radius: 9px;
       cursor: pointer;
       transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
     }

   .avail-form-submit:hover {
     background: var(--wh-gold);
     transform: translateY(-1px);
     box-shadow: 0 6px 16px rgba(184, 134, 11, 0.25);
   }

   .avail-form-submit:active {
     transform: translateY(0);
   }

   .avail-form-submit i {
     font-size: 0.85rem;
     transition: transform 0.2s ease;
   }

   .avail-form-submit:hover i {
     transform: translateX(3px);
   }

   /* ---------- Responsive ---------- */
   @media (max-width: 768px) {
       .avail-form-card {
         padding: 2rem 1.5rem;
       }

       .avail-form-row {
         flex-direction: column;
         align-items: stretch;
       }

       .avail-form-field,
       .avail-form-submit {
         width: 100%;
       }

       .avail-form-submit {
         min-width: 100%;
         height: 50px;
       }
     }

   /* ---------- Page shell ---------- */
   #availability-page {
     font-family: 'Inter', sans-serif;
     color: var(--wh-ink);
     background: var(--wh-cream);
     padding: 0 0 3rem;
   }

   #availability-page * {
     box-sizing: border-box;
   }

   .avail-wrap {
     max-width: 85%;
     margin: 0 auto;
     padding: 0 1.25rem;
   }

   /* ---------- Hero summary banner ---------- */
   .avail-hero {
     background: linear-gradient(135deg, var(--wh-ink) 0%, #2A3547 100%);
     color: #fff;
     border-radius: var(--wh-radius);
     padding: 2.25rem 2rem;
     margin: -2.5rem auto 2rem;
     max-width: 90%;
     box-shadow: var(--wh-shadow);
     position: relative;
     overflow: hidden;
   }

   .avail-hero::before {
     content: "";
     position: absolute;
     top: -40%;
     right: -10%;
     width: 260px;
     height: 260px;
     background: radial-gradient(circle, rgba(184,134,11,0.35) 0%, rgba(184,134,11,0) 70%);
     pointer-events: none;
   }

   .avail-hero-eyebrow {
     font-size: 0.75rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--wh-gold-soft);
     font-weight: 600;
     margin: 0 0 0.5rem;
   }

   .avail-hero h1 {
     font-family: 'Playfair Display', serif;
     color: #ffd203;
     font-size: clamp(1.5rem, 3vw, 2.1rem);
     font-weight: 700;
     margin: 0 0 1rem;
     line-height: 1.25;
   }

   .avail-hero-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 1.5rem;
     font-size: 0.92rem;
   }

   .avail-hero-meta div {
     display: flex;
     flex-direction: column;
     gap: 0.2rem;
   }

   .avail-hero-meta span.label {
     font-size: 0.72rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: rgba(255,255,255,0.6);
   }

   .avail-hero-meta span.value {
     font-weight: 600;
     font-size: 1.05rem;
   }

   /* ---------- Loading skeleton ---------- */
   .avail-skeleton-card {
     background: #fff;
     border: 1px solid var(--wh-border);
     border-radius: var(--wh-radius);
     padding: 1.5rem;
     margin-bottom: 1rem;
     overflow: hidden;
     position: relative;
   }

   .avail-skeleton-line {
     height: 14px;
     border-radius: 6px;
     background: linear-gradient(90deg, var(--wh-cream-dark) 25%, #fff 50%, var(--wh-cream-dark) 75%);
     background-size: 200% 100%;
     animation: shimmer 1.4s infinite;
     margin-bottom: 0.75rem;
   }

   .avail-skeleton-line.short { width: 40%; }
   .avail-skeleton-line.tall { height: 22px; width: 55%; }

   @keyframes shimmer {
     0% { background-position: 200% 0; }
     100% { background-position: -200% 0; }
   }

   /* ---------- Availability results grid ---------- */
   /* Single source of truth for .avail-grid — 3 columns, responsive down to 1 */
   .avail-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.25rem;
   }

   @media (max-width: 992px) {
     .avail-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }

   @media (max-width: 600px) {
     .avail-grid {
       grid-template-columns: 1fr;
     }
   }

   /* ---------- Room card image ---------- */
   .avail-card-image {
     width: 100%;
     aspect-ratio: 16 / 10;
     overflow: hidden;
     border-radius: 10px;
     margin-bottom: 12px;
     background: #eee; /* shows while the image loads */
   }

   .avail-card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }

   /* ---------- Room cards ---------- */
   .avail-card {
     background: #fff;
     border: 1px solid var(--wh-border);
     border-radius: var(--wh-radius);
     padding: 1.5rem 1.75rem;
     box-shadow: var(--wh-shadow);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
     animation: rise 0.5s ease both;
   }

   .avail-card:hover {
     transform: translateY(-3px);
     box-shadow: var(--wh-shadow-hover);
   }

   @keyframes rise {
     from { opacity: 0; transform: translateY(10px); }
     to { opacity: 1; transform: translateY(0); }
   }

   .avail-card-top {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 1rem;
     margin-bottom: 1.1rem;
     flex-wrap: wrap;
   }

   .avail-card-roomtype {
     font-family: 'Playfair Display', serif;
     font-size: 1.35rem;
     font-weight: 700;
     color: var(--wh-ink);
     margin: 0 0 0.2rem;
   }

   .avail-card-sub {
     font-size: 0.85rem;
     color: var(--wh-muted);
     margin: 0;
   }

   /* Status badge */
   .avail-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     padding: 0.35rem 0.8rem;
     border-radius: 999px;
     font-size: 0.78rem;
     font-weight: 600;
     white-space: nowrap;
   }

   .avail-badge.full { background: var(--wh-green-bg); color: var(--wh-green); }
   .avail-badge.partial { background: var(--wh-amber-bg); color: var(--wh-amber); }
   .avail-badge.none { background: var(--wh-red-bg); color: var(--wh-red); }

   .avail-badge .dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: currentColor;
   }

   /* Night-by-night availability strip — the signature element */
   .avail-strip-label {
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: var(--wh-muted);
     margin: 0 0 0.5rem;
   }

   .avail-strip {
     display: flex;
     gap: 4px;
     margin-bottom: 1.1rem;
   }

   .avail-strip-seg {
     flex: 1;
     height: 54px;
     border-radius: 7px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     font-weight: 700;
     color: #fff;
     position: relative;
     cursor: default;
   }

   .avail-strip-seg.high { background: var(--wh-green); }
   .avail-strip-seg.low { background: var(--wh-amber); }
   .avail-strip-seg.zero { background: var(--wh-red); }

   .avail-strip-seg[title]:hover::after {
     content: attr(title);
     position: absolute;
     bottom: 120%;
     left: 50%;
     transform: translateX(-50%);
     background: var(--wh-ink);
     color: #fff;
     padding: 0.35rem 0.6rem;
     border-radius: 6px;
     font-size: 0.72rem;
     font-weight: 500;
     white-space: nowrap;
     z-index: 5;
   }

   /* ---------- Total-stay price line ---------- */
   .avail-total-price {
     font-size: 0.85rem;
     color: var(--wh-muted);
     margin: 0 0 1rem;
   }

   .avail-card-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
     padding-top: 1rem;
     border-top: 1px solid var(--wh-border);
   }

   .avail-price {
     font-family: 'Playfair Display', serif;
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--wh-ink);
   }

   .avail-price span {
     font-family: 'Inter', sans-serif;
     font-size: 0.78rem;
     font-weight: 500;
     color: var(--wh-muted);
   }

   .avail-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: var(--wh-ink);
     color: #fff;
     border: none;
     padding: 0.7rem 1.4rem;
     border-radius: 8px;
     font-weight: 600;
     font-size: 0.9rem;
     text-decoration: none;
     transition: background 0.2s ease, transform 0.15s ease;
   }

   .avail-btn:hover {
     background: var(--wh-gold);
     transform: translateY(-1px);
   }

   .avail-btn.disabled {
     background: var(--wh-border);
     color: var(--wh-muted);
     pointer-events: none;
   }

   /* ---------- Empty / error states ---------- */
   .avail-empty {
     background: #fff;
     border: 1px dashed var(--wh-border);
     border-radius: var(--wh-radius);
     padding: 2.5rem 2rem;
     text-align: center;
   }

   .avail-empty h3 {
     font-family: 'Playfair Display', serif;
     font-size: 1.3rem;
     margin: 0 0 0.5rem;
   }

   .avail-empty p {
     color: var(--wh-muted);
     margin: 0 0 1.25rem;
     font-size: 0.92rem;
   }

   .avail-empty.error {
     border-color: var(--wh-red-bg);
     background: var(--wh-red-bg);
   }

   .avail-empty.error h3 { color: var(--wh-red); }

   /* ---------- Back link ---------- */
   .avail-back {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     margin: 1.75rem 0 0;
     font-size: 0.88rem;
     font-weight: 600;
     color: var(--wh-ink-soft);
     text-decoration: none;
   }

   .avail-back:hover { color: var(--wh-gold); }

   /* ---------- Responsive ---------- */
   @media (max-width:900px) {
    .avail-form-card {
      max-width: 94%;
      margin-top: -36px;
    }
  }

   @media (max-width: 600px) {
     .avail-hero {
       margin-top: -2rem;
       padding: 1.75rem 1.25rem;
     }
     .avail-card {
       padding: 1.25rem;
     }
     .avail-strip-seg {
       font-size: 0.62rem;
     }
   }

   @media (max-width:900px) {
    .avail-form-card {
      max-width: 100%;
      margin-top: -36px;
    }
    #check-availability {
      padding: 3.5rem 0.25rem;
    }
  }