/* ==========================================================
   Resorts Centre — Mobile PWA
   Design tokens: sand / teal / coral
   Headings: Poppins · Body: Roboto
   ========================================================== */

:root{
  --sand:        #F6EFE4;
  --sand-deep:    #EDE2D0;
  --teal:        #e91e01;
  --teal-dark:    #ff8000;
  --teal-tint:    #E3F1F0;
  --coral:       #FF6B4A;
  --coral-dark:   #E5502F;
  --gold:        #E8A33D;
  --ink:         #1F2A2E;
  --ink-soft:     #5B6B6A;
  --white:       #FFFFFF;
  --line:        #E4DAC8;
  --radius-lg:    22px;
  --radius-md:    16px;
  --radius-sm:    10px;
  --shadow-card:  0 8px 24px rgba(15, 60, 58, 0.10);
  --shadow-pop:   0 14px 34px rgba(15, 60, 58, 0.18);
  --nav-h:       72px;
  --safe-b:      env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--sand);
  color: var(--ink);
  font-family: "Roboto", -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1,h2,h3,h4,.font-head{
  font-family: "Poppins", sans-serif;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

p{ margin:0; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
img{ display:block; max-width:100%; }
ul{ list-style:none; margin:0; padding:0; }
input, select{ font-family: "Roboto", sans-serif; }

/* ---------- App shell ---------- */
.app{
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--sand);
  position: relative;
  padding-bottom: calc(var(--nav-h) + var(--safe-b) + 14px);
}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 20px 10px;
}
.topbar .brand{
  display:flex;
  align-items:center;
  gap:9px;
}
.topbar .brand .mark{
  width:34px; height:34px;
  border-radius:10px;
  background: linear-gradient(135deg, var(--coral), var(--gold));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.topbar .brand .mark svg{ width:19px; height:19px; }
.topbar .brand .word{
  font-family:"Poppins",sans-serif;
  font-weight:700;
  font-size:16.5px;
  line-height:1;
}
.topbar .brand .word span{ color: var(--teal); }
.topbar .brand .tag{
  font-size:8.5px;
  letter-spacing:.08em;
  color: var(--ink-soft);
  text-transform:uppercase;
  margin-top:2px;
}
.icon-btn{
  width:40px; height:40px;
  border-radius:50%;
  background: var(--white);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-card);
}
.icon-btn svg{ width:19px; height:19px; stroke: var(--ink); }

.page-head{ padding: 6px 20px 14px; }
.page-head .eyebrow{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--coral-dark);
  margin-bottom:4px;
  display:block;
}
.page-head h1{ font-size:24px; font-weight:700; }
.page-head p.sub{ margin-top:6px; color: var(--ink-soft); font-size:14px; line-height:1.5; }

