/* =============================================================================
   Persian Touring — "Persian Glass" Design System
   iOS 26 Liquid Glass × Iranian Carpet Color Palette
   
   Accent:    Crimson  #8B1A1A  (lacquer red)
   Secondary: Lapis    #1A3A5C  (lajvardi blue)
   Gold:      Saffron  #C19A3A  (khordali gold)
   Surface:   Cream    #F5F0E8  (persian parchment)
   ============================================================================= */

/* ── 1. CSS Custom Properties ─────────────────────────────────────────────── */
:root {
  --pt-crimson:        #8B1A1A;
  --pt-crimson-light: #B02828;
  --pt-crimson-glow:  rgba(139, 26, 26, 0.18);
  --pt-lapis:         #1A3A5C;
  --pt-lapis-light:   #234E7A;
  --pt-gold:          #C19A3A;
  --pt-gold-light:    #D4AF50;
  --pt-cream:         #F5F0E8;
  --pt-cream-dark:    #EDE6D6;
  --pt-glass:         rgba(245, 240, 232, 0.62);
  --pt-glass-strong:  rgba(245, 240, 232, 0.85);
  --pt-glass-border:  rgba(193, 154, 58, 0.25);
  --pt-text:          #1C1510;
  --pt-text-muted:    rgba(28, 21, 16, 0.55);
  --pt-blur:          blur(24px) saturate(160%);
  --pt-radius-lg:     24px;
  --pt-radius-md:     16px;
  --pt-radius-sm:     10px;
  --pt-shadow:        0 8px 32px rgba(26, 21, 14, 0.12);
  --pt-shadow-lg:     0 16px 48px rgba(26, 21, 14, 0.18);
  --pt-transition:    all 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── 2. Global Base ───────────────────────────────────────────────────────── */
body {
  background-color: var(--pt-cream) !important;
  color: var(--pt-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Lato", sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(139,26,26,0.07), transparent),
    radial-gradient(ellipse 70% 70% at 85% 90%, rgba(26,58,92,0.07), transparent),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(193,154,58,0.04), transparent);
  pointer-events: none;
}

a { color: var(--pt-crimson); transition: var(--pt-transition); }
a:hover { color: var(--pt-gold); text-decoration: none; }

h1, h2, h3, h4, h5 {
  color: var(--pt-lapis) !important;
  font-weight: 700 !important;
}

/* ── 3. Header & Navigation ────────────────────────────────────────────────── */
#header {
  background: var(--pt-glass) !important;
  -webkit-backdrop-filter: var(--pt-blur) !important;
  backdrop-filter: var(--pt-blur) !important;
  border-bottom: 1px solid var(--pt-glass-border) !important;
  box-shadow: 0 2px 20px rgba(26,21,14,0.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  transition: var(--pt-transition) !important;
}

#h1ader .container,
#header .main-navigation { background: transparent !important; }

#header .logo.navbar-brand img { filter: none; }

/* Nav links */
#header .main-navigation #main-menu > ul > li > a,
#header .main-navigation nav > ul > li > a {
  color: var(--pt-lapis) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
  padding: 8px 14px !important;
  border-radius: var(--pt-radius-sm) !important;
  transition: var(--pt-transition) !important;
}
#header .main-navigation #main-menu > ul > li > a:hover,
#header .main-navigation #main-menu > ul > li.current-menu-item > a {
  color: var(--pt-crimson) !important;
  background: rgba(139,26,26,0.08) !important;
}

/* Submenu */
#header .main-navigation .sub-menu {
  background: var(--pt-glass-strong) !important;
  -webkit-backdrop-filter: var(--pt-blur) !important;
  backdrop-filter: var(--pt-blur) !important;
  border: 1px solid var(--pt-glass-border) !important;
  border-radius: var(--pt-radius-md) !important;
  box-shadow: var(--pt-shadow-lg) !important;
  padding: 8px !important;
}
#header .main-navigation .sub-menu li a {
  color: var(--pt-lapis) !important;
  border-radius: var(--pt-radius-sm) !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
  transition: var(--pt-transition) !important;
}
#header .main-navigation .sub-menu li a:hover {
  background: rgba(139,26,26,0.08) !important;
  color: var(--pt-crimson) !important;
}

