/* :root variables now come from common.css (always linked before this file) */

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


body{

    background:#12261a;

    display:flex;
    align-items:center;
    justify-content:center;

    min-height:100vh;
    min-height:100dvh;

    padding:0;

}


/* PHONE FRAME */

#phone{
    width:100%;
    max-width:480px;
    min-height:100vh;
    min-height:100dvh;
    margin:0 auto;
    background:#faf9f3;
    position:relative;
    font-family:Arial, Helvetica, sans-serif;
    color:#173b28;
    overflow-x:hidden;
    overflow-y:auto;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
}




.screen{

    position:absolute;

    inset:0;

    display:none;

    flex-direction:column;

    overflow-y:auto;

}



.screen.active{

    display:flex;

}



/* ================= */
/* WELCOME */
/* ================= */

#screen-welcome{
    background-image:
        linear-gradient(
            rgba(15,36,23,.25),
            rgba(15,36,23,.65)
        ),
        url("../image/bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#screen-welcome .hero{
    height:56%;

    background:transparent;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;

    padding:30px 26px;

    color:white;
    text-align:center;
}




.badge-ring{


    width:100px;

    height:100px;


    border-radius:50%;


    border:2px solid rgba(255,255,255,.5);


    display:flex;

    align-items:center;

    justify-content:center;


    background:white;

    overflow:hidden;


    margin-bottom:14px;

}




.badge-ring img{


    width:100%;

    height:100%;

    object-fit:cover;


}



#screen-welcome h1{


    color:white;

    font-size:30px;

    letter-spacing:1px;

}



#screen-welcome p{


    color:white;

    opacity:.85;

    margin-top:8px;

    font-size:12.5px;

}




/* ================= */
/* BODY */
/* ================= */


.welcome-body,
.login-body{
    flex:1;
    background:transparent;


    padding:26px;


    display:flex;

    flex-direction:column;


    justify-content:center;


    gap:14px;


    text-align:center;


}

/* ==============================
   HIKER TESTIMONY LINK
================================ */

.hiker-proof{

    margin-top:22px;

    padding:12px 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    background:rgba(255,255,255,0.10);

    border:1px solid rgba(255,255,255,0.18);

    border-radius:14px;

    backdrop-filter:blur(6px);

    -webkit-backdrop-filter:blur(6px);

}


.hiker-proof-stars{

    color:#f1c75b;

    font-size:13px;

    letter-spacing:1px;

    white-space:nowrap;

}


.hiker-proof-text{

    display:flex;

    flex-direction:column;

    text-align:left;

    gap:2px;

}


.hiker-proof-text span{

    color:white;

    font-size:11px;

    font-weight:600;

    opacity:0.85;

}


.hiker-proof-text a{

    color:white;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

}


.hiker-proof-text a:hover{

    text-decoration:underline;

}




.welcome-body h3{

    font-size:19px;
    color:white;
    text-shadow:0 2px 6px rgba(0,0,0,0.5);

}


/* BUTTON */


.btn{


    width:100%;

    padding:14px;


    border-radius:10px;


    border:none;


    font-weight:700;


    font-size:13.5px;


    cursor:pointer;

}




.btn-primary{


    background:var(--forest-700);

    color:white;


}



.btn-primary:hover{


    background:var(--forest-600);


}



.btn-outline{


    background:white;

    color:var(--forest-700);


    border:1.5px solid var(--forest-700);


}




/* ================= */
/* LOGIN REGISTER */
/* ================= */


#screen-login .hero,
#screen-register .hero{


    height:42%;


    background:
    linear-gradient(
    165deg,
    var(--forest-950),
    var(--forest-700)
    );


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    color:white;

    text-align:center;

}




#screen-login h1,
#screen-register h1{


    color:white;

    font-size:24px;

}



.tag{


    margin-top:8px;

    background:rgba(255,255,255,.15);

    padding:5px 12px;

    border-radius:20px;

    font-size:10px;

    letter-spacing:1px;

}



.sub{


    margin-top:8px;

    color:rgba(255,255,255,.7);

    font-size:12px;

}



/* FORM */


.field{


    margin-bottom:14px;

    text-align:left;

}



.field label{


    display:block;

    font-size:11.5px;

    font-weight:700;

    color:var(--ink-soft);

    margin-bottom:5px;

}




