/* =====================================================
   GLOBALTIME.IO
   UNIVERSAL DESTINATION PAGE CSS
===================================================== */


/* =====================================================
   DESTINATION THEME VARIABLES
===================================================== */

.destination-page{
  --destination-accent:#2563eb;
  --destination-accent-hover:#1d4ed8;
  --destination-accent-shadow:rgba(37,99,235,0.28);
  --destination-soft:#eff6ff;
  --destination-badge-text:#bfdbfe;
}


/* =====================================================
   OPTIONAL DESTINATION THEMES
===================================================== */

/* Rajasthan / Heritage / Desert */

.destination-page.rajasthan-theme{
  --destination-accent:#b45309;
  --destination-accent-hover:#92400e;
  --destination-accent-shadow:rgba(180,83,9,0.25);
  --destination-soft:#fff7ed;
  --destination-badge-text:#fef3c7;
}


/* Kerala / Backwaters / Tropical */

.destination-page.kerala-theme{
  --destination-accent:#0f766e;
  --destination-accent-hover:#115e59;
  --destination-accent-shadow:rgba(15,118,110,0.25);
  --destination-soft:#f0fdfa;
  --destination-badge-text:#ccfbf1;
}


/* Goa / Beach / Coastal */

.destination-page.goa-theme{
  --destination-accent:#0284c7;
  --destination-accent-hover:#0369a1;
  --destination-accent-shadow:rgba(2,132,199,0.25);
  --destination-soft:#f0f9ff;
  --destination-badge-text:#bae6fd;
}


/* =====================================================
   RESET
===================================================== */

.destination-page img{
  max-width:100%;
}


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

.destination-hero{
  position:relative;

  min-height:640px;

  overflow:hidden;

  border-radius:0 0 34px 34px;
}


/* Background Image */

.destination-hero-image{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;
}


/* Hero Container */

.destination-hero .hero{
  position:relative;

  z-index:2;

  width:100%;

  max-width:1320px;

  margin:0 auto;

  padding-left:42px;
  padding-right:42px;
}


/* =====================================================
   UNIVERSAL LIGHT IMAGE OVERLAY
===================================================== */

.destination-overlay{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(15,23,42,0.18) 0%,
      rgba(15,23,42,0.08) 45%,
      rgba(15,23,42,0.02) 75%,
      transparent 100%
    );

  z-index:1;
}


/* =====================================================
   HERO CONTENT
===================================================== */

.destination-hero-content{
  position:relative;

  z-index:2;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  justify-content:center;

  min-height:560px;

  max-width:650px;

  padding-top:34px;
  padding-bottom:54px;

  color:#fff;
}


/* =====================================================
   BREADCRUMBS
===================================================== */

.destination-breadcrumbs{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:10px;

  margin-bottom:28px;

  font-size:0.92rem;
}


.destination-breadcrumbs a{
  color:rgba(255,255,255,0.92);

  text-decoration:none;

  transition:opacity .18s ease;
}


.destination-breadcrumbs a:hover{
  opacity:0.78;
}


.destination-breadcrumbs span{
  color:rgba(255,255,255,0.72);
}


/* =====================================================
   HERO TITLE
===================================================== */

.destination-hero h1{
  margin:0;

  max-width:650px;

  font-size:clamp(2rem,3.4vw,3.25rem);

  line-height:1.03;

  font-weight:650;

  letter-spacing:-0.025em;

  text-wrap:balance;

  text-shadow:
    0 2px 10px rgba(0,0,0,0.22);
}


/* =====================================================
   HERO SUBTITLE
===================================================== */

.destination-subtitle{
  margin-top:12px;

  max-width:500px;

  font-size:1rem;

  line-height:1.65;

  color:rgba(255,255,255,0.94);

  text-shadow:
    0 1px 5px rgba(0,0,0,0.18);
}


/* =====================================================
   TIMEZONE BADGE
===================================================== */

.timezone-badge{
  display:inline-flex;

  width:fit-content;

  align-items:center;

  gap:10px;

  margin-top:16px;

  padding:10px 16px;

  border-radius:999px;

  background:rgba(255,255,255,0.16);

  border:1px solid rgba(255,255,255,0.24);

  backdrop-filter:blur(10px);

  -webkit-backdrop-filter:blur(10px);

  font-size:0.92rem;

  font-weight:600;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.08);
}


.timezone-badge span{
  color:var(--destination-badge-text);
}


/* =====================================================
   LIVE CLOCK
===================================================== */

.hero-clock{
  margin-top:18px;

  font-size:clamp(2rem,4vw,3.2rem);

  line-height:0.95;

  font-weight:800;

  letter-spacing:-0.03em;

  font-variant-numeric:tabular-nums;

  text-shadow:
    0 3px 14px rgba(0,0,0,0.20);
}


