/* Frontend booking & hotel pages — unified design system */

/* Header property type categories */
.fd-header-categories {
    display: flex;
    align-items: center;
    gap: 0.5rem 1.25rem;
    flex: 1;
    margin: 0 1rem;
    flex-wrap: wrap;
}
@media (max-width: 900px) {
    .fd-header-categories { display: none; }
}
.fd-header-cat-link {
    color: var(--slate-600);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    white-space: nowrap;
    transition: color 0.2s;
}
.fd-header-cat-link:hover { color: var(--copper-600); }

/* Search page category tabs */
.fd-search-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.fd-category-tab {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    color: var(--slate-700);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.2s;
}
.fd-category-tab:hover {
    border-color: var(--copper-500);
    color: var(--copper-600);
    background: var(--copper-50);
}
.fd-category-tab.active {
    background: var(--copper-500);
    border-color: var(--copper-500);
    color: #fff;
}
.fd-category-tab.active:hover {
    background: var(--copper-600);
    border-color: var(--copper-600);
    color: #fff;
}

/* Header search bar (OYO-style) - kept for potential reuse */
.fd-header-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    max-width: 640px;
    margin: 0 1rem;
}
@media (max-width: 1024px) {
    .fd-header-search { max-width: 420px; gap: 0.5rem; }
    .fd-header-search-dates { display: none; }
}
@media (max-width: 900px) {
    .fd-header-search { display: none; }
}
.fd-header-search-city { min-width: 120px; }
.fd-header-search-select,
.fd-header-search-select-sm {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--slate-800);
    background: #fff;
}
.fd-header-search-near {
    color: var(--slate-600);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    white-space: nowrap;
}
.fd-header-search-near:hover { color: var(--copper-600); }
.fd-header-search-dates {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.fd-header-search-input {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--slate-200);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    max-width: 110px;
}
.fd-header-search-sep { color: var(--slate-400); font-size: 0.75rem; }
.fd-header-search-rooms {
    display: flex;
    gap: 0.35rem;
}
.fd-header-search-select-sm {
    min-width: 70px;
    padding: 0.5rem 0.5rem;
}
.fd-header-search-btn {
    padding: 0.5rem 1rem;
    background: var(--copper-500);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
}
.fd-header-search-btn:hover { background: var(--copper-600); }

/* Footer offer section (OYO-style, above footer) */
.fd-footer-offer {
    background: var(--slate-100);
    padding: 3rem 1.25rem;
    border-top: 1px solid var(--slate-200);
}
.fd-footer-offer-grid {
    display: grid;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .fd-footer-offer-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.fd-footer-offer-item { text-align: center; }
@media (min-width: 768px) { .fd-footer-offer-item { text-align: left; } }
.fd-footer-offer-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--slate-900);
    margin: 0 0 0.5rem;
}
.fd-footer-offer-desc {
    font-size: 0.9375rem;
    color: var(--slate-600);
    margin: 0 0 1rem;
}
.fd-footer-offer-form {
    display: flex;
    gap: 0.5rem;
    max-width: 320px;
    margin: 0 auto;
}
@media (min-width: 768px) { .fd-footer-offer-form { margin: 0; } }
.fd-footer-offer-input {
    flex: 1;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
}
.fd-footer-offer-input:focus {
    outline: none;
    border-color: var(--copper-500);
    box-shadow: 0 0 0 2px rgba(234,88,12,.15);
}
.fd-footer-offer-btn {
    padding: 0.6rem 1.25rem;
    background: var(--copper-500);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    white-space: nowrap;
}
.fd-footer-offer-btn:hover { background: var(--copper-600); }
.fd-footer-offer-success { font-size: 0.875rem; color: var(--copper-600); margin-top: 0.5rem; font-weight: 500; }
.fd-footer-offer-link {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    background: var(--copper-500);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
}
.fd-footer-offer-link:hover { background: var(--copper-600); color: #fff !important; }
.fd-footer-offer-app-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
@media (min-width: 768px) { .fd-footer-offer-app-btns { justify-content: flex-start; } }
.fd-footer-offer-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--slate-800);
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background 0.2s;
}
.fd-footer-offer-app-btn:hover { background: var(--slate-900); color: #fff !important; }

/* Footer 2-row layout: Row 1 = links, Row 2 = locations */
.w-footer-row { margin-bottom: 2.5rem; }
.w-footer-row:last-of-type { margin-bottom: 0; }
.w-footer-locations {
    padding-top: 2.5rem;
    border-top: 1px solid var(--slate-800);
}
.w-footer-locations-title {
    font-weight: 600;
    color: #fff;
    margin: 0 0 1rem 0;
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.w-footer-locations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.w-footer-locations-list li { margin: 0; }
.w-footer-locations-list a {
    color: var(--slate-400);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s;
}
.w-footer-locations-list a:hover { color: var(--copper-400); }

/* Hero & Search */
.fd-hero {
    position: relative;
    padding: 3rem 0 4rem;
    min-height: 380px;
    display: flex;
    align-items: center;
}
.fd-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--copper-500) 0%, var(--copper-600) 50%, var(--copper-700) 100%);
}
.fd-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.7;
}
.fd-hero-content { position: relative; z-index: 1; }
.fd-hero-title { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: #fff; margin: 0 0 0.5rem; }
@media (min-width: 640px) { .fd-hero-title { font-size: 2.75rem; } }
.fd-hero-subtitle { font-size: 1.0625rem; color: rgba(255,255,255,0.92); margin: 0 0 1.75rem; }

/* Search bar in hero */
.fd-search-bar {
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.fd-search-grid { display: grid; gap: 1rem; flex: 1; }
@media (min-width: 768px) { .fd-search-grid { grid-template-columns: 2fr 1fr 1fr 100px 100px; } }
@media (max-width: 767px) { .fd-search-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fd-search-grid { grid-template-columns: 1fr; } }
.fd-search-field { display: flex; flex-direction: column; gap: 0.35rem; }
.fd-search-label { font-size: 0.75rem; font-weight: 600; color: var(--slate-600); text-transform: uppercase; letter-spacing: 0.05em; }
.fd-search-input {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.fd-search-input:focus {
    outline: none;
    border-color: var(--copper-500);
    box-shadow: 0 0 0 3px rgba(234,88,12,.15);
}
.fd-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--copper-500);
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.fd-search-btn:hover { background: var(--copper-600); }

/* Section blocks */
.fd-section { padding: 3.5rem 0; }
.fd-section-alt { background: var(--slate-50); }
.fd-section-title { font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; color: var(--slate-900); margin: 0 0 0.35rem; }
.fd-section-subtitle { color: var(--slate-600); margin: 0 0 1.75rem; font-size: 0.9375rem; }

/* Hotel / Lodge cards grid */
.fd-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.fd-card {
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid var(--slate-100);
    transition: transform 0.2s, box-shadow 0.2s;
    display: block;
}
.fd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.fd-card-image {
    aspect-ratio: 16/10;
    background: var(--slate-100);
    overflow: hidden;
}
.fd-card-image img { width: 100%; height: 100%; object-fit: cover; }
.fd-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--copper-50) 0%, var(--copper-100) 100%);
    color: var(--copper-500);
}
.fd-card-body { padding: 1.125rem 1.25rem; }
.fd-card-title { font-size: 1.125rem; font-weight: 600; color: var(--slate-900); margin: 0 0 0.3rem; }
.fd-card-subtitle { font-size: 0.875rem; color: var(--slate-600); margin: 0 0 0.5rem; }
.fd-card-badge {
    display: inline-block;
    font-size: 0.75rem;
    background: var(--copper-100);
    color: var(--copper-700);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-weight: 500;
}