.field input{


    width:100%;


    padding:12px 14px;


    border-radius:10px;


    border:1.3px solid var(--line);


    font-size:13.5px;


    background:white;


}



.field input:focus{


    outline:none;

    border-color:var(--forest-600);


}



.muted-link{


    text-align:center;

    color:var(--forest-700);

    font-size:12px;

    text-decoration:underline;

    cursor:pointer;


}
/* ========================= */
/* USER HOME PAGE */
/* ========================= */


.user-page{

    height:100%;

    overflow-y:auto;

    background:var(--sand-50);

    padding:20px;

    padding-bottom:90px;

}



/* HEADER */

.home-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}


.home-header h2{

    font-size:17px;

    color:var(--ink);

}



.notification{

    width:38px;

    height:38px;

    border-radius:50%;

    border:1px solid var(--line);

    background:white;

    cursor:pointer;
}
    
/* =====================
 NOTIFICATIONS
===================== */

#notifList{
    padding:16px;
}


.notif-item{

    display:flex;
    gap:14px;

    background: white;

    border-radius:16px;

    padding:16px;

    margin-bottom:12px;

    border:1px solid var(--line);

    box-shadow:0 5px 15px rgba(0,0,0,.06);

}


.notif-item.unread{

    background:#f1f8f2;

}


.notif-item .ic{

    width:40px;
    height:40px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#e5f0e7;

    color:var(--forest-700);

}


.notif-item div{

    display:flex;

    flex-direction:column;

    gap:5px;

}


.notif-item b{

    font-size:14px;

    font-weight:800;

}


.notif-item div span{

    font-size:13px;

    line-height:1.4;

    color:var(--ink-soft);

}

/* =========================
   NOTIFICATION
========================= */

.home-header{
    position:relative;
}


/* Notification button */

.notification{
    position:relative;
    cursor:pointer;
}


/* Small notification dot */

.notification-dot{
    position:absolute;

    top:4px;
    right:4px;

    width:8px;
    height:8px;

    background:#e53935;

    border:2px solid white;

    border-radius:50%;
}


/* Notification panel */

.notification-panel{

    display:none;

    position:absolute;

    top:70px;
    right:15px;

    width:320px;

    background:white;

    border-radius:16px;

    padding:16px;

    box-shadow:0 8px 25px rgba(0,0,0,.18);

    z-index:1000;
}


/* Open state */

.notification-panel.show{
    display:block;
}


/* Header */

.notification-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;
}


.notification-header h3{

    margin:0;

    color:#12261a;

    font-size:18px;
}


/* Close button */

.close-notification{

    width:28px;

    height:28px;

    border:none;

    background:#f1f3f1;

    color:#333;

    border-radius:50%;

    font-size:20px;

    line-height:1;

    cursor:pointer;
}


/* Notification item */

.notification-item{

    display:flex;

    gap:12px;

    padding:12px 0;

    border-bottom:1px solid #eeeeee;
}


.notification-item:last-child{

    border-bottom:none;
}


/* Notification icon */

.notification-icon{

    width:36px;

    height:36px;

    flex-shrink:0;

    border-radius:50%;

    background:#e8f3ea;

    color:#23752c;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;
}


/* Text */

.notification-item strong{

    display:block;

    color:#12261a;

    font-size:14px;

    margin-bottom:4px;
}


.notification-item p{

    margin:0;

    color:#777;

    font-size:12px;

    line-height:1.4;
}

.notification{
    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    cursor:pointer;
}

/* =========================
   NOTIFICATION ALERT DOT
========================= */

.notification{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    cursor:pointer;
}


.notification-dot{

    position:absolute;

    top:2px;
    right:2px;

    width:9px;
    height:9px;

    background:#e53935;

    border:2px solid white;

    border-radius:50%;

    display:none;

    z-index:5;
}


/* Show when there is unread notification */

.notification-dot.show{
    display:block;
}

/* SECTION TITLE */


.section-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

    margin-top:15px;

}


.section-head h4{

    font-size:12px;

    color:var(--forest-700);

    letter-spacing:.5px;

}



.section-head a{

    font-size:11px;

    color:var(--forest-700);

    font-weight:700;

}


/* TRAIL HORIZONTAL */


.trail-scroll{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding-bottom:8px;

}


