/* ============================================================
   blocks.css — IC-MyHost Master Block Styles
   ใช้กับทุกหน้าที่ใช้ block template
   load หลัง daylight.css, nav.css, footer.css
   © 2004–2026 Ideal Creation Center Co., Ltd.
   ============================================================ */

/* ── SECTION BACKGROUNDS ── */
.ic-s1 { background: #ffffff; }
.ic-s2 { background: #f7f8fc; }
.ic-s3 { background: #eef2ff; }

/* ── LAYOUT ── */
.ic-section     { padding: 88px 0; }
.ic-section-sm  { padding: 56px 0; }
.ic-center      { text-align: center; }
.ic-lead        { font-size: 17.5px; color: #475569; max-width: 640px; line-height: 1.78; }
.ic-center .ic-lead { margin: 0 auto; }
.ic-label       { display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #FF9900; margin-bottom: 14px; }
hr.ic-divider   { border: none; border-top: 1px solid #e8edf5; }

/* ── GRIDS ── */
.ic-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.ic-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ic-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ic-grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* ── CHECKMARK circle green ── */
.ic-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #e8f8ee; flex-shrink: 0;
}
.ic-check svg {
  width: 12px; height: 12px;
  stroke: #187a3e; stroke-width: 2.3; stroke-linecap: round; fill: none;
}

/* ── ICON WRAP ── */
.ic-icon-wrap { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; }
.ic-icon-wrap svg { width: 26px; height: 26px; }
.ic-icon-blue   { background: #e8eeff; } .ic-icon-blue   svg { stroke: #021159; }
.ic-icon-amber  { background: #fff3e0; } .ic-icon-amber  svg { stroke: #c77700; }
.ic-icon-green  { background: #e8f8ee; } .ic-icon-green  svg { stroke: #187a3e; }
.ic-icon-slate  { background: #f1f4f9; } .ic-icon-slate  svg { stroke: #3a4a6b; }
.ic-icon-violet { background: #f0ebff; } .ic-icon-violet svg { stroke: #5b21b6; }
.ic-icon-teal   { background: #e0f6f8; } .ic-icon-teal   svg { stroke: #0a7a87; }

/* ── BADGES ── */
.ic-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef2ff; color: #021159; border: 1px solid #c7d2e8; }
.ic-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }

/* ── IMG PLACEHOLDER ── */
.ic-img-placeholder { border-radius: 16px; overflow: hidden; background: linear-gradient(135deg,#e8eeff,#d5e0ff); display: flex; align-items: center; justify-content: center; position: relative; }
.ic-img-placeholder svg { opacity: .18; }
.ic-img-placeholder::after { content: attr(data-label); position: absolute; bottom: 16px; left: 16px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #021159; opacity: .5; }

/* ── CARDS ── */
.ic-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 30px;
  transition: box-shadow .2s, transform .2s, background .2s, border-color .2s;
}
.ic-card:hover { box-shadow: 0 10px 36px rgba(2,17,89,.1); transform: translateY(-3px); background: #f5f8ff; border-color: #b8c8ff; }
.ic-card-accent-blue   { border-top: 12px solid #021159; }
.ic-card-accent-orange { border-top: 12px solid #FF9900; }
.ic-card-accent-green  { border-top: 12px solid #22c55e; }
.ic-card-accent-violet { border-top: 12px solid #5b21b6; }
.ic-card-accent-teal   { border-top: 12px solid #0a7a87; }

/* ── FEATURE CHECKLIST (Block A) ── */
.ic-feat-checklist { list-style: none; margin-bottom: 32px; }
.ic-feat-checklist li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 15px; color: #334155; }
.ic-feat-checklist li:last-child { border-bottom: none; }

/* ── TABS (Block C) ── */
.ic-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 6px solid #e2e8f0; margin-bottom: 44px; }
.ic-tab-btn {
  padding: 12px 24px; font-size: 16px; font-weight: 600;
  color: #64748b; background: none; border: none;
  border-bottom: 6px solid transparent; margin-bottom: -6px;
  cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap;
}
.ic-tab-btn:hover { color: #021159; }
.ic-tab-btn.active { color: #021159; border-bottom-color: #021159; font-weight: 700; }
.ic-tab-panel { display: none; }
.ic-tab-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ic-tab-content h3 { font-size: 30px; font-weight: 800; margin-bottom: 16px; }
.ic-tab-content p  { font-size: 16px; margin-bottom: 24px; }
.ic-tab-content ul { list-style: none; margin-bottom: 28px; }
.ic-tab-content ul li { font-size: 15px; color: #334155; padding: 8px 0; border-bottom: 1px solid #f1f5f9; display: flex; align-items: flex-start; gap: 10px; }
.ic-tab-content ul li:last-child { border-bottom: none; }

/* ── TESTIMONIAL (Block F) ── */
.ic-testi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 40px; max-width: 820px; margin: 0 auto; }
.ic-testi-stars { display: flex; gap: 3px; margin-bottom: 20px; }
.ic-testi-star  { width: 18px; height: 18px; fill: #FF9900; }
.ic-testi-quote { font-size: 18px; line-height: 1.75; color: #0f172a; font-style: italic; margin-bottom: 28px; border-left: 3px solid #021159; padding-left: 20px; }
.ic-testi-author { display: flex; align-items: center; gap: 16px; }
.ic-testi-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,#021159,#1a3aaa); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 17px; flex-shrink: 0; }
.ic-testi-name { font-weight: 700; font-size: 15px; color: #0f172a; }
.ic-testi-role { font-size: 13px; color: #64748b; margin-top: 2px; }
.ic-testi-nav  { display: flex; gap: 8px; justify-content: center; margin-top: 28px; }
.ic-testi-dot  { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; cursor: pointer; transition: background .15s, transform .15s; border: none; padding: 0; }
.ic-testi-dot.active { background: #021159; transform: scale(1.3); }

/* ── CTA CARD (Block G / Reframe) ── */
.ic-cta-card-section { background: #f7f8fc; padding: 80px 0; }
.ic-cta-card {
  background: linear-gradient(135deg, #ffffff 0%, #deeaff 55%, #c8daff 100%);
  border-radius: 28px; padding: 72px 56px; text-align: center;
  box-shadow: 0 20px 60px rgba(2,17,89,.12), 0 4px 16px rgba(2,17,89,.07);
  border: 1px solid rgba(2,17,89,.08);
  position: relative; overflow: hidden;
}
.ic-cta-card::after { content: ''; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(2,17,89,.05) 0%, transparent 70%); pointer-events: none; }
.ic-cta-card > * { position: relative; z-index: 1; }
.ic-cta-card h2 { color: #021159; font-size: clamp(28px, 3.8vw, 48px); font-weight: 800; letter-spacing: -.5px; margin-bottom: 14px; }
.ic-cta-card h2 span { color: #FF9900; }
.ic-cta-card .ic-cta-sub { color: #3a4a6b; font-size: 17px; max-width: 520px; margin: 0 auto 36px; line-height: 1.75; }
.ic-cta-card-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(2,17,89,.45); margin-bottom: 16px; background: rgba(2,17,89,.06); padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(2,17,89,.1); }
.ic-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── WHY CHOOSE (Block I) ── */
.ic-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ic-why-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.ic-why-card:hover { box-shadow: 0 16px 48px rgba(2,17,89,.12); transform: translateY(-4px); }
.ic-why-photo { width: 100%; aspect-ratio: 4/3; position: relative; overflow: hidden; }
.ic-why-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.ic-why-photo-placeholder svg.bg-icon { width: 80px; height: 80px; opacity: .15; }
.ic-why-photo-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 50%; }
.ic-why-body { padding: 28px 28px 32px; }
.ic-why-body h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: #0f172a; }
.ic-why-body p  { font-size: 15px; color: #475569; line-height: 1.75; margin-bottom: 20px; }
.ic-why-body a  { font-size: 14.5px; font-weight: 700; color: #021159; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ic-why-body a:hover { color: #FF9900; }

/* ── FAQ 2-col ACCORDION (Block J) ── */
.ic-faq-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
.ic-faq-item { border-bottom: 1px solid #d0d9ee; }
.ic-faq-btn {
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 18px 0; text-align: left;
  font-size: 15.5px; font-weight: 600; color: #0f172a;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: inherit; line-height: 1.4;
}
.ic-faq-icon {
  width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
  background: #eef2ff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.ic-faq-icon svg { width: 14px; height: 14px; stroke: #021159; stroke-width: 2.5; stroke-linecap: round; fill: none; transition: transform .25s; }
.ic-faq-item.ic-open .ic-faq-icon { background: #021159; }
.ic-faq-item.ic-open .ic-faq-icon svg { stroke: #fff; transform: rotate(45deg); }
/* grid-template-rows trick — ทำงานทุก browser */
.ic-faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.ic-faq-body-inner { overflow: hidden; }
.ic-faq-item.ic-open .ic-faq-body { grid-template-rows: 1fr; }
.ic-faq-body-inner p { padding-bottom: 16px; font-size: 15px; color: #475569; line-height: 1.75; margin: 0; }

/* ── PRICING (Block 9) ── */
.ic-price-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: 32px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; position: relative; }
.ic-price-card:hover { box-shadow: 0 12px 36px rgba(2,17,89,.1); transform: translateY(-3px); }
.ic-price-card.featured { background: linear-gradient(160deg, #021159 0%, #0d2280 100%); border-color: #FF9900; }
.ic-price-card.featured .ic-price-tier { color: #FF9900; }
.ic-price-card.featured .ic-price-desc,
.ic-price-card.featured .ic-price-mo { color: rgba(255,255,255,.55); }
.ic-price-card.featured .ic-price-amount { color: #fff; }
.ic-price-card.featured .ic-price-features li { color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.1); }
.ic-price-card.featured .ic-price-features li::before { color: #4ade80; }
.ic-price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #FF9900; color: #1a1400; font-size: 11px; font-weight: 700; padding: 3px 14px; border-radius: 999px; white-space: nowrap; }
.ic-price-wrap { position: relative; }
.ic-price-tier   { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.ic-price-desc   { font-size: 14px; color: #64748b; margin-bottom: 14px; min-height: 40px; }
.ic-price-amount { font-size: 40px; font-weight: 800; line-height: 1; color: #0f172a; }
.ic-price-amount span { font-size: 14px; font-weight: 400; color: #94a3b8; }
.ic-price-mo     { font-size: 13px; color: #94a3b8; margin-bottom: 20px; }
.ic-price-features { list-style: none; flex: 1; margin-bottom: 24px; }
.ic-price-features li { font-size: 14.5px; color: #334155; padding: 7px 0; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 8px; }
.ic-price-features li:last-child { border-bottom: none; }
.ic-price-features li::before { content: '✓'; color: #22c55e; font-weight: 700; flex-shrink: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .ic-grid-3, .ic-grid-4, .ic-why-grid { grid-template-columns: repeat(2, 1fr); }
  .ic-grid-1-1 { grid-template-columns: 1fr; gap: 36px; }
  .ic-tab-panel.active { grid-template-columns: 1fr; }
  .ic-faq-2col { grid-template-columns: 1fr; gap: 0; }
  .ic-cta-card { padding: 48px 32px; }
}
@media (max-width: 600px) {
  .ic-grid-2, .ic-grid-3, .ic-grid-4, .ic-why-grid { grid-template-columns: 1fr; }
  .ic-section { padding: 56px 0; }
  .ic-price-card.featured { grid-column: 1; }
}