/* Do Thailand OTA booking CTA — sitewide source of truth for /guides/stay/*.
   The editorial card stays neutral; only action buttons use OTA brand identity colours. */

.ota-runtime-container{width:min(calc(100% - 48px),780px);margin-inline:auto;}
.do-thailand-ota-card{
  margin:44px 0 64px;
  padding:26px;
  border:1px solid var(--line);
  border-top:4px solid var(--thai-gold);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(23,38,64,.055);
}
.do-thailand-ota-card .ota-eyebrow{
  margin:0 0 7px;
  color:var(--thai-gold-deep);
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.do-thailand-ota-card h3{
  margin:0 0 8px!important;
  color:var(--thai-indigo-deep);
  font-family:Newsreader,Georgia,serif;
  font-size:25px!important;
  line-height:1.25!important;
}
.do-thailand-ota-card .ota-copy{
  max-width:680px;
  margin:0 0 17px!important;
  color:#596579;
  font-size:14px!important;
  line-height:1.65!important;
}
.do-thailand-ota-card .ota-buttons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.do-thailand-ota-card .ota-button{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:11px 14px;
  border:0;
  border-radius:10px;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
  text-align:center;
  text-decoration:none!important;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
.do-thailand-ota-card .ota-button:hover{
  transform:translateY(-1px);
  filter:brightness(.97);
  box-shadow:0 6px 14px rgba(23,38,64,.14);
}
.do-thailand-ota-card .ota-button:focus-visible{
  outline:3px solid rgba(181,137,54,.42);
  outline-offset:3px;
}
/* Booking.com brand blue. */
.do-thailand-ota-card .ota-booking{background:#003B95;color:#fff!important;}
/* Agoda product-action blue; dark text keeps the button readable at small sizes. */
.do-thailand-ota-card .ota-agoda{background:#5392F9;color:#20274D!important;}
/* Expedia Group brand system uses deep blues with a yellow accent. */
.do-thailand-ota-card .ota-expedia{background:#FFC60B;color:#020247!important;}
.do-thailand-ota-card .ota-disclosure{
  display:block;
  margin-top:12px;
  color:#7B8491;
  font-size:10.5px;
  line-height:1.5;
}

/* Retire the old single-provider-looking purple Stay22 card on stay pages.
   The Worker injects this stylesheet only on /guides/stay/* article routes. */
.stay22-card{display:none!important;}

/* Compatibility for verified hotel galleries that use direct figure children.
   The primary article-media component uses .article-media-track; this shim gives
   older/direct markup the same desktop grid and mobile touch-swipe behavior. */
.article-page .article-hotel-gallery:not(:has(>.article-media-track)){
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
.article-page .article-hotel-gallery:not(:has(>.article-media-track))>.article-media{
  margin:0!important;
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  background:#fff!important;
  scroll-snap-align:start!important;
}
.article-page .article-hotel-gallery:not(:has(>.article-media-track))>.article-media img{
  display:block!important;
  width:100%!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
}
.article-page .article-media-cover:not(:has(.article-media-card))>img{
  display:block!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  border-radius:16px!important;
  box-shadow:0 14px 36px rgba(23,38,64,.11)!important;
}

@media(max-width:640px){
  .ota-runtime-container{width:min(calc(100% - 32px),780px);}
  .do-thailand-ota-card{margin-top:38px;margin-bottom:52px;padding:21px 19px;}
  .do-thailand-ota-card h3{font-size:22px!important;}
  .do-thailand-ota-card .ota-buttons{grid-template-columns:1fr;}
  .do-thailand-ota-card .ota-button{min-height:50px;font-size:14px;}
  .article-page .article-hotel-gallery:not(:has(>.article-media-track)){
    display:flex!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    padding:0 12vw 10px 0!important;
  }
  .article-page .article-hotel-gallery:not(:has(>.article-media-track))>.article-media{
    flex:0 0 86%!important;
    scroll-snap-align:start!important;
  }
  .article-page .article-hotel-gallery:not(:has(>.article-media-track))>.article-media img{aspect-ratio:16/10!important;}
}