/* Global styles for Faaji & Brew Palace */

body {
    background-color: #F9F5FF;
    font-family: 'Inter', sans-serif;
}

.main-bg {
    background-color: #F9F5FF;
}

.dark-bg {
    background-color: #312A44;
}

.brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #C9A96E;
}

.navbar-dark .navbar-nav .nav-link {
    color: #DAD4DF;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #C9A96E;
}

.btn-primary {
    background-color: #88708E;
    border-color: #88708E;
}

.btn-primary:hover {
    background-color: #312A44;
    border-color: #312A44;
}

.footer {
    background-color: #312A44;
}

.footer a {
    color: #C9A96E;
    text-decoration: none;
}

/* ============================================================
   Auth pages — login, signup, logout
   ============================================================ */

/* Ensures the form fills the viewport height between nav and footer */

.auth-section {
    min-height: calc(100vh - 200px);
}

/* Card container for all auth forms */
.auth-card {
    border-radius: 12px;
    background-color: #ffffff;
}

/* Page heading on auth pages uses the serif brand font */
.auth-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #312A44;
}

/* In-form links (sign in / create account) use the gold accent */
.auth-link {
    color: #C9A96E;
    text-decoration: none;
    font-weight: 500;
}

.auth-link:hover {
    color: #312A44;
    text-decoration: underline;
}

/* Icon displayed on the logout confirmation page */
.auth-icon {
    font-size: 3rem;
    color: #C9A96E;
    display: block;
}

/* Cancel button on logout page — styled to match palette */
.btn-outline-secondary {
    color: #88708E;
    border-color: #88708E;
}

.btn-outline-secondary:hover {
    background-color: #88708E;
    border-color: #88708E;
    color: #ffffff;
}
/* 
   Homepage — Hero Section
*/

/* Full-viewport hero. Background image + gradient overlay set
   via inline style in index.html so {% static %} tag works.
   background-color is the fallback while the image loads. */
.hero-section {
    min-height: 100vh;
    background-color: #1A1528;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* All-caps eyebrow above the main heading */
.hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #C9A96E;
    margin-bottom: 1.25rem;
}

/* Fluid heading — scales from 2.8rem on mobile to 5rem on desktop */
.hero-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

/* Gold italic word "Faaji" inside the h1 */
.hero-gold-word {
    color: #C9A96E;
    font-style: italic;
    font-weight: 700;
}

/* Supporting paragraph under the heading */
.hero-subheading {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #DAD4DF;
    max-width: 540px;
}

/* Filled gold CTA button — hero and CTA band */
.btn-gold {
    background-color: #C9A96E;
    border-color: #C9A96E;
    color: #312A44;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-gold:hover,
.btn-gold:focus {
    background-color: #b8924d;
    border-color: #b8924d;
    color: #ffffff;
}

/* Ghost "Our Story" button — readable on the dark photo background */
.btn-hero-outline {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.50);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-hero-outline:hover,
.btn-hero-outline:focus {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: #ffffff;
    color: #ffffff;
}


/*
   Homepage — Info Band
*/

.info-band {
    background-color: #3E3558;
}

.info-item {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: #D4CEDF;
}

.info-item i {
    color: #C9A96E;
}


/* 
   Homepage — Features Section
 */

.features-section {
    background-color: #F9F5FF;
}

/* All-caps eyebrow above section headings */
.section-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #88708E;
    margin-bottom: 0.5rem;
}

/* Section main heading */
.section-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: #312A44;
}

/* Supporting text beneath the section heading */
.section-subheading {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #7A7087;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* Feature card outer wrapper */
.feature-card {
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 2px 14px rgba(49, 42, 68, 0.09);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.feature-card:hover {
    box-shadow: 0 8px 28px rgba(49, 42, 68, 0.16);
    transform: translateY(-4px);
}

/* Dark header area of each feature card — CSS gradient*/
.feature-card-img {
    position: relative;
    height: 175px;
    background: linear-gradient(150deg, #252038 0%, #3E3558 100%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 1rem;
}

/* Small label tag top-left of each card header */
.feature-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background-color: rgba(201, 169, 110, 0.15);
    color: #C9A96E;
    border: 1px solid rgba(201, 169, 110, 0.40);
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
}

/* Gold icon bottom-right of each card header */
.feature-card-icon {
    font-size: 1.9rem;
    color: #C9A96E;
}

.feature-card-body {
    background-color: #ffffff;
}

.feature-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #312A44;
    margin-bottom: 0.6rem;
}

.feature-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #5a5265;
    margin-bottom: 0;
}


/* 
   Homepage — Chef's Selection (Specials)
*/

