/* How-to guide for the booking app: /how-to-book/ and /en/how-to-book/ (tools/theme-v22/howto.py). Loaded only on those pages. */
.ht-main{max-width:1120px;width:calc(100% - 48px);margin:0 auto;padding:128px 0 48px;color:#e2ece7}
.ht-main *{box-sizing:border-box}
.ht-main a{color:#e5d09f;text-underline-offset:4px}
.ht-main a:focus-visible,.ht-main summary:focus-visible{outline:2px solid #f0cd8d;outline-offset:3px;border-radius:6px}
.ht-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;line-height:1.7;color:#a8bdb4}
.ht-crumb a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.ht-crumb a:hover{text-decoration:underline}
.ht-crumb .ht-lang{margin-left:auto;border:1px solid #e6cd915c;border-radius:999px;padding:2px 14px;background:#e0bf8512}
.ht-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:end;margin:14px 0 18px}
.ht-kicker{font-size:11px;letter-spacing:.14em;color:#ddc38f}
.ht-hero h1{font-size:clamp(26px,3.3vw,40px);font-weight:500;line-height:1.45;margin:8px 0 12px;color:#f1ede2}
.ht-lead{font-size:15px;line-height:1.85;color:#c9d6d0;margin:0 0 14px;max-width:62ch}
.ht-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ht-facts li{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1.4;color:#e8eeeb;border:1px solid #d8c49340;background:#d0e9e80d;border-radius:999px;padding:6px 12px}
.ht-facts svg{width:15px;height:15px;color:#f0c985;flex-shrink:0}
.ht-hero-cta .book-online{width:100%;justify-content:center;min-height:56px}
.ht-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px}
.ht-qbox{border:1px solid #d8c4934d;border-radius:16px;padding:14px 18px 12px;background:linear-gradient(160deg,#17292d,#0e1b1f)}
.ht-qbox h2{font-size:17px;font-weight:500;line-height:1.5;margin:0 0 6px;color:#f2d497}
.ht-qk{display:block;font-size:11px;letter-spacing:.12em;color:#a8bdb4;text-transform:uppercase;margin-bottom:2px}
.ht-qbox ol{margin:0;padding-left:22px}
.ht-qbox li{font-size:14px;line-height:1.55;color:#dfe7e3;padding:1px 0}
.ht-qbox li::marker{color:#f0c985;font-variant-numeric:tabular-nums}
.ht-qbox a{display:inline-flex;align-items:center;min-height:44px;color:#e8eeeb;text-decoration:underline;text-decoration-color:#f0c98566}
.ht-qbox a:hover{color:#ffe4b0}
.ht-qbox .ht-ui{font-size:13px}
.ht-sample{font-size:13px;line-height:1.75;color:#bfcdc7;border:1px dashed #d8c49355;border-radius:12px;padding:10px 14px;margin:0 0 24px}
.ht-toc{border:1px solid #d8c49333;background:#d0e9e808;border-radius:18px;padding:20px 22px;margin-bottom:12px;scroll-margin-top:112px}
.ht-toc>h2{font-size:20px;font-weight:500;line-height:1.5;margin:0 0 10px;color:#e7d09c}
.ht-toc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 36px}
.ht-toc-part h3{font-size:13px;font-weight:500;letter-spacing:.04em;color:#a8bdb4;margin:10px 0 2px}
.ht-toc-part ol{margin:0;padding-left:28px}
.ht-toc-part li{font-size:14px;line-height:1.6;color:#8fa59c}
.ht-toc-part li::marker{font-variant-numeric:tabular-nums}
.ht-toc-part a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.ht-toc-part a:hover{text-decoration:underline;color:#ffe4b0}
.ht-part-title{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#ddc38f;margin:52px 0 0;padding-top:18px;border-top:1px solid #d8c49333}
.ht-section{margin:26px 0 36px;scroll-margin-top:112px}
.ht-step{scroll-margin-top:112px}
.ht-section-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.ht-num{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(115deg,#f4d49d,#fff4d5 40%,#d8b67c);color:#152228;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.ht-section h2{font-size:clamp(20px,2.2vw,25px);font-weight:500;line-height:1.45;margin:2px 0 0;color:#f0e6cc}
.ht-who{font-size:13px;line-height:1.6;color:#a8bdb4;margin:2px 0 0}
.ht-soon{display:inline-block;vertical-align:middle;margin-left:10px;font-size:12px;font-weight:500;line-height:1.5;color:#152228;background:#f0c985;border-radius:999px;padding:1px 10px}
.ht-section h2>.ht-soon,.ht-toc .ht-soon{color:#152228}
.ht-steps{list-style:none;margin:6px 0 0;padding:0;counter-reset:ht}
.ht-step{counter-increment:ht;position:relative;padding:18px 0 22px 46px;border-bottom:1px solid #ffffff12}
.ht-step::before{content:counter(ht);position:absolute;left:6px;top:18px;width:28px;height:28px;border-radius:50%;border:1px solid #f0c985aa;color:#f0c985;font-size:14px;line-height:26px;text-align:center;font-variant-numeric:tabular-nums}
.ht-step-text{font-size:16px;line-height:1.8;color:#e8eeeb;margin:0;max-width:64ch}
.ht-ui.n{white-space:nowrap}
.ht-ui{font-weight:500;color:#ffe9bd;background:#f0c9851f;border:1px solid #f0c98557;border-radius:6px;padding:0 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ht-shots{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;margin-top:14px}
.ht-shot{flex:0 0 auto;width:min(100%,340px);margin:0;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #ffffff38;box-shadow:0 12px 32px #00000073;line-height:0}
.ht-shot a{display:block;cursor:zoom-in}
.ht-shot img{display:block;width:100%;height:auto}
.ht-note{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.75;color:#dfe7e3;background:#f0c98512;border:1px solid #f0c98533;border-left:3px solid #f0c985;border-radius:10px;padding:10px 14px;margin:14px 0 6px;max-width:820px}
.ht-note>span:first-child{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;margin-top:3px;border-radius:50%;background:#f0c985;color:#152228;font:600 12px/1 Georgia,serif}
.ht-note>.ht-note-t{flex:1 1 auto;min-width:0}
.ht-back{display:inline-flex;align-items:center;min-height:44px;font-size:13px;text-decoration:none;margin-top:4px}
.ht-back:hover{text-decoration:underline}
.ht-faq{margin-top:36px;scroll-margin-top:112px}
.ht-faq>h2{font-size:clamp(22px,2.6vw,30px);font-weight:500;line-height:1.45;color:#f0e6cc;margin:0 0 14px}
.ht-faq .faq-list{padding:6px 22px;border-radius:18px;border:1px solid #d8c49333;background:#d0e9e808}
.ht-faq details{border-bottom:1px solid #ffffff14;padding:4px 0}
.ht-faq details:last-child{border-bottom:0}
.ht-faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-size:15px;font-weight:500;line-height:1.6;color:#efe3c6}
.ht-faq summary::-webkit-details-marker{display:none}
.ht-faq summary::after{content:'+';font-size:20px;color:#cbb786;flex:0 0 auto}
.ht-faq details[open] summary::after{content:'−'}
.ht-faq .faq-answer{font-size:14.5px;line-height:1.8;color:#cfdbd6;padding:0 0 12px}
.ht-end{margin:40px auto 0;max-width:640px;text-align:center;border:1px solid #d8c49340;border-radius:20px;padding:26px 22px;background:linear-gradient(160deg,#16282c,#0b171b)}
.ht-end h2{font-size:24px;font-weight:500;line-height:1.45;margin:0 0 6px;color:#f2d497}
.ht-end p{font-size:14px;line-height:1.75;color:#c9d6d0;margin:0 0 16px}
.ht-end .book-online-cta{max-width:340px;margin:0 auto}
.ht-end .book-online{justify-content:center;min-height:54px}
.ht-end .book-chat-link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:14px}
@media(min-width:1101px){.howto-view .ktc-footer{padding-bottom:24px}.howto-view .bottom-navigation{display:none}}
/* Screens keep a fixed width from the first paint (no jump when a lazy picture arrives): one screen at the phone's own size
   (390 px), two side by side at 320 px. Desktop: the text, then its screens right beside it. */
@media(min-width:601px){
  .ht-shot,.ht-shot.ht-tall{width:320px}
  .ht-shot:only-child{width:390px}
}
@media(min-width:1100px){
  .ht-step{display:grid;grid-template-columns:minmax(0,520px) max-content;justify-content:start;column-gap:32px;align-items:start}
  .ht-step.ht-textonly{display:block}
  .ht-shots{margin-top:0;flex-wrap:nowrap}
}
@media(max-width:800px){.ht-hero{grid-template-columns:1fr;gap:16px;align-items:start}.ht-toc-grid{grid-template-columns:1fr}.ht-quick{grid-template-columns:1fr}}
@media(max-width:600px){
  .ht-main{width:calc(100% - 32px);padding-top:92px}
  .ht-crumb .ht-lang{margin-left:0}
  .ht-lead{font-size:14.5px}
  .ht-toc{padding:16px}
  .ht-part-title{margin-top:40px}
  .ht-section-head{gap:12px}
  .ht-num{width:38px;height:38px;font-size:14px}
  /* only the text is indented next to the step number, so the screens can use the full width */
  .ht-step{padding-left:0}
  .ht-step::before{left:0;width:26px;height:26px;line-height:24px;font-size:13px}
  .ht-step-text{font-size:15.5px;padding-left:38px}
  .ht-shot,.ht-shot.ht-tall{width:100%;border-radius:14px}
  .ht-faq .faq-list{padding:4px 14px}
  .ht-faq summary{font-size:14.5px}
}
.ht-main #faq.ht-faq{padding:0}
/* the Google Play badge at the top of the install section (app_badge.py, Sky 10 Oct 2026) */
.ht-app{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 16px;padding:14px 16px;border-radius:10px;background:rgba(240,201,133,.07);border:1px solid rgba(240,201,133,.2)}.ht-app p{margin:0;flex:1;min-width:200px;line-height:1.6}