.wtw-container {
    max-width: 100%;
    margin: 0;
    padding: 0 1rem;
}
.wtw-step { animation: wtwFade 0.3s ease; }
@keyframes wtwFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wtw-container .d-none { display: none !important; }

/* ============================================================
   Stepper — วงกลมตัวเลขเชื่อมด้วยเส้น (ตามดีไซน์ WT)
   โทน: ขั้น active/ผ่านแล้ว = เขียว (--secondary), ขั้นถัดไป = navy เต็ม (--primary)
   ============================================================ */
.wtw-tabs {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 650px;
    margin: 0 auto 2.5rem;
    padding: 0;
    list-style: none;
    border: 0;
    margin-bottom: 30px;
}
.wtw-tabs .nav-item { flex: 1; }
.wtw-tabs .nav-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    border: 0;
    color: var(--primary);
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-weight: 600;
    text-decoration: none;
    cursor: default;
}
/* เส้นเชื่อม: navy หนา 3px (XD) ลากจากกึ่งกลางวงก่อนหน้า → กึ่งกลางวงนี้ (top = ครึ่งหนึ่งของวงกลม 54px) */
.wtw-tabs .nav-item:not(:first-child) .nav-link::before {
    content: "";
    position: absolute;
    top: 27px;
    left: -50%;
    right: 50%;
    height: 3px;
    background: var(--secondary);
    z-index: 0;
}
.wtw-tabs .nav-link .wtw-tab-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}
.wtw-tabs .nav-link .wtw-tab-label {
    font-size: 16px;
    color: var(--primary);
    text-align: center;
}
/* ขั้นปัจจุบัน + ขั้นที่ผ่านมาแล้ว = วงเขียว */
.wtw-tabs .nav-link.active .wtw-tab-num,
.wtw-tabs .nav-link.completed .wtw-tab-num { background: var(--secondary); }
.wtw-tabs .nav-link.completed { cursor: pointer; }
/* ดีไซน์: ขั้นถัดไปเป็น navy เต็ม ไม่หรี่ลง */
.wtw-tabs .nav-link.disabled { opacity: 1; pointer-events: none; }

