/* ═══════════════════════════════════════════════════════════════
   LUXURY ENHANCEMENT PATCH
   تقویت لوکس: تیترها، حاشیه‌های تزئینی، بهینه‌سازی موبایل
   ═══════════════════════════════════════════════════════════════ */

/* ─── GOLD COLOR TOKENS ─── */
:root {
  --gold: #c9a96e;
  --gold-light: #e8d4a8;
  --gold-dark: #9a7a44;
  --gold-glow: rgba(201, 169, 110, 0.18);
  --gold-line: rgba(201, 169, 110, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   1. LUXURY SECTION TAG
   برچسب بخش‌ها — خط زیرین به خط طلایی تبدیل می‌شود
   ═══════════════════════════════════════════════════════════════ */
.section-tag {
  color: var(--gold);
  border-bottom-color: var(--gold);
  letter-spacing: 6px;
  font-size: 0.62rem;
  text-shadow: 0 0 20px var(--gold-glow);
}

/* ═══════════════════════════════════════════════════════════════
   2. ARABESQUE TITLE UPGRADE
   تیترهای arabesqeبا خطوط طلایی ظریف‌تر
   ═══════════════════════════════════════════════════════════════ */
.arabesque-title {
  padding: 0 4.5rem;
  letter-spacing: -0.5px;
}
.arabesque-title::before,
.arabesque-title::after {
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
  opacity: 1;
  top: 52%;
}
.arabesque-title::after {
  background: linear-gradient(to left, transparent, var(--gold));
}

/* ═══════════════════════════════════════════════════════════════
   3. ORNAMENT DIVIDER UPGRADE
   تزئین‌های بین بخشی با رنگ طلایی واقعی
   ═══════════════════════════════════════════════════════════════ */
.ornament {
  color: var(--gold);
  letter-spacing: 6px;
  font-size: 0.7rem;
  opacity: 0.9;
}
.ornament::before,
.ornament::after {
  background: linear-gradient(to right, transparent, var(--gold-line));
  height: 1px;
  max-width: 100px;
}
.ornament::after {
  background: linear-gradient(to left, transparent, var(--gold-line));
}

/* ═══════════════════════════════════════════════════════════════
   4. GOLD LINE UPGRADE
   خط طلایی دکوراتیو
   ═══════════════════════════════════════════════════════════════ */
.gold-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--gold), transparent);
  opacity: 1;
  position: relative;
}
.gold-line::after {
  content: "◆";
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 0.4rem;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   5. HERO ORNAMENT
   تزئین هرو با رنگ‌های طلایی
   ═══════════════════════════════════════════════════════════════ */
.hero-orn-line {
  background: linear-gradient(to right, transparent, var(--gold-line));
  width: 90px;
}
.hero-orn-line.rev {
  background: linear-gradient(to left, transparent, var(--gold-line));
}
.hero-orn-diamond {
  border-color: var(--gold-line);
  width: 7px;
  height: 7px;
}
.hero-badge {
  border-color: var(--gold-line);
  color: var(--gold-light);
  letter-spacing: 6px;
  font-size: 0.65rem;
}

/* ═══════════════════════════════════════════════════════════════
   6. INTRO ORNAMENT
   تزئین صفحه ورودی
   ═══════════════════════════════════════════════════════════════ */
.intro-orn-line {
  background: linear-gradient(
    to right,
    transparent,
    var(--gold-line)
  ) !important;
}
.intro-orn-line.rev {
  background: linear-gradient(
    to left,
    transparent,
    var(--gold-line)
  ) !important;
}
.intro-orn span {
  color: var(--gold) !important;
}
.intro-progress {
  background: linear-gradient(
    to right,
    var(--gold-dark),
    var(--gold)
  ) !important;
  height: 1px !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. SCROLL BAR → GOLD
   نوار اسکرول به رنگ طلایی
   ═══════════════════════════════════════════════════════════════ */
#scroll-bar {
  background: linear-gradient(to right, var(--gold-dark), var(--gold));
  height: 1.5px;
}

/* ═══════════════════════════════════════════════════════════════
   8. SECTION TITLE REFINEMENT
   تیترها با کرنینگ و فاصله بهتر
   ═══════════════════════════════════════════════════════════════ */
.section-title {
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.section-title-dark {
  letter-spacing: -0.5px;
  line-height: 1.15;
}

/* ═══════════════════════════════════════════════════════════════
   9. VENUE INTRO BADGE UPGRADE
   بج تصویر با رنگ‌های طلایی
   ═══════════════════════════════════════════════════════════════ */
.venue-img-badge {
  border-right-color: var(--gold);
  letter-spacing: 3px;
  font-size: 0.68rem;
}
.venue-img-frame {
  box-shadow:
    20px 20px 0 rgba(201, 169, 110, 0.12),
    0 0 60px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   10. VENUE CARD BADGE UPGRADE
   بج کارت تالارها با رنگ طلایی
   ═══════════════════════════════════════════════════════════════ */
.venue-card-badge {
  border-bottom-color: var(--gold);
}
.venue-tag {
  border-color: rgba(201, 169, 110, 0.3);
  color: rgba(201, 169, 110, 0.7);
}

/* ═══════════════════════════════════════════════════════════════
   11. SECTION TAG — DARK SECTIONS
   برچسب در بخش‌های تاریک
   ═══════════════════════════════════════════════════════════════ */
.gal-kicker,
.vtour-kicker {
  color: var(--gold);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   12. STORY STEP TAG
   برچسب مرحله در timeline داستان
   ═══════════════════════════════════════════════════════════════ */
.story-step {
  color: var(--gold);
}
.story-tag {
  border-color: rgba(201, 169, 110, 0.3);
  color: var(--gold);
}
.story-node-year {
  color: var(--gold-light);
}
.story-node-circle {
  border-color: rgba(201, 169, 110, 0.4);
}
.story-item.visible .story-node-circle {
  border-color: var(--gold);
  box-shadow:
    0 0 0 6px rgba(6, 6, 8, 0.8),
    0 0 30px rgba(201, 169, 110, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   13. PRICING PACKAGE NAME
   نام بسته‌های قیمتی
   ═══════════════════════════════════════════════════════════════ */
.p-name {
  color: var(--gold);
}
.p-badge {
  background: var(--gold-dark);
}
.p-features li::before {
  color: var(--gold);
}
.p-card.featured .p-features li {
  border-color: rgba(201, 169, 110, 0.1);
}
.p-card.featured {
  border-color: rgba(201, 169, 110, 0.25);
}
.p-card.featured .p-btn {
  border-color: var(--gold);
  color: var(--gold-light);
}
.p-card.featured .p-btn:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  box-shadow: 0 0 30px rgba(201, 169, 110, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   14. CONTACT SECTION
   بخش تماس
   ═══════════════════════════════════════════════════════════════ */
.c-lbl {
  color: var(--gold);
}
.c-icon {
  box-shadow: 0 0 18px rgba(201, 169, 110, 0.15);
}
.c-method {
  border-bottom-color: rgba(201, 169, 110, 0.1);
}
.contact-form-box {
  border-top-color: var(--gold-dark);
  border-top-width: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   15. FOOTER COLUMN TITLES
   عنوان‌های ستون فوتر
   ═══════════════════════════════════════════════════════════════ */
.footer-col h5 {
  color: var(--gold);
}
.soc:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 14px rgba(201, 169, 110, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   16. VIRTUAL TOUR
   تور مجازی
   ═══════════════════════════════════════════════════════════════ */
.vtour-scene-btn.active,
.vtour-scene-btn:hover {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(201, 169, 110, 0.15);
}
.vtour-scene-dot {
  background: var(--gold);
}
.vtour-scene-btn.active .vtour-scene-dot {
  box-shadow: 0 0 8px var(--gold);
}
.vtour-ctrl-btn:hover {
  border-color: var(--gold);
}
.vtour-minimap-cursor {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(201, 169, 110, 0.3);
}
.vtour-info-num {
  color: var(--gold-light);
}
.vtour-info-card:hover {
  border-color: rgba(201, 169, 110, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   17. GALLERY UPGRADE
   گالری
   ═══════════════════════════════════════════════════════════════ */
.gal-meta-tag {
  color: var(--gold-light);
}
.gal-tab::after {
  background: var(--gold);
}
.gal-tab.active,
.gal-tab:hover {
  color: var(--gold-light);
}

/* ═══════════════════════════════════════════════════════════════
   18. WEATHER SECTION
   بخش آب‌وهوا
   ═══════════════════════════════════════════════════════════════ */
.wc-day.best {
  background: rgba(201, 169, 110, 0.15);
}
.wc-day.best:hover {
  background: rgba(201, 169, 110, 0.3);
  box-shadow: 0 0 14px rgba(201, 169, 110, 0.2);
}
.wc-day.selected {
  background: var(--gold-dark) !important;
  box-shadow: 0 0 20px rgba(201, 169, 110, 0.3);
}
.wc-day.best .wc-day-dot {
  background: var(--gold);
}
.wl-dot.best {
  background: var(--gold);
}
.wsb-fill {
  background: linear-gradient(to right, var(--gold-dark), var(--gold));
}
.weather-tip {
  background: rgba(201, 169, 110, 0.06);
  border-color: rgba(201, 169, 110, 0.18);
}
.weather-tip-head {
  color: var(--gold-light);
}

/* ═══════════════════════════════════════════════════════════════
   19. MATCHER SECTION
   بخش انتخاب بسته
   ═══════════════════════════════════════════════════════════════ */
.matcher-step-lbl.done {
  color: var(--gold);
}
.matcher-opt:hover {
  border-color: rgba(201, 169, 110, 0.4);
}
.matcher-opt.selected {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.04);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12);
}
.result-feat::before {
  color: var(--gold);
}
.result-badge {
  background: rgba(201, 169, 110, 0.08);
  border-color: rgba(201, 169, 110, 0.2);
  color: var(--gold-dark);
}

/* ═══════════════════════════════════════════════════════════════
   20. TESTIMONIAL UPGRADE
   بخش نظرات مشتریان
   ═══════════════════════════════════════════════════════════════ */
.t-quote {
  color: var(--gold);
  opacity: 0.2;
}
.t-stars {
  color: var(--gold);
}
.t-avatar {
  border-color: rgba(201, 169, 110, 0.35);
}
.t-card:hover {
  border-color: rgba(201, 169, 110, 0.25);
  box-shadow: 0 0 30px rgba(201, 169, 110, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   21. STAT STRIP GOLD TOUCH
   نوار آمارها با لمس طلایی
   ═══════════════════════════════════════════════════════════════ */
.stat-num {
  text-shadow: 0 0 30px rgba(201, 169, 110, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   22. AMBIENT GLOW → GOLD
   درخشش محیطی طلایی
   ═══════════════════════════════════════════════════════════════ */
.amb-glow {
  background: radial-gradient(
    circle,
    rgba(201, 169, 110, 0.05) 0%,
    transparent 68%
  );
}

/* ═══════════════════════════════════════════════════════════════
   23. CURSOR RING → GOLD
   حلقه مکان‌نما به رنگ طلایی
   ═══════════════════════════════════════════════════════════════ */
#cur-ring {
  border-color: rgba(201, 169, 110, 0.45);
}
#cur-ring.hovering {
  border-color: rgba(201, 169, 110, 0.8);
}

/* ═══════════════════════════════════════════════════════════════
   24. NAV HOVER LINE → GOLD
   خط هاور منوی ناوبری
   ═══════════════════════════════════════════════════════════════ */
nav a::after {
  background: var(--gold);
}
nav a:hover {
  color: var(--black);
}

/* ═══════════════════════════════════════════════════════════════
   25. HOTSPOT PINS → GOLD
   پین‌های tour مجازی
   ═══════════════════════════════════════════════════════════════ */
.vtour-pin {
  background: rgba(201, 169, 110, 0.2);
  border-color: var(--gold);
}
.vtour-pin-ring {
  border-color: rgba(201, 169, 110, 0.3);
}
.vtour-tooltip {
  border-color: rgba(201, 169, 110, 0.25);
}
.vtour-tooltip::after {
  border-top-color: rgba(201, 169, 110, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ENHANCEMENTS — بهینه‌سازی موبایل
   ═══════════════════════════════════════════════════════════════ */

/* ─── HAMBURGER MENU BUTTON ─── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 1001;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--charcoal);
  transition: all 0.3s ease;
  transform-origin: right center;
}
.nav-toggle.open span:nth-child(1) {
  transform: rotate(-45deg) translateY(0px);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.open span:nth-child(3) {
  transform: rotate(45deg) translateY(0px);
}

@media (max-width: 768px) {
  /* ── Hamburger visible on mobile ── */
  .nav-toggle {
    display: flex;
  }

  /* ── Mobile nav drawer ── */
  nav {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -100%;
    width: min(280px, 80vw);
    height: 100vh;
    background: rgba(247, 247, 245, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 5rem 2.5rem 3rem;
    gap: 0;
    z-index: 999;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-left: 1px solid rgba(201, 169, 110, 0.12);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.08);
  }
  nav.open {
    right: 0;
  }
  nav a {
    padding: 1rem 0;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    letter-spacing: 1px;
  }
  nav a::after {
    display: none;
  }
  nav a:last-child {
    border-bottom: none;
  }

  /* Nav overlay */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 998;
    backdrop-filter: blur(2px);
  }
  .nav-overlay.open {
    display: block;
  }

  /* ── Header ── */
  header {
    padding: 0.85rem 1.2rem !important;
  }
  .cta-header {
    display: none;
  }

  /* ── Hero ── */
  .hero-title {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    line-height: 1.12 !important;
  }
  .hero-sub {
    font-size: 0.9rem !important;
    line-height: 1.85 !important;
  }
  .hero-badge {
    font-size: 0.58rem !important;
    letter-spacing: 4px !important;
    padding: 0.35rem 1.2rem !important;
  }
  .hero-orn-line {
    width: 45px !important;
  }

  /* ── Section titles ── */
  .section-title,
  .section-title-dark {
    font-size: 1.4rem !important;
    letter-spacing: -0.3px !important;
  }
  .section-tag {
    font-size: 0.56rem !important;
    letter-spacing: 4px !important;
  }
  .arabesque-title {
    padding: 0 2rem !important;
  }
  .arabesque-title::before,
  .arabesque-title::after {
    width: 1.5rem !important;
  }

  /* ── Ornament on mobile: simpler ── */
  .ornament {
    letter-spacing: 4px;
    font-size: 0.6rem;
  }
  .ornament::before,
  .ornament::after {
    max-width: 60px;
  }

  /* ── Venue intro two-col → single ── */
  .venue-intro-inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .venue-intro-wrap {
    padding: 4rem 1.2rem !important;
  }
  .venue-img-frame {
    height: 300px !important;
    box-shadow: 8px 8px 0 rgba(201, 169, 110, 0.1) !important;
  }
  .venue-img-badge {
    font-size: 0.62rem !important;
    letter-spacing: 2px !important;
    padding: 0.5rem 1rem !important;
  }

  /* ── Venues ── */
  .venues-wrap {
    padding-bottom: 2rem;
  }
  .venues-grid {
    grid-template-columns: 1fr !important;
    gap: 1.4rem !important;
    padding: 0 1.2rem 3rem !important;
  }
  .venues-header {
    padding: 3rem 1.2rem 2rem !important;
  }
  .venue-card img {
    height: 300px !important;
  }
  .venue-card-title {
    font-size: 1.3rem !important;
  }

  /* ── Stats strip ── */
  .stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  .stat-num {
    font-size: 2rem !important;
  }
  .stat-lbl {
    font-size: 0.6rem !important;
    letter-spacing: 1.5px !important;
  }

  /* ── Pricing ── */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 1.2rem !important;
  }
  .p-card {
    padding: 2.2rem 1.4rem !important;
  }
  .p-amount {
    font-size: 2.6rem !important;
  }

  /* ── Contact ── */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  .contact-inner {
    padding: 3.5rem 1.2rem 5rem !important;
  }
  .contact-form-box {
    padding: 2rem 1.2rem !important;
  }

  /* ── Footer ── */
  footer {
    padding: 4rem 1.2rem 2.5rem !important;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem !important;
  }
  .footer-brand {
    grid-column: span 2;
  }
  .footer-logo {
    font-size: 1.8rem !important;
  }

  /* ── Gallery tabs ── */
  .gal-tabs {
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding: 2rem 1.2rem 1.2rem !important;
    scrollbar-width: none !important;
  }
  .gal-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .gal-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0.65rem 1.2rem !important;
  }
  .gal-title {
    font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
  }
  .gal-film-item img {
    height: 220px !important;
  }

  /* ── Hero scroll indicator ── */
  .hero-scroll {
    display: none;
  }

  /* ── Lightbox on mobile ── */
  .lb-close {
    top: 1rem;
    left: 1rem;
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  .lightbox img {
    max-width: 96vw;
    max-height: 82vh;
  }

  /* ── Form fields ── */
  .fld input,
  .fld select,
  .fld textarea {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 0.9rem 1rem !important;
  }
  .fld select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 1rem center;
  }

  /* ── CTA button full-width on mobile ── */
  .btn-dark,
  .btn-ghost {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
  }

  /* ── Submit button ── */
  .submit-btn {
    font-size: 0.82rem !important;
    padding: 1.1rem !important;
    letter-spacing: 2px !important;
  }
}

/* ─── Extra-small (< 380px) ─── */
@media (max-width: 380px) {
  .hero-title {
    font-size: 1.8rem !important;
  }
  .section-title,
  .section-title-dark {
    font-size: 1.4rem !important;
  }
  .stats-inner {
    gap: 1rem !important;
  }
  .stat-num {
    font-size: 1.7rem !important;
  }
  .footer-top {
    grid-template-columns: 1fr !important;
  }
  .footer-brand {
    grid-column: span 1;
  }
  .p-card {
    padding: 1.8rem 1.1rem !important;
  }
  .venue-img-frame {
    height: 240px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   26. LUXURY MICRO DETAILS
   جزئیات ریز لوکس
   ═══════════════════════════════════════════════════════════════ */

/* Gallery film strip items hover glow */
.gal-film-item:hover {
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(201, 169, 110, 0.25) !important;
}

/* Story timeline vertical line → gold */
.story-timeline::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 169, 110, 0.2) 10%,
    rgba(201, 169, 110, 0.2) 90%,
    transparent 100%
  ) !important;
}

/* Venue card hover ring → gold */
.venue-card:hover {
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(201, 169, 110, 0.15) !important;
}

/* Service cards hover */
.svc-card:hover {
  border-color: rgba(201, 169, 110, 0.2) !important;
}

/* Pricing card hover */
.p-card:hover {
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(201, 169, 110, 0.12) !important;
}

/* form field focus → gold */
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.12) !important;
}

/* CTA header button → subtle gold glow on hover */
.cta-header:hover {
  box-shadow: 0 8px 28px rgba(201, 169, 110, 0.15) !important;
}