/* OGAICE Experience Detail — frontend OTA layout. Light, theme-agnostic, self-contained. */
.ogaice-xp {
	--xp-ink: #1a1a1a;
	--xp-dim: #5a6470;
	--xp-line: #e5e8ec;
	--xp-teal: #0a7d6e;
	--xp-teal-d: #086a5d;
	--xp-star: #14b8a6;
	--xp-radius: 14px;
	max-width: 1180px;
	margin: 0 auto;
	color: var(--xp-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}
.ogaice-xp *, .ogaice-xp *::before, .ogaice-xp *::after { box-sizing: border-box; }

.ogaice-xp__crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--xp-dim); margin-bottom: 14px; }
.ogaice-xp__crumbs a { color: var(--xp-dim); text-decoration: none; }
.ogaice-xp__crumbs a:hover { color: var(--xp-teal); text-decoration: underline; }
.ogaice-xp__crumb-cur { color: var(--xp-ink); font-weight: 600; }

.ogaice-xp__title { font-size: 30px; line-height: 1.15; font-weight: 800; margin: 0 0 12px; color: var(--xp-ink); }

.ogaice-xp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; font-size: 14px; }
.ogaice-xp__stars { display: inline-flex; align-items: center; gap: 5px; }
.ogaice-xp__star { font-style: normal; color: #d3d8de; font-size: 16px; line-height: 1; }
.ogaice-xp__star.is-full, .ogaice-xp__star.is-half { color: var(--xp-star); }
.ogaice-xp__star.is-half { background: linear-gradient(90deg, var(--xp-star) 50%, #d3d8de 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ogaice-xp__stars b { margin-left: 4px; font-weight: 700; }
.ogaice-xp__pill { display: inline-flex; align-items: center; gap: 5px; color: var(--xp-dim); }
.ogaice-xp__pill--badge { color: #b7791f; }
.ogaice-xp__pill--guarantee { margin-left: auto; padding: 4px 10px; border: 1px solid var(--xp-line); border-radius: 8px; color: var(--xp-ink); }

.ogaice-xp__grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 26px; align-items: start; }

/* Gallery */
.ogaice-xp__gallery { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 12px; }
.ogaice-xp__gallery--empty { grid-template-columns: 1fr; }
.ogaice-xp__rail { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow: auto; }
.ogaice-xp__thumb { width: 84px; height: 84px; border-radius: 10px; border: 2px solid transparent; background-size: cover; background-position: center; cursor: pointer; padding: 0; flex: 0 0 auto; }
.ogaice-xp__thumb.is-active { border-color: var(--xp-teal); }
.ogaice-xp__stage { position: relative; border-radius: var(--xp-radius); overflow: hidden; background: #eef1f4; min-height: 320px; aspect-ratio: 3 / 2; }
.ogaice-xp__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ogaice-xp__stage > span { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa4af; font-size: 15px; }
.ogaice-xp__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: #333; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.ogaice-xp__nav--prev { left: 12px; } .ogaice-xp__nav--next { right: 12px; }

.ogaice-xp__body { margin-top: 22px; font-size: 15.5px; color: #2b2f36; }

/* Booking box */
.ogaice-xp__aside { position: sticky; top: 20px; }
.ogaice-xp__box { border: 1px solid var(--xp-line); border-radius: var(--xp-radius); padding: 20px; box-shadow: 0 8px 30px rgba(20,30,40,.06); background: #fff; }
.ogaice-xp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ogaice-xp__from { font-size: 15px; color: var(--xp-dim); }
.ogaice-xp__amount { font-size: 30px; font-weight: 800; }
.ogaice-xp__amount--ask { font-size: 22px; color: var(--xp-teal); }
.ogaice-xp__per { font-size: 15px; color: var(--xp-dim); }
.ogaice-xp__childrate { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 16px; font-size: 13px; color: var(--xp-dim); border: 1px solid var(--xp-line); border-radius: 8px; padding: 6px 10px; }

.ogaice-xp__pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ogaice-xp__hidden { display: grid; gap: 10px; margin-top: 10px; }
.ogaice-xp__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--xp-dim); }
.ogaice-xp__field input { border: 1px solid var(--xp-line); border-radius: 10px; padding: 11px 12px; font-size: 15px; color: var(--xp-ink); width: 100%; }
.ogaice-xp__field input:focus { outline: none; border-color: var(--xp-teal); box-shadow: 0 0 0 3px rgba(10,125,110,.12); }
.ogaice-xp__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.ogaice-xp__cta { display: block; width: 100%; margin-top: 16px; padding: 15px 16px; border: none; border-radius: 10px; background: var(--xp-teal); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .15s ease; }
.ogaice-xp__cta:hover { background: var(--xp-teal-d); }

.ogaice-xp__trust { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--xp-line); display: grid; gap: 12px; }
.ogaice-xp__trust li { font-size: 13.5px; color: #2b2f36; line-height: 1.45; }
.ogaice-xp__trust strong { color: var(--xp-ink); }

@media (max-width: 900px) {
	.ogaice-xp__grid { grid-template-columns: 1fr; }
	.ogaice-xp__aside { position: static; }
	.ogaice-xp__title { font-size: 24px; }
	.ogaice-xp__pill--guarantee { margin-left: 0; }
}
@media (max-width: 560px) {
	.ogaice-xp__gallery { grid-template-columns: 1fr; }
	.ogaice-xp__rail { flex-direction: row; max-height: none; }
}