.wtw-order-meta { background: #f8f9fa; padding: 1rem 1.25rem; border-radius: 6px; margin-bottom: 1.25rem; }
.wtw-order-meta > div { margin-bottom: 0.25rem; }

.wtw-lines { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.wtw-line {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 1rem; align-items: center;
    padding: 0.75rem 1rem; border: 1px solid #dee2e6; border-radius: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.wtw-line.is-selected { border-color: #007bff; background: #f0f7ff; }
.wtw-line.is-selected { border-color: #007bff; background: #f0f7ff; }
.wtw-line.is-already-requested { background: #f8f9fa; opacity: 0.85; }
.wtw-line.is-already-requested .wtw-line-check input[type=checkbox] { cursor: not-allowed; }
.wtw-line.is-already-requested .wtw-line-name { cursor: default; }

.wtw-line-product-detail { flex-wrap: wrap; }
.wtw-line-existing-status-row { flex: 0 0 100%; }
.wtw-line-existing-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 25px;
    font-size: 0.75rem;
    /* font-weight: 600; */
}

#wtw-step2 .wtw-line.is-already-requested .wtw-pick-cb {
    cursor: default;
    background: #e8e8e8;
}

.wtw-line-check input[type=checkbox] { width: 20px; height: 20px; cursor: pointer; }
.wtw-line-name { font-weight: 600; cursor: pointer; display: block; }
.wtw-line-sku { font-size: 0.875rem; }
.wtw-line-total { font-weight: 600; white-space: nowrap; }
.wtw-line-unit { font-weight: 400; font-size: 0.875rem; }

.wtw-qty-input:disabled, .wtw-qty-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.wtw-line-qty { display: flex; align-items: center; gap: 0.25rem; }
.wtw-line-qty .wtw-qty-btn {
    width: 28px; height: 28px; padding: 0; border: 1px solid #ced4da; background: #fff;
    border-radius: 4px; cursor: pointer; font-size: 1rem; line-height: 1;
}
.wtw-line-qty .wtw-qty-btn:hover { background: #f1f3f5; }
.wtw-line-qty .wtw-qty-input {
    width: 54px; text-align: center; padding: 0.25rem; border: 1px solid #ced4da;
    border-radius: 4px; -moz-appearance: textfield; appearance: textfield;
}
.wtw-line-qty .wtw-qty-input::-webkit-outer-spin-button,
.wtw-line-qty .wtw-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wtw-line-qty .wtw-qty-max { font-size: 0.75rem; margin-left: 0.25rem; }

.wtw-total { text-align: right; font-size: 1.125rem; padding: 0.75rem 1rem; background: #f8f9fa; border-radius: 6px; }

.wtw-summary-lines { padding-left: 1.25rem; margin: 0;}

@media (max-width: 600px) {
    .wtw-line { grid-template-columns: 1fr; gap: 0.5rem; }
}

.wtw-order-meta > .wtw-order-meta-line {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    padding: 8px 0;
}

.wtw-order-meta-line-title {
    width: 100%;
}

.wtw-order-meta-line-info {
    width: 100%;
    text-align: right;
}

.wtw-line-product-detail {
    display: flex;
    gap: 10px;
}

span.require{
    color: var(--secondary);
    margin-left: 2px;
}

.wtw-return-info-line {
    display: flex;
    gap: 15px;
    padding-bottom: 12px;
}

body#module-watertradewithdrawal-withdraw header.page-header {
    display: none;
}

/* ============================================================
   พื้นหลังหน้า (โทนเทาอ่อนตามดีไซน์ + แพทเทิร์น b2b)
   ============================================================ */
body#module-watertradewithdrawal-withdraw { background: var(--Light-Gray); }
body#module-watertradewithdrawal-withdraw #wrapper,
body#module-watertradewithdrawal-withdraw #main,
body#module-watertradewithdrawal-withdraw #content { background: transparent; }

/* ============================================================
   STEP 1 — Find order (ค่าตรงตาม Adobe XD เป๊ะ — artboard 1920 = ขนาดจริง)
   การ์ด w560 · radius20 · padding 40 · shadow 0 3px 3px rgba(0,0,0,.16)
   ============================================================ */
#wtw-step1 {
    max-width: 650px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 40px;
}
div#wtw-app a.nav-link.active {
    background: transparent;
}
/* หัวข้อการ์ด — Poppins-Bold 30px navy */
#wtw-step1 h2 {
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
    margin: 0 0 8px;
}
/* ข้อความนำ (lead) — Poppins Regular 16px navy; วลีเน้น "14 dage" เป็นเขียว */
#wtw-step1 .text-muted {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--primary) !important;   /* ทับ .text-muted #7a7a7a !important ของ theme */
    margin: 0 0 30px;
}
#wtw-step1 .wtw-lead-em {
    color: var(--secondary);
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-weight: 600;
}
/* ฟิลด์ */
#wtw-step1 .form-group { margin-bottom: 24px; }
/* label — Poppins-SemiBold 16px เขียว (ทั้งคำ รวมดอกจัน) */
#wtw-step1 label {
    display: block;
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--primary);
    margin-bottom: 10px;
    text-align: left;
}
/* input — h55 · radius28 (pill) · border #CCCCCC 1px · padding ซ้าย 20px · ค่าพิมพ์ navy 16px */
#wtw-step1 .form-control {
    width: 100%;
    height: 55px;
    border: 1px solid #CCCCCC;
    border-radius: 28px;
    padding: 0 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--primary);
    background: #fff;
    box-shadow: none;
}
#wtw-step1 .form-control::placeholder { color: #CCCDCD; }
#wtw-step1 .form-control:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(6, 188, 127, 0.15);
}
/* ปุ่ม Find — h62 · radius31 (pill) · เขียว · Poppins-Bold 23px uppercase · shadow แบบการ์ด */
#wtw-step1 .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 62px;
    margin-top: 36px;
    border: 0;
    border-radius: 31px;
    padding: 0 24px;
    background: var(--secondary);
    color: #fff;
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 23px;
    text-transform: uppercase;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: background 0.15s ease;
}
#wtw-step1 .btn-primary:hover { background: #0B9C57; }
/* note ใต้ปุ่ม — Poppins Regular 14px #A0A0A0 */
#wtw-step1 form > p {
    margin: 28px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #A0A0A0;
    line-height: 1.5;
}

