/* =========================================================
   subscribe.css
   สไตล์สำหรับฟอร์มสมัครใช้งาน (public-facing, ธีมสีน้ำเงินแยกจาก
   ธีม admin backend ใน base.css เนื่องจากเป็นหน้าลูกค้าเห็น)
   ========================================================= */

:root {
    /* ธีมสีอิงจากหน้า sale page (index.html): ม่วง #3A3A8E + เหลือง #F8C150 */
    --primary: #3A3A8E;          /* --purple ของ index */
    --primary-dark: #2A2A68;     /* --purple-deep */
    --primary-soft: #5E45BE;     /* --purple-soft */
    --primary-light: #ECE9F8;    /* ม่วงอ่อนสำหรับพื้นการ์ดที่ถูกเลือก */
    --primary-border: #B9B0E4;
    --accent: #F8C150;           /* --yellow: สีปุ่ม CTA หลัก */
    --text-primary: #2B2A3F;     /* --ink */
    --text-secondary: #55536A;
    --text-tertiary: #6B6980;   /* --ink-soft ของ index — ใช้กับ hint/คำอธิบายที่ต้องอ่านจริง */
    --placeholder: #B3B0C8;      /* เทาม่วงจาง — ข้อความตัวอย่างในช่อง มองปุ๊บรู้ว่ายังไม่ได้กรอก */
    --border: #EDEBF5;           /* --line ของ index */
    --border-hover: #CBC7E0;
    --bg-page: #F2F1FB;          /* --bg ของ index: ขาวอมม่วง */
    --bg-card: #FFFFFF;
    --bg-input: #FBFAFF;
    --success: #27AE74;          /* --green ของ index */
    --danger: #E24B4A;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Mali', sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.6;
    padding: 48px 20px 80px;
  }

  .wrap {
    max-width: 680px;
    margin: 0 auto;
  }

  /* Header */
  .form-header {
    text-align: center;
    margin-bottom: 36px;
  }
  .form-header .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--primary-border);
    margin-bottom: 16px;
    letter-spacing: 0.02em;
  }
  .form-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
  .form-header p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 auto;
  }

  /* Card */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 1px 12px rgba(0,0,0,0.02);
  }
  .card + .card { margin-top: 16px; }

  /* Section */
  .section { margin-bottom: 38px; }
  .section:last-child { margin-bottom: 0; }

  .section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }
  .section-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
  }

  /* Field grid */
  .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .field { margin-bottom: 24px; }
  .field:last-child { margin-bottom: 0; }

  label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 9px;
  }
  label .optional {
    font-weight: 400;
    color: var(--text-tertiary);
    font-size: 12px;
    margin-left: 4px;
  }
  label .req { color: var(--danger); margin-left: 2px; }

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="url"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }
  input::placeholder { color: var(--placeholder); }
  input:hover { border-color: var(--border-hover); }
  input:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--primary-light);
  }
  input.error {
    border-color: var(--danger);
  }
  input.error:focus {
    box-shadow: 0 0 0 3px #FCEBEB;
  }

  .input-icon-wrap { position: relative; }
  .input-icon-wrap input { padding-left: 40px; }
  .input-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--text-tertiary);
    pointer-events: none;
  }

  .field-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 6px;
  }
  .field-error {
    font-size: 12px;
    color: var(--danger);
    margin-top: 8px;
    display: none;
    align-items: center;
    gap: 4px;
  }
  .field-error.show { display: flex; }

  .tenant-input-wrap.error {
    border-color: var(--danger);
  }
  .tenant-input-wrap.error:focus-within {
    box-shadow: 0 0 0 3px #FCEBEB;
  }
  .tenant-input-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    overflow: hidden;
  }
  .tenant-input-wrap:hover { border-color: var(--border-hover); }
  .tenant-input-wrap:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--primary-light);
  }
  .tenant-input-wrap.error {
    border-color: var(--danger);
  }
  .tenant-input-wrap.error:focus-within {
    box-shadow: 0 0 0 3px #FCEBEB;
  }
  .tenant-input-wrap input {
    flex: 1;
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    min-width: 0;
  }
  .tenant-suffix {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    background: var(--border);
    background: rgba(0,0,0,0.03);
    border-left: 1px solid var(--border);
    white-space: nowrap;
  }
  .tenant-input-wrap.valid input {
    color: var(--success);
  }

  /* Opening hours */
  .hours-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .time-select-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    height: 46px;
    padding: 0 8px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }
  .time-select-group:hover { border-color: var(--border-hover); }
  .time-select-group:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--primary-light);
  }
  .time-select-group select {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
  }
  .time-select-group select:invalid { color: var(--text-tertiary); }
  .time-colon {
    color: var(--text-tertiary);
    font-weight: 600;
    flex-shrink: 0;
  }
  .hours-sep {
    color: var(--text-tertiary);
    font-size: 13px;
    flex-shrink: 0;
  }

  /* Suffix picker */
  .suffix-picker {
    margin-top: 12px;
  }
  .suffix-picker-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .suffix-preview-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .suffix-option {
    position: relative;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    padding: 10px 10px 10px 12px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .suffix-option:hover {
    border-color: var(--primary-border);
    background: #fff;
  }
  .suffix-option.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(24,95,165,0.10);
  }
  .suffix-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .suffix-opt-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
  }
  .suffix-option.selected .suffix-opt-num {
    color: var(--primary-dark);
  }
  .suffix-opt-url {
    font-size: 10px;
    color: var(--text-tertiary);
    word-break: break-all;
    line-height: 1.4;
  }
  .suffix-option.selected .suffix-opt-url {
    color: var(--primary);
  }
  .suffix-option-check {
    position: absolute;
    top: 8px; right: 8px;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--border-hover);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .suffix-option.selected .suffix-option-check {
    background: var(--primary);
    border-color: var(--primary);
  }
  .suffix-option-check svg {
    width: 8px; height: 8px;
    opacity: 0;
    transition: opacity 0.12s;
  }
  .suffix-option.selected .suffix-option-check svg { opacity: 1; }

  /* Edition cards */
  .edition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 14px;
  }
  .edition-card {
    position: relative;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-input);
  }
  .edition-card:hover {
    border-color: var(--primary-border);
    background: #fff;
  }
  .edition-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(24,95,165,0.08);
  }
  .edition-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .edition-popular {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }
  .edition-popular-demo {
    background: var(--success);
    color: #fff;
  }
  .edition-card.edition-demo {
    border-style: dashed;
  }
  .edition-card.edition-demo.selected {
    border-style: solid;
  }
  .edition-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border-hover);
    background: #fff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }
  .edition-card.selected .edition-check {
    border-color: var(--primary);
    background: var(--primary);
  }
  .edition-check svg {
    width: 11px; height: 11px;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .edition-card.selected .edition-check svg { opacity: 1; }
  .edition-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
  }
  .edition-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px;
  }
  .edition-price span {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .edition-tagline {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  /* Subscription duration picker (ซ่อนไว้อัตโนมัติเมื่อเลือก Premium Trial) */
  .duration-section-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
  }
  .duration-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .duration-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--bg-input);
  }
  .duration-option:hover {
    border-color: var(--primary-border);
    background: #fff;
  }
  .duration-option.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(24,95,165,0.08);
  }
  .duration-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .duration-option-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border-hover);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .duration-option.selected .duration-option-check {
    border-color: var(--primary);
    background: var(--primary);
  }
  .duration-option-check svg {
    width: 11px; height: 11px;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .duration-option.selected .duration-option-check svg { opacity: 1; }
  .duration-option-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .price-summary {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bg-input);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
  }
  .price-summary-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 13.5px;
    gap: 4px 10px;
  }
  .price-summary-row span:first-child { color: var(--text-secondary); flex-shrink: 0; }
  .price-summary-row span:last-child { font-weight: 700; color: var(--primary-dark); text-align: right; min-width: 0; word-break: break-word; flex: 1 1 auto; }
  .price-summary-row.sub span:last-child { font-weight: 500; color: var(--text-secondary); font-size: 12px; }

  /* Submit */
  .submit-section {
    margin-top: 8px;
  }
  .submit-btn {
    width: 100%;
    height: 56px;
    background: var(--accent);
    color: var(--primary-dark);
    box-shadow: 0 14px 28px -10px rgba(248,193,80,.8);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
  }
  .submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -10px rgba(248,193,80,.9);
  }
  .submit-btn svg { width: 18px; height: 18px; }

  /* Terms & Conditions */
  .terms-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 10px;
  }
  .terms-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
  }
  .terms-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .terms-box {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border: 1.5px solid var(--border-hover);
    border-radius: 5px;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: all 0.15s;
  }
  .terms-box svg { width: 11px; height: 11px; opacity: 0; transition: opacity 0.12s; }
  .terms-label:hover .terms-box { border-color: var(--primary); }
  .terms-label input:checked ~ .terms-box {
    background: var(--primary);
    border-color: var(--primary);
  }
  .terms-label input:checked ~ .terms-box svg { opacity: 1; }
  .terms-wrap.error-state .terms-box { border-color: var(--danger); }
  .terms-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
  }
  .terms-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
  }
  .terms-link:hover { text-decoration: underline; }

  .form-footnote {
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 14px;
  }

  /* Success state */
  .success-card {
    display: none;
    text-align: center;
    padding: 56px 32px;
  }
  .success-card.show { display: block; }
  .success-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #E5F6EE;
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
  }
  .success-icon svg { width: 30px; height: 30px; }
  .success-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .success-card p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 360px;
    margin: 0 auto;
  }

  .success-steps {
    text-align: left;
    max-width: 400px;
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .success-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
  }
  .success-step-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .success-step-text { display: flex; flex-direction: column; gap: 2px; }
  .success-step-text strong { font-size: 13.5px; color: var(--text-primary); font-weight: 700; }
  .success-step-text span { font-size: 12.5px; color: var(--text-secondary); }

  .success-note {
    font-size: 12px;
    color: var(--text-tertiary);
    max-width: 400px;
    margin: 18px auto 0;
  }

  /* Confirm modal */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(31,35,40,0.45);
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
  }
  .modal-overlay.show,
  .modal-overlay.open { display: flex; }
  .modal-box {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    max-width: 380px;
    width: 100%;
    padding: 32px 28px 28px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    animation: modalPop 0.18s ease;
  }
  @keyframes modalPop {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  .modal-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
  }
  .modal-icon svg { width: 26px; height: 26px; }
  .modal-box h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
  .modal-box p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .modal-actions {
    display: flex;
    gap: 10px;
  }
  .modal-btn {
    flex: 1;
    height: 46px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .modal-btn-cancel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
  }
  .modal-btn-cancel:hover { background: var(--bg-page); border-color: var(--border-hover); }
  .modal-btn-confirm {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
  }
  .modal-btn-confirm:hover { background: var(--primary-dark); }

  /* =========================================================
     Bootstrap Modal — overrides เพื่อให้ตรงกับธีม
     ========================================================= */

  /* เนื้อหาข้อกำหนด/นโยบาย */
  .modal-content { border-radius: var(--radius-xl); border: none; font-family: 'Mali', sans-serif; }
  .modal-header  { border-bottom-color: var(--border); padding: 20px 24px 16px; }
  .modal-footer  { border-top-color: var(--border); padding: 14px 24px 18px; justify-content: flex-end; }

  .doc-body {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.75;
  }
  .doc-body h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 20px 0 8px; }
  .doc-body section:first-child h3 { margin-top: 0; }
  .doc-body p   { margin: 0 0 10px; }
  .doc-body ul  { padding-left: 20px; margin: 0 0 10px; }
  .doc-body li  { margin-bottom: 4px; }
  .doc-body .notice {
    background: #F0F6FF;
    border: 1px solid #C7DCF8;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #1a4f8a;
  }
  .doc-body .company { font-weight: 700; color: var(--text-primary); }

  /* ปุ่มยอมรับใน footer */
  .accept-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 11px 28px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
  }
  .accept-btn:hover { background: var(--primary-dark); }

  /* Confirm modal — icon */
  .confirm-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
  }
  .confirm-icon svg { width: 26px; height: 26px; }

  /* Terms/Privacy document modal (mockup content) — กว้างกว่า .modal-box เพราะต้อง
     แสดงเนื้อหายาว, เนื้อหาเลื่อนได้เอง (header/footer คงที่) */
  .doc-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(31,35,40,0.45);
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 110;
  }
  .doc-modal-overlay.show { display: flex; }
  .doc-modal-box {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    max-width: 620px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    animation: modalPop 0.18s ease;
    overflow: hidden;
  }
  .doc-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .doc-modal-header h3 { font-size: 17px; font-weight: 700; color: var(--text-primary); }
  .doc-modal-header p { font-size: 12.5px; color: var(--text-tertiary); margin-top: 4px; }
  .doc-modal-close {
    background: none; border: none; color: var(--text-secondary); cursor: pointer;
    padding: 4px; border-radius: 6px; flex-shrink: 0;
  }
  .doc-modal-close:hover { background: var(--bg-page); color: var(--text-primary); }
  .doc-modal-close svg { width: 18px; height: 18px; display: block; }

  .doc-modal-mock-banner {
    margin: 18px 24px 0;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: #FFF6E5;
    border: 1px solid #F0D89A;
    color: #8A5A00;
    font-size: 12.5px;
    line-height: 1.6;
    flex-shrink: 0;
  }

  .doc-modal-body {
    padding: 16px 24px 8px;
    overflow-y: auto;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.75;
  }
  .doc-modal-body h4 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 18px 0 6px; }
  .doc-modal-body h4:first-child { margin-top: 0; }
  .doc-modal-body p { margin-bottom: 10px; }
  .doc-modal-body ul { margin: 0 0 10px 18px; }
  .doc-modal-body li { margin-bottom: 4px; }

  .doc-modal-footer { padding: 16px 24px 22px; flex-shrink: 0; }
  .doc-modal-footer-btn {
    width: 100%; height: 46px; border-radius: var(--radius-md);
    background: var(--primary); border: 1px solid var(--primary); color: #fff;
    font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: background 0.15s;
  }
  .doc-modal-footer-btn:hover { background: var(--primary-dark); }

  @media (max-width: 560px) {
    .field-row { grid-template-columns: 1fr; }
    .edition-grid { grid-template-columns: 1fr; }
    .duration-picker { grid-template-columns: 1fr; }
    .card { padding: 22px 18px; }
    body { padding: 28px 14px 60px; }
  }

  /* =========================================================
     ส่วนเพิ่มเติม: Tenant live preview + real-time status
     (UX improvement — เปลี่ยนศัพท์ Tenant เป็นภาษาลูกค้า
      และเช็คชื่อว่างแบบ real-time)
     ========================================================= */
  .tenant-preview {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--text-tertiary);
  }
  .tenant-preview strong {
    color: var(--primary);
    font-weight: 600;
    word-break: break-all;
  }

  .tenant-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 500;
  }
  .tenant-status.checking { color: var(--text-tertiary); }
  .tenant-status.available { color: var(--success); }
  .tenant-status svg { flex-shrink: 0; }

  /* วงกลมหมุนตอนกำลังเช็คชื่อกับ server */
  .tenant-status .spin {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: tenantSpin 0.7s linear infinite;
  }
  @keyframes tenantSpin { to { transform: rotate(360deg); } }

  /* =========================================================
     ส่วนเพิ่มเติม: ปุ่มกางช่องทางโซเชียลเพิ่มเติม
     ========================================================= */
  .social-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
  }
  .social-add-btn:hover { color: var(--primary-dark); text-decoration: underline; }

  /* =========================================================
     ส่วนเพิ่มเติม: Trust signals + สถานะปุ่มกำลังส่ง
     ========================================================= */
  .trust-signals {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-tertiary);
  }
  .trust-item svg { flex-shrink: 0; color: var(--success); }

  /* ปุ่มติดต่อ LINE OA — ใช้สีเขียวมาตรฐานของ LINE ให้จำได้ทันที */
  .line-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #06C755;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
  }
  .line-contact-btn:hover { background: #05B24C; }
  .line-contact-btn:active { transform: scale(0.98); }
  .line-contact-btn svg { flex-shrink: 0; }

  /* ปุ่ม submit ตอนกำลังส่ง: จางลง + spinner หมุน กันกดซ้ำ */
  .submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
  .submit-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(42,42,104,0.25);
    border-top-color: var(--primary-dark);
    border-radius: 50%;
    animation: tenantSpin 0.7s linear infinite; /* reuse keyframes เดิม */
  }


  /* =========================================================
     ส่วนเพิ่มเติม: Accessibility — focus state ที่มองเห็นได้
     สำหรับผู้ใช้คีย์บอร์ด (กด Tab ไล่ช่อง)
     การ์ดพวกนี้ซ่อน radio ไว้ (opacity:0) เลยไม่มีกรอบ focus
     ของเบราว์เซอร์ให้เห็น — เพิ่มกรอบเองที่ตัวการ์ดแทน
     ========================================================= */

  /* พื้นฐาน: :focus-within รองรับทุกเบราว์เซอร์ */
  .edition-card:focus-within,
  .duration-option:focus-within,
  .suffix-option:focus-within,
  .terms-label:focus-within {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--radius-md);
  }

  /* เบราว์เซอร์ใหม่: แสดงกรอบเฉพาะตอนใช้คีย์บอร์ดจริง (:focus-visible)
     คลิกเมาส์จะไม่เห็นกรอบ — ไม่รกสายตาผู้ใช้ทั่วไป */
  @supports selector(:has(*)) {
    .edition-card:focus-within,
    .duration-option:focus-within,
    .suffix-option:focus-within,
    .terms-label:focus-within {
      outline: none;
    }
    .edition-card:has(input:focus-visible),
    .duration-option:has(input:focus-visible),
    .suffix-option:has(input:focus-visible),
    .terms-label:has(input:focus-visible) {
      outline: 3px solid var(--primary);
      outline-offset: 3px;
      border-radius: var(--radius-md);
    }
  }

  /* ปุ่มและลิงก์อื่นๆ ให้กรอบชัดตอน Tab ถึงเช่นกัน */
  .submit-btn:focus-visible,
  .social-add-btn:focus-visible,
  .line-contact-btn:focus-visible,
  .terms-link:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
  }

  /* =========================================================
     ส่วนเพิ่มเติม: Time picker แบบ AM/PM + ปุ่มเวลายอดนิยม
     ========================================================= */
  .time-field {
    position: relative;
    flex: 1;
  }
  .time-field-label {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    margin-bottom: 4px;
  }
  .time-display {
    width: 100%;
    height: 48px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--placeholder);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .time-display:hover { border-color: var(--border-hover); }
  .time-display.open,
  .time-display:focus-visible {
    outline: none;
    border-color: var(--primary-soft);
    box-shadow: 0 0 0 3px rgba(94,69,190,0.12);
  }
  .time-display.filled { font-weight: 600; color: var(--primary); }

  .time-pop {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(43,42,63,0.16);
    padding: 10px;
    gap: 8px;
  }
  .time-pop.show { display: flex; }
  .time-col {
    max-height: 168px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    padding-right: 2px;
  }
  .time-item {
    min-width: 44px;
    padding: 7px 0;
    border: none;
    background: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
  }
  .time-item:hover { background: var(--primary-light); }
  .time-item.selected {
    background: var(--primary-soft);
    color: #fff;
    font-weight: 600;
  }

  .time-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
  }
  .time-preset {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .time-preset:hover { border-color: var(--primary-border); background: var(--primary-light); }
  .time-clear {
    padding: 8px 4px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text-tertiary);
    cursor: pointer;
    text-decoration: underline;
  }
  .time-clear:hover { color: var(--danger); }

  /* =========================================================
     ส่วนเพิ่มเติม: Suffix chip โชว์เลขที่เลือก + Social chips
     ========================================================= */
  .tenant-suffix.chosen {
    color: var(--success);
    font-weight: 700;
    background: #E5F6EE;
  }

  .social-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
  }
  .social-chip {
    padding: 8px 18px;
    background: var(--primary-light);
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .social-chip:hover { background: #DFD9F3; }
  .social-chip.selected {
    background: var(--primary);
    color: #fff;
  }
  .social-chip.has-value:not(.selected)::after {
    content: ' ✓';
    color: var(--success);
  }

  @media (max-width: 560px) {
    .time-pop { left: 50%; transform: translateX(-50%); }
  }

  /* =========================================================
     ส่วนเพิ่มเติม: ตัวเลือกช่องทางติดต่อกลับ (ทัก LINE / โทรกลับ)
     สไตล์ radio pill — วงกลม radio จริงให้เห็น เลือกแล้วขอบม่วง
     ========================================================= */
  .contact-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .contact-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 20px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  }
  .contact-option:hover {
    border-color: var(--primary-border);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(58,58,142,0.10);
  }
  .contact-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  /* ไอคอนสีประจำช่องทาง: LINE เขียวแบรนด์ / โทรศัพท์ชมพู */
  .contact-option svg { flex-shrink: 0; }
  .contact-option[data-channel="line"] svg  { color: #06C755; }
  .contact-option[data-channel="phone"] svg { color: #E8489B; }
  .contact-radio {
    width: 16px; height: 16px;
    border: 1.5px solid var(--border-hover);
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    transition: border-color 0.15s;
  }
  .contact-radio::after {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--primary);
    transform: scale(0);
    transition: transform 0.15s;
  }
  .contact-option.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(58,58,142,0.14);
  }
  .contact-option.selected .contact-radio { border-color: var(--primary); }
  .contact-option.selected .contact-radio::after { transform: scale(1); }

  /* focus state คีย์บอร์ด — แบบเดียวกับการ์ดอื่น */
  .contact-option:focus-within {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
  }
  @supports selector(:has(*)) {
    .contact-option:focus-within { outline: none; }
    .contact-option:has(input:focus-visible) {
      outline: 3px solid var(--primary);
      outline-offset: 3px;
    }
  }

  @media (max-width: 560px) {
    .contact-picker { grid-template-columns: 1fr; }
  }

  /* Social rows: บรรทัดช่องทางที่เปิดอยู่ เรียงลงมา + animation ตอนโผล่ */
  .social-row { margin-bottom: 12px; }
  .social-row:last-child { margin-bottom: 0; }
  .social-row:not([hidden]) { animation: rowIn 0.18s ease; }
  @keyframes rowIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }


  /* ปุ่ม "สุ่มเลขใหม่" ต่อท้ายสถานะ ✓ เขียว */
  .suffix-reroll {
    margin-left: 6px;
    padding: 2px 10px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .suffix-reroll:hover { border-color: var(--primary-border); background: var(--primary-light); }

  /* คำแนะนำแก้โดเมนอีเมลพิมพ์ผิด เช่น gmail.con → gmail.com */
  .email-suggest {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
  }
  .email-suggest button {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
  }
  .email-suggest button:hover { color: var(--primary-soft); }

  /* ตัวนับตัวอักษรชื่อร้าน โผล่เมื่อเริ่มพิมพ์ ใกล้เต็มเปลี่ยนเป็นสีเตือน */
  .char-counter {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-tertiary);
    text-align: right;
  }
  .char-counter.near-limit { color: #C77700; font-weight: 600; }
  .char-counter.at-limit { color: var(--danger); font-weight: 600; }

  /* =========================================================
     ส่วนเพิ่มเติม: Trial-only mode — header trust badges,
     showcase card, submit button variant
     (แสดงเฉพาะเมื่อเข้าด้วย ?edition=premium_trial)
     ========================================================= */

  /* Header */
  .form-header h1.trial-heading {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.25;
  }
  .header-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    margin-top: 18px;
  }
  .header-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--primary-soft);
    background: var(--primary-light);
    border-radius: 999px;
    padding: 5px 14px;
  }
  .header-trust-badge svg { flex-shrink: 0; }

  /* Trial Showcase Card */
  .trial-showcase-card {
    border: 2px solid var(--primary-border);
    border-radius: var(--radius-lg);
    background: var(--primary-light);
    overflow: hidden;
  }
  .trial-showcase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 0;
  }
  .trial-showcase-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
  }
  .trial-showcase-check svg { width: 14px; height: 14px; }
  .trial-showcase-auto-badge {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: var(--success);
    border-radius: 999px;
    padding: 4px 14px;
  }
  .trial-showcase-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px 10px;
  }
  .trial-showcase-icon {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
  }
  .trial-showcase-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
  }
  .trial-showcase-desc {
    font-size: 13px;
    color: var(--text-secondary);
  }
  .trial-showcase-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 4px 18px 14px;
    border-bottom: 1px solid var(--primary-border);
  }
  .trial-showcase-feat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
  }
  .trial-showcase-feat svg { color: var(--primary); flex-shrink: 0; }
  .trial-showcase-footer {
    padding: 10px 18px;
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
  }

  @media (max-width: 560px) {
    .header-trust-badges { gap: 8px 12px; }
    .trial-showcase-features { gap: 6px 14px; }
  }