/* =========================
   SECTION TITLE COMPONENT
========================= */

.section-title{
  text-align:center;
  max-width:750px;
  margin:auto;
  margin-bottom:40px;
}

.section-title h2{
  font-size:36px;
  margin-bottom:12px;
  color:var(--ink);
}

.section-title p{
  color:var(--muted);
  font-size:16px;
}

/* =========================
   CARD COMPONENT
========================= */

.card{
  background:#fff;
  border-radius:20px;
  padding:26px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}

/* =========================
   ICON BOX
========================= */

.icon-box{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.icon-box-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:var(--brand-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
}

.icon-box-text h3{
  font-size:20px;
  margin-bottom:6px;
}

.icon-box-text p{
  color:var(--muted);
  font-size:15px;
}

/* =========================
   GRID HELPERS
========================= */

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

/* =========================
   BADGE
========================= */

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  background:var(--brand-soft);
  color:var(--brand);
}

/* =========================
   ALERTS
========================= */

.alert{
  padding:18px;
  border-radius:16px;
  font-size:15px;
}

.alert-success{
  background:#e8f9ef;
  color:#157347;
}

.alert-info{
  background:#e9f5ff;
  color:#0b5ed7;
}

.alert-warning{
  background:#fff4e5;
  color:#b45309;
}

/* =========================
   TABLE
========================= */

.table{
  width:100%;
  border-collapse:collapse;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}

.table th{
  background:var(--brand);
  color:#fff;
  padding:14px;
  text-align:right;
}

.table td{
  padding:14px;
  border-bottom:1px solid var(--line);
}

.table tr:last-child td{
  border-bottom:none;
}

/* =========================
   FORM
========================= */

.form-group{
  margin-bottom:18px;
}

.form-label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
}

.form-input{
  width:100%;
  height:50px;
  border-radius:12px;
  border:1px solid var(--line);
  padding:0 14px;
  background:#fff;
}

.form-input:focus{
  outline:none;
  border-color:var(--brand);
}

textarea.form-input{
  height:120px;
  padding-top:10px;
}

/* =========================
   BREADCRUMB
========================= */

.breadcrumb{
  display:flex;
  gap:8px;
  font-size:14px;
  color:var(--muted);
}

.breadcrumb a{
  color:var(--brand);
}

/* =========================
   SPACING HELPERS
========================= */

.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}

.pt-40{padding-top:40px;}
.pb-40{padding-bottom:40px;}