/* ---------- Buttons ---------- */
.btn{
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  border:none;
  border-radius: 999px;
  padding: 15px 22px;
  font-weight:600;
  font-size:15px;
  font-family:"Poppins",sans-serif;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  color: var(--white);
  box-shadow: 0 10px 22px rgba(229,80,47,.32);
  width:100%;
}
.btn-secondary{
  background: var(--teal);
  color: var(--white);
  width:100%;
}
.btn-outline{
  background: transparent;
  color: var(--teal-dark);
  border: 1.5px solid var(--teal);
  width:100%;
}
.btn-ghost{
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* ---------- Search / filter card ---------- */
.search-card{
  margin: 4px 20px 22px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}
.search-card .sc-title{
  display:flex; align-items:center; gap:8px;
  font-family:"Poppins",sans-serif; font-weight:600; font-size:14.5px;
  color: var(--teal-dark); margin-bottom:14px;
}
.field{
  display:flex; flex-direction:column; gap:5px;
  padding: 11px 0;
  border-bottom: 1px solid var(--sand-deep);
}
.field:last-of-type{ border-bottom:none; }
.field label{
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color: var(--ink-soft);
}
.field .row{ display:flex; align-items:center; gap:10px; }
.field svg{ width:17px; height:17px; stroke: var(--teal); flex-shrink:0; }
.field select, .field input{
  border:none; background:transparent; outline:none;
  font-size:15px; color: var(--ink); width:100%; font-weight:500;
  font-family:"Roboto",sans-serif;
  -webkit-appearance:none; appearance:none;
}
.field-duo{ display:flex; gap:14px; }
.field-duo .field{ flex:1; }

/* ---------- Horizontal scroll rails ---------- */
.rail-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding: 0 20px; margin-bottom:12px;
}
.rail-head h2{ font-size:18px; font-weight:700; }
.rail-head .see-all{
  font-size:12.5px; font-weight:600; color: var(--coral-dark);
}
.rail{
  display:flex; gap:14px;
  overflow-x:auto;
  padding: 2px 20px 8px;
  scroll-snap-type: x proximity;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.dragging{ cursor: grabbing; scroll-snap-type: none; }
.rail.dragging .r-card{ pointer-events:none; }

.chip-rail{
  display:flex; gap:10px; overflow-x:auto;
  padding: 0 20px 18px; scrollbar-width:none;
}
.chip-rail::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0;
  padding: 9px 16px;
  border-radius:999px;
  background: var(--white);
  border:1px solid var(--line);
  font-size:13px; font-weight:600; color: var(--ink);
  display:flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.chip .count{
  background: var(--teal-tint); color: var(--teal-dark);
  font-size:10.5px; padding:2px 6px; border-radius:999px; font-weight:700;
}
.chip.active{ background: var(--teal); color:var(--white); border-color:var(--teal); }
.chip.active .count{ background: rgba(255,255,255,.22); color: var(--white); }

/* resort card (rail) */
.r-card{
  flex-shrink:0;
  width: 208px;
  scroll-snap-align:start;
  background: var(--white);
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  border:1px solid var(--line);
  user-select:none;
}
.r-card .thumb{
  position:relative;
  height:130px;
  background-size:cover; background-position:center;
}
.r-card .thumb .badge{
  position:absolute; top:10px; left:10px;
  background: rgba(255,255,255,.94);
  border-radius:999px; padding:4px 9px;
  font-size:10.5px; font-weight:700; color: var(--teal-dark);
  display:flex; align-items:center; gap:4px;
}
.r-card .thumb .fav{
  position:absolute; top:10px; right:10px;
  width:28px; height:28px; border-radius:50%;
  background: rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center;
}
.r-card .thumb .fav svg{ width:14px; height:14px; }
.r-card .body{ padding: 12px 13px 14px; }
.r-card .prov{
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color: var(--coral-dark); margin-bottom:3px;
}
.r-card .name{
  font-family:"Poppins",sans-serif; font-weight:600; font-size:14.5px;
  line-height:1.25; margin-bottom:3px;
}
.r-card .loc{
  font-size:12px; color: var(--ink-soft);
  display:flex; align-items:center; gap:4px;
}
.r-card .loc svg{ width:11px; height:11px; stroke:var(--ink-soft); }

/* full-width vertical resort card (search results) */
.r-card-h{
  display:flex; gap:12px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 10px; margin: 0 20px 14px;
  box-shadow: var(--shadow-card);
  border:1px solid var(--line);
}
.r-card-h .thumb{
  width:96px; height:96px; border-radius:12px; flex-shrink:0;
  background-size:cover; background-position:center;
}
.r-card-h .info{ flex:1; min-width:0; padding:2px 0; }
.r-card-h .prov{ font-size:10px; font-weight:700; text-transform:uppercase; color:var(--coral-dark); letter-spacing:.05em; }
.r-card-h .name{ font-family:"Poppins",sans-serif; font-weight:600; font-size:15px; margin:2px 0 4px; }
.r-card-h .loc{ font-size:12px; color:var(--ink-soft); display:flex; gap:4px; align-items:center; margin-bottom:6px;}
.r-card-h .loc svg{ width:11px; height:11px; stroke:var(--ink-soft); }
.r-card-h .foot{ display:flex; align-items:center; justify-content:space-between; }
.r-card-h .rating{ display:flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--teal-dark); }
.r-card-h .rating svg{ width:13px; height:13px; fill:var(--gold); stroke:none; }
.r-card-h .cta{ font-size:11.5px; font-weight:700; color:var(--white); background:var(--teal); padding:6px 12px; border-radius:999px; }

/* ---------- Section wrapper ---------- */
.section{ margin-bottom: 26px; }

/* ---------- Bottom navigation ---------- */
.bottom-nav{
  position: fixed;
  left:50%; transform: translateX(-50%);
  bottom:0;
  width:100%; max-width:480px;
  background: var(--white);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  padding: 8px 4px calc(8px + var(--safe-b));
  box-shadow: 0 -8px 24px rgba(15,60,58,.08);
  z-index: 40;
}
.bottom-nav a{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 2px;
  color: var(--ink-soft);
}
.bottom-nav a svg{ width:22px; height:22px; stroke: var(--ink-soft); fill:none; transition:.15s; }
.bottom-nav a span{ font-size:10.5px; font-weight:600; font-family:"Poppins",sans-serif; }
.bottom-nav a.active{ color: var(--teal); }
.bottom-nav a.active svg{ stroke: var(--teal); }
.bottom-nav a.active span{ color: var(--teal); }
.bottom-nav .nav-fab-slot{ flex:1; display:flex; justify-content:center; position:relative; }
.fab{
  position:absolute; top:-30px;
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 22px rgba(229,80,47,.4);
  border: 4px solid var(--sand);
}
.fab svg{ width:24px; height:24px; stroke:var(--white); }