/* Header buttons */
#header button.btn-medium,
#header .btn-medium {
  border-radius: var(--pt-radius-md) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
  border: none !important;
  transition: var(--pt-transition) !important;
}
#header button.blue-bg,
#header .blue-bg {
  background: linear-gradient(135deg, var(--pt-crimson), var(--pt-crimson-light)) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px var(--pt-crimson-glow) !important;
}
#header button.blue-bg:hover { transform: translateY(-1px); box-shadow: 0 5px 18px var(--pt-crimson-glow) !important; }
#header button:not(.blue-bg) {
  background: rgba(193,154,58,0.12) !important;
  color: var(--pt-gold) !important;
  border: 1px solid rgba(193,154,58,0.35) !important;
}

/* ── 4. Page Title Bar ────────────────────────────────────────────────────── */
.page-title-container {
  background: linear-gradient(135deg, var(--pt-lapis), var(--pt-crimson) 150%) !important;
  border-bottom: none !important;
  padding: 28px 0 !important;
}
.page-title-container .entry-title,
.page-title-container h2 { color: #fff !important; }
.page-title-container .breadcrumbs li,
.page-title-container .breadcrumbs a { color: rgba(255,255,255,0.75) !important; }
#h──────────────────────────────────────────────────────── */
.page-title-container .breadcrumbs li.active { color: rgba(255,255,255,0.95) !important; }

/* ── 5. Buttons Global ────────────────────────────────────────────────────── */
.button,
.btn,
input[type="submit"],
button[type="submit"],
.btn-large,
.btn-medium,
.btn-small {
  border-radius: var(--pt-radius-md) !important;
  font-weight: 600 !important;
  transition: var(--pt-transition) !important;
  border: none !important;
  cursor: pointer !important;
}

/* Primary red button */
.button.green,
.button.blue-bg,
.btn.green,
.btn.blue-bg,
.green-bg,
.blue-bg:not(#header *) {
  background: linear-gradient(135deg, var(--pt-crimson), var(--pt-crimson-light)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px var(--pt-crimson-glow) !important;
}

.button.green:hover, .button.blue-bg:hover, .btn.green:hover, .btn.blue-bg:hover, .green-bg:hover, .blue-bg:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px var(--pt-crimson-glow) !important;
  color: #fff !important;
}

/* Gold/outline buttons */
.button.yellow-bg, .yellow-bg:not(figure):not(div) {
  background: linear-gradient(135deg, var(--pt-gold), var(--pt-gold-light)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(193,154,58,0.3) !important;
}
.button.yellow-bg:hover { transform: translateY(-1px) !important; }

/* Default button  */
.button:not(.green):not(.blue-bg):not(.yellow-bg):not(.btn-add-wishlist):not(.btn-remove-wishlist) {
  background: rgba(26,58,92,0.1) !important;
  color: var(--pt-lapis) !important;
  border: 1px solid rgba(26,58,92,0.2) !important;
}
.button:not(.green):not(.blue-bg):not(&yellow-bg):hover {
  background: var(--pt-lapis) !important;
  color: #fff !important;
}

/* ── 6. Cards & Listing Boxes ─────────────────────────────────────────────── */
.image-box .box,
.image-box.box,
.listing-style1 article.box,
.listing-style3 .box,
.listing-style2 .box,
.travelo-box {
  background: var(--pt-glass) !important;
  -webkit-backdrop-filter: var(--pt-blur) !important;
  backdrop-filter: var(--pt-blur) !important;
  border: 1px solid var(--pt-glass-border) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow) !important;
  transition: var(--pt-transition) !important;
  overflow: hidden !important;
}
.image-box .box:hover,
.image-box.box:hover,
.listing-style1 article.box:hover,
.listing-style3 .box:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--pt-shadow-lg) !important;
  border-color: rgba(193,154,58,0.4) !important;
}

.image-box .box figure,
.listing-style1 article figure,
.listing-style3 article figure { border-radius: var(--pt-radius-lg) var(--pt-radius-lg) 0 0 !important; overflow: hidden !important; }

.image-box .box .details,
.listing-style1 article .details,
.listing-style3 .box .details { background: transparent !important; padding: 16px 18px !important; }

.box-title a,
.image-box .box-title a { color: var(--pt-lapis) !important; font-weight: 700 !important; }
.box-title a:hover { color: var(--pt-crimson) !important; }

.price, .listing-style1 .price, .listing-style3 .price { color: var(--pt-crimson) !important; font-weight: 700 !important; }

/* ── 7. Tab Containers ────────────────────────────────────────────────────── */
.tab-container {
  background: var(--pt-glass) !important;
  -webkit-backdrop-filter: var(--pt-blur) !important;
  backdrop-filter: var(--pt-blur) !important;
  border: 1px solid var(--pt-glass-border) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow) !important;
  overflow: visible !important;
}