/* ============================================================
   STEP 2 — Choose returns (ค่าตรงตาม Adobe XD เป๊ะ — artboard 1920)
   ============================================================ */

/* เส้น stepper จะเป็นเขียวเมื่อขั้นนั้น active/ผ่านแล้ว (เช่น เส้น 1→2 ตอนอยู่ step 2) */
.wtw-tabs .nav-link.active::before,
.wtw-tabs .nav-link.completed::before { background: var(--secondary); }

/* การ์ด — เหมือน step 1: w560 · radius20 · shadow 0 3px 3px rgba(0,0,0,.16) */
#wtw-step2 {
    max-width: 650px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 40px;
}
/* หัวข้อ — Poppins-Bold 30px navy */
#wtw-step2 h2 {
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
    margin: 0 0 8px;
}
/* บรรทัดออเดอร์ย่อย — Regular 16px navy, เลขออเดอร์/วันที่ตัวหนา */
#wtw-step2 .wtw-order-detail {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--primary);
    margin: 0 0 24px;
}
#wtw-step2 .wtw-order-detail .js-order-ref,
#wtw-step2 .wtw-order-detail .js-received {
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-weight: 600;
}

/* รายการสินค้า */
#wtw-step2 .wtw-lines { display: flex; flex-direction: column; gap: 20px; margin: 0; }
/* แถวสินค้า — radius10 · border 1px · เงาแบบการ์ด · จัดบนสุด */
#wtw-step2 .wtw-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
}
/* แถวที่เลือก = ขอบ navy (พื้นยังขาว) */
#wtw-step2 .wtw-line.is-selected { border-color: var(--primary); background: #fff; }

/* Checkbox วงกลม 29px — uncheck ขาว+ขอบเทา / check navy+ติ๊กขาว */
#wtw-step2 .wtw-pick-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 29px;
    height: 29px;
    margin: 0;
    flex-shrink: 0;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#wtw-step2 .wtw-pick-cb:checked {
    border-color: var(--primary);
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* ชื่อสินค้า — SemiBold 16px navy */
#wtw-step2 .wtw-line-name {
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--primary);
    margin: 0;
}
#wtw-step2 .wtw-line .wtw-line-check {
    margin-top: 5px;
}
/* meta (Varenr. | købt antal) — SemiBold 16px navy + เส้นคั่น navy */
#wtw-step2 .wtw-line-product-detail { display: flex; gap: 12px; align-items: center; }
#wtw-step2 .wtw-line-sku, #wtw-step2 .wtw-line-quantity {
    font-family: 'Poppins', 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--primary) !important;
}
#wtw-step2 .wtw-line-quantity { border-left: 1px solid var(--primary); padding-left: 12px; }

/* ราคา — SemiBold 16px navy ชิดขวา */
#wtw-step2 .wtw-line-total { white-space: nowrap; }
#wtw-step2 .wtw-line-unit {
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--primary) !important;
}

