:root{
  --tw-radius: 18px;
  --tw-shadow: 0 10px 30px rgba(0,0,0,.25);
  --tw-border: 1px solid rgba(255,255,255,.08);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
a{ color: var(--wp--preset--color--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ width: min(1120px, calc(100% - 32px)); margin-inline:auto; }

.site-header{
  position: sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(56,63,28,.75);
  border-bottom: var(--tw-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.nav a{ display:inline-block; padding:10px 12px; border-radius:12px; }
.nav a:hover{ background: rgba(255,255,255,.06); text-decoration:none; }

.hero{ padding:18px 0 6px; }
.hero h1{ font-size: clamp(1.7rem, 4vw, 2.4rem); line-height:1.15; margin:0 0 10px; }
.meta{ color: var(--wp--preset--color--muted); font-size:.95rem; }

.grid{ display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 720px){ .grid.cols-2{ grid-template-columns: repeat(2,1fr); } .grid.cols-3{ grid-template-columns: repeat(2,1fr);} }
@media (min-width: 1024px){ .grid.cols-3{ grid-template-columns: repeat(3,1fr);} }

.card{
  background: var(--wp--preset--color--surface);
  border: var(--tw-border);
  border-radius: var(--tw-radius);
  box-shadow: var(--tw-shadow);
  overflow:hidden;
}
.card-body{ padding:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 14px; border-radius:14px;
  border: var(--tw-border);
  background: rgba(55,214,198,.16);
  color: var(--wp--preset--color--text);
  font-weight:700;
}
.btn:hover{ background: rgba(55,214,198,.24); text-decoration:none; }

.btn-agoda{ background: rgba(255,176,32,.16); }
.btn-agoda:hover{ background: rgba(255,176,32,.26); }

.tw-breadcrumbs{ margin: 12px 0 0; }
.tw-breadcrumbs ol{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:8px;
  color: var(--wp--preset--color--muted); font-size:.95rem;
}
.tw-breadcrumbs li::after{ content:"/"; margin-left:8px; opacity:.6; }
.tw-breadcrumbs li:last-child::after{ content:""; margin:0; }
.tw-breadcrumbs a{ color: var(--wp--preset--color--muted); }
.tw-breadcrumbs a:hover{ color: var(--wp--preset--color--text); text-decoration:none; }

@media (min-width: 980px){
  .tw-single-grid{ grid-template-columns: 1fr 340px; }
  .tw-aside{ position: sticky; top: 86px; }
}

.tw-skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.tw-skip-link:focus{
  position:fixed; left:12px; top:12px;
  width:auto; height:auto; padding:10px 12px;
  border-radius:12px; background: rgba(55,214,198,.20);
  border: var(--tw-border); color: var(--wp--preset--color--text);
  z-index:9999;
}

/* Home destination chips */
.tw-chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tw-chip{
  display:inline-flex; align-items:center;
  padding:10px 12px; border-radius:999px;
  border: var(--tw-border);
  background: rgba(255,255,255,.06);
  color: var(--wp--preset--color--text);
  text-decoration:none;
  font-weight: 800;
}
.tw-chip:hover{ background: rgba(255,255,255,.10); text-decoration:none; }

/* Live total line on hotel card */
.tw-live-total{
  display:block;
  margin-top:6px;
  opacity:.85;
}

/* External image loading: stable box + subtle fade-in (no CLS) */
.tw-img-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
  background: rgba(255,255,255,.06);
}
.tw-img-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.10), rgba(255,255,255,.04));
  background-size: 200% 100%;
  animation: tw-shimmer 1.1s ease-in-out infinite;
}
.tw-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .32s ease, transform .45s ease;
}
.tw-img-wrap.is-loaded::before{ display:none; }
.tw-img-wrap.is-loaded .tw-img{
  opacity:1;
  transform: scale(1);
}
@keyframes tw-shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .tw-img-wrap::before{ animation:none; }
  .tw-img{ transition:none; }
}

