/* Sunrise Hotels app (web preview by Webixio): UI polish pass, 10 Nov 2026. Loaded after styles.css.
   Calm inset lists instead of icon tile grids, a real-looking Sunrise Club card drawn in CSS (crisp at any size),
   Wallet buttons in Apple's and Google's own shape, a soft scroll edge under the floating tab bar. */
:root {
  /* the four Sunrise Club cards (SAMPLE: the club and the designs are a Webixio proposal), in the group's own colours */
  --lc-aqua: linear-gradient(122deg, #02494d 0%, #04757b 30%, #53aba9 52%, #04757b 72%, #023f43 100%);
  --lc-silver: linear-gradient(122deg, #6f7a82 0%, #b4bec5 28%, #f1f4f6 50%, #aab4bb 72%, #5f6a72 100%);
  --lc-gold: linear-gradient(122deg, #6e6243 0%, #a99b74 28%, #e6dcbc 50%, #a39468 72%, #5f5437 100%);
  --lc-platinum: linear-gradient(122deg, #10262e 0%, #2a5360 32%, #5d8793 52%, #2a5360 72%, #0d2027 100%);
}

/* ---------- scroll edge: content fades out under the floating tab bar instead of peeking through it ---------- */
.phone.has-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 112px; z-index: 25; pointer-events: none;
  background: linear-gradient(rgba(242, 242, 247, 0), rgba(242, 242, 247, .84) 56%, rgba(242, 242, 247, .97)); }
.tabs { --glass-fill: rgba(250, 250, 252, .74); }
.has-tabs .screen::after { height: 108px; }

/* ---------- inset lists: a plain glyph or a photo, a label, a value, a chevron ---------- */
.list .li { width: 28px; height: 28px; display: grid; place-items: center; flex: none; color: var(--accent); }
.list .li svg { width: 23px; height: 23px; }
.list > :has(> .li) + *::before { left: 58px; }
.list .val { flex: none; max-width: 56%; color: var(--label-2); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list .th { width: 54px; height: 54px; border-radius: 15px; background: #d8d8dc center / cover; flex: none; }
.list.plan > * { padding: 9px 14px 9px 9px; min-height: 72px; }
.list.plan > * + *::before { left: 77px; }
.list.plan .grow > b { display: block; font-weight: 600; }
.list.plan .grow > span { font-size: 15px; color: var(--label-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list.pick > * { min-height: 56px; }
.list.pick b { font-weight: 500; }

/* ---------- home ---------- */
.quick4 button, .quick4 a { display: grid; justify-items: center; gap: 7px; font: 500 13px/1.2 var(--font); color: var(--label); text-align: center; }
/* book direct: the photo carries the card, the words sit on dark glass so they read on any photo */
.direct { min-height: 224px; padding: 10px; align-items: stretch; background-position: center 38%; }
.direct::before { background: linear-gradient(rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .26)); }
.dpanel { display: flex; align-items: center; gap: 12px; padding: 14px 14px 15px 18px; border-radius: 22px; }
.dpanel.glass.dark { --glass-fill: rgba(18, 18, 20, .56); }
.dpanel .k { display: block; font-size: 12px; color: rgba(255, 255, 255, .8); }
.direct .dpanel b { display: block; max-width: none; margin-top: 4px; font: 600 19px/1.22 var(--font-display); letter-spacing: -.01em; text-shadow: none; }
.darrow { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1c1c1c; display: grid; place-items: center; flex: none; }
.darrow svg { width: 16px; height: 16px; }
.vplate span { overflow: visible; text-overflow: clip; }
.ocard { grid-template-rows: auto auto 1fr; }
.ocard .ok { font: 600 12px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); padding: 14px 18px 0; }
.ocard b { padding-top: 6px; }
.ocard > span:last-child { -webkit-line-clamp: 3; }
.sisters button { position: relative; display: block; height: 148px; border-radius: 24px; overflow: hidden; background: #cfcfd4 center / cover; color: #fff; box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .55); }
.sisters button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, .62)); }
.sisters button b { position: absolute; z-index: 1; left: 14px; right: 12px; bottom: 12px; padding: 0; font: 600 17px/1.2 var(--font); text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.club-mini { gap: 16px; padding: 14px 16px 14px 14px; }
.club-mini .lcard { width: 112px; flex: none; }
.club-mini b { margin: 3px 0 8px; }

/* ---------- small things ---------- */
.pr.past { opacity: .42; }
.pr .now { display: inline-block; margin-left: 8px; font: 600 11px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px; border-radius: 99px; background: var(--accent-tint); color: var(--accent-text); vertical-align: 2px; }
.festive-link { display: flex; align-items: center; gap: 12px; padding: 16px; }
.festive-link .grow b { display: block; }
.festive-link .grow span { font-size: 15px; color: var(--label-2); }
.sum .sb { align-content: center; }
.facts .row { align-items: flex-start; font-size: 16px; line-height: 1.35; }
.facts .row svg { margin-top: 1px; }
.facts .row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lines .row > span:last-child:not(.grow), .lines .row > b:last-child { text-align: right; }

/* ---------- Loyalty Club card, drawn in CSS: sizes follow the card's own width ---------- */
.lcard { container-type: inline-size; width: 100%; }
.lc { position: relative; isolation: isolate; aspect-ratio: 1.586; border-radius: 4.4cqw; overflow: hidden; padding: 6.2cqw 6.4cqw 5.8cqw; display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; background: var(--lc-aqua);
  box-shadow: 0 7cqw 11cqw -7cqw rgba(0, 0, 0, .6), 0 .5cqw 1.6cqw rgba(0, 0, 0, .12), inset 0 0 0 .28cqw rgba(255, 255, 255, .16), inset 0 .3cqw 0 rgba(255, 255, 255, .42); }
/* the waves of their mark, engraved across the card */
.lc::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 252" fill="none" stroke="white" stroke-width=".8"><path d="M-10 128C60 92 120 164 200 128S340 92 410 128"/><path d="M-10 142C60 106 120 178 200 142S340 106 410 142"/><path d="M-10 156C60 120 120 192 200 156S340 120 410 156"/><path d="M-10 170C60 134 120 206 200 170S340 134 410 170"/><path d="M-10 184C60 148 120 220 200 184S340 148 410 184"/><path d="M-10 198C60 162 120 234 200 198S340 162 410 198"/><path d="M-10 212C60 176 120 248 200 212S340 176 410 212"/></svg>') center / cover no-repeat; }
/* light falling across the metal */
.lc::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .12) 74%, rgba(255, 255, 255, 0) 90%); }
.lc > * { position: relative; z-index: 1; }
.lc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 4cqw; }
.lc-logo { height: 8.2cqw; width: auto; margin-top: .6cqw; display: block; filter: drop-shadow(0 .3cqw .8cqw rgba(0, 0, 0, .25)); }
.lc-tier { font: 700 3.7cqw/1 var(--font); letter-spacing: .24em; text-transform: uppercase; margin-top: .4cqw; white-space: nowrap; text-align: right; }
.lc-tier small { display: block; font: 600 2.5cqw/1 var(--font); letter-spacing: .22em; opacity: .82; margin-bottom: 1.5cqw; }
.lc-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; }
.lc-who { display: grid; gap: 1.3cqw; min-width: 0; }
.lc-who b { font: 600 4.9cqw/1.15 var(--font); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-who small { font: 500 3.5cqw/1 var(--mono); letter-spacing: .16em; opacity: .86; white-space: nowrap; }
.lc-pts { text-align: right; display: grid; gap: 1.4cqw; flex: none; }
.lc-pts b { font: 700 7.6cqw/1 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lc-pts small { font: 600 2.9cqw/1 var(--font); letter-spacing: .2em; text-transform: uppercase; opacity: .84; }
.lc.t-silver { background: var(--lc-silver); color: #1d2a31; }
.lc.t-gold { background: var(--lc-gold); color: #2a2412; }
.lc.t-platinum { background: var(--lc-platinum); }
.lc.t-silver .lc-logo, .lc.t-gold .lc-logo { filter: brightness(0); opacity: .78; }
.lc.t-silver::before, .lc.t-gold::before { filter: invert(1); opacity: .16; }
.lc.t-silver::after, .lc.t-gold::after { background: linear-gradient(112deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .28) 76%, rgba(255, 255, 255, 0) 92%); }
.lcard.mini .lc { padding: 0; align-items: center; justify-content: center; box-shadow: 0 8cqw 14cqw -8cqw rgba(0, 0, 0, .55), inset 0 0 0 .5cqw rgba(255, 255, 255, .16); }
.lcard.mini .lc-top { justify-content: center; }
.lcard.mini .lc-logo { height: 12.5cqw; margin: 0; }
.lcard.mini .lc-tier, .lcard.mini .lc-bot { display: none; }

/* ---------- Wallet buttons: black, two lines, as Apple and Google draw them ---------- */
.walbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wbtn { height: 52px; border-radius: 14px; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 8px; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .65); }
.wbtn svg { width: 30px; height: 30px; flex: none; }
.wbtn > span { display: grid; gap: 3px; text-align: left; }
.wbtn small { font: 500 11px/1 var(--font); opacity: .88; white-space: nowrap; }
.wbtn b { font: 600 15px/1 var(--font); letter-spacing: -.01em; white-space: nowrap; }
.wbtn.google { background: #000; color: #fff; }
.wbtn.google svg { width: 24px; height: 24px; box-sizing: content-box; padding: 3px; background: #fff; border-radius: 50%; }
.wbtn.done { background: #fff; color: var(--label); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), var(--shadow-card); font-weight: 400; }
.wbtn.done svg, .wbtn.google.done svg { width: 22px; height: 22px; padding: 0; background: none; color: var(--good); }
.wbtn.done small { color: var(--label-2); opacity: 1; }
.ap-strip, .gp-strip { background-position: center 46%; }
.ap-strip { height: 132px; }
.gp-strip { height: 104px; }

/* the preview bar stays on one line in both languages */
.pnote { white-space: nowrap; overflow: hidden; font-size: clamp(9.5px, 2.75vw, 11px); }

/* the other Sunrise hotels: the same photo cards as the restaurants, a little wider */
.hcard { width: 232px; height: 216px; }
.hcard .vplate span { white-space: nowrap; }

/* Wallet pass: the wide wordmark sits small in the header; labels are readable on the teal pass */
.ap-h img { height: 22px; }
.apass small { color: rgba(255, 255, 255, .72); }

/* "3 stays · since 2025" on the card, as in the film */
.lc-who em { font: 500 3.3cqw/1 var(--font); font-style: normal; opacity: .82; white-space: nowrap; }