/* ตัวปรับจำนวน — pill 113×41 · radius33 · ขอบ #F0F0F0 2px · −/เลข/+ 16px navy */
#wtw-step2 .wtw-line-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 41px;
    margin-top: 12px;
    padding: 0 6px;
    border: 2px solid #F0F0F0;
    border-radius: 33px;
    background: #fff;
    width: fit-content;
}
#wtw-step2 .wtw-line-qty.hidden {
    height: 0;
    margin: 0 !important;
    display: none;
}
#wtw-step2 .wtw-line-qty .wtw-qty-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--primary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
#wtw-step2 .wtw-line-qty .wtw-qty-btn:hover:not(:disabled) { background: #F0F0F0; }
/* ซ่อนข้อความ "Items to return :" เหลือแค่ตัวเลขในpill */
#wtw-step2 .wtw-line-qty > span {
    font-size: 0;
    min-width: 24px;
    text-align: center;
}
#wtw-step2 .wtw-line-qty .quantity-return {
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--primary);
    line-height: 36px;
}

/* เส้นคั่นก่อน Begrundelse — #A0A0A0 1px */
#wtw-step2 .form-group {
    border-top: 1px solid #A0A0A0;
    margin-top: 30px;
    padding-top: 20px;
}
/* label "Begrundelse (valgfrit)" — SemiBold 16px navy + (valgfrit) Regular 14px เทา */
#wtw-step2 .form-group label {
    display: block;
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--primary);
    margin-bottom: 12px;
    text-align: left;
}
#wtw-step2 .form-group label .wtw-opt {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #A0A0A0;
    margin-left: 6px;
}
/* textarea — radius10 · border #CCCCCC · Regular 14px navy */
#wtw-step2 #wtw-reason {
    width: 100%;
    min-height: 80px;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    padding: 12px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--primary);
    background: #fff;
    resize: vertical;
    box-shadow: none;
}
#wtw-step2 #wtw-reason::placeholder { color: #A0A0A0; }
#wtw-step2 #wtw-reason:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(6, 188, 127, 0.15);
}

/* ปุ่ม — เรียง: Continue เต็มกว้าง → note → Back (ลิงก์ข้อความ) */
#wtw-step2 .d-flex {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
}
#wtw-step2 #wtw-continue { order: 1; }
#wtw-step2 .wtw-note { order: 3; }
#wtw-step2 .js-back-to-find {
    order: 2;
}
/* note ใต้ปุ่ม — Poppins Regular 14px #A0A0A0 */
#wtw-step2 .wtw-note {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #A0A0A0;
    line-height: 1.5;
}
#wtw-step2 #wtw-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 62px;
    border: 0;
    border-radius: 31px;
    padding: 0 24px;
    background: var(--secondary);
    color: #fff;
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 23px;
    text-transform: uppercase;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: background 0.15s ease;
}
#wtw-step2 #wtw-continue:hover:not(:disabled) { background: #0B9C57; }
#wtw-step2 #wtw-continue:disabled { background: var(--pale-Gray); color: #9aa2ad; box-shadow: none; cursor: not-allowed; }
#wtw-step2 .js-back-to-find {
    align-self: center;
    border: 0;
    background: transparent;
    padding: 4px 8px;
    color: var(--primary);
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-size: 16px;
    cursor: pointer;
    order: 2;
}
#wtw-step2 .js-back-to-find:hover { text-decoration: underline; }

/* ============================================================
   STEP 3 — Confirm (ตามดีไซน์ WT — meta table + กล่องยอด navy + 2 ปุ่ม)
   ============================================================ */
