/* =========================
   ACTIVITIES DISPLAY (FINAL CLEAN)
========================= */
.mosque-view-switch {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.mosque-view-switch a {
    padding: 8px 14px;
    background: #f1f1f1;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
}

.mosque-view-switch a.active {
    background: #2271b1;
    color: #fff;
}

.event-only {
    display: none;
}
/* =========================
   PREMIUM CALENDAR (CLEAN)
========================= */

.mosque-calendar {
    max-width: 950px;
    margin: 40px auto;
    font-family: system-ui, sans-serif;
}

/* HEADER */
.calendar-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.calendar-header h3 {
    font-size:22px;
    font-weight:700;
}

.calendar-header button {
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    padding:6px 12px;
    cursor:pointer;
    transition:.2s;
}

.calendar-header button:hover {
    background:#f7963f;
    color:#fff;
    border-color:#f7963f;
}

/* WEEK LABELS */
.calendar-weekdays {
    display:grid;
    grid-template-columns: repeat(7,1fr);
    margin-bottom:8px;
    font-size:13px;
    font-weight:600;
    color:#666;
}

.calendar-weekdays div {
    text-align:center;
}

/* GRID */
.calendar-grid {
    display:grid;
    grid-template-columns: repeat(7,1fr);
    gap:8px;
}

/* DAY CELL */
.cal-cell {
    background:#fff;
    border-radius:10px;
    padding:10px;
    min-height:90px;
    position:relative;
    border:1px solid #eee;
    transition:.2s;
}

.cal-cell:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,0.08);
    cursor:pointer;
}

.cal-cell.empty {
    background:transparent;
    border:none;
    cursor:default;
}

.cal-cell span {
    font-weight:700;
    font-size:14px;
}

/* TODAY */
.cal-cell.today {
    background:linear-gradient(135deg,#fff7ed,#ffedd5);
    border:1px solid #fdba74;
}

/* WEEKEND */
.cal-cell.weekend {
    background:linear-gradient(135deg,#f8fafc,#eef2f7);
}

/* EVENTS */
.cal-cell.has-event::after {
    content:'';
    width:6px;
    height:6px;
    background:#f7963f;
    border-radius:50%;
    position:absolute;
    bottom:6px;
    left:6px;
}

.event-count {
    position:absolute;
    bottom:6px;
    right:6px;
    font-size:11px;
    background:#f7963f;
    color:#fff;
    padding:0 8px;
    border-radius:4px;
}

/* MODAL */
.calendar-modal {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    backdrop-filter:blur(4px);
}

.calendar-modal.active {
    display:flex;
}

.modal-content {
    background:#fff;
    border-radius:16px;
    padding:25px;
    width:95%;
    max-width:520px;
    max-height:85vh;
    overflow-y:auto;
    box-shadow:0 15px 40px rgba(0,0,0,0.2);
    animation:fadeIn .25s ease;
}

@keyframes fadeIn {
    from {opacity:0; transform:translateY(20px);}
    to {opacity:1; transform:translateY(0);}
}

/* EVENT CARD */
.event-item {
    border:1px solid #eee;
    border-radius:12px;
    padding:14px;
    margin-bottom:12px;
    background:#fafafa;
}

.event-title {
    font-weight:700;
    font-size:15px;
}

.event-time {
    font-size:13px;
    font-weight:600;
    margin:4px 0;
}

.event-meta {
    font-size:13px;
    color:#666;
}

.event-countdown {
    font-size:12px;
    color:#f7963f;
    font-weight:600;
}

.live-badge {
    background:#dc3232;
    color:#fff;
    font-size:10px;
    padding:2px 6px;
    border-radius:8px;
    margin-left:6px;
}
/* Hide Divi floating UI */
.et_pb_scroll_top,
.et-pb-icon {
    display: none !important;
}

/* ===== NEXT ACTIVITY ===== */
.mosque-card.next {
    background: #fff;
    border: 2px solid #ff9800;
    box-shadow: 0 0 0 2px rgba(255,152,0,0.15);
    position: relative;
}

.next-badge {
    background: #ff9800;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
    margin-top: 6px;
}

/* Pulse - screen only */
@media screen {
    .mosque-card.next::after {
        content: '';
        position: absolute;
        top: 12px;
        right: 12px;
        width: 8px;
        height: 8px;
        background: #ff9800;
        border-radius: 50%;
        animation: nextPulse 1.6s infinite;
    }
}

@keyframes nextPulse {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(1.6); opacity: 0; }
    100% { opacity: 0; }
}

/* ===== LIVE ===== */
.mosque-card.live {
    background: #fff;
    border: 2px solid #00a86b;
    box-shadow: 0 4px 10px rgba(0,168,107,0.15);
}

.live-badge {
    background: #00a86b;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
    margin-top: 6px;
}

/* ===== ROW (SCREEN) ===== */
.mosque-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 20px;
    align-items: stretch;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    margin-bottom: 10px;
}