.tab-container .tabs {
  background: transparent !important;
  border-bottom: 1px solid var(--pt-glass-border) !important;
  padding: 0 16px !important;
  display: flex !important;
  gap: 4px !important;
}

.tab-container .tabs li a {
  color: var(--pt-text-muted) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  border-radius: var(--pt-radius-sm) var(--pt-radius-sm) 0 0 !important;
  border: none !important;
  background: transparent !important;
  transition: var(--pt-transition) !important;
}
.tab-container .tabs li a:hover { color: var(--pt-crimson) !important; background: rgba(139,26,26,0.06) !important; }
.tab-container .tabs li.active a {
  color: var(--pt-crimson) !important;
  background: rgba(139,26,26,0.08) !important;
  border-bottom: 2px solid var(--pt-crimson) !important;
}

.tab-container .tab-content { padding: 20px !important; }

/* ── 8. Sidebar & Detailed Logo Box ──────────────────────────────────────── */
article.detailed-logo,
.sidebar .travelo-box,
.sidebar .widget {
  background: var(--pt-glass) !important;
  -webkit-backdrop-filter: var(--pt-blur) !important;
  backdrop-filter: var(--pt-blur) !important;
  border: 1px solid var(--pt-glass-border) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

.sidebar .widgettitle,
.sidebar h2.widgettitle { color: var(--pt-lapis) !important; font-size: 16px !important; border-bottom: 2px solid var(--pt-gold) !important; padding-bottom: 10px !important; margin-bottom: 14px !important; }

/* ── 9. Search Box / Filter Bar ───────────────────────────────────────────── */
.search-box,
.update-search,
.filter-box {
  background: var(--pt-glass) !important;
  -webkit-backdrop-filter: var(--pt-blur) !important;
  backdrop-filter: var(--pt-blur) !important;
  border: 1px solid var(--pt-glass-border) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow) !important;
}

/* ── 10. Global Input Styling ─────────────────────────────────────────────── */
input[type="text"]:not(.ios-glass-form *),
input[type="email"]:not(.ios-glass-form *),
input[type="number"]:not(.ios-glass-form *),
input[type="password"],
input[type="tel"],
input[type="search"],
select,
textarea {
  background: rgba(245,240,232,0.6) !important;
  border: 1px solid rgba(193,154,58,0.25) !important;
  border-radius: var(--pt-radius-md) !important;
  color: var(--pt-text) !important;
  padding: 10px 14px !important;
  transition: var(--pt-transition) !important;
  font-family: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(139,26,26,0.45) !important;
  box-shadow: 0 0 0 4px rgba(139,26,26,0.12) !important;
  background: rgba(255,255,255,0.85) !important;
}

/* ── 11. Section Backgrounds & Parallax Blocks ────────────────────────────── */
#content { background: transparent !important; }
.section { background: transparent !important; }

.parallax_block,
.parallax-block {
  position: relative !important;
}
.parallax_block .container,
.parallax-block .container {
  position: relative;
  z-index: 1;
}

/* ── 12. Cover Block (Homepage Hero) ─────────────────────────────────────── */
.wp-block-cover {
  border-radius: var(--pt-radius-lg) !important;
  overflow: hidden !important;
  margin-bottom: 32px !important;
  box-shadow: var(--pt-shadow-lg) !important;
}
.wp-block-cover h1,
.wp-block-cover .wp-block-heading { text-shadow: 0 2px 12px rgba(0,0,0,0.4) !important; }

/* ── 13. Gallery Block (Destination Cards) ────────────────────────────────── */
.wp-block-gallery .wp-block-image {
  border-radius: var(--pt-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--pt-shadow) !important;
  transition: var(--pt-transition) !important;
}
.wp-block-gallery .wp-block-image:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: var(--pt-shadow-lg) !important;
}
.wp-block-gallery figcaption {
  background: linear-gradient(to top, rgba(26,58,92,0.85), transparent) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 24px 14px 12px !important;
}

/* ── 14. Columns Block (Why Travel / Services) ─────────────────────────────── */
.wp-block-columns .wp-block-column {
  background: var(--pt-glass) !important;
  -webkit-backdrop-filter: var(--pt-blur) !important;
  backdrop-filter: var(--pt-blur) !important;
  border: 1px solid var(--pt-glass-border) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow) !important;
  padding: 24px 20px !important;
  transition: var(--pt-transition) !important;
}
.wp-block-columns .wp-block-column:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(193,154,58,0.4) !important;
}

