/* ---------- Hero ---------- *//* ===========================
   HERO
=========================== */

.destination{
    width:80%;
    margin:0px auto;
}

@media(max-width:768px){
.destination{
    width:95%;
}
}

/* ===========================
   IMAGE SLIDER
=========================== */
.hero-right{
    width: 100%;
}

.slider{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    width: 100%;
}

.slide{
   height: 450px;
   width: 100%;
    display:none;
    cursor:pointer;
}

.slide.active{
    display:block;
}

.dots{
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
}

.dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#fff;
    opacity:.4;
    cursor:pointer;
}

.dot.active{
    opacity:1;
    width:22px;
    border-radius:10px;
}

/* Viewer */

.viewer{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    z-index:99999;
    justify-content:center;
    align-items:center;
}

.viewer img{
    max-width:95%;
    max-height:90%;
}

.close{
    position:absolute;
    top:20px;
    right:25px;
    color:#fff;
    font-size:38px;
    cursor:pointer;
}

.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    font-size:45px;
    cursor:pointer;
    user-select:none;
}

.prev{
    left:20px;
}

.next{
    right:20px;
}

@media(max-width:768px){

.slide{
    height:250px;
}

}

/* ===========================
DESTINATION CARD
=========================== */
.destination-card{
   
    background:#fff;
    padding:28px;
    border-radius:22px;
    
    margin:10px 0;
}

/* NAME + RATING */
.title-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin-bottom:18px;
}

.title-row h1{
    margin:0;
    font-size:42px;
    font-weight:700;
    color:#222;
}

.rating-box{
    display:flex;
    align-items:center;
    gap:6px;
    background:#15803d;
    color:#fff;
    padding:8px 15px;
    border-radius:30px;
    font-size:15px;
    font-weight:700;
}

.rating-box .star{
    color:#FFD700;
}

/* LOCATION + STATUS */
.meta-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.location{
    color:#666;
    font-size:16px;
    font-weight:500;
}

.alert{
    font-size:16px;
    font-weight:600;
}


/* MOBILE */
@media(max-width:768px){

.destination-card{
    padding:18px;
}

.title-row h1{
    font-size:30px;
}

.rating-box{
    padding:6px 12px;
    font-size:14px;
}

.meta-row{
    font-size:14px;
}

}


/* =========================
   TICKET CARD
========================= */
.ticket-box{
    width:100%;
     border-radius: 25px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding:22px 25px;
    box-sizing:border-box;
}

.ticket-item{
    flex:1;
}

.ticket-item:nth-child(1){
    text-align:left;
}

.ticket-item:nth-child(2){
    text-align:center;
}

.ticket-item:nth-child(3){
    text-align:right;
}

.ticket-label{
    display:block;
    font-size:12px;
    color:#777;
    font-weight:600;
    text-transform:uppercase;
    margin-bottom:8px;
}

.ticket-value{
    font-size:22px;
    font-weight:700;
    color:#222;
    line-height:1.2;
}

.ticket-value.price{
    font-size:34px;
    color:#1f5eff;
}

.buy-ticket{
    color:#1565c0;
    text-decoration:none;
    font-size:20px;
    font-weight:700;
}

.buy-ticket:hover{
    text-decoration:underline;
}

@media(max-width:768px){

.ticket-box{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    padding:15px 10px;
}

.ticket-item:nth-child(1),
.ticket-item:nth-child(2),
.ticket-item:nth-child(3){
    text-align:center;
}

.ticket-label{
    font-size:9px;
    margin-bottom:5px;
}

.ticket-value.price{
    font-size:24px;
}

.ticket-value{
    font-size:14px;
}

.buy-ticket{
    font-size:13px;
    white-space:nowrap;
}
}

/* =========================
   QUICK ACTIONS
========================= */
.quick-actions{
    background: #fff;
    box-shadow:0 10px 25px black;
    width:100%;
    margin:22px auto;
    display:flex;
    justify-content:space-evenly;
    align-items:flex-start;
    gap:15px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 20px;
}

.action-btn{
    text-decoration:none;
    background:none;
    border:none;
    cursor:pointer;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    color:#222;
    font-family:inherit;
}

.action-icon{
    width:64px;
    height:64px;
    border:2px solid #d9e2ff;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;
    color:#2f6df6;

    background:#fff;
    transition:.25s;
}

.action-btn:hover .action-icon{
    background:#f3f7ff;
    border-color:#2f6df6;
    transform:translateY(-2px);
}

.action-btn span{
    margin-top:10px;
    font-size:14px;
    font-weight:600;
    color:#333;
}

@media(max-width:768px){

.quick-actions{
    width:95%;
    gap:6px;
}

.action-icon{
    width:52px;
    height:52px;
    font-size:22px;
}

.action-btn span{
    font-size:11px;
}

}


/* Common Card for tgas  */