#wtw-step3 {
    max-width: 650px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 40px;
}
/* หัวข้อ — Poppins-Bold 30px navy */
#wtw-step3 h2 {
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
    margin: 0 0 8px;
}
/* lead — Regular 16px navy; วลีเน้น "lovpligtigt" เขียว */
#wtw-step3 .text-muted {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--primary) !important;
    margin: 0 0 24px;
}
#wtw-step3 .wtw-lead-em {
    color: var(--secondary);
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-weight: 600;
}
/* meta table — ไม่มีพื้นหลัง, แถวคั่นเส้นบาง, label ซ้าย/ค่า ขวาตัวหนา */
#wtw-step3 .wtw-order-meta {
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
#wtw-step3 .wtw-order-meta > .wtw-order-meta-line {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    border-bottom: 1px solid #E9E9E9;
    padding: 14px 0;
}
#wtw-step3 .wtw-order-meta-line-title {
    flex: 0 0 auto;
    width: auto;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--primary);
    white-space: nowrap;
}
#wtw-step3 .wtw-order-meta-line-info {
    flex: 1;
    width: auto;
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--primary);
    text-align: right;
}
#wtw-step3 .wtw-summary-lines {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}
/* กล่องยอดเงิน — navy, ป้ายขาว + ยอดใหญ่ขาว */
#wtw-step3 .wtw-amount-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0;
    padding: 18px 24px;
    background: var(--primary);
    border-radius: 12px;
}
#wtw-step3 .wtw-amount-box-label {
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-size: 18px;
    color: #fff;
    line-height: 1.2;
}
#wtw-step3 .wtw-amount-box-sub {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 2px;
}
#wtw-step3 .wtw-amount-box-value {
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 28px;
    color: #fff;
    white-space: nowrap;
}
/* ปุ่ม 2 อัน เรียงข้างกัน — TILBAGE (ghost) + FORTRYD NU (เขียว) */
#wtw-step3 .d-flex {
    display: flex !important;
    gap: 16px;
    margin-top: 24px;
    align-items: stretch;
}
#wtw-step3 .btn-success {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    border: 0;
    border-radius: 31px;
    padding: 0 24px;
    background: var(--secondary);
    color: #fff;
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: background 0.15s ease;
}
#wtw-step3 .btn-success:hover:not(:disabled) { background: #0B9C57; }
#wtw-step3 .btn-success:disabled { background: var(--pale-Gray); color: #9aa2ad; box-shadow: none; cursor: not-allowed; }
#wtw-step3 .js-back-to-select {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    padding: 0 36px;
    border: 1px solid var(--primary);
    border-radius: 31px;
    background: #fff;
    color: var(--primary);
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
#wtw-step3 .js-back-to-select:hover { background: var(--primary); color: #fff; }
/* note */
#wtw-step3 .wtw-note {
    margin: 24px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #A0A0A0;
    line-height: 1.5;
}

/* ============================================================
   STEP 4 — Success / Kvittering (ตามดีไซน์ WT)
   ============================================================ */
#wtw-success {
    max-width: 650px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 40px;
}
/* ไอคอนสำเร็จ — ใช้ checked.svg (มีวงกลมเขียว+ติ๊กในตัว) ชิดซ้าย */
#wtw-success .wtw-success-icon {
    display: block;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
}
#wtw-success h2 {
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
    margin: 0 0 8px;
}
/* lead — Regular 16px navy; วลีเน้นเขียว */
#wtw-success .text-muted {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--primary) !important;
    margin: 0 0 28px;
}
#wtw-success .wtw-lead-em {
    color: var(--secondary);
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-weight: 600;
}
/* หัวข้อย่อย */
#wtw-success .wtw-success-heading {
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-size: 18px;
    color: var(--primary);
    margin: 0 0 12px;
}
/* กล่องที่อยู่ — เทาอ่อน + ขอบ */
#wtw-success .wtw-address-return {
    background: var(--Light-Gray);
    border: 1px solid #E9E9E9;
    border-radius: 10px;
    padding: 18px 20px;
    margin: 0 0 28px;
}
#wtw-success .wtw-address-return p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--primary);
    margin: 0;
}
/* ref pill — navy */
#wtw-success .wtw-ref-pill {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 16px;
    background: var(--primary);
    color: #fff;
    border-radius: 20px;
    font-family: 'Poppins-SemiBold', 'Poppins', sans-serif;
    font-size: 14px;
}
/* รายการกฎ — ใช้ img1-4.svg (มีวงกลม navy+ไอคอนในตัว) + ข้อความ */
#wtw-success .wtw-return-info { margin: 0 0 28px; }
#wtw-success .wtw-return-info-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
}
#wtw-success .wtw-return-info-line:last-child { padding-bottom: 0; }
#wtw-success .wtw-return-info-line-icon {
    flex: 0 0 auto;
    display: block;
    width: 38px;
    height: auto;
}
#wtw-success .wtw-return-info-line-text {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: var(--primary);
}
/* ปุ่ม returportal — navy เต็มกว้าง pill */
#wtw-success .btn-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 62px;
    border: 0;
    border-radius: 31px;
    padding: 0 24px;
    background: var(--primary);
    color: #fff;
    font-family: 'Poppins-Bold', 'Poppins', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: background 0.15s ease;
}
#wtw-success .btn-info:hover { background: #15294a; }
/* "eller send selv..." — เทา กลาง */
#wtw-success .wtw-success-or {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #A0A0A0;
    margin: 16px 0 0;
}
/* note */
#wtw-success .wtw-note {
    margin: 20px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #A0A0A0;
    line-height: 1.5;
}