.trail-scroll::-webkit-scrollbar{

    height:5px;

}

.trail-scroll::-webkit-scrollbar-thumb{

    background:#999;

    border-radius:10px;

}


.trail-card{

    min-width:200px;

    background:white;

    border-radius:14px;

    overflow:hidden;

    border:1px solid var(--line);

}


.trail-image{

    height:110px;

    background:

    linear-gradient(
    135deg,
    #356c45,
    #1f4d2e
    );

    position:relative;

}

.trail-image span{

    position:absolute;

    right:10px;

    top:10px;


    background:white;

    padding:4px 10px;

    border-radius:20px;


    font-size:10px;

    font-weight:700;

}

.trail-info{

    padding:12px;

}

.trail-info h3{

    font-size:13px;

    line-height:1.3;

    color:var(--ink);

}

.trail-info p{

    font-size:11px;

    margin-top:5px;

}

/* SERVICES */


.section-title{

    margin-top:18px;

    margin-bottom:10px;

    font-size:12px;

    font-weight:700;

    color:var(--forest-700);

}




.service-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}



.service-grid button{


    background:white;

    border:1.5px solid var(--forest-700);

    color:var(--forest-700);

    border-radius:10px;

    padding:13px 8px;

    font-size:12px;

    font-weight:700;

}




/* SOS */


.sos-box{

    margin-top:15px;

    padding:14px;

    background:#fdecec;

    border:1px solid #f2cccc;

    border-radius:12px;

    position:relative;

}



.sos-box h3{

    font-size:13px;

    color:#a3372f;

}



.sos-box p{

    font-size:11px;

    color:#a3372f;

    margin-top:5px;

}



.sos-box span{

    position:absolute;

    right:15px;

    top:28px;

    color:#a3372f;

}



/* BOTTOM NAV */


.bottom-nav{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:70px;

    background:white;

    border-top:1px solid var(--line);

    display:flex;

    justify-content:space-around;

    align-items:center;

}



.bottom-nav a{

    text-align:center;

    text-decoration:none;

    color:var(--ink-soft);

    font-size:11px;

    font-weight:600;

}



.bottom-nav a.active{

    color:var(--forest-700);

}

/* ==========================
   POSITION FIX ONLY
   DO NOT CHANGE SHAPE
========================== */


/* Center phone on screen */
body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}



/* Move content down slightly (removed for full-bleed mobile layout) */
#phone{

    margin-top:0;

}



/* Home content spacing */
#homeScreen{

    padding-top:15px;

}


/* Header position */
.topbar{

    margin-top:15px;
    padding-left:15px;
    padding-right:15px;

}



/* Main content */
.content{

    padding-top:10px;
    padding-left:15px;
    padding-right:15px;

}



/* Section spacing */
.row-between{

    margin-top:18px;

}



/* Carousel don't touch size */
.carousel{

    margin-top:10px;

}



/* Services spacing */
.section-title{

    margin-top:18px;

}



/* Bottom nav stay bottom */
.bottomnav{

    position:absolute;
    bottom:0;
    left:0;
    right:0;

}
/* =========================
   TRAIL DETAILS PAGE
   ========================= */

.detail-hero {
  position: relative;
  height: 210px;
  width: 100%;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.05),
      rgba(0,0,0,0.65)
    ),
    url("../assets/nuang.jpg") center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-overlay {
  width: 100%;
  padding: 20px 16px;
  box-sizing: border-box;
}

.detail-hero h1 {
  margin: 0;
  color: #fff;
  font-size: 25px;
  line-height: 1.15;
  font-weight: 800;
}

/* Back button */

.trail-topbar {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
}

.trail-topbar .back {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.trail-topbar .back svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #183b2d;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Content */

.detail-hero + .content {
  padding-top: 16px;
}


/* Weather */

.weather-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 11px;
  margin: 10px 0;
}


/* Verification banner */

#dataVerifyBanner {
  display: flex !important;
  align-items: center;
  gap: 6px;
}


/* Reports */

.report-card,
.review-card,
.buddy-card {
  margin-bottom: 9px;
  padding: 11px 12px;
  border-radius: 9px;
  background: #f4f6f3;
}

.report-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.report-card .top span {
  font-size: 10px;
  color: var(--ink-soft);
}


/* Bottom navigation */

