/* ========= MODERN SIGN UP FORM Bootstrap 5 compatible (AASP Theme) ================= */
.signup-modern-page {
	/* AASP Main Theme Palette */
	--signup-primary: #D1236B;         /* aasp-primary */
	--signup-primary-dark: #A31250;    /* aasp-primary-dark */
	--signup-primary-soft: #FDEBF3;    /* aasp-primary-light */
	--signup-accent: #FEB713;          /* aasp-accent */
	--signup-text: #1E1A47;            /* aasp-indigo-dark */
	--signup-body: #2D2769;            /* aasp-indigo */
	--signup-muted: #6B668A;           /* ปรับสีเทาให้กลืนกับ indigo */
	--signup-border: #E5CDD8;          /* ปรับโทนขอบให้เข้ากับสีชมพู */
	--signup-border-soft: #F5E6ED;     
	--signup-bg: #FFFDF9;              /* aasp-bg-cream */
	--signup-white: #ffffff;
	
	color: var(--signup-body);
}
.signup-modern-container { /*max-width: 1120px;*/ }
/* ======== HEADER =========== */
.signup-modern-header { margin-bottom: 30px; }
.signup-modern-title { color: var(--signup-primary); font-size: clamp(30px, 4vw, 42px); font-weight: 700; line-height: 1.2; }
.signup-modern-title-line { width: 44px; height: 3px; margin: 10px auto 12px; border-radius: 50px; background: var(--signup-accent); }
.signup-modern-subtitle { color: var(--signup-muted); font-size: 15px; }
/* ======= CARDS / SECTIONS ============= */
.signup-modern-card { margin-bottom: 24px; padding: 28px; background: var(--signup-white); border: 1px solid var(--signup-border); border-radius: 20px; box-shadow: 0 8px 30px rgba(45, 39, 105, 0.055); } /* เปลี่ยนเงาเป็น indigo */
.signup-modern-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--signup-border-soft); }
.signup-modern-card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; color: var(--signup-primary); background: var(--signup-primary-soft); border-radius: 13px; font-size: 18px; }
.signup-modern-card-title { color: var(--signup-text); font-size: 20px; font-weight: 700; line-height: 1.35; }
.signup-modern-card-desc { margin-top: 3px; color: var(--signup-muted); font-size: 13px; line-height: 1.5; }
/* ========= LABELS =========== */
.signup-modern-label { margin-bottom: 8px; color: var(--signup-text); font-size: 14px; font-weight: 600; }
.signup-modern-help { color: var(--signup-muted); font-size: 12px; font-weight: 400; line-height: 1.55; }
/* ========= INPUTS ============ */
.signup-modern-page .form-control, .signup-modern-page .form-select { min-height: 48px; padding: 10px 14px; color: var(--signup-text); background-color: #ffffff; border: 1px solid var(--signup-border); border-radius: 11px; font-size: 1rem; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.signup-modern-page .form-control:hover, .signup-modern-page .form-select:hover { border-color: var(--signup-primary); }
.signup-modern-page .form-control:focus, .signup-modern-page .form-select:focus { background-color: #ffffff; border-color: var(--signup-primary); box-shadow: 0 0 0 .2rem rgba(209, 35, 107, .12); } /* aasp-primary rgb */
/* ============ INPUT GROUP ================= */
.signup-modern-page .input-group .form-control { border-radius: 11px 0 0 11px; }
.signup-modern-page .input-group-text { min-width: 46px; justify-content: center; color: var(--signup-primary); background: var(--signup-bg); border-color: var(--signup-border); border-radius: 0 11px 11px 0; }
.signup-password-group .input-group-text:hover { background: var(--signup-primary-soft); }
/* ============ PHONE NUMBER ============== */
.signup-phone-group .signup-country-code { flex: 0 0 108px; max-width: 108px; border-radius: 11px 0 0 11px; }
.signup-phone-group .form-control { border-radius: 0 11px 11px 0 !important; }
/* ================ PHARMACY CHECKBOX ================ */
.signup-modern-check { padding: 15px 17px; border: 1px dashed var(--signup-border); border-radius: 13px; }
.signup-modern-check .form-check { display: flex; align-items: flex-start; gap: 10px; }
.signup-modern-check .form-check-input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
/* ============ PASSWORD RULES ============= */
.signup-password-rules { padding: 15px 17px; color: var(--signup-body); background: var(--signup-bg); border: 1px solid var(--signup-border-soft); border-radius: 13px; font-size: 12px; line-height: 1.55; }
.signup-password-rules-title { margin-bottom: 9px; color: var(--signup-text); font-size: 13px; font-weight: 700; }
/* สถานะแต่ละข้อ: is-pending = ยังไม่กรอก, is-pass = ผ่าน, is-fail = ยังไม่ผ่าน */
.signup-modern-page { --signup-success: #1D9E75; --signup-danger: #D64545; }  /* aasp-teal / แดงอ่อนเข้ากับธีม */
.signup-rule { display: flex; align-items: flex-start; gap: 8px; transition: color .2s ease; }
.signup-rule-icon { flex: 0 0 14px; width: 14px; margin-top: 3px; text-align: center; font-size: 13px; line-height: 1; transition: color .2s ease, transform .2s ease; }
.signup-rule.is-pending { color: var(--signup-muted); }
.signup-rule.is-pending .signup-rule-icon { margin-top: 7px; font-size: 6px; color: var(--signup-border); }
.signup-rule.is-pass { color: var(--signup-text); }
.signup-rule.is-pass .signup-rule-icon { color: var(--signup-success); animation: signupRulePop .25s ease; }
.signup-rule.is-fail { color: var(--signup-body); }
.signup-rule.is-fail .signup-rule-icon { color: var(--signup-danger); }
@keyframes signupRulePop { 0% { transform: scale(.6); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
.signup-password-progress { padding: 1px 9px; color: var(--signup-muted); background: #ffffff; border: 1px solid var(--signup-border-soft); border-radius: 50px; font-size: 11.5px; font-weight: 600; }
.signup-password-progress:empty { display: none; }
.signup-password-progress.is-complete { color: #ffffff; background: var(--signup-success); border-color: var(--signup-success); }
/* กรอบช่องกรอกรหัสผ่านตามสถานะ */
.signup-password-group.is-valid .form-control, .signup-password-group.is-valid .input-group-text { border-color: var(--signup-success); }
.signup-password-group.is-valid .form-control:focus { box-shadow: 0 0 0 .2rem rgba(29, 158, 117, .14); }
.signup-password-group.is-invalid .form-control, .signup-password-group.is-invalid .input-group-text { border-color: var(--signup-danger); }
.signup-password-group.is-invalid .form-control:focus { box-shadow: 0 0 0 .2rem rgba(214, 69, 69, .14); }
.signup-password-feedback { min-height: 18px; margin-top: 6px; font-size: 12px; font-weight: 500; }
.signup-password-feedback.is-pass { color: var(--signup-success); }
.signup-password-feedback.is-fail { color: var(--signup-danger); }
@media (prefers-reduced-motion: reduce) { .signup-rule.is-pass .signup-rule-icon { animation: none; } }
/* $is_password_required = false: ข้อแนะนำ (ไม่บังคับ) และคำเตือนความยาว */
.signup-modern-page { --signup-tip: #B07800; --signup-tip-soft: #FFF6DB; }
.signup-password-recommend { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--signup-border); }
.signup-password-recommend-title { color: var(--signup-text); font-size: 13px; font-weight: 700; }
.signup-password-recommend-title .fa { margin-right: 4px; color: var(--signup-primary); }
.signup-password-recommend-note { color: var(--signup-muted); font-weight: 500; }
.signup-password-recommend-desc { margin: 2px 0 9px; color: var(--signup-muted); font-size: 12px; }
.signup-rule.is-tip { color: var(--signup-body); }
.signup-rule.is-tip .signup-rule-icon { color: var(--signup-tip); }
.signup-password-recommend-done { display: none; margin-top: 9px; color: var(--signup-success); font-size: 12px; font-weight: 600; }
.signup-password-recommend-done.is-show { display: block; }
.signup-password-limit { margin-top: 12px; padding: 8px 11px; background: #ffffff; border: 1px solid var(--signup-border-soft); border-radius: 9px; transition: background-color .2s ease, border-color .2s ease; }
.signup-rule.is-info { color: var(--signup-muted); }
.signup-rule.is-info .signup-rule-icon { color: var(--signup-muted); }
.signup-rule.is-warn { color: #7A5300; background: var(--signup-tip-soft); border-color: #F3D27A; font-weight: 600; }
.signup-rule.is-warn .signup-rule-icon { color: var(--signup-tip); }
/* ======== PDPA =========== */
.signup-pdpa-card { overflow: hidden; background: #ffffff; border: 1px solid var(--signup-border); border-radius: 15px; }
.signup-pdpa-heading { padding: 17px 20px; color: var(--signup-text); background: var(--signup-bg); border-bottom: 1px solid var(--signup-border); font-size: 14px; font-weight: 700; line-height: 1.5; }
.signup-pdpa-heading span { color: var(--signup-muted); font-weight: 500; }
.signup-pdpa-content { max-height: 420px; overflow-y: auto; padding: 22px 24px; color: var(--signup-body); font-size: 13px; line-height: 1.7; scrollbar-width: thin; scrollbar-color: var(--signup-border) transparent; }
.signup-pdpa-content::-webkit-scrollbar { width: 8px; }
.signup-pdpa-content::-webkit-scrollbar-track { background: transparent; }
.signup-pdpa-content::-webkit-scrollbar-thumb { background: var(--signup-border); border-radius: 10px; }
.signup-pdpa-list { margin-bottom: 0; padding-left: 24px; }
.signup-pdpa-list > li { margin-bottom: 18px; padding-left: 4px; }
.signup-pdpa-list ul { margin-top: 7px; }
.signup-pdpa-topic { margin-bottom: 4px; color: var(--signup-text); font-weight: 700; }
.signup-pdpa-declaration { margin-top: 16px; padding: 15px 17px; background: var(--signup-bg); border-radius: 11px; }
/* =========== CONSENT ============= */
.signup-consent-box { padding: 17px 19px; background: #FFF9E6; border: 1px solid #FDE49E; border-radius: 13px; } /* สีกล่อง consent เข้ากับ aasp-accent */
.signup-consent-box .form-check { display: flex; align-items: center; gap: 10px; }
.signup-consent-box .form-check-input { width: 20px; height: 20px; margin-top: 0; flex-shrink: 0; }
.signup-consent-box .form-check-label { color: var(--signup-text); font-size: 15px; font-weight: 600; }
/* ========== REGISTER BUTTON ============== */
.signup-register-area { margin-top: 25px; text-align: center; }
.signup-register-btn { min-width: 230px; min-height: 50px; padding: 11px 22px; border-radius: 12px; font-size: 16px; font-weight: 600; }
.signup-modern-page .btn-main { color: #ffffff; background: var(--signup-primary); border-color: var(--signup-primary); }
.signup-modern-page .btn-main:hover, .signup-modern-page .btn-main:focus { color: #ffffff; background: var(--signup-primary-dark); border-color: var(--signup-primary-dark); }
/* ========== TABLET ============ */
@media (max-width: 991.98px) { .signup-modern-card { padding: 24px; } }
/* ============ MOBILE ============= */
@media (max-width: 767.98px) {
	.signup-modern-page { margin-top: 24px !important; margin-bottom: 40px !important; }
	.signup-modern-container { padding-left: 12px; padding-right: 12px; }
	.signup-modern-header { margin-bottom: 22px; }
	.signup-modern-title { font-size: 30px; }
	.signup-modern-subtitle { padding: 0 8px; font-size: 13px; }
	.signup-modern-card { padding: 18px; border-radius: 16px; }
	.signup-modern-card-header { align-items: flex-start; gap: 11px; margin-bottom: 20px; padding-bottom: 15px; }
	.signup-modern-card-icon { width: 39px; height: 39px; min-width: 39px; border-radius: 11px; font-size: 16px; }
	.signup-modern-card-title { font-size: 17px; }
	.signup-modern-card-desc { font-size: 12px; }
	/* 16px prevents automatic zoom on iOS Safari when a field receives focus. */
	.signup-modern-page .form-control, .signup-modern-page .form-select { min-height: 46px; font-size: 16px; }
	.signup-modern-label { font-size: 14px; }
	.signup-password-rules { padding: 13px 14px; }
	.signup-pdpa-content { max-height: 360px; padding: 17px; font-size: 12.5px; }
	.signup-pdpa-heading { padding: 15px; font-size: 13px; }
	.signup-consent-box { padding: 14px; }
	.signup-consent-box .form-check { align-items: flex-start; }
	.signup-consent-box .form-check-label { font-size: 14px; }
	.signup-register-btn { width: 100%; min-width: 0; }
}
/* =========== SMALL MOBILE ============= */
@media (max-width: 575.98px) {
	.signup-modern-container { padding-left: 10px; padding-right: 10px; }
	.signup-modern-card { padding: 16px 14px; }
	.signup-modern-card-icon { display: none; }
	.signup-phone-group .signup-country-code { flex-basis: 95px; max-width: 95px; }
	.signup-pdpa-content { max-height: 330px; padding: 15px; }
}

.signup-modern-card-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.signup-modern-card-header-content{display:flex;align-items:center;gap:.75rem;min-width:0}
.signup-modern-card-header-option{margin-left:auto;flex-shrink:0}
.signup-modern-card-header-option .form-check{display:flex;align-items:center;gap:.5rem;margin:0}
.signup-modern-card-header-option .form-check-input{margin:0;flex-shrink:0;cursor:pointer}
.signup-modern-card-header-option .form-check-label{margin:0;cursor:pointer;white-space:nowrap;font-weight:500;color:var(--signup-text)}
@media(max-width:767.98px){
.signup-modern-card-header{align-items:flex-start;flex-direction:column;gap:.75rem}
.signup-modern-card-header-content{width:100%}
.signup-modern-card-header-option{width:100%;margin-left:0;padding-left:0}
.signup-modern-card-header-option .form-check{width:100%}
.signup-modern-card-header-option .form-check-label{white-space:normal}
}
/* ========== CONFIRM SIGN UP MODAL ========== */
#ConfirmSignUpModal{
    --signup-confirm-primary:#D1236B;
    --signup-confirm-primary-soft:#EED9C4;
    --signup-confirm-dark:#A31250;
    --signup-confirm-soft:#FDEBF3;
    --signup-confirm-text:#1E1A47;
    --signup-confirm-body:#2D2769;
    --signup-confirm-muted:#6B668A;
    --signup-confirm-border:#E5CDD8;
    --signup-confirm-bg:#FFFDF9;
    --signup-confirm-danger:#B31B1B;
    --signup-confirm-warning:#ffc067;
}
#ConfirmSignUpModal i{color:var(--signup-confirm-dark)}
#ConfirmSignUpModal .card-header{
    padding:15px 18px;color:var(--signup-confirm-soft);
    background:var(--signup-confirm-primary-soft)!important;border-bottom:1px solid var(--signup-confirm-border)!important;
}
#ConfirmSignUpModal .card-header i,#ConfirmSignUpModal .card-header span{color:var(--signup-confirm-text)!important;}
#ConfirmSignUpModal .bg-danger{ background:var(--signup-confirm-danger)!important;}
#ConfirmSignUpModal .bg-danger i,#ConfirmSignUpModal .bg-danger span{color:var(--signup-confirm-soft)!important;}
#ConfirmSignUpModal .list-group-item{padding:12px 18px;color:var(--signup-confirm-body);background:#fff;border-color:#F5E6ED}
#ConfirmSignUpModal .signup-confirm-label{color:var(--signup-confirm-muted)}
#ConfirmSignUpModal .signup-confirm-value{color:var(--signup-confirm-text);overflow-wrap:anywhere}
#ConfirmSignUpModal .modal-content{background:var(--signup-confirm-dark);}
#ConfirmSignUpModal .alert-warning {
  --bs-alert-color: var(--signup-confirm-text)!important;
  --bs-alert-bg: var(--signup-confirm-warning)!important;
  --bs-alert-border-color: var(--signup-confirm-border)!important;
  --bs-alert-link-color: var(--signup-confirm-text)!important;
}
#ConfirmSignUpModal .alert-warning i{color:var(--signup-confirm-dark)!important;}
@media(max-width:575.98px){#ConfirmSignUpModal .card-header{padding:13px 14px}#ConfirmSignUpModal .list-group-item{padding:11px 14px}}

/* ===== Confirm Sign Up Modal: section headers, aligned details and emergency emphasis ===== */
#ConfirmSignUpModal .modal-dialog{max-width:900px}
#ConfirmSignUpModal .modal-content{background:#fff;border:0;border-radius:20px;overflow:hidden;box-shadow:0 20px 55px rgba(45,39,105,.2)}
#ConfirmSignUpModal .modal-header{padding:17px 24px;background:linear-gradient(135deg,#D1236B,#A31250);border:0}
#ConfirmSignUpModal .modal-title{color:#fff;font-size:1.15rem;font-weight:700}
#ConfirmSignUpModal .modal-header .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.9}
#ConfirmSignUpModal #ConfirmSignUpModalBody{padding:0!important;background:#fff;color:var(--signup-confirm-text);font-weight:400}
#ConfirmSignUpModal .confirm-signup-wrap{display:flex;flex-direction:column}
#ConfirmSignUpModal .confirm-signup-section{background:#fff}
#ConfirmSignUpModal .confirm-signup-section+.confirm-signup-section{border-top:1px solid #E5CDD8}
#ConfirmSignUpModal .confirm-signup-section-head{display:flex;align-items:center;gap:16px;padding:22px 28px;background:linear-gradient(110deg,#FDEBF3,#FFFDF9);border-bottom:1px solid #E5CDD8}
#ConfirmSignUpModal .confirm-signup-section-icon{width:52px;height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,#D1236B,#A31250);font-size:1.45rem;box-shadow:0 7px 16px rgba(209,35,107,.2)}
#ConfirmSignUpModal .confirm-signup-section-icon .bi{display:inline!important;color:inherit!important}
#ConfirmSignUpModal .confirm-signup-section-heading{min-width:0}
#ConfirmSignUpModal .confirm-signup-section-title{margin:0 0 4px;color:#1E1A47;font-size:1.22rem;font-weight:700;line-height:1.35}
#ConfirmSignUpModal .confirm-signup-section-subtitle{margin:0;color:#6B668A;font-size:.88rem;line-height:1.55;font-weight:400}
#ConfirmSignUpModal .confirm-signup-section-body{margin:18px 28px 22px;padding:12px 22px;background:#FFFDF9;border:1px solid #E5CDD8;border-left:4px solid #D1236B;border-radius:14px}
#ConfirmSignUpModal .confirm-signup-item{display:grid;grid-template-columns:minmax(170px,215px) minmax(0,1fr);gap:14px;align-items:start;padding:8px 0;border-bottom:1px dashed #F0E4EA}
#ConfirmSignUpModal .confirm-signup-item:last-child{border-bottom:0}
#ConfirmSignUpModal .confirm-signup-label{color:#6B668A;font-size:.81rem;font-weight:650;line-height:1.55;letter-spacing:.015em}
#ConfirmSignUpModal .confirm-signup-value{color:#1E1A47;font-size:.94rem;font-weight:600;line-height:1.55;overflow-wrap:anywhere;min-width:0}
#ConfirmSignUpModal .confirm-signup-section.is-emergency .confirm-signup-section-head{background:linear-gradient(110deg,#FFF0E6,#FFF9F5);border-bottom-color:#F2C5B6}
#ConfirmSignUpModal .confirm-signup-section.is-emergency .confirm-signup-section-icon{background:linear-gradient(135deg,#F97316,#DC2626);box-shadow:0 7px 16px rgba(220,38,38,.2)}
#ConfirmSignUpModal .confirm-signup-section.is-emergency .confirm-signup-section-title{color:#9A3412}
#ConfirmSignUpModal .confirm-signup-section.is-emergency .confirm-signup-section-subtitle{color:#A64B25}
#ConfirmSignUpModal .confirm-signup-section.is-emergency .confirm-signup-section-body{background:#FFFAF6;border-color:#F2C5B6;border-left-color:#EA580C}
#ConfirmSignUpModal .confirm-signup-section.is-emergency .confirm-signup-label{color:#A64B25}
#ConfirmSignUpModal .modal-footer{border-top:1px solid #E5CDD8;padding:12px 24px;gap:8px}
#ConfirmSignUpModal .modal-footer .btn{border-radius:11px;font-weight:600}
@media(max-width:575.98px){
#ConfirmSignUpModal .modal-dialog{max-width:calc(100% - 16px);margin:8px auto}
#ConfirmSignUpModal .confirm-signup-section-head{padding:17px 16px;gap:12px}
#ConfirmSignUpModal .confirm-signup-section-icon{width:44px;height:44px;flex-basis:44px;font-size:1.2rem}
#ConfirmSignUpModal .confirm-signup-section-title{font-size:1.06rem}
#ConfirmSignUpModal .confirm-signup-section-subtitle{font-size:.8rem}
#ConfirmSignUpModal .confirm-signup-section-body{margin:14px 16px 18px;padding:8px 14px}
#ConfirmSignUpModal .confirm-signup-item{grid-template-columns:1fr;gap:2px;padding:9px 0}
#ConfirmSignUpModal .confirm-signup-label{font-size:.76rem}
#ConfirmSignUpModal .confirm-signup-value{font-size:.91rem}
#ConfirmSignUpModal .modal-header,#ConfirmSignUpModal .modal-footer{padding-left:16px;padding-right:16px}
}