/* ============================================================================
   delivery-address-book.css — mobile Source-of-Truth (de-inlined from the page
   per "no inline" rule). Desktop light-2026 lives in delivery-address-book.desktop.css.
   Canonical "ที่อยู่ผู้รับในไทย" page (member/address-list.html now redirects here).
   ============================================================================ */
:root{
  --sun:#FF7A1A;--sun-deep:#EF5F06;--ember:#FF3D2E;--gold:#FFB23E;
  --cream:#FFF8F2;--cream-2:#FFEFE2;--paper:#fff;
  --ink:#2A2016;--ink-2:#6E5C4C;--muted:#9A8b7c;--line:#F2E6D8;
  --clay:#C8692B;--clay-soft:#FBEEE2;--clay-deep:#A9531F;--leaf:#1E9E6A;--leaf-soft:#E6F6EE;
  --fd:'Mitr',sans-serif;--fb:'Prompt',sans-serif;
  --sh:0 12px 34px -22px rgba(120,70,20,.5);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;overflow-x:hidden}
body{font-family:var(--fb);color:var(--ink);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased;padding-bottom:88px}
::-webkit-scrollbar{display:none}
button{font-family:inherit;cursor:pointer}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}

/* header */
header{position:sticky;top:0;z-index:40;background:rgba(255,248,242,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:10px;padding:11px 12px}
.ib{width:38px;height:38px;border:none;background:transparent;display:grid;place-items:center;color:var(--ink);flex:none}
.ib:focus-visible{outline:2px solid var(--sun);border-radius:10px}
.htitle{font-family:var(--fd);font-weight:600;font-size:17px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcount{font-family:var(--fd);font-weight:700;font-size:12px;color:var(--sun-deep);background:var(--cream-2);padding:4px 10px;border-radius:20px}

/* intro note */
.note{display:flex;gap:9px;margin-bottom:14px;background:var(--clay-soft);border-radius:14px;padding:12px 14px;font-size:12.5px;color:var(--clay-deep)}
.note svg{flex:none;margin-top:1px;color:var(--clay)}
.note b{font-family:var(--fd);font-weight:600}

/* address card (list = plain flex column; addr = uniform card look) */
.list{display:flex;flex-direction:column;gap:12px;background:none;border:none;border-radius:0;box-shadow:none;overflow:visible}
.addr{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg,20px);box-shadow:var(--shadow-md,var(--sh));padding:var(--sp-card-pad,16px);animation:fadeUp .4s ease both}
.addr.is-def{border-color:var(--sun);box-shadow:0 12px 26px -16px rgba(239,95,6,.55)}
.addr-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--fd);font-weight:500;font-size:12px;color:var(--clay-deep);background:var(--cream-2);padding:4px 10px;border-radius:9px}
.chip svg{width:13px;height:13px}
.def{display:inline-flex;align-items:center;gap:4px;font-family:var(--fd);font-weight:600;font-size:11px;color:#fff;background:linear-gradient(120deg,var(--sun),var(--sun-deep));padding:4px 10px;border-radius:9px;letter-spacing:.3px}
.def svg{width:12px;height:12px}
.addr-name{font-family:var(--fd);font-weight:600;font-size:15.5px;color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.addr-name .ph{font-family:var(--fb);font-weight:500;font-size:13.5px;color:var(--ink-2)}
.addr-text{font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.55;word-break:break-word}
.addr-text .zip{color:var(--ink);font-weight:500}
.addr-acts{display:flex;align-items:center;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.abtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:10px;padding:8px 12px;font-family:var(--fd);font-weight:500;font-size:12.5px}
.abtn svg{width:14px;height:14px}
.abtn.set{border-color:var(--sun);color:var(--sun-deep)}
.abtn.del{color:var(--ember);border-color:#F6D2CB;margin-left:auto}
.abtn:active{transform:translateY(1px)}

/* skeleton (loading) */
.sk{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg,20px);box-shadow:var(--shadow-md,var(--sh));padding:var(--sp-card-pad,16px)}
.sk .bar{height:12px;border-radius:7px;background:linear-gradient(100deg,#f1e7db 30%,#faf3ea 50%,#f1e7db 70%);background-size:220% 100%;animation:shimmer 1.3s linear infinite;margin-bottom:9px}

/* empty state */
.empty{text-align:center;padding:46px 20px}
.empty .ec{width:84px;height:84px;margin:0 auto 16px;border-radius:26px;background:linear-gradient(160deg,#FFF3E7,var(--cream-2));display:grid;place-items:center;color:var(--sun)}
.empty .ec svg{width:40px;height:40px}
.empty h3{font-family:var(--fd);font-weight:600;font-size:17px;margin:0 0 6px;color:var(--ink)}
.empty p{font-size:13.5px;color:var(--muted);margin:0 auto;max-width:260px}

/* sticky add bar */
.addbar{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,248,242,0),var(--cream) 34%)}
.addbtn{width:100%;height:52px;display:flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:15px;background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#fff;font-family:var(--fd);font-weight:600;font-size:15.5px;box-shadow:0 14px 28px -12px rgba(239,95,6,.9)}
.addbtn:active{transform:translateY(1px)}
.addbtn svg{width:20px;height:20px}

/* bottom sheet */
.ov{position:fixed;inset:0;background:rgba(30,18,8,.5);z-index:80;display:none;align-items:flex-end;justify-content:center}
.ov.open{display:flex}
.sheet{background:#fff;width:100%;max-width:480px;border-radius:22px 22px 0 0;max-height:92vh;overflow-y:auto;animation:sheetUp .25s ease}
.shd{position:sticky;top:0;background:#fff;display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.shd h3{font-family:var(--fd);font-weight:600;font-size:17px;margin:0;flex:1}
.shx{width:32px;height:32px;border:none;background:var(--cream-2);border-radius:10px;display:grid;place-items:center;color:var(--ink-2);flex:none;font-size:18px;line-height:1}
.sbody{padding:15px 16px 18px}

/* label segmented */
.seg{display:flex;gap:8px;margin-bottom:14px}
.seg button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 6px;border-radius:13px;border:1.5px solid var(--line);background:#fff;font-family:var(--fd);font-weight:500;font-size:12.5px;color:var(--ink-2)}
.seg button svg{width:18px;height:18px}
.seg button.on{border-color:var(--sun);background:linear-gradient(160deg,#FFF3E7,var(--cream-2));color:var(--sun-deep)}

/* form fields */
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--fd);font-weight:500;font-size:13px;color:var(--ink);margin-bottom:6px}
.field label .req{color:var(--ember)}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;font-family:var(--fb);font-size:14px;color:var(--ink);background:var(--cream);outline:none}
.field textarea{resize:vertical;min-height:64px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sun);background:#fff}
.field.err input,.field.err select,.field.err textarea{border-color:var(--ember);background:#FFF6F4}
.ferr{display:none;font-size:11.5px;color:var(--ember);margin-top:5px}
.field.err .ferr{display:block}

/* default toggle row (fix: .tl flex:1 so the label fills the row instead of
   collapsing to min-content and wrapping per-character) */
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:auto;height:auto;background:var(--cream);border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin:2px 0 4px}
.toggle .tl{flex:1;min-width:0;font-family:var(--fd);font-weight:500;font-size:13.5px;color:var(--ink)}
.toggle .tl small{display:block;font-family:var(--fb);font-weight:400;font-size:11.5px;color:var(--muted)}
.sw{position:relative;width:48px;height:28px;border-radius:16px;background:#E4D8C9;border:none;flex:none;transition:.2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s}
.sw.on{background:var(--sun)}
.sw.on::after{left:23px}

.savebtn{width:100%;height:52px;border:none;border-radius:15px;background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#fff;font-family:var(--fd);font-weight:600;font-size:15.5px;box-shadow:0 12px 24px -12px rgba(239,95,6,.9);margin-top:8px}
.savebtn:active{transform:translateY(1px)}

/* confirm delete sheet */
.confirm{padding:22px 18px 20px;text-align:center}
.confirm .ci{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;background:#FFF1EE;display:grid;place-items:center;color:var(--ember)}
.confirm h3{font-family:var(--fd);font-weight:600;font-size:17px;margin:0 0 6px}
.confirm p{font-size:13.5px;color:var(--ink-2);margin:0 0 18px}
.confirm p b{color:var(--ink)}
.crow{display:flex;gap:10px}
.crow button{flex:1;height:50px;border-radius:14px;font-family:var(--fd);font-weight:600;font-size:15px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2)}
.crow .danger{border:none;background:linear-gradient(120deg,#FF5A3C,var(--ember));color:#fff}

/* toast */
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:#2A2016;color:#fff;font-size:13.5px;padding:11px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.28s;z-index:100;display:flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:500}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast svg{color:var(--leaf)}

/* empty-state illustration */
.empty-img{width:120px;height:120px;object-fit:contain;margin:0 auto 14px;display:block}