/* ------------------------------------------------------------------
   SiamGold — หน้า auth ของ portal (เข้าสู่ระบบ / สมัครสมาชิก / รีเซ็ตรหัสผ่าน)
   ใช้ต่อจาก info-pages.css (การ์ด ฟอร์ม ปุ่ม ฟอนต์ มาจากไฟล์นั้น)
   คลาสขึ้นต้น sg- ทั้งหมด · ห้ามแตะคลาส/id ที่ js/register.js ใช้อ้าง เช่น
   .req .hint-error .result_* #box_upload #btn_upload .icheck_checkbox
   ------------------------------------------------------------------ */

.sg-auth { padding-top: 26px; padding-bottom: 46px; }
.sg-auth-narrow { max-width: 460px; }
.sg-auth-wide   { max-width: 780px; }

.sg-auth-card { padding: 32px 30px; }

/* ---------- หัวการ์ด ---------- */
.sg-auth-head { text-align: center; margin-bottom: 26px; }
.sg-auth-logo {
  display: block;
  width: 190px;
  max-width: 70%;
  height: auto;
  margin: 0 auto 18px;
}
.sg-auth-title {
  margin: 0;
  font-size: 23px;
  line-height: 1.5;
  font-weight: 700;
  color: #3A3427;
}
.sg-auth-sub {
  margin: 8px 0 0;
  font-size: 15px;
  color: #8B8069;
}
.sg-auth-head .sg-hero-rule { margin-top: 16px; }