.bottomnav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 62px;

  background: #ffffff;
  border-top: 1px solid #e5e8e5;

  display: flex !important;
  align-items: center;
  justify-content: space-around;

  z-index: 20;

  box-sizing: border-box;
}

.bottomnav a {
  flex: 1;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 3px;

  color: #65736a !important;
  text-decoration: none !important;

  font-size: 10px;
  font-weight: 600;
}

.bottomnav a.active {
  color: var(--forest-700) !important;
}

.bottomnav svg {
  width: 19px;
  height: 19px;
}


/* Price box */

.price-box {
  position: sticky;
  bottom: 62px;
  z-index: 10;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px 0;
  background: #fdfcf9;
}

.price-box .amt {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.price-box button {
  border-radius: 8px;
  font-weight: 700;
}

/* NOTE: "mountains.html (explore)" and "trail.html (trail details)" style
   blocks used to live here as a leftover copy — those pages now have their
   own css/mountain.css and css/trail.css, and this file isn't linked by
   either page, so the duplicate (including a `var(--radius)` typo that
   never resolved) has been removed. See css/mountain.css / css/trail.css. */

/* booking.html (calendar + hikers + package + payment + permit) */
.cal-head{display:flex;justify-content:space-between;align-items:center;margin:14px 0 10px;font-weight:700;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:12px;}
.cal-grid .dow{color:var(--ink-soft);font-weight:700;font-size:10.5px;padding-bottom:4px;}
.cal-grid .day{padding:8px 0;border-radius:8px;cursor:pointer;color:var(--ink);}
.cal-grid .day.sel{background:var(--forest-700);color:#fff;font-weight:700;}
.cal-grid .day.closed{color:#c7c2b3;cursor:not-allowed;}
.cal-grid .day.blocked{color:#e0b2ae;cursor:not-allowed;text-decoration:line-through;}
.cal-legend{display:flex;gap:14px;font-size:10px;color:var(--ink-soft);margin-top:8px;flex-wrap:wrap;}
.cal-legend span{display:flex;align-items:center;gap:4px;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.stepper{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;margin:10px 0;}
.stepper button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--sand-100);font-size:16px;cursor:pointer;}
.pkg-card{border:1.5px solid var(--forest-700);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;
  align-items:center;margin:10px 0;background:#fff;}
.total-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line);margin-top:10px;}
.pay-option{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:10px;cursor:pointer;}
.pay-option.sel{border-color:var(--forest-700);background:#eaf1ec;}
.pay-option .ic{font-size:18px;}
.pay-option b{font-size:13px;display:block;}
.pay-option span{font-size:11px;color:var(--ink-soft);}
.participant-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;}
.waiver-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:14px 0;}
.waiver-box .txt{max-height:110px;overflow-y:auto;font-size:11.5px;color:var(--ink-soft);line-height:1.6;
  background:var(--sand-100);border-radius:8px;padding:10px;margin-bottom:10px;}
.step-dots{display:flex;gap:6px;justify-content:center;margin:10px 0 4px;}
.step-dots span{width:8px;height:8px;border-radius:50%;background:var(--line);}
.step-dots span.on{background:var(--forest-700);}

/* refund & replacement policy card (booking.html permit details step) */
.refund-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0;}
.refund-card h3{display:flex;align-items:center;gap:7px;font-size:13.5px;margin-bottom:12px;}
.refund-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);font-size:12.5px;color:var(--ink-soft);}
.refund-row:last-of-type{border-bottom:none;}
.refund-row .pct{font-weight:800;font-size:12.5px;}
.refund-row .pct.ok{color:var(--ok);}
.refund-row .pct.warn{color:var(--gold);}
.refund-row .pct.danger{color:var(--warn-ink);}
.refund-note{font-size:11px;color:var(--ink-soft);margin-top:10px;line-height:1.6;}
.refund-note b{color:var(--ink);}
/* navigation.html (verify + active session + certificate) */
.avatar-ring{width:70px;height:70px;border-radius:50%;background:var(--sand-100);display:flex;align-items:center;
  justify-content:center;font-size:26px;margin:10px auto 16px;}