/* ── 15. Buttons Block (WordPress) ───────────────────────────────────────── */
.wp-block-button__link {
  background: linear-gradient(135deg, var(--pt-crimson), var(--pt-crimson-light)) !important;
  color: #fff !important;
  border-radius: var(--pt-radius-md) !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px var(--pt-crimson-glow) !important;
  transition: var(--pt-transition) !important;
  border: none !important;
}
.wp-block-button__link:hover {
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px var(--pt-crimson-glow) !important;
}

/* ── 16. Five Stars Rating ────────────────────────────────────────────────── */
.five-stars { background-color: var(--pt-gold) !important; }

/* ── 17. Price Tags ────────────────────────────────────────────────────── */
.detailed-logo .price span.pull-right,
.price { color: var(--pt-crimson) !important; font-weight: 700 !important; }

/* ── 18. Separator & HR ───────────────────────────────────────────────────── */
.wp-block-separator,
hr { border-color: rgba(193,154,58,0.2) !important; }

/* ── 19. Section Headings with Gold Underline ─────────────────────────────── */
.wp-block-heading[style] {
  position: relative !important;
  padding-bottom: 10px !important;
}

/* ── 20. Amenity Icons ────────────────────────────────────────────────────── */
.amenities li { border-color: rgba(193,154,58,0.15) !important; }
.icon-box .icon i, .icon-box .icon [class^="soap-icon"] { color: var(--pt-crimson) !important; }

/* ── 21. Review Stars & Feedback ──────────────────────────────────────────── */
.feedback .review { color: var(--pt-text-muted) !important; }

/* ── 22. Footer ───────────────────────────────────────────────────────────── */
#footer {
  background: linear-gradient(160deg, var(--pt-lapis) 0%, #0E2236 100%) !important;
  border-top: 3px solid var(--pt-gold) !important;
  color: rgba(245,240,232,0.8) !important;
}
#footer .widgettitle, #footer h2 { color: var(--pt-gold) !important; border-color: rgba(193,154,58,0.3) !important; }
#footer a { color: rgba(245,240,232,0.75) !important; transition: var(--pt-transition) !important; }
#footer a:hover { color: var(--pt-gold) !important; }
#footer .footer-wrapper { padding: 48px 0 24px !important; }
.bottom-footer { background: rgba(0,0,0,0.25) !important; border-top: 1px solid rgba(193,154,58,0.15) !important; padding: 16px 0 !important; color: rgba(245,240,232,0.5) !important; }

/* ── 23. Social Icons ─────────────────────────────────────────────────────── */
.social-icons li a { background: rgba(245,240,232,0.1) !important; border-radius: 50% !important; color: rgba(245,240,232,0.7) !important; transition: var(--pt-transition) !important; }
.social-icons li a:hover { background: var(--pt-gold) !important; color: var(--pt-lapis) !important; transform: translateY(-2px) !important; }

/* ── 24. Mobile Navigation ────────────────────────────────────────────────── */
.mobile-menu {
  background: var(--pt-glass-strong) !important;
  -webkit-backdrop-filter: var(--pt-blur) !important;
  backdrop-filter: var(--pt-blur) !important;
  border-bottom: 1px solid var(--pt-glass-border) !important;
}
.mobile-menu a { color: var(--pt-lapis) !important; font-weight: 600 !important; }
.mobile-menu a:hover, ble-menu .current-menu-item > a { color: var(--pt-crimson) !important; }
.mobile-menu-toggle { color: var(--pt-lapis) !important; }

/* ── 25. Pagination ───────────────────────────────────────────────────────── */
.pagination li a,
.pagination li span {
  border-radius: var(--pt-radius-sm) !important;
  border: 1px solid var(--pt-glass-border) !important;
  background: var(--pt-glass) !important;
  color: var(--pt-lapis) !important;
  transition: var(--pt-transition) !important;
}
.pagination li a:hover,
.pagination li.active span {
  background: var(--pt-crimson) !important;
  color: #fff !important;
  border-color: var(--pt-crimson) !important;
}

