/* ==========================================================================
   NGGOWO JONEGORO — checkout, pesanan, pelacakan, ulasan, admin pesanan
   Hanya menambah; tidak mengubah gaya yang sudah ada.
   ========================================================================== */

/* ---------- Lencana status ---------- */
.nj-badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.04em;background:#f0ede3;color:#6b5a38;white-space:nowrap;vertical-align:middle}
.nj-badge.st-menunggu,.nj-badge.pay-belum_bayar{background:#fdf1d8;color:#8a6420}
.nj-badge.st-diproses{background:#e6eef8;color:#2b5a8f}
.nj-badge.st-dikemas{background:#efe6f7;color:#6b3f93}
.nj-badge.st-dikirim,.nj-badge.pay-menunggu_verifikasi{background:#e0f0f4;color:#1c6a7a}
.nj-badge.st-diterima,.nj-badge.st-selesai,.nj-badge.pay-lunas{background:#e2f1e5;color:#256a3a}
.nj-badge.pay-cod{background:#e8efe3;color:#4a6b2f}
.nj-badge.st-dibatalkan,.nj-badge.pay-ditolak{background:#fbe5e0;color:#8a3e31}

/* ---------- Bintang rating ---------- */
.nj-stars{--v:0;display:inline-block;font-size:15px;line-height:1;letter-spacing:2px;background:linear-gradient(90deg,#e0a93b calc(var(--v)/5*100%),#d9d5c8 0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;vertical-align:middle}
.nj-rate-line{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:12px}
.nj-rate-line .nj-stars{font-size:13px}
.nj-rate-line b{color:var(--deep)}.nj-rate-line small{color:var(--muted)}
.nj-rate-link{display:inline-block;margin:2px 0 8px;border-bottom:1px dotted #c9b98a}
.detail-copy .nj-rate-line{margin:0}

/* ---------- Langkah checkout ---------- */
.co-steps{list-style:none;display:flex;gap:10px;padding:0;margin:20px 0 0;flex-wrap:wrap}
.co-steps li{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#9aa59e}
.co-steps li b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e7e3d6;color:#7b8a80;font-size:12px}
.co-steps li.on{color:var(--green)}.co-steps li.on b{background:var(--green);color:#fff}
.co-steps li+li:before{content:"";width:34px;height:2px;background:#d9cfa8;margin-right:2px}

/* ---------- Checkout ---------- */
.co-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:28px;align-items:start}
.co-main{display:grid;gap:22px;min-width:0}
.co-card{background:#fff;border:1px solid var(--line);padding:24px;min-width:0}
.co-card h3{font:500 25px Georgia,serif;margin:0 0 4px;display:flex;align-items:center;gap:12px;color:var(--deep)}
.co-num{width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:600 15px Inter,system-ui,sans-serif;flex:none}
.co-sub{font-size:12.5px;color:var(--muted);margin:4px 0 8px}
.co-group-title{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#9a7140;margin:18px 0 10px}
.co-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.co-opt{display:block;cursor:pointer;position:relative;min-width:0}
.co-opt input{position:absolute;opacity:0;pointer-events:none}
.co-opt-box{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);background:#fffdf8;border-radius:10px;position:relative;transition:border-color .25s,box-shadow .25s,background .25s,transform .25s}
.co-opt:hover .co-opt-box{border-color:#cdbf8e;transform:translateY(-2px);box-shadow:0 8px 20px #263b2a12}
.co-opt input:focus-visible+.co-opt-box{outline:3px solid #d4a65a66;outline-offset:2px}
.co-opt input:checked+.co-opt-box{border-color:var(--green);background:#f1f6ee;box-shadow:0 0 0 3px #315c4922}
.co-logo{width:66px;height:auto;max-height:28px;flex:none;border-radius:5px;display:block}
.co-opt-text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.co-opt-text strong{font-size:13px;color:var(--deep)}.co-opt-text strong em{font-style:normal;font-weight:600;color:var(--muted)}
.co-opt-text small{font-size:11px;color:var(--muted)}
.co-opt-price{font-weight:800;font-size:13px;color:var(--green);white-space:nowrap}
.co-tick{width:20px;height:20px;border-radius:50%;border:2px solid #cfd6cb;flex:none;position:relative;transition:all .25s}
.co-opt input:checked+.co-opt-box .co-tick{background:var(--green);border-color:var(--green)}
.co-opt input:checked+.co-opt-box .co-tick:after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);animation:co-pop .3s ease}
@keyframes co-pop{from{transform:rotate(45deg) scale(0)}to{transform:rotate(45deg) scale(1)}}
.co-hint{font-size:12px;color:#8a6420;background:#fdf6e3;border:1px solid #efdcab;padding:9px 12px;margin:12px 0 0}
.co-side{position:sticky;top:96px}
.co-summary{background:#fffaf0}
.co-submit{width:100%;margin-top:16px;padding:15px;font-size:13px;position:relative;overflow:hidden}
.co-spin{display:none;width:16px;height:16px;border:2.5px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:co-rot .7s linear infinite}
.co-submit.loading .co-spin{display:inline-block}
.co-submit.loading{opacity:.9;cursor:progress}
@keyframes co-rot{to{transform:rotate(360deg)}}
.co-back{display:block;text-align:center;font-size:12px;font-weight:700;color:var(--green);margin-top:12px}

/* ---------- Animasi TRANSAKSI BERHASIL ---------- */
html.nj-lock,html.nj-lock body{overflow:hidden}
.nj-success{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;
  background:radial-gradient(circle at 50% 35%,#2f6a52 0,#203d32 55%,#142a22 100%);opacity:0;transition:opacity .5s ease}
.nj-success.go{opacity:1}.nj-success.out{opacity:0;pointer-events:none}
.nj-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.nj-success-card{position:relative;text-align:center;color:#fff;max-width:640px;width:100%;transform:translateY(24px) scale(.96);opacity:0}
.nj-success.go .nj-success-card{animation:nj-card .8s cubic-bezier(.2,.9,.3,1.2) .1s forwards}
@keyframes nj-card{to{transform:none;opacity:1}}
.nj-ring{position:relative;width:150px;height:150px;margin:0 auto 26px}
.nj-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.nj-ring-bg{fill:#ffffff10;stroke:#ffffff25;stroke-width:5}
.nj-ring-fg{fill:none;stroke:#f2d49c;stroke-width:5;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327}
.nj-ring-check{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;transform:rotate(90deg);transform-origin:60px 60px}
.nj-success.go .nj-ring-fg{animation:nj-draw .9s cubic-bezier(.6,.1,.2,1) .35s forwards}
.nj-success.go .nj-ring-check{animation:nj-draw-c .55s ease-out 1.15s forwards}
.nj-success.go .nj-ring svg{animation:nj-bounce .6s cubic-bezier(.3,1.6,.5,1) 1.1s}
@keyframes nj-draw{to{stroke-dashoffset:0}}
@keyframes nj-draw-c{to{stroke-dashoffset:0}}
@keyframes nj-bounce{0%{scale:1}50%{scale:1.12}100%{scale:1}}
.nj-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid #f2d49c;opacity:0}
.nj-success.go .nj-pulse{animation:nj-pulse 1.8s ease-out 1.2s 2}
.nj-success.go .nj-pulse.p2{animation-delay:1.55s}
@keyframes nj-pulse{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.8);opacity:0}}
.nj-success-title{font:700 clamp(22px,5.6vw,40px)/1.15 Georgia,"Times New Roman",serif;letter-spacing:.12em;margin:0 0 12px;color:#fff;display:flex;flex-wrap:wrap;justify-content:center;column-gap:.5em;text-shadow:0 4px 24px #0006}
.nj-success-title .wd{display:inline-flex;white-space:nowrap}
.nj-success-title .ch{display:inline-block;opacity:0;transform:translateY(26px) scale(.6);background:linear-gradient(100deg,#fff 30%,#f2d49c 50%,#fff 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.nj-success.go .nj-success-title .ch{animation:nj-letter .55s cubic-bezier(.3,1.5,.5,1) calc(1.3s + var(--i)*.045s) forwards,nj-shine 2.4s ease-in-out 2.6s infinite}
@keyframes nj-letter{to{opacity:1;transform:none}}
@keyframes nj-shine{0%{background-position:120% 0}100%{background-position:-120% 0}}
.nj-success-sub{color:#dce8df;font-size:14px;margin:0 auto 22px;max-width:380px;opacity:0}
.nj-success-info{max-width:520px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#ffffff26;border:1px solid #ffffff30;border-radius:12px;overflow:hidden;margin:0 auto 26px;opacity:0}
.nj-success-info>div{background:#ffffff0f;padding:13px 8px;min-width:0}
.nj-success-info small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#bcd0c3}
.nj-success-info strong{display:block;font-size:13px;margin-top:3px;word-break:break-word}
.nj-success-pay{display:flex!important;align-items:center;justify-content:center;gap:6px}
.nj-success-pay img{border-radius:3px;background:#fff;padding:1px 2px}
.nj-success-btn{background:#f2d49c;border-color:#f2d49c;color:#1b342b;font-size:13px;padding:14px 26px;opacity:0}
.nj-success-btn:hover{background:#fff;color:#1b342b}
.nj-success.go .nj-success-sub{animation:nj-fade .6s ease 2.1s forwards}
.nj-success.go .nj-success-info{animation:nj-fade .6s ease 2.3s forwards}
.nj-success.go .nj-success-btn{animation:nj-fade .6s ease 2.5s forwards}
@keyframes nj-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.nj-success-bar{height:3px;background:#ffffff22;margin:22px auto 0;max-width:240px;border-radius:3px;overflow:hidden}
.nj-success-bar i{display:block;height:100%;background:#f2d49c;transform-origin:left;transform:scaleX(0)}
.nj-success.go .nj-success-bar i{animation:nj-bar 9s linear forwards}
@keyframes nj-bar{to{transform:scaleX(1)}}

/* ---------- Halaman pesanan ---------- */
.od{max-width:1180px;margin:0 auto}
.od-card{background:#fff;border:1px solid var(--line);padding:22px;margin-bottom:20px;min-width:0}
.od-card h3{font:500 23px Georgia,serif;margin:0 0 14px;color:var(--deep)}
.od-card h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9a7140;margin:0 0 8px}
.od-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:start}
.od-col{min-width:0}
.od-hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.od-addr{font-size:13px;margin:0 0 8px;color:#3e4d45}
.od-cancel{background:#fff0ec;border:1px solid #ebc4b9;color:#8a3e31;padding:14px 16px;font-size:13px}
/* progres */
.od-flow{list-style:none;margin:0;padding:6px 0 0;display:grid;grid-template-columns:repeat(var(--n),1fr);position:relative}
.od-flow:before{content:"";position:absolute;top:24px;left:calc(50%/var(--n)*1);right:calc(50%/var(--n)*1);height:4px;background:#e8e3d8;border-radius:4px}
.od-flow:after{content:"";position:absolute;top:24px;left:calc(100%/var(--n)/2);height:4px;background:linear-gradient(90deg,var(--green),#5f9a7b);border-radius:4px;width:calc((100% - 100%/var(--n))*var(--p)/(var(--n) - 1));transition:width 1s cubic-bezier(.2,.7,.2,1)}
.od-flow li{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.od-dot{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid #e1dccc;font-weight:800;font-size:14px;color:#a39d88;transition:all .4s}
.od-flow li em{font-style:normal;font-size:11.5px;font-weight:700;color:#9a9784}
.od-flow li.done .od-dot{background:var(--green);border-color:var(--green);color:#fff}
.od-flow li.done em,.od-flow li.now em{color:var(--deep)}
.od-flow li.now .od-dot{background:#fff;border-color:var(--green);color:var(--green);box-shadow:0 0 0 6px #315c4920;animation:od-beat 1.8s ease-in-out infinite}
.od-flow li.now:last-child .od-dot{background:var(--green);color:#fff;animation:none}
@keyframes od-beat{50%{box-shadow:0 0 0 10px #315c4912}}
/* kurir & resi */
.od-ship,.od-pay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;background:var(--cream);border:1px solid var(--line);margin-bottom:18px}
.od-ship strong,.od-pay strong{display:block;font-size:14px}.od-ship small{display:block;color:var(--muted);font-size:12px}
.od-resi{margin-left:auto;text-align:right}.od-resi small{display:block}
.od-pay{margin-bottom:12px}
/* timeline */
.od-timeline{list-style:none;margin:0;padding:0 0 0 4px;position:relative}
.od-timeline li{position:relative;padding:0 0 22px 28px}
.od-timeline li:before{content:"";position:absolute;left:7px;top:16px;bottom:-2px;width:2px;background:#e1dccc}
.od-timeline li:last-child:before{display:none}
.od-tl-dot{position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #cbd3c7}
.od-timeline li.latest .od-tl-dot{background:var(--green);border-color:#bcd7c6;box-shadow:0 0 0 4px #315c4922;animation:od-beat 2s ease-in-out infinite}
.od-tl-body strong{font-size:14px;color:var(--deep)}
.od-tl-body p{margin:4px 0;font-size:13px;color:#51615a}
.od-tl-body time{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.od-tl-loc{display:block;font-size:12.5px;color:#1c6a7a;font-weight:600;margin-top:2px}
.od-x{border:0;background:none;color:#b66b5e;font-size:11px;cursor:pointer;text-decoration:underline;padding:0 0 0 8px}
.od-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.od-actions form{margin:0}
.od-note{background:#fffaf0;border:1px dashed #d9cfa8;padding:14px;font-size:13px}
.od-amount{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.od-amount strong{font:600 22px Georgia,serif;color:var(--green);letter-spacing:.02em}
.od-upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.od-upload .btn{padding:9px 16px}
/* ulasan di pesanan */
.od-rev{border-top:1px solid var(--line);padding:16px 0}.od-rev:first-of-type{border-top:0}
.od-rev-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.od-rev-head img{width:52px;height:52px;object-fit:cover;border:1px solid var(--line)}
.od-rev-head strong{display:block}.od-rev-head a{font-size:12px}
.od-rev-done p{margin:6px 0 0;font-size:13px;color:#46564e}
.od-rev-form textarea{width:100%;padding:12px;border:1px solid #d9ded5;background:#fffdf8;font:inherit;font-size:13px;margin:10px 0}
.nj-starpick{display:inline-flex;flex-direction:row-reverse;align-items:center;gap:2px;justify-content:flex-end}
.nj-starpick input{position:absolute;opacity:0;pointer-events:none}
.nj-starpick label{font-size:34px;line-height:1;color:#d9d5c8;cursor:pointer;transition:color .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.nj-starpick label:hover,.nj-starpick label:hover~label,.nj-starpick input:checked~label{color:#e0a93b}
.nj-starpick label:hover{transform:scale(1.2) rotate(-6deg)}
.nj-starpick input:focus-visible+label{outline:2px solid #d4a65a;outline-offset:2px;border-radius:4px}
.nj-starpick-t{order:-1;margin-right:14px;font-size:12px;font-weight:700;color:var(--muted)}

/* ---------- Ulasan di halaman produk ---------- */
.hx-reviews{background:var(--cream)}
.rv-summary{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;background:#fff;border:1px solid var(--line);padding:24px;margin-bottom:22px}
.rv-score{text-align:center}.rv-score b{display:block;font:500 56px/1 Georgia,serif;color:var(--deep)}.rv-score .nj-stars{font-size:20px;margin:6px 0}.rv-score small{display:block;color:var(--muted);font-size:12px}
.rv-bars{display:grid;gap:6px;min-width:0}
.rv-bar{display:grid;grid-template-columns:34px 1fr 26px;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.rv-bar i{height:8px;background:#ece8dc;border-radius:8px;overflow:hidden}.rv-bar u{display:block;height:100%;background:linear-gradient(90deg,#e0a93b,#f0c76a);border-radius:8px;transform-origin:left;animation:rv-grow 1s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes rv-grow{from{transform:scaleX(0)}}
.rv-bar em{font-style:normal;text-align:right}
.rv-list{display:grid;gap:14px}
.rv-item{background:#fff;border:1px solid var(--line);padding:18px 20px}
.rv-top{display:flex;align-items:center;gap:12px}.rv-top .nj-stars{margin-left:auto}
.rv-avatar{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font:600 16px Georgia,serif;flex:none}
.rv-top strong{display:block;font-size:14px}.rv-top small{font-size:11.5px;color:var(--muted)}.rv-verified{color:#256a3a;font-weight:700}
.rv-item>p{margin:12px 0 0;font-size:14px;color:#3e4d45}
.rv-reply{margin-top:12px;background:#f3f1e7;border-left:3px solid var(--gold);padding:10px 14px;font-size:13px}.rv-reply b{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9a7140}.rv-reply p{margin:4px 0 0}

/* ---------- Lacak pesanan ---------- */
.lk-wrap{max-width:560px;margin:0 auto}
.lk-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);transition:padding .25s}
.lk-item:first-of-type{border-top:0}.lk-item:hover{padding-left:6px}
.lk-item small{display:block;font-size:12px;color:var(--muted)}

/* ---------- Admin ---------- */
.ad-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.ad-tabs a{padding:8px 14px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:700;color:#59665e;border-radius:20px;transition:all .2s}
.ad-tabs a b{margin-left:4px;color:#9a7140}.ad-tabs a:hover{border-color:#cdbf8e}
.ad-tabs a.on{background:var(--green);border-color:var(--green);color:#fff}.ad-tabs a.on b{color:#f2d49c}
.ad-mini img{border-radius:3px;vertical-align:middle}
.ad-quick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:18px;border-bottom:1px dashed var(--line)}
.ad-proof{max-width:100%;max-height:300px;border:1px solid var(--line);margin:6px 0 12px;display:block}
.ad-pay{display:flex;gap:8px;margin-top:10px}.ad-pay select{flex:1;padding:9px;border:1px solid #d9ded5;background:#fffdf8;font:inherit;font-size:13px}
.ad-settings .od-card{padding:24px}
.ad-pay-row{display:grid;grid-template-columns:200px 1fr 1fr;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.ad-pay-row input,.ad-settings td input{padding:11px;border:1px solid #d9ded5;background:#fffdf8;font:inherit;font-size:13px;width:100%}
.ad-pay-logo{display:flex;align-items:center;gap:10px}.ad-pay-logo b{font-size:13px}.ad-pay-logo img{border-radius:4px}
.ad-rev.is-hidden{opacity:.6;background:#f7f5ef}
.ad-rev-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.ad-rev-text{font-size:14px;margin:10px 0}
.ad-reply{display:flex;gap:8px}.ad-reply input{flex:1;padding:10px;border:1px solid #d9ded5;background:#fffdf8;font:inherit;font-size:13px}

/* ---------- Responsif ---------- */
@media(max-width:900px){
  .co-layout,.od-grid{grid-template-columns:1fr}.co-side{position:static}
  .rv-summary{grid-template-columns:1fr;gap:18px;text-align:center}.rv-summary .btn{justify-self:center}
}
@media(max-width:600px){
  .co-options{grid-template-columns:1fr}.co-card{padding:18px}
  .od-flow li em{font-size:10px}.od-dot{width:34px;height:34px;font-size:12px}.od-flow:before,.od-flow:after{top:19px}
  .ad-pay-row{grid-template-columns:1fr}
  .od-resi{margin-left:0;text-align:left}
  .nj-success-info{grid-template-columns:1fr}
  .ad-reply{flex-direction:column}
}

/* ---------- Cetak (invoice) & gerak berkurang ---------- */
@media print{
  .topline,.home-topbar,.site-header,.footer,.no-print,.nj-top,.nj-progress,.page-heading .eyebrow{display:none!important}
  .od-card{break-inside:avoid;border-color:#bbb}.od-grid{grid-template-columns:1fr 1fr}
  body{background:#fff}
}
@media(prefers-reduced-motion:reduce){
  .nj-success *,.nj-success{animation-duration:.01s!important;animation-delay:0s!important;transition:none!important}
  .nj-success .ch,.nj-success-sub,.nj-success-info,.nj-success-btn,.nj-success-card{opacity:1!important;transform:none!important}
  .nj-ring-fg,.nj-ring-check{stroke-dashoffset:0!important}
}