/* =========================================================
   FURAHIA - GLASS DESIGN (Glassmorphism)
   ---------------------------------------------------------
   This file is loaded AFTER style.css and only changes the LOOK:
   frosted glass cards, blur, soft shadows, rounded corners.
   It uses the same class names as style.css, so no page had to change.

   To switch the glass design OFF, remove the line that loads
   "glass.css" in the 3 layout files (header.php, app_header.php,
   invite_header.php). Everything will look like before.
   ========================================================= */


/* ---------- 1. The glass "recipe" (change it here once) ---------- */
:root {
    /* Light glass (on light backgrounds) */
    --glass-bg: rgba(255, 255, 255, 0.58);
    --glass-bg-strong: rgba(255, 255, 255, 0.78);   /* for text-heavy boxes */
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-blur: blur(18px) saturate(150%);
    --glass-shadow: 0 10px 34px rgba(74, 10, 18, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7);

    /* Dark glass (on wine / dark backgrounds) */
    --glass-dark-bg: rgba(255, 255, 255, 0.08);
    --glass-dark-border: rgba(255, 255, 255, 0.18);

    /* Rounded corners: small and subtle. Change ONLY these to make corners rounder or sharper. */
    --radius-lg: 10px;   /* big boxes: banners, cards, login box, invitation */
    --radius: 8px;       /* normal boxes: small cards, alerts */
    --radius-sm: 6px;    /* buttons, inputs, chips */
    --radius-xs: 4px;    /* tiny things: thumbnails, menu items */
}


/* ---------- 2. Page backgrounds with soft colour glows ----------
   Glass needs colour BEHIND it to look like glass.
   These are just soft wine and gold "lights" on a warm ivory background. */