/* ── 26. Scrollbar ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--pt-cream-dark); }
::-webkit-scrollbar-thumb { background: var(--pt-gold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pt-crimson); }

/* ── 27. Selection ────────────────────────────────────────────────────────── */
(selection { background: rgba(193,154,58,0.25); color: var(--pt-lapis); }

/* ── 28. Persian Ornamental Pattern (subtle background texture) ────────────── */
.wp-block-cover::after,
.page-title-container::after {
  content: "";
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(circle at 25% 50%, rgba(193,154,58,0.06) 0%, transparent 40%),
    radial-gradient(circle at 75% 50%, rgba(139,26,26,0.05) 0%, transparent 40%);
  pointer-events: none !important;
  z-index: 1 !important;
}
.wp-block-cover .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* ── 29. Listing Archive Header (Hotels/Tours page) ──────────────────────── */
.slideshow-bg,
.hero-section { position: relative; }

/* ── 30. Detailed Hotel Sidebar Price Box ─────────────────────────────────── */
article.detailed-logo .price { font-size: 1.5em !important; }
article.detailed-logo .box-title { font-size: 1.25em !important; color: var(--pt-lapis) !important; }

/* ── 31. Tag & Badge Chips ────────────────────────────────────────────────── */
.label, .badge, .tag {
  background: rgba(139,26,26,0.1) !important;
  color: var(--pt-crimson) !important;
  border-radius: var(--pt-radius-sm) !important;
  font-weight: 600 !important;
}

/* ── 32. Map Tab ──────────────────────────────────────────────────────────── */
#map-tab { border-radius: var(--pt-radius-md) !important; overflow: hidden !important; }

/* ── 33. Alert Messages ───────────────────────────────────────────────────── */
.alert-error { background: rgba(139,26,26,0.08) !important; border-color: rgba(139,26,26,0.3) !important; color: var(--pt-crimson) !important; border-radius: var(--pt-radius-sm) !important; }
.alert-success { background: rgba(52,199,89,0.08) !important; border-color: rgba(52,199,89,0.3) !important; border-radius: var(--pt-radius-sm) !important; }

/* ── 34. FAQ Accordion ─────────────────────────────────────────────────────── */
.toggle-container .panel {
  border: 1px solid var(--pt-glass-border) !important;
  border-radius: var(--pt-radius-md) !important;
  margin-bottom: 8px !important;
  background: var(--pt-glass) !important;
  overflow: hidden !important;
}
.toggle-container .panel .panel-heading { background: transparent !important; }
.toggle-container .panel .panel-heading a { color: var(--pt-lapis) !important; font-weight: 600 !important; }
.toggle-container .panel .panel-heading a:hover { color: var(--pt-crimson) !important; }

/* ── 35. WhatsApp Button ─────────────────────────────────────────────────── */
.joinchat { z-index: 990 !important; }

/* ── 36. Image Hover Effect ────────────────────────────────────────────────── */
figure .hover-effect::after { background: rgba(139,26,26,0.15) !important; }

/* ── 37. Detailed Rating Bars ─────────────────────────────────────────────── */
.each-rating .five-stars-container .five-stars { background: var(--pt-gold) !important; }

/* ── 38. Persian Pattern Accent Line ─────────────────────────────────────── */
. main-navigation {
  border-top: 2px solid transparent !important;
  background-image: linear-gradient(90deg, var(--pt-lapis), transparent 30%, transparent 70%, var(--pt-crimson)) !important;
  background-size: 100% 2px !important;
  background-repeat: no-repeat !important;
  background-position: top !important;
}

/* ── 39. Mobile Responsive Adjustments ───────────────────────────────────── */
@media (max-width: 767px) {
  .image-box .box, .listing-style1 article.box, .travelo-box { border-radius: var(--pt-radius-md) !important; }
  .tab-container { border-radius: var(--pt-radius-md) !important; }
  .page-title-container { padding: 20px 0 !important; }
}

@media (min-width: 768px) {
  #header { position: sticky !important; top: 0 !important; }
}

/* ── 40. Transition Smoothing ─────────────────────────────────────────────── */
*, *::before, *::after { -webkit-font-smoothing: antialiased; }


/* =============================================================================
   Persian Glass v2 — Enhanced Patch
   ✦ Deeper glass effect on all cards + sidebar
   ✦ CSS parallax on hero sections
   ✦ Scroll reveal animations (pure CSS, animation-timeline: view())
   ✦ Persian carpet ornamental elements (border patterns, arabesque motifs)
   ✦ Hide signup/login buttons (not delete)
   ============================================================================= */

/* ── HIDE SIGNUP/LOGIN (not delete) ─────────────────────────────────────────── */
#header .pull-right.hidden-mobile button[data-target="#travelo-signup"],
#header .pull-right.hidden-mobile button[data-target="#travelo-login"],
#header .topnav .quick-menu li a[href="#travelo-login"] {
  display: none !important;
}
#header .pull-right.hidden-mobile {
  display: none !important;
}