/* Mobile-first Live Price Picker */
.tw-price-picker{ margin:14px 0 18px; }
.tw-price-picker__inner{ display:flex; flex-direction:column; gap:12px; }
.tw-price-picker__row{ display:flex; gap:10px; flex-wrap:wrap; }
.tw-price-picker__field{ display:flex; flex-direction:column; gap:6px; flex:1 1 140px; min-width:140px; }
.tw-price-picker__field span{ font-size:12px; opacity:.75; }

.tw-price-picker__inner input[type="date"],
.tw-price-picker__inner select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--wp--preset--color--text);
  min-height:44px;
}

.tw-price-picker__guests{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}

.tw-price-picker__actions{ display:flex; flex-direction:column; gap:8px; }
.tw-price-picker__btnrow{ display:flex; gap:10px; }
.tw-price-picker__actions .btn{ width:100%; justify-content:center; min-height:46px; }
.tw-price-picker__note{ opacity:.75; font-size:12px; line-height:1.35; }
.tw-price-picker__total{ margin-top:-6px; opacity:.8; }

.tw-btn-ghost{ background: rgba(255,255,255,.06); }
.tw-btn-ghost:hover{ background: rgba(255,255,255,.10); }

@media (max-width: 520px){
  .tw-price-picker__btnrow{ flex-direction:column; }
}

/* Kids ages chips */
.tw-children-ages{ display:none; }
.tw-children-ages.is-active{ display:block; }
.tw-children-ages__label{ font-size:12px; opacity:.75; margin-bottom:6px; }
.tw-children-ages__scroller{
  display:flex; gap:12px; overflow:auto; padding-bottom:6px;
  -webkit-overflow-scrolling: touch;
}
.tw-children-ages__item{
  flex: 0 0 auto;
  min-width: 260px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.03);
}
.tw-child-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.tw-child-label{ font-size:12px; opacity:.8; }
.tw-child-selected{ font-size:14px; font-weight:800; }
.tw-age-chip-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:8px;
}
.tw-age-chip{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--wp--preset--color--text);
  border-radius: 999px;
  padding: 10px 0;
  min-height: 40px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.tw-age-chip.is-active{
  background: rgba(55,214,198,.22);
  border-color: rgba(55,214,198,.38);
}

@media (min-width: 900px){
  .tw-price-picker__actions{ flex-direction:row; align-items:end; }
  .tw-price-picker__actions .btn{ width:auto; padding-inline:18px; }
  .tw-children-ages__item{ min-width: 300px; }
  .tw-age-chip-grid{ grid-template-columns: repeat(9, minmax(0,1fr)); }
}



.tw-hero-slider{
  margin: 18px 0 8px;
}

.tw-slider-track{
  display:flex;
  gap:16px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding: 6px 2px 12px;
  -webkit-overflow-scrolling: touch;
}

.tw-slide{
  scroll-snap-align:start;
  min-width: min(86vw, 520px);
}

@media (min-width: 720px){
  .tw-slide{ min-width: 520px; }
}

.tw-slider-controls{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin: 8px 0 0;
}

/* Prevent scrollbar ugliness without breaking accessibility too much */
.tw-slider-track::-webkit-scrollbar{ height: 10px; }
.tw-slider-track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 20px; }


.tw-price-picker__inner{
  display:grid;
  gap:10px;
}

.tw-price-picker__inner label span{
  display:block;
  font-size:12px;
  opacity:.75;
  margin-bottom:4px;
}

.tw-price-picker__inner input[type="date"],
.tw-price-picker__inner select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--wp--preset--color--text);
}

.tw-price-picker__note{
  opacity:.75;
  font-size:12px;
  line-height:1.3;
}

@media (min-width: 720px){
  .tw-price-picker__inner{
    grid-template-columns: 1fr 1fr 120px 120px 120px auto;
    align-items:end;
  }
  .tw-price-picker__note{
    grid-column: 1 / -1;
  }
}




