/* =====================================================================
   Helpzi - new customer pages: OTP, Track, How it works, Photos, Reviews
   Uses the colour variables from style.css.
   ===================================================================== */

/* ---- header: Track link ---- */
.nav-track { font-size: 14px; font-weight: 800; color: var(--accent-dark); padding: 9px 16px; border: 1.5px solid #cfe0ff; border-radius: 999px; background: #f3f8ff; transition: background .2s, border-color .2s; }
.nav-track:hover { background: #e3eeff; border-color: #a9c8ff; }
@media (max-width: 900px) { .nav-track { display: none; } }

.hero-track { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.hero-track a { color: var(--accent-dark); font-weight: 800; }
.hero-track a:hover { text-decoration: underline; }

/* ---- How it works (3 steps) ---- */
.how-section { padding: 72px 0 64px; background: #fff; border-bottom: 1px solid var(--line); }
.how-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }
.how-head h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; }
.how-head p { margin: 0; color: var(--muted); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; counter-reset: none; }
.how-step { position: relative; text-align: center; padding: 30px 24px 26px; background: #f8fafd; border: 1px solid #e4ecf8; border-radius: 22px; transition: transform .25s ease, box-shadow .25s ease; }
.how-step:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(37, 99, 235, .10); }
.how-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -22px; width: 22px; border-top: 2px dashed #b9cff5; }
.how-num { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(37, 99, 235, .3); }
.how-icon { width: 58px; height: 58px; margin: 6px auto 16px; border-radius: 18px; background: #e8f0ff; color: var(--accent-dark); display: grid; place-items: center; }
.how-icon svg { width: 28px; height: 28px; }
.how-step h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.02em; }
.how-step p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.how-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 34px 0 0; }
@media (max-width: 800px) {
  .how-steps { grid-template-columns: 1fr; gap: 26px; }
  .how-step:not(:last-child)::after { display: none; }
}

/* ---- Real photo gallery ---- */
.gallery-section { background: #f7f9fc; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.gallery-item { margin: 0; position: relative; overflow: hidden; border-radius: 20px; background: #e9eef5; aspect-ratio: 4 / 3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; color: #fff; font-size: 13.5px; font-weight: 700; background: linear-gradient(180deg, transparent, rgba(10, 18, 30, .72)); }

/* ---- Reviews ---- */
.reviews-section { background: #fff; }
.reviews-avg { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.review-card { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(20, 30, 45, .05); display: flex; flex-direction: column; gap: 12px; }
.review-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #2a3440; flex: 1; }
.review-card footer { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.review-card footer strong { color: var(--ink); font-size: 14px; }
.stars { color: #f5a623; letter-spacing: 2px; font-size: 17px; }
.stars .off { color: #d8dde5; }

/* ---- Shared page shell for OTP / Track ---- */
.ap-body { background: radial-gradient(circle at top, #eff6ff, #f7f8fa 45%); min-height: 100vh; }
.ap-main { padding: 118px 20px 70px; display: grid; place-items: start center; }
.ap-card { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); padding: 38px; }
.ap-narrow { max-width: 480px; text-align: center; }
.ap-wide { max-width: 860px; }
.ap-card h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.03em; line-height: 1.1; }
.ap-lead { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.ap-lead strong { color: var(--ink); }
.ap-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; background: #e8f0ff; color: var(--accent-dark); display: grid; place-items: center; }
.ap-icon svg { width: 30px; height: 30px; }
.ap-fine { margin: 20px 0 0; font-size: 12.5px; color: #8a939e; }
.ap-fine a { color: var(--accent-dark); font-weight: 700; }
.ap-muted { color: var(--muted); font-size: 14px; }
.ap-full { width: 100%; }
.ap-eyebrow { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 900; color: #7a8390; }

.ap-progress { list-style: none; display: flex; justify-content: center; gap: 18px; margin: 0 0 26px; padding: 0; font-size: 12.5px; font-weight: 800; color: #9aa3ae; }
.ap-progress li { display: flex; align-items: center; gap: 7px; }
.ap-progress li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #eceff3; color: #7c8591; font-size: 11px; }
.ap-progress li.done { color: #3f8648; } .ap-progress li.done span { background: #e3f3e1; color: #3f8648; }
.ap-progress li.now { color: var(--accent-dark); } .ap-progress li.now span { background: var(--accent); color: #fff; }

.ap-alert { padding: 12px 16px; border-radius: 14px; margin: 0 0 18px; font-size: 13.5px; font-weight: 700; text-align: left; }
.ap-alert-ok { background: #eaf7ec; color: #25673a; border: 1px solid #c9ebd0; }
.ap-alert-err { background: #fff0f0; color: #9c3232; border: 1px solid #ffd5d5; }
.ap-alert a { text-decoration: underline; }
.ap-dev { background: #fff8e1; border: 1px dashed #f0c14b; color: #6b5200; border-radius: 14px; padding: 12px 16px; font-size: 13px; margin: 0 0 18px; text-align: left; }
.ap-dev code { background: #fff; padding: 2px 8px; border-radius: 8px; font-size: 16px; font-weight: 900; letter-spacing: .15em; }

.ap-label { display: block; text-align: left; margin: 0 0 7px; font-size: 13px; font-weight: 800; }
.ap-card input[type=text], .ap-card input[type=tel], .ap-card textarea { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; border: 1.5px solid #d9dde4; border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.ap-card input:focus, .ap-card textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.ap-otp { text-align: center; font-size: 30px !important; font-weight: 900; letter-spacing: .5em; padding-left: .5em !important; margin-bottom: 16px; }
.ap-otp::placeholder { letter-spacing: .3em; color: #c3c9d2; }
.ap-form { text-align: left; display: grid; gap: 16px; }
.ap-field { display: block; }
.ap-phone { position: relative; }
.ap-phone span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 800; }
.ap-phone input { padding-left: 52px !important; }

.ap-resend { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; }
.ap-resend form { margin: 0; }
.ap-link { background: none; border: 0; padding: 4px; font-size: 14px; font-weight: 800; color: var(--accent-dark); cursor: pointer; }
.ap-link:hover:not(:disabled) { text-decoration: underline; }
.ap-link:disabled { color: #9aa3ae; cursor: default; }
.ap-sep { color: #c3c9d2; }

/* ---- Track status ---- */
.ap-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.ap-head h1 { margin: 0; }
.ap-status { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 900; background: #dbeafe; color: #1e40af; white-space: nowrap; }
.ap-status-confirmed { background: #e0f2fe; color: #075985; }
.ap-status-helper-assigned { background: #ede9fe; color: #5b21b6; }
.ap-status-completed { background: #dcfce7; color: #166534; }
.ap-status-cancelled { background: #fee2e2; color: #991b1b; }

.ap-track { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 26px 0 30px; padding: 0; position: relative; }
.ap-track li { position: relative; text-align: center; font-size: 12.5px; font-weight: 800; color: #9aa3ae; }
.ap-track li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 3px; background: #e5e9ef; z-index: 0; }
.ap-track li.done:not(:last-child)::after { background: var(--accent); }
.ap-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 8px; border-radius: 50%; background: #eceff3; color: #7c8591; font-size: 13px; font-weight: 900; border: 3px solid #fff; }
.ap-track li.done .ap-dot { background: var(--accent); color: #fff; }
.ap-track li.now .ap-dot { background: #fff; color: var(--accent-dark); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(37, 99, 235, .15); }
.ap-track li.now, .ap-track li.done { color: var(--ink); }
.ap-track-label { display: block; padding: 0 4px; }

.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.ap-box { background: #f8fafd; border: 1px solid #e4ecf8; border-radius: 20px; padding: 22px; }
.ap-box h2 { margin: 0 0 14px; font-size: 16px; letter-spacing: -.01em; }
.ap-dl { margin: 0; display: grid; gap: 12px; }
.ap-dl div { display: grid; grid-template-columns: 82px 1fr; gap: 10px; font-size: 14px; }
.ap-dl dt { color: var(--muted); } .ap-dl dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ap-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid #d6e2f6; display: grid; gap: 16px; }
.ap-timeline li { position: relative; font-size: 14px; }
.ap-timeline li::before { content: ""; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; }
.ap-timeline p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.ap-when { display: block; font-size: 12px; color: #8a939e; }
.ap-review-box { margin-bottom: 18px; }
.ap-review-box textarea { margin: 10px 0 12px; resize: vertical; }
.ap-stars-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.ap-stars-input input { position: absolute; opacity: 0; pointer-events: none; }
.ap-stars-input label { font-size: 34px; line-height: 1; color: #d1d6de; cursor: pointer; transition: color .12s, transform .12s; }
.ap-stars-input label:hover, .ap-stars-input label:hover ~ label, .ap-stars-input input:checked ~ label { color: #f5a623; }
.ap-stars-input label:hover { transform: scale(1.12); }
.ap-stars-input input:focus-visible + label { outline: 3px solid var(--accent); border-radius: 6px; }
.ap-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ap-wrap-actions { flex-wrap: wrap; }

@media (max-width: 700px) {
  .ap-main { padding: 100px 14px 50px; }
  .ap-card { padding: 26px 20px; border-radius: 22px; }
  .ap-grid { grid-template-columns: 1fr; }
  .ap-track-label { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .how-step, .gallery-item img, .ap-stars-input label { transition: none; } }