/* ==========================================
   Pray Digital - Modern UI Styles
   ========================================== */

/* CSS Variables for Theming */
:root {
    --primary-color: #f5a623;
    --primary-dark: #d68910;
    --primary-light: #fef5e7;
    --secondary-color: #1a7f64;
    --accent-color: #2980b9;

    /* The status-bar strip in the app (see html.mobile-app .top-navigation). A shade of the header so the
       strip reads as part of the app without being the header itself; white status icons sit on it. */
    --app-status-bar-color: #c07a12;

    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-light: #bdc3c7;

    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #ecf0f1;

    --border-color: #e1e8ed;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;

    --transition: all 0.3s ease;
}

/* Address search loading */
.search-box-container {
    position: relative;
}

.clear-button {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Address suggestions drawn by places-autocomplete.js (Places API New). The list is a child of the
   body so a panel's overflow cannot clip it; places-autocomplete.js positions it from its input. */
.pd-suggestions {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.pd-suggestion {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: var(--text-primary);
    cursor: pointer;
}

.pd-suggestion + .pd-suggestion {
    border-top: 1px solid var(--border-color);
}

.pd-suggestion:hover,
.pd-suggestion-active {
    background: rgba(0, 0, 0, 0.05);
}

.pd-suggestion-main {
    font-weight: 600;
}

.pd-suggestion-secondary {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pd-suggestion-attribution {
    padding: 0.35rem 0.9rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: right;
    border-top: 1px solid var(--border-color);
}

.location-loading {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.location-loading .location-message {
    margin: 0;
    color: var(--text-secondary);
}

.search-results {
    max-height: none;
    /* allow page scroll instead of inner scroll */
    overflow: visible;
}

/* ==========================================
   Search Tabs
   ========================================== */
.search-tabs-container .tab-panel {
    display: none;
}

.search-tabs-container .tab-panel.active {
    display: block;
}

.search-tabs-container .tabs-header .tab-button {
    cursor: pointer;
}

.search-tabs-container .tabs-header .tab-button.active {
    background: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
}

/* ==========================================
   Global Styles
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    /* The fixed navigation's real height, measured by site.js. A hard-coded 76px never matched it on a
       phone (the bar is shorter there), which is why the page started with a band of empty space. */
    padding-top: var(--nav-height, 76px);
}

.content-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Match top nav container horizontal padding so left/right content aligns with navigation */
    padding: 2rem 1.5rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0));
}

/* User content container to align with nav brand */
.user-content-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-top: 76px;
    align-items: flex-start;
    /* Ensure top alignment of sidebar and content */
}

.user-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 2.5rem;
    align-items: flex-start;
    /* Ensure top alignment of sidebar and content */
}

.user-sidebar {
    margin-top: 60px;
    width: 300px;
    background: #f5f6fa;
    color: #232946;
    padding: 2rem 1.25rem 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 18px;
    box-shadow: 0 4px 18px 0 rgba(44, 62, 80, 0.07);
    min-height: 400px;
    margin-bottom: 2.5rem;
    border: 1px solid #e6e8ec;
    gap: 0;
}

.sidebar-header {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    color: #7f8c8d;
    width: 100%;
    text-align: left;
}

.user-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-sidebar li {
    width: 100%;
}

