/* Bukit Piniapat – booking page styles (ported verbatim from booking calender.html) */
/* Base Variables - Inherited from index.html */
:root {
    --forest-green: #1E4D2B; --deep-forest: #14361D; --sunset-gold: #E58A1F;
    --warm-terracotta: #C85A17; --sky-white: #FFFFFF; --soft-ecru: #F8F9F6;
    --charcoal: #2C3333; --border-light: #EAEAEA;
    --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: var(--soft-ecru); color: var(--charcoal); }
h1, h2, h3 { font-family: 'Montserrat', sans-serif; color: var(--deep-forest); }
a { text-decoration: none; }

/* Minimal Header for Subpages */
.sub-header { background: var(--deep-forest); padding: 20px; display: flex; justify-content: space-between; align-items: center; }
.logo { color: var(--sky-white); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 42px; height: 42px; background: var(--sunset-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.back-btn { color: var(--sky-white); font-weight: 600; font-size: 0.9rem; }

.container { max-width: 1200px; margin: 50px auto; padding: 0 20px; }

/* Layout Grid */
.booking-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: var(--sky-white); border-radius: 20px; box-shadow: var(--shadow-card); overflow: hidden; }

/* Calendar Section */
.calendar-section { padding: 40px; background: #fdfdfd; border-right: 1px solid var(--border-light); }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.calendar-header button { background: none; border: none; font-size: 1.2rem; color: var(--forest-green); cursor: pointer; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; text-align: center; }
.day-name { font-weight: 600; font-size: 0.85rem; color: #888; margin-bottom: 10px; }
.cal-day { padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 500; transition: 0.2s; border: 1px solid transparent; }
.cal-day:hover:not(.empty) { border-color: var(--sunset-gold); color: var(--sunset-gold); }
.cal-day.selected { background: var(--sunset-gold); color: var(--sky-white); box-shadow: 0 4px 10px rgba(229,138,31,0.3); }
.cal-day.empty { cursor: default; }

/* Form Section */
.form-section { padding: 40px; background: var(--deep-forest); color: var(--sky-white); }
.form-section h2 { color: var(--sky-white); margin-bottom: 20px; }
.form-group { display: flex; flex-direction: column; margin-bottom: 16px; }
.form-group label { font-family: 'Montserrat'; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 6px; color: #C8D9CE; }
.form-group input, .form-group select { padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; font-family: 'Inter'; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--sunset-gold); }
.form-group select option { color: var(--charcoal); }
.btn-primary { background: var(--sunset-gold); color: white; padding: 14px 24px; border: none; border-radius: 50px; font-family: 'Montserrat'; font-weight: 700; cursor: pointer; width: 100%; margin-top: 10px; transition: 0.3s; text-transform: uppercase; }
.btn-primary:hover { background: var(--warm-terracotta); }

@media(max-width: 800px) { .booking-layout { grid-template-columns: 1fr; } .calendar-section { border-right: none; border-bottom: 1px solid var(--border-light); } }
    

/* ---- Added for WordPress integration ---- */
.cal-day.disabled { color: #c9c9c9; cursor: not-allowed; }
.cal-day.disabled:hover { border-color: transparent; color: #c9c9c9; }
.cal-day.available { background: rgba(30, 77, 43, 0.08); color: var(--forest-green); }
.cal-day.available.selected { background: var(--sunset-gold); color: var(--sky-white); }
.cal-day:focus-visible { outline: 2px solid var(--sunset-gold); outline-offset: 2px; }
.calendar-header button:disabled { opacity: 0.3; cursor: default; }
.bp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bp-form-msg { display: none; padding: 12px 14px; border-radius: 8px; font-size: 0.9rem; margin: 6px 0 4px; line-height: 1.45; }
.bp-form-msg.is-info, .bp-form-msg.is-success, .bp-form-msg.is-error { display: block; }
.bp-form-msg.is-info { background: rgba(255,255,255,0.1); color: #C8D9CE; }
.bp-form-msg.is-success { background: rgba(37, 211, 102, 0.15); color: #b8f5cf; border: 1px solid rgba(37, 211, 102, 0.4); }
.bp-form-msg.is-success strong { color: #fff; font-size: 1.05rem; letter-spacing: 0.5px; }
.bp-form-msg.is-error { background: rgba(220, 53, 69, 0.18); color: #ffd3d7; border: 1px solid rgba(220, 53, 69, 0.45); }
.btn-primary:disabled { opacity: 0.7; cursor: wait; }

/* ============================================================
   RESPONSIVE REFINEMENTS (layout audit, Oct 2026)
   ============================================================ */
:root { --gutter: 20px; }
@media (min-width: 768px) { :root { --gutter: 32px; } }

.sub-header { padding: 14px var(--gutter); }
.back-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.container { margin: clamp(24px, 5vw, 50px) auto; padding: 0 var(--gutter); }

/* minmax(0,1fr): grid columns may shrink below the calendar's min-content width
   (on phones the 7-day grid used to push Saturday and the form fields out of the card). */
.booking-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.calendar-section, .form-section { padding: clamp(24px, 4vw, 40px); min-width: 0; }
@media (max-width: 900px) {
    .booking-layout { grid-template-columns: minmax(0, 1fr); }
    .calendar-section { border-right: none; border-bottom: 1px solid var(--border-light); }
}

.calendar-header button { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.calendar-header button:hover:not(:disabled) { background: rgba(30, 77, 43, 0.08); }
.calendar-grid { gap: clamp(4px, 1.2vw, 10px); }
.cal-day { padding: 0; aspect-ratio: 1 / 1; min-height: 38px; max-height: 56px; display: flex; align-items: center; justify-content: center; }
.cal-day.empty { min-height: 0; }

/* Inputs: fill the column, 16px text (stops iOS zoom), comfortable 48px height. */
.form-group input, .form-group select { width: 100%; min-width: 0; font-size: 16px; min-height: 48px; }
.btn-primary { min-height: 50px; }

/* ==================== BRAND LOGO ==================== */
.logo-icon:has(.bp-logo) {
    width: 44px; height: 44px; background: #fff; overflow: hidden; flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.logo-icon .bp-logo { width: 88%; height: 88%; object-fit: contain; display: block; }