/* assets/css/style.css */

body {
    font-family: 'Sarabun', sans-serif;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
    color: #333;
}

h1,
h2,
h3 {
    font-weight: 600;
    margin-bottom: 1rem;
    font-family: 'Prompt', 'Sarabun', sans-serif;
}

a {
    text-decoration: none;
    color: #ff6b6b;
}

section.form-section {
    max-width: 480px;
    margin: 3rem auto;
    background: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

label {
    display: block;
    margin-top: 1rem;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select {
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.25rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem;
}

input[type="checkbox"] {
    margin-right: 0.5rem;
}

small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
}

.button-primary {
    background: #ff6b6b;
    color: white;
    padding: 0.75rem;
    margin-top: 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    width: 100%;
    cursor: pointer;
    transition: background 0.3s;
}

.button-primary:hover {
    background: #e65757;
}

.button-secondary {
    display: inline-block;
    background: #fff;
    color: #ff6b6b;
    padding: 0.75rem 1.5rem;
    border: 2px solid #ff6b6b;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s;
}

.button-secondary:hover {
    background: #ff6b6b;
    color: white;
}

.hero {
    background: linear-gradient(to right, #ff6b6b, #f8a5c2);
    color: white;
    text-align: center;
    padding: 4rem 2rem;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.demo,
.plans {
    padding: 3rem 2rem;
    text-align: center;
}

.plan-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.plan {
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 2rem;
    max-width: 300px;
    width: 100%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.plan.premium {
    border: 2px solid #ff6b6b;
}

p {
    margin-top: 1rem;
    text-align: center;
}


/* ✅ Login response message */

.response-message {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.95rem;
    text-align: center;
    font-weight: 500;
}

.response-success {
    background-color: #e0f7e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.response-error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.alert-message {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.95rem;
    color: #b91c1c;
    /* สีแดงเข้ม (Tailwind: red-700) */
    font-weight: 500;
}

@media (max-width: 480px) {
    section.form-section {
        margin: 1rem;
        padding: 1.5rem;
    }
}

body {
  font-family: 'Sarabun', 'Prompt', 'Noto Sans Thai', sans-serif;
  margin: 0;
  padding: 0;
  background: #f9f9f9;
  color: #333;
}

:root{
    --brand-700:#5B55FF;
    --brand-600:#6C63FF;
    --brand-500:#7A6EFF;
    --brand-400:#A38CFF;
    --brand-300:#C8B7FF;
    --sky-300:#8AD7FF;
    --sky-200:#B7E8FF;
    --text-dark:#333;
  }
  
  *{box-sizing:border-box}
  html,body{font-family:'Sarabun',system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';color:var(--text-dark)}
  
  a{color:var(--brand-600);text-decoration:none}
  a:hover{color:var(--brand-700)}
  
  .link-brand{color:var(--brand-600)}
  .link-brand:hover{color:var(--brand-700)}
  .link-brand-strong{color:var(--brand-700);font-weight:600}
  
  /* Buttons */
  .btn-brand{
    display:inline-flex;align-items:center;gap:.5rem;
    background:var(--brand-600);color:#fff;padding:.65rem 1rem;border-radius:.6rem;
    font-weight:600;transition:.2s box-shadow,.2s transform
  }
  .btn-brand:hover{box-shadow:0 10px 22px rgba(108,99,255,.25);transform:translateY(-1px)}
  .btn-outline-brand{
    display:inline-flex;align-items:center;gap:.5rem;
    background:#fff;color:var(--brand-600);border:2px solid var(--brand-600);
    padding:.6rem 1rem;border-radius:.6rem;font-weight:600;transition:.2s all
  }
  .btn-outline-brand:hover{background:var(--brand-600);color:#fff}
  
  /* Contrast button (บนพื้นไล่เฉด) */
  .btn-contrast{
    display:inline-block;background:#fff;color:var(--brand-600);
    padding:.8rem 1.25rem;border-radius:.75rem;font-weight:700
  }
  
  /* HERO */
  .hero{
    position:relative;
    color:#fff;
    background:linear-gradient(135deg, var(--brand-600) 0%, var(--sky-300) 100%);
    padding:4rem 1.25rem;
  }
.hero .container{
  display:grid;
  grid-template-columns:1fr !important;   /* คอลัมน์เดียวทุกขนาดจอ */
  justify-items:center;                    /* จัดให้อยู่กึ่งกลางแนวนอน */
  text-align:center;
  gap:1.25rem;
}
  .hero h2{font-size:2.25rem;font-weight:800;margin:0 0 1rem}
  .hero p{font-size:1.125rem;margin:0 0 1.5rem}
  
  /* ภาพกึ่งกลาง ซ้อนกันเล็กน้อย และ responsive  ---เก่า  */
.hero-visual{ position:static !important; height:auto !important; display:block !important; }

/* ทำให้รูปเป็น block ปกติ อยู่ล่างสุดใน grid ได้ */
.hero img,
.hero-visual img,
.img-left,
.img-right{
  position:static !important;
  left:auto !important; right:auto !important;
  transform:none !important;
  max-width:min(600px, 92vw);
  height:auto;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.15));
  margin-inline:auto;                      /* กลางแนวนอน */
}
/* 1) แก้คลาสที่ไม่อยู่ใน Tailwind: .max-w-1xl (กำหนดเอง) */
.max-w-1xl{ max-width:40rem; } /* ~640px */

/* 2) Hero size & vertical rhythm: ให้ดูโปร่งขึ้นและสมดุลทุกจอ */
.hero{
  min-height: 70vh;                 /* มี presence */
  display: grid;
  place-items: center;              /* กลางแนวตั้งด้วย */
  padding-block: clamp(3rem, 6vw, 6rem);
}

/* 3) ปุ่ม: เพิ่มโฟกัสสำหรับคีย์บอร์ด/AA contrast */
.btn-brand:focus-visible,
.btn-outline-brand:focus-visible,
.btn-contrast:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand-600), #fff 20%);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-300), #fff 60%);
}

/* hover feedback บนพื้นไล่เฉดให้ชัดขึ้นนิด */
.btn-contrast:hover{
  filter: brightness(0.95);
}

/* 4) รูปใน Hero: ปรับขนาดเชิง responsive & ลด CLS */
.hero img{
  width: min(100%, 680px);          /* ครอบคลุมจอใหญ่แบบไม่เกิน */
  aspect-ratio: auto;               /* ไม่บังคับอัตราส่วน */
  border-radius: 0.75rem;           /* มุมมนพอดี */
}

/* 5) ลดแอนิเมชันเมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce){
  .animate-float, .fade-up{ animation: none !important; }
}
/* 6) ปรับระยะระหว่าง element ใน Hero ให้สมูทขึ้น */
.hero .hero-text > * + *{
  margin-top: .75rem;
}

@media (min-width:900px){
  .hero .container{ grid-template-columns:1fr !important; }
  .hero-visual{ height:auto !important; }
}
  /* ฟอร์ม/ส่วนอื่น ๆ (ของเดิม) */
  section.form-section{
    max-width:480px;margin:3rem auto;background:#fff;padding:2rem;border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.05)
  }
  label{display:block;margin-top:1rem;font-weight:700}
  input[type="text"],input[type="email"],input[type="tel"],input[type="password"],select{
    width:100%;padding:.75rem;margin-top:.25rem;border:1px solid #ddd;border-radius:8px;font-size:1rem
  }
  input[type="checkbox"]{margin-right:.5rem}
  small{display:block;margin-top:.25rem;font-size:.85rem}
  
  /* status */
  .response-message{margin-top:1rem;padding:.75rem;border-radius:8px;font-size:.95rem;text-align:center;font-weight:500}
  .response-success{background:#e0f7e9;color:#2e7d32;border:1px solid #a5d6a7}
  .response-error{background:#ffebee;color:#c62828;border:1px solid #ef9a9a}
  .alert-message{margin-top:1rem;text-align:center;font-size:.95rem;color:#b91c1c;font-weight:500}
  
@media (max-width: 480px){
  .hero .hero-text{ padding-inline: .25rem; }
  .hero img{ width: min(100%, 520px); }
}
@media (max-width: 767.98px){
  header .text-lg { letter-spacing: .5px; }
}