.sidebar-link {
    display: block;
    width: 100%;
    padding: 0.75rem 1.1rem;
    color: #232946;
    text-decoration: none;
    font-size: 1.05rem;
    white-space: nowrap;
    border-radius: 999px;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    position: relative;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.sidebar-link.active,
.sidebar-link:hover {
    background: linear-gradient(90deg, #eebbc3 0%, #b8c1ec 100%);
    color: #232946;
    box-shadow: 0 2px 8px 0 rgba(238, 187, 195, 0.08);
    text-shadow: 0 1px 2px #fff2;
}

.user-main {
    flex: 1 1 auto;
    min-height: 0;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 0;
}

.user-main-card {
    /* Matches the side padding: without a top inset the card's first heading sits against its edge. */
    padding: 2rem 2rem 2.5rem 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    margin-bottom: 2.5rem;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 900px) {
    .user-layout {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }

    .user-sidebar {
        width: 100%;
        margin: 1.5rem 0 0 0;
        border-radius: 1.5rem;
        min-height: unset;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 1.2rem 0.5rem;
    }

    .user-main {
        margin-top: 1.5rem;
        padding: 2rem 0.5rem 1.5rem 0.5rem;
    }
}

/* Remove .form-card styles so only .user-main-card provides background, border-radius, and shadow */
.form-card {
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* ==========================================
   Top Navigation
   ========================================== */

/* Top Navigation - Base positioning without extra padding */
.top-navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    padding-top: 0;
}

/* Explicit NO padding for desktop browsers - applies at ALL screen widths */
html.desktop-browser .top-navigation {
    padding-top: 0 !important;
}

html.desktop-browser .main-content {
    padding-top: var(--nav-height, 76px) !important;
}

html.desktop-browser .mobile-menu {
    top: calc(56px + 2rem) !important;
}

/* Add padding for mobile apps (Android/iOS MAUI WebView). The status-bar height is not the same on
   every device, so the app measures it and passes it in --app-safe-top; env() still covers iOS
   cutouts. See PrayDigital.App.Maui/wwwroot/js/host-bridge.js. */
/* The status-bar strip in the app. Android 15+ draws the app edge-to-edge and the system status bar is
   transparent, so whatever is behind it is what the person sees as "the status bar" — here the top of the
   fixed nav. Painting the strip separately gives it a colour of its own instead of borrowing the header's,
   and the band is exactly the safe-area height the host measured. */
html.mobile-app .top-navigation {
    padding-top: max(var(--app-safe-top, 0px), env(safe-area-inset-top, 0px)) !important;
    background-image: linear-gradient(var(--app-status-bar-color), var(--app-status-bar-color));
    background-repeat: no-repeat;
    background-position: top;
    background-origin: border-box;
    background-clip: border-box;
    background-size: 100% max(var(--app-safe-top, 0px), env(safe-area-inset-top, 0px));
}

/* The app is a phone experience: a folded phone, an unfolded one and a foldable's wide inner screen all get
   one card per row. The width rule itself lives in site.css (it applies to the website too). */

html.mobile-app .main-content {
    padding-top: var(--nav-height, 76px) !important;
}

html.mobile-app .mobile-menu {
    top: calc(56px + 2rem + max(var(--app-safe-top, 0px), env(safe-area-inset-top, 0px))) !important;
}

/* The bottom inset the app measures (Android draws edge-to-edge, so the navigation bar covered the
   footer's own links). env() only helps where the viewport opts into it, which the WebView does not. */
html.mobile-app .app-footer {
    padding-bottom: calc(2rem + max(var(--app-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)));
}

html.mobile-app .content-wrapper {
    padding-bottom: calc(2rem + max(var(--app-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)));
}

/* Add padding for real mobile devices (mobile browsers) */
html.mobile-device .top-navigation {
    padding-top: max(44px, env(safe-area-inset-top, 0)) !important;
}

html.mobile-device .main-content {
    padding-top: var(--nav-height, 76px) !important;
}

html.mobile-device .mobile-menu {
    top: calc(56px + 2rem + max(44px, env(safe-area-inset-top, 0))) !important;
}

/* iOS devices with notch/dynamic island - use safe area for any non-desktop */
@supports (padding-top: env(safe-area-inset-top)) {
    html:not(.desktop-browser) .top-navigation {
        padding-top: env(safe-area-inset-top, 0);
    }

    html:not(.desktop-browser) .main-content {
        padding-top: var(--nav-height, 76px);
    }
}

/* PWA/Standalone apps on mobile - ensure padding */
@media (max-width: 768px) and (display-mode: standalone) {
    html:not(.desktop-browser) .top-navigation {
        padding-top: max(20px, env(safe-area-inset-top, 0)) !important;
    }

    html:not(.desktop-browser) .main-content {
        padding-top: var(--nav-height, 76px) !important;
    }
}

/* ==========================================
   Navigation Styles
   ========================================== */

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    text-decoration: none;
}

.nav-brand:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.brand-icon {
    font-size: 2rem;
}

.brand-text {
    font-size: 1.5rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.nav-menu {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    /* The bar keeps to one line: a link whose label breaks reads as two links, which is what happened once an
       account name and Sign Out joined it. Labels below are nowrap, so the row itself never folds. */
    flex-wrap: nowrap;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.05rem;
    color: white;
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

/* The account link carries a name of unknown length; it may shrink rather than push the bar wider. */
.nav-link-account {
    min-width: 0;
}

.nav-link-account .nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
}


.nav-link:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.nav-link.active {
    background: white;
    color: var(--primary-color);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

.nav-icon {
    font-size: 1.25rem;
}

.nav-text {
    font-size: 1rem;
    white-space: nowrap;
}

/* Six items with an account name need a little less air than five did, before the bar drops to the burger at
   992px. Tightened here rather than at the item level so every label keeps the same weight. */
@media (max-width: 1200px) and (min-width: 992px) {
    .nav-menu {
        gap: 0.5rem;
    }

    .nav-link {
        padding: 0.65rem 0.8rem;
    }

    .nav-text {
        font-size: 0.92rem;
    }
}


.mobile-menu-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    color: white;
    padding: 0.5rem 0.75rem;
    transition: var(--transition);
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
}

.hamburger-icon {
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    line-height: 1;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: calc(56px + 2rem);
    left: 0;
    right: 0;
    background: var(--primary-dark);
    box-shadow: var(--shadow-md);
    padding: 1rem;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 999;
}

/* iOS devices with safe area support - consistent with top-navigation */
@supports (padding-top: max(0px, env(safe-area-inset-top))) {
    .mobile-menu {
        top: calc(56px + 2rem + env(safe-area-inset-top, 0));
    }
}

/* For actual mobile apps (not browsers) */
@media (max-width: 768px) and (display-mode: standalone) {
    .mobile-menu {
        top: calc(56px + 2rem + max(20px, env(safe-area-inset-top, 0)));
    }
}

.mobile-menu.show {
    display: flex;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(5px);
}

/* ==========================================
   Hero Section
   ========================================== */

/* ==========================================
   Search Tabs Component
   ========================================== */

.search-tabs-container {
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 3rem;
    overflow: hidden;
}

.tabs-header {
    display: flex;
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-color);
}

.tab-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 2rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.tab-button:hover {
    background: rgba(245, 166, 35, 0.1);
    color: var(--primary-color);
}

.tab-button.active {
    background: var(--bg-primary);
    color: var(--primary-color);
}

.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-color);
}

