* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Vazirmatn", sans-serif;
}

body {

   background:
      linear-gradient(180deg,
         #f8fafc,
         #eff6ff,
         #dcfce7);

   padding: 8px;

   min-height: 100vh;

   display: flex;

   justify-content: center;

   align-items: flex-start;

}

.app-container {

   width: 100%;

   max-width: 430px;

   min-height: 100vh;

   background:
      linear-gradient(180deg,
         #f8fafc,
         #eff6ff,
         #dcfce7);

   position: relative;

   overflow-x: hidden;
}

.hero-live {
   height: 250px;
   /* 👈 کوتاه‌تر */
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;

   background: radial-gradient(circle at top,
         #e0f2fe,
         #f0fdf4);
}

/* نسخه جمع‌وجور */
.hero-live.compact {
   height: 170px;
   /* 👈 خیلی بهتر برای موبایل */
}

.hero-center {
   text-align: center;
   z-index: 2;
}

.hero-center h1 {
   font-size: 24px;
   font-weight: 900;
   color: #0f172a;
}

.hero-center p {
   font-size: 13px;
   color: #475569;
   margin-top: 6px;
}

/* پالس کوچیک‌تر */
.pulse-dot {
   width: 8px;
   height: 8px;
   margin: 0 auto 8px;
   border-radius: 50%;
   background: #22c55e;
   animation: pulse 1.5s infinite;
}

/* 🎨 آیکون‌ها (دیگه همه آبی نیستن) */
.floating-icons i {
   position: absolute;
   font-size: 20px;
   opacity: .7;
   animation: float 6s infinite ease-in-out;
}

/* رنگ‌های متنوع */
.floating-icons i:nth-child(1) {
   top: 18px;
   left: 25px;
   color: #3b82f6;
}

/* آبی */
.floating-icons i:nth-child(2) {
   top: 55px;
   right: 30px;
   color: #22c55e;
}

/* سبز */
.floating-icons i:nth-child(3) {
   bottom: 35px;
   left: 45px;
   color: #f59e0b;
}

/* زرد ملایم */
.floating-icons i:nth-child(4) {
   bottom: 15px;
   right: 25px;
   color: #06b6d4;
}

/* فیروزه‌ای */

@keyframes float {
   0% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-10px);
   }

   100% {
      transform: translateY(0);
   }
}

/* =====================================
   کارت پیشنهاد امروز
===================================== */

.hero-card {

   position: relative;

   height: 240px;

   border-radius: 30px;

   overflow: hidden;

   margin-bottom: 25px;

   background-image:
      url("../images/tourism/hero.jpg");

   background-size: cover;

   background-position: center;

   box-shadow:
      0 20px 40px rgba(0, 0, 0, .15);

   animation:
      floatHero 6s ease-in-out infinite;

}

/* =====================================
   لایه تاریک روی عکس
===================================== */

.hero-overlay {

   position: absolute;

   inset: 0;

   background:

      linear-gradient(to top,

         rgba(0, 0, 0, .75),

         rgba(0, 0, 0, .15));

}

/* =====================================
   محتوا
===================================== */

.hero-content {

   position: absolute;

   bottom: 20px;

   right: 20px;

   left: 20px;

   z-index: 5;

   color: white;

}

.hero-content h2 {

   font-size: 30px;

   font-weight: 800;

   margin: 10px 0;

}

.hero-content p {

   line-height: 1.9;

   font-size: 14px;

}

/* =====================================
   برچسب بالا
===================================== */

.hero-badge {

   display: inline-flex;

   align-items: center;

   gap: 8px;

   padding: 8px 14px;

   border-radius: 999px;

   background:
      rgba(255, 255, 255, .18);

   backdrop-filter: blur(10px);

}

/* =====================================
   دکمه
===================================== */


/* =====================================
   نورهای شناور
===================================== */

.hero-card::before {

   content: "";

   position: absolute;

   width: 250px;

   height: 250px;

   border-radius: 50%;

   background:
      rgba(255, 255, 255, .08);

   top: -80px;

   left: -60px;

   animation:
      pulseLight 8s infinite;

}

.hero-card::after {

   content: "";

   position: absolute;

   width: 120px;

   height: 120px;

   border-radius: 50%;

   background:
      rgba(255, 255, 255, .06);

   bottom: -20px;

   right: -20px;

   animation:
      pulseLight 6s infinite;

}

/* =====================================
   انیمیشن نور
===================================== */

@keyframes pulseLight {

   0% {

      transform: scale(1);

   }

   50% {

      transform: scale(1.2);

   }

   100% {

      transform: scale(1);

   }

}

/* =====================================
   شناور شدن کارت
===================================== */

@keyframes floatHero {

   0% {

      transform: translateY(0);

   }

   50% {

      transform: translateY(-5px);

   }

   100% {

      transform: translateY(0);

   }

}

.category-card {

   position: relative;

   overflow: hidden;

   background: white;

   border: 1px solid #eef2ff;

   backdrop-filter: blur(10px);

   border-radius: 24px;

   margin-bottom: 16px;

   box-shadow:
      0 10px 30px rgba(15, 23, 42, .08);

   transition: .35s;

}

.category-card.active {

   transform:
      translateY(-4px);

}

.category-header {

   padding: 20px;

   display: flex;

   justify-content: space-between;

   align-items: center;

   cursor: pointer;

}

.category-left {

   display: flex;

   align-items: center;

   gap: 14px;

}

.category-icon {

   width: 52px;

   height: 52px;

   border-radius: 16px;

   display: flex;

   align-items: center;

   justify-content: center;

   font-size: 24px;

   color: white;

}

.category-title {

   font-size: 18px;

   font-weight: 700;

   color: #0f172a;

}

/* =====================================
   تعداد مکان ها
===================================== */

.category-count {

   font-size: 12px;

   font-weight: 400;

   color: #464c55;

   margin-top: 4px;

}

.arrow {

   font-size: 20px;

   transition: .35s;

   color: #64748b;

}

.category-card.active .arrow {

   transform: rotate(180deg);

}

.category-items {

   max-height: 0;

   overflow: hidden;

   transition:
      max-height .45s ease;

   padding: 0 20px;

}


.category-card.active .category-items {

   max-height: 5000px;

   padding-bottom: 15px;

}

.item {

   display: block;

   padding: 12px;

   margin-top: 10px;

   background: #f8fafc;

   border-radius: 14px;

}

.item:hover {

   transform:
      translateX(-5px);

   background: #eff6ff;

}

.item i {

   color: #2563eb;

   font-size: 18px;

}

.featured-section {

   background: white;

   border-radius: 24px;

   padding: 18px 4px;

   margin-bottom: 15px;

   box-shadow:
      0 8px 25px rgba(0, 0, 0, .04);

}

.featured-section h3 {

   margin-bottom: 15px;

   font-size: 18px;

   font-weight: 700;

}

.featured-section h3 {

   margin-bottom: 15px;

   font-size: 18px;

   font-weight: 700;

}

/* =====================================
   اسلایدر محبوب ترین ها
===================================== */

.featured-slider {

   display: flex;

   gap: 12px;

   overflow-x: auto;

   padding-bottom: 0px;

   scroll-behavior: smooth;

   cursor: grab;

   background: transparent;

   user-select: none;

   -webkit-user-select: none;

   scrollbar-width: none;

}

.featured-slider::-webkit-scrollbar {

   display: none;

}

.featured-slider:active {

   cursor: grabbing;

}

.featured-slider::-webkit-scrollbar {

   display: none;

}

/* =====================================
   محبوب ترین ها
===================================== */

.featured-card {

   position: relative;

   min-width: 220px;

   height: 130px;

   border-radius: 24px;

   overflow: hidden;

   background-size: cover;

   background-position: center;

   display: flex;

   align-items: flex-end;

   padding: 16px;

   color: white;

   font-weight: 700;

   box-shadow:
      0 10px 25px rgba(0, 0, 0, .18);

}

.featured-card::before {

   content: "";

   position: absolute;

   inset: 0;

   background:

      linear-gradient(to top,

         rgba(0, 0, 0, .65),

         rgba(0, 0, 0, .15));

}

.featured-card span {

   position: relative;

   z-index: 2;

}

.tourism-search {

   display: flex;

   align-items: center;

   gap: 10px;

   background: white;

   padding: 14px 18px;

   border-radius: 18px;

   margin-bottom: 20px;

   box-shadow:
      0 6px 20px rgba(0, 0, 0, .05);

}

.tourism-search input {

   border: none;

   outline: none;

   width: 100%;

   background: none;

}

/* =====================================
   تعداد مکان زیر مجموعه
===================================== */

.item-content small {

   font-size: 12px;

   font-weight: 400;

   color: #94a3b8;

   display: block;

   margin-top: 3px;

}

/* =====================================
   انیمیشن کارت
===================================== */

@keyframes floatCard {

   0% {

      transform:
         translateY(0);

   }

   50% {

      transform:
         translateY(-6px);

   }

   100% {

      transform:
         translateY(0);

   }

}

.hero-card {

   animation:
      floatCard 6s ease-in-out infinite;

}

/* انیمیشن برای محبوب ها  */
.featured-slider {
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
}

.featured-card {
   scroll-snap-align: start;
   flex: 0 0 auto;
   transition: transform .3s ease;
}

/* وقتی اسکرول میشه حس زنده بده */
.featured-card:active {
   transform: scale(0.96);
}






.place-item {

   padding: 12px;

   margin-top: 8px;

   border-radius: 10px;

   background: white;

   cursor: pointer;

   border: 1px solid #e2e8f0;

}



.place-item:hover {

   background: #eff6ff;

}

.sub-category {

   display: flex;

   justify-content: space-between;

   align-items: center;

   padding: 14px 16px;

   background: white;

   border-radius: 14px;

   cursor: pointer;

   transition: .3s;

}

.sub-category:hover {

   background: #f8fafc;

}

.sub-title {

   font-size: 15px;

   font-weight: 700;

   color: #0f172a;

}

.sub-count {

   font-size: 12px;

   color: #94a3b8;

   margin-top: 3px;

}

.sub-arrow {

   font-size: 18px;

   color: #64748b;

   transition: .3s;

}

.item.active .sub-arrow {

   transform: rotate(180deg);

}


.places {

   max-height: 0;

   overflow: hidden;

   opacity: 0;

   transition:

      max-height .45s ease,

      opacity .35s ease;

}

.item.active .places {

   max-height: 600px;

   opacity: 1;

}

.place-item {

   display: flex;

   align-items: center;

   gap: 10px;

   padding: 12px 14px;

   margin-top: 10px;

   background: #f8fafc;

   border-radius: 12px;

   cursor: pointer;

   transition: .25s;

   border: 1px solid transparent;

}

.place-item:hover {

   background: #eff6ff;

   border-color: #bfdbfe;

   transform: translateX(-4px);

}

.item {

   margin-top: 10px;

}

.sub-category {

   display: flex;

   justify-content: space-between;

   align-items: center;

   padding: 14px 16px;

   background: #f8fafc;

   border-radius: 14px;

   cursor: pointer;

   transition: .3s;

}

.sub-category:hover {

   background: #eff6ff;

}

.sub-title {

   font-size: 15px;

   font-weight: 700;

   color: #0f172a;

}

.sub-count {

   font-size: 12px;

   color: #94a3b8;

   margin-top: 3px;

}

.sub-arrow {

   font-size: 18px;

   color: #64748b;

   transition: .3s;

}

.item.active .sub-arrow {

   transform: rotate(180deg);

}

.places {

   max-height: 0;

   opacity: 0;

   overflow: hidden;

   transition:
      max-height .4s ease,
      opacity .3s ease;

}

.item.active .places {

   max-height: 600px;

   opacity: 1;

   margin-top: 10px;

}

/* =====================================
   زیرمجموعه ها و مکان ها
===================================== */

.item {
   margin-top: 10px;
}

.sub-category {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 16px;
   background: #f8fafc;
   border-radius: 14px;
   cursor: pointer;
   transition: .3s;
}

.sub-category:hover {
   background: #eff6ff;
}

.sub-title {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 700;
   color: #0f172a;
}

.sub-icon {
   font-size: 14px;
   color: #22c55e;
}

.sub-count {
   font-size: 12px;
   color: #94a3b8;
   margin-top: 3px;
}

.sub-arrow {
   font-size: 18px;
   color: #64748b;
   transition: .3s;
}

.item.active .sub-arrow {
   transform: rotate(180deg);
}

/* لیست مکان ها */

.places {
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   transition: max-height .4s ease, opacity .3s ease;
}

.item.active .places {
   max-height: 350px;
   overflow-y: auto;
   opacity: 1;
   margin-top: 10px;
   padding-right: 4px;
}

.item.active .places::-webkit-scrollbar {
   width: 5px;
}

.item.active .places::-webkit-scrollbar-thumb {
   background: #cbd5e1;
   border-radius: 20px;
}

.place-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px;
   margin-top: 8px;
   background: white;
   border-radius: 12px;
   border: 1px solid #e5e7eb;
   cursor: pointer;
   transition: .25s;
}

.place-item:hover {
   background: #eff6ff;
   transform: translateX(-4px);
}

.place-item i {
   color: #2563eb;
   font-size: 16px;
}