/* Imagely — delt stylesheet for gæste-ordreflowet (bestil/*.php).
   Porteret fra ~/Downloads/imagely-bestil-test.html (design-prototype),
   udtrukket til én fil så index.php/confirmation.php/cancel.php ikke
   hver duplikerer samme ~400 linjer CSS. Farver/typografi matcher
   brandguiden (se CLAUDE.md, "Brand"). */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#1A1208; --white:#FDFAF5; --off:#F5EFE6;
  --g100:#EDE8DF; --g300:#C4BDB4; --g500:#8A8278; --g700:#4A4438;
  --gold:#C4A96B;
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
}
html,body{height:100%;min-height:100vh}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--white);color:var(--black);
  font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(253,250,245,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--g100);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;height:60px;
}
.logo{
  font-family:'Playfair Display',serif;
  font-size:18px;font-weight:700;letter-spacing:-0.03em;
  color:var(--black);text-decoration:none;cursor:pointer;
}
.logo span{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--g500);font-family:'DM Sans',sans-serif;font-weight:500;margin-left:10px}

/* ── STEP INDICATOR ── */
.steps-bar{background:var(--white);border-bottom:1px solid var(--g100);padding:0 5vw}
.steps-inner{max-width:860px;margin:0 auto;display:flex;align-items:center;padding:1rem 0}
.step-item{display:flex;align-items:center;gap:0.55rem;font-size:13px;font-weight:500;color:var(--g300);flex:1}
.step-item.active{color:var(--black)}
.step-item.done{color:var(--g500)}
.step-num{width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.step-item.active .step-num{background:var(--black);color:var(--white);border-color:var(--black)}
.step-item.done .step-num{background:var(--g500);color:var(--white);border-color:var(--g500)}
.step-line{flex:1;height:1px;background:var(--g100);margin:0 0.5rem}

/* ── MAIN LAYOUT ── */
.page{display:none;min-height:calc(100vh - 121px)}
.page.active{display:block}

/* ── STEP 1: UPLOAD ── */
.upload-page{max-width:860px;margin:0 auto;padding:3rem 5vw}
.page-title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-0.03em;margin-bottom:0.5rem}
.page-title em{font-style:italic;font-weight:400}
.page-sub{color:var(--g500);font-size:14px;font-weight:300;margin-bottom:2.5rem}

.drop-zone{border:1.5px dashed var(--g300);border-radius:4px;padding:3.5rem 2rem;text-align:center;cursor:pointer;transition:border-color 0.2s,background 0.2s;margin-bottom:2rem;background:var(--off)}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--black);background:var(--g100)}
.drop-zone svg{color:var(--g500);margin:0 auto 1rem}
.drop-zone h3{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;margin-bottom:0.4rem}
.drop-zone p{font-size:13px;color:var(--g500);margin-bottom:1.4rem}
#file-input{display:none}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:2rem}
.photo-cell{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:2px;background:var(--g100);cursor:pointer;transition:transform 0.2s}
.photo-cell:hover{transform:scale(1.02)}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cell .remove-btn{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(26,18,8,0.75);color:var(--white);border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s}
.photo-cell:hover .remove-btn{opacity:1}
.photo-count-badge{position:absolute;bottom:6px;left:6px;background:rgba(26,18,8,0.75);color:var(--white);border-radius:10px;padding:2px 8px;font-size:11px;font-weight:600}

/* ── STEP 2: ADJUST ── */
.adjust-page{display:grid;grid-template-columns:1fr 340px;min-height:calc(100vh - 121px)}
.adjust-main{padding:2.5rem 3vw 2rem;overflow-y:auto}
.adjust-sidebar{background:var(--off);border-left:1px solid var(--g100);padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.2rem}

.adjust-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.adj-cell{position:relative;cursor:pointer;border-radius:2px;overflow:hidden;border:2px solid transparent;transition:border-color 0.15s,transform 0.15s}
.adj-cell:hover{transform:scale(1.02)}
.adj-cell.editing{border-color:var(--black)}
.adj-cell img{width:100%;display:block;aspect-ratio:2/3;object-fit:cover}
.adj-cell .qty-badge{position:absolute;bottom:5px;right:5px;background:var(--black);color:var(--white);border-radius:2px;padding:1px 6px;font-size:11px;font-weight:600}
.adj-cell .edit-hint{position:absolute;inset:0;background:rgba(26,18,8,0.45);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:12px;font-weight:500;opacity:0;transition:opacity 0.15s;letter-spacing:0.05em}
.adj-cell:hover .edit-hint{opacity:1}

.edit-panel{display:none}
.edit-panel.visible{display:block}
.edit-preview{width:100%;aspect-ratio:2/3;background:var(--g100);overflow:hidden;border-radius:2px;margin-bottom:0.5rem;position:relative;cursor:grab;user-select:none;touch-action:none}
.edit-preview.dragging{cursor:grabbing}
.edit-preview canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.crop-hint{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:rgba(26,18,8,0.55);color:#FDFAF5;font-size:10px;letter-spacing:0.06em;padding:3px 8px;border-radius:10px;pointer-events:none;opacity:1;transition:opacity 0.4s;white-space:nowrap}
.ctrl-label{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--g500);font-weight:500;margin-bottom:6px;margin-top:1rem;display:block}
input[type=range]{width:100%;accent-color:var(--black);cursor:pointer;height:2px;-webkit-appearance:none;appearance:none;background:var(--g300);border-radius:1px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--black);cursor:pointer}
.ctrl-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ctrl-val{font-size:12px;color:var(--g700);font-weight:500;min-width:28px;text-align:right}