/* ── DEEPER GLASS — cards, sidebar, boxes ────────────────────────────────────── */
.image-box .box,
.image-box.box,
.listing-style1 article.box,
.listing-style3 .box,
.listing-style2 .box,
.travelo-box,
article.detailed-logo,
.sidebar .travelo-box,
.sidebar .widget,
.tab-container,
.search-box,
.update-search,
.filter-box,
.hotel-price-inquiry-form,
.wp-block-columns .wp-block-column {
  background: rgba(253, 248, 240, 0.45) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.08) !important;
  backdrop-filter: blur(32px) saturate(200%) brightness(1.08) !important;
  border: 1px solid rgba(193, 154, 58, 0.35) !important;
  box-shadow:
    0 8px 32px rgba(26, 21, 14, 0.14),
    0 2px 8px rgba(26, 21, 14, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(193, 154, 58, 0.12) !important;
}

/* hover — more glow */
.image-box .box:hover,
.image-box.box:hover,
.listing-style1 article.box:hover,
.listing-style3 .box:hover {
  background: rgba(255, 252, 245, 0.65) !important;
  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.12) !important;
  backdrop-filter: blur(40px) saturate(220%) brightness(1.12) !important;
  border-color: rgba(193, 154, 58, 0.55) !important;
  box-shadow:
    0 20px 56px rgba(26, 21, 14, 0.18),
    0 4px 16px rgba(139, 26, 26, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(193, 154, 58, 0.2) !important;
  transform: translateY(-6px) !important;
}

/* header glass */
#header {
  background: rgba(245, 240, 232, 0.72) !important;
  -webkit-backdrop-filter: blur(36px) saturate(200%) !important;
  backdrop-filter: blur(36px) saturate(200%) !important;
  box-shadow:
    0 2px 24px rgba(26, 21, 14, 0.1),
    inset 0 -1px 0 rgba(193, 154, 58, 0.2) !important;
}

/* ── PERSIAN ORNAMENTAL BOPDEP€on cards ──────────────────────────────────────── */
.listing-style1 article.box,
.listing-style3 .box,
article.detailed-logo {
  position: relative !important;
}

/* Top decorative rule — a thin lapis→gold→lapis gradient */
.listing-style1 article.box::before,
.listing-style3 .box::before,
article.detailed-logo::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--pt-lapis) 15%,
    var(--pt-gold) 35%,
    var(--pt-crimson) 50%,
    var(--pt-gold) 65%,
    var(--pt-lapis) 85%,
    transparent 100%
  ) !important;
  border-radius: 24px 24px 0 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
}

/* ── PERSIAN CARPET DIAMOND MOTIF — for sidebar & price box ─────────────────── */
article.detailed-logo::after {
  content: "" !important;
  position: absolute !important;
  bottom: 12px !important;
  right: 16px !important;
  width: 48px !important;
  height: 48px !important;
  background-image:
    /* outer diamond */
    linear-gradient(45deg, transparent 40%, rgba(193,154,58,0.35) 40%, rgba(193,154,58,0.35) 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, rgba(193,154,58,0.35) 40%, rgba(193,154,58,0.35) 60%, transparent 60%),
    /* inner cross */
    linear-gradient(0deg, transparent 45%, rgba(139,26,26,0.25) 45%, rgba(139,26,26,0.25) 55%, transparent 55%),
    linear-gradient(90deg, transparent 45%, rgba(139,26,26,0.25) 45%, rgba(139,26,26,0.25) 55%, transparent 55%) !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
  z-index: 1 !important;
}

/* ── PERSIAN CARPET TILE BACKGROUND — full page subtle texture ───────────────── */
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0.028 !important;
  background-image:
    /* diagonal lattice — the core carpet grid */
    repeating-linear-gradient(
      45deg,
      var(--pt-lapis) 0px, var(--pt-lapis) 1px,
      transparent 1px, transparent 28px
    ),
    repeating-linear-gradient(
      -45deg,
      var(--pt-lapis) 0px, var(--pt-lapis) 1px,
      transparent 1px, transparent 28px
    ),
    /* horizontal/vertical rules */
    repeating-linear-gradient(
      0deg,
      var(--pt-gold) 0px, var(--pt-gold) 1px,
      transparent 1px, transparent 56px
    ),
    repeating-linear-gradient(
      90deg,
      var(--pt-gold) 0px, var(--pt-gold) 1px,
      transparent 1px, transparent 56px
    ) !important;
}