.mosque-row.today {
    background: #e6f5ef;
    border: 4px solid #00a86b;
}

.mosque-row.odd { background: #f7f7f7; }
.mosque-row.even { background: #eeeeee; }

/* ===== DAY (SCREEN) ===== */
.mosque-day-col {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
}

/* ===== GRID (SCREEN) ===== */
.mosque-cards-col {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: stretch;
}

/* ===== CARD (SCREEN) ===== */
.mosque-card {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}

.mosque-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* ===== TIME ROW ===== */
.mosque-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.mosque-edit {
    font-size: 12px;
    text-decoration: none;
    opacity: 0.6;
    display: inline-block; /* important */
    transform: scaleX(-1);
    float: right;
    margin-top: -30px;
}

.mosque-card:hover .mosque-edit {
    opacity: 1;
}

.mosque-time-block {
    font-weight: 600;
    font-size: 14px;
    color: #0a7c4a;
}

/* ===== CONTENT ===== */
.mosque-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mosque-footer {
    margin-top: auto;
}

.mosque-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.mosque-location {
    font-size: 13px;
    color: #777;
    margin-bottom: 4px;
}

.mosque-person {
    font-size: 12px;
    color: #444;
    opacity: 0.85;
}

/* ===== PRINT BUTTON ===== */
.mosque-print-bar {
    text-align: right;
    margin-bottom: 10px;
}
/*
.mosque-print-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}
*/

.mosque-weekly {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.mosque-weekly .mosque-location {
    font-size: 12px;
    color: #777;
}
.mosque-day {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.mosque-day h3 {
	margin-bottom: 10px;
	color: #0a7c4a;
}

.mosque-item {
	margin-bottom: 10px;
	font-size: 14px;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
	.mosque-weekly {
		grid-template-columns: 1fr;
	}

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

    .mosque-cards-col {
        grid-template-columns: repeat(2, 1fr); /* 👈 half width */
        gap: 10px;
    }
}

/* very small screens */
@media (max-width: 480px) {

    .mosque-cards-col {
        grid-template-columns: 1fr; /* fallback */
    }
}

.mosque-activities {
    overflow-x: auto;
}
/* =========================
   PRINT — GOOGLE CALENDAR STYLE
   (Using existing HTML structure)
========================= */
@media print {

    /* =========================
       PAGE SETUP
    ========================= */
    @page {
        size: A4 landscape;
        margin: 6mm;
    }

    html, body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10px;
        background: #fff !important;

        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
	/* last resort cleanup */
	body {
		overflow: hidden !important;
	}
    /* =========================
       REMOVE WP + DIVI JUNK
    ========================= */
	/* kill leftover empty modules / pagination / shadows */
	.et_pb_module:empty,
	.et_pb_text:empty,
	.et_pb_row:empty,
	.et_pb_column:empty {
		display: none !important;
	}
	
	/* remove floating/ghost UI */
	.et_pb_scroll_top,
	.et-pb-icon {
		display: none !important;
	}
	
	/* remove any fixed or floating blocks */
	body > div:not(#page-container) {
		display: none !important;
	}
	
	/* hide breadcrumb completely */
	.dmpro_breadcrumbs,
	.dmpro-breadcrumbs,
	.et_pb_module.dmpro_breadcrumbs {
		display: none !important;
	}

	/* remove bottom spacing */
	.et_pb_section:last-child,
	.et_pb_row:last-child {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
	
    /* Admin bar */
    #wpadminbar {
        display: none !important;
    }

    html {
        margin-top: 0 !important;
    }

    /* Header / footer / nav */
    header, footer, nav,
    .site-header, .site-footer,
    #main-header, #main-footer,
    #top-header,
    .et-l--header,
    .et-l--footer {
        display: none !important;
    }

    /* UI elements */
    .et_pb_scroll_top,
    .mosque-print-bar,
    .mosque-edit,
    .live-badge,
    .next-badge,
    .mosque-countdown,
    .mosque-card.next::after {
        display: none !important;
    }

    /* =========================
       FIX DIVI LAYOUT WIDTH
    ========================= */

    #page-container,
    #et-main-area,
    #main-content,
    .et_builder_inner_content,
    .et_pb_section,
    .et_pb_row,
    .et_pb_column {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* CRITICAL: kill phantom columns / clearfix junk */
    .et_pb_row::after,
    .et_pb_row_inner::after {
        display: none !important;
    }

	/* 🔥 kill empty containers that still take space */
	.et_pb_row:empty,
	.et_pb_column:empty,
	.et_pb_module:empty {
		display: none !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* 🔥 force collapse of last row (your footer area) */
	.et_pb_row:last-child,
	.et_pb_section:last-child {
		height: auto !important;
		min-height: 0 !important;
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
	
	/* 🔥 remove clearfix that keeps phantom space */
	.et_pb_row::after,
	.et_pb_row_inner::after {
		content: none !important;
		display: none !important;
	}
	
	/* 🔥 kill invisible blocks that still occupy layout */
	.et_pb_module {
		min-height: 0 !important;
	}

    /* =========================
       MAIN GRID (7 DAYS)
    ========================= */

    .mosque-activities {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* =========================
       EACH DAY COLUMN
    ========================= */

    .mosque-row {
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid #ddd !important;
        background: #fff !important;
        padding: 4px !important;

        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* =========================
       DAY HEADER
    ========================= */

    .mosque-day-col {
        text-align: center !important;
        font-size: 11px !important;
        font-weight: bold !important;
        padding: 6px 2px !important;
        background: #f3f3f3 !important;
        border-bottom: 2px solid #ccc !important;
        color: #000 !important;
    }

    /* =========================
       CARDS CONTAINER
    ========================= */

    .mosque-cards-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* =========================
       CARD
    ========================= */

    .mosque-card {
        border: 1px solid #eee !important;
        border-radius: 3px !important;
        padding: 5px !important;
        background: #fff !important;

        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* Remove highlight styling */
    .mosque-card.next,
    .mosque-card.live {
        border: 1px solid #eee !important;
        box-shadow: none !important;
    }

    /* =========================
       TEXT STYLING
    ========================= */

    .mosque-time-block {
        font-size: 9px !important;
        font-weight: bold !important;
        color: #000 !important;
        margin-bottom: 3px !important;
    }

    .mosque-title {
        font-size: 9px !important;
        font-weight: 600 !important;
        margin-bottom: 3px !important;
        line-height: 1.2 !important;
    }

    .mosque-location {
        font-size: 8px !important;
        color: #666 !important;
        margin-bottom: 2px !important;
    }

    .mosque-person {
        font-size: 8px !important;
        color: #888 !important;
    }

    /* =========================
       REMOVE ICONS
    ========================= */

    .mosque-location::before,
    .mosque-person::before {
        content: none !important;
    }

    /* =========================
       PREVENT BAD PAGE BREAKS
    ========================= */

    .mosque-row,
    .mosque-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}