/* ============================================================
   RESPONSIVE — แท็บเล็ต ≤767px / มือถือ ≤575px
   (รวมไว้ท้ายไฟล์ เรียง 767 → 575 ให้ลำดับ cascade ถูก: จอเล็กกว่าทับทีหลัง)
   ============================================================ */
@media (max-width: 767px) {
    /* การ์ดทุก step */
    #wtw-step1, #wtw-step2, #wtw-step3, #wtw-success { padding: 32px; }
    /* stepper เล็กลงเล็กน้อย ใช้ความกว้างเต็ม */
    .wtw-tabs { max-width: 100%; }
    .wtw-tabs .nav-link { gap: 0.5rem; }
    .wtw-tabs .nav-link .wtw-tab-num { width: 48px; height: 48px; font-size: 1.3rem; }
    .wtw-tabs .nav-item:not(:first-child) .nav-link::before { top: 24px; }
    .wtw-tabs .nav-link .wtw-tab-label { font-size: 14px; }
    /* หัวข้อ */
    #wtw-step1 h2, #wtw-step2 h2, #wtw-step3 h2, #wtw-success h2 { font-size: 26px; }
    /* ปุ่มหลัก */
    #wtw-step1 .btn-primary, #wtw-step2 #wtw-continue { font-size: 20px; }
    #wtw-step3 .btn-success, #wtw-step3 .js-back-to-select { font-size: 17px; }
    #wtw-step3 .js-back-to-select { padding: 0 24px; }
}