.session-bar{background:var(--forest-800);color:#fff;padding:16px 18px 20px;border-radius:0 0 20px 20px;}
.session-bar .tag{font-size:10px;background:rgba(255,255,255,.15);padding:3px 9px;border-radius:12px;}
.session-bar h2{font-size:17px;margin-top:8px;color:#fff;}
.live-dot{width:7px;height:7px;background:#4ade80;border-radius:50%;display:inline-block;margin-right:5px;}
.map-placeholder{height:150px;margin:14px 18px 0;border-radius:12px;
  background:repeating-linear-gradient(45deg,#c9d6c3,#c9d6c3 10px,#b9c9b1 10px,#b9c9b1 20px);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:11px;border:1px solid var(--line);}
.ping-note{margin:8px 18px 0;font-size:10.5px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;}
.metric-strip{display:flex;justify-content:space-between;background:#fff;margin:14px 18px 0;border-radius:12px;
  border:1px solid var(--line);padding:12px 0;}
.metric{flex:1;text-align:center;border-right:1px solid var(--line);}
.metric:last-child{border-right:none;}
.metric .val{font-weight:800;font-size:15px;}
.metric .lbl{font-size:9.5px;color:var(--ink-soft);}
.progress-list{margin:16px 18px;}
.prog-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-left:2px solid var(--line);padding-left:14px;margin-left:6px;position:relative;cursor:pointer;}
.prog-item::before{content:'';position:absolute;left:-7px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--line);}
.prog-item.done::before{background:var(--ok);}
.prog-item.current::before{background:var(--forest-700);box-shadow:0 0 0 4px rgba(31,77,46,.2);}
.prog-item b{font-size:13px;display:block;}
.prog-item span{font-size:11px;color:var(--ink-soft);}
.success-circle{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;font-size:30px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.cert-card{background:linear-gradient(160deg,var(--forest-800),var(--forest-700));color:#fff;border-radius:16px;
  padding:26px 22px;text-align:center;margin-top:10px;position:relative;overflow:hidden;}
.cert-card .ring{width:70px;height:70px;border-radius:50%;background:#fff;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--forest-700);}
.cert-card h2{color:#fff;font-size:18px;margin-bottom:2px;}
.cert-card .sub{color:rgba(255,255,255,.75);font-size:11.5px;margin-bottom:16px;}
.cert-stats{display:flex;justify-content:space-around;margin:14px 0;}
.cert-stats div{text-align:center;}
.cert-stats b{display:block;font-size:16px;}
.cert-stats span{font-size:9.5px;color:rgba(255,255,255,.7);}
.cert-badge{background:rgba(255,255,255,.12);border-radius:10px;padding:8px;font-size:11px;margin-top:12px;}
.check-btn{background:var(--forest-700);color:#fff;border-radius:12px;padding:18px;text-align:center;margin:16px 0;cursor:pointer;border:none;width:100%;}
.check-btn .circle{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;
  justify-content:center;margin:0 auto 8px;font-size:18px;}

/* checkpoint check-in control (navigation.html active session) */
.checkin-btn{background:var(--forest-700);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:11.5px;
  font-weight:700;cursor:pointer;margin-top:8px;}
.checkin-btn:active{background:var(--forest-600);}
.checkin-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--forest-800);color:#fff;
  padding:10px 18px;border-radius:30px;font-size:12px;box-shadow:0 8px 20px rgba(0,0,0,.35);opacity:0;
  transition:opacity .25s ease;pointer-events:none;z-index:200;text-align:center;}
.checkin-toast.show{opacity:1;}
.checkin-toast b{display:block;font-size:12.5px;}
.checkin-toast span{font-size:10.5px;opacity:.85;}

.cp-code-box{margin-top:10px;cursor:default;}
.cp-code-box .cp-code-label{font-size:10.5px;font-weight:700;color:var(--ink-soft);display:block;margin-bottom:5px;}
.cp-code-row{display:flex;gap:8px;}
.cp-code-row input{flex:1;min-width:0;padding:10px 12px;border-radius:8px;border:1.3px solid var(--line);
  font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-align:center;background:#fff;}
.cp-code-row input:focus{outline:none;border-color:var(--forest-600);}
.cp-code-row .checkin-btn{margin-top:0;flex-shrink:0;}
.cp-code-hint{font-size:10px;color:var(--ink-soft);margin-top:5px;}
.cp-code-error{font-size:10.5px;color:var(--danger);margin-top:5px;display:none;}
.cp-code-error.show{display:block;}

/* profile.html (profile + personal info + settings, tabbed) */
.profile-head{background:var(--forest-800);padding:26px 18px;text-align:center;color:#fff;border-radius:0 0 24px 24px;position:relative;}
.ph-avatar{width:76px;height:76px;border-radius:50%;background:var(--forest-600);display:flex;align-items:center;
  justify-content:center;font-size:26px;margin:0 auto 10px;border:3px solid rgba(255,255,255,.3);color:#fff;}
.stat-row{display:flex;justify-content:space-around;margin:16px 18px;}
.stat-pill{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 4px;flex:1;margin:0 5px;text-align:center;}
.stat-pill b{display:block;font-size:16px;}
.stat-pill span{font-size:9.5px;color:var(--ink-soft);}
.hike-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;}
.hike-card .status{font-size:10px;background:#eaf1ec;color:var(--ok);padding:2px 9px;border-radius:10px;font-weight:700;}
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);
  font-size:13px;cursor:pointer;}
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px;}
.badge-item{text-align:center;font-size:9.5px;color:var(--ink-soft);}
.badge-item .ic{width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 4px;}
.badge-item.locked .ic{opacity:.35;}
.badge-item.earned .ic{background:linear-gradient(160deg,#e9d29a,var(--gold));border-color:var(--gold);}
.pi-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;margin-bottom:10px;}
.pi-row .l{display:flex;align-items:center;gap:10px;flex:1;}
.pi-row .l div{flex:1;}
.pi-row .l div b{display:block;font-size:12.5px;}
.pi-row .l div input{border:none;background:transparent;font-size:12.5px;color:var(--ink-soft);padding:0;width:100%;}
.pi-tabs{display:flex;gap:8px;margin:14px 0;}
.pi-tab{flex:1;text-align:center;padding:9px;border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);}
.pi-tab.active{background:var(--forest-700);color:#fff;border-color:var(--forest-700);}
.sos-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0;}
.sos-card h3{display:flex;align-items:center;gap:7px;font-size:13.5px;margin-bottom:6px;}
.sos-card p{font-size:11.5px;color:var(--ink-soft);margin-bottom:14px;}


/* =========================
   SELANGORHIKES PROMO SLIDER
========================= */

.promo-slider{
    position:relative;
    width:100%;
    height:150px;
    margin:4px 0 20px;
    overflow:hidden;
    border-radius:16px;
    background:#173a24;
}

.promo-track{
    display:flex;
    width:100%;
    height:100%;
    transition:transform 0.3s ease-in-out;
}

.promo-slide{
    position:relative;
    min-width:100%;
    width:100%;
    height:150px;
    flex-shrink:0;
    overflow:hidden;
    text-decoration:none;
    color:white;
}

.promo-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.promo-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.70),
        rgba(0,0,0,.25),
        rgba(0,0,0,.05)
    );
}

.promo-overlay{
    position:absolute;
    z-index:2;
    left:16px;
    right:20px;
    bottom:25px;
}

.promo-overlay small{
    display:block;
    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
    color:white;
    margin-bottom:5px;
}

.promo-overlay h3{
    color:white;
    font-size:17px;
    line-height:1.15;
    margin:0 0 7px;
}

.promo-overlay span{
    font-size:10.5px;
    font-weight:700;
    color:white;
}

.promo-dots{
    position:absolute;
    bottom:9px;
    left:0;
    width:100%;
    display:flex;
    justify-content:center;
    gap:5px;
    z-index:5;
}

.promo-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    transition:all .3s ease;
}

.promo-dot.active{
    width:18px;
    border-radius:10px;
    background:white;
}.sos-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 100%;
    box-sizing: border-box;

    padding: 14px 16px;
    margin-top: 14px;
    margin-bottom: 16px;

    background: #fff0f0;
    border: 1px solid #ef4444;
    border-radius: 14px;

    color: #b91c1c;
    text-decoration: none;
}

.sos-box h3 {
    margin: 0 0 4px;
    color: #b91c1c;
    font-size: 15px;
    font-weight: 700;
}

.sos-box p {
    margin: 0;
    color: #c24141;
    font-size: 12px;
    line-height: 1.4;
}

.sos-box > span {
    flex-shrink: 0;
    color: #b91c1c;
    font-size: 22px;
    font-weight: 700;
}