/* =========================================================
   INFINITE SCROLL — sentinel + spinner
========================================================= */
.listing-sentinel {
    width: 100%;
    height: 1px;
    margin-top: 8px;
}
.listing-spinner {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 32px 0 48px;
}
.listing-spinner-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--saffron, #ffae42);
    animation: ls-bounce .9s ease-in-out infinite;
}
.listing-spinner-dot:nth-child(2) { animation-delay: .15s; }
.listing-spinner-dot:nth-child(3) { animation-delay: .30s; }
@keyframes ls-bounce {
    0%, 80%, 100% { transform: scale(.55); opacity: .45; }
    40%            { transform: scale(1);   opacity: 1;   }
}

/* =========================================================
   COMMON FORM PAGE STYLES
   Use for:
   - Attraction Form
   - Accommodation Form
   - Services Form
========================================================= */

body{
    background:var(--bg);
}

/* =========================================================
   HERO SECTION
========================================================= */

.form-page-hero{
    position:relative;
    padding:90px 20px 70px;
    overflow:hidden;
    background:
        linear-gradient(rgba(11,18,32,.72),rgba(11,18,32,.78)),
        url('../img/hero-2.jpg') center/cover;
    text-align:center;
}

.form-page-hero::after{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top, rgba(255,215,107,.18), transparent 35%);
}

.form-page-hero .container{
    position:relative;
    z-index:2;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:999px;
    border:1px solid rgba(255,215,107,.25);
    background:rgba(255,215,107,.08);
    color:#ffd76b;
    font-size:.84rem;
    margin-bottom:24px;
}

.form-page-hero h1{
    color:#fff;
    font-size:clamp(2rem,5vw,4.2rem);
    margin-bottom:18px;
    line-height:1.15;
}

.form-page-hero p{
    max-width:760px;
    margin:auto;
    color:rgba(255,255,255,.78);
    line-height:1.8;
    font-size:1rem;
}

/* =========================================================
   FORM LAYOUT
========================================================= */

.form-wrapper{
    max-width:1150px;
    margin:auto;
    padding:0 20px 90px;
    margin-top:-45px;
    position:relative;
    z-index:5;
}

.form-shell{
    background:var(--surface-strong);
    border:1px solid var(--border);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(15,23,42,.08);
}

.form-top{
    padding:16px 19px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    background:
        linear-gradient(180deg,rgba(255,215,107,.05),transparent);
}

.form-top h2{
    margin-bottom:6px;
    font-size:1.7rem;
    color:var(--maroon);
}

.form-top p{
    color:var(--saffron-deep);
    margin:0;
}

.form-body{
    padding:19px 38px;
}

.form-section{
    margin-bottom:32px;
}


.required{
    color:#d23838;
}

/* =========================================================
   FORM GRID
========================================================= */
.from-subtitle{
    padding:0 0 12px;
    margin-bottom:16px;
    border-bottom:2px solid var(--border);
    font-size:1rem;
    font-weight:700;
    color:var(--maroon);
    display:flex;
    align-items:center;
    gap:8px;
}
.from-subtitle i{ color:var(--saffron); }
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 22px;
}

.full-col{
    grid-column:1/-1;
}

/* =========================================================
   FORM ELEMENTS
========================================================= */

.form-group label{
    display:block;
    margin-bottom:10px;
    font-size:.88rem;
    font-weight:700;
    color:var(--text);
}

.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    border:1px solid var(--border);
    background:var(--bg-soft);
    border-radius:10px;
    padding:10px 16px;
    font-size:.94rem;
    color:var(--text);
    transition:.25s ease;
    outline:none;
    font-family:'Manrope',sans-serif;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    border-color:rgba(255,215,107,.55);
    box-shadow:0 0 0 4px rgba(255,215,107,.12);
}

.form-group textarea{
    resize:vertical;
}

/* =========================================================
   INPUT GROUP
========================================================= */