/* ---------- ตัวบอกขั้นตอน ---------- */
.sg-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.sg-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #A99E86;
}
.sg-steps .sg-step-dot {
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #A99E86;
  background: #F4EEDF;
}
.sg-steps .sg-step-on { color: #6E5405; font-weight: 600; }
.sg-steps .sg-step-on .sg-step-dot {
  color: #5A420A;
  background: linear-gradient(135deg, #FDECB9, #F7CD57);
  box-shadow: 0 3px 9px rgba(237, 176, 17, .3);
}
.sg-steps .sg-step-line {
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: #EFE7D3;
}

/* ---------- กลุ่มฟิลด์ในหน้าสมัครสมาชิก ---------- */
.sg-fieldset { margin-bottom: 26px; }
.sg-fieldset:last-of-type { margin-bottom: 0; }
.sg-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F2EBDB;
  font-size: 16px;
  font-weight: 700;
  color: #3A3427;
}
.sg-legend .sg-num { flex-basis: 25px; width: 25px; height: 25px; font-size: 12px; }

/* ---------- ดอกจันช่องบังคับ ---------- */
.sg-req { color: #D9534F; font-weight: 400; }

/* ---------- ข้อความช่วยเหลือใต้ช่องกรอก (js สร้าง .hint-error เอง) ---------- */
.sg-page .hint-input,
.sg-page .hint-error {
  display: block;
  padding-top: 6px;
  font-size: 13.5px;
  line-height: 1.6;
}
.sg-page .hint-input { color: #5C8A3C; }
.sg-page .hint-error { color: #C9302C; }
.sg-page input.request { border-color: #D9534F; }

/* ---------- ปุ่มรอง ---------- */
.sg-btn-ghost {
  display: block;
  width: 100%;
  padding: 13px 24px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #6E5405;
  background: #FFF8E4;
  border: 1px solid #F0DFA8;
  border-radius: 12px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.sg-btn-ghost:hover,
.sg-btn-ghost:focus { color: #5A420A; background: #FDEBBF; text-decoration: none; }

/* ---------- แถวลิงก์ใต้ฟอร์ม ---------- */
.sg-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #F2EBDB;
  font-size: 15px;
}
.sg-links a { color: #A87A07; text-decoration: none; font-weight: 600; }
.sg-links a:hover, .sg-links a:focus { color: #7A5504; text-decoration: underline; }
.sg-links .sg-links-muted { color: #8B8069; font-weight: 400; }

.sg-back {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 18px;
  font-size: 14.5px;
  color: #8B8069;
  text-decoration: none;
}
.sg-back:hover, .sg-back:focus { color: #7A5504; text-decoration: none; }
.sg-back svg { width: 15px; height: 15px; }

/* ---------- แจ้งเตือนที่ js เขียนลง .result_alert ---------- */
.sg-page .result_alert:empty { display: none; }
.sg-page .result_alert .alert { margin-bottom: 16px; }

/* ---------- วันหยุดร้าน (icheck ของธีม อย่าแตะโครงสร้าง) ---------- */
.sg-holiday-box {
  padding: 14px 16px;
  background: #FFFDF6;
  border: 1px solid #F0E7D2;
  border-radius: 12px;
}
.sg-holiday-box .input-group { display: block; width: 100%; }
.sg-page .check_holiday {
  width: 24%;
  padding: 0 5px;
  margin-bottom: 10px;
  font-weight: 400;
  display: inline-block;
}
.sg-page .title_dayholiday { color: #B07C08; }

/* ---------- กล่องอัปโหลดรูป (plupload วางปุ่มซ้อนตามขนาดเดิม ห้ามเปลี่ยนขนาด) ---------- */
.sg-upload { text-align: center; }
.sg-form .result_sent { margin-top: 24px; }
.sg-upload-label {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #4A4332;
}
.sg-page .box_upload { border-color: #E3DAC3; border-radius: 12px; }
.sg-page .txt_upload { color: #A99E86; }
.sg-page .txt-alert-photo { color: #C9302C; padding-top: 10px; }

/* ---------- หน้าสำเร็จ ---------- */
.sg-done { text-align: center; }
.sg-done-icon {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  color: #5C8A3C;
  background: #EFF8EC;
  border: 1px solid #CDE8C4;
}
.sg-done-icon svg { width: 44px; height: 44px; }
.sg-done h1 { margin: 0 0 12px; font-size: 21px; font-weight: 700; color: #3A3427; line-height: 1.5; }
.sg-done p { margin: 0 auto 18px; max-width: 560px; color: #4E4739; }
.sg-done .sg-btn, .sg-done .sg-btn-ghost { max-width: 320px; margin-left: auto; margin-right: auto; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 767px) {
  .sg-auth { padding-top: 16px; padding-bottom: 32px; }
  .sg-auth-card { padding: 22px 18px; }
  .sg-auth-title { font-size: 20px; }
  .sg-auth-logo { width: 150px; margin-bottom: 14px; }
  .sg-steps li span:not(.sg-step-dot) { display: none; }
  .sg-page .check_holiday { width: 48%; }
  .sg-legend { font-size: 15px; }
}

/* ธีมตั้ง .form-horizontal .icheck-inline{margin-top:8px} ไว้ แต่เราถอด form-horizontal
   ออกจากฟอร์มเหล่านี้ (มันบังคับ label ชิดขวาบนจอใหญ่) จึงตั้ง margin เองแทน */
.sg-page .icheck-inline { margin-top: 8px; }

/* js/register.js เขียน alert-warning/alert-info ลง .result_alert ด้วย
   (เช่นเคสขอ OTP ถี่เกินไป) ถ้าไม่ตั้งสีไว้ จะโดน .sg-page .alert ทับจนขอบหาย */
.sg-page .alert-warning { color: #8A6006; background-color: #FFF8E4; border-color: #F0DFA8; }
.sg-page .alert-info    { color: #31708F; background-color: #EAF4F8; border-color: #C4E0EC; }

/* .sg-form label{display:block} ของ info-pages.css มี specificity เท่ากับ
   .icheck-inline > label ของธีมแต่มาทีหลัง radio "เปิดทุกวัน/วันหยุด" เลยตกบรรทัด
   ต้องทวงคืนด้วยกฎที่เจาะจงกว่า */
.sg-page .icheck-inline > label {
  display: inline-block;
  margin-bottom: 0;
  margin-left: 15px;
  font-weight: 400;
}
.sg-page .icheck-inline > label:first-child { margin-left: 0; }

/* ---------- icheck: ทับสกิน sprite ของธีมด้วย CSS ล้วน ----------
   ธีมใช้คนละสกินกันอยู่ — radio เป็น square-green (22px) ส่วน checkbox วันหยุด
   เป็น minimal-grey (18px) จึงดูไม่เข้าชุดกัน ตรงนี้ทับเฉพาะหน้าที่มี .sg-page
   โดยไม่แตะ markup/JS (icheck ยังเติมคลาส .checked/.hover ให้เหมือนเดิม
   และ input ตัวจริงยังอยู่ครบ ค่าที่ส่งไปหลังบ้านจึงไม่เปลี่ยน) */
.sg-page .iradio_square-green,
.sg-page .icheckbox_minimal-grey {
  display: inline-block;     /* ประกาศเองไม่พึ่ง all.css ของสกิน */
  vertical-align: middle;
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background: #FFFDF7;
  border: 1px solid #DCD2B8;
  transition: border-color .12s ease, background .12s ease;
}
.sg-page .iradio_square-green { border-radius: 50%; }
.sg-page .icheckbox_minimal-grey { border-radius: 6px; }

.sg-page .iradio_square-green.hover,
.sg-page .icheckbox_minimal-grey.hover { border-color: #EDB011; }

/* radio ติ๊กแล้ว = จุดทองกลางวง */
.sg-page .iradio_square-green.checked {
  background: #fff;
  border-color: #E0A507;
}
.sg-page .iradio_square-green.checked:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCC843, #EDB011);
}

/* checkbox ติ๊กแล้ว = กล่องทองมีเครื่องหมายถูก */
.sg-page .icheckbox_minimal-grey.checked {
  background: linear-gradient(135deg, #FCC843, #EDB011);
  border-color: #E0A507;
}
.sg-page .icheckbox_minimal-grey.checked:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #4A3A10;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}