/* index.css
   Page-level stylesheet. Imports section styles for maintainability.
*/

@import url('./index/inline-styles.css');
@import url('./index/section-01.css');
@import url('./index/section-02.css');
@import url('./index/section-03.css');
@import url('./index/section-04.css');
@import url('./index/section-05.css');
@import url('./index/section-06.css');
@import url('./index/section-07.css');
@import url('./index/section-08.css');
@import url('./index/section-09.css');
@import url('./index/section-10.css');
@import url('./index/section-11.css');
@import url('./index/section-12.css');
@import url('./index/section-13.css');
@import url('./index/section-14.css');
@import url('./index/section-15.css');
@import url('./index/section-16.css');
@import url('./index/section-17.css');
@import url('./index/section-18.css');
@import url('./index/section-19.css');
@import url('./index/section-20.css');
@import url('./index/section-21.css');
@import url('./index/section-22.css');
@import url('./index/section-23.css');
@import url('./index/section-24.css');
@import url('./index/section-25.css');
@import url('./index/section-26.css');
@import url('./index/section-27.css');
@import url('./index/section-28.css');
@import url('./index/section-29.css');
@import url('./index/section-30.css');
@import url('./index/section-31.css');
@import url('./index/section-32.css');
@import url('./index/section-33.css');
@import url('./index/section-34.css');
@import url('./index/section-35.css');
@import url('./index/section-36.css');
@import url('./index/section-37.css');
@import url('./index/section-38.css');
@import url('./index/section-39.css');
@import url('./index/section-40.css');
@import url('./index/section-41.css');
@import url('./index/section-42.css');
@import url('./index/section-43.css');
@import url('./index/section-44.css');
@import url('./index/section-45.css');
@import url('./index/section-46.css');
@import url('./index/section-47.css');
@import url('./index/section-48.css');
@import url('./index/section-49.css');




/* V4: Price box size + placement (bottom-right like reference) */
[data-role="hero-pricebox"]{
  position: absolute !important;
  right: 24px !important;
  bottom: 22px !important;
  left: auto !important;
  top: auto !important;

  width: min(620px, 86%) !important;
  padding: 26px 28px !important;
  border-radius: 28px !important;

  background: rgba(78, 149, 190, 0.38) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);
  z-index: 5 !important;
}
/* internal typography */
[data-role="hero-pricebox"] *{ text-align: center; }
[data-role="hero-pricebox"] .price-amount,
[data-role="hero-pricebox"] .price,
[data-role="hero-pricebox"] strong{
  font-size: 34px !important;
  line-height: 1.15 !important;
}
[data-role="hero-pricebox"] .price-label,
[data-role="hero-pricebox"] .subtitle{
  font-size: 16px !important;
  opacity: 0.95;
}
@media (max-width: 640px){
  [data-role="hero-pricebox"]{
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    bottom: 12px !important;
    padding: 18px 18px !important;
    border-radius: 20px !important;
  }
  [data-role="hero-pricebox"] .price-amount,
  [data-role="hero-pricebox"] .price,
  [data-role="hero-pricebox"] strong{ font-size: 28px !important; }
}



/* V4: Theme parks card bottom row alignment (Best for + CTA) */
.yas-theme-parks .card,
.theme-parks-section .card,
.theme-parks-grid .park-card{
  display: flex;
  flex-direction: column;
}

.yas-theme-parks .card .card-body,
.theme-parks-section .card .card-body,
.theme-parks-grid .park-card .card-body{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.yas-theme-parks .card .tp-bestfor,
.theme-parks-section .card .tp-bestfor,
.theme-parks-grid .park-card .tp-bestfor{
  margin-top: auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}

.yas-theme-parks .card .tp-cta,
.theme-parks-section .card .tp-cta,
.theme-parks-grid .park-card .tp-cta{
  margin-top: 10px;
  padding-bottom: 8px;
}

.yas-theme-parks .card,
.theme-parks-section .card,
.theme-parks-grid .park-card{
  overflow: visible;
}

/* === REBUILD: HERO VIDEO PRICE BOX (NEW) === */
.hero-video{ position:relative; }
.hero-video .hero-pricebox-new{
  position:absolute !important;
  right:24px !important;
  bottom:16px !important;
  top:auto !important;
  left:auto !important;
  z-index:25 !important;
  width:min(360px, 46vw) !important;
  padding:18px 22px !important;
  border-radius:18px !important;
  border:1px solid rgba(130, 200, 255, .55) !important;
  background:rgba(18, 56, 78, .35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  text-align:center !important;
  pointer-events:none !important;
}
.hero-video .hero-pricebox-new .hpbn-top{
  font-weight:600 !important;
  color:#ffffff !important;
  opacity:.95 !important;
  margin:0 0 8px 0 !important;
  line-height:1.2 !important;
}
.hero-video .hero-pricebox-new .hpbn-price{
  font-weight:800 !important;
  color:#20e38a !important;
  font-size:34px !important;
  line-height:1.1 !important;
  margin:0 0 10px 0 !important;
  white-space:nowrap !important;
}
.hero-video .hero-pricebox-new .hpbn-bottom{
  font-weight:600 !important;
  color:#ffffff !important;
  opacity:.95 !important;
  margin:0 !important;
  line-height:1.2 !important;
}

/* === REBUILD: THEME PARKS CARDS (NEW) === */
#theme-parks .tp-grid.tp-grid-new{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}
@media (max-width: 1200px){
  #theme-parks .tp-grid.tp-grid-new{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px){
  #theme-parks .tp-grid.tp-grid-new{ grid-template-columns: 1fr !important; }
}

#theme-parks .tp-card-new{
  border-radius:22px !important;
  overflow:hidden !important;
  background:rgba(15, 24, 44, .85) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.35) !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:520px !important;
}

#theme-parks .tp-cardnew-imgwrap{
  height:210px !important;
  background:#0b1326 !important;
}
#theme-parks .tp-cardnew-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

#theme-parks .tp-cardnew-body{
  padding:22px 22px 20px !important;
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}

#theme-parks .tp-cardnew-title{
  margin:0 0 10px 0 !important;
  font-size:24px !important;
  line-height:1.15 !important;
  color:#fff !important;
  font-weight:800 !important;
}
#theme-parks .tp-cardnew-desc{
  margin:0 !important;
  color:rgba(255,255,255,.78) !important;
  line-height:1.5 !important;
  min-height:96px !important;
}
#theme-parks .tp-cardnew-spacer{ flex:1 1 auto !important; }

#theme-parks .tp-cardnew-bestfor{
  margin:18px 0 12px 0 !important;
  color:rgba(255,255,255,.78) !important;
  font-size:13px !important;
}
#theme-parks .tp-cardnew-cta{
  display:block !important;
  text-align:center !important;
  padding:12px 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(90, 170, 255, .45) !important;
  background:rgba(20, 45, 85, .65) !important;
  color:#eaf3ff !important;
  font-weight:700 !important;
  text-decoration:none !important;
  margin-top:auto !important;
}