@media (max-width: 575px) {
    /* การ์ด — padding กระชับ */
    #wtw-step1, #wtw-step2, #wtw-step3, #wtw-success {
        padding: 20px;
    }    /* stepper — วงเล็ก, label สั้น */
    .wtw-tabs {
        margin-bottom: 10px;
    }
    body#module-watertradewithdrawal-withdraw div#content {
        padding: 0 10px;
    }
    .wtw-tabs .nav-link { gap: 0.35rem; }
    .wtw-tabs .nav-link .wtw-tab-num { width: 38px; height: 38px; font-size: 1.05rem; }
    .wtw-tabs .nav-item:not(:first-child) .nav-link::before { top: 19px; }
    .wtw-tabs .nav-link .wtw-tab-label {
        font-size: 10px;
        line-height: normal;
    }
    /* หัวข้อ + lead — ฟอนต์เล็กลงให้พอดีมือถือ */
    #wtw-step1 h2, #wtw-step2 h2, #wtw-step3 h2, #wtw-success h2 { font-size: 20px; }
    #wtw-step1 .text-muted, #wtw-step2 .wtw-order-detail,
    #wtw-step3 .text-muted, #wtw-success .text-muted { font-size: 14px; }

    /* ฟิลด์ — label เล็กลง + ช่องกรอกเตี้ยลง */
    #wtw-step1 label, #wtw-step2 .form-group label { font-size: 14px; margin-bottom: 8px; }
    #wtw-step1 .form-group { margin-bottom: 16px; }
    #wtw-step1 .form-control {
        height: 46px;
        font-size: 15px;
        padding: 0 18px;
        border-radius: 23px;
    }
    #wtw-step1 .text-muted {
        margin: 0 0 20px;
    }
    #wtw-step2 #wtw-reason { font-size: 14px; min-height: 70px; padding: 10px 16px; }

    /* ปุ่ม — เตี้ยลง */
    #wtw-step1 .btn-primary, #wtw-step2 #wtw-continue {
        font-size: 17px;
        height: 52px;
        margin-top: 0px;
    }
    #wtw-step3 .btn-success, #wtw-step3 .js-back-to-select, #wtw-success .btn-info { font-size: 16px; height: 52px; }
    #wtw-step3 .btn-success, #wtw-step3 .js-back-to-select, #wtw-success .btn-info {
        font-size: 16px;
        height: 52px;
        display: flex;
        padding: 15px;
    }
    /* note ทุก step เล็กลง */
    #wtw-step1 form > p, #wtw-step2 .wtw-note,
    #wtw-step3 .wtw-note, #wtw-success .wtw-note { font-size: 13px; }
  
    /* step2 — แถวสินค้ากระชับ + ฟอนต์เล็กลง + meta ตัดบรรทัดได้ */
    #wtw-step2 .wtw-line { padding: 14px; gap: 12px; }
    #wtw-step2 .wtw-line-name, #wtw-step2 .wtw-line-unit {
        font-size: 13px;
        line-height: normal;
    }
    #wtw-step2 .wtw-line-sku, #wtw-step2 .wtw-line-quantity {
        font-size: 11px;
        line-height: normal;
    }
    #wtw-step2 .wtw-line-quantity {
        border-left: 0px solid var(--primary);
        padding-left: 0;
    }
    #wtw-step2 .wtw-line-product-detail {
        flex-wrap: wrap;
        gap: 0;
    }
    #wtw-step2 .wtw-pick-cb { width: 26px; height: 26px; }
    #wtw-step1 .text-muted, #wtw-step2 .wtw-order-detail, #wtw-step3 .text-muted, #wtw-success .text-muted {
        font-size: 12px;
        margin-bottom: 10px;
    }
    #wtw-step2 .wtw-line-qty {
        height: 31px;
    }
    /* step3 — ปุ่มเรียงแนวตั้ง (Confirm บน, Back ล่าง) + กล่องยอด/meta เล็กลง */
    #wtw-step3 .d-flex { flex-direction: column; }
    #wtw-step3 .btn-success { order: 1; }
    #wtw-step3 .js-back-to-select { order: 2; flex: 1; }
    #wtw-step3 .wtw-order-meta > .wtw-order-meta-line { gap: 12px; padding: 12px 0; }
    #wtw-step3 .wtw-order-meta-line-title, #wtw-step3 .wtw-order-meta-line-info { font-size: 14px; }
    #wtw-step3 .wtw-amount-box { padding: 16px 18px; }
    #wtw-step3 .wtw-amount-box-label { font-size: 15px; }
    #wtw-step3 .wtw-amount-box-value { font-size: 20px; }

    /* step4 — หัวข้อย่อย/ที่อยู่/กฎ เล็กลง */
    #wtw-success .wtw-success-heading { font-size: 16px; }
    #wtw-success .wtw-address-return p { font-size: 14px; }
    #wtw-success .wtw-ref-pill { font-size: 13px; }
    #wtw-success .wtw-return-info-line-text { font-size: 14px; }
    #wtw-success .wtw-return-info-line-icon { width: 34px; }

    .wtw-container{
        padding:0;
    }
}