.tw-stars{
  display:inline-flex;
  gap:3px;
  vertical-align:middle;
}

.tw-star{
  display:inline-flex;
}

.tw-star svg{
  width:14px;
  height:14px;
  fill:#d4af37; /* gold */
}

/* Empty stars */
.tw-star-empty svg{
  fill:rgba(212,175,55,0.25);
}

/* Half star effect */
.tw-star-half{
  position:relative;
}
.tw-star-half svg{
  fill:rgba(212,175,55,0.25);
}
.tw-star-half::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:50%;
  height:100%;
  background:#d4af37;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.5l2.9 5.88 6.5.95-4.7 4.58 1.1 6.47L10 16.9l-5.8 3.48 1.1-6.47L.6 8.33l6.5-.95L10 1.5z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.5l2.9 5.88 6.5.95-4.7 4.58 1.1 6.47L10 16.9l-5.8 3.48 1.1-6.47L.6 8.33l6.5-.95L10 1.5z"/></svg>') no-repeat center / contain;
}

.tw-rating-number{
  margin-left:6px;
  font-size:0.9rem;
  font-weight:600;
  vertical-align:middle;
}


/* Hotel card image wrapper */
.tw-hotel-thumb{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3; /* Change ratio if you want */
  overflow:hidden;
  background: rgba(255,255,255,.05);
}

/* Image fills container */
.tw-hotel-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .4s ease;
}

/* Optional subtle hover effect */
.tw-hotel-card:hover .tw-hotel-thumb img{
  transform: scale(1.04);
}

/* Fallback if no image */
.tw-hotel-thumb-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  font-size:30px;
  opacity:.6;
}





.tw-hero-slider-wrap{ padding: 14px 0 6px; }
.tw-hero-slider-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.tw-hero-slider-title{ margin:0; font-size:1.2rem; }
.tw-hero-slider-actions{ display:flex; gap:10px; }

.tw-slider-track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 12px 2px 10px;
}
.tw-slide-item{
  flex: 0 0 84%;
  scroll-snap-align:start;
}
@media (min-width: 720px){
  .tw-slide-item{ flex-basis: 44%; }
}
@media (min-width: 1024px){
  .tw-slide-item{ flex-basis: 30%; }
}

/* Slide card clickable */
.tw-slide-link{ display:block; color:inherit; text-decoration:none; }
.tw-slide-link:hover{ text-decoration:none; }

/* Fixed image height via aspect ratio */
.tw-slide-thumb{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background: rgba(255,255,255,.05);
}
.tw-slide-thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.tw-slide-thumb-fallback{
  height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; opacity:.65;
}

.tw-slide-title{ margin:0 0 6px; font-size:1.05rem; line-height:1.25; }
.tw-slide-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tw-dot{ opacity:.6; }
.tw-slide-price{ margin-top:10px; font-weight:800; }
.tw-slide-cta{ margin-top:12px; }
.tw-slide-cta .btn-agoda{ pointer-events:none; width:100%; justify-content:center; }

/* Load more */
.tw-slider-footer{
  display:flex; gap:12px; align-items:center; justify-content:flex-start;
  padding: 6px 2px 0;
}



/* Card shell */
.card.tw-hotel-card{
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  box-shadow: var(--tw-shadow);
  overflow: hidden;
}

/* Make whole card clickable */
.tw-hotel-card .tw-hotel-link{
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: var(--tw-text);
}

/* Fixed image area to keep grid neat even if image loads slow */
.tw-hotel-card .tw-hotel-thumb{
  background: rgba(234,240,255,.05);
  aspect-ratio: 16/10;
  width: 100%;
  overflow: hidden;
}

/* Image fits nicely */
.tw-hotel-card .tw-hotel-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform .18s ease, filter .18s ease;
}