/* Date */

.hero-date{
  margin-top:6px;

  font-size:1.08rem;

  color:rgba(255,255,255,0.94);

  text-shadow:
    0 1px 5px rgba(0,0,0,0.18);
}


/* =====================================================
   HERO ACTIONS
===================================================== */

.hero-actions{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:14px;

  margin-top:22px;
}


.hero-btn{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:42px;

  padding:0 18px;

  border-radius:14px;

  text-decoration:none;

  font-size:0.95rem;

  font-weight:600;

  transition:
    transform .14s ease,
    opacity .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.hero-btn:hover{
  transform:translateY(-2px);
}


/* =====================================================
   PRIMARY BUTTON
===================================================== */

.primary-btn{
  background:var(--destination-accent);

  color:#fff;

  box-shadow:
    0 14px 30px var(--destination-accent-shadow);
}


.primary-btn:hover{
  background:var(--destination-accent-hover);
}


/* =====================================================
   SECONDARY BUTTON
===================================================== */

.secondary-btn{
  background:#fff;

  color:#111827;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.10);
}


.secondary-btn:hover{
  background:#f9fafb;
}


/* =====================================================
   OVERVIEW
===================================================== */

.destination-overview{
  display:grid;

  grid-template-columns:
    1.1fr .9fr;

  gap:18px;

  margin-top:-55px;

  position:relative;

  z-index:5;
}


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

.overview-card{
  background:rgba(255,255,255,0.97);

  border:1px solid rgba(148,163,184,0.22);

  border-radius:24px;

  padding:30px;

  box-shadow:
    0 18px 42px rgba(15,23,42,0.08);
}


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

.about-card{
  display:flex;

  align-items:flex-start;

  gap:20px;
}


/* =====================================================
   OVERVIEW ICON
===================================================== */

.overview-icon{
  flex-shrink:0;

  width:84px;
  height:84px;

  border-radius:22px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:2.6rem;

  background:var(--destination-soft);
}


/* =====================================================
   ABOUT TITLE
===================================================== */

.about-card h2{
  margin:0 0 14px;

  font-size:1.9rem;

  line-height:1.2;

  color:#111827;
}


/* =====================================================
   ABOUT TEXT
===================================================== */

.about-card p{
  max-width:560px;

  margin:0;

  line-height:1.8;

  color:#4b5563;
}


/* =====================================================
   STATS
===================================================== */

.stats-card{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:22px;
}


.stat-item{
  display:flex;

  align-items:flex-start;

  gap:14px;
}


.stat-icon{
  font-size:1.5rem;
}


.stat-item strong{
  display:block;

  margin-bottom:6px;

  color:#111827;
}


.stat-item span:last-child{
  color:#6b7280;
}


/* =====================================================
   SECTION TITLES
===================================================== */

.section-title{
  font-size:1.55rem;

  font-weight:700;

  letter-spacing:-0.02em;

  color:#111827;
}


body.dark-mode .section-title{
  color:#f3f4f6;
}


/* =====================================================
   DESTINATION SECTION
===================================================== */

.beaches-section{
  margin-top:38px;
}


.section-header{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-bottom:20px;
}


/* =====================================================
   DESTINATION GRID
===================================================== */

.beaches-grid{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

  gap:18px;
}


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

.beach-card{
  display:flex;

  flex-direction:column;

  height:100%;

  overflow:hidden;

  border-radius:22px;

  background:#fff;

  border:1px solid rgba(148,163,184,0.22);

  box-shadow:
    0 12px 28px rgba(15,23,42,0.06);

  transition:
    transform .15s ease,
    box-shadow .18s ease;
}


.beach-card:hover{
  transform:translateY(-4px);

  box-shadow:
    0 20px 42px rgba(15,23,42,0.11);
}


/* =====================================================
   DESTINATION IMAGE
===================================================== */

.beach-card img{
  width:100%;

  height:210px;

  object-fit:cover;

  display:block;

  transition:
    transform .35s ease;
}


.beach-card:hover img{
  transform:scale(1.025);
}


/* =====================================================
   DESTINATION CONTENT
===================================================== */

.beach-content{
  flex:1;

  padding:20px;
}


.beach-content h4{
  margin:0 0 8px;

  font-size:1.08rem;

  color:#111827;
}


.beach-content p{
  margin:0;

  line-height:1.7;

  color:#6b7280;
}


/* =====================================================
   INFORMATION GRID
===================================================== */

.info-grid-section{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:20px;

  margin-top:42px;

  margin-bottom:80px;
}


/* =====================================================
   INFORMATION BOX
===================================================== */

.info-box{
  padding:28px;

  border-radius:24px;

  background:#fff;

  border:1px solid rgba(148,163,184,0.22);

  box-shadow:
    0 12px 28px rgba(15,23,42,0.06);
}


.info-box h3{
  margin:0 0 20px;

  font-size:1.3rem;

  color:#111827;
}


.info-box ul{
  margin:0;

  padding-left:18px;
}


.info-box li{
  margin-bottom:16px;

  line-height:1.8;

  color:#4b5563;
}


.info-box li:last-child{
  margin-bottom:0;
}


/* =====================================================
   FAQ
===================================================== */

.faq-box details{
  border-bottom:
    1px solid rgba(148,163,184,0.18);

  padding:14px 0;
}


.faq-box details:first-of-type{
  padding-top:0;
}


.faq-box details:last-child{
  border-bottom:none;
}


.faq-box summary{
  cursor:pointer;

  font-weight:600;

  color:#111827;

  list-style:none;
}


.faq-box summary::-webkit-details-marker{
  display:none;
}


.faq-box p{
  margin-top:12px;

  color:#6b7280;

  line-height:1.7;
}


/* =====================================================
   DARK MODE
===================================================== */

body.dark-mode .overview-card,
body.dark-mode .beach-card,
body.dark-mode .info-box{
  background:rgba(15,23,42,0.96);

  border-color:
    rgba(148,163,184,0.22);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.48);
}


