/** * Multi-Day customer UI — premium neumorphism. * * Soft extruded surfaces with a paired light/dark shadow, inset states for * anything the customer can press into, and no hard borders. Mobile-first: * the base rules are the phone layout, breakpoints add the desktop columns. */ /* * Tokens are shared with .el-md-cal--neu and .el-md-cselect__menu because the * UI kit attaches the calendar popup and booking dropdowns to , outside * the page wrapper, so they can escape overflow and stacking contexts. */ .el-md, .el-md-cal--neu, .el-md-sheet, .el-md-cselect__menu { /* Fixed Multi-Day theme — never follow device Light/Dark Mode. */ color-scheme: light; /* Page wash + neumorphic surfaces — same base as One Day local neu. */ --md-bg: #e2f1f5; --md-surface: #e2f1f5; --md-ink: #1e2430; --md-ink-soft: #4a5563; --md-ink-faint: #667084; --md-accent: #1f7a63; --md-accent-soft: #dceee8; --md-danger: #b3261e; --md-warning: #8a5a06; --md-light: rgba(255, 255, 255, 0.9); --md-dark: rgba(126, 157, 166, 0.42); --md-out: -6px -6px 14px var(--md-light), 6px 6px 16px var(--md-dark); --md-out-sm: -3px -3px 7px var(--md-light), 3px 3px 8px var(--md-dark); --md-out-lg: -10px -10px 24px var(--md-light), 12px 12px 30px var(--md-dark); --md-in: inset -3px -3px 7px var(--md-light), inset 3px 3px 8px var(--md-dark); --md-in-deep: inset -5px -5px 12px var(--md-light), inset 5px 5px 14px var(--md-dark); --md-radius: 18px; --md-radius-sm: 12px; --md-radius-lg: 26px; } /* * Full page wash — WordPress themes often paint html/body AND the post * shell (article / .hentry / #page) white with radius + shadow. That * “large white centered box” is usually the theme content card, not * body. Neutralise those shells and keep wash continuous like One Day * (.el-od-site full-bleed, content column constrained inside). * body.el-md-view is added by EL_MD_Frontend::body_class; :has(.el-md) * covers html even if a cache strips the body class briefly. */ html:has(body.el-md-view), html:has(.el-md), body.el-md-view { background: #e2f1f5 !important; background-color: #e2f1f5 !important; } /* * Page title — soft embossed neumorphism instead of flat ink. Same * light-top-left / dark-bottom-right convention as --md-out so the title * reads as "carved" into the page wash rather than printed flat on top of it. */ body.el-md-view .wp-block-post-title { color: #1e2430; font-weight: 800; font-size: clamp(1.375rem, 1.05rem + 1.4vw, 1.85rem); line-height: 1.25; letter-spacing: -0.02em; text-shadow: -1px -1px 1px var(--md-light, rgba(255, 255, 255, 0.9)), 2px 2px 4px var(--md-dark, rgba(126, 157, 166, 0.42)), 3px 3px 10px rgba(126, 157, 166, 0.22); } body.el-md-view #page, body.el-md-view #content, body.el-md-view #primary, body.el-md-view #main, body.el-md-view .site, body.el-md-view .site-content, body.el-md-view .site-main, body.el-md-view .content-area, body.el-md-view .entry-content, body.el-md-view .ast-container, body.el-md-view .wp-site-blocks, body.el-md-view article.el-md-package, body.el-md-view .el-md-package, body.el-md-view .hentry { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* * Outer shell is full-bleed wash (no max-width “card”), like OD .el-od-site * (padding-x: 0). Content column gutters live on .el-md-package / .el-md-archive * via the same calc() widths as OD .el-od-concept — not stacked shell padding. */ .el-md { width: 100%; max-width: none; margin: 0; background: var(--md-bg, #e2f1f5) !important; background-color: var(--md-bg, #e2f1f5) !important; color: var(--md-ink); font-size: 16px; line-height: 1.6; /* Vertical only — side gutters come from column width (OD pattern). */ padding: 16px 0 56px; min-height: 60vh; box-sizing: border-box; } /* Desktop / default — mirrors .el-od-concept (1120 / 32px total gutters). */ .el-md-package { width: min(1120px, calc(100% - 32px)); margin: 0 auto; background: transparent; } /* Archive is the
itself — same column math as package. */ .el-md-archive { width: min(1120px, calc(100% - 32px)); margin-left: auto; margin-right: auto; } /* Tablet-ish — mirrors OD @media (max-width: 900px). */ @media (max-width: 900px) { .el-md-package, .el-md-archive { width: min(100%, calc(100% - 24px)); } } /* Phone — wider column than OD's 20px gutters so content fills the viewport better. */ @media (max-width: 640px) { .el-md-package, .el-md-archive { /* +3px left / +3px right vs previous 8px total gutters. */ width: min(100%, calc(100% - 2px)); } } .el-md *, .el-md *::before, .el-md *::after, .el-md-cal--neu *, .el-md-cal--neu *::before, .el-md-cal--neu *::after { box-sizing: border-box; } /* Intentional raised cards only — same #e2f1f5 as wash, not pure white. */ .el-md-surface { background: var(--md-surface, #e2f1f5); border-radius: var(--md-radius); box-shadow: var(--md-out); padding: 20px; } /* ------------------------------------------------------------------- hero */ .el-md-hero { margin-bottom: 22px; } /* ------------------------------------------------------------------ */ /* Gallery — responsive bento collage, same model as One Day Trip */ /* Breakpoints: desktop >=1024 | tablet 768-1023 | mobile <768 */ /* ------------------------------------------------------------------ */ .el-md-gallery-block { margin-bottom: 20px; padding: 0; border-radius: var(--md-radius-lg); overflow: hidden; background: transparent; box-shadow: var(--md-out-lg); } .el-md-collage { display: grid; gap: 2px; width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: 520px; margin: 0; padding: 0; border-radius: inherit; overflow: hidden; background: #fff; box-shadow: none; } .el-md-collage__item { margin: 0; min-width: 0; min-height: 0; overflow: hidden; position: relative; border-radius: 0; background: #dbe6ee; } .el-md-collage__hit { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; position: relative; overflow: hidden; border-radius: inherit; } .el-md-collage__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.45s ease; } .el-md-collage__zoom { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 28, 36, 0.48); backdrop-filter: blur(8px); color: #fff; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 2; } .el-md-collage__zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .el-md-collage__item:hover img, .el-md-collage__hit:focus-visible img { transform: scale(1.04); } .el-md-collage__item:hover .el-md-collage__zoom, .el-md-collage__hit:focus-visible .el-md-collage__zoom { opacity: 1; transform: translateY(0); } .el-md-collage__more, .el-md-collage__badge { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; margin: 0; padding: 10px 14px; border: 0; background: rgba(8, 16, 22, 0.58); color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; text-align: center; pointer-events: none; z-index: 3; } .el-md-collage__badge { inset: auto 10px 10px auto; border-radius: 999px; background: rgba(8, 16, 22, 0.72); backdrop-filter: blur(8px); font-size: 0.78rem; letter-spacing: 0.06em; padding: 8px 12px; } /* ---- Desktop default (>=1024): set by cascade; base = desktop ---- */ .el-md-collage--n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 21 / 9; } .el-md-collage--n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } .el-md-collage--n3 { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; } .el-md-collage--n3 .el-md-collage__item--1 { grid-column: 1; grid-row: 1 / span 2; } .el-md-collage--n3 .el-md-collage__item--2 { grid-column: 2; grid-row: 1; } .el-md-collage--n3 .el-md-collage__item--3 { grid-column: 2; grid-row: 2; } /* 4 photos: portrait | stacked landscapes | portrait (column width follows photo AR) */ .el-md-collage--n4 { grid-template-columns: minmax(0, calc(var(--el-md-col-a, 0.75) * 1fr)) minmax(0, calc(var(--el-md-col-b, 1.35) * 1fr)) minmax(0, calc(var(--el-md-col-c, 0.75) * 1fr)); grid-template-rows: 1fr 1fr; } .el-md-collage--n4 .el-md-collage__item--1 { grid-column: 1; grid-row: 1 / span 2; } .el-md-collage--n4 .el-md-collage__item--2 { grid-column: 2; grid-row: 1; } .el-md-collage--n4 .el-md-collage__item--3 { grid-column: 2; grid-row: 2; } .el-md-collage--n4 .el-md-collage__item--4 { grid-column: 3; grid-row: 1 / span 2; } /* 5 photos / 6+: classic bento 1 + 2x2 (columns follow photo AR) */ .el-md-collage--n5, .el-md-collage--more { grid-template-columns: minmax(0, calc(var(--el-md-col-a, 1.4) * 1fr)) minmax(0, calc(var(--el-md-col-b, 1) * 1fr)) minmax(0, calc(var(--el-md-col-c, 1) * 1fr)); grid-template-rows: 1fr 1fr; } .el-md-collage--n5 .el-md-collage__item--1, .el-md-collage--more .el-md-collage__item--1 { grid-column: 1; grid-row: 1 / span 2; } .el-md-collage--n5 .el-md-collage__item--2, .el-md-collage--more .el-md-collage__item--2 { grid-column: 2; grid-row: 1; } .el-md-collage--n5 .el-md-collage__item--3, .el-md-collage--more .el-md-collage__item--3 { grid-column: 3; grid-row: 1; } .el-md-collage--n5 .el-md-collage__item--4, .el-md-collage--more .el-md-collage__item--4 { grid-column: 2; grid-row: 2; } .el-md-collage--n5 .el-md-collage__item--5, .el-md-collage--more .el-md-collage__item--5 { grid-column: 3; grid-row: 2; } .el-md-collage--more .el-md-collage__item--5 .el-md-collage__zoom { display: none; } .el-md-collage--more .el-md-collage__more--desktop { display: flex; } /* Tablet: 768-1023 */ @media (max-width: 1023px) and (min-width: 768px) { .el-md-collage { aspect-ratio: 16 / 10; max-height: 420px; } .el-md-collage--n4 .el-md-collage__item--4, .el-md-collage--n5 .el-md-collage__item--4, .el-md-collage--n5 .el-md-collage__item--5, .el-md-collage--more .el-md-collage__item--4, .el-md-collage--more .el-md-collage__item--5 { display: none; } .el-md-collage--n4, .el-md-collage--n5, .el-md-collage--more { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; } .el-md-collage--n4 .el-md-collage__item--1, .el-md-collage--n5 .el-md-collage__item--1, .el-md-collage--more .el-md-collage__item--1 { grid-column: 1; grid-row: 1 / span 2; } .el-md-collage--n4 .el-md-collage__item--2, .el-md-collage--n5 .el-md-collage__item--2, .el-md-collage--more .el-md-collage__item--2 { grid-column: 2; grid-row: 1; } .el-md-collage--n4 .el-md-collage__item--3, .el-md-collage--n5 .el-md-collage__item--3, .el-md-collage--more .el-md-collage__item--3 { grid-column: 2; grid-row: 2; } .el-md-collage__more--desktop { display: none !important; } .el-md-collage--n4 .el-md-collage__more--tablet, .el-md-collage--n5 .el-md-collage__more--tablet, .el-md-collage--more .el-md-collage__more--tablet { display: flex; } } /* Mobile: < 768 */ @media (max-width: 767px) { .el-md-gallery-block { overflow: hidden; } .el-md-collage { /* n3 keeps auto (two rows). Single-tile layouts reserve 16/10 below. */ aspect-ratio: auto; max-height: none; gap: 2px; overflow: hidden; } /* * Mobile non-n3 shows only the hero tile (item--1 already 16/10). * Reserve that ratio on the collage itself so content below * (.el-md-layout / Catatan Penting) is not pushed when images settle. */ .el-md-collage:not(.el-md-collage--n3) { aspect-ratio: 16 / 10; } .el-md-collage__more--desktop, .el-md-collage__more--tablet { display: none !important; } .el-md-collage__badge--mobile { display: inline-flex; } .el-md-collage--n1, .el-md-collage--n2, .el-md-collage--n4, .el-md-collage--n5, .el-md-collage--more { grid-template-columns: 1fr; grid-template-rows: auto; } .el-md-collage--n1 .el-md-collage__item, .el-md-collage--n2 .el-md-collage__item--1, .el-md-collage--n4 .el-md-collage__item--1, .el-md-collage--n5 .el-md-collage__item--1, .el-md-collage--more .el-md-collage__item--1 { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 10; } .el-md-collage--n2 .el-md-collage__item--2, .el-md-collage--n4 .el-md-collage__item--2, .el-md-collage--n4 .el-md-collage__item--3, .el-md-collage--n4 .el-md-collage__item--4, .el-md-collage--n5 .el-md-collage__item--2, .el-md-collage--n5 .el-md-collage__item--3, .el-md-collage--n5 .el-md-collage__item--4, .el-md-collage--n5 .el-md-collage__item--5, .el-md-collage--more .el-md-collage__item--2, .el-md-collage--more .el-md-collage__item--3, .el-md-collage--more .el-md-collage__item--4, .el-md-collage--more .el-md-collage__item--5 { display: none; } /* 3 photos: hero + 2 side-by-side */ .el-md-collage--n3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .el-md-collage--n3 .el-md-collage__item--1 { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 16 / 10; } .el-md-collage--n3 .el-md-collage__item--2, .el-md-collage--n3 .el-md-collage__item--3 { aspect-ratio: 4 / 3; display: block; } .el-md-collage--n3 .el-md-collage__item--2 { grid-column: 1; grid-row: 2; } .el-md-collage--n3 .el-md-collage__item--3 { grid-column: 2; grid-row: 2; } .el-md-collage--n3 .el-md-collage__badge--mobile { display: none; } } /* ------------------------------------------------------------------ */ /* Gallery lightbox — full-view slider, same behaviour as One Day Trip */ /* ------------------------------------------------------------------ */ html.el-md-scroll-lock { overflow: hidden !important; box-sizing: border-box; padding-right: var(--el-md-scrollbar-gap, 0px); } html.el-md-scroll-lock body { overflow: hidden !important; } html.el-md-scroll-lock #wpadminbar { padding-right: var(--el-md-scrollbar-gap, 0px); } .el-md-gallery-lb[hidden] { display: none !important; } .el-md-gallery-lb { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 12px; box-sizing: border-box; color-scheme: light; /* Desktop: leave room for side arrows. Mobile overrides below. */ --el-md-lb-img-max-w: min(calc(100vw - 140px), 1040px); --el-md-lb-img-max-h: min(78vh, 820px); } .el-md-gallery-lb__backdrop { position: absolute; inset: 0; z-index: 0; background: rgba(8, 16, 22, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: el-md-modal-backdrop-in 0.3s ease both; } .el-md-gallery-lb__dialog { position: relative; z-index: 1; width: auto; max-width: min(96vw, 1200px); max-height: min(94vh, 960px); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; box-sizing: border-box; animation: el-md-modal-dialog-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: 50% 50%; pointer-events: none; } .el-md-gallery-lb__dialog > * { pointer-events: auto; } .el-md-gallery-lb__viewer { display: flex; align-items: center; justify-content: center; gap: 14px; width: auto; max-width: 100%; pointer-events: auto; } .el-md-gallery-lb__close { position: absolute; display: inline-flex !important; align-items: center; justify-content: center; top: 16px; right: 16px; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(15, 28, 36, 0.88) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; z-index: 5; appearance: none; -webkit-appearance: none; opacity: 1 !important; visibility: visible !important; pointer-events: auto; } .el-md-gallery-lb__nav { position: relative; flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; top: auto; left: auto; right: auto; width: 46px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(15, 28, 36, 0.88) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; z-index: 2; appearance: none; -webkit-appearance: none; opacity: 1 !important; visibility: visible !important; pointer-events: auto; transform: none; } .el-md-gallery-lb__close:hover, .el-md-gallery-lb__nav:hover { background: rgba(31, 122, 99, 0.92) !important; transform: translateY(-1px); color: #fff !important; } .el-md-gallery-lb__close svg, .el-md-gallery-lb__nav svg { width: 20px; height: 20px; display: block; fill: none !important; stroke: currentColor !important; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .el-md-gallery-lb__stage { margin: 0; min-width: 0; min-height: 0; flex: 0 1 auto; display: flex; align-items: center; justify-content: center; width: auto; max-width: 100%; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; } .el-md-gallery-lb__img { display: block; max-width: var(--el-md-lb-img-max-w); max-height: var(--el-md-lb-img-max-h); width: auto; height: auto; object-fit: contain; object-position: center; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); opacity: 0; transform: scale(0.985); transition: opacity 0.25s ease, transform 0.25s ease; } .el-md-gallery-lb__img.is-ready { opacity: 1; transform: scale(1); } .el-md-gallery-lb__foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px 0; color: rgba(255, 255, 255, 0.92); text-align: center; } .el-md-gallery-lb__counter { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); text-align: center; } .el-md-gallery-lb__caption { margin: 0; max-width: 36rem; font-size: 0.98rem; font-weight: 600; line-height: 1.35; text-align: center; color: rgba(255, 255, 255, 0.94); } .el-md-gallery-lb__thumbs { display: flex; justify-content: flex-start; align-items: center; gap: 10px; width: 100%; max-width: min(96vw, 1120px); min-width: 0; padding: 16px 16px 5px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.14); } .el-md-gallery-lb__thumbs.is-centered { justify-content: center; scroll-snap-type: none; } .el-md-gallery-lb__thumbs.is-start { justify-content: flex-start; } .el-md-gallery-lb__thumbs.is-start .el-md-gallery-lb__thumb { scroll-snap-align: start; } .el-md-gallery-lb__thumbs::-webkit-scrollbar { height: 6px; display: block; } .el-md-gallery-lb__thumbs::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.14); border-radius: 999px; } .el-md-gallery-lb__thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.55); border-radius: 999px; } .el-md-gallery-lb__thumb { flex: 0 0 auto; width: 84px; height: 60px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; opacity: 0.55; cursor: pointer; scroll-snap-align: center; background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .el-md-gallery-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .el-md-gallery-lb__thumb.is-active, .el-md-gallery-lb__thumb:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(31, 122, 99, 0.85); } @media (max-width: 1023px) { .el-md-gallery-lb__thumbs { padding-top: 18px; width: 100%; max-width: 100%; -webkit-overflow-scrolling: touch; touch-action: pan-x; } } @media (max-width: 720px) { .el-md-gallery-lb { padding: 8px; box-sizing: border-box; --el-md-lb-img-max-w: 100%; --el-md-lb-img-max-h: min(68dvh, 68vh, 640px); } .el-md-gallery-lb__dialog { padding: 0; width: 100%; max-width: 100%; min-width: 0; max-height: min(100dvh, 100vh); gap: 8px; overflow-x: hidden; overflow-y: visible; } .el-md-gallery-lb__viewer { position: relative; display: block; width: 100%; max-width: 100%; min-width: 0; overflow: visible; } .el-md-gallery-lb__stage { margin: 0; min-height: 0; min-width: 0; width: 100%; max-width: 100%; border-radius: 0; overflow: visible; display: flex; align-items: center; justify-content: center; } .el-md-gallery-lb__img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: var(--el-md-lb-img-max-h) !important; object-fit: contain !important; object-position: center !important; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } .el-md-gallery-lb__thumbs { width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; align-self: stretch; } /* Arrows overlay on photo edges — neumorphism */ .el-md-gallery-lb__nav { position: absolute; top: 50%; z-index: 6; width: 42px; height: 42px; transform: translateY(-50%); background: var(--md-bg, #e2f1f5) !important; color: var(--md-accent, #1f7a63) !important; box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.28), -3px -3px 8px rgba(255, 255, 255, 0.55) !important; } .el-md-gallery-lb__nav:hover, .el-md-gallery-lb__nav:active { background: var(--md-bg, #e2f1f5) !important; color: var(--md-accent, #1f7a63) !important; transform: translateY(-50%); box-shadow: inset 3px 3px 7px rgba(126, 157, 166, 0.35), inset -2px -2px 6px rgba(255, 255, 255, 0.7) !important; } .el-md-gallery-lb__nav--prev { left: 10px; right: auto; } .el-md-gallery-lb__nav--next { right: 10px; left: auto; } .el-md-gallery-lb__close { top: 10px; right: 10px; width: 44px; height: 44px; background: var(--md-bg, #e2f1f5) !important; color: var(--md-accent, #1f7a63) !important; box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.28), -3px -3px 8px rgba(255, 255, 255, 0.55) !important; } .el-md-gallery-lb__close:hover { background: var(--md-bg, #e2f1f5) !important; color: var(--md-accent, #1f7a63) !important; box-shadow: inset 3px 3px 7px rgba(126, 157, 166, 0.35), inset -2px -2px 6px rgba(255, 255, 255, 0.7) !important; } .el-md-gallery-lb__foot { padding: 8px 4px 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; } .el-md-gallery-lb__caption { text-align: center; font-size: 0.9rem; } .el-md-gallery-lb__counter { text-align: center; } .el-md-gallery-lb__thumbs { padding: 18px 16px 5px; width: 100%; max-width: 100%; } } @keyframes el-md-modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes el-md-modal-dialog-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .el-md-gallery-lb__backdrop, .el-md-gallery-lb__dialog, .el-md-gallery-lb__img, .el-md-collage__item img, .el-md-collage__zoom { animation: none !important; transition: none !important; } } .el-md-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .el-md-breadcrumbs a { font-size: 13px; color: var(--md-accent); text-decoration: none; padding: 4px 12px; border-radius: 999px; box-shadow: var(--md-out-sm); } .el-md-hero__title { margin: 0; font-size: 27px; line-height: 1.15; font-weight: 900; font-synthesis: weight; letter-spacing: -0.02em; text-align: center; color: var(--md-ink); /* Theme fonts often stop at 700 — stroke + micro offsets thicken the glyphs */ -webkit-text-stroke: 0.55px var(--md-ink); paint-order: stroke fill; /* Soft extruded type — paired light/dark like surface neumorphism */ text-shadow: 0.35px 0 0 var(--md-ink), -0.35px 0 0 var(--md-ink), 0 0.35px 0 var(--md-ink), 0 -0.35px 0 var(--md-ink), -2px -2px 3px var(--md-light), 2px 3px 6px var(--md-dark); } .el-md-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 12px; } .el-md-pill { display: inline-flex; align-items: center; padding: 7px 15px; border-radius: 10px; background: var(--md-surface); box-shadow: var(--md-out-sm); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--md-ink-soft); } .el-md-hero__excerpt { margin: 0; color: var(--md-ink-soft); } /* ----------------------------------------------------------------- layout */ .el-md-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; } .el-md-section { margin-bottom: 20px; } .el-md-section__title { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .el-md-prose { color: var(--md-ink-soft); } .el-md-prose > *:first-child { margin-top: 0; } .el-md-prose > *:last-child { margin-bottom: 0; } /* ------------------------------------------- include sheet (premium detail) */ .el-md-sheet--include .el-md-sheet__head { padding-bottom: 10px; } .el-md-sheet--include .el-md-sheet__head h2 { font-size: 18px; letter-spacing: -0.01em; color: var(--md-ink); } .el-md-sheet--include .el-md-sheet__sub { color: var(--md-ink-soft); font-weight: 500; } .el-md-sheet--include .el-md-sheet__body { display: grid; gap: 18px; padding-top: 4px; } .el-md-include-hotels { display: grid; gap: 14px; } .el-md-include-booking-cta { margin-top: 4px; padding: 2px 0 4px; } .el-md-include-booking-cta .el-md-booking-submit { margin-top: 0; margin-bottom: 0; } .el-md-include-booking-cta .el-md-booking-submit[hidden] { display: none !important; } .el-md-ihotel { overflow: hidden; border-radius: 18px; background: var(--md-surface, #e2f1f5); box-shadow: var(--md-out-sm); } /* * Body = text stack only. Keep outer card soft-elevated; do not nest * neumorphic wells here — dense mobile copy reads cleaner with rhythm. */ .el-md-ihotel__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 0; } .el-md-ihotel__stars { margin: 0; font-size: 15px; letter-spacing: 0.1em; line-height: 1; color: #d8a33a; } .el-md-ihotel__name { margin: 8px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--md-ink); } .el-md-ihotel__room { margin: 5px 0 0; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--md-ink-soft); } .el-md-ihotel__room-value { font-weight: 700; font-style: italic; color: var(--md-accent); } .el-md-ihotel__meta { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--md-ink) 8%, transparent); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--md-ink-soft); } .el-md-ihotel__meta-em { font-weight: 700; font-style: italic; color: var(--md-ink); } .el-md-ihotel__meta-nights { font-style: italic; font-weight: 600; opacity: 0.92; } .el-md-ihotel__note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--md-warning, #b7791f); } /* Multi-hotel include sheet: one merged gallery + a stacked block per hotel. */ .el-md-ihotel__hotel-block.has-divider { margin-top: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--md-ink) 8%, transparent); } .el-md-ihotel__room-line { margin: 5px 0 0; font-size: 14px; line-height: 1.4; color: var(--md-ink-soft); } .el-md-ihotel__room-line strong { font-weight: 700; font-style: italic; color: var(--md-accent); } .el-md-ihotel__area-line { margin: 3px 0 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--md-ink-soft); } .el-md-ihotel__stay-summary { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--md-ink) 8%, transparent); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--md-ink-soft); } @media (max-width: 767px) { .el-md-ihotel__body { padding: 14px 14px 16px; } .el-md-ihotel__stars { font-size: 14px; } .el-md-ihotel__name { margin-top: 7px; font-size: 16px; } .el-md-ihotel__room { margin-top: 4px; font-size: 13.5px; } .el-md-ihotel__meta { margin-top: 12px; padding-top: 11px; font-size: 12.5px; line-height: 1.55; } .el-md-ihotel__hotel-block.has-divider { margin-top: 14px; padding-top: 14px; } .el-md-ihotel__room-line { margin-top: 4px; font-size: 13.5px; } .el-md-ihotel__area-line { font-size: 12.5px; } .el-md-ihotel__stay-summary { margin-top: 14px; padding-top: 12px; font-size: 12.5px; line-height: 1.55; } } .el-md-ihotel__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; } .el-md-ihotel__facts > div { padding: 8px 10px; border-radius: 10px; box-shadow: var(--md-in); } .el-md-ihotel__facts dt { margin: 0 0 2px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--md-ink-faint); } .el-md-ihotel__facts dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--md-ink); } .el-md-ihotel-gallery { position: relative; } .el-md-ihotel-gallery__stage { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; background: color-mix(in srgb, var(--md-ink) 6%, transparent); overflow: hidden; } .el-md-ihotel-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.25s ease; } .el-md-ihotel-gallery__img.is-ready { opacity: 1; } /* * Caption = the photo's Media Library title. Sits in the dark band directly * above the dots row — never on top of them, never crowding the counter. */ .el-md-ihotel-gallery__caption { position: absolute; inset: auto 0 0 0; padding: 26px 16px 24px; background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 32, 0.38) 50%, rgba(15, 23, 32, 0.7) 100%); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } /* Desktop/tablet: roomier stage, so the caption can afford larger type. */ @media (min-width: 768px) { .el-md-ihotel-gallery__caption { font-size: 15.5px; } } .el-md-ihotel-gallery__caption[hidden] { display: none; } .el-md-ihotel-gallery__nav { position: absolute; top: 50%; left: auto; right: auto; z-index: 2; display: inline-flex !important; align-items: center; justify-content: center; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #fe6000 !important; box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.45), 3px 3px 8px rgba(180, 70, 0, 0.35) !important; color: #fff !important; font-size: 0 !important; line-height: 0 !important; cursor: pointer; appearance: none; -webkit-appearance: none; transform: translateY(-50%); opacity: 1 !important; visibility: visible !important; } .el-md-ihotel-gallery__nav:hover, .el-md-ihotel-gallery__nav:focus, .el-md-ihotel-gallery__nav:focus-visible, .el-md-ihotel-gallery__nav:active { background: color-mix(in srgb, #fe6000 88%, #000) !important; color: #fff !important; outline: none; } .el-md-ihotel-gallery__nav svg { width: 16px; height: 16px; display: block; fill: none !important; stroke: currentColor !important; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .el-md-ihotel-gallery__nav--prev { left: 10px !important; right: auto !important; } .el-md-ihotel-gallery__nav--next { right: 10px !important; left: auto !important; } .el-md-ihotel-gallery__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; } .el-md-ihotel-gallery__dot { pointer-events: auto; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 2px rgba(16, 35, 58, 0.25); cursor: pointer; } .el-md-ihotel-gallery__dot.is-active { width: 18px; background: #fff; } .el-md-ihotel-gallery__counter { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(16, 35, 58, 0.55); color: #fff; font-size: 11px; font-weight: 600; } .el-md-pkg-details { display: grid; gap: 12px; } .el-md-detail-block { padding: 14px 14px 12px; border-radius: 16px; background: var(--md-surface, #fff); box-shadow: var(--md-out-sm); } .el-md-detail-block__title { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--md-ink-soft); } .el-md-detail-block__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .el-md-detail-block__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--md-ink); } .el-md-detail-block__text { min-width: 0; font-weight: 500; color: var(--md-ink); overflow-wrap: anywhere; } .el-md-detail-block__mark { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; box-shadow: var(--md-out-sm); background: var(--md-bg, #e2f1f5); } .el-md-detail-block--include .el-md-detail-block__mark { color: var(--md-accent); } .el-md-detail-block--addon .el-md-detail-block__mark { color: #fe6000; font-weight: 800; } .el-md-hotel-commercial { display: block !important; grid-template-columns: none !important; } .el-md-hotel-commercial__main { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; font-weight: 650; color: var(--md-ink, #102a43); } .el-md-hotel-commercial__title { min-width: 0; overflow-wrap: anywhere; } .el-md-hotel-commercial__details { margin: 6px 0 2px 32px; padding: 0; list-style: none; display: grid; gap: 4px; } .el-md-hotel-commercial__detail { display: block !important; grid-template-columns: none !important; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--md-ink-soft); } .el-md-detail-block--exclude .el-md-detail-block__mark { color: #9a6b6b; background: color-mix(in srgb, #9a6b6b 10%, var(--md-bg, #e2f1f5)); font-size: 15px; font-weight: 800; line-height: 1; } .el-md-detail-block--notes { background: color-mix(in srgb, var(--md-accent) 5%, var(--md-surface, #fff)); } .el-md-detail-block--notes .el-md-detail-block__mark { color: var(--md-accent, #1f7a63); font-style: italic; font-weight: 700; background: color-mix(in srgb, var(--md-accent, #1f7a63) 16%, var(--md-bg, #e2f1f5)); } /* Nested Catatan: solid teal dots (sub-poin), bukan ikon i. */ .el-md-detail-block--notes .el-md-detail-block__sublist { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; } .el-md-detail-block--notes .el-md-detail-block__sublist > li { position: relative; display: block; padding-left: 16px; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--md-ink); } .el-md-detail-block--notes .el-md-detail-block__sublist > li::before { content: ''; position: absolute; top: 0.55em; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--md-accent, #1f7a63); box-shadow: none; } .el-md-detail-block__rich, .el-md-option-notes-rich { font-size: 13.5px; line-height: 1.5; color: var(--md-ink, #1e2430); } .el-md-detail-block__rich ul, .el-md-option-notes-rich ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .el-md-detail-block__rich > ul > li, .el-md-option-notes-rich > ul > li { position: relative; padding-left: 18px; } .el-md-detail-block__rich > ul > li::before, .el-md-option-notes-rich > ul > li::before { content: ''; position: absolute; top: 0.55em; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--md-accent, #1f7a63); } .el-md-detail-block__rich > ul > li > ul, .el-md-option-notes-rich > ul > li > ul, .el-md-detail-block__sublist { margin: 6px 0 2px; padding: 0; list-style: none; display: grid; gap: 4px; } .el-md-detail-block__rich > ul > li > ul > li, .el-md-option-notes-rich > ul > li > ul > li, .el-md-detail-block__sublist > li { position: relative; padding-left: 16px; font-size: 13px; color: var(--md-ink-soft, #4a5563); } .el-md-detail-block__rich > ul > li > ul > li::before, .el-md-option-notes-rich > ul > li > ul > li::before, .el-md-detail-block__sublist > li::before { content: ''; position: absolute; top: 0.55em; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--md-accent, #1f7a63); } .el-md-sheet--plain .el-md-pkg-details { gap: 10px; } @media (prefers-reduced-motion: reduce) { .el-md-ihotel-gallery__img { transition: none; } } /* ------------------------------------------------------- package detail */ .el-md-hero__destination { margin: -2px 0 12px; font-size: 22px; line-height: 1.15; font-weight: 900; font-synthesis: weight; letter-spacing: -0.01em; text-align: center; color: var(--md-accent); /* Soft extruded type — same neumorphic pair as package title */ -webkit-text-stroke: 0.55px var(--md-accent); paint-order: stroke fill; text-shadow: 0.35px 0 0 var(--md-accent), -0.35px 0 0 var(--md-accent), 0 0.35px 0 var(--md-accent), 0 -0.35px 0 var(--md-accent), -2px -2px 3px var(--md-light), 2px 3px 6px var(--md-dark); } /* ------------------------------------------------ currency switcher (OD) */ /* * Markup from One Day (`el-od-currency-switcher`). Placed beside * “Harga Package” on all breakpoints. */ .el-md-currency { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0; flex: none; } .el-md-currency__label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-ink-faint); line-height: 1; white-space: nowrap; } /* * Mobile: keep currency beside the title (not full-width centered). * Only the "Mata Uang" label is centered over the IDR/MYR switcher. */ @media (max-width: 767px) { .el-md-currency.el-md-currency--pricing { flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; width: auto; margin-left: auto; /* Visual nudge only — does not push Tanggal / panah. */ transform: translateY(10px); } .el-md-currency--pricing .el-md-currency__label { display: block; text-align: center; align-self: stretch; } } /* * Desktop only: widen the pricing Mata Uang slot (label + IDR/MYR). * Scoped to --pricing so title / tanggal / carousel stay untouched. */ @media (min-width: 768px) { .el-md-currency.el-md-currency--pricing { flex: 0 0 auto; min-width: 280px; gap: 14px; } .el-md-currency--pricing .el-md-currency__label { font-size: 12px; letter-spacing: 0.09em; } .el-md-currency--pricing .el-od-currency-switcher { min-width: 148px; padding: 6px; gap: 6px; } .el-md-currency--pricing .el-od-currency-switcher__btn { min-width: 62px; padding: 9px 20px; font-size: 13px; } } .el-md-pricing__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; } .el-md-pricing__head .el-md-section__title { margin: 0; } .el-md .el-od-currency-switcher { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--md-surface); border: 0; border-radius: 999px; box-shadow: var(--md-in); flex-shrink: 0; } .el-md .el-od-currency-switcher__btn { appearance: none; border: 0; background: transparent; color: var(--md-ink-soft); font-family: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; padding: 7px 13px; border-radius: 999px; cursor: pointer; line-height: 1; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .el-md .el-od-currency-switcher__btn:hover { color: #fe6000; background: color-mix(in srgb, #fe6000 14%, var(--md-surface, #e2f1f5)); } .el-md .el-od-currency-switcher__btn:focus-visible { outline: 2px solid #fe6000; outline-offset: 2px; } .el-md .el-od-currency-switcher__btn.is-active { background: #fe6000; color: #fff; box-shadow: var(--md-out-sm); } .el-md .el-od-currency-switcher__btn.is-active:hover { background: #fe6000; color: #fff; filter: brightness(0.95); } .el-md .el-od-currency-switcher--busy { opacity: 0.72; pointer-events: none; } .el-md-pill--link { text-decoration: none; color: var(--md-accent); font-weight: 800; } .el-md-pill--link:not(a) { cursor: default; } .el-md-pill--rating { color: var(--md-accent); } .el-md-section__sub { margin: -8px 0 14px; font-size: 13px; color: var(--md-ink-faint); } .el-md-callout { margin-bottom: 16px; padding: 12px 16px 12px 14px; width: 100%; max-width: none; border-radius: var(--md-radius-sm); box-shadow: var(--md-in); background: var(--md-accent-soft); border-left: 3px solid var(--md-accent); box-sizing: border-box; } .el-md-callout__title { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--md-accent, #1f7a63); } .el-md-callout p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--md-ink, #1e2430); } .el-md-callout__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; } .el-md-callout__list li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.35; color: var(--md-ink, #1e2430); } .el-md-callout__list li::before { content: ''; position: absolute; top: 0.55em; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--md-accent, #1f7a63); } /* Rich Package Notes — same teal bullet language as legacy list. */ .el-md-callout__rich { font-size: 13.5px; line-height: 1.35; color: var(--md-ink, #1e2430); overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } .el-md-callout__rich p { margin: 0 0 0.35em; } .el-md-callout__rich p:last-child { margin-bottom: 0; } .el-md-callout__rich ul, .el-md-callout__rich ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; } .el-md-callout__rich li { position: relative; padding-left: 18px; } .el-md-callout__rich li::before { content: ''; position: absolute; top: 0.55em; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--md-accent, #1f7a63); } /* Nested bullets — smaller middle-dot style (sub-items only). */ .el-md-callout__rich > ul > li > ul, .el-md-callout__list > li > ul { margin: 3px 0 1px; padding: 0; list-style: none; display: grid; gap: 2px; } .el-md-callout__rich > ul > li > ul > li, .el-md-callout__list > li > ul > li { padding-left: 16px; font-size: 13px; line-height: 1.3; color: var(--md-ink-soft, #4a5563); } .el-md-callout__rich > ul > li > ul > li::before, .el-md-callout__list > li > ul > li::before { top: 0.55em; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--md-accent, #1f7a63); } .el-md-callout__rich ol { counter-reset: el-md-notes; } .el-md-callout__rich ol li { counter-increment: el-md-notes; } .el-md-callout__rich ol li::before { content: counter(el-md-notes) '.'; top: 0; left: 0; width: auto; height: auto; border-radius: 0; background: none; font-weight: 700; font-size: 12.5px; line-height: 1.5; color: var(--md-accent, #1f7a63); } .el-md-callout__rich strong { font-weight: 800; } .el-md-callout__rich em { font-style: italic; } .el-md-videolink { margin: 14px 0 0; } .el-md-videolink a { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; box-shadow: var(--md-out-sm); color: var(--md-accent); font-size: 13px; font-weight: 600; text-decoration: none; } /* --------------------------------------------------------------- itinerary */ .el-md-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; } .el-md-day { padding: 16px; border-radius: var(--md-radius-sm); box-shadow: var(--md-in); } .el-md-day__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .el-md-day__badge { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; background: var(--md-accent); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .el-md-day__title { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--md-ink); } .el-md-day__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .el-md-day__item { position: relative; display: flex; gap: 10px; padding: 0 0 12px 18px; font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--md-ink); } .el-md-day__item:last-child { padding-bottom: 0; } /* Timeline dots + connector — same technique as OD .el-od-hcard__list */ .el-md-day__item::before { content: ''; position: absolute; z-index: 1; top: 7px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--md-accent); box-shadow: 0 0 0 3px rgba(31, 122, 99, 0.14); } .el-md-day__item:not(:last-child)::after { content: ''; position: absolute; top: 15px; bottom: 0; left: 3.5px; width: 1px; background: linear-gradient(180deg, rgba(31, 122, 99, 0.35), rgba(126, 157, 166, 0.12)); } .el-md-day__time { flex: none; min-width: 52px; font-weight: 700; color: var(--md-accent); } .el-md-day__text { min-width: 0; font-weight: 500; color: var(--md-ink); } @media (max-width: 639px) { .el-md-day__item, .el-md-listing-card .el-md-itinerary-preview .el-md-day__item, .el-md-itinerary-preview .el-md-day__item { margin-left: -10px; line-height: calc(1.55em - 2px); padding-bottom: 10px; } .el-md-day__text { line-height: inherit; } } .el-md-day__rownote { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; font-style: normal; line-height: 1.5; color: var(--md-ink-soft); } .el-md-day__foot { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(151, 177, 197, 0.28); } .el-md-day__note { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--md-ink-soft); } .el-md-day__note strong { color: var(--md-ink); font-weight: 700; } .el-md-day__video { justify-self: start; appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; font: inherit; padding: 7px 14px; border-radius: 10px; background: #fe6000; color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), -3px -3px 7px rgba(255, 255, 255, 0.55), 3px 3px 8px rgba(180, 60, 0, 0.28); transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease; } .el-md-day__video:hover, .el-md-day__video:focus-visible { color: #fff; background: color-mix(in srgb, #fe6000 90%, #000); outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), -3px -3px 7px rgba(255, 255, 255, 0.55), 3px 3px 8px rgba(180, 60, 0, 0.32); } .el-md-day__video:active { color: #fff; background: color-mix(in srgb, #fe6000 82%, #000); box-shadow: inset 3px 3px 7px rgba(140, 40, 0, 0.35), inset -2px -2px 5px rgba(255, 180, 120, 0.25); transform: translateY(1px); } /* ----------------------------------------------------------- video picker modal (OD pattern) */ .el-md-modal[hidden] { display: none !important; } .el-md-modal--video { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box; } .el-md-modal__backdrop--blur { position: absolute; inset: 0; background: rgba(15, 28, 36, 0.52); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .el-md-modal__dialog--video { position: relative; z-index: 1; width: min(420px, 100%); border-radius: 22px; background: var(--md-surface, #e2f1f5); box-shadow: 18px 18px 40px rgba(22, 46, 55, 0.32), -10px -10px 28px rgba(255, 255, 255, 0.28); overflow: hidden; } .el-md-modal__head--video { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 18px 12px; } .el-md-video-modal__intro { display: flex; align-items: center; gap: 12px; min-width: 0; } .el-md-video-modal__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--md-surface, #e2f1f5); color: var(--md-accent, #0f766e); box-shadow: 3px 3px 8px var(--md-dark, rgba(126, 157, 166, 0.28)), -2px -2px 6px var(--md-light, rgba(255, 255, 255, 0.7)); flex-shrink: 0; } .el-md-video-modal__icon svg { width: 18px; height: 18px; fill: currentColor; } .el-md-video-modal__eyebrow { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--md-ink-soft, #4c6672); } .el-md-modal__head--video h2 { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--md-ink, #16313a); text-align: left; letter-spacing: -0.01em; } .el-md-modal__close { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--md-surface, #e2f1f5); color: #FE6000; box-shadow: -2px -2px 5px var(--md-light), 2px 2px 6px var(--md-dark); flex-shrink: 0; } .el-md-modal__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .el-md-modal__close:hover { color: #e45700; } .el-md-video-modal__body { padding: 4px 18px 22px; } .el-md-video-modal__lead { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.45; color: var(--md-ink-soft, #4c6672); } .el-md-video-picker { display: grid; gap: 10px; } .el-md-video-picker__btn { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; text-decoration: none !important; background: var(--md-surface, #e2f1f5); box-shadow: 5px 5px 12px var(--md-dark, rgba(126, 157, 166, 0.22)), -4px -4px 10px var(--md-light, rgba(255, 255, 255, 0.7)); color: var(--md-ink, #16313a) !important; transition: transform 0.15s ease, box-shadow 0.15s ease; } .el-md-video-picker__btn:hover { transform: translateY(-1px); box-shadow: 7px 7px 16px var(--md-dark, rgba(126, 157, 166, 0.28)), -5px -5px 12px var(--md-light, rgba(255, 255, 255, 0.75)); } .el-md-video-picker__mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; } .el-md-video-picker__mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .el-md-video-picker__btn--ig .el-md-video-picker__mark { background: linear-gradient(135deg, #f58529, #dd2a7b 48%, #8134af); color: #fff; } .el-md-video-picker__btn--tt .el-md-video-picker__mark { background: #111; color: #fff; } .el-md-video-picker__btn--tt .el-md-video-picker__mark svg { fill: currentColor; stroke: none; } .el-md-video-picker__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .el-md-video-picker__copy strong { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; } .el-md-video-picker__copy em { font-style: normal; font-size: 0.8rem; color: var(--md-ink-soft, #4c6672); } .el-md-video-picker__arrow { font-size: 1.1rem; opacity: 0.45; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .el-md-video-picker__btn { transition: none; } } /* ----------------------------------------------------------- price format */ .el-md-pricelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .el-md-pricelist__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; border-radius: var(--md-radius-sm); box-shadow: var(--md-out-sm); } .el-md-pricelist__pax { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--md-ink-soft); } .el-md-pricelist__amount { font-size: 15px; font-weight: 700; color: var(--md-accent); white-space: nowrap; } .el-md-pricelist__amount em { font-size: 11.5px; font-weight: 600; font-style: normal; color: var(--md-ink-faint); } /* ---------------------------------------------------------------- booking */ .el-md-booking { position: relative; } .el-md-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 18px; } .el-md-controls:not(:has(.el-md-control--carousel-nav)) { grid-template-columns: minmax(0, 1fr); } /* Same rule for both the single page (#el-md-pricing) and a lazily-loaded listing widget (unique id, but always carrying data-el-md-pricing-root). */ #el-md-pricing > .el-md-controls, [data-el-md-pricing-root] > .el-md-controls { max-width: none; margin-bottom: 10px; } .el-md-control { display: flex; flex-direction: column; gap: 6px; } .el-md-control > span { font-size: 12px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.05em; color: var(--md-ink-faint); } /* Carousel nav — circular neumorphic arrows (OD Start Point & Itinerary). */ .el-md-control--carousel-nav { justify-content: flex-end; align-self: end; } .el-md-carousel-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 50px; } .el-md-carousel-arrow { display: inline-flex !important; align-items: center; justify-content: center; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; flex: none; border: 0 !important; border-radius: 999px !important; background: #fe6000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), -3px -3px 7px rgba(255, 255, 255, 0.55), 3px 3px 8px rgba(180, 60, 0, 0.28) !important; color: #fff !important; line-height: 0 !important; cursor: pointer; appearance: none; -webkit-appearance: none; transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease, filter 0.15s ease; } .el-md-carousel-arrow svg { display: block; width: 18px; height: 18px; fill: none !important; stroke: currentColor !important; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .el-md-carousel-arrow:hover, .el-md-carousel-arrow:focus-visible { background: color-mix(in srgb, #fe6000 90%, #000) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), -3px -3px 7px rgba(255, 255, 255, 0.55), 3px 3px 8px rgba(180, 60, 0, 0.32) !important; outline: none; } .el-md-carousel-arrow:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), -3px -3px 7px rgba(255, 255, 255, 0.55), 3px 3px 8px rgba(180, 60, 0, 0.32), 0 0 0 2px rgba(254, 96, 0, 0.35) !important; } .el-md-carousel-arrow:active { background: color-mix(in srgb, #fe6000 82%, #000) !important; color: #fff !important; box-shadow: inset 3px 3px 7px rgba(140, 40, 0, 0.35), inset -2px -2px 5px rgba(255, 180, 120, 0.25) !important; transform: translateY(1px); } .el-md-carousel-arrow:disabled, .el-md-carousel-arrow.is-disabled { opacity: 0.42; cursor: default; pointer-events: none; background: #fe6000 !important; color: #fff !important; box-shadow: inset 3px 3px 7px rgba(140, 40, 0, 0.3), inset -2px -2px 5px rgba(255, 180, 120, 0.2) !important; filter: saturate(0.85); } /* Native pax keeps these rules only as a pre-JS fallback. */ .el-md .el-md-cselect__trigger, .el-md .el-md-datebtn, .el-md select { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 0 16px; border: 0; border-radius: var(--md-radius-sm); background: var(--md-surface); box-shadow: var(--md-in); color: var(--md-ink); color-scheme: light; font-family: inherit; font-size: 16px; font-weight: 600; text-align: left; appearance: none; cursor: pointer; transition: box-shadow 0.15s ease; } .el-md select { background-image: linear-gradient(45deg, transparent 50%, var(--md-ink-faint) 50%), linear-gradient(135deg, var(--md-ink-faint) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; } .el-md input:focus-visible, .el-md select:focus-visible, .el-md button:focus-visible, .el-md-cal--neu button:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; } /* ------------------------------------------------- dropdown (neumorphism) */ .el-md .el-md-cselect { position: relative; width: 100%; min-width: 0; } .el-md .el-md-cselect__native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important; box-shadow: none !important; background-image: none !important; } .el-md .el-md-cselect.is-open .el-md-cselect__trigger { box-shadow: var(--md-in-deep); } .el-md .el-md-cselect__value, .el-md .el-md-datebtn__value { flex: 1; min-width: 0; /* Ellipsis for long labels — keep vertical room so "g/y/p" descenders are not clipped by overflow:hidden (visible on WP/theme fonts). */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.45; padding-block: 2px; } .el-md .el-md-cselect__chevron { flex: none; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--md-accent); border-bottom: 2px solid var(--md-accent); transform: rotate(45deg); transition: transform 0.15s ease, margin-top 0.15s ease; } .el-md .el-md-cselect.is-open .el-md-cselect__chevron { margin-top: 4px; transform: rotate(-135deg); } .el-md .el-md-cselect__menu, .el-md-cselect__menu.is-fixed { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 60; max-height: 280px; overflow-y: auto; padding: 10px; background: var(--md-bg); border-radius: var(--md-radius); box-shadow: var(--md-out-lg); animation: el-md-pop-in 0.14s ease; } .el-md .el-md-cselect__menu.is-above { top: auto; bottom: calc(100% + 10px); } .el-md .el-md-cselect__menu[hidden], .el-md-cselect__menu.is-fixed[hidden] { display: none; } /* * Booking sheets scroll (.el-md-sheet__body overflow-y: auto). An in-flow * absolute menu still expands that scrollport, so a Windows scrollbar * appears and the two-column form grid shifts. Pin the open list to the * viewport instead — same approach as One Day booking. */ .el-md-cselect__menu.is-fixed { position: fixed; z-index: 2147483000; right: auto; top: auto; margin: 0; } .el-md .el-md-cselect__option, .el-md-cselect__menu.is-fixed .el-md-cselect__option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px; border: 0; border-radius: var(--md-radius-sm); background: transparent; color: var(--md-ink-soft); font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; transition: box-shadow 0.15s ease, color 0.15s ease; } .el-md .el-md-cselect__option:hover, .el-md .el-md-cselect__option:focus-visible, .el-md-cselect__menu.is-fixed .el-md-cselect__option:hover, .el-md-cselect__menu.is-fixed .el-md-cselect__option:focus-visible { outline: 0; box-shadow: var(--md-out-sm); color: var(--md-ink); } .el-md .el-md-cselect__option.is-selected, .el-md-cselect__menu.is-fixed .el-md-cselect__option.is-selected { box-shadow: var(--md-in); color: var(--md-accent); } .el-md .el-md-cselect.is-empty .el-md-cselect__value { color: var(--md-ink-faint); font-weight: 600; } .el-md .el-md-cselect__option.is-placeholder, .el-md-cselect__menu.is-fixed .el-md-cselect__option.is-placeholder { font-weight: 500; color: var(--md-ink-faint); } .el-md .el-md-cselect__mark, .el-md-cselect__menu.is-fixed .el-md-cselect__mark { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.02em; line-height: 1; } .el-md .el-md-cselect__mark--instagram, .el-md-cselect__menu.is-fixed .el-md-cselect__mark--instagram { background: linear-gradient(135deg, #f58529 0%, #dd2a7b 52%, #8134af 100%); } .el-md .el-md-cselect__mark--tiktok, .el-md-cselect__menu.is-fixed .el-md-cselect__mark--tiktok { background: #111827; } .el-md .el-md-cselect__mark--google, .el-md-cselect__menu.is-fixed .el-md-cselect__mark--google { background: #4285f4; } .el-md .el-md-cselect__mark--rekomendasi, .el-md-cselect__menu.is-fixed .el-md-cselect__mark--rekomendasi { background: var(--md-accent, #1f7a63); } .el-md .el-md-cselect__mark--creator, .el-md-cselect__menu.is-fixed .el-md-cselect__mark--creator { background: #c2410c; } .el-md .el-md-cselect__mark--repeat, .el-md-cselect__menu.is-fixed .el-md-cselect__mark--repeat { background: #334155; } .el-md .el-md-cselect__mark--lainnya, .el-md-cselect__menu.is-fixed .el-md-cselect__mark--lainnya { background: #64748b; } .el-md .el-md-cselect--icons .el-md-cselect__menu, .el-md-cselect__menu.is-fixed.el-md-cselect__menu--icons { max-height: 320px; padding: 8px; } .el-md .el-md-cselect--icons .el-md-cselect__option, .el-md-cselect__menu--icons .el-md-cselect__option { min-height: 48px; gap: 12px; } .el-md-booking-form .el-md-cselect__trigger { min-height: 46px; } .el-md .el-md-cselect__check, .el-md-cselect__menu.is-fixed .el-md-cselect__check { flex: none; width: 14px; color: var(--md-accent); font-size: 13px; font-weight: 800; text-align: center; } .el-md .el-md-cselect__text, .el-md-cselect__menu.is-fixed .el-md-cselect__text { flex: 1; min-width: 0; } /* ----------------------------------------------- date button (neumorphism) */ .el-md .el-md-datebtn:focus, .el-md .el-md-datebtn:focus-visible, .el-md .el-md-datebtn:active { /* Beat `.el-md button:focus-visible` hard outline — keeps soft inset only. */ outline: none !important; outline-offset: 0 !important; box-shadow: var(--md-in) !important; } .el-md .el-md-datebtn.is-empty { font-weight: 500; color: var(--md-ink-faint); } .el-md .el-md-datebtn__icon { flex: none; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='3' y='4.5' width='14' height='12.5' rx='2.5' stroke='%231F7A63' stroke-width='1.5'/%3E%3Cpath d='M3 8.5h14M7 3v3M13 3v3' stroke='%231F7A63' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* ------------------------------------------- calendar popup (neumorphism) */ /* * Geometry mirrors One Day’s public price calendar (`.el-od-pcal`): * fixed popup, CSS-grid nav that can shrink, denser day grid, and a * ≤460px mobile pass. Skin stays Multi-Day neumorphism tokens. */ .el-md-cal--neu { position: fixed; z-index: 100050; width: min(440px, calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: 18px 18px 16px; overflow: hidden; box-sizing: border-box; background: var(--md-bg) !important; border: 0 !important; border-radius: 18px !important; box-shadow: var(--md-out-lg) !important; color: var(--md-ink); font-size: 15px; line-height: 1.5; animation: el-md-pop-in 0.16s ease; } .el-md-cal--neu .el-md-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .el-md-cal--neu .el-md-cal__title { font-size: 16px; font-weight: 800; } .el-md-cal--neu .el-md-cal__close, .el-md-cal--neu .el-md-cal__nav-btn { flex: none; display: inline-flex !important; align-items: center; justify-content: center; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: var(--md-surface) !important; box-shadow: var(--md-out-sm) !important; color: var(--md-ink-soft) !important; font-family: inherit; font-size: 0 !important; line-height: 0 !important; cursor: pointer; appearance: none; -webkit-appearance: none; transition: box-shadow 0.15s ease, color 0.15s ease; } .el-md-cal--neu .el-md-cal__close { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; border-radius: 999px !important; } .el-md-cal--neu .el-md-cal__close svg, .el-md-cal--neu .el-md-cal__nav-btn svg { width: 16px; height: 16px; display: block; fill: none !important; stroke: currentColor !important; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .el-md-cal--neu .el-md-cal__close:hover, .el-md-cal--neu .el-md-cal__close:focus, .el-md-cal--neu .el-md-cal__close:focus-visible, .el-md-cal--neu .el-md-cal__nav-btn:hover, .el-md-cal--neu .el-md-cal__nav-btn:focus, .el-md-cal--neu .el-md-cal__nav-btn:focus-visible { background: var(--md-surface) !important; color: var(--md-accent) !important; outline: none; } .el-md-cal--neu .el-md-cal__close:active, .el-md-cal--neu .el-md-cal__nav-btn:active { box-shadow: var(--md-in) !important; color: var(--md-accent) !important; } .el-md-cal--neu .el-md-cal__tabs { display: flex; gap: 6px; padding: 6px; margin-bottom: 12px; border-radius: var(--md-radius-sm); box-shadow: var(--md-in); } .el-md-cal--neu .el-md-cal__tab { flex: 1; min-height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--md-ink-faint); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: box-shadow 0.15s ease, color 0.15s ease; } .el-md-cal--neu .el-md-cal__tab.is-active { background: var(--md-surface); box-shadow: var(--md-out-sm); color: var(--md-accent); } .el-md-cal--neu .el-md-cal__hint { margin: 0 0 12px; color: var(--md-ink-faint); font-size: 12.5px; line-height: 1.45; } .el-md-cal--neu .el-md-cal__nav { display: grid; grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 0.9fr) 34px; gap: 8px; align-items: center; width: 100%; max-width: 100%; margin-bottom: 14px; box-sizing: border-box; } /* Month / year selects shrink with the grid — no rigid rem floors. */ .el-md-cal--neu .el-md-cselect { position: relative; min-width: 0; max-width: 100%; width: 100%; } .el-md-cal--neu .el-md-cselect__native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } .el-md-cal--neu .el-md-cselect__trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 10px; background: var(--md-surface); box-shadow: var(--md-in); color: var(--md-ink); font-family: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; box-sizing: border-box; } .el-md-cal--neu .el-md-cselect__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .el-md-cal--neu .el-md-cselect__chevron { flex: none; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid var(--md-accent); border-bottom: 2px solid var(--md-accent); transform: rotate(45deg); } .el-md-cal--neu .el-md-cselect.is-open .el-md-cselect__chevron { margin-top: 3px; transform: rotate(-135deg); } .el-md-cal--neu .el-md-cselect__menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 1010; max-height: 220px; overflow-y: auto; padding: 8px; background: var(--md-bg); border-radius: var(--md-radius-sm); box-shadow: var(--md-out); animation: el-md-pop-in 0.12s ease; } .el-md-cal--neu .el-md-cselect__menu.is-above { top: auto; bottom: calc(100% + 8px); } .el-md-cal--neu .el-md-cselect__menu[hidden] { display: none; } .el-md-cal--neu .el-md-cselect__option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--md-ink-soft); font-family: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; } .el-md-cal--neu .el-md-cselect__option:hover { box-shadow: var(--md-out-sm); color: var(--md-ink); } .el-md-cal--neu .el-md-cselect__option.is-selected { box-shadow: var(--md-in); color: var(--md-accent); } .el-md-cal--neu .el-md-cselect__check { flex: none; width: 12px; color: var(--md-accent); font-size: 11px; font-weight: 800; text-align: center; } .el-md-cal--neu .el-md-cselect__text { flex: 1; min-width: 0; } .el-md-cal--neu .el-md-cal__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 6px; color: var(--md-ink-faint); font-size: 11px; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; } .el-md-cal--neu .el-md-cal__weekdays > span { display: flex; align-items: center; justify-content: center; height: 28px; } .el-md-cal--neu .el-md-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .el-md-cal--neu .el-md-cal__day { display: inline-flex !important; align-items: center; justify-content: center; width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 0 !important; aspect-ratio: auto; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 10px; background: transparent !important; color: var(--md-ink) !important; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; appearance: none; -webkit-appearance: none; transition: box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease; } .el-md-cal--neu .el-md-cal__day:hover:not(.is-muted):not([disabled]):not(.is-selected), .el-md-cal--neu .el-md-cal__day:focus-visible:not(.is-muted):not([disabled]):not(.is-selected) { /* Preview green — same language as selected, softer so it reads as “akan dipilih”. */ background: var(--md-accent-soft, #dceee8) !important; color: var(--md-accent, #1f7a63) !important; box-shadow: var(--md-out-sm); outline: none; } .el-md-cal--neu .el-md-cal__day.is-selected:hover:not([disabled]), .el-md-cal--neu .el-md-cal__day.is-selected:focus-visible:not([disabled]) { background: color-mix(in srgb, var(--md-accent, #1f7a63) 90%, #000) !important; color: #fff !important; outline: none; } .el-md-cal--neu .el-md-cal__day.is-muted { color: var(--md-ink-faint); opacity: 0.5; } .el-md-cal--neu .el-md-cal__day[disabled] { color: var(--md-ink-faint); opacity: 0.35; cursor: not-allowed; } .el-md-cal--neu .el-md-cal__day.is-today { box-shadow: var(--md-in); } .el-md-cal--neu .el-md-cal__day.is-inrange { background: var(--md-accent-soft) !important; border-radius: 6px; color: var(--md-accent) !important; } .el-md-cal--neu .el-md-cal__day.is-selected { background: var(--md-accent) !important; color: #fff !important; box-shadow: var(--md-out-sm); } .el-md-cal--neu .el-md-cal__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(96, 121, 132, 0.16); } .el-md-cal--neu .el-md-cal__summary { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 10px; box-shadow: var(--md-in); color: var(--md-accent); font-size: 13px; font-weight: 700; } .el-md-cal--neu .el-md-cal__actions { display: flex; flex: none; gap: 8px; } .el-md-cal--neu .el-md-cal__btn { min-height: 36px; padding: 8px 12px; border: 0; border-radius: 9px; background: var(--md-surface); box-shadow: var(--md-out-sm); color: var(--md-ink-soft); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: box-shadow 0.15s ease; } .el-md-cal--neu .el-md-cal__btn:active { box-shadow: var(--md-in); } .el-md-cal--neu .el-md-cal__btn--primary { background: var(--md-accent); color: #fff; } @media (max-width: 460px) { .el-md-cal--neu { width: calc(100vw - 20px); max-width: calc(100vw - 20px); padding: 14px; } .el-md-cal--neu .el-md-cal__nav { grid-template-columns: 32px minmax(0, 1.3fr) minmax(0, 0.85fr) 32px; gap: 6px; } .el-md-cal--neu .el-md-cal__nav-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } .el-md-cal--neu .el-md-cal__close { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } .el-md-cal--neu .el-md-cal__day { height: 36px !important; font-size: 12px; } .el-md-cal--neu .el-md-cselect__trigger { min-height: 34px; padding: 6px 8px; font-size: 12.5px; } } @keyframes el-md-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .el-md .el-md-cselect__menu, .el-md-cselect__menu.is-fixed, .el-md-cal--neu, .el-md-cal--neu .el-md-cselect__menu { animation: none; } .el-md .el-md-cselect__trigger, .el-md .el-md-cselect__option, .el-md .el-md-cselect__chevron, .el-md .el-md-datebtn, .el-md-cal--neu .el-md-cal__day, .el-md-cal--neu .el-md-cal__tab, .el-md-cal--neu .el-md-cal__btn { transition: none; } } /* ---------------------------------------------------------------- options */ /* * Horizontal free-scroll carousel. CSS does the sliding; JS reflects * scroll position onto the thin neumorphic progress bar below — no * slider library. Snap is off so thumb + cards move smoothly together. */ .el-md-carousel { position: relative; } .el-md-options { display: flex; align-items: flex-start; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; scroll-behavior: auto; /* Match horizontal inset so first/last shadows stay in view. */ scroll-padding-inline: 12px; -webkit-overflow-scrolling: touch; /* Room for neumorphic shadows (blur ~14–16px) so they are not clipped. */ padding: 14px 12px 18px; margin: 0; /* Native scrollbar (Windows arrows) diganti indikator hijau neumorphic di bawah. */ scrollbar-width: none; -ms-overflow-style: none; } .el-md-options:focus, .el-md-options:focus-visible { /* Scroll region is tabindex=0 for keyboard — hard ring looks like a black frame around the option cards when mouse-clicked. */ outline: none; } .el-md-options::-webkit-scrollbar { display: none; height: 0; width: 0; } .el-md-carousel__progress { position: relative; height: 12px; margin-top: 12px; border-radius: 999px; background: var(--md-surface, #e2f1f5); box-shadow: var(--md-in); overflow: hidden; cursor: pointer; touch-action: none; outline: none; } .el-md-carousel__progress:focus-visible { box-shadow: var(--md-in), 0 0 0 2px rgba(254, 96, 0, 0.35); } .el-md-carousel__progress.is-dragging { cursor: grabbing; } .el-md-options.is-dragging { scroll-snap-type: none; scroll-behavior: auto; pointer-events: none; } .el-md-carousel__bar { position: absolute; left: 0; top: 0; display: block; height: 100%; width: 30%; border-radius: inherit; background: #fe6000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 4px rgba(254, 96, 0, 0.32); transition: none; will-change: transform; pointer-events: none; cursor: grab; } .el-md-carousel__progress.is-dragging .el-md-carousel__bar { cursor: grabbing; } .el-md-option { flex: 0 0 86%; max-width: 360px; height: auto; align-self: flex-start; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--md-radius); background: var(--md-surface); box-shadow: var(--md-out); overflow: hidden; transition: box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease, transform 0.2s ease; } /* Elevate available cards via tighter shadow — keep surface color, avoid far white bloom. */ .el-md-option.is-available { box-shadow: -4px -4px 8px var(--md-light), 4px 5px 10px var(--md-dark); } .el-md-option.is-available .el-md-option__actions .el-md-btn--solid { box-shadow: var(--md-out-sm); } .el-md-option.is-unavailable { box-shadow: var(--md-in); opacity: 1; background: color-mix(in srgb, var(--md-surface) 92%, #9bb0ba); } .el-md-option.is-unavailable [data-detail-include], .el-md-option.is-unavailable [data-booking] { display: none !important; } .el-md-option__body { padding: 18px; display: flex; flex-direction: column; gap: 12px; } /* Include Hotel: tighter gap between cover photo and title. */ .el-md-option--hotel .el-md-option__body { padding-top: 10px; } .el-md-option__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .el-md-option__label { margin: 0; font-size: 16px; font-weight: 700; } .el-md-option__sub { margin: 2px 0 0; font-size: 12px; color: var(--md-ink-faint); } .el-md-option__head + .el-md-option__summary { /* Tighten title → summary (body flex gap is 12px). */ margin-top: -10px; } .el-md-option__summary { margin: 0; font-size: 13px; line-height: 1.35; color: var(--md-ink-soft); } .el-md-option__summary em { font-style: italic; font-weight: inherit; color: var(--md-ink); } .el-md-option__price { text-align: left; } /* `.el-md-btn`'s `display` would otherwise beat the UA [hidden] rule. */ .el-md-option__price[hidden], .el-md-btn[hidden] { display: none; } .el-md-option__amount { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--md-accent); } .el-md-option__amount--na { font-size: 14px; font-weight: 600; color: var(--md-ink-faint); } .el-md-option__unit { font-size: 12px; color: var(--md-ink-faint); } /* ------------------------------------------------------------- price grid */ .el-md-price-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .el-md-price-grid__rows { display: grid; gap: 6px; } .el-md-price-grid__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--md-radius-sm); /* Tighter inset than --md-in so white highlight tidak mekar jauh. */ box-shadow: inset -2px -2px 4px var(--md-light), inset 2px 2px 5px var(--md-dark); font-size: 13px; } .el-md-price-grid__row.is-extra { display: none; } .el-md-price-grid.is-expanded .el-md-price-grid__row.is-extra { display: flex; } .el-md-price-grid__pax { font-weight: 600; color: var(--md-ink-soft); } .el-md-price-grid__amount { font-weight: 800; white-space: nowrap; } .el-md-price-grid__amount em { margin-left: 2px; font-style: normal; font-weight: 600; font-size: 11px; color: var(--md-ink-faint); } /* Without Hotel already lists every row; never show the 7+ gate. The `display: inline-flex !important` below also beats UA [hidden], so restating none here is the only way a leftover toggle stays gone. */ .el-md-option--plain .el-md-price-grid__toggle, .el-md-price-grid .el-md-price-grid__toggle[hidden] { display: none !important; } .el-md-price-grid .el-md-price-grid__toggle { align-self: center; display: inline-flex !important; min-height: 36px !important; width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 0 16px !important; border-radius: 10px !important; background: var(--md-surface, #e2f1f5) !important; color: var(--md-accent, #1f7a63) !important; font-size: 13px; font-weight: 700; text-decoration: none !important; box-shadow: var(--md-out-sm) !important; transition: box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .el-md-price-grid .el-md-price-grid__toggle:hover, .el-md-price-grid .el-md-price-grid__toggle:focus, .el-md-price-grid .el-md-price-grid__toggle:focus-visible { background: var(--md-accent-soft, #dceee8) !important; color: var(--md-accent, #1f7a63) !important; box-shadow: var(--md-out-sm) !important; outline: none; } .el-md-price-grid .el-md-price-grid__toggle:active { background: var(--md-accent-soft, #dceee8) !important; color: var(--md-accent, #1f7a63) !important; box-shadow: var(--md-in) !important; transform: translateY(1px); } .el-md-price-grid__empty { margin: 0; font-size: 13px; color: var(--md-ink-faint); } /* Skeleton while a fresh quote is in flight — inset “well” over the numbers only. Needs an opaque surface: transparent bg made the neumorphic inset nearly invisible on the page wash. */ .el-md-price-grid.is-loading, .el-md-option__price.is-loading { position: relative; border-radius: var(--md-radius-sm); background: color-mix(in srgb, var(--md-surface, #e2f1f5) 88%, #fff); box-shadow: var(--md-in-deep); min-height: 72px; padding: 6px; overflow: hidden; color: transparent; } .el-md-price-grid.is-loading > *, .el-md-option__price.is-loading > * { visibility: hidden; } .el-md-price-grid.is-loading::after, .el-md-option__price.is-loading::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 100deg, transparent 18%, rgba(255, 255, 255, 0.72) 50%, transparent 82% ); animation: el-md-shimmer 1.15s ease-in-out infinite; pointer-events: none; } @keyframes el-md-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .el-md-price-grid.is-loading::after, .el-md-option__price.is-loading::after { animation: none; } } /* Listing cards use the same quote skeleton — keep it crisp on the flat pricing mount (no nested surface plate). */ .el-md-listing-card .el-md-price-grid.is-loading, .el-md-listing-card .el-md-option__price.is-loading { background: color-mix(in srgb, var(--md-surface, #e2f1f5) 82%, #fff); box-shadow: var(--md-in-deep); } /* Quote refresh — soft, scoped, tidak menggeser layout. Listing widgets share these states via the data-el-md-* hooks (their id is unique per package, e.g. el-md-options-285, so it can't be targeted by plain id). */ #el-md-options.is-busy, [data-el-md-options].is-busy { cursor: progress; } #el-md-pricing.is-quoting .el-md-datebtn, #el-md-pricing.is-quoting .el-md-cselect__trigger, [data-el-md-pricing-root].is-quoting .el-md-datebtn, [data-el-md-pricing-root].is-quoting .el-md-cselect__trigger { opacity: 0.78; transition: opacity 0.2s ease; } .el-md-rooms-cta.is-updating { opacity: 0.85; animation: el-md-soft-pulse 1.35s ease-in-out infinite; } .el-md-rooms-cta:disabled { opacity: 0.65; cursor: progress; } #el-md-options.is-settled .el-md-rooms-cta__sub, #el-md-options.is-settled .el-md-price-grid, #el-md-options.is-settled .el-md-option__price, [data-el-md-options].is-settled .el-md-rooms-cta__sub, [data-el-md-options].is-settled .el-md-price-grid, [data-el-md-options].is-settled .el-md-option__price { animation: el-md-settle-in 0.4s ease; } @keyframes el-md-fade-settle { from { opacity: 0.45; } to { opacity: 1; } } .el-md-room-choice.is-picking { transform: scale(0.985); box-shadow: var(--md-in); transition: transform 0.15s ease, box-shadow 0.15s ease; } @keyframes el-md-soft-pulse { 0%, 100% { outline-color: color-mix(in srgb, var(--md-accent) 18%, transparent); } 50% { outline-color: color-mix(in srgb, var(--md-accent) 42%, transparent); } } @keyframes el-md-settle-in { from { opacity: 0.55; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .el-md-rooms-cta.is-updating { animation: none; } #el-md-options.is-settled .el-md-rooms-cta__sub, #el-md-options.is-settled .el-md-price-grid, #el-md-options.is-settled .el-md-option__price, [data-el-md-options].is-settled .el-md-rooms-cta__sub, [data-el-md-options].is-settled .el-md-price-grid, [data-el-md-options].is-settled .el-md-option__price { animation: none; } .el-md-room-choice.is-picking { transform: none; } .el-md-room-choice__view-room { transition: none; } .el-md-room-choice__view-room:hover, .el-md-room-choice__view-room:focus-visible { transform: none; } } /* -------------------------------------------------------- availability notes */ .el-md-option__notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .el-md-option__notes[hidden] { display: none; } .el-md-option__notes li { position: relative; padding-left: 14px; font-size: 12px; line-height: 1.5; color: var(--md-ink-faint); } .el-md-option__notes li::before { content: '•'; position: absolute; left: 2px; color: var(--md-accent); } /* ------------------------------------------------------------- cover photo */ .el-md-option__cover { position: relative; aspect-ratio: 16 / 9; background: var(--md-in-deep); overflow: hidden; cursor: zoom-in; } .el-md-option__cover-img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .el-md-option__cover-img--empty { background: linear-gradient(135deg, var(--md-accent-soft), var(--md-surface)); } .el-md-option__cover-stars { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 8px; border-radius: 999px; background: rgba(30, 36, 48, 0.55); color: #f5c453; font-size: 11px; letter-spacing: 0.12em; } .el-md-option__cover-badge { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(30, 36, 48, 0.55); color: #fff; font-size: 11px; font-weight: 600; } /* Manual nav — same neumorphic orange language as the Include Hotel gallery. */ .el-md-option__cover-nav { position: absolute; top: 50%; z-index: 3; display: inline-flex !important; align-items: center; justify-content: center; width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: #fe6000 !important; box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.45), 3px 3px 8px rgba(180, 70, 0, 0.35) !important; color: #fff !important; font-size: 0 !important; line-height: 0 !important; cursor: pointer; appearance: none; -webkit-appearance: none; transform: translateY(-50%); transition: background 0.15s ease; } .el-md-option__cover-nav:hover, .el-md-option__cover-nav:focus-visible { background: color-mix(in srgb, #fe6000 88%, #000) !important; color: #fff !important; outline: none; } .el-md-option__cover-nav svg { width: 15px; height: 15px; display: block; fill: none !important; stroke: currentColor !important; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .el-md-option__cover-nav--prev { left: 8px !important; } .el-md-option__cover-nav--next { right: 8px !important; } .el-md-option__cover-caption { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 28px 14px 10px; display: grid; gap: 4px; background: linear-gradient(180deg, transparent, rgba(20, 26, 36, 0.72)); color: #fff; cursor: zoom-in; } .el-md-option__cover-dots { display: flex; gap: 5px; cursor: default; } .el-md-option__cover-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.5); cursor: pointer; appearance: none; -webkit-appearance: none; transition: width 0.15s ease, background 0.15s ease; } .el-md-option__cover-dot.is-active { width: 15px; background: #fff; } .el-md-option__cover-hotel, .el-md-option__cover-room { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .el-md-option__cover-hotel { font-size: 15px; font-weight: 800; line-height: 1.15; } .el-md-option__cover-room { font-size: 12px; font-weight: 600; line-height: 1.15; margin-top: 0; opacity: 0.9; } @media (prefers-reduced-motion: reduce) { .el-md-option__cover-nav, .el-md-option__cover-dot { transition: none; } } /* ----------------------------------------------------------- rooms CTA */ .el-md-rooms-cta { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin-top: 16px; padding: 14px 16px !important; border: 0 !important; border-radius: 18px !important; background: var(--md-bg, #e2f1f5) !important; box-shadow: var(--md-out) !important; color: var(--md-ink, #1e2430) !important; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease; } .el-md-rooms-cta:hover, .el-md-rooms-cta:focus, .el-md-rooms-cta:focus-visible { background: var(--md-accent-soft, #dceee8) !important; box-shadow: var(--md-out-sm) !important; color: var(--md-ink, #1e2430) !important; outline: none; } .el-md-rooms-cta:active { background: var(--md-accent-soft, #dceee8) !important; box-shadow: var(--md-in) !important; transform: translateY(1px); color: var(--md-ink, #1e2430) !important; } .el-md-rooms-cta:focus-visible { outline: 2px solid color-mix(in srgb, var(--md-accent, #1f7a63) 55%, transparent); outline-offset: 3px; } .el-md-rooms-cta__copy { display: grid; gap: 2px; min-width: 0; } .el-md-rooms-cta__label { font-size: 15px; font-weight: 700; color: var(--md-accent, #1f7a63) !important; } .el-md-rooms-cta:hover .el-md-rooms-cta__label, .el-md-rooms-cta:focus .el-md-rooms-cta__label, .el-md-rooms-cta:active .el-md-rooms-cta__label { color: var(--md-accent, #1f7a63) !important; } .el-md-rooms-cta__sub { font-size: 12px; font-weight: 500; color: var(--md-ink-faint, #8b94a3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .el-md-rooms-cta__sub[hidden] { display: none; } .el-md-rooms-cta__chevron { flex: none; width: 28px; height: 28px; border-radius: 50%; background: transparent !important; box-shadow: var(--md-out-sm); position: relative; } .el-md-rooms-cta:hover .el-md-rooms-cta__chevron, .el-md-rooms-cta:focus .el-md-rooms-cta__chevron { box-shadow: var(--md-out-sm); } .el-md-rooms-cta__chevron::before { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-right: 2px solid var(--md-accent, #1f7a63); border-bottom: 2px solid var(--md-accent, #1f7a63); transform: translate(-60%, -50%) rotate(-45deg); } .el-md-hotels-data[hidden] { display: none !important; } /* ----------------------------------------------------------------- hotels (legacy / include sheet helpers kept minimal) */ .el-md-hotels { display: grid; gap: 10px; margin-top: 16px; } /* --------------------------------------------------------- option actions */ .el-md-option__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .el-md-option__actions .el-md-btn { flex: 1; } .el-md-wa { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #25d366 0%, #1ebe57 100%); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.01em; text-decoration: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 8px 18px rgba(18, 140, 80, 0.28), 0 2px 4px rgba(16, 24, 32, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .el-md-wa[hidden] { display: none !important; } .el-md-wa:hover, .el-md-wa:focus, .el-md-wa:focus-visible { color: #fff; filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 10px 22px rgba(18, 140, 80, 0.34), 0 2px 6px rgba(16, 24, 32, 0.1); outline: none; } .el-md-wa:active { transform: translateY(0); filter: brightness(0.97); box-shadow: 0 1px 2px rgba(16, 24, 32, 0.18) inset, 0 4px 10px rgba(18, 140, 80, 0.22); } .el-md-wa__icon { width: 22px; height: 22px; flex-shrink: 0; } .el-md-wa__label { line-height: 1.2; } .el-md-option.is-unavailable .el-md-price-grid__empty { margin: 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--md-surface) 70%, #d7e3e8); color: var(--md-ink); font-size: 13px; font-weight: 600; line-height: 1.45; box-shadow: var(--md-in); } /* ---------------------------------------------------------------- buttons */ .el-md-btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: var(--md-surface, #e2f1f5) !important; color: var(--md-ink-soft, #5b6472) !important; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--md-out-sm) !important; appearance: none; -webkit-appearance: none; transition: box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease; } .el-md-btn:hover, .el-md-btn:focus, .el-md-btn:focus-visible { background: var(--md-accent-soft, #dceee8) !important; color: var(--md-accent, #1f7a63) !important; box-shadow: var(--md-out-sm) !important; outline: none; } .el-md-btn:active { box-shadow: var(--md-in) !important; background: var(--md-accent-soft, #dceee8) !important; color: var(--md-accent, #1f7a63) !important; } .el-md-btn--soft { background: #fe6000 !important; color: #fff !important; box-shadow: var(--md-out-sm) !important; } .el-md-btn--soft:hover, .el-md-btn--soft:focus, .el-md-btn--soft:focus-visible { background: color-mix(in srgb, #fe6000 88%, #000) !important; color: #fff !important; box-shadow: var(--md-out-sm) !important; } .el-md-btn--soft:active { background: color-mix(in srgb, #fe6000 82%, #000) !important; color: #fff !important; box-shadow: var(--md-in) !important; } .el-md-btn--link { box-shadow: none !important; padding: 0 10px !important; background: transparent !important; color: var(--md-ink-faint, #8b94a3) !important; text-decoration: underline; text-underline-offset: 3px; } .el-md-btn--link:hover, .el-md-btn--link:focus, .el-md-btn--link:focus-visible, .el-md-btn--link:active { background: transparent !important; box-shadow: none !important; color: var(--md-accent, #1f7a63) !important; } .el-md-btn--solid { background: var(--md-accent, #1f7a63) !important; color: #fff !important; box-shadow: var(--md-out-sm) !important; } .el-md-btn--solid:hover, .el-md-btn--solid:focus, .el-md-btn--solid:focus-visible { background: color-mix(in srgb, var(--md-accent, #1f7a63) 88%, #000) !important; color: #fff !important; } .el-md-btn--solid:active { background: color-mix(in srgb, var(--md-accent, #1f7a63) 82%, #000) !important; color: #fff !important; box-shadow: var(--md-in) !important; } /* --------------------------------------------------------------- messages */ .el-md-messages { margin-top: 12px; display: grid; gap: 6px; } .el-md-message { margin: 0; padding: 9px 14px; border-radius: var(--md-radius-sm); box-shadow: var(--md-in); font-size: 13px; } .el-md-message--notice { color: var(--md-warning); } .el-md-message--error { color: var(--md-danger); } /* ----------------------------------------------------------------- sheets */ /* Pola sama One Day price modal: overlay terpusat + gutter di semua sisi. */ .el-md-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; padding: 16px; box-sizing: border-box; color-scheme: light; } /* An author `display` beats the UA rule for [hidden], so restate it. */ .el-md-sheet[hidden] { display: none; } .el-md-sheet__scrim { position: absolute; inset: 0; background: rgba(30, 36, 48, 0.48); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: el-md-sheet-scrim-in 0.32s ease both; } .el-md-sheet__panel { position: relative; z-index: 1; width: min(560px, 100%); max-width: 100%; margin-inline: auto; box-sizing: border-box; max-height: min(88vh, 860px); display: flex; flex-direction: column; overflow: hidden; background: var(--md-bg, #e2f1f5); border-radius: 22px; box-shadow: 0 24px 60px rgba(30, 36, 48, 0.28); /* OD-style: soft rise + scale — GPU-friendly opacity/transform only. */ animation: el-md-sheet-panel-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; will-change: transform, opacity; } .el-md-sheet.is-closing .el-md-sheet__scrim { animation: el-md-sheet-scrim-out 0.22s ease both; } .el-md-sheet.is-closing .el-md-sheet__panel { animation: el-md-sheet-panel-out 0.22s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes el-md-sheet-scrim-in { from { opacity: 0; } to { opacity: 1; } } @keyframes el-md-sheet-scrim-out { from { opacity: 1; } to { opacity: 0; } } @keyframes el-md-sheet-panel-in { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.96); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes el-md-sheet-panel-in-mobile { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.97); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes el-md-sheet-panel-out { from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } to { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.98); } } @media (max-width: 767px) { .el-md-sheet:not(.is-closing) .el-md-sheet__panel { animation-name: el-md-sheet-panel-in-mobile; } } @media (prefers-reduced-motion: reduce) { .el-md-sheet__scrim, .el-md-sheet__panel, .el-md-sheet.is-closing .el-md-sheet__scrim, .el-md-sheet.is-closing .el-md-sheet__panel { animation: none !important; } } .el-md-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 20px 14px; } .el-md-sheet__head h2 { margin: 0; font-size: 18px; font-weight: 700; } .el-md-sheet__sub { margin: 2px 0 0; font-size: 13px; color: var(--md-ink-faint); } .el-md-close { display: inline-flex !important; align-items: center; justify-content: center; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; flex: none; border: 0 !important; border-radius: 999px !important; background: #fe6000 !important; box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.45), 3px 3px 8px rgba(180, 70, 0, 0.35) !important; font-size: 0 !important; line-height: 0 !important; color: #fff !important; cursor: pointer; appearance: none; -webkit-appearance: none; } .el-md-close svg { width: 16px; height: 16px; display: block; fill: none !important; stroke: currentColor !important; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .el-md-close:hover, .el-md-close:focus, .el-md-close:focus-visible { background: color-mix(in srgb, #fe6000 88%, #000) !important; color: #fff !important; outline: none; } .el-md-close:active { box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.25), inset 2px 2px 6px rgba(0, 0, 0, 0.2) !important; color: #fff !important; } .el-md-sheet__body { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 4px 20px 28px; display: grid; gap: 12px; align-content: start; } /* Page scroll lock lives on html.el-md-scroll-lock so the classic Windows scrollbar can be replaced with padding instead of shifting the layout. */ /* ----------------------------------------------------------- room choices */ .el-md-room-seg { display: grid; gap: 12px; padding: 4px 0 18px; border-bottom: 1px solid color-mix(in srgb, var(--md-ink-faint) 22%, transparent); } .el-md-room-seg:last-child { border-bottom: 0; padding-bottom: 4px; } .el-md-room-seg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .el-md-room-seg__titles { min-width: 0; } .el-md-room-seg__stars { display: block; font-size: 12px; letter-spacing: 0.12em; color: #d8a33a; line-height: 1.2; } .el-md-room-seg__name { margin: 2px 0 0; font-size: 16px; font-weight: 750; line-height: 1.25; } .el-md-room-seg__meta { margin: 4px 0 0; font-size: 12px; color: var(--md-ink-faint); } .el-md-room-seg__detail { flex: none; align-self: center; margin: 0; padding: 8px 14px !important; border: 0 !important; border-radius: 999px !important; background: #fe6000 !important; box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.45), 3px 3px 8px rgba(180, 70, 0, 0.35) !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.02em; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; } .el-md-room-seg__detail:hover, .el-md-room-seg__detail:focus, .el-md-room-seg__detail:focus-visible { background: color-mix(in srgb, #fe6000 88%, #000) !important; color: #fff !important; box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.4), 3px 3px 8px rgba(180, 70, 0, 0.4) !important; outline: none; text-decoration: none !important; } .el-md-room-seg__detail:active { background: color-mix(in srgb, #fe6000 82%, #000) !important; box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.25), inset 2px 2px 6px rgba(0, 0, 0, 0.2) !important; color: #fff !important; } .el-md-room-seg__locked { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; box-shadow: var(--md-in); font-size: 13px; color: var(--md-ink-faint); } .el-md-room-seg__locked strong { font-size: 14px; font-weight: 700; color: var(--md-accent); } .el-md-room-seg__choices { display: grid; gap: 12px; /* Breathing room so raised/inset neumorphic shadows are not flush to sheet edges. */ padding: 6px 10px 10px; box-sizing: border-box; } .el-md-room-choice { display: grid; /* thumb | details | radio rail — fixed radio column keeps the right edge tidy */ grid-template-columns: 72px minmax(0, 1fr) 40px; column-gap: 12px; row-gap: 0; align-items: center; width: 100%; padding: 12px; border: 0; border-radius: 16px; background: var(--md-surface, #e2f1f5); box-shadow: var(--md-out-sm); text-align: left; cursor: pointer; transition: box-shadow 0.16s ease, transform 0.16s ease; box-sizing: border-box; } .el-md-room-choice:hover { transform: translateY(-1px); box-shadow: var(--md-out); } .el-md-room-choice:has(.el-md-room-choice__thumb), .el-md-room-choice:has(.el-md-room-choice__media) { grid-template-columns: 72px minmax(0, 1fr) 40px; } .el-md-room-choice:not(:has(.el-md-room-choice__thumb)):not(:has(.el-md-room-choice__media)) { grid-template-columns: minmax(0, 1fr) 40px; } .el-md-room-choice.is-selected { box-shadow: var(--md-in); } .el-md-room-choice:focus-visible { outline: 2px solid color-mix(in srgb, var(--md-accent) 55%, transparent); outline-offset: 2px; } .el-md-room-choice__media { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; box-shadow: var(--md-out-sm); align-self: center; } .el-md-room-choice__thumb { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .el-md-room-choice__media .el-md-room-choice__thumb { box-shadow: none; } /* When thumb is a direct child (legacy markup), keep square size. */ .el-md-room-choice > .el-md-room-choice__thumb { width: 72px; height: 72px; box-shadow: var(--md-out-sm); } .el-md-room-choice__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; } .el-md-room-choice__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; line-height: 1.25; color: var(--md-ink, #1e2430); } .el-md-room-choice__head strong { font-weight: 800; } .el-md-tag { padding: 2px 9px; border-radius: 999px; background: #dceee8; color: #1f7a63; font-size: 11px; font-weight: 700; } .el-md-room-choice__facts { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--md-ink-faint, #8b94a3); } .el-md-room-choice__view-room { display: inline-flex; align-items: center; margin: 8px 0 0; padding: 5px 10px; border: 0; border-radius: 8px; background: var(--md-accent, #1f7a63); box-shadow: var(--md-out-sm); color: #fff; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .el-md-room-choice__view-room:hover, .el-md-room-choice__view-room:focus-visible { background: color-mix(in srgb, var(--md-accent, #1f7a63) 88%, #000); color: #fff; transform: translateY(-1px); } .el-md-room-choice__view-room:active { background: color-mix(in srgb, var(--md-accent, #1f7a63) 82%, #000); color: #fff; transform: translateY(0); box-shadow: var(--md-in); } /* Selection radio — fixed rail, centered, readable when idle */ .el-md-room-choice__check { width: 24px; height: 24px; border-radius: 50%; justify-self: center; align-self: center; flex-shrink: 0; background: var(--md-surface, #e2f1f5); box-shadow: var(--md-in); position: relative; } .el-md-room-choice.is-selected .el-md-room-choice__check { background: var(--md-accent, #1f7a63); box-shadow: var(--md-out-sm); } .el-md-room-choice.is-selected .el-md-room-choice__check::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; } /* ---------------------------------------------------------- hotel detail */ .el-md-hotel-detail__media { width: 100%; height: auto; border-radius: 18px; box-shadow: -6px -6px 14px rgba(255, 255, 255, 0.92), 6px 6px 16px rgba(151, 177, 197, 0.55); } .el-md-hotel-detail__facts { margin: 0; padding: 16px; border-radius: 16px; box-shadow: inset -3px -3px 7px rgba(255, 255, 255, 0.92), inset 3px 3px 8px rgba(151, 177, 197, 0.55); } .el-md-hotel-detail__facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 14px; } .el-md-hotel-detail__facts dt { color: #8b94a3; } .el-md-hotel-detail__facts dd { margin: 0; font-weight: 600; text-align: right; } .el-md-hotel-detail__text { margin: 0; color: #5b6472; font-size: 14px; } /* ------------------------------------------------------- booking summary */ .el-md-sheet--booking .el-md-sheet__panel { width: min(920px, calc(100% - 24px)); max-height: min(92vh, 940px); } .el-md-sheet--booking .el-md-sheet__body { /* Top padding keeps the RINGKASAN neumorphic highlight from being clipped by overflow-y: auto on the sheet body. Bottom padding keeps the WhatsApp submit button and its shadow inside the rounded panel (overflow: hidden). */ padding: 12px 22px 32px; scroll-padding-top: 12px; scroll-padding-bottom: 24px; } .el-md-sheet--booking .el-md-sheet__head { padding: 22px 22px 10px; overflow: visible; } .el-md-sheet--booking .el-md-sheet__head h2 { line-height: 1.3; overflow: visible; padding-block: 1px 0; } .el-md-sheet .el-md { padding: 0; min-height: 0; background: transparent !important; background-color: transparent !important; } .el-md-booking-form { display: grid; gap: 20px; } .el-md-booking-form__fields, .el-md-booking-form__trip { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .el-md-booking-kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; color: var(--md-ink-faint); } .el-md-booking-aside { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 18px; overflow: hidden; border-radius: var(--md-radius, 18px); background: var(--md-surface, #e2f1f5); box-shadow: var(--md-out-sm); } .el-md-booking-aside.has-media { padding-top: 0; } .el-md-booking-media[hidden] { display: none !important; } .el-md-booking-media { margin: 0 -18px 0; } .el-md-booking-media .el-md-ihotel-gallery__stage { border-radius: 0; } .el-md-booking-summary { margin: 0; padding: 0; border-radius: 0; box-shadow: none; } .el-md-booking-summary > div { display: grid; grid-template-columns: minmax(7.5em, 38%) minmax(0, 1fr); gap: 10px; padding: 8px 0; font-size: 13px; line-height: 1.4; border-bottom: 1px solid color-mix(in srgb, var(--md-ink-faint) 16%, transparent); } .el-md-booking-summary > div:first-child { padding-top: 0; } .el-md-booking-summary > div:last-child { border-bottom: 0; padding-bottom: 0; } .el-md-booking-summary dt { color: var(--md-ink-faint, #8b94a3); font-weight: 600; } .el-md-booking-summary dd { margin: 0; font-weight: 700; text-align: right; color: var(--md-ink); overflow-wrap: anywhere; } .el-md-booking-stays[hidden] { display: none !important; } .el-md-booking-stays { padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--md-ink-faint) 16%, transparent); } .el-md-booking-stays .el-md-booking-kicker { margin-bottom: 8px; } .el-md-booking-stays__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .el-md-booking-stay { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--md-accent-soft) 70%, var(--md-surface)); } .el-md-booking-stay__where { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--md-ink-faint); } .el-md-booking-stay__name { font-size: 14px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--md-ink); } .el-md-booking-stay__room { font-size: 12.5px; font-weight: 600; font-style: italic; line-height: 1.3; color: var(--md-accent, #1f7a63); } .el-md-booking-summary__note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--md-ink-soft, #5b6472); } .el-md-booking-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .el-md-booking-form .el-md-control > label, .el-md-booking-form .el-md-control > span { font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; color: var(--md-ink-faint); } .el-md-booking-form .el-md-req { color: var(--md-danger, #b3261e); font-weight: 800; letter-spacing: 0; text-decoration: none; border: 0; } .el-md-booking-hint { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--md-ink-faint); } .el-md-wa-group { display: grid; grid-template-columns: minmax(6.75rem, 7.6rem) minmax(0, 1fr); gap: 8px; align-items: stretch; } .el-md-wa-group .el-md-cselect, .el-md-wa-group .el-md-cselect__trigger, .el-md-wa-group .el-md-booking-input { min-height: 46px; } .el-md-booking-form .el-md-booking-input, .el-md-booking-form .el-md-booking-textarea, .el-md-booking-form input.el-md-booking-input, .el-md-booking-form textarea.el-md-booking-textarea, .el-md-wa-group .el-md-booking-input { width: 100%; min-height: 46px; padding: 11px 14px; border: 0 !important; border-radius: var(--md-radius-sm, 12px); background: var(--md-surface, #e2f1f5) !important; background-color: var(--md-surface, #e2f1f5) !important; box-shadow: var(--md-in) !important; color: var(--md-ink, #1e2430) !important; font-family: inherit; font-size: 16px; font-weight: 600; box-sizing: border-box; -webkit-appearance: none; appearance: none; } .el-md-booking-form .el-md-booking-textarea, .el-md-booking-form textarea.el-md-booking-textarea { min-height: 76px; resize: vertical; line-height: 1.45; font-weight: 500; } .el-md-booking-form .el-md-booking-input:focus, .el-md-booking-form .el-md-booking-input:focus-visible, .el-md-booking-form .el-md-booking-textarea:focus, .el-md-booking-form .el-md-booking-textarea:focus-visible, .el-md-booking-form input.el-md-booking-input:focus, .el-md-booking-form input.el-md-booking-input:focus-visible, .el-md-booking-form textarea.el-md-booking-textarea:focus, .el-md-booking-form textarea.el-md-booking-textarea:focus-visible { outline: 2px solid var(--md-accent, #1f7a63); outline-offset: 2px; background: var(--md-surface, #e2f1f5) !important; background-color: var(--md-surface, #e2f1f5) !important; border: 0 !important; box-shadow: var(--md-in) !important; } /* Beat theme/browser autofill that forces white fields on live sites. */ .el-md-booking-form .el-md-booking-input:-webkit-autofill, .el-md-booking-form .el-md-booking-input:-webkit-autofill:hover, .el-md-booking-form .el-md-booking-input:-webkit-autofill:focus, .el-md-booking-form .el-md-booking-textarea:-webkit-autofill, .el-md-booking-form .el-md-booking-textarea:-webkit-autofill:hover, .el-md-booking-form .el-md-booking-textarea:-webkit-autofill:focus { -webkit-text-fill-color: var(--md-ink, #1e2430); caret-color: var(--md-ink, #1e2430); box-shadow: var(--md-in), 0 0 0 1000px var(--md-surface, #e2f1f5) inset !important; transition: background-color 99999s ease-out; } .el-md-booking-price { display: grid; gap: 6px; margin: 2px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--md-accent-soft, #dceee8); box-shadow: none; } .el-md-booking-price__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .el-md-booking-price__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--md-ink-faint); margin: 0; } .el-md-booking-price strong { font-size: 14px; font-weight: 700; color: var(--md-ink); word-break: break-word; text-align: right; } .el-md-booking-price__row--total { padding-top: 8px; margin-top: 2px; border-top: 1px solid color-mix(in srgb, var(--md-accent) 22%, transparent); } .el-md-booking-price__row--total strong { font-size: 20px; font-weight: 800; color: var(--md-accent); letter-spacing: -0.02em; } .el-md-booking-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fde8e6; color: var(--md-danger, #b3261e); font-size: 13px; font-weight: 600; line-height: 1.45; } .el-md-booking-error[hidden] { display: none !important; } .el-md-booking-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 8px; margin-bottom: 4px; padding: 0 18px; border: 0; border-radius: 14px; background: #fe6000; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.45), 3px 3px 8px rgba(180, 70, 0, 0.35); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .el-md-booking-submit:hover, .el-md-booking-submit:focus, .el-md-booking-submit:focus-visible { color: #fff; background: color-mix(in srgb, #fe6000 88%, #000); outline: none; transform: translateY(-1px); } .el-md-booking-submit:active { transform: translateY(0); box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.25), inset 2px 2px 6px rgba(0, 0, 0, 0.2); } .el-md-booking-submit:disabled { opacity: 0.7; cursor: wait; transform: none; } .el-md-booking-submit.el-md-booking-wa { background: linear-gradient(180deg, #25d366 0%, #1ebe57 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 8px 18px rgba(18, 140, 80, 0.28), 0 2px 4px rgba(16, 24, 32, 0.08); } .el-md-booking-submit.el-md-booking-wa:hover, .el-md-booking-submit.el-md-booking-wa:focus, .el-md-booking-submit.el-md-booking-wa:focus-visible { background: linear-gradient(180deg, #2fe074 0%, #1aa34c 100%); color: #fff; transform: translateY(-1px); } .el-md-booking-submit.el-md-booking-wa:active { transform: translateY(0); filter: brightness(0.97); box-shadow: 0 1px 2px rgba(16, 24, 32, 0.18) inset, 0 4px 10px rgba(18, 140, 80, 0.22); } /* * Booking success state — portal (orange) + WhatsApp (green via .el-md-wa). * Sheet stays open; only form/success visibility toggles. */ .el-md-booking-form[hidden], .el-md-booking-success[hidden] { display: none !important; } .el-md-booking-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 28px 8px 18px; overflow: hidden; } .el-md-booking-success__mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--md-accent-soft, #dceee8); box-shadow: var(--md-out-sm); color: var(--md-accent, #1f7a63); } .el-md-booking-success__mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .el-md-booking-success__title { margin: 0; max-width: 20em; color: var(--md-ink); font-size: 1.55rem; font-weight: 700; line-height: 1.25; text-wrap: balance; } .el-md-booking-success__id, .el-md-booking-success__state { margin: 0; color: var(--md-ink-soft); font-size: 14px; font-weight: 600; max-width: 100%; overflow-wrap: anywhere; } .el-md-booking-success__id strong, .el-md-booking-success__state span { color: var(--md-ink); font-weight: 800; } .el-md-booking-success__actions { display: flex; flex-direction: column; width: 100%; max-width: 360px; gap: 10px; margin-top: 12px; box-sizing: border-box; } .el-md-booking-success__portal { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; min-height: 48px; padding: 0 18px; border: 0; border-radius: 14px; box-sizing: border-box; background: #fe6000; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.45), 3px 3px 8px rgba(180, 70, 0, 0.35); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .el-md-booking-success__portal:hover, .el-md-booking-success__portal:focus-visible { color: #fff; background: color-mix(in srgb, #fe6000 88%, #000); outline: none; transform: translateY(-1px); } .el-md-booking-success__portal:active { transform: translateY(0); box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.25), inset 2px 2px 6px rgba(0, 0, 0, 0.2); } .el-md-booking-success__portal[hidden] { display: none !important; } /* Warna hijau tombol ini mengikuti .el-md-wa (gradient) — jangan ditimpa flat color di sini, biar konsisten dengan tombol WA lain. */ .el-md-booking-success__wa { width: 100%; max-width: 100%; margin-top: 0; box-sizing: border-box; text-decoration: none; box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.45), 3px 3px 8px rgba(18, 120, 60, 0.35); } .el-md-booking-success__wa:hover, .el-md-booking-success__wa:focus-visible { filter: none; background: color-mix(in srgb, #25d366 90%, #000); box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.45), 3px 3px 8px rgba(18, 120, 60, 0.4); } .el-md-booking-success__wa:active { filter: none; background: color-mix(in srgb, #25d366 82%, #000); box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.25), inset 2px 2px 6px rgba(0, 0, 0, 0.2); } .el-md-sheet--booking.is-success .el-md-sheet__sub { display: none; } .el-md-sheet--booking.is-success .el-md-sheet__body { overflow-x: hidden; } .el-md-wa:disabled { opacity: 0.7; cursor: wait; transform: none; filter: none; } @media (min-width: 800px) { .el-md-booking-form { grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.18fr); gap: 28px; align-items: start; } .el-md-booking-form__trip { position: sticky; top: 12px; } .el-md-booking-form__fields { padding-top: 20px; padding-left: 28px; border-left: 1px solid color-mix(in srgb, var(--md-ink-faint) 18%, transparent); gap: 14px; } .el-md-booking-grid { grid-template-columns: 1fr 1fr; } } /* ---------------------------------------------------------------- archive */ .el-md-archive__head { margin-bottom: 18px; } .el-md-archive__title { margin: 0 0 8px; font-size: 25px; font-weight: 700; letter-spacing: -0.015em; } .el-md-archive__lead { margin: 0; color: var(--md-ink-soft); } .el-md-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; } .el-md-chips::-webkit-scrollbar { display: none; } .el-md-chip-link { flex: none; padding: 9px 16px; border-radius: 999px; background: var(--md-surface); box-shadow: var(--md-out-sm); color: var(--md-ink-soft); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } .el-md-chip-link.is-active { box-shadow: var(--md-in); color: var(--md-accent); } .el-md-filters { display: grid; gap: 12px; margin-bottom: 20px; } .el-md-grid-cards { display: grid; gap: 16px; } .el-md-card-link { padding: 0; overflow: hidden; } .el-md-card-link__media { display: block; line-height: 0; } .el-md-card-link__media img { width: 100%; height: 190px; object-fit: cover; } .el-md-card-link__body { padding: 16px 18px 20px; } .el-md-card-link__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--md-ink-faint); } .el-md-card-link__title { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.3; } .el-md-card-link__destination { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--md-accent); } .el-md-card-link__title a { color: inherit; text-decoration: none; } .el-md-card-link__excerpt { margin: 0 0 12px; font-size: 14px; color: var(--md-ink-soft); } .el-md-card-link__price { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 12px; color: var(--md-ink-faint); } .el-md-card-link__price strong { font-size: 19px; font-weight: 800; color: var(--md-accent); } .el-md-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 26px; flex-wrap: wrap; } .el-md-pagination .page-numbers { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; background: var(--md-surface); box-shadow: var(--md-out-sm); color: var(--md-ink-soft); text-decoration: none; font-weight: 600; } .el-md-pagination .page-numbers.current { box-shadow: var(--md-in); color: var(--md-accent); } .el-md-empty-state { padding: 40px 20px; text-align: center; color: var(--md-ink-faint); border-radius: var(--md-radius); box-shadow: var(--md-in); } /* ------------------------------------------------------------ breakpoints */ @media (min-width: 600px) { .el-md { padding: 24px 0 64px; } .el-md-hero__title { font-size: 32px; } .el-md-hero__destination { font-size: 26px; } .el-md-controls { grid-template-columns: minmax(0, 1fr) auto; } .el-md-controls:not(:has(.el-md-control--carousel-nav)) { grid-template-columns: minmax(0, 1fr); } .el-md-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; } .el-md-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .el-md { /* Full-bleed wash; column width lives on .el-md-package (OD pattern). */ padding: 36px 0 80px; max-width: none; margin: 0; } .el-md-layout:has(.el-md-side) { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .el-md-side { position: sticky; top: 24px; } .el-md-hero__title { font-size: 38px; } .el-md-hero__destination { font-size: 28px; } .el-md-grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Centred dialog — same idea as One Day price modal. */ .el-md-sheet { align-items: center; padding: 20px 24px; } .el-md-sheet__panel { width: min(560px, calc(100% - 48px)); max-height: min(82vh, 860px); border-radius: 24px; box-shadow: 0 24px 60px rgba(30, 36, 48, 0.28); } .el-md-sheet--with-hotel .el-md-sheet__panel { width: min(640px, calc(100% - 48px)); } /* Same stacked full-width Include / Exclude / Add-Ons / Catatan as tanpa hotel. */ .el-md-sheet--with-hotel .el-md-pkg-details { grid-template-columns: minmax(0, 1fr); } .el-md-sheet--with-hotel .el-md-detail-block--addon, .el-md-sheet--with-hotel .el-md-detail-block--notes { grid-column: auto; } } /* Tablet: centered modal with equal gutters (OD price modal pattern). */ @media (min-width: 768px) and (max-width: 899px) { .el-md-sheet { align-items: center; justify-content: center; padding: 20px 16px; } .el-md-sheet__panel { width: min(560px, 100%); max-height: min(84vh, 800px); border-radius: 22px; box-shadow: 0 24px 60px rgba(30, 36, 48, 0.28); } .el-md-sheet--with-hotel .el-md-sheet__panel { width: min(640px, 100%); } } /* * Mobile pricing / options — widen usable content like OD concept * (narrower page + card padding; carousel peek still works). */ @media (max-width: 767px) { .el-md { /* Vertical only — horizontal gutters from .el-md-package (OD calc). */ padding: 14px 0 52px; } /* * Widen the main column only: +5px left, +8px right vs the package gutters. * Asymmetric on purpose (user request) — desktop/tablet unchanged. */ .el-md-main { margin-left: -5px; margin-right: -8px; width: calc(100% + 13px); max-width: none; } .el-md-surface { padding: 14px 10px 16px; } #el-md-pricing.el-md-surface, [data-el-md-pricing-root].el-md-surface { padding: 14px 8px 16px; } .el-md-pricing__head { padding-left: 4px; padding-right: 4px; align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 12px; } .el-md-pricing__head .el-md-section__title { flex: 1 1 auto; min-width: 0; font-size: 21px; /* +3px vs base 18px */ } #el-md-pricing > .el-md-controls, [data-el-md-pricing-root] > .el-md-controls { padding-left: 4px; padding-right: 4px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .el-md-options { gap: 14px; /* Keep ~12px inline inset so first/last card --md-out shadows aren't clipped. */ scroll-padding-inline: 12px; padding: 12px 12px 16px; } .el-md-option { /* OD itinerary cards use ~90% so the next card peeks. */ flex: 0 0 90%; max-width: none; } /* Sheets: centered floating modal like OD #el-od-price-modal (not bottom sheet). */ .el-md-sheet { align-items: center; justify-content: center; padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); padding-left: max(14px, env(safe-area-inset-left, 0px)); } .el-md-sheet__panel { width: 100%; max-width: 100%; margin-inline: auto; max-height: min(82vh, 700px); border-radius: 22px; box-shadow: 0 24px 60px rgba(30, 36, 48, 0.28); } .el-md-sheet__head { padding: 16px 16px 12px; } .el-md-sheet__body { padding: 4px 16px 20px; } .el-md-sheet--booking .el-md-sheet__head { padding: 18px 16px 10px; } /* 92vh + overlay gutters overflows the viewport and clips the rounded panel (and the submit button sitting on its bottom edge). */ .el-md-sheet--booking .el-md-sheet__panel { max-height: calc( 100vh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px)) ); max-height: calc( 100dvh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px)) ); } .el-md-sheet--booking .el-md-sheet__body { padding: 10px 16px 40px; scroll-padding-bottom: 32px; } .el-md-sheet--booking.is-success .el-md-sheet__head { padding: 14px 14px 6px; } .el-md-sheet--booking.is-success .el-md-sheet__head h2 { font-size: 15.5px; line-height: 1.3; } .el-md-sheet--booking.is-success .el-md-sheet__body { padding: 2px 14px 22px; overflow-x: hidden; } .el-md-booking-success { padding: 10px 0 6px; gap: 8px; } .el-md-booking-success__mark { width: 48px; height: 48px; margin-bottom: 0; } .el-md-booking-success__mark svg { width: 22px; height: 22px; } .el-md-booking-success__title { font-size: 1.18rem; max-width: 16em; } .el-md-booking-success__id, .el-md-booking-success__state { font-size: 13px; } .el-md-booking-success__actions { width: 100%; max-width: 100%; margin-top: 8px; gap: 8px; } .el-md-booking-success__portal, .el-md-booking-success__wa { min-height: 46px; border-radius: 12px; font-size: 13.5px; } .el-md-sheet--include .el-md-sheet__head { padding-bottom: 8px; } .el-md-sheet--include .el-md-sheet__head h2 { font-size: 16.5px; line-height: 1.3; } .el-md-sheet--include .el-md-sheet__body { gap: 14px; } .el-md-sheet--include .el-md-detail-block { padding: 14px 14px 12px; } } /* ------------------------------------------------------------------ */ /* Reusable product card — Related now; Home / Featured later. */ /* Visual only. Data still comes from the owning product plugin. */ /* ------------------------------------------------------------------ */ .el-md-product-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--md-surface, #e2f1f5); border-radius: var(--md-radius); box-shadow: var(--md-out); } .el-md-product-card__media { display: block; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--md-bg, #e2f1f5) 86%, #9bb4bb); overflow: hidden; line-height: 0; } .el-md-product-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .el-md-product-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 6px; min-height: 0; padding: 16px 16px 18px; } .el-md-product-card__title { margin: 0; flex: 0 0 auto; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--md-ink); } .el-md-product-card__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: inherit; text-decoration: none !important; border-bottom: 0 !important; } .el-md-product-card__title a:hover, .el-md-product-card__title a:focus-visible, .el-md-product-card__title a:visited, .el-md-product-card__title a:active { text-decoration: none !important; border-bottom: 0 !important; } .el-md-product-card__title a:hover, .el-md-product-card__title a:focus-visible { color: var(--md-accent); } .el-md-product-card__meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: -2px 0 0; min-width: 0; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--md-ink-faint); } .el-md-product-card__meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .el-md-product-card__dot { flex: none; color: var(--md-ink-faint); } .el-md-product-card__type { flex: none; color: var(--md-accent); font-weight: 700; } .el-md-product-card__price { margin: 2px 0 0; padding: 0; line-height: 1.1; } .el-md-product-card__price-label { display: block; margin: 0; line-height: 1.15; font-size: 12px; font-weight: 600; color: var(--md-ink-faint); } .el-md-product-card__price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; line-height: 1.1; } .el-md-product-card__price-row strong { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--md-accent); } .el-md-product-card__price-row span { font-size: 12px; font-weight: 600; color: var(--md-ink-faint); } .el-md-product-card__cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 6px 0 0; } .el-md-product-card__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 calc(50% - 4px); min-width: 0; min-height: 42px; padding: 0 12px !important; text-decoration: none; font-size: 13px; border-radius: 999px; } .el-md-product-card__media:focus-visible, .el-md-product-card__title a:focus-visible, .el-md-product-card__btn:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; } .el-md-sheet--itinerary .el-md-sheet__panel { width: min(640px, 100%); } .el-md-itinerary-sheet__cta { margin: 8px 0 0; } .el-md-itinerary-sheet__cta .el-md-btn { width: 100%; text-decoration: none; } /* Related section — no outer surface box; cards keep neumorphism. */ .el-md-related { width: min(1120px, calc(100% - 32px)); margin: 22px auto 28px; padding: 8px 0 4px; background: transparent; box-shadow: none; border-radius: 0; } .el-md-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 18px; } .el-md-related__intro { min-width: 0; flex: 1 1 auto; } .el-md-related__nav { flex: none; min-height: 42px; } .el-md-related.is-no-slide .el-md-related__nav { display: none; } .el-md-related__title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--md-ink); } .el-md-related__sub { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--md-ink-soft); } /* Reusable CSS-only slider. No library. Width by data-count. */ .el-md-product-slider { --el-md-slider-gap: 16px; /* Room for --md-out (offset + blur) so first/last card shadows are not clipped. */ --el-md-slider-gutter: 20px; display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--el-md-slider-gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--el-md-slider-gutter); padding: var(--el-md-slider-gutter); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } .el-md-product-slider::-webkit-scrollbar { display: none; height: 0; width: 0; } .el-md-related__progress { margin: 4px var(--el-md-slider-gutter, 20px) 8px; } .el-md-related__progress .el-md-carousel__bar { left: 0; transition: none; will-change: transform; } .el-md-product-slider.el-md-related__list { scroll-snap-type: none; scroll-behavior: auto; } .el-md-product-slider.el-md-related__list.is-dragging { scroll-snap-type: none; scroll-behavior: auto; pointer-events: none; } .el-md-product-slider .el-md-product-card { flex: 0 0 70%; align-self: stretch; min-width: 0; height: auto; scroll-snap-align: start; } .el-md-product-slider[data-count="1"] { overflow-x: hidden; scroll-snap-type: none; } .el-md-product-slider[data-count="1"] .el-md-product-card { flex-basis: 100%; } @media (max-width: 900px) { .el-md-related { width: min(100%, calc(100% - 24px)); } } @media (max-width: 640px) { .el-md-related { width: min(100%, calc(100% - 2px)); margin-top: 18px; padding: 4px 0 2px; } .el-md-related__head { align-items: center; gap: 12px; } .el-md-related__title { font-size: 20px; } .el-md-product-card__title { font-size: 17px; } .el-md-product-card__btn { min-height: 44px; } } /* Tablet + desktop: 50% for 1–2 cards, 35% slider when more than 2. */ @media (min-width: 640px) { .el-md-product-slider .el-md-product-card { flex-basis: 35%; } .el-md-product-slider[data-count="1"] .el-md-product-card, .el-md-product-slider[data-count="2"] .el-md-product-card { flex-basis: calc((100% - var(--el-md-slider-gap)) / 2); } .el-md-product-slider[data-count="1"], .el-md-product-slider[data-count="2"] { overflow-x: hidden; scroll-snap-type: none; } } @media (min-width: 900px) { .el-md-related { width: min(1120px, calc(100% - 32px)); padding: 10px 0 6px; } .el-md-related__title { font-size: 26px; } .el-md-product-card__title { font-size: 19px; } .el-md-product-card__price-row strong { font-size: 22px; } } /* ------------------------------------------------------------------ */ /* Dynamic Listing — Multi-Day card (Foto -> Judul -> Catatan -> Tabs) */ /* Class `el-md` is also on the article so neumorphic tokens */ /* (--md-out / --md-in / --md-surface) resolve even when this card is */ /* rendered on a plain WP Page (Dynamic Listing) instead of a singular */ /* Multi-Day view. Without those tokens, box-shadow: var(--md-out) is */ /* invalid and the UI looks flat against a white theme background. */ /* ------------------------------------------------------------------ */ .el-md-listing-card { width: 100%; /* Tokens also declared here so nested pricing-widget (lazy AJAX) and any sheet-adjacent UI keep neumorphism if a selector races the parent `.el-md` class. Same values as the shared `.el-md` block. */ --md-bg: #e2f1f5; --md-surface: #e2f1f5; --md-ink: #1e2430; --md-ink-soft: #4a5563; --md-ink-faint: #667084; --md-accent: #1f7a63; --md-accent-soft: #dceee8; --md-light: rgba(255, 255, 255, 0.9); --md-dark: rgba(126, 157, 166, 0.42); --md-out: -6px -6px 14px var(--md-light), 6px 6px 16px var(--md-dark); --md-out-sm: -3px -3px 7px var(--md-light), 3px 3px 8px var(--md-dark); --md-out-lg: -10px -10px 24px var(--md-light), 12px 12px 30px var(--md-dark); --md-in: inset -3px -3px 7px var(--md-light), inset 3px 3px 8px var(--md-dark); --md-in-deep: inset -5px -5px 12px var(--md-light), inset 5px 5px 14px var(--md-dark); --md-radius: 18px; --md-radius-sm: 12px; --md-radius-lg: 26px; background: var(--md-surface); box-shadow: var(--md-out-lg); border-radius: var(--md-radius-lg); } /* * Listing cards reuse `.el-md` for neumorphic tokens, but must NOT inherit * the single-package page shell padding (36px / 80px) or min-height. */ .el-md.el-md-listing-card { padding: 0; min-height: 0; } /* Production Hestia blocks plugin subfolders (403). listing.css may not * load; keep package-to-package spacing here in the root stylesheet. */ .el-dl-list > .el-dl-row { margin-top: 0 !important; margin-bottom: 32px !important; } .el-dl-list > .el-dl-row:last-child { margin-bottom: 0 !important; } @media (min-width: 640px) { .el-dl-list > .el-dl-row { margin-bottom: 40px !important; } .el-dl-list > .el-dl-row:last-child { margin-bottom: 0 !important; } } @media (min-width: 960px) { .el-dl-list > .el-dl-row { margin-bottom: 48px !important; } .el-dl-list > .el-dl-row:last-child { margin-bottom: 0 !important; } } .el-md-listing-card__media { position: relative; aspect-ratio: 16 / 10; margin: 8px 8px 0; border-radius: var(--md-radius); overflow: hidden; box-shadow: var(--md-in); } .el-md-listing-card__media-hit { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; appearance: none; -webkit-appearance: none; line-height: 0; } .el-md-listing-card__media-hit:focus-visible { outline: 2px solid color-mix(in srgb, var(--md-accent, #fe6000) 70%, #fff); outline-offset: -2px; } .el-md-listing-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; pointer-events: none; } .el-md-listing-card__media-nav { position: absolute; top: 50%; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #fe6000; box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.45), 3px 3px 8px rgba(180, 70, 0, 0.35); color: #fff; cursor: pointer; appearance: none; -webkit-appearance: none; transform: translateY(-50%); transition: background 0.15s ease; } .el-md-listing-card__media-nav:hover, .el-md-listing-card__media-nav:focus-visible { background: color-mix(in srgb, #fe6000 88%, #000); outline: none; } .el-md-listing-card__media-nav svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .el-md-listing-card__media-nav--prev { left: 10px; } .el-md-listing-card__media-nav--next { right: 10px; } .el-md-listing-card__media-count { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 4px 9px; border-radius: 999px; background: rgba(20, 26, 36, 0.62); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; pointer-events: none; } @media (max-width: 767px) { .el-md-listing-card__media-nav { width: 38px; height: 38px; } .el-md-listing-card__media-nav svg { width: 18px; height: 18px; stroke-width: 3.4; } .el-md-listing-card__media-nav--prev { left: 8px; } .el-md-listing-card__media-nav--next { right: 8px; } } .el-md-listing-card__body { --el-md-listing-body-inline: 18px; --el-md-itinerary-gutter: 15px; --el-md-itinerary-gutter-left: 0px; --el-md-itinerary-gutter-right: var(--el-md-itinerary-gutter); padding: 14px var(--el-md-listing-body-inline) 10px; /* Reset theme `.entry-content { text-align: center }` inherit — title * stays centered via `.el-md-listing-card__head` below. */ text-align: left; } .el-md-listing-card__head { margin: 0 0 6px; text-align: center; } .el-md-listing-card__badges { margin: 0 0 6px; display: flex; justify-content: center; } /* Beat block-theme `.entry-content p` / `h3` margins on production. */ .entry-content .el-md-listing-card__head .el-md-listing-card__badges, .el-md-listing-card__head .el-md-listing-card__badges { margin-block: 0 6px; margin-inline: 0; } .el-md-listing-card__badge { text-transform: uppercase; } .el-md-listing-card__title { display: flex; justify-content: center; margin: 0 0 4px; text-align: center; font-size: 28px; line-height: 1.15; font-weight: 900; } .entry-content .el-md-listing-card__head .el-md-listing-card__title, .el-md-listing-card__head .el-md-listing-card__title, .el-md-listing-card__head h3.el-md-listing-card__title { margin-block-start: 0; margin-block-end: 4px; margin-inline: 0; } .el-md-listing-card__title a { display: inline-block; max-width: 100%; padding: 0; border: 0 !important; border-bottom: 0 !important; border-radius: 0; background: transparent; box-shadow: none; color: var(--md-ink); /* Beat theme `.entry-content a { text-decoration: underline }` on production. */ text-decoration: none !important; text-decoration-line: none !important; text-underline-offset: unset; -webkit-text-decoration-line: none !important; font-weight: 900; font-synthesis: weight; letter-spacing: -0.02em; /* Soft extruded type — neumorphic text, not a raised plate */ -webkit-text-stroke: 0.55px var(--md-ink); paint-order: stroke fill; text-shadow: 0.35px 0 0 var(--md-ink), -0.35px 0 0 var(--md-ink), 0 0.35px 0 var(--md-ink), 0 -0.35px 0 var(--md-ink), -2px -2px 3px var(--md-light), 2px 3px 6px var(--md-dark); transition: color 0.15s ease, text-shadow 0.15s ease, -webkit-text-stroke-color 0.15s ease; } .el-md-listing-card__title a:hover, .el-md-listing-card__title a:focus-visible, .el-md-listing-card__title a:visited, .el-md-listing-card__title a:active { text-decoration: none !important; text-decoration-line: none !important; border-bottom: 0 !important; } .el-md-listing-card__title a:hover, .el-md-listing-card__title a:focus-visible { color: var(--md-accent); -webkit-text-stroke-color: var(--md-accent); text-shadow: 0.35px 0 0 var(--md-accent), -0.35px 0 0 var(--md-accent), 0 0.35px 0 var(--md-accent), 0 -0.35px 0 var(--md-accent), -2px -2px 3px var(--md-light), 2px 3px 6px var(--md-dark); } .el-md-listing-card__subtitle { display: block; width: auto; max-width: 100%; margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 15px; line-height: 1.2; font-weight: 900; font-synthesis: weight; letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-ink-soft); -webkit-text-stroke: 0.4px var(--md-ink-soft); paint-order: stroke fill; text-shadow: 0.3px 0 0 var(--md-ink-soft), -0.3px 0 0 var(--md-ink-soft), 0 0.3px 0 var(--md-ink-soft), 0 -0.3px 0 var(--md-ink-soft), -1.5px -1.5px 2.5px var(--md-light), 1.5px 2px 4px var(--md-dark); } .el-md-listing-card__divider { margin: 8px 0; border: 0; height: 2px; background: transparent; box-shadow: var(--md-in); border-radius: 999px; opacity: 0.85; } @media (max-width: 639px) { /* Tighten subtitle → divider gap; beat production theme `p` margins. */ .entry-content .el-md-listing-card__head .el-md-listing-card__subtitle, .el-md-listing-card__head .el-md-listing-card__subtitle { margin-block: 0; margin-inline: 0; } .el-md-listing-card__head { margin-bottom: 0; } .el-md-listing-card__divider { margin-top: -1px; } } @media (min-width: 640px) { /* Tighten subtitle → divider gap on tablet/desktop. */ .entry-content .el-md-listing-card__head .el-md-listing-card__subtitle, .el-md-listing-card__head .el-md-listing-card__subtitle { margin-block: 0; margin-inline: 0; } .el-md-listing-card__head { margin-bottom: 0; } .el-md-listing-card__divider { margin-top: -1px; } } .el-md-listing-card__callout { margin-bottom: 10px; text-align: left; } .el-md-listing-card__callout .el-md-callout__title, .el-md-listing-card__callout .el-md-callout__rich, .el-md-listing-card__callout .el-md-callout__list { text-align: left; } .el-md-listing-tabs { margin-top: 0; } /* * Listing tabs — inactive raised orange, active pressed green (matches * .el-md-day__badge / --md-accent). Active uses a lighter inset so the * selected state reads clearly without heavy neumorphic depth. */ .el-md-listing-tabs__nav { display: flex; gap: 8px; padding: 7px; margin-bottom: 10px; border-radius: var(--md-radius-sm); background: var(--md-surface); box-shadow: var(--md-in-deep); } .el-md-listing-tab { display: flex; align-items: center; justify-content: center; flex: 1; gap: 7px; min-height: 50px; border: 0; border-radius: 10px; /* Raised soft key — same brand orange as active, distinguished by outset (protruding) vs inset (pressed) shadow. Shadows are a touch stronger than soft-UI defaults because saturated orange hides weak dual-shadows; contrast must still read at a glance. */ background: #fe6000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), -5px -5px 12px rgba(255, 255, 255, 0.85), 5px 6px 14px rgba(140, 40, 0, 0.42); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; transform: translateY(0); transition: box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), filter 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .el-md-listing-tab__icon { width: 16px; height: 16px; flex: none; opacity: 0.95; transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .el-md-listing-tab.is-active .el-md-listing-tab__icon { opacity: 1; } /* Idle raised orange key — nudge slightly up so it still feels pressable. */ .el-md-listing-tab:not(.is-active):hover, .el-md-listing-tab:not(.is-active):focus-visible { color: #fff; background: color-mix(in srgb, #fe6000 88%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), -6px -6px 14px rgba(255, 255, 255, 0.9), 6px 7px 16px rgba(140, 40, 0, 0.48); transform: translateY(-1px); filter: none; } .el-md-listing-tab:not(.is-active):hover .el-md-listing-tab__icon, .el-md-listing-tab:not(.is-active):focus-visible .el-md-listing-tab__icon { opacity: 1; } /* Finger-down preview of the pressed state before the tab becomes active. */ .el-md-listing-tab:not(.is-active):active { color: #fff; background: color-mix(in srgb, #fe6000 86%, #000); box-shadow: inset 5px 5px 11px rgba(100, 25, 0, 0.5), inset -3px -3px 8px rgba(255, 190, 130, 0.35); transform: translateY(2px); filter: none; } /* Selected = pressed green key (same hue as HARI badge), subtle inset. */ .el-md-listing-tab.is-active { background: var(--md-accent, #1f7a63); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 2px 5px rgba(8, 48, 38, 0.28); transform: translateY(1px); } .el-md-listing-tab:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; } .el-md-listing-panel[hidden] { display: none; } .el-md-listing-empty { margin: 0; font-size: 13px; color: var(--md-ink-faint); } .el-md-listing-price { margin: 0 0 14px; line-height: 1.15; } .el-md-listing-price__label { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--md-ink-faint); } .el-md-listing-price strong { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--md-accent); } .el-md-listing-price span:last-child { font-size: 12px; font-weight: 600; color: var(--md-ink-faint); } /* Lazy-loaded Harga tab — visible status text while the widget fetches. */ .el-md-pricing-mount { width: 100%; } .el-md-pricing-mount__loading { margin: 12px 0 0; font-size: 13px; font-weight: 600; text-align: center; color: var(--md-ink-faint); } .el-md-pricing-mount.is-pricing-pending .el-md-pricing-mount__loading, .el-md-pricing-mount[data-pricing-loaded='loading'] .el-md-pricing-mount__loading { opacity: 1; } .el-md-pricing-mount.is-pricing-error .el-md-pricing-mount__loading { color: #b42318; } .el-md-pricing-mount [data-el-md-pricing-root].is-widget-enter { animation: el-md-settle-in 0.35s ease; } @media (prefers-reduced-motion: reduce) { .el-md-pricing-mount [data-el-md-pricing-root].is-widget-enter { animation: none; } } .el-md-listing-card [data-el-md-pricing-root], .el-md-listing-card [data-el-md-pricing-root].el-md-surface { width: 100%; max-width: none; margin: 0; padding: 4px 0 8px; border-radius: 0; background: transparent; box-shadow: none; } .el-md-listing-card [data-el-md-carousel] { max-width: 100%; } .el-md-listing-card [data-el-md-options] { gap: 14px; } /* * Listing price rows — tighten pax ↔ amount spread. Rows use * space-between, so wider production cards push the columns apart; * +5px inline padding per side and gap:0 pulls them ~10px closer. */ .el-md-listing-card .el-md-price-grid__row { gap: 0; padding-inline: 17px; } /* * Listing itinerary — left gutter: mobile 0, tablet+desktop 2px; right 15px. */ .el-dl-list .el-md-listing-card .el-md-listing-panel[id^="itinerary-"], .el-md-listing-card .el-md-listing-panel[id^="itinerary-"], .el-dl-list .el-md-listing-card .el-md-listing-panel:has(.el-md-itinerary-preview), .el-md-listing-card .el-md-listing-panel:has(.el-md-itinerary-preview) { width: auto; max-width: none; margin-inline: calc(-1 * var(--el-md-listing-body-inline, 18px)); padding-left: var(--el-md-itinerary-gutter-left, 0px); padding-right: var(--el-md-itinerary-gutter-right, 15px); box-sizing: border-box; } .el-dl-list .el-md-listing-card .el-md-listing-panel .el-md-itinerary-preview, .el-md-listing-card .el-md-listing-panel .el-md-itinerary-preview, .el-dl-list .el-md-listing-card .el-md-listing-panel > .el-md-days, .el-md-listing-card .el-md-listing-panel > .el-md-days { width: 100%; max-width: 100%; margin-inline: 0; box-sizing: border-box; } /* * Mobile listing — price carousel only (itinerary rules above are global). */ @media (max-width: 639px) { .el-dl-list .el-md-listing-card [data-el-md-options], .el-md-listing-card [data-el-md-options] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 12px 2px 16px 10px !important; scroll-padding-inline: 25px 17px; box-sizing: border-box; } /* First price card: extra left inset so --md-out shadow is not clipped. */ .el-dl-list .el-md-listing-card [data-el-md-options] > .el-md-option:first-child, .el-md-listing-card [data-el-md-options] > .el-md-option:first-child { margin-left: 15px; scroll-margin-left: 15px; } /* Last price card: extra right inset so --md-out shadow is not clipped. */ .el-dl-list .el-md-listing-card [data-el-md-options] > .el-md-option:last-child, .el-md-listing-card [data-el-md-options] > .el-md-option:last-child { margin-right: 15px; scroll-margin-right: 15px; } /* Listing price cards — narrower than single-page (90%) so next card peeks more. */ .el-dl-list .el-md-listing-card [data-el-md-options] > .el-md-option, .el-md-listing-card [data-el-md-options] > .el-md-option { flex: 0 0 70%; max-width: 70%; } } @media (min-width: 480px) { .el-md-listing-card__title { font-size: 32px; } .el-md-listing-card__subtitle { font-size: 20px; } } @media (min-width: 640px) { .el-md-listing-card__body { --el-md-listing-body-inline: 22px; --el-md-itinerary-gutter-left: 2px; padding: 16px var(--el-md-listing-body-inline) 10px; } .el-md-listing-card__media { margin: 8px 8px 0; } .el-md-listing-card__subtitle { font-size: 22px; } .el-md-listing-tab { font-size: 15px; } .el-md-listing-card [data-el-md-pricing-root], .el-md-listing-card [data-el-md-pricing-root].el-md-surface { padding: 6px 0 10px; } } @media (min-width: 960px) { .el-md-listing-card__subtitle { font-size: 24px; } }