.input-group-custom{
    display:flex;
    align-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    background:var(--bg-soft);
}

.input-group-custom span{
    padding:0 16px;
    font-weight:700;
    color:var(--gold-glow);
}

.input-group-custom input{
    border:none!important;
    background:transparent!important;
    box-shadow:none!important;
}

/* =========================================================
   TYPE CARDS (Attractions)
========================================================= */

.type-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:16px;
}

.type-card{
    position:relative;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--bg-soft);
    padding:11px 8px;
    text-align:center;
    cursor:pointer;
    transition:.25s ease;
}

.type-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,215,107,.4);
    box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.type-card.selected{
    border-color:var(--saffron);
    background:rgba(255,174,66,.10);
    box-shadow:0 0 0 3px rgba(255,174,66,.18);
}

.type-card input{
    display:none;
}

.t-ico{
    display:contents;
    font-size:1.5rem;
    margin-bottom:5px;
}

.t-lbl{
    font-size:.9rem;
    font-weight:700;
}

/* =========================================================
   SERVICES / AMENITIES GRID
========================================================= */

.option-grid,
.amenity-grid,
.svc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px;
}

.option-item,
.amenity-item,
.svc-item{
    display:flex !important;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    border-radius:16px;
    background:var(--bg-soft);
    border:1px solid var(--border);
    transition:.25s ease;
    cursor:pointer;
    font-size:.88rem;
    color:var(--text);
    font-weight:600 !important;
}

.option-item:hover,
.amenity-item:hover,
.svc-item:hover{
    border-color:rgba(255,215,107,.35);
    background:rgba(255,215,107,.08);
    transform:translateY(-2px);
}

.option-item input,
.amenity-item input,
.svc-item input{
    accent-color:var(--saffron);
    width:16px;
    height:16px;
    flex-shrink:0;
}
/* Checked visual state */
.amenity-item:has(input:checked),
.svc-item:has(input:checked),
.option-item:has(input:checked){
    border-color:var(--saffron);
    background:rgba(255,174,66,.1);
    color:var(--maroon);
    font-weight:700;
}

/* =========================================================
   TIP BOX
========================================================= */

.tip-box{
    margin-top:14px;
    border-radius:14px;
    padding:14px 16px;
    background:rgba(255,174,66,.08);
    border:1px solid rgba(255,174,66,.25);
    color:var(--saffron-deep, #92400e);
    font-size:.84rem;
    line-height:1.7;
}
.tip-box i{ color:var(--saffron); margin-right:4px; }

/* =========================================================
   PHOTO SECTION
========================================================= */

/* Styled file input */
.form-group input[type="file"]{
    padding:10px 14px;
    background:var(--bg);
    border:2px dashed var(--border);
    border-radius:10px;
    cursor:pointer;
    font-size:.85rem;
    color:var(--text-muted);
    transition:.2s ease;
}
.form-group input[type="file"]:hover{
    border-color:rgba(255,174,66,.5);
    background:rgba(255,174,66,.04);
}
.photo-hint{
    margin-top:10px;
    font-size:.78rem;
    color:var(--text-muted);
}

#photoPreview{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px;
}

.preview-item{
    width:95px;
    height:95px;
    border-radius:16px;
    overflow:hidden;
    position:relative;
    border:1px solid var(--border);
}

.preview-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.cover-tag{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:.62rem;
    text-align:center;
    padding:3px 0;
}

/* =========================================================
   ALERTS
========================================================= */

.alert-box{
    margin-bottom:20px;
    padding:16px 18px;
    border-radius:14px;
    font-size:.9rem;
}

.alert-danger{
    background:rgba(210,56,56,.08);
    border:1px solid rgba(210,56,56,.18);
    color:#d23838;
}

/* =========================================================
   FORM ACTIONS
========================================================= */

.form-actions{
    display:flex;
    justify-content:flex-end;
    gap:14px;
    flex-wrap:wrap;
    padding-top:8px;
}

