body{
            font-family:'Segoe UI',sans-serif;
            background:#f7f3ee;
            color:#2f2f2f;
        }

        .topbar{
            background:#5b0f1a;
            color:#fff;
            padding:10px 0;
            font-size:14px;
        }

        .navbar-custom{
            background:#fff;
            box-shadow:0 3px 12px rgba(0,0,0,.08);
        }

        .navbar-custom .nav-link,
        .navbar-custom .navbar-brand{
            color:#12315c !important;
            font-weight:600;
        }

        .hero{
            background:
                linear-gradient(rgba(18,49,92,.82), rgba(91,15,26,.66)),
                url('{{ asset("images/about-church.jpg") }}') center/cover no-repeat;
            min-height:48vh;
            display:flex;
            align-items:center;
            color:#fff;
            text-align:center;
        }

        .hero h1{
            font-size:3rem;
            font-weight:800;
            margin-bottom:12px;
        }

        .hero p{
            max-width:760px;
            margin:auto;
            line-height:1.9;
            font-size:1.05rem;
        }

        .page-section{
            padding:70px 0;
        }

        .filter-box{
            background:#fff;
            border-radius:24px;
            padding:30px;
            box-shadow:0 10px 28px rgba(0,0,0,.08);
            margin-top:-65px;
            position:relative;
            z-index:5;
        }

        .filter-box label{
            font-weight:700;
            color:#12315c;
            margin-bottom:8px;
        }

        .form-control{
            border-radius:10px;
            min-height:44px;
        }

        .btn-maroon{
            background:#5b0f1a;
            color:#fff;
            border:none;
        }

        .btn-maroon:hover{
            color:#fff;
            opacity:.95;
        }

        .results-title{
            color:#12315c;
            font-weight:800;
            margin-bottom:20px;
        }

        .results-layout{
            display:flex;
            gap:24px;
            align-items:flex-start;
            flex-wrap:wrap;
        }

        .results-main{
            flex:1 1 760px;
            min-width:0;
        }

        .results-sidebar{
            flex:0 0 290px;
            width:290px;
        }

        .sidebar-card{
            background:#fff;
            border-radius:20px;
            padding:22px 18px;
            box-shadow:0 8px 24px rgba(0,0,0,.07);
            position:sticky;
            top:90px;
        }

        .sidebar-card h5{
            font-size:1.05rem;
            font-weight:800;
            color:#12315c;
            margin-bottom:16px;
        }

        .sidebar-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:10px;
        }

        .sidebar-pill{
            background:#f8f4ec;
            border:1px solid #eadfcb;
            color:#5b0f1a;
            border-radius:10px;
            padding:10px 12px;
            text-align:center;
            font-size:13px;
            font-weight:700;
            line-height:1.4;
            word-break:break-word;
        }

        .schedule-card{
            background:#fff;
            border-radius:20px;
            padding:24px;
            box-shadow:0 8px 24px rgba(0,0,0,.07);
            border-left:6px solid #d4af37;
            margin-bottom:20px;
        }

        .schedule-card h4{
            font-size:1.3rem;
            font-weight:800;
            color:#12315c;
            margin-bottom:10px;
        }

        .badge-day{
            background:linear-gradient(135deg,#12315c,#5b0f1a);
            color:#fff;
            padding:8px 14px;
            border-radius:30px;
            font-size:12px;
            text-transform:capitalize;
            font-weight:600;
            white-space:nowrap;
        }

        .time-pill{
            display:inline-block;
            background:#f3f5f8;
            color:#12315c;
            border-radius:20px;
            padding:6px 12px;
            font-size:12px;
            font-weight:700;
            margin-right:8px;
            margin-bottom:8px;
        }

        .status-pill{
            display:inline-block;
            background:#f8f4ec;
            color:#5b0f1a;
            border-radius:20px;
            padding:6px 12px;
            font-size:12px;
            font-weight:700;
            margin-bottom:8px;
        }

        .location-box{
            background:#f8f4ec;
            border-radius:12px;
            padding:12px 15px;
            margin:12px 0;
        }

        .meta-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:8px 18px;
            margin:14px 0;
        }

        .meta-item{
            font-size:14px;
            color:#444;
            line-height:1.7;
        }

        .meta-item strong{
            color:#12315c;
        }

        .schedule-body{
            line-height:1.9;
            color:#555;
            margin-top:10px;
        }

        .empty-box{
            background:#fff;
            border-radius:18px;
            padding:25px;
            box-shadow:0 8px 20px rgba(0,0,0,.06);
        }

        .pagination-wrapper{
            margin-top:30px;
            display:flex;
            justify-content:center;
        }

        .pagination-wrapper .pagination{
            margin-bottom:0;
            flex-wrap:wrap;
        }

        .pagination-wrapper .page-link{
            color:#12315c;
            border:1px solid #ddd;
            margin:0 3px;
            border-radius:8px;
        }

        .pagination-wrapper .page-item.active .page-link{
            background:#5b0f1a;
            border-color:#5b0f1a;
            color:#fff;
        }

        .pagination-wrapper .page-link:hover{
            color:#5b0f1a;
            background:#f8f4ec;
        }

        @media (max-width: 991px){
            .hero h1{
                font-size:2.2rem;
            }

            .filter-box{
                margin-top:30px;
            }

            .results-layout{
                flex-direction:column;
            }

            .results-sidebar{
                flex:1 1 100%;
                width:100%;
            }

            .sidebar-card{
                position:static;
            }
        }

        @media (max-width: 767px){
            .meta-grid{
                grid-template-columns:1fr;
            }
        }

        @media (max-width: 575px){
            .sidebar-grid{
                grid-template-columns:1fr;
            }

            .schedule-card{
                padding:18px;
            }

            .badge-day{
                margin-top:10px;
            }
        }