/* ---------- Auth pages ---------- */
.auth-wrap{
  min-height:100vh;
  max-width:480px; margin:0 auto;
  display:flex; flex-direction:column;
  background: var(--sand);
}
.auth-hero{
  position:relative;
  height:230px;
  background: linear-gradient(160deg, var(--teal) 0%, var(--teal-dark) 100%);
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 18px 22px;
}
.auth-hero .back-btn{
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
}
.auth-hero .back-btn svg{ width:18px; height:18px; stroke:var(--white); }
.auth-hero .sun{
  position:absolute; top:-30px; right:-30px;
  width:150px; height:150px; border-radius:50%;
  background: radial-gradient(circle, var(--coral) 0%, rgba(255,107,74,0) 70%);
}
.auth-hero .wave{
  position:absolute; bottom:-2px; left:0; right:0;
  height:46px;
  background: var(--sand);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: scaleX(1.5);
}
.auth-hero .htext .brand-word{ font-family:"Poppins",sans-serif; color:var(--white); font-weight:700; font-size:15px; opacity:.9;}
.auth-hero .htext h1{ color:var(--white); font-size:25px; margin-top:6px; }
.auth-hero .htext p{ color: rgba(255,255,255,.82); font-size:13px; margin-top:5px; }

.auth-body{ padding: 6px 22px 30px; flex:1; }
.input-group{ margin-bottom:15px; }
.input-group label{
  display:block; font-size:12px; font-weight:600; color: var(--ink-soft);
  margin-bottom:7px; text-transform:uppercase; letter-spacing:.05em;
}
.input-shell{
  display:flex; align-items:center; gap:10px;
  background: var(--white);
  border:1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.input-shell:focus-within{ border-color: var(--teal); }
.input-shell svg{ width:17px; height:17px; stroke: var(--ink-soft); flex-shrink:0; }
.input-shell input{
  border:none; outline:none; background:transparent;
  width:100%; font-size:14.5px; color:var(--ink);
}
.input-shell button.toggle-pass{
  background:none; border:none; padding:0; display:flex;
}
.input-shell button.toggle-pass svg{ stroke: var(--ink-soft); }

.form-row-split{ display:flex; align-items:center; justify-content:space-between; margin: -4px 0 18px; }
.check-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); }
.check-row input{ width:16px; height:16px; accent-color: var(--teal); }
.link-teal{ color: var(--teal-dark); font-weight:600; font-size:13px; }

.divider-or{
  display:flex; align-items:center; gap:12px; margin: 22px 0;
  color: var(--ink-soft); font-size:12px; font-weight:600;
}
.divider-or::before, .divider-or::after{ content:""; flex:1; height:1px; background: var(--line); }

.social-row{ display:flex; gap:12px; margin-bottom:22px; }
.social-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; border-radius: var(--radius-sm);
  background: var(--white); border:1.5px solid var(--line);
  font-size:13px; font-weight:600;
}
.social-btn svg{ width:17px; height:17px; }

.switch-line{ text-align:center; font-size:13.5px; color: var(--ink-soft); margin-top:6px;}
.switch-line a{ color: var(--coral-dark); font-weight:700; }