.form-note{
    margin-top:14px;
    color:var(--text-muted);
    font-size:.82rem;
    text-align:right;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

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

}

@media(max-width:768px){

    .form-top,
    .form-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .form-body{
        padding:16px;
    }

    .form-top{
        padding:12px 16px;
    }

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

}

@media(max-width:560px){

    .type-grid,
    .option-grid,
    .amenity-grid,
    .svc-grid{
        grid-template-columns:1fr;
    }

    .form-page-hero{
        padding:70px 18px 60px;
    }

    .form-wrapper{
        padding:0 14px 70px;
    }

}
/* ===================================================
   CTA SECTION
   =================================================== */
   .cta-kumbh-box{
   position:relative;
   overflow:hidden;
   border-radius:34px;
   padding:70px 40px;
   background:
   linear-gradient(rgba(11,18,32,.88),rgba(11,18,32,.92)),
   url('<?php echo site_url(); ?>assets/img/hero-2.jpg') center/cover;
   border:1px solid rgba(255,215,107,.14);
   box-shadow:0 30px 80px rgba(15,23,42,.18);
   text-align:center;
   }
   .cta-glow{
   position:absolute;
   inset:0;
   background:
   radial-gradient(circle at top right,
   rgba(255,215,107,.18),
   transparent 32%);
   pointer-events:none;
   }
   .cta-kumbh-content{
   position:relative;
   z-index:2;
   }
   .cta-features{
   margin-top:34px;
   display:flex;
   justify-content:center;
   flex-wrap:wrap;
   gap:14px;
   }
   .cta-feature{
   display:flex;
   align-items:center;
   gap:10px;
   padding:12px 18px;
   border-radius:999px;
   background:rgba(255,255,255,.06);
   border:1px solid rgba(255,255,255,.08);
   backdrop-filter:blur(10px);
   color:#fff;
   font-size:.88rem;
   }
   .cta-feature span{
   font-size:1rem;
   }
   .cta-feature small{
   font-size:.82rem;
   letter-spacing:.2px;
   }
   @media(max-width:768px){
   .cta-kumbh-box{
   padding:50px 22px;
   border-radius:26px;
   }
   .cta-features{
   gap:10px;
   }
   .cta-feature{
   width:100%;
   justify-content:center;
   }
   }

   /* PAGES */

    .content-row {
        display: flex;
        align-items: stretch;
        gap: 40px;
        margin-bottom: 60px;
    }
    .content-row.reverse { flex-direction: row-reverse; }
    @media (max-width: 768px) {
        .content-row, .content-row.reverse {
            flex-direction: column;
            gap: 20px;
            margin-bottom: 40px;
        }
    }
    .content-media {
        flex: 0 0 45%;
        aspect-ratio: 4 / 3;
        border-radius: var(--radius-lg);
        background-size: cover;
        background-position: center;
        position: relative;
        box-shadow: var(--shadow-deep);
    }
    @media (max-width: 768px) {
        .content-media { aspect-ratio: 16 / 9; }
    }
    .media-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 8px 12px;
        font-size: 0.9rem;
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }
    .content-text {
        flex: 1;
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .content-text h2 {
        font-family: var(--font-display);
        color: var(--saffron-deep);
        margin-bottom: 12px;
    }
    .references-box {
        margin-top: 40px;
        padding: 20px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(255, 174, 66, 0.08);
    }
    [data-theme="dark"] .references-box {
        background: rgba(255, 174, 66, 0.05);
        border-color: rgba(255, 174, 66, 0.25);
    }
    .references-box h3 {
        font-family: var(--font-display);
        color: var(--saffron-deep);
        margin-bottom: 16px;
    }
    .references-box ul {
        list-style: disc;
        padding-left: 20px;
    }
    .references-box ul li {
        margin-bottom: 8px;
        color: var(--text-muted);
    }