.tab-icon {
    font-size: 1.5rem;
}

.tabs-content {
    padding: 2rem;
}

.tab-panel {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-box-container {
    position: relative;
    margin-bottom: 1rem;
}

.search-input {
    width: 100%;
    padding: 1rem 3rem 1rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 1.125rem;
    font-family: inherit;
    transition: var(--transition);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.clear-button {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-light);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 1.125rem;
    transition: var(--transition);
}

.clear-button:hover {
    background: var(--text-secondary);
    transform: translateY(-50%) scale(1.1);
}

.search-results {
    /* Unified results style: remove boxed scrolling and let results flow with page */
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 auto 1rem;
    width: 100%;
    max-width: 1200px;
    /* align with nearest-places and address results */
    box-sizing: border-box;
}

/* Address results should expand with page scroll rather than having inner scroll */
.address-results {
    /* Remove boxed styling and let results flow into page (no inner scroll)
       Make the address results align with the nearest mosques section */
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 1.5rem auto 0 !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    /* align with nearest-places-section */
}

.search-results.loading,
.search-results.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    min-height: 200px;
}

.search-results.empty {
    color: var(--text-secondary);
}

.loading-spinner-small {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.search-hint {
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.country-group {
    border-bottom: 1px solid var(--border-color);
}

.country-group:last-child {
    border-bottom: none;
}

.country-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--primary-light);
    font-weight: 700;
    color: var(--primary-dark);
    position: sticky;
    top: 0;
    z-index: 10;
}

.country-flag {
    font-size: 1.5rem;
}

.country-name {
    flex: 1;
    font-size: 1.125rem;
}

.country-count {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.places-list {
    background: var(--bg-primary);
}

.place-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}

.place-item:last-child {
    border-bottom: none;
}

.place-item:hover {
    background: var(--bg-secondary);
    padding-left: 1.5rem;
}

.place-info {
    flex: 1;
}

.place-name {
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.place-other-names {
    font-size: 0.875rem;
    color: var(--accent-color);
    margin-bottom: 0.25rem;
    font-style: italic;
}

.place-address {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.place-arrow {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-left: 1rem;
    transition: var(--transition);
}

.place-item:hover .place-arrow {
    transform: translateX(5px);
}

/* ==========================================
   Hero Section (Original)
   ========================================== */

.hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-primary) 100%);
    border-radius: var(--border-radius-lg);
    padding: 4rem;
    margin-bottom: 3rem;
}

