/* ==========================================
   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;

    --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;
}

.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. */
html.mobile-app .top-navigation {
    padding-top: max(var(--app-safe-top, 0px), env(safe-area-inset-top, 0px)) !important;
}

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: 1rem;
    align-items: center;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    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);
}

.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;
}

.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;
}

.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 > * {
    max-width: 100%;
}

/* 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;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: #fff;
    color: #1f1f1f;
    font: inherit;
    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);
}

.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;
}

.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;
}