/* ── ORNAMENTAL SECTION DIVIDER — between major page sections ────────────────── */
.wp-block-separator,
hr {
  border: none !important;
  height: 16px !important;
  background:
    /* center medallion dot */
    radial-gradient(circle at 50% 50%, var(--pt-crimson) 0%, var(--pt-crimson) 4px, transparent 4px),
    /* flanking dots */
    radial-gradient(circle at 25% 50%, var(--pt-gold) 0%, var(--pt-gold) 3px, transparent 3px),
    radial-gradient(circle at 75% 50%, var(--pt-gold) 0%, var(--pt-gold) 3px, transparent 3px),
    /* center line */
    linear-gradient(90deg,
      transparent 0%,
      var(--pt-lapis) 10%,
      var(--pt-gold) 30%,
      var(--pt-crimson) 50%,
      var(--pt-gold) 70%,
      var(--pt-lapis) 90%,
      transparent 100%
    ) !important;
  background-size: 100% 2px, 100% 2px, 100% 2px, 100% 100% !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat !important;
  margin: 28px 0 !important;
  opacity: 0.6 !important;
}

/* ── FOOTER ORNAMENTAL TOP BORDER ────────────────────────────────────────────── */
#footer {
  border-top: none !important;
  padding-top: 4px !important;
  position: relative !important;
}
#footer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 8px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--pt-lapis) 5%,
    var(--pt-gold) 20%,
    var(--pt-crimson) 35%,
    var(--pt-gold) 50%,
    var(--pt-crimson) 65%,
    var(--pt-gold) 80%,
    var(--pt-lapis) 95%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}

/* ── PAGE TITLE CONTAINER — Arabesque pattern overlay ────────────────────────── */
.page-title-container {
  position: relative !important;
  overflow: hidden !important;
}
.page-title-container::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(193,154,58,0.08) 0px, rgba(193,154,58,0.08) 1px,
      transparent 1px, transparent 18px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(193,154,58,0.08) 0px, rgba(193,154,58,0.08) 1px,
      transparent 1px, transparent 18px
    ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.page-title-container .container {
  position: relative !important;
  z-index: 1 !important;
}