.finish-btn{flex:1;min-width:72px;padding:7px 6px;border:1.5px solid var(--g300);border-radius:2px;background:none;cursor:pointer;font-size:12px;font-weight:500;color:var(--g700);font-family:'DM Sans',sans-serif;transition:border-color 0.15s,color 0.15s,background 0.15s;text-align:center}
.finish-btn:hover{border-color:var(--black);color:var(--black);background:var(--g100)}

.qty-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.qty-btn{width:30px;height:30px;border-radius:2px;border:1.5px solid var(--g300);background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--black);display:flex;align-items:center;justify-content:center;transition:border-color 0.15s}
.qty-btn:hover{border-color:var(--black)}
.qty-val{font-size:16px;font-weight:600;min-width:28px;text-align:center}

.sidebar-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--g500);font-size:13px;line-height:1.6}

.order-summary{margin-top:auto}
.summary-row{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-bottom:1px solid var(--g100);color:var(--g700)}
.summary-row:last-child{border:none}
.summary-row.total{font-size:15px;font-weight:700;color:var(--black);padding-top:12px}

/* ── STEP 3: CHECKOUT ── */
.checkout-page{max-width:860px;margin:0 auto;padding:3rem 5vw;display:grid;grid-template-columns:1fr 320px;gap:3rem}
.form-section{background:var(--off);border:1px solid var(--g100);border-radius:3px;padding:1.5rem;margin-bottom:1.2rem}
.form-section h3{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;margin-bottom:1.2rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{margin-bottom:12px}
.field label{font-size:12px;font-weight:500;letter-spacing:0.04em;color:var(--g700);display:block;margin-bottom:5px}
.field input,.field select{width:100%;padding:0.65rem 0.9rem;border:1.5px solid var(--g300);border-radius:2px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--black);background:var(--white);outline:none;transition:border-color 0.2s}
.field input:focus,.field select:focus{border-color:var(--black)}
.field input.err,.field select.err{border-color:#c84a2a}
.err-msg{font-size:11px;color:#c84a2a;margin-top:3px}

.payment-note{background:var(--white);border:1px solid var(--g100);border-radius:2px;padding:1rem;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--g700)}
.payment-note svg{flex-shrink:0;color:var(--g500)}

.consent-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:14px}
.consent-row input{margin-top:3px;accent-color:var(--black);flex-shrink:0}
.consent-row span{font-size:13px;color:var(--g700);line-height:1.5}
.consent-row a{color:var(--black)}

.checkout-summary{position:sticky;top:80px}
.summary-card{background:var(--off);border:1px solid var(--g100);border-radius:3px;padding:1.5rem}
.summary-card h3{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;margin-bottom:1.2rem}
.summary-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:1.2rem}
.summary-photo{width:100%;height:100%;display:block;aspect-ratio:2/3;object-fit:cover;border-radius:1px;background:var(--g100);overflow:hidden}
.s-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px solid var(--g100);color:var(--g700)}
.s-row:last-child{border:none}
.s-row.total{font-weight:700;color:var(--black);font-size:15px;padding-top:10px}

/* ── CONFIRMATION (page eller egen route confirmation.php/cancel.php) ── */
.confirm-page{max-width:640px;margin:0 auto;padding:4rem 5vw;text-align:center}
.confirm-icon{width:72px;height:72px;background:var(--g100);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 2rem;color:var(--black)}
.confirm-page .page-title{margin-bottom:1rem}
.confirm-page p{color:var(--g700);font-size:15px;line-height:1.7;margin-bottom:0.5rem}
.order-num{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:var(--black);margin:1.5rem 0}
.confirm-address-box{background:var(--off);border:1px solid var(--g100);border-radius:3px;padding:1.2rem 1.5rem;text-align:left;margin:1.5rem 0;font-size:13px;color:var(--g700);line-height:1.8}
.confirm-address-box strong{color:var(--black)}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--black);color:var(--white);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:0.03em;padding:0.75rem 1.6rem;border-radius:3px;border:none;cursor:pointer;transition:background 0.2s,transform 0.15s;text-decoration:none}
.btn-primary:hover{background:var(--g700);transform:translateY(-1px)}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;background:none;border:1.5px solid var(--g300);color:var(--g700);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;padding:0.7rem 1.4rem;border-radius:3px;cursor:pointer;transition:border-color 0.2s,color 0.2s;text-decoration:none}
.btn-ghost:hover{border-color:var(--black);color:var(--black)}
.action-row{display:flex;align-items:center;justify-content:space-between;margin-top:2rem;gap:1rem;flex-wrap:wrap}

.payment-logos{display:flex;gap:6px;margin-top:10px;align-items:center}
.payment-logo{height:22px;padding:2px 6px;border:1px solid var(--g100);border-radius:2px;font-size:10px;font-weight:700;display:flex;align-items:center;color:var(--g500);background:var(--white)}

.divider{height:1px;background:var(--g100);margin:1.5rem 0}

/* ── RESPONSIVE ── */
@media(max-width:800px){
  .adjust-page{grid-template-columns:1fr;grid-template-rows:auto auto}
  .adjust-sidebar{border-left:none;border-top:1px solid var(--g100);padding:1.5rem}
  .checkout-page{grid-template-columns:1fr}
  .checkout-summary{position:static}
}
@media(max-width:540px){
  .steps-inner .step-item span{display:none}
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .adjust-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}