.info-card{
    width:100%;
    margin:18px auto;
    background:#fff;
    border-radius:18px;
    padding:22px;
    box-shadow:0 4px 18px rgba(0,0,0,.08);
}

.info-card h3{
    margin:0 0 18px;
    font-size:22px;
    font-weight:700;
    color:#222;
}


/* TAGS */

.tag-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.tag-chip{
    background:#f1f4f8;
    color:#444;
    padding:8px 16px;
    border-radius:25px;
    font-size:14px;
    font-weight:600;
    transition:.25s;
}

.tag-chip:hover{
    background:#2563eb;
    color:#fff;
}


/* TIMINGS */
.info-card{
    width: 100%;
}


.timing-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.timing-row{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #ececec;
}

.timing-row:last-child{
    border-bottom:none;
}

.timing-row span:first-child{

    color:#333;
    font-weight:600;

}

.timing-row span:last-child{

    color:#666;

}

.today{

    color:#2563eb;
    font-weight:700;

}

.timing-arrow{
    
    font-size:30px;
    color:#555;
    cursor:pointer;
    transition:transform .3s ease;
    user-select:none;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left: 5px;
}

.timing-arrow.rotate{
    transform:rotate(180deg);
}

.timing-summary {
   
    background: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
}



/* ABOUT */

.about-text{

    font-size:16px;
    color:#555;
    line-height:1.8;

    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;

}

.about-text.expanded{

    display:block;

}

.read-more-btn{

    margin-top:15px;

    background:none;
    border:none;

    color:#2563eb;

    font-weight:700;

    cursor:pointer;

}


/* MOBILE */

@media(max-width:768px){

.info-card{

width:95%;
padding:16px;

}

.info-card h3{

font-size:18px;

}

.tag-chip{

font-size:12px;
padding:6px 12px;

}

.timing-row{

font-size:13px;

}

.about-text{

font-size:14px;

}

}



/* ===========================
   alert
=========================== */

.alert-details{
    display: none;
  margin-left: 30px;
    width: 90%;
   border-radius: 20px;
   background: whitesmoke;
   margin-top: 10px;
   padding-left: 10px;
}

.alert-pill{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border-radius:18px;
    background:#FFF4E5;
    color:#D97706;
    cursor:pointer;
    transition:.25s;
    white-space:nowrap;
    max-width:45%;
}

.alert-pill:hover{
    background:#FFE7BF;
}

.alert-icon{
    font-size:15px;
}

.alert-title{
    font-size:13px;
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.alert-arrow{
    font-size:18px;
    margin-left:2px;
}

.alert-info{
    margin: 10px;
   
    
}


/* ===========================
   Visitor info
=========================== */


.visitor-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.visitor-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    background:#f8f9fa;
    border-radius:10px;
}

.visitor-item span:first-child{
    font-weight:500;
}

.yes{
    color:#2e7d32;
    font-weight:600;
}

.no{
    color:#d32f2f;
    font-weight:600;
}

@media(max-width:768px){

.info-card{
    width:95%;
}

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

}


/* ===========================
   best time
=========================== */
.best-time-card{
    width: 100%;
}



.best-time-grid{
   
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:15px;
}

.best-time-item{
    display:flex;
    align-items:center;
    gap:14px;
    background:#f8f9fa;
    padding:15px;
    border-radius:12px;
}

.best-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#fff3e0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.best-time-item small{
    display:block;
    color:#777;
    font-size:13px;
}

.best-time-item strong{
    display:block;
    margin-top:3px;
    color:#222;
    font-size:16px;
}

@media(max-width:768px){

    .best-icon{
        width: 30px;
        height: 30px;
    }
    
    
.best-time-item{
   
    gap:2px;
    
}
}



/* ===========================
   Travel info
=========================== */
.travel-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:15px;
}

.travel-item{
    display:flex;
    align-items:center;
    gap:14px;
    background:#f8f9fa;
    padding:15px;
    border-radius:12px;
}

.travel-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:#e8f5e9;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    flex-shrink:0;
}

.travel-item small{
    display:block;
    color:#777;
    font-size:13px;
}

.travel-item strong{
    display:block;
    margin-top:4px;
    color:#222;
    font-size:16px;
    font-weight:600;
}

@media(max-width:768px){

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

}


/* ===========================
   nearby places
=========================== */
.nearby-slider{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.nearby-slider::-webkit-scrollbar{
    display:none;
}

.nearby-card{
    flex:0 0 calc(50% - 6px);
    scroll-snap-align:start;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    text-decoration:none;
    color:#222;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.nearby-card img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
}

.nearby-content{
    padding:10px;
}

.nearby-content h4{
    font-size:15px;
    margin-bottom:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.nearby-info{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    color:#666;
}

@media(min-width:768px){

    .nearby-card{
        flex:0 0 calc(25% - 9px);
    }

}