body {
    background:
        radial-gradient(circle at 10% 15%, rgba(185, 150, 85, 0.22), transparent 38%),
        radial-gradient(circle at 90% 10%, rgba(104, 31, 46, 0.14), transparent 40%),
        radial-gradient(circle at 75% 85%, rgba(223, 197, 141, 0.30), transparent 42%),
        radial-gradient(circle at 15% 85%, rgba(139, 48, 65, 0.12), transparent 38%),
        linear-gradient(135deg, #fbf7f1 0%, #f2e7da 100%);
    background-attachment: fixed;
}

/* The logged-in area gets slightly stronger glows */
.app-body {
    background:
        radial-gradient(circle at 12% 18%, rgba(185, 150, 85, 0.30), transparent 40%),
        radial-gradient(circle at 88% 12%, rgba(104, 31, 46, 0.20), transparent 42%),
        radial-gradient(circle at 70% 90%, rgba(223, 197, 141, 0.38), transparent 45%),
        radial-gradient(circle at 22% 92%, rgba(139, 48, 65, 0.16), transparent 40%),
        linear-gradient(135deg, #fbf6ef 0%, #efe2d3 100%);
    background-attachment: fixed;
}

/* Light homepage sections let the glowing background shine through a little */
.section-ivory-dark { background: rgba(246, 239, 230, 0.55); }
.section-sand       { background: rgba(240, 231, 220, 0.60); }


/* ---------- 3. The main glass boxes ---------- */
.app-panel,
.furahia-card,
.stat-card,
.stay-item,
.venue-contact-box,
.venue-highlights li,
.facility-list li,
.rsvp-count,
.mock-stat,
.action-card,
.theme-option,
.type-option {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

.app-panel,
.furahia-card,
.venue-contact-box {
    border-radius: var(--radius-lg);
}

.stat-card,
.stay-item,
.venue-highlights li,
.facility-list li,
.rsvp-count,
.mock-stat,
.action-card {
    border-radius: var(--radius);
}

/* Summary cards: a thin gold light line on top instead of a hard border */
.stat-card {
    border-top: 1px solid var(--glass-border);
    background-image: linear-gradient(180deg, rgba(223, 197, 141, 0.18), transparent 45%);
}

.stat-card-danger {
    background-image: linear-gradient(180deg, rgba(161, 42, 42, 0.12), transparent 45%);
}

.furahia-card:hover,
a.stat-card:hover {
    background: var(--glass-bg-strong);
    border-color: rgba(185, 150, 85, 0.55);
    box-shadow: 0 16px 40px rgba(74, 10, 18, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Dark glass cards (Corporate section, on the dark brown background) */
.card-dark {
    background: var(--glass-dark-bg);
    border-color: var(--glass-dark-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ---------- 4. Photo cards (events, venues, vendors) ---------- */
.photo-card,
.event-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

/* The text part under the photo: frosted, so the zooming photo looks nice behind it */
.photo-card-body {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.event-days {
    box-shadow: 0 4px 14px rgba(46, 5, 11, 0.25);
}


/* ---------- 5. Buttons ---------- */
.btn-furahia,
.btn-furahia-outline,
.btn-furahia-light,
.btn-furahia-light-solid,
.btn-invite,
.btn-invite-outline {
    border-radius: var(--radius-sm);
}

/* Main button: wine gradient with a soft glow */
.btn-furahia {
    background: linear-gradient(135deg, #7d2638 0%, var(--wine) 55%, var(--wine-dark) 100%);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(104, 31, 46, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-furahia:hover,
.btn-furahia:focus {
    background: linear-gradient(135deg, #8b3041 0%, #74202f 55%, var(--wine-dark) 100%);
    box-shadow: 0 10px 24px rgba(104, 31, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Outline button: a small piece of glass */
.btn-furahia-outline {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(185, 150, 85, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.btn-furahia-outline:hover {
    background: var(--gold);
    border-color: var(--gold);
}

/* Buttons on dark backgrounds */
.btn-furahia-light {
    background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.btn-furahia-light-solid {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.btn-outline-danger {
    border-radius: var(--radius-sm) !important;
}

/* Filter "chips" become soft glass pills */
.category-chip,
.filter-btn,
.event-pill,
.chip {
    border-radius: var(--radius-sm);
}

.category-chip,
.filter-btn {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(185, 150, 85, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.category-chip.active,
.category-chip:hover,
.filter-btn.active,
.filter-btn:hover {
    background: linear-gradient(135deg, #7d2638, var(--wine));
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(104, 31, 46, 0.25);
}

.event-pill {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.chip {
    background: rgba(255, 255, 255, 0.06);
}


/* ---------- 6. Forms ---------- */
.form-control,
.form-select,
.furahia-input,
.app-panel .form-control,
.app-panel .form-select,
.auth-form .form-control,
.inquiry-box .form-control,
.inquiry-box .form-select {
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(185, 150, 85, 0.30);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.form-control:focus,
.form-select:focus,
.furahia-input:focus,
.app-panel .form-control:focus,
.app-panel .form-select:focus,
.auth-form .form-control:focus,
.inquiry-box .form-control:focus,
.inquiry-box .form-select:focus {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: var(--gold);
    box-shadow: 0 0 0 0.22rem rgba(185, 150, 85, 0.22);
}

/* Small inputs next to a button (e.g. "Change total budget") */
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Search box on the dark page headers (Venues, Vendors) */
.venue-search {
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Switches and checkboxes in Furahia colours */
.form-check-input:checked {
    background-color: var(--wine);
    border-color: var(--wine);
}

.form-check-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 0.22rem rgba(185, 150, 85, 0.22);
}


/* ---------- 7. Tables ---------- */
/* Bootstrap gives tables a white background: we make it see-through */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.45);
}

.guest-table tbody tr {
    transition: background 0.2s;
}

.guest-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.45);
}

.guest-table th {
    border-bottom-color: rgba(185, 150, 85, 0.25);
}

.guest-table td {
    border-bottom-color: rgba(185, 150, 85, 0.14);
}


/* ---------- 8. Website menu (top navbar) ---------- */
.furahia-nav {
    background: rgba(251, 248, 243, 0.62);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 6px 24px rgba(74, 10, 18, 0.06);
}


/* ---------- 9. Logged-in area: top bar and sidebar ---------- */
.app-topbar {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 6px 24px rgba(74, 10, 18, 0.06);
}

.app-avatar {
    box-shadow: inset 0 0 0 1px var(--gold), 0 4px 12px rgba(104, 31, 46, 0.25);
}

/* The sidebar: dark wine glass.
   (style.css uses !important here because of Bootstrap, so we must too.) */
.app-sidebar {
    --bs-offcanvas-bg: rgba(62, 14, 24, 0.88);
    background-color: rgba(62, 14, 24, 0.84) !important;
    background-image: linear-gradient(180deg, rgba(125, 38, 56, 0.55) 0%, rgba(46, 5, 11, 0.35) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    border-right: 1px solid rgba(223, 197, 141, 0.25) !important;
    box-shadow: 0 16px 40px rgba(46, 5, 11, 0.25);
}

/* On big screens the sidebar "floats" as a rounded glass panel */
@media (min-width: 992px) {
    .app-sidebar {
        margin: 16px 0 16px 16px;
        top: 82px;
        height: calc(100vh - 66px - 32px);
        border-radius: var(--radius-lg);
        border: 1px solid rgba(223, 197, 141, 0.25) !important;
    }
}

.app-nav-link {
    border-left: 0;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}

.app-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.app-nav-link.active {
    background: linear-gradient(135deg, rgba(223, 197, 141, 0.28), rgba(223, 197, 141, 0.10));
    box-shadow: inset 0 0 0 1px rgba(223, 197, 141, 0.35), 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* The menus that open from buttons (user menu, actions) */
.dropdown-menu {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(74, 10, 18, 0.15);
    padding: 6px;
}

.dropdown-item {
    border-radius: var(--radius-xs);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(185, 150, 85, 0.14);
}


/* ---------- 10. Big coloured banners ---------- */
.welcome-banner,
.event-banner,
.become-vendor {
    border-radius: var(--radius-lg);
    border-bottom: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 18px 44px rgba(46, 5, 11, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* A soft light reflection across the banner (the "glass" shine) */
.welcome-banner::before,
.become-vendor::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.14) 0%, transparent 40%);
    pointer-events: none;
}

.countdown {
    border-radius: var(--radius);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.page-hero {
    border-bottom: 0;
    box-shadow: 0 10px 30px rgba(46, 5, 11, 0.18);
}


/* ---------- 11. Homepage details ---------- */
.journey-step {
    border-radius: var(--radius);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dashboard-mock {
    border-radius: var(--radius-lg);
    background: rgba(32, 24, 21, 0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.dashboard-screen {
    border-radius: var(--radius);
}

.mock-module {
    border-radius: var(--radius-sm);
    background: rgba(238, 225, 210, 0.75);
}

.side-photo {
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px rgba(46, 5, 11, 0.18);
}


/* ---------- 12. Login and registration ---------- */
.auth-page {
    background:
        radial-gradient(circle at 15% 20%, rgba(104, 31, 46, 0.22), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(185, 150, 85, 0.30), transparent 42%),
        transparent;
}

.auth-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 30px 70px rgba(74, 10, 18, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.auth-brand {
    background: linear-gradient(160deg, rgba(125, 38, 56, 0.95) 0%, rgba(79, 22, 34, 0.95) 100%);
}


/* ---------- 13. Pop-up form and messages ---------- */
.inquiry-box {
    border-radius: var(--radius-lg);
    background: rgba(251, 248, 243, 0.86);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 30px 80px rgba(46, 5, 11, 0.3);
}

.modal-backdrop.show {
    opacity: 0.35;
}

.alert {
    border-radius: var(--radius);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(74, 10, 18, 0.08);
}


/* ---------- 14. Small pieces ---------- */
.progress,
.furahia-progress {
    border-radius: var(--radius-sm);
    background: rgba(238, 225, 210, 0.7);
}

.furahia-progress .progress-bar {
    border-radius: var(--radius-sm);
}

.furahia-pager .pagination a {
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.venue-carousel,
.venue-carousel .carousel-inner {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.venue-thumbs button {
    border-radius: var(--radius-xs);
}

.cover-preview,
.admin-gallery-item img {
    border-radius: var(--radius-sm);
}

.admin-thumb {
    border-radius: var(--radius-xs);
}

.request-reply {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(255, 255, 255, 0.55);
}

.checkin-result {
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.checkin-result li {
    border-radius: var(--radius-sm);
}

#reader {
    border-radius: var(--radius);
    overflow: hidden;
}

#reader button {
    border-radius: var(--radius-sm);
}

.invitation-row {
    border-radius: var(--radius);
}

.invitation-row-link:hover {
    background: rgba(255, 255, 255, 0.5);
}

.theme-option,
.type-option {
    border-radius: var(--radius-sm);
}

.theme-swatch {
    border-radius: var(--radius-xs);
}


/* ---------- 15. Guest invitation pages ---------- */
/* The invitation card becomes frosted glass on top of the chosen design */
.invite-theme-wine     { --inv-card: rgba(255, 253, 248, 0.84); }
.invite-theme-ivory    { --inv-card: rgba(255, 255, 255, 0.70); }
.invite-theme-midnight { --inv-card: rgba(27, 31, 46, 0.72); }

.invite-card {
    border-radius: var(--radius-lg);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.invite-rsvp .form-control,
.invite-rsvp .form-select,
.rsvp-choice label,
.pass-facts li,
.invite-note {
    border-radius: var(--radius-sm);
}

/* In the invitation, the boxes keep the colours of the chosen design */
.invite-rsvp .form-control,
.invite-rsvp .form-select {
    background-color: rgba(255, 255, 255, 0.08);
}

.invite-theme-wine .invite-rsvp .form-control,
.invite-theme-wine .invite-rsvp .form-select,
.invite-theme-ivory .invite-rsvp .form-control,
.invite-theme-ivory .invite-rsvp .form-select {
    background-color: rgba(255, 255, 255, 0.6);
}

.pass-qr {
    border-radius: var(--radius);
}


/* ---------- 16. Safety: devices without blur, or users who want less transparency ---------- */

/* Older browsers that can't blur: use almost solid boxes so text stays easy to read */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app-panel,
    .furahia-card,
    .stat-card,
    .photo-card,
    .event-card,
    .auth-card,
    .venue-contact-box,
    .dropdown-menu,
    .inquiry-box {
        background: rgba(255, 255, 255, 0.95);
    }

    .app-sidebar {
        background-color: var(--wine-dark) !important;
    }
}

/* People who switched on "reduce transparency" on their device */
@media (prefers-reduced-transparency: reduce) {
    .app-panel,
    .furahia-card,
    .stat-card,
    .photo-card,
    .event-card,
    .auth-card,
    .venue-contact-box,
    .dropdown-menu,
    .inquiry-box,
    .app-topbar,
    .furahia-nav {
        background: #ffffff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}