/* The featured-mosque carousel owns its own styles in BannerCarousel.razor. There used to be a second
   set here under the same class names, and the two disagreed about the slide height (a fixed 500px
   image inside an aspect-ratio slide), which cropped the banner and left a white gap under it on
   narrow screens. One owner, one rule. */
.carousel-loading,
.carousel-empty,
.carousel-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-lg);
    min-height: 300px;
}

.carousel-error {
    background: #fff3cd;
    border: 2px solid #ffc107;
}

.carousel-error p {
    color: #856404;
    font-size: 1.125rem;
    margin: 0 0 1rem 0;
    text-align: center;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.carousel-loading p,
.carousel-empty p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    margin: 0;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.hero-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mosque-illustration {
    font-size: 15rem;
    opacity: 0.9;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* ==========================================
   Features Section
   ========================================== */

.features-section,
.capabilities-section {
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--bg-primary);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    text-align: center;
    border: 2px solid transparent;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.feature-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: block;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-description {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

/* ==========================================
   Capabilities Grid
   ========================================== */

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.capability-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.capability-item:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

.capability-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.capability-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ==========================================
   Page Header
   ========================================== */

.page-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem 0;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.page-icon {
    font-size: 3rem;
}

.page-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

/* ==========================================
   Content Cards
   ========================================== */

.content-card {
    background: var(--bg-primary);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

/* ==========================================
   Forms
   ========================================== */

.mosque-form,
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.form-input,
.form-textarea {
    padding: 0.875rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* ==========================================
   Buttons
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    font-family: inherit;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--border-color);
    transform: translateY(-2px);
}

.btn-large {
    padding: 1.125rem 2.25rem;
    font-size: 1.125rem;
}

.btn-icon {
    font-size: 1.25rem;
}

/* ==========================================
   Contact Page
   ========================================== */

.contact-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card {
    background: var(--bg-primary);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.info-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.info-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--primary-color);
}

.info-text {
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.info-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.social-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.social-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.contact-form-card {
    padding: 2.5rem;
}

.form-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

/* A second form inside the same card (the profile page's change-password section). The divider is what
   separates the two without another card. */
.form-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 2rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* ==========================================
   Messages
   ========================================== */

.success-message {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border: 2px solid #28a745;
    border-radius: var(--border-radius-sm);
    margin-top: 1.5rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.15);
    animation: slideIn 0.3s ease-out;
}

.success-icon {
    font-size: 1.5rem;
    background: #28a745;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.error-message {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    border: 2px solid #dc3545;
    border-radius: var(--border-radius-sm);
    margin-top: 1.5rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
    animation: slideIn 0.3s ease-out;
}

.error-icon {
    font-size: 1.5rem;
    background: #dc3545;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.validation-summary {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
    padding: 1rem 1.5rem;
    border: 2px solid #dc3545;
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Scripts reveal one of the two message styles on an element that starts life as a validation summary
   (the shared profile page does). Without this the summary's red wins on equal specificity and a success
   reads as a failure. */
.validation-summary.success-message {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-color: #28a745;
}

/* The contact form reveals these two from script; both carry layout rules of their own, so the
   `hidden` attribute needs help to win (`.success-message` is display:flex). */
.success-message[hidden],
.error-message[hidden],
.validation-summary[hidden] {
    display: none;
}

/* Slide in animation for messages */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   Footer
   ========================================== */

.app-footer {
    background: var(--text-primary);
    color: white;
    padding: 2rem 0;
    margin-top: 4rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.footer-content p {
    margin: 0.5rem 0;
}

.footer-tagline {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* ==========================================
   Responsive Design
   ========================================== */

@media (max-width: 992px) {
    .nav-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .nav-brand {
        flex: 1;
    }

    .brand-text {
        display: block !important;
    }

    .hero-section {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-image {
        order: -1;
    }

    .mosque-illustration {
        font-size: 10rem;
    }

    .hero-title {
        font-size: 2.25rem;
    }

    .hero-actions {
        justify-content: center;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    /* Search tabs responsive */
    .tab-button {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .tab-icon {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .content-wrapper {
        padding: 1.5rem 1rem;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .nav-brand {
        font-size: 1.25rem;
    }

    .brand-text {
        font-size: 1.25rem;
    }
    .hero-section {
        padding: 2rem;
    }

    .hero-title {
        font-size: 1.875rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .mosque-illustration {
        font-size: 8rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2rem;
    }

    .page-title {
        font-size: 2rem;
        flex-direction: column;
    }

    /* Search tabs responsive */
    .tabs-content {
        padding: 1.5rem;
    }

    .search-input {
        font-size: 1rem;
        padding: 0.875rem 2.5rem 0.875rem 1rem;
    }

    .country-header {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }

    .country-flag {
        font-size: 1.25rem;
    }

    .place-item {
        padding: 0.875rem 1rem;
    }

    .place-name {
        font-size: 0.9375rem;
    }
}

/* ==========================================
   Nearest Mosques Section
   ========================================== */

.nearest-places-section {
    /* Align with search-box-container: remove extra horizontal padding so grid lines up with input */
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0;
    /* no horizontal padding */
    box-sizing: border-box;
}

.section-heading {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.heading-icon {
    font-size: 2rem;
    color: var(--primary-color);
}

/* Location States */
.location-prompt,
.location-loading,
.location-error,
.location-message-box {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.location-icon,
.error-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.location-icon {
    color: var(--primary-color);
}

.error-icon {
    color: #e74c3c;
}

.location-message,
.error-message {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.location-button,
.retry-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.875rem 1.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.location-button:hover,
.retry-button:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.location-button:active,
.retry-button:active {
    transform: translateY(0);
}
.button-icon {
    font-size: 1.25rem;
}

/* The schedule editor's time picker only hides itself through its own stylesheet (`.mdtimepicker.hidden`). That
   stylesheet is now served by the app rather than a CDN, and this rule is the belt to its braces: if it is ever
   missing or still loading, the widget's hour and minute wheels, AM/PM and Cancel/Ok would otherwise appear as
   plain text at the bottom of the page. It mirrors the library's rule exactly, so the picker still opens normally
   — the library removes `hidden` to show it. */
.mdtimepicker.hidden {
    display: none;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Mosques Grid */
.mosques-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* two cards per row */
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Collapse to single-column earlier for better responsiveness */
@media (max-width: 768px) {
    .mosques-grid {
        grid-template-columns: 1fr;
        /* single column on smaller devices */
    }
}

/* Mosque Card */
.place-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.place-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.place-card-image,
.place-card-placeholder {
    width: 100%;
    height: 260px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-tertiary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.place-card-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.place-card-placeholder span {
    font-size: 4rem;
    opacity: 0.3;
}

.place-card-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.place-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.place-card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.place-card-title a:hover {
    color: var(--primary-color);
}

.place-card-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

.place-card-address {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

.address-icon,
.distance-icon,
.schedule-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.address-link {
    color: var(--accent-color);
    text-decoration: none;
    transition: var(--transition);
    line-height: 1.4;
}

.address-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.place-card-distance {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.place-card-schedule {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.schedule-header {
    margin-bottom: 0.75rem;
}

.schedule-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.schedule-times {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
}

.prayer-name {
    color: var(--text-secondary);
    font-weight: 500;
}

.prayer-time {
    color: var(--text-primary);
    font-weight: 700;
}

.place-card-badge {
    align-self: flex-start;
    background: linear-gradient(135deg, var(--secondary-color), #15b589);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
}

/* Responsive Design for Nearest Mosques */
@media (max-width: 768px) {
    .nearest-places-section {
        padding: 0 1rem;
        margin: 1.5rem auto;
    }

    .section-heading {
        font-size: 1.5rem;
    }

    .heading-icon {
        font-size: 1.5rem;
    }

    .mosques-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .location-prompt,
    .location-loading,
    .location-error {
        padding: 2rem 1.5rem;
    }

    .location-icon,
    .error-icon {
        font-size: 3rem;
    }

    .location-message,
    .error-message {
        font-size: 1rem;
    }
}

.approval-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.approval-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.approval-schedule-table,
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

/* The edit-schedule modal's "sign in to be told the outcome" strip. Two states: an invitation (buttons) and a
   quiet confirmation once the person is signed in. */
.modal-notify {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: #fff8e8;
    border-left: 4px solid #f5a623;
}

.modal-notify-text {
    margin: 0 0 0.6rem;
    color: #4a3b1c;
    font-size: 0.95rem;
}

.modal-notify-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.modal-notify-btn {
    padding: 0.45rem 1.1rem;
    font-size: 0.95rem;
}

.modal-notify-dismiss {
    background: none;
    border: 0;
    padding: 0.25rem 0;
    color: #6b7280;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.modal-notify-ok {
    background: #f1f8f1;
    border-left-color: #2c5f2d;
    color: #2c5f2d;
    font-size: 0.95rem;
}

/* Who submitted the change and will be emailed the decision, under the submitted date. */
.approval-submitter {
    margin-top: -0.25rem;
    margin-bottom: 0.75rem;
    color: #2c5f2d;
    font-size: 0.9rem;
}

/* The anonymous case: still worth saying, so "no email was sent" does not read as a bug. */
.approval-submitter-anonymous {
    color: #6b7280;
    font-style: italic;
}

.approval-schedule-table th,
.users-table th {
    text-align: left;
    padding: 0.5rem 0.35rem;
    background: #f5f6fa;
    color: #2c5f2d;
    font-weight: 600;
    border-bottom: 1px solid #e6e8ec;
}

.approval-schedule-table td,
.users-table td {
    padding: 0.45rem 0.35rem;
    border-bottom: 1px solid #eef1f4;
}

.approval-schedule-table .schedule-different-row td {
    background: #fff4d6;
    font-weight: 600;
}

/* Manage Users (administrators) */
.users-summary {
    color: #666;
    font-size: 0.9rem;
}

.users-table-actions-heading,
.users-table-actions {
    text-align: right;
}

.users-table-actions form {
    display: inline-block;
    margin-left: 0.5rem;
}

.users-table-actions .btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.users-table-note {
    color: #888;
    font-size: 0.85rem;
}

.status-pill {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-pill-ok {
    background: #e3f5e3;
    color: #2c5f2d;
}

.status-pill-pending {
    background: #fff4d6;
    color: #8a6100;
}

.status-pill-admin {
    background: #e6efff;
    color: #1f4b99;
}

.btn-danger {
    background: #c62828;
    color: #fff;
}

.btn-danger:hover {
    background: #a71d1d;
    transform: translateY(-2px);
}

/* "Signing you in…" while the Google button's form is submitting. */
.google-signin-busy {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ---- Sign in / sign up layout ----

   One primary action per form, then the provider option, then the quieter ways out. Buttons that used to sit
   side by side each carried their own width, which is what made the card look untidy once the Google button
   joined them. */

.form-actions-stacked {
    display: block;
    margin-top: 1.5rem;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.social-signin {
    margin-top: 1.75rem;
}

/* "or sign in with" with the rule running through it. */
.social-signin-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.social-signin-divider::before,
.social-signin-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-color);
}

.social-signin-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.social-signin-buttons > * {
    /* One width for the whole stack. Google's button is an iframe it sizes itself, so a host that was narrower
       than the buttons beside it made the column look ragged; every provider gets the same 320px column. */
    width: 100%;
    max-width: 320px;
}

/* Google renders its own button into this element; centring it keeps the iframe's 320px inside the column
   rather than letting it sit at the container's left edge. */
#google-signin {
    display: flex;
    justify-content: center;
}

/* The app's provider button. Google's own GIS button is an iframe the website loads; a native host draws its
   own, so it has to look like the thing people recognise: white, bordered, dark text, the mark on the left. */
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 320px;
    /* Google's own button is an iframe 44px tall with 4px corners, and neither can be changed from here, so this
       matches it instead — a 50px button with an 8px radius beside it read as a different, unaligned control. */
    height: 44px;
    padding: 0 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
    color: #1f1f1f;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-google:hover:not(:disabled) {
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px rgba(60, 64, 67, 0.15);
}

/* Facebook's button is a link to our own endpoint — the flow is a server redirect, so there is no script to
   hand a credential to — and it has to look and click like the other two. */
.btn-facebook {
    text-decoration: none;
}

.btn-facebook:hover {
    background: #f7f8fa;
    text-decoration: none;
}

.btn-google:disabled {
    cursor: default;
    opacity: 0.75;
}

.google-mark {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.google-signin-error {
    margin: 0.9rem 0 0;
    color: var(--danger-color, #b3261e);
    font-size: 0.9rem;
}

/* The quiet links under the card: one per line, so three of them do not wrap into a jumble. */
.signin-links {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.signin-links li {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Linked accounts on the profile page. */
.linked-accounts {
    list-style: none;
    margin: 0.5rem 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.linked-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-tertiary);
}

.linked-account-name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--text-primary);
}

.linked-account-icon {
    font-size: 1.1rem;
}

.linked-account-state {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.linked-account .btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.google-signin-busy-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: google-signin-spin 0.8s linear infinite;
}

@keyframes google-signin-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .google-signin-busy-spinner {
        animation: none;
    }
}

.mdtp__digit.minute-step-disabled {
    opacity: 0.18;
}

.mdtp__digit.minute-step-disabled span {
    pointer-events: none !important;
    cursor: default !important;
}
/* The in-page confirm/alert box (js/dialog.js). It replaces window.confirm, which titles itself with the
   page origin — in the packaged app that reads "0.0.0.1 says", which looks like a foreign site asking. */
.pd-dialog-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(17, 24, 39, 0.45);
    z-index: 4000;
}

.pd-dialog {
    width: 100%;
    max-width: 26rem;
    padding: 1.35rem 1.4rem 1.1rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
}

.pd-dialog-message {
    margin: 0 0 1.15rem;
    color: #1f2937;
    font-size: 1rem;
    line-height: 1.5;
}

.pd-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.pd-dialog-actions .btn {
    min-width: 6rem;
}

@media (max-width: 420px) {
    .pd-dialog-actions {
        flex-direction: column-reverse;
    }

    .pd-dialog-actions .btn {
        width: 100%;
    }
}

/* Follow-the-mosque bell (FollowMosqueButton.razor) and the notifications page. Kept here so both hosts
   share one copy, like the rest of the signed-in chrome. */
.follow-mosque {
    margin: 0.25rem 0 1rem;
}

.follow-mosque-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #d4d9e0;
    background: #fff;
    color: #2c3e50;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
}

.follow-mosque-button:hover {
    border-color: var(--primary-color, #f39c12);
    color: var(--primary-color, #f39c12);
}

.follow-mosque-button.following {
    background: var(--primary-color, #f39c12);
    border-color: var(--primary-color, #f39c12);
    color: #fff;
}

.follow-mosque-button:disabled {
    opacity: 0.65;
    cursor: default;
}

.follow-mosque-icon {
    font-size: 1.05rem;
    line-height: 1;
}

/* Second step of an administrator's sign-in (SignInPage.razor), shown in place of the password form once
   the API has accepted the password. Both hosts render it, so it lives here with the rest of the shared
   signed-in chrome. */
.two-factor-panel {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e6e9ee;
}

.two-factor-hint {
    color: #5b6b7c;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 0.85rem;
}

.two-factor-qr {
    display: block;
    width: 200px;
    height: 200px;
    max-width: 100%;
    margin: 0 auto 1rem;
    image-rendering: pixelated;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    padding: 8px;
}

.two-factor-secret {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: #f5f7fa;
    border: 1px solid #e6e9ee;
    border-radius: 6px;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    word-break: break-all;
}

.two-factor-recovery-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.4rem 0.9rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: #f5f7fa;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
}

.follow-mosque-hint {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.sidebar-badge {
    display: inline-block;
    min-width: 1.35rem;
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--primary-color, #f39c12);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.35rem;
}

.notifications-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.75rem 0 0.75rem;
    font-size: 1.15rem;
}

.notifications-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.6rem 0;
    cursor: pointer;
}

.notifications-toggle input {
    margin-top: 0.2rem;
}

.notifications-toggle-hint {
    display: block;
    font-size: 0.85rem;
    color: #6b7280;
}

.notifications-table {
    width: 100%;
    border-collapse: collapse;
}

.notifications-table th,
.notifications-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.notifications-table th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
}

.notifications-channel-column {
    width: 5.5rem;
    text-align: center !important;
}

.notifications-actions-column {
    width: 8rem;
    text-align: right !important;
}

.notifications-place-link {
    font-weight: 600;
    color: #2c3e50;
}

.notifications-unfollow {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

.notifications-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notifications-feed-item {
    border-bottom: 1px solid #e5e7eb;
}

.notifications-feed-item.unread {
    background: #fffaf0;
}

.notifications-feed-link {
    display: block;
    padding: 0.7rem 0.5rem;
    color: inherit;
    text-decoration: none;
}

.notifications-feed-title {
    display: block;
    font-weight: 600;
}

.notifications-feed-body {
    display: block;
    font-size: 0.9rem;
    color: #4b5563;
}

.notifications-feed-when {
    display: block;
    font-size: 0.8rem;
    color: #9ca3af;
}

.notifications-link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--primary-color, #f39c12);
    font-size: 0.9rem;
    cursor: pointer;
}

.notifications-link-button:hover {
    text-decoration: underline;
}

.follow-mosque-hint a {
    color: var(--primary-color, #f39c12);
    font-weight: 600;
}

.follow-mosque-hint-error {
    color: #b91c1c;
}

/* ---- Feature requests -----------------------------------------------------------------------------
   The board and the administrator's queue. One card per idea: the votes on the left, the idea and its
   state on the right. The state colours are the only place the four words become something visible, so
   they live together. */

.feature-requests {
    max-width: 860px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.feature-requests-card {
    padding: 2rem;
}

.feature-request-intro {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.feature-request-form {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
}

.feature-request-signin {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.feature-request-signin a {
    color: var(--primary-dark);
    font-weight: 600;
}

.feature-request-board {
    padding-top: 1.5rem;
}

.feature-request-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.feature-request-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: #fff;
}

.feature-request-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.feature-request-vote:hover:not(:disabled) {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.feature-request-vote.voted {
    border-color: var(--primary-color);
    background: var(--primary-light);
    color: var(--primary-dark);
}

.feature-request-vote:disabled {
    cursor: default;
    opacity: 0.7;
}

.feature-request-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 0.4rem 0.5rem;
    color: var(--text-secondary);
}

.feature-request-vote .vote-count,
.feature-request-votes .vote-count {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
}

.feature-request-vote .vote-label,
.feature-request-votes .vote-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.feature-request-body {
    flex: 1 1 auto;
    min-width: 0;
}

.feature-request-title {
    margin: 0 0 0.25rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-primary);
}

.feature-request-description {
    margin: 0 0 0.6rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    white-space: pre-line;
}

.feature-request-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.feature-request-asker,
.feature-request-date {
    color: var(--text-light);
}

.feature-request-note {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--primary-dark);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.status-pill.status-planned {
    background: #e8f0fb;
    color: #1f5fa9;
}

.status-pill.status-inprogress {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.status-pill.status-released {
    background: #e6f6ef;
    color: var(--secondary-color);
}

.status-pill.status-declined {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.status-pill.status-pending {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.manage-request-list .feature-request-item {
    flex-wrap: wrap;
}

.manage-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border-color);
}

.manage-request-action {
    font-size: 0.82rem;
    padding: 0.35rem 0.8rem;
}

.manage-request-action.active {
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

@media (max-width: 640px) {
    .feature-requests-card {
        padding: 1.25rem;
    }

    .feature-request-item {
        flex-direction: column;
    }

    .feature-request-vote,
    .feature-request-votes {
        flex-direction: row;
        gap: 0.4rem;
        align-self: flex-start;
    }
}

/* ---- The board, and the popup that asks for a new idea ------------------------------------------- */

.feature-request-intro-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.feature-request-intro-row .form-hint {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .feature-request-intro-row .btn {
        width: 100%;
    }
}
/* The popup reuses the confirm-dialog overlay for the dimmed background, so it looks like the other
   in-page prompts. Its own `hidden` rule is needed because the overlay's display:flex would beat [hidden]. */
body.feature-modal-open {
    overflow: hidden;
}

.feature-modal-overlay[hidden] {
    display: none;
}

.feature-modal-panel {
    position: relative;
    width: 100%;
    max-width: 34rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.6rem 1.6rem 1.2rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
}

.feature-modal-close {
    position: absolute;
    top: 0.55rem;
    right: 0.65rem;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.feature-modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.feature-modal-form {
    padding: 0.5rem 0 0;
    border-bottom: 0;
}

.feature-modal-form .form-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .feature-modal-panel {
        padding: 1.4rem 1.1rem 1rem;
    }

    .feature-modal-form .form-actions .btn {
        width: 100%;
    }
}

/* Who asks and who votes, under the administrator's queue. */
.feature-stats {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.feature-stats-title {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.feature-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
}

.feature-stats-grid h4 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.feature-stats-list {
    margin: 0;
    padding-left: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.92rem;
}

.feature-stats-list li {
    color: var(--text-primary);
}

.feature-stats-name {
    font-weight: 600;
}

.feature-stats-detail {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-left: 0.35rem;
}

.feature-stats-count {
    float: right;
    font-weight: 700;
    color: var(--primary-dark);
}

.feature-stats-empty {
    color: var(--text-secondary);
    font-style: italic;
}