.specials-section {
    background-color: #1A1528;
}

.specials-eyebrow {
    color: #9E94AA;
}

.specials-section .section-heading {
    color: #ffffff;
}

.specials-section .section-subheading {
    color: #9E94AA;
}

/* Shared card wrapper for all four special items */
.special-card {
    border-radius: 8px;
    overflow: hidden;
    background-color: #252038;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.special-card:hover {
    border-color: rgba(201, 169, 110, 0.30);
    transform: translateY(-3px);
}

/* Fixed-height image wrapper — keeps all cards the same height.
   160px is compact enough to keep images from dominating the card. */
.special-img-wrapper {
    height: 160px;
    overflow: hidden;
}

/* Food photograph inside the wrapper */
.special-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.special-card:hover .special-img {
    transform: scale(1.05);
}

/* Dark gradient area for the drink card (Chapman Royale) —
   same 160px height as the food photo wrappers */
.special-drink-area {
    background: linear-gradient(135deg, #1A1528 0%, #2C2843 100%);
}

/* Large icon inside the drink area */
.special-drink-icon {
    font-size: 3.2rem;
    color: #6DB5B5;
}

/* Dish name — base; colour variants applied by modifier */
.special-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.special-gold   { color: #C9A96E; }
.special-orange { color: #D4845A; }
.special-teal   { color: #6DB5B5; }

/* Short description beneath the dish name */
.special-description {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #9E94AA;
    margin-bottom: 0;
}


/* 
   Homepage — CTA Band
*/

.cta-section {
    background: linear-gradient(135deg, #312A44 0%, #252038 100%);
}

.cta-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #ffffff;
}

.cta-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: #B8B0C0;
    max-width: 480px;
}

/* Logo: "Faaji" in gold, "& Brew Palace" in lighter weight */
.brand-icon {
    color: #C9A96E;
    font-size: 0.85rem;
}

.brand-faaji {
    color: #C9A96E;
    font-weight: 700;
}

.brand-sub {
    color: #B8AEC8;
    font-weight: 400;
    font-size: 0.9em;
    letter-spacing: 0.01em;
}

/* Footer: much darker than general dark sections, matching wireframe */
footer.footer {
    background-color: #0D0A17;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.footer-brand-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #C9A96E;
}

.footer-address {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: #8A8098;
}

.footer-address a {
    color: #8A8098;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-address a:hover {
    color: #C9A96E;
}

.footer-copy {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: #5C5468;
}

/* Feature card image area — now holds a real photo */
.feature-card-img {
    position: relative;
    height: 175px;
    overflow: hidden;
    background: linear-gradient(150deg, #252038 0%, #3E3558 100%);
    display: block;
    padding: 0;
}

/* The photo fills the entire card header */
.feature-card-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.feature-card:hover .feature-card-photo {
    transform: scale(1.04);
}

/* Tag label sits over the photo — dark background for readability
   on both light and dark images */
.feature-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background-color: rgba(13, 10, 23, 0.72);
    color: #C9A96E;
    border: 1px solid rgba(201, 169, 110, 0.50);
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
}

/* Small icon displayed inline before each feature card title */
.feature-title-icon {
    color: #C9A96E;
    font-size: 1rem;
    margin-right: 0.45rem;
    vertical-align: middle;
}

/* Section heading on light background — slightly deeper than #312A44 */
.features-section .section-heading {
    color: #1A1528;
}

/* About page */

.about-hero {
    background-color: #1A1528;
    min-height: 260px;
}

.about-hero-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

.about-hero-sub {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #B8B0C0;
    max-width: 580px;
}

.about-story-section {
    background-color: #F9F5FF;
}

.about-story-img {
    width: 100%;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    max-height: 420px;
    box-shadow: 0 4px 20px rgba(49, 42, 68, 0.12);
}

/* Shown when no Cloudinary image has been uploaded yet */
.about-img-placeholder {
    width: 100%;
    height: 360px;
    border-radius: 12px;
    background: linear-gradient(150deg, #252038 0%, #3E3558 100%);
    box-shadow: 0 4px 20px rgba(49, 42, 68, 0.12);
}

.about-placeholder-icon {
    font-size: 4rem;
    color: #C9A96E;
}

.about-story-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    color: #1A1528;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.about-story-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.97rem;
    line-height: 1.75;
    color: #5a5265;
    margin-bottom: 1rem;
}

/* Dark filled button with gold text — matches wireframe CTA style */
.btn-about-cta {
    background-color: #312A44;
    border-color: #312A44;
    color: #C9A96E;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: 0.7rem 1.8rem;
    border-radius: 4px;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.btn-about-cta:hover,
.btn-about-cta:focus {
    background-color: #1A1528;
    border-color: #1A1528;
    color: #C9A96E;
}

.values-section {
    background-color: #F9F5FF;
    border-top: 1px solid rgba(136, 112, 142, 0.15);
}

.value-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(49, 42, 68, 0.07);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.value-card:hover {
    box-shadow: 0 6px 20px rgba(49, 42, 68, 0.13);
    transform: translateY(-3px);
}

.value-icon {
    font-size: 2.2rem;
    line-height: 1;
}

.value-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #312A44;
    margin-bottom: 0.5rem;
}

.value-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.87rem;
    line-height: 1.65;
    color: #7A7087;
    margin-bottom: 0;
}


/* Booking form page */

.booking-page {
    background-color: #F9F5FF;
    min-height: calc(100vh - 200px);
}

.booking-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(49, 42, 68, 0.09);
}

.booking-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #1A1528;
}

