/* ═══════════════════════════════════════════════
   NURIM DERMATECH — pages.css
   Extra styles for eCommerce pages
   Link AFTER style.css and internal.css
═══════════════════════════════════════════════ */

/* ── PRODUCT DETAIL ── */
.product-gallery-main {
  border-radius: var(--radius-lg);
  background: var(--kaya-cream);
  height: 400px;
  display: flex; align-items: center; justify-content: center;
  font-size: 7rem; color: var(--kaya-primary);
  border: 1px solid var(--kaya-border);
  position: relative; overflow: hidden;
}
.product-thumb-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.product-thumb {
  width: 74px; height: 74px;
  border-radius: 10px;
  background: var(--kaya-cream);
  border: 2px solid var(--kaya-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--kaya-primary);
  cursor: pointer; transition: var(--transition);
}
.product-thumb.active, .product-thumb:hover { border-color: var(--kaya-primary); background:#fff; }
.pd-price { font-size: 2.2rem; font-weight: 700; color: var(--kaya-primary); }
.pd-old   { font-size: 1.1rem; color: var(--kaya-muted); text-decoration: line-through; margin-left:8px; }
.pd-save  { background:#e8f4ea; color:#27ae60; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; margin-left:8px; }
.qty-wrap { display:flex; align-items:center; border:1.5px solid var(--kaya-border); border-radius:10px; overflow:hidden; width:fit-content; }
.qty-btn  { width:42px; height:44px; background:var(--kaya-cream); border:none; font-size:1.3rem; cursor:pointer; color:var(--kaya-dark); transition:var(--transition); }
.qty-btn:hover { background:var(--kaya-primary); color:#fff; }
.qty-inp  { width:56px; height:44px; text-align:center; border:none; border-left:1px solid var(--kaya-border); border-right:1px solid var(--kaya-border); font-size:15px; font-weight:700; outline:none; }
.pd-badge { display:inline-block; padding:4px 14px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.pd-badge-bs { background:var(--kaya-primary); color:#fff; }
.pd-badge-new{ background:#3d8b5e; color:#fff; }
.pd-badge-of { background:#b8860b; color:#fff; }

/* Review stars */
.star-row { color: var(--kaya-gold); font-size:1rem; display:flex; gap:2px; }
.review-card { background:#fff; border:1px solid var(--kaya-border); border-radius:var(--radius); padding:18px; margin-bottom:14px; }
.review-card .star-row { font-size:.85rem; margin-bottom:6px; }
.review-card p { font-size:14px; color:var(--kaya-muted); margin-bottom:8px; }
.review-meta { font-size:12px; color:var(--kaya-muted); }
.review-meta strong { color:var(--kaya-dark); }

/* Rating bar */
.rating-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.rating-bar-row span { font-size:13px; color:var(--kaya-muted); width:28px; flex-shrink:0; }
.rating-bar { flex:1; height:8px; background:var(--kaya-border); border-radius:4px; overflow:hidden; }
.rating-fill { height:100%; border-radius:4px; background:var(--kaya-gold); }
.rating-bar-row small { font-size:12px; color:var(--kaya-muted); width:28px; }

/* ── CART ── */
.cart-table th { font-size:13px; font-weight:600; color:var(--kaya-muted); padding:12px 16px; background:var(--kaya-cream); border-bottom:1px solid var(--kaya-border); }
.cart-table td { padding:14px 16px; border-bottom:1px solid var(--kaya-border); vertical-align:middle; }
.cart-table tr:last-child td { border-bottom:none; }
.cart-prod-img { width:70px; height:70px; border-radius:10px; background:var(--kaya-cream); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--kaya-primary); flex-shrink:0; }
.cart-prod-name { font-size:15px; font-weight:600; color:var(--kaya-dark); margin-bottom:3px; }
.cart-prod-meta { font-size:12px; color:var(--kaya-muted); }
.cart-remove { background:none; border:none; color:var(--kaya-muted); cursor:pointer; font-size:1rem; transition:var(--transition); padding:4px; }
.cart-remove:hover { color:#e74c3c; }
.order-summary-box { background:#fff; border:1px solid var(--kaya-border); border-radius:var(--radius); padding:24px; }
.order-summary-box h5 { font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--kaya-border); }
.summary-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; }
.summary-row.total { font-weight:700; font-size:1rem; padding-top:12px; border-top:2px solid var(--kaya-border); margin-top:4px; }
.summary-row.total span:last-child { color:var(--kaya-primary); }
.coupon-row { display:flex; gap:8px; margin:14px 0; }
.coupon-row input { flex:1; border:1.5px solid var(--kaya-border); border-radius:8px; padding:10px 14px; font-size:14px; outline:none; transition:var(--transition); }
.coupon-row input:focus { border-color:var(--kaya-primary); }

/* ── CHECKOUT STEPS ── */
.checkout-stepper { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:36px; }
.cs-step { display:flex; align-items:center; flex-direction:column; gap:6px; flex:1; text-align:center; position:relative; }
.cs-circle { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; border:2px solid var(--kaya-border); background:#fff; color:var(--kaya-muted); z-index:1; transition:var(--transition); }
.cs-step.active .cs-circle  { border-color:var(--kaya-primary); background:var(--kaya-primary); color:#fff; }
.cs-step.done .cs-circle    { border-color:var(--kaya-primary); background:var(--kaya-cream); color:var(--kaya-primary); }
.cs-label { font-size:12px; font-weight:600; color:var(--kaya-muted); }
.cs-step.active .cs-label   { color:var(--kaya-primary); }
.cs-step.done .cs-label     { color:var(--kaya-primary); }
.cs-line { flex:1; height:2px; background:var(--kaya-border); margin:0 -1px; margin-top:-28px; z-index:0; }
.cs-line.done { background:var(--kaya-primary); }
.checkout-form-card { background:#fff; border:1px solid var(--kaya-border); border-radius:var(--radius-lg); padding:30px; }
.checkout-form-card h5 { font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin-bottom:22px; }
.checkout-form-card .form-label { font-size:13px; font-weight:600; color:var(--kaya-dark); margin-bottom:6px; }
.checkout-form-card .form-control,
.checkout-form-card .form-select { border:1.5px solid var(--kaya-border); border-radius:8px; padding:11px 14px; font-size:14px; transition:var(--transition); }
.checkout-form-card .form-control:focus,
.checkout-form-card .form-select:focus { border-color:var(--kaya-primary); box-shadow:0 0 0 3px rgba(181,85,27,.1); }

/* Payment method selector */
.pay-method { display:flex; flex-direction:column; gap:10px; }
.pay-option { border:1.5px solid var(--kaya-border); border-radius:10px; padding:14px 16px; cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:14px; }
.pay-option:hover { border-color:var(--kaya-primary); background:var(--kaya-cream); }
.pay-option.selected { border-color:var(--kaya-primary); background:var(--kaya-cream); }
.pay-option input[type=radio] { accent-color:var(--kaya-primary); width:18px; height:18px; flex-shrink:0; }
.pay-icon { width:40px; height:28px; border-radius:4px; border:1px solid var(--kaya-border); display:flex; align-items:center; justify-content:center; font-size:.8rem; background:#fff; flex-shrink:0; font-weight:700; color:var(--kaya-muted); font-size:10px; }
.pay-label strong { font-size:14px; font-weight:600; display:block; }
.pay-label small  { font-size:12px; color:var(--kaya-muted); }

/* ── DASHBOARD ── */
.dashboard-card { background:#fff; border:1px solid var(--kaya-border); border-radius:var(--radius); padding:20px; height:100%; transition:var(--transition); }
.dashboard-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.dashboard-card .dc-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:14px; }
.dashboard-card h6 { font-size:13px; color:var(--kaya-muted); margin-bottom:4px; }
.dashboard-card .dc-val { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--kaya-dark); }
.dc-orange { background:#fff3e8; color:var(--kaya-primary); }
.dc-green  { background:#e8f4ea; color:#27ae60; }
.dc-blue   { background:#e6f1fb; color:#185fa5; }
.dc-purple { background:#eeedfe; color:#534ab7; }

/* Account sidebar */
.account-sidebar { background:#fff; border:1px solid var(--kaya-border); border-radius:var(--radius); overflow:hidden; }
.account-sidebar .acc-user { padding:20px; background:linear-gradient(135deg,var(--kaya-dark),var(--kaya-primary)); color:#fff; text-align:center; }
.account-sidebar .acc-user .acc-avatar { width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:700; margin:0 auto 10px; border:2px solid rgba(255,255,255,.4); }
.account-sidebar .acc-user strong { display:block; font-size:15px; }
.account-sidebar .acc-user small  { font-size:12px; opacity:.7; }
.acc-nav { list-style:none; padding:8px; margin:0; }
.acc-nav li a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:14px; color:var(--kaya-dark); text-decoration:none; transition:var(--transition); font-weight:500; }
.acc-nav li a i { font-size:1rem; color:var(--kaya-muted); width:20px; text-align:center; }
.acc-nav li a:hover, .acc-nav li.active a { background:var(--kaya-cream); color:var(--kaya-primary); }
.acc-nav li.active a i, .acc-nav li a:hover i { color:var(--kaya-primary); }
.acc-nav .nav-divider { height:1px; background:var(--kaya-border); margin:6px 8px; }

/* Orders table */
.orders-table th { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--kaya-muted); padding:12px 14px; background:var(--kaya-cream); border-bottom:1px solid var(--kaya-border); }
.orders-table td { padding:14px; border-bottom:1px solid var(--kaya-border); font-size:14px; vertical-align:middle; }
.orders-table tr:last-child td { border-bottom:none; }
.orders-table tr:hover td { background:var(--kaya-cream); }
.order-status { display:inline-block; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.os-delivered { background:#e8f4ea; color:#27ae60; }
.os-shipped   { background:#e6f1fb; color:#185fa5; }
.os-processing{ background:#fff3e8; color:var(--kaya-primary); }
.os-cancelled { background:#fce8e8; color:#e74c3c; }
.os-pending   { background:#fef9ec; color:#b8860b; }

/* Order detail timeline */
.order-timeline { position:relative; padding-left:32px; }
.order-timeline::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--kaya-border); }
.ot-item { position:relative; margin-bottom:24px; }
.ot-item::before { content:''; position:absolute; left:-26px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--kaya-border); border:2px solid #fff; box-shadow:0 0 0 2px var(--kaya-border); }
.ot-item.done::before { background:var(--kaya-primary); box-shadow:0 0 0 2px rgba(181,85,27,.2); border-color:#fff; }
.ot-item.active::before { background:var(--kaya-primary); box-shadow:0 0 0 4px rgba(181,85,27,.15); }
.ot-item h6 { font-size:15px; font-weight:600; margin-bottom:2px; }
.ot-item p  { font-size:13px; color:var(--kaya-muted); margin:0; }
.ot-item small { font-size:12px; color:var(--kaya-muted); }

/* ── ORDER SUCCESS ── */
.success-wrap { max-width:560px; margin:0 auto; text-align:center; padding:40px 20px; }
.success-icon-big { width:88px; height:88px; background:linear-gradient(135deg,var(--kaya-primary),var(--kaya-dark)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:#fff; margin:0 auto 24px; box-shadow:0 10px 30px rgba(181,85,27,.3); animation:popBounce .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes popBounce { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.order-info-box { background:var(--kaya-cream); border:1px solid var(--kaya-border); border-radius:var(--radius); padding:20px 24px; text-align:left; margin:24px 0; }
.order-info-row { display:flex; justify-content:space-between; font-size:14px; padding:8px 0; border-bottom:1px solid var(--kaya-border); }
.order-info-row:last-child { border-bottom:none; }
.order-info-row strong { color:var(--kaya-dark); }
.order-info-row span   { color:var(--kaya-muted); }

/* ── TRACK ORDER ── */
.track-box { background:#fff; border:1px solid var(--kaya-border); border-radius:var(--radius-lg); padding:32px; }
.track-progress { display:flex; justify-content:space-between; position:relative; margin:32px 0; }
.track-progress::before { content:''; position:absolute; top:18px; left:0; right:0; height:2px; background:var(--kaya-border); z-index:0; }
.track-progress .tp-done-line { position:absolute; top:18px; left:0; height:2px; background:var(--kaya-primary); z-index:0; transition:width .5s; }
.tp-step { flex:1; text-align:center; position:relative; z-index:1; }
.tp-circle { width:36px; height:36px; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:.9rem; border:2px solid var(--kaya-border); background:#fff; color:var(--kaya-muted); transition:var(--transition); }
.tp-step.done   .tp-circle { background:var(--kaya-primary); border-color:var(--kaya-primary); color:#fff; }
.tp-step.active .tp-circle { background:#fff; border-color:var(--kaya-primary); color:var(--kaya-primary); box-shadow:0 0 0 4px rgba(181,85,27,.15); }
.tp-step p { font-size:12px; color:var(--kaya-muted); margin:0; }
.tp-step.done p, .tp-step.active p { color:var(--kaya-primary); font-weight:600; }

/* ── FAQ ── */
.faq-cat-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:24px; border:1.5px solid var(--kaya-border); font-size:14px; font-weight:600; color:var(--kaya-muted); cursor:pointer; transition:var(--transition); background:#fff; text-decoration:none; }
.faq-cat-pill:hover, .faq-cat-pill.active { background:var(--kaya-primary); border-color:var(--kaya-primary); color:#fff; }

/* ── RETURNS ── */
.return-step { display:flex; gap:16px; padding:20px; background:#fff; border:1px solid var(--kaya-border); border-radius:var(--radius); margin-bottom:12px; }
.return-step-num { width:40px; height:40px; border-radius:50%; background:var(--kaya-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; flex-shrink:0; }
.return-step h6 { font-size:15px; font-weight:600; margin-bottom:4px; }
.return-step p  { font-size:13.5px; color:var(--kaya-muted); margin:0; }

/* ── 404 ── */
.error-404 { text-align:center; padding:80px 20px; }
.error-code { font-family:var(--font-display); font-size:clamp(6rem,15vw,10rem); font-weight:700; color:var(--kaya-cream); line-height:1; position:relative; display:inline-block; }
.error-code::after { content:'404'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; -webkit-text-stroke:2px var(--kaya-border); color:transparent; }

/* ── GENERAL UTILS ── */
.section-pad-sm { padding:48px 0; }
.page-hero-sm { background:linear-gradient(135deg,var(--kaya-dark) 0%,#5c2e0e 55%,var(--kaya-primary) 100%); padding:40px 0 34px; }
.page-hero-sm .page-hero-title { font-size:clamp(1.6rem,3vw,2.4rem); }