/* ── HERO CSS PARALLAX ───────────────────────────────────────────────────────── */
/* Works on fixed-background sections from the Travelo theme */
.slideshow-bg,
.parallax-section,
[class*="parallax"] {
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* WordPress Cover block parallax */
.wp-block-cover.has-parallax,
.wp-block-cover {
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Fallback for mobile (fixed doesn't work well on iOS) */
@media (max-width: 767px) {
  .slideshow-bg,
  .wp-block-cover,
  .wp-block-cover.has-parallax,
  [class*="parallax"] {
    background-attachment: scroll !important;
  }
}

/* ── SCROLL REVEAL — Pure CSS (Intersection Observer via animation-timeline) ──── */
/* 
   Modern approach: animation-timeline: view() — supported in Chrome 115+, Edge 115+
   Fallback: elements start invisible with opacity:0 transform, then animate in
*/

/* Cards fade in from below as you scroll */
.listing-style1 article.box,
.listing-style3 .box,
.listing-style2 .box,
.image-box .box,
.wp-block-columns .wp-block-column,
.wp-block-gallery .wp-block-image,
.travelo-box:not(#header *):not(#footer *) {
  opacity: 0;
  transform: translateY(28px);
  animation: ptRevealUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}

/* Headings slide in from left */
h2.wp-block-heading,
.section h2:first-child,
.page-title-container .entry-title {
  animation: ptRevealLeft 0.55s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 55%;
}

/* Gallery images scale in */
.wp-block-gallery .wp-block-image {
  animation: ptRevealScale 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}

/* Stagger effect via nth-child */
.listing-style1 article:nth-child(2),
.wp-block-column:nth-child(2) { animation-delay: 0.08s; }
.listing-style1 article:nth-child(3),
.wp-block-column:nth-child(3) { animation-delay: 0.16s; }
.listing-style1 article:nth-child(4),
.wp-block-column:nth-child(4) { animation-delay: 0.24s; }

@keyframes ptRevealUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ptRevealLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ptRevealScale {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Browsers that don't support animation-timeline: fallback */
@supports not (animation-timeline: view()) {
  .listing-style1 article.box,
  .listing-style3 .box,
  .listing-style2 .box,
  .image-box .box,
  .wp-block-columns .wp-block-column,
  .wp-block-gallery .wp-block-image,
  .travelo-box:not(#header *):not(#footer *) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  h2.wp-block-heading,
  .section h2:first-child {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ── SIDEBAR GLASS ENHANCED ─────────────────────────────────────────────────── */
.sidebar .widget,
.sidebar .travelo-box,
article.detailed-logo {
  background: rgba(250, 244, 234, 0.55) !important;
  -webkit-backdrop-filter: blur(36px) saturate(180%) brightness(1.06) !important;
  backdrop-filter: blur(36px) saturate(180%) brightness(1.06) !important;
  border: 1px solid rgba(193, 154, 58, 0.4) !important;
  box-shadow:
    0 8px 28px rgba(26, 21, 14, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 1px 0 0 rgba(193, 154, 58, 0.1),
    inset -1px 0 0 rgba(193, 154, 58, 0.1) !important;
}

/* ── GOLD SHIMMER on sidebar headings ────────────────────────────────────────── */
.sidebar .widgettitle,
.sidebar h2.widgettitle {
  background: linear-gradient(90deg, var(--pt-lapis), var(--pt-crimson) 60%, var(--pt-gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  border-bottom: 2px solid var(--pt-gold) !important;
  padding-bottom: 8px !important;
}

/* ── CARD DETAILS AREA — light glass wash ────────────────────────────────────── */
.image-box .box .details,
.listing-style1 article .details,
.listing-style3 .box .details {
  background: linear-gradient(
    180deg,
    rgba(255,252,245,0.0) 0%,
    rgba(255,252,245,0.45) 100%
  ) !important;
  border-top: 1px solid rgba(193, 154, 58, 0.12) !important;
}

/* ── HOVER SHIMMER on nav items ──────────────────────────────────────────────── */
#header .main-navigation #main-menu > ul > li > a {
  position: relative !important;
  overflow: hidden !important;
}
#header .main-navigation #main-menu > ul > li > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--pt-gold), var(--pt-crimson)) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  transform: translateX(-50%) !important;
}
#header .main-navigation #main-menu > ul > li > a:hover::after,
#header .main-navigation #main-menu > ul > li.current-menu-item > a::after {
  width: 80% !important;
}

/* ── BUTTON PULSE GLOW on hover ──────────────────────────────────────────────── */
.button.green:hover,
.button.blue-bg:hover,
.btn.green:hover,
.green-bg:hover,
.blue-bg:not(#header *):hover,
input.wpcf7-submit:hover {
  animation: ptBtnGlow 1.4s ease-in-out infinite !important;
}
@keyframes ptBtnGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(139,26,26,0.35); }
  50%       { box-shadow: 0 6px 28px rgba(139,26,26,0.55), 0 0 0 4px rgba(193,154,58,0.15); }
}

/* ── PRICE TAG — Persian red badge ───────────────────────────────────────────── */
.listing-style1 .price,
.listing-style3 .price {
  background: linear-gradient(135deg, var(--pt-crimson), var(--pt-crimson-light)) !important;
  color: #fff !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  font-size: 0.9em !important;
  display: inline-block !important;
  box-shadow: 0 2px 8px rgba(139,26,26,0.25) !important;
}

/* ── FIVE STARS — gold shimmer ───────────────────────────────────────────────── */
.five-stars {
  background: linear-gradient(90deg, var(--pt-gold), #e8c86a, var(--pt-gold)) !important;
  background-size: 200% 100% !important;
  animation: ptGoldShimmer 3s ease-in-out infinite !important;
}
@keyframes ptGoldShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── CARPET BORDER CORNERS on tab-container (hotel page) ─────────────────────── */
.tab-container {
  position: relative !important;
}
.tab-container::before,
.tab-container::after {
  content: "" !important;
  position: absolute !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  z-index: 3 !important;
  opacity: 0.5 !important;
}
.tab-container::before {
  top: -1px !important;
  left: -1px !important;
  border-top: 3px solid var(--pt-gold) !important;
  border-left: 3px solid var(--pt-gold) !important;
  border-radius: 4px 0 0 0 !important;
}
.tab-container::after {
  top: -1px !important;
  right: -1px !important;
  border-top: 3px solid var(--pt-gold) !important;
  border-right: 3px solid var(--pt-gold) !important;
  border-radius: 0 4px 0 0 !important;
}

/* ── SMOOTH SCROLL BEHAVIOR ──────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth !important;
}

/* ── MOBILE adjustments ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .listing-style1 article.box::before,
  .listing-style3 .box::before {
    display: none !important;
  }
  body::after {
    display: none !important;
  }
}