.booking-subheading {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #7A7087;
}

.booking-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #312A44;
    margin-bottom: 0.4rem;
    display: block;
}

/* Read-only name field */
.booking-readonly {
    background-color: #F4F0FA;
    color: #5a5265;
    border-color: #D8D0E4;
    cursor: default;
}

.booking-hint {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: #9E94AA;
    margin-bottom: 0;
}

.booking-field-error {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: #c0392b;
    margin-top: 0.3rem;
}

/* Confirm Reservation button */
.btn-confirm-booking {
    background-color: #88708E;
    border-color: #88708E;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: 0.8rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.btn-confirm-booking:hover,
.btn-confirm-booking:focus {
    background-color: #312A44;
    border-color: #312A44;
    color: #ffffff;
}


/* My Bookings page */

.my-bookings-page {
    background-color: #F9F5FF;
    min-height: calc(100vh - 200px);
}

.my-bookings-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #1A1528;
}

/* + New Booking button */
.btn-new-booking {
    background-color: #312A44;
    border-color: #312A44;
    color: #C9A96E;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
    border-radius: 4px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.btn-new-booking:hover {
    background-color: #1A1528;
    border-color: #1A1528;
    color: #C9A96E;
}

/* Individual booking card */
.booking-card-item {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(136, 112, 142, 0.18);
    padding: 1.25rem 1.5rem;
    transition: box-shadow 0.2s ease;
}

.booking-card-item:hover {
    box-shadow: 0 4px 16px rgba(49, 42, 68, 0.1);
}

/* Cancelled bookings are visually dimmed */
.booking-cancelled-item {
    opacity: 0.55;
}

.booking-item-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1A1528;
    margin-bottom: 0.4rem;
}

.booking-item-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #7A7087;
}

/* Status badges */
.status-badge {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    display: inline-block;
}

.status-confirmed {
    background-color: #e6f4ea;
    color: #2d7a44;
}

.status-pending {
    background-color: #fef6e4;
    color: #a07820;
}

.status-cancelled {
    background-color: #fdecea;
    color: #c0392b;
}

/* Edit booking button */
.btn-edit-booking {
    background-color: #C9A96E;
    border-color: #C9A96E;
    color: #312A44;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.btn-edit-booking:hover {
    background-color: #b8924d;
    border-color: #b8924d;
    color: #ffffff;
}

/* Cancel booking button */
.btn-cancel-booking {
    background-color: transparent;
    border: 1px solid #c0392b;
    color: #c0392b;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-cancel-booking:hover {
    background-color: #c0392b;
    color: #ffffff;
}

/* Empty state when no bookings exist */
.booking-empty-icon {
    font-size: 3.5rem;
    color: #C9A96E;
    display: block;
}

.booking-empty-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #312A44;
}

.booking-empty-text {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #7A7087;
}

/* Error pages (403, 404, 500) */

.error-page {
    background-color: #F9F5FF;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}

/* Large muted number above the heading */
.error-code-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 700;
    color: rgba(136, 112, 142, 0.20);
    line-height: 1;
    margin-bottom: 0;
}

.error-page-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #1A1528;
}

.error-page-text {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: #7A7087;
    max-width: 520px;
}

/* Cancel confirmation modal */

.cancel-modal-content {
    background-color: #312A44;
    border: 1px solid rgba(201, 169, 110, 0.30);
    border-radius: 12px;
}

.cancel-modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.cancel-modal-body {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #B8B0C0;
    padding-top: 0.5rem;
}

/* Ensure alert messages always have visible styling even if
   allauth appends extra tag words alongside the Bootstrap class */
.alert:not([class*="alert-"]) {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}