body.dark-mode .overview-icon{
  background:rgba(255,255,255,0.06);
}


body.dark-mode .about-card h2,
body.dark-mode .stat-item strong,
body.dark-mode .beach-content h4,
body.dark-mode .info-box h3,
body.dark-mode .faq-box summary{
  color:#f3f4f6;
}


body.dark-mode .about-card p,
body.dark-mode .stat-item span:last-child,
body.dark-mode .beach-content p,
body.dark-mode .info-box li,
body.dark-mode .faq-box p{
  color:#9ca3af;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width:1100px){

  .destination-overview{
    grid-template-columns:1fr;
  }

  .info-grid-section{
    grid-template-columns:1fr;
  }

}


/* =====================================================
   TABLET / SMALL LAPTOP
===================================================== */

@media (max-width:768px){

  .destination-hero{
    min-height:580px;
  }


  .destination-hero-content{
    min-height:520px;

    padding-top:40px;

    padding-bottom:70px;
  }


  .hero-clock{
    font-size:3.8rem;
  }


  .about-card{
    flex-direction:column;
  }


  .stats-card{
    grid-template-columns:1fr;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:640px){

  .destination-hero{
    min-height:570px;

    border-radius:
      0 0 24px 24px;
  }


  .destination-hero .hero{
    padding-left:22px;

    padding-right:22px;
  }


  .destination-hero-content{
    min-height:530px;

    padding-top:54px;

    padding-bottom:80px;
  }


  .destination-breadcrumbs{
    margin-bottom:22px;

    font-size:0.84rem;

    gap:7px;
  }


  .destination-hero h1{
    font-size:
      clamp(2rem,9vw,2.6rem);

    line-height:1.05;
  }


  .destination-subtitle{
    font-size:1rem;

    line-height:1.55;
  }


  .timezone-badge{
    padding:9px 13px;

    gap:8px;

    font-size:0.82rem;
  }


  .hero-clock{
    margin-top:20px;

    font-size:2.8rem;
  }


  .hero-date{
    font-size:0.98rem;
  }


  .hero-actions{
    width:100%;

    flex-direction:column;

    align-items:stretch;

    gap:10px;
  }


  .hero-btn{
    width:100%;
  }


  .destination-overview{
    margin-top:-40px;

    gap:14px;
  }


  .overview-card,
  .info-box{
    padding:22px;

    border-radius:20px;
  }


  .overview-icon{
    width:70px;
    height:70px;

    border-radius:18px;

    font-size:2.2rem;
  }


  .about-card h2{
    font-size:1.55rem;
  }


  .about-card p{
    font-size:0.96rem;

    line-height:1.7;
  }


  .beaches-section{
    margin-top:30px;
  }


  .section-title{
    font-size:1.35rem;
  }


  .beaches-grid{
    grid-template-columns:1fr;

    gap:16px;
  }


  .beach-card img{
    height:210px;
  }


  .info-grid-section{
    grid-template-columns:1fr;

    gap:16px;

    margin-top:34px;

    margin-bottom:60px;
  }


  .info-box h3{
    font-size:1.2rem;
  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width:400px){

  .destination-hero-content{
    padding-top:46px;
  }


  .destination-hero h1{
    font-size:2rem;
  }


  .hero-clock{
    font-size:2.45rem;
  }


  .timezone-badge{
    flex-wrap:wrap;

    border-radius:18px;
  }

}