/* Search results layout */
.fd-results { padding: 1.5rem 0 4rem; min-height: 55vh; }
.fd-search-sticky {
    background: #fff;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    margin-bottom: 2rem;
    position: sticky;
    top: calc(var(--header-height) + 0.75rem);
    z-index: 10;
}
.fd-search-sticky .fd-search-grid { grid-template-columns: 2fr 1fr 1fr 80px 80px auto; }
@media (max-width: 768px) {
    .fd-search-sticky .fd-search-grid { grid-template-columns: 1fr 1fr; }
    .fd-search-sticky .fd-search-field:nth-child(7) { grid-column: span 2; }
}
.fd-results-layout { display: flex; flex-direction: column; gap: 1rem; }
.fd-results-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--slate-900); margin: 0 0 0.25rem; }
.fd-results-meta { font-size: 0.9375rem; color: var(--slate-600); margin: 0 0 1.25rem; }

/* Search result card (horizontal) */
.fd-result-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid var(--slate-100);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
    align-items: center;
}
.fd-result-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); }
@media (max-width: 768px) {
    .fd-result-card { flex-direction: column; align-items: stretch; }
    .fd-result-card .fd-result-price { text-align: left; border-top: 1px solid var(--slate-100); padding-top: 1rem; }
}
.fd-result-image {
    width: 200px;
    min-width: 200px;
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--slate-100);
}
.fd-result-image img { width: 100%; height: 100%; object-fit: cover; }
.fd-result-body { flex: 1; min-width: 0; }
.fd-result-price { text-align: right; min-width: 140px; }
.fd-result-price-label { display: block; font-size: 0.75rem; color: var(--slate-500); }
.fd-result-price-amount { font-size: 1.5rem; font-weight: 700; color: var(--slate-900); }
.fd-result-price-unit { font-size: 0.875rem; color: var(--slate-500); font-weight: 400; }
.fd-result-total { display: block; font-size: 0.8125rem; color: var(--slate-600); margin-top: 0.2rem; }
.fd-result-cta { display: block; font-size: 0.875rem; font-weight: 600; color: var(--copper-600); margin-top: 0.5rem; }

/* City chips */
.fd-cities { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.fd-city-chip {
    padding: 0.75rem 1.25rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--slate-200);
    text-decoration: none;
    color: var(--slate-700);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.2s;
}
.fd-city-chip:hover {
    border-color: var(--copper-500);
    color: var(--copper-600);
    background: var(--copper-50);
}

