/* Ikigai Traveler v2 — iOS components, IKIGAI paper-green brand */

/* ================= Photo backgrounds (real Phú Quốc imagery) ================= */
.photo-bg{background-position:center;background-size:cover;background-repeat:no-repeat;background-color:#1b2620}
.scene-sunset{background:#1b2620 url(../assets/photos/sunset.jpg) center/cover}
.scene-beach{background:#1b2620 url(../assets/photos/saobeach.jpg) center/cover}
.scene-sea{background:#1b2620 url(../assets/photos/boats.jpg) center/cover}
.scene-bottle{background:#1b2620 url(../assets/venues/v7a.png) center/cover}
.scene-barrels{background:#1b2620 url(../assets/venues/v8a.png) center/cover}
.scene-interior{background:#1b2620 url(../assets/venues/v7b.png) center/cover}
.scene-lens-shop{background:#1b2620 url(../assets/venues/v7a.png) center/cover}
/* camera live-feed layer (photo behind the viewfinder chrome) */
.cam-feed{position:absolute;inset:0;background-position:center;background-size:cover;background-color:#0c1512}
/* brand deep-green surface for emotional / hero moments */
.scene-brand{background:radial-gradient(120% 80% at 50% 12%, #0a4834 0%, #063d2c 46%, #04281d 100%);position:relative;overflow:hidden}
.scene-brand::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 50% 30%,rgba(168,192,48,.14),transparent 70%)}
/* decorative overlays must never intercept taps on the content/controls beneath them */
.scrim,.scrim-soft,.cam-feed,.splash-video,.splash-dim,[class*="scene-"]::after{pointer-events:none}

/* ================= Buttons (iOS, pill, brand) ================= */
.btn{border-radius:var(--r-btn);font-size:var(--body);font-weight:600;padding:14px 20px;
  transition:transform .1s var(--ease),opacity .15s,background .15s,filter .15s;line-height:1.1;text-align:center}
.btn:active{opacity:.82;transform:translateY(.5px)}
.btn.full{width:100%}
.btn-prominent{background:var(--green);color:var(--on-primary);box-shadow:0 8px 22px rgba(10,125,85,.24);min-height:50px}
.btn-prominent:active{background:var(--green-deep)}
.btn-tinted{background:var(--green-100);color:var(--green-deep);min-height:50px}
.btn-gray{background:var(--fill-2);color:var(--ink);min-height:50px}
.btn-on-dark{background:var(--paper);color:var(--green-deep);min-height:50px}
.btn-white{background:#fff;color:#0c1512;min-height:52px;font-weight:600}
.btn-white:active{background:#eef1ee}
.btn-plain{background:none;color:var(--tint);padding:10px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* dock: a screen with a .dock hides the tab bar (see router), so it anchors to the very bottom */
.dock{position:relative;z-index:4;flex:none;padding:12px 16px calc(var(--sab) + 14px);
  background:linear-gradient(180deg,rgba(243,244,240,0),var(--canvas) 42%)}
.fullbleed .dock{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.35))}

/* ================= Grouped inset lists / rows (iOS table view, white paper) ================= */
.list.inset{margin:0 16px;background:var(--paper);border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hairline)}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:48px;width:100%;text-align:left;color:var(--ink)}
.row-tap{transition:background .12s}
.row-tap:active{background:var(--green-50)}
.row-sep{display:block;height:1px;background:var(--hairline-cool);margin-left:16px}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-main b{font-size:var(--body);font-weight:600;line-height:1.25;color:var(--ink)}
.row-main em{font-style:normal;font-size:var(--footnote);color:var(--ink-mute);line-height:1.3}
.row-value{color:var(--ink-mute);font-size:var(--body);white-space:nowrap}
.row.block{display:block;padding:14px 16px}
.row.block p{font-size:var(--callout);color:var(--ink-2);line-height:1.5}
.chev{width:17px;height:17px;color:var(--ios-gray3);stroke-width:2;flex:none}
.chev.dark{color:rgba(255,255,255,.6)}
.row-ico{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--green-100)}
.row-ico .ic{width:18px;height:18px;color:var(--green-deep)}
.row-ico.tint-bg{background:var(--green)}
.row-ico.tint-bg .ic{color:#fff}
.row-thumb{width:44px;height:44px;border-radius:10px;flex:none}
.row.check{gap:12px}
.row.check .tick{width:22px;height:22px;color:var(--green);flex:none;stroke-width:2.6}

/* ================= Segmented control (iOS) ================= */
.segmented{display:flex;background:var(--fill-2);border-radius:12px;padding:3px;gap:3px}
.seg{flex:1;border-radius:9px;padding:9px 4px;font-size:var(--footnote);color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2;transition:background .15s;font-weight:500}
.seg small{font-size:var(--caption2);color:var(--ink-mute)}
.seg.is-on{background:var(--paper);color:var(--green-deep);box-shadow:0 1px 4px rgba(6,61,44,.14);font-weight:700}
.seg.is-on small{color:var(--green)}

/* ================= Stepper (iOS) ================= */
.stepper{display:flex;align-items:center;background:var(--fill-2);border-radius:10px;overflow:hidden}
.stepper>span{min-width:34px;text-align:center;font-size:var(--body);font-variant-numeric:tabular-nums;color:var(--ink)}
.step-btn{width:42px;height:34px;display:grid;place-items:center;color:var(--green)}
.step-btn .ic{width:18px;height:18px;stroke-width:2.4}
.step-btn:first-child{border-right:1px solid var(--hairline)}
.step-btn:last-child{border-left:1px solid var(--hairline)}

/* textarea */
.note{width:100%;background:transparent;border:none;color:var(--ink);font-family:var(--font);font-size:var(--body);resize:none;min-height:64px;outline:none}
.note::placeholder{color:var(--ink-faint)}

/* ================= Tab bar (iOS, paper) ================= */
/* Liquid Glass — floating translucent capsule hovering above the content layer */
.tab-bar{position:absolute;left:14px;right:14px;bottom:calc(var(--sab) + 8px);z-index:20;
  height:var(--tab-h);padding:0 4px;border-radius:28px;
  display:flex;align-items:stretch;
  background:rgba(250,251,249,.82);
  backdrop-filter:saturate(185%) blur(26px);-webkit-backdrop-filter:saturate(185%) blur(26px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(255,255,255,.16),
    0 10px 30px rgba(6,61,44,.18),
    0 3px 10px rgba(6,61,44,.10);
  transition:transform var(--dur) var(--ease);
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-faint);font-size:10px;font-weight:500;position:relative}
.tab .ti{width:26px;height:26px;stroke-width:1.7;transition:transform .18s var(--ease)}
.tab.is-on{color:var(--green)}
.tab.is-on .ti{transform:translateY(-1px) scale(1.04)}
.tab#tab-demo.running{color:var(--lime-strong)}

/* ================= Camera chrome (immersive, over photo) ================= */
.glass-btn{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.32);color:#fff;display:grid;place-items:center;backdrop-filter:blur(8px)}
.glass-btn.ghost{background:transparent}
.glass-btn .ic{width:20px;height:20px}
.cam-nav{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding-left:12px;padding-right:12px}
.cam-nav-right{display:flex;gap:10px}
.cam-title{color:#fff;font-size:var(--headline);font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.cam-hint{position:absolute;top:46%;left:0;right:0;text-align:center;color:#fff;font-size:var(--callout);text-shadow:0 1px 6px rgba(0,0,0,.7);z-index:5;padding:0 30px}
.cam-hint.low{top:auto;bottom:190px;color:rgba(255,255,255,.85);font-size:var(--subhead)}
.cam-bottom{position:absolute;left:0;right:0;bottom:0;z-index:10}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 16px 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.28);color:#fff;padding:7px 14px;border-radius:999px;font-size:var(--footnote);backdrop-filter:blur(6px)}
.chip.is-on{background:var(--green);color:#fff;border-color:transparent;font-weight:600}
.cam-controls{display:flex;align-items:center;justify-content:space-between;padding:0 30px}
.shutter{width:72px;height:72px;border-radius:50%;background:transparent;border:4px solid #fff;display:grid;place-items:center}
.shutter span{width:58px;height:58px;border-radius:50%;background:#fff;transition:transform .1s}
.shutter:active span{transform:scale(.9)}
.cam-thumb{width:46px;height:46px;border-radius:10px;border:1.5px solid rgba(255,255,255,.6)}
.modes{display:flex;justify-content:center;gap:24px;color:rgba(255,255,255,.6);font-size:var(--caption);letter-spacing:.1em;margin-bottom:16px}
.modes .is-on{color:var(--lime);font-weight:700}

/* reticle / scanbox */
.reticle,.scanbox{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:210px;height:250px}
.scanbox{width:180px;height:230px;top:46%}
.ret{position:absolute;width:26px;height:26px;border:2.5px solid #fff;opacity:.92}
.ret.c1{left:0;top:0;border-right:none;border-bottom:none}
.ret.c2{right:0;top:0;border-left:none;border-bottom:none}
.ret.c3{left:0;bottom:0;border-right:none;border-top:none}
.ret.c4{right:0;bottom:0;border-left:none;border-top:none}
.scanbox .ret{border-color:var(--lime)}

/* sheet screens (modal) */
.sheet-screen{background:var(--canvas)}
.sheet-screen.is-active{z-index:6}
.grabber{width:36px;height:5px;border-radius:3px;background:var(--label-4);margin:8px auto 0;flex:none}

/* pills & badges */
.pill{align-self:center;font-size:var(--caption2);letter-spacing:.14em;background:var(--green-100);color:var(--green-deep);padding:5px 12px;border-radius:999px;font-weight:700;text-transform:uppercase}
.pill.lime{background:var(--lime);color:var(--on-lime)}
.badge-gift{font-size:10px;background:var(--lime);color:var(--on-lime);padding:2px 8px;border-radius:999px;font-weight:700;vertical-align:middle}

/* play buttons */
.play-fab{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--green-deep);display:grid;place-items:center;z-index:4;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.play-fab .ic{width:22px;height:22px}
.play-fab.big{width:64px;height:64px}
.play-fab.sm{position:static;transform:none;width:40px;height:40px}

/* toast */
.toast{position:absolute;left:50%;bottom:calc(var(--tab-h) + var(--sab) + 20px);transform:translateX(-50%) translateY(20px);
  background:var(--green-deep);color:var(--on-dark);
  padding:11px 18px;border-radius:999px;font-size:var(--footnote);opacity:0;pointer-events:none;z-index:70;
  transition:all .3s var(--ease);box-shadow:0 10px 30px rgba(6,61,44,.3);max-width:80%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* flash */
.flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:80;pointer-events:none}
/* confetti canvas overlay */
.confetti-cv{position:absolute;inset:0;z-index:85;pointer-events:none}

/* ================= Unified header component (.appbar) ================= */
.appbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.appbar .ab-side{display:block}
.appbar .ab-title{grid-column:2;text-align:center;font-size:var(--headline);font-weight:600;white-space:nowrap}
.appbar .ab-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px}
.ab-round{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none}
.ab-round svg{width:22px;height:22px}
.ab-chevron{justify-self:start;display:flex;align-items:center;gap:1px;color:var(--tint);font-size:var(--body);padding:6px 8px 6px 4px}
.ab-chevron svg{width:22px;height:22px;stroke-width:2.2}
.ab-textbtn{justify-self:start;color:var(--tint);font-size:var(--body);font-weight:500;padding:6px 10px}
.ab-lang-tag{font-size:20px;line-height:1;letter-spacing:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.ab-fav.on svg{fill:currentColor}

/* hero variant — floating glass controls over a photo/hero (no bar background) */
.appbar-hero{position:absolute;top:0;left:0;right:0;z-index:14;
  padding:calc(var(--sat) + 8px) 12px 8px;pointer-events:none}
.appbar-hero > *{pointer-events:auto}
.appbar-hero .ab-round{background:rgba(0,0,0,.34);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.appbar-hero .ab-title{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.appbar-hero .ab-lang{color:#fff}

/* solid variant — translucent paper bar in normal flow */
.appbar-solid{position:relative;z-index:8;flex:none;
  height:calc(var(--nav-h) + var(--sat));padding-top:var(--sat);padding-left:6px;padding-right:8px;
  background:rgba(243,244,240,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--separator)}
.appbar-solid .ab-title{color:var(--ink)}
.appbar-solid .ab-round{background:var(--fill-2);color:var(--tint)}
.appbar-solid .ab-lang{color:var(--tint)}

/* plain variant — transparent, safe-top spacer with optional side actions */
.appbar-plain{position:relative;z-index:8;flex:none;
  min-height:calc(var(--nav-h) + var(--sat));padding-top:var(--sat);padding-left:6px;padding-right:8px}
.appbar-plain .ab-title{color:var(--ink)}
.appbar-plain .ab-round{background:var(--fill-2);color:var(--tint)}
.appbar-plain .ab-lang{color:var(--tint)}

/* Hub language pill in the home top bar */
.home-top-right{display:flex;align-items:center;gap:10px}
/* language switch — bare flag, no capsule */
.home-lang{min-width:40px;height:40px;padding:0 6px;background:none;border:0;box-shadow:none;
  display:inline-flex;align-items:center;justify-content:center}

/* language button in the header — bare flag, no capsule */
.ab-lang{width:auto;min-width:34px;height:34px;padding:0 6px;background:none!important;border:0;box-shadow:none;border-radius:0}

/* language dropdown menu (iOS-style popover) */
.lang-menu{position:absolute;z-index:90;min-width:178px;padding:6px;border-radius:14px;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--hairline);box-shadow:0 14px 40px rgba(6,61,44,.22);
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;
  transition:opacity .16s var(--ease),transform .16s var(--ease)}
.lang-menu.show{opacity:1;transform:none}
.lang-item{display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;border-radius:9px;font-size:var(--callout);color:var(--ink);font-weight:500;text-align:left}
.lang-item:active{background:var(--green-50)}
.lang-item.on{color:var(--green-deep);font-weight:700}
.lang-item .lang-flag{font-size:20px;line-height:1;flex:none}
.lang-item .lang-name{flex:1;min-width:0}
.lang-item .lang-check{width:18px;height:18px;color:var(--green);stroke-width:2.4;flex:none}