/* Fallback thumb */
.tw-hotel-card .tw-hotel-thumb-fallback{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--tw-muted);
  font-size: 28px;
}

/* Body spacing */
.tw-hotel-card .card-body{
  padding: 14px 14px 16px;
}

/* Meta line (country + rating) */
.tw-hotel-card .meta{
  font-size: .9rem;
  color: var(--tw-muted);
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Rating number */
.tw-hotel-card .tw-rating-number{
  margin-left: 6px;
  color: var(--tw-text);
  font-weight: 700;
  font-size: .9rem;
  opacity: .95;
}

/* Button look (your markup uses <span class="btn btn-agoda">) */
.tw-hotel-card .btn.btn-agoda{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 11px 14px;
  border-radius: 14px;
  width: 100%;

  background: linear-gradient(135deg, rgba(55,214,198,.92), rgba(255,176,32,.92));
  color: #0b1b14;
  font-weight: 800;
  letter-spacing: .2px;

  border: 1px solid rgba(234,240,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);

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

/* Hover/focus states */
.tw-hotel-card:hover{
  border-color: var(--tw-border-strong);
}

.tw-hotel-card:hover .tw-hotel-thumb img{
  transform: scale(1.03);
  filter: saturate(1.05);
}

.tw-hotel-card:hover .btn.btn-agoda{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

.tw-hotel-card .tw-hotel-link:focus-visible{
  outline: 3px solid rgba(55,214,198,.55);
  outline-offset: 3px;
  border-radius: var(--tw-radius);
}

/* Mobile-friendly text */
.tw-hotel-card h3{
  color: var(--tw-text);
}

/* Make star icons (from tw_render_star_rating) match gold accent */
.tw-hotel-card .tw-stars,
.tw-hotel-card .tw-stars svg{
  color: var(--tw-accent2);
  fill: var(--tw-accent2);
}

/* If your star function outputs spans with a class, this covers it too */
.tw-hotel-card .star,
.tw-hotel-card .stars{
  color: var(--tw-accent2);
}



.tw-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

@media(max-width:900px){
  .tw-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:520px){
  .tw-grid{ grid-template-columns:1fr; }
}

.tw-hotel-card{
  overflow:hidden;
}

.tw-hotel-image-wrap{
  display:block;
  aspect-ratio:16/10;
  background:rgba(255,255,255,.05);
}

.tw-hotel-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tw-hotel-content{
  padding:14px;
}

.tw-hotel-title{
  margin:0 0 6px;
  font-size:1rem;
}

.tw-hotel-location{
  font-size:.85rem;
  color:var(--tw-muted);
  margin-bottom:8px;
}

.tw-hotel-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:.8rem;
  margin-bottom:10px;
  color:var(--tw-muted);
}

.tw-hotel-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.tw-hotel-price{
  font-weight:700;
}

.tw-agoda-btn{
  padding:9px 14px;
  border-radius:12px;
  text-decoration:none;
  background:var(--tw-accent2);
  color:#111;
  font-weight:600;
}

.tw-agoda-btn:hover{
  opacity:.9;
}


.tw-pagination{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-items:center;
  margin:28px 0;
}

.tw-page-btn{
  min-width:38px;
  padding:9px 12px;
  text-align:center;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;

  background:rgba(234,240,255,.05);
  border:1px solid var(--tw-border);
  color:var(--tw-text);

  transition:all .15s ease;
}

.tw-page-btn:hover{
  border-color:var(--tw-border-strong);
  background:rgba(55,214,198,.12);
  transform:translateY(-1px);
}

.tw-page-btn.is-active{
  background:var(--tw-accent2);
  color:#111;
  border-color:var(--tw-accent2);
  font-weight:800;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.tw-page-dots{
  padding:0 6px;
  color:var(--tw-muted);
  font-weight:600;
}

.tw-prev,
.tw-next{
  font-weight:700;
}