/* Feature pills */
.fd-features { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
.fd-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--slate-700);
    font-size: 0.9375rem;
}
.fd-feature-icon {
    width: 28px;
    height: 28px;
    background: var(--copper-500);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Empty state */
.fd-empty { text-align: center; padding: 3rem 2rem; color: var(--slate-600); }
.fd-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.6; }
.fd-empty h3 { font-size: 1.25rem; color: var(--slate-900); margin: 0 0 0.5rem; font-weight: 600; }
.fd-empty p { margin: 0 0 1.25rem; }
.fd-empty-btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: var(--copper-500);
    color: #fff !important;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
}
.fd-empty-btn:hover { background: var(--copper-600); color: #fff !important; }

/* Booking form page */
.fd-booking-section { padding: 2rem 0 4rem; }
.fd-breadcrumb { font-size: 0.875rem; color: var(--slate-600); margin-bottom: 1.5rem; }
.fd-breadcrumb a { color: var(--copper-600); text-decoration: none; }
.fd-breadcrumb a:hover { text-decoration: underline; }
.fd-breadcrumb span { margin: 0 0.35rem; }
.fd-booking-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .fd-booking-layout { grid-template-columns: 1fr; } }
.fd-booking-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; margin: 0 0 0.25rem; }
.fd-booking-dates { font-size: 0.9375rem; color: var(--slate-600); margin: 0 0 1.5rem; }
.fd-booking-alert { padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
.fd-booking-alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.fd-form-group { margin-bottom: 1.75rem; }
.fd-form-label { font-size: 0.875rem; font-weight: 500; color: var(--slate-700); margin-bottom: 0.4rem; display: block; }
.fd-form-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
}
.fd-form-input:focus {
    outline: none;
    border-color: var(--copper-500);
    box-shadow: 0 0 0 3px rgba(234,88,12,.12);
}
.fd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fd-form-field { display: flex; flex-direction: column; gap: 0.25rem; }
@media (max-width: 500px) { .fd-form-grid { grid-template-columns: 1fr; } }
.fd-form-error { font-size: 0.8125rem; color: #b91c1c; margin-top: 0.25rem; }
.fd-form-submit {
    width: 100%;
    padding: 1rem;
    background: var(--copper-500);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.fd-form-submit:hover { background: var(--copper-600); }
.fd-summary-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    border: 1px solid var(--slate-100);
    position: sticky;
    top: calc(var(--header-height) + 1rem);
}
.fd-summary-image { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; }
.fd-summary-placeholder { width: 100%; height: 140px; background: linear-gradient(135deg, var(--copper-50) 0%, var(--copper-100) 100%); border-radius: 8px; margin-bottom: 1rem; }
.fd-summary-card h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.35rem; }
.fd-summary-address { font-size: 0.875rem; color: var(--slate-600); margin: 0 0 1rem; }
.fd-summary-dates { font-size: 0.875rem; color: var(--slate-700); margin-bottom: 1rem; }
.fd-summary-dates div { margin-bottom: 0.25rem; }
.fd-summary-price { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--slate-200); font-size: 1rem; }
.fd-summary-note { font-size: 0.8125rem; color: var(--slate-500); margin: 0.5rem 0 0; }

/* My Bookings page */
.fd-mybookings { padding: 2rem 0 4rem; }
.fd-mybookings-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; margin: 0 0 0.25rem; }
.fd-mybookings-subtitle { font-size: 0.9375rem; color: var(--slate-600); margin: 0 0 1.5rem; }
.fd-mybookings-form { max-width: 560px; margin-bottom: 2rem; }
.fd-mybookings-form-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: flex-end; }
@media (max-width: 600px) { .fd-mybookings-form-grid { grid-template-columns: 1fr; } }
.fd-mybookings-list { display: flex; flex-direction: column; gap: 1rem; }
.fd-mybookings-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    border: 1px solid var(--slate-100);
}
.fd-mybookings-ref { font-size: 0.75rem; font-weight: 600; color: var(--slate-500); }
.fd-mybookings-card h3 { font-size: 1.125rem; font-weight: 600; margin: 0.35rem 0 0.25rem; }
.fd-mybookings-card p { font-size: 0.875rem; color: var(--slate-600); margin: 0; }
.fd-mybookings-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    margin-top: 0.5rem;
}
.fd-mybookings-status-blocked { background: #fef3c7; color: #92400e; }
.fd-mybookings-status-checked_in { background: #dcfce7; color: #166534; }
.fd-mybookings-status-checked_out { background: var(--slate-100); color: var(--slate-600); }
.fd-mybookings-actions { display: flex; gap: 0.5rem; }
.fd-mybookings-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--copper-600);
    background: var(--copper-50);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s;
}
.fd-mybookings-btn:hover { background: var(--copper-100); color: var(--copper-700); }
.fd-mybookings-empty { padding: 2rem; text-align: center; background: var(--slate-50); border-radius: 12px; color: var(--slate-600); }