/* ---------- Profile ---------- */
.profile-hero{
background: linear-gradient(160deg, #fd4001, #4c0000);  padding: 22px 20px 60px;
  border-radius: 0 0 28px 28px;
  position:relative;
}
.profile-hero .top-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.profile-hero .top-row .word{ color:var(--white); font-family:"Poppins",sans-serif; font-weight:700; font-size:15px;}
.profile-hero .top-row .icon-btn{ background: rgba(255,255,255,.16); border:none; }
.profile-hero .top-row .icon-btn svg{ stroke: var(--white); }
.profile-card{
  display:flex; align-items:center; gap:14px;
}
.avatar{
  width:64px; height:64px; border-radius:50%;
  background: linear-gradient(135deg, var(--coral), var(--gold));
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-family:"Poppins",sans-serif; font-weight:700; font-size:22px;
  border: 3px solid rgba(255,255,255,.5);
  flex-shrink:0;
}
.profile-card .who h2{ color:var(--white); font-size:18px; }
.profile-card .who p{ color: rgba(255,255,255,.8); font-size:12.5px; margin-top:3px; }
.profile-card .who .plan-tag{
  display:inline-flex; align-items:center; gap:5px;
  background: rgba(255,255,255,.18); color:var(--white);
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px;
  margin-top:7px;
}

.stat-strip{
  display:flex; gap:10px;
  margin: -42px 20px 22px;
  position:relative; z-index:5;
}
.stat-box{
  flex:1; background: var(--white); border-radius: var(--radius-md);
  padding: 14px 10px; text-align:center;
  box-shadow: var(--shadow-card); border:1px solid var(--line);
}
.stat-box .num{ font-family:"Poppins",sans-serif; font-weight:700; font-size:19px; color: var(--teal-dark); }
.stat-box .lbl{ font-size:10.5px; color: var(--ink-soft); margin-top:2px; font-weight:500; }

.menu-list{ margin: 0 20px 22px; background: var(--white); border-radius: var(--radius-lg); border:1px solid var(--line); overflow:hidden; box-shadow: var(--shadow-card); }
.menu-item{
  display:flex; align-items:center; gap:13px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--sand-deep);
}
.menu-item:last-child{ border-bottom:none; }
.menu-item .m-ic{
  width:36px; height:36px; border-radius:10px;
  background: var(--teal-tint);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.menu-item .m-ic svg{ width:17px; height:17px; stroke: var(--teal-dark); }
.menu-item .m-text{ flex:1; }
.menu-item .m-text .t1{ font-size:14px; font-weight:600; font-family:"Poppins",sans-serif; }
.menu-item .m-text .t2{ font-size:11.5px; color: var(--ink-soft); margin-top:1px; }
.menu-item .chev{ width:16px; height:16px; stroke: var(--ink-soft); }
.menu-item.danger .m-ic{ background: #FBE7E2; }
.menu-item.danger .m-ic svg{ stroke: var(--coral-dark); }
.menu-item.danger .t1{ color: var(--coral-dark); }

/* ---------- Units page ---------- */
.units-toolbar{
  display:flex; gap:10px; padding: 0 20px 16px; overflow-x:auto; scrollbar-width:none;
}
.units-toolbar::-webkit-scrollbar{ display:none; }
.unit-card{
  margin: 0 20px 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  overflow:hidden;
}
.unit-card .thumb{
  height:140px; position:relative;
  background-size:cover; background-position:center;
}
.unit-card .thumb .status{
  position:absolute; top:12px; left:12px;
  font-size:10.5px; font-weight:700; padding:5px 11px; border-radius:999px;
  color:var(--white);
}
.status.active{ background: var(--teal); }
.status.pending{ background: var(--gold); }
.status.draft{ background: var(--ink-soft); }
.unit-card .thumb .menu-dots{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:50%;
  background: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
}
.unit-card .thumb .menu-dots svg{ width:15px; height:15px; }
.unit-card .u-body{ padding:14px 16px 16px; }
.unit-card .prov{ font-size:10px; font-weight:700; text-transform:uppercase; color:var(--coral-dark); letter-spacing:.05em; }
.unit-card .name{ font-family:"Poppins",sans-serif; font-weight:600; font-size:16px; margin:3px 0 4px; }
.unit-card .loc{ font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:5px; margin-bottom:12px; }
.unit-card .loc svg{ width:12px; height:12px; stroke:var(--ink-soft); }
.unit-card .u-stats{ display:flex; gap:8px; margin-bottom:14px; }
.u-stats .us{ flex:1; background: var(--sand); border-radius:10px; padding:9px 8px; text-align:center; }
.u-stats .us .n{ font-family:"Poppins",sans-serif; font-weight:700; font-size:15px; color:var(--teal-dark); }
.u-stats .us .l{ font-size:9.5px; color:var(--ink-soft); margin-top:1px; }
.unit-card .u-actions{ display:flex; gap:10px; }
.u-actions .btn{ padding:11px 14px; font-size:13px; }

.empty-add-card{
  margin: 4px 20px 16px;
  border: 2px dashed var(--teal);
  border-radius: var(--radius-lg);
  padding: 26px 18px;
  text-align:center;
  background: var(--teal-tint);
}
.empty-add-card .ic-wrap{
  width:52px; height:52px; border-radius:50%;
  background: var(--white); margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-card);
}
.empty-add-card .ic-wrap svg{ width:24px; height:24px; stroke: var(--teal); }
.empty-add-card h3{ font-size:15px; margin-bottom:5px; }
.empty-add-card p{ font-size:12.5px; color: var(--ink-soft); margin-bottom:16px; line-height:1.5; }

/* utility */
.px{ padding-left:20px; padding-right:20px; }
.mt-0{ margin-top:0 !important; }

/* ---------- Account settings tab strip ---------- */
.tab-strip{
  display:flex; gap:8px; overflow-x:auto;
  padding: 0 20px 16px; scrollbar-width:none;
}
.tab-strip::-webkit-scrollbar{ display:none; }
.tab-pill{
  flex-shrink:0;
  padding: 9px 15px;
  border-radius:999px;
  font-size:12.5px; font-weight:600;
  color: var(--ink-soft);
  background: var(--white);
  border:1px solid var(--line);
  white-space:nowrap;
}
.tab-pill.active{ background: var(--teal); color:var(--white); border-color:var(--teal); }

/* ---------- Form card (settings pages) ---------- */
.form-card{
  margin: 0 20px 18px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border:1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
.form-card h3{ font-size:14.5px; margin-bottom:14px; }
.form-grid .input-group:last-child{ margin-bottom:0; }
.select-shell{
  display:flex; align-items:center; gap:10px;
  background: var(--white);
  border:1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.select-shell select{
  border:none; outline:none; background:transparent; width:100%;
  font-size:14.5px; color:var(--ink); -webkit-appearance:none; appearance:none;
}
.select-shell svg{ width:16px; height:16px; stroke: var(--ink-soft); flex-shrink:0; }
.dob-row{ display:flex; gap:8px; }
.dob-row .select-shell{ flex:1; padding:13px 10px; }
.phone-row{ display:flex; gap:8px; }
.phone-row .select-shell{ width:82px; flex-shrink:0; }
textarea.ta{
  width:100%; border:1.5px solid var(--line); border-radius: var(--radius-sm);
  padding:13px 15px; font-size:14.5px; font-family:"Roboto",sans-serif; color:var(--ink);
  resize:vertical; min-height:96px; outline:none;
}
textarea.ta:focus{ border-color: var(--teal); }
.sticky-save{
  position: sticky; bottom: calc(var(--nav-h) + var(--safe-b) + 14px);
  padding: 0 20px; margin-top:6px;
}

/* ---------- Verification page ---------- */
.verify-card{
  margin: 0 20px 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border:1px solid var(--line);
  box-shadow: var(--shadow-card);
  overflow:hidden;
}
.verify-card .vc-head{
  padding: 14px 16px;
  background: var(--sand);
  font-family:"Poppins",sans-serif; font-weight:600; font-size:13.5px;
  border-bottom:1px solid var(--line);
}
.verify-row{
  display:flex; gap:12px; align-items:flex-start;
  padding: 16px;
  border-bottom:1px solid var(--sand-deep);
}
.verify-row:last-child{ border-bottom:none; }
.verify-row .v-ic{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.verify-row .v-ic.done{ background: var(--teal-tint); }
.verify-row .v-ic.done svg{ stroke: var(--teal); width:18px; height:18px; }
.verify-row .v-ic.todo{ background: var(--sand); }
.verify-row .v-ic.todo svg{ stroke: var(--ink-soft); width:18px; height:18px; }
.verify-row .v-text{ flex:1; }
.verify-row .v-text .vt1{ font-family:"Poppins",sans-serif; font-weight:600; font-size:13.5px; margin-bottom:3px; }
.verify-row .v-text .vt2{ font-size:12px; color: var(--ink-soft); line-height:1.5; }
.verify-row .v-text .vt2 b{ color: var(--ink); }
.verify-btn{
  flex-shrink:0; font-size:11.5px; font-weight:700; color:var(--white);
  background: var(--teal); padding:7px 13px; border-radius:999px; align-self:center;
}
.verify-tag{
  flex-shrink:0; font-size:10.5px; font-weight:700; color: var(--teal-dark);
  background: var(--teal-tint); padding:5px 10px; border-radius:999px; align-self:center;
}

/* ---------- Photos page ---------- */
.photo-hero-edit{
  margin: 0 20px 18px;
  text-align:center;
}
.photo-hero-edit .avatar-lg{
  width:104px; height:104px; border-radius:50%; margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--coral), var(--gold));
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-family:"Poppins",sans-serif; font-weight:700; font-size:32px;
  border: 4px solid var(--white); box-shadow: var(--shadow-card);
  position:relative;
}
.photo-hero-edit .cam-btn{
  position:absolute; bottom:2px; right:2px;
  width:32px; height:32px; border-radius:50%;
  background: var(--teal); border:3px solid var(--white);
  display:flex; align-items:center; justify-content:center;
}
.photo-hero-edit .cam-btn svg{ width:14px; height:14px; stroke:#fff; }
.photo-hero-edit .avatar-wrap{ position:relative; display:inline-block; }
.photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 20px 18px; }
.photo-slot{
  aspect-ratio: 1/1; border-radius: var(--radius-md);
  border: 2px dashed var(--line);
  background: var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color: var(--ink-soft);
}
.photo-slot svg{ width:22px; height:22px; stroke: var(--teal); }
.photo-slot span{ font-size:11.5px; font-weight:600; }
.photo-slot.filled{ border-style:solid; background-size:cover; background-position:center; position:relative; }
.photo-slot.filled .rm{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  background: rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center;
}
.photo-slot.filled .rm svg{ width:12px; height:12px; stroke:#fff; }

/* ---------- Upload document page ---------- */
.dropzone{
  margin: 0 20px 18px;
  border: 2px dashed var(--teal);
  border-radius: var(--radius-lg);
  background: var(--teal-tint);
  padding: 30px 20px;
  text-align:center;
}
.dropzone .ic-wrap{
  width:52px; height:52px; border-radius:50%; background:var(--white); margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-card);
}
.dropzone .ic-wrap svg{ width:24px; height:24px; stroke:var(--teal); }
.dropzone h3{ font-size:14.5px; margin-bottom:4px; }
.dropzone p{ font-size:12px; color: var(--ink-soft); margin-bottom:14px; }
.doc-row{
  display:flex; align-items:center; gap:12px;
  margin: 0 20px 12px;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 14px; box-shadow: var(--shadow-card);
}
.doc-row .d-ic{ width:38px; height:38px; border-radius:10px; background: var(--sand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.doc-row .d-ic svg{ width:18px; height:18px; stroke: var(--teal-dark); }
.doc-row .d-text{ flex:1; min-width:0; }
.doc-row .d-text .dt1{ font-size:13.5px; font-weight:600; font-family:"Poppins",sans-serif; }
.doc-row .d-text .dt2{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
.doc-status{ font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px; flex-shrink:0; }
.doc-status.approved{ background:var(--teal-tint); color:var(--teal-dark); }
.doc-status.pending{ background:#FBF1DC; color:var(--gold); }

/* ---------- Resort detail page ---------- */
.gallery-rail{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; margin-bottom:10px;
}
.gallery-rail::-webkit-scrollbar{ display:none; }
.gallery-rail .g-slide{
  flex:0 0 100%; scroll-snap-align:start;
  height:260px; background-size:cover; background-position:center;
}
.gallery-dots{ display:flex; justify-content:center; gap:6px; margin-bottom:16px; }
.gallery-dots span{ width:6px; height:6px; border-radius:50%; background: var(--line); }
.gallery-dots span.on{ background: var(--teal); width:16px; border-radius:4px; }
.resort-head-block{ padding: 0 20px 4px; }
.resort-head-block .rprov{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--coral-dark); }
.resort-head-block h1{ font-size:22px; margin: 4px 0 6px; }
.resort-head-block .rloc{ display:flex; align-items:center; gap:6px; color: var(--ink-soft); font-size:13.5px; }
.resort-head-block .rloc svg{ width:14px; height:14px; stroke:currentColor; }
.floating-actions{ position:absolute; top:16px; left:0; right:0; display:flex; justify-content:space-between; padding:0 16px; z-index:5; }
.floating-actions .icon-btn{ background: rgba(255,255,255,.94); border:none; }

.amenity-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
  margin: 0 20px 8px;
}
.amenity-item{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 13px 8px; text-align:center; box-shadow: var(--shadow-card);
}
.amenity-item svg{ width:19px; height:19px; stroke: var(--teal); margin-bottom:6px; }
.amenity-item span{ display:block; font-size:10.5px; font-weight:600; color: var(--ink); line-height:1.3; }
.amenity-more{ margin: 0 20px 22px; text-align:center; font-size:12.5px; font-weight:700; color: var(--teal-dark); }

.stay-card{
  margin: 0 20px 12px;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px; box-shadow: var(--shadow-card);
  display:flex; align-items:center; gap:12px;
}
.stay-card .s-date{
  width:52px; text-align:center; flex-shrink:0;
  background: var(--teal-tint); border-radius:10px; padding:8px 4px;
}
.stay-card .s-date .mo{ font-size:10px; font-weight:700; color: var(--teal-dark); text-transform:uppercase; }
.stay-card .s-date .day{ font-family:"Poppins",sans-serif; font-weight:700; font-size:17px; color: var(--teal-dark); }
.stay-card .s-info{ flex:1; min-width:0; }
.stay-card .s-info .unit{ font-size:11px; color: var(--ink-soft); font-weight:600; }
.stay-card .s-info .size{ font-size:13px; font-weight:600; font-family:"Poppins",sans-serif; margin:2px 0; }
.stay-card .s-info .nights{ font-size:11.5px; color: var(--ink-soft); }
.stay-card .s-cta{ flex-shrink:0; font-size:12px; font-weight:700; color:var(--white); background: var(--coral); padding:9px 14px; border-radius:999px; }

.sticky-book-bar{
  position: sticky; bottom: calc(var(--nav-h) + var(--safe-b));
  background: var(--white); border-top:1px solid var(--line);
  padding: 14px 20px; margin-top:6px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  box-shadow: 0 -8px 20px rgba(15,60,58,.08);
}
.sticky-book-bar .price-lbl{ font-size:11px; color: var(--ink-soft); }
.sticky-book-bar .price-val{ font-family:"Poppins",sans-serif; font-weight:700; font-size:17px; color: var(--ink); }
.sticky-book-bar .btn{ width:auto; padding:13px 24px; }

/* ---------- Stay card v2 (with price + Book) ---------- */
.stay-card{ align-items:flex-start; flex-wrap:wrap; }
.stay-card .s-info{ flex-basis: 100%; margin-bottom:10px; }
.stay-card .s-price-row{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:10px;
}
.stay-card .s-price{
  display:flex; flex-direction:column;
}
.stay-card .s-price .sp-opt{ font-size:10.5px; font-weight:700; color: var(--teal-dark); text-transform:uppercase; letter-spacing:.03em; }
.stay-card .s-price .sp-amt{ font-family:"Poppins",sans-serif; font-weight:700; font-size:16px; color: var(--ink); }
.stay-card .s-book-btn{
  flex-shrink:0; font-size:12.5px; font-weight:700; color:var(--white);
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  padding:10px 18px; border-radius:999px; border:none;
  display:flex; align-items:center; gap:6px;
  box-shadow: 0 8px 16px rgba(229,80,47,.28);
}
.stay-card .s-book-btn svg{ width:13px; height:13px; stroke:#fff; }

/* ---------- Booking confirmation bottom sheet ---------- */
.booking-overlay{
  position:fixed; inset:0; background: rgba(20,30,29,.5);
  z-index:90; opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.booking-overlay.open{ opacity:1; pointer-events:auto; }
.booking-sheet{
  position:fixed; left:50%; bottom:0; transform: translate(-50%, 100%);
  width:100%; max-width:480px;
  background: var(--sand);
  border-radius: 24px 24px 0 0;
  z-index:91;
  max-height: 88vh;
  display:flex; flex-direction:column;
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -10px 40px rgba(0,0,0,.25);
}
.booking-sheet.open{ transform: translate(-50%, 0); }
.bs-header{
  background: linear-gradient(120deg, var(--coral), var(--coral-dark));
  padding: 18px 20px;
  border-radius: 24px 24px 0 0;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.bs-header .bs-title{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-family:"Poppins",sans-serif; font-weight:700; font-size:16px;
}
.bs-header .bs-title svg{ width:19px; height:19px; stroke:#fff; }
.bs-header .bs-close{
  width:32px; height:32px; border-radius:50%;
  background: rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  border:none; flex-shrink:0;
}
.bs-header .bs-close svg{ width:15px; height:15px; stroke:#fff; }
.bs-body{ overflow-y:auto; padding: 18px 20px 4px; flex:1; }
.bs-info-card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  overflow:hidden; margin-bottom:16px;
}
.bs-row{
  display:flex; align-items:flex-start; gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sand-deep);
}
.bs-row:last-child{ border-bottom:none; }
.bs-row .bs-ic{ width:15px; height:15px; stroke: var(--coral-dark); flex-shrink:0; margin-top:2px; }
.bs-row .bs-k{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color: var(--coral-dark); flex-shrink:0; width:88px;
}
.bs-row .bs-v{ font-size:13.5px; font-weight:600; color: var(--ink); text-align:right; flex:1; }
.bs-price-head{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color: var(--ink-soft); margin: 4px 0 8px; display:flex; align-items:center; gap:6px;
}
.bs-price-head svg{ width:13px; height:13px; stroke: var(--ink-soft); }
.bs-price-card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  overflow:hidden; margin-bottom:14px;
}
.bs-price-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; border-bottom:1px solid var(--sand-deep); font-size:13px;
}
.bs-price-row .plabel{ color: var(--ink-soft); display:flex; align-items:center; gap:6px; }
.bs-price-row .plabel svg{ width:13px; height:13px; stroke: var(--ink-soft); }
.bs-price-row .pval{ font-weight:600; color: var(--ink); }
.bs-price-row.total{
  background: linear-gradient(120deg, var(--coral), var(--coral-dark));
  border-bottom:none;
}
.bs-price-row.total .plabel, .bs-price-row.total .pval{ color:#fff; font-weight:700; }
.bs-price-row.total .pval{ font-family:"Poppins",sans-serif; font-size:16px; }
.bs-note{
  display:flex; gap:8px; align-items:flex-start;
  background: var(--teal-tint); border-radius: var(--radius-sm);
  padding: 11px 13px; font-size:12px; color: var(--teal-dark); line-height:1.5;
  margin-bottom:16px;
}
.bs-note svg{ width:15px; height:15px; stroke: var(--teal-dark); flex-shrink:0; margin-top:1px; }
.bs-actions{
  display:flex; gap:10px;
  padding: 14px 20px calc(18px + var(--safe-b));
  border-top: 1px solid var(--line);
  background: var(--sand);
  flex-shrink:0;
}
.bs-actions .btn{ flex:1; padding:14px; font-size:13.5px; }
.bs-actions .btn-pay{
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  color:#fff; box-shadow: 0 10px 22px rgba(229,80,47,.32);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.bs-actions .btn-pay svg{ width:16px; height:16px; stroke:#fff; }

/* ---------- Forgot password success state ---------- */
.success-block{ text-align:center; padding: 30px 22px 10px; }
.success-block .ic-wrap{
  width:74px; height:74px; border-radius:50%; margin:0 auto 18px;
  background: var(--teal-tint); display:flex; align-items:center; justify-content:center;
}
.success-block .ic-wrap svg{ width:32px; height:32px; stroke: var(--teal); }
.success-block h2{ font-size:19px; margin-bottom:8px; }
.success-block p{ font-size:13.5px; color: var(--ink-soft); line-height:1.6; margin-bottom:24px; }

/* ---------- Transactions page ---------- */
.txn-card{
  margin: 0 20px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow:hidden;
}
.txn-card .txn-top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 13px 16px;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.txn-card .txn-top .prop{
  font-family:"Poppins",sans-serif; font-weight:600; font-size:14px;
}
.status-pill{ font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px; flex-shrink:0; }
.status-pill.success{ background: var(--teal-tint); color: var(--teal-dark); }
.status-pill.failed{ background:#FBE7E2; color: var(--coral-dark); }
.txn-card .txn-body{ padding: 13px 16px 15px; }
.txn-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:12.5px; }
.txn-row .k{ color: var(--ink-soft); flex-shrink:0; }
.txn-row .v{ color: var(--ink); text-align:right; font-weight:500; }
.txn-row .v.mono{ font-family: monospace; font-size:11.5px; word-break:break-all; }
.txn-divider{ height:1px; background: var(--sand-deep); margin: 4px 0; }
.txn-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:10px; padding-top:12px; border-top:1px solid var(--sand-deep);
  gap:10px;
}
.txn-foot .invoice-link{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color: var(--teal-dark);
}
.txn-foot .invoice-link svg{ width:14px; height:14px; stroke: var(--teal-dark); }
.txn-foot .invoice-na{ font-size:12px; color: var(--ink-soft); }
.refund-pill{ font-size:10.5px; font-weight:700; padding:6px 12px; border-radius:999px; }
.refund-pill.apply{ background: var(--gold); color:#fff; }
.refund-pill.pending{ background:#FBF1DC; color: var(--gold); }
.refund-pill.approved{ background: var(--teal-tint); color: var(--teal-dark); }

/* ---------- Tickets page ---------- */
.ticket-row{
  display:flex; align-items:center; gap:12px;
  margin: 0 20px 12px;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px; box-shadow: var(--shadow-card);
}
.ticket-row .t-num{
  font-family:"Poppins",sans-serif; font-weight:700; font-size:13px; color: var(--ink-soft);
  flex-shrink:0; width:28px;
}
.ticket-row .t-text{ flex:1; min-width:0; }
.ticket-row .t-text .tt1{ font-size:13.5px; font-weight:600; font-family:"Poppins",sans-serif; margin-bottom:5px; line-height:1.35; }
.ticket-row .t-text .tt2{ display:flex; align-items:center; gap:8px; }
.ticket-row .t-text .tdate{ font-size:11px; color: var(--ink-soft); }
.ticket-row .t-chev{ flex-shrink:0; }
.ticket-row .t-chev svg{ width:16px; height:16px; stroke: var(--ink-soft); }
.ticket-status{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; }
.ticket-status.pending{ background:#FBF1DC; color: var(--gold); }
.ticket-status.resolved{ background: var(--teal-tint); color: var(--teal-dark); }
.ticket-status.closed{ background: var(--sand-deep); color: var(--ink-soft); }

.file-upload-shell{
  display:flex; align-items:center; gap:10px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  background: var(--sand);
}
.file-upload-shell svg{ width:17px; height:17px; stroke: var(--teal); flex-shrink:0; }
.file-upload-shell .fu-btn{
  font-size:12px; font-weight:700; color: var(--teal-dark);
  background: var(--white); border:1px solid var(--line);
  padding: 7px 12px; border-radius: 8px; flex-shrink:0;
}
.file-upload-shell .fu-name{ font-size:12.5px; color: var(--ink-soft); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-hint{ font-size:11px; color: var(--ink-soft); margin-top:7px; }

@media (min-width:481px){
  body{ background: var(--sand-deep); }
  .app{ box-shadow: 0 0 60px rgba(0,0,0,.12); }
}