/* BloomMachine SMS Template Library */

/* Card-internal link inside the features-grid h3 keeps the card heading look. */
.feature-card .feature-link {
  color: inherit;
  text-decoration: none;
}
.feature-card .feature-link:hover,
.feature-card .feature-link:focus {
  text-decoration: underline;
}

.sms-templates-page .sms-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 40px 80px;
}

.sms-templates-page .sms-header {
  margin-bottom: 28px;
  text-align: left;
}

.sms-templates-page .sms-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--fg, #1E3A1E);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.sms-templates-page .sms-lede {
  font-size: 1.05rem;
  color: var(--fg-light, #5A7A52);
  max-width: 62ch;
  line-height: 1.55;
}

.sms-templates-page .sms-lede code {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.92em;
  background: var(--cream, #FDFBF7);
  border: 1px solid var(--border, rgba(143, 175, 124, 0.3));
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--fg, #1E3A1E);
}

/* Filter row */
.sms-templates-page .sms-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 12px;
  background: var(--cream, #FDFBF7);
  border: 1.5px solid var(--border, rgba(143, 175, 124, 0.3));
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
}

.sms-templates-page .filter-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg-mid, #3D5C3A);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sms-templates-page .filter-group select,
.sms-templates-page .filter-group input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border, rgba(143, 175, 124, 0.3));
  border-radius: 8px;
  background: var(--bg, #F8F5EF);
  color: var(--fg, #1E3A1E);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  min-height: 40px;
  transition: border-color 0.15s;
}
.sms-templates-page .filter-group select:focus,
.sms-templates-page .filter-group input:focus {
  outline: none;
  border-color: var(--accent, #8FAF7C);
}

.sms-templates-page .sms-empty {
  margin: 12px 0 24px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(196, 114, 77, 0.08);
  border: 1px solid rgba(196, 114, 77, 0.25);
  color: var(--terracotta, #C4724D);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
}
.sms-templates-page .sms-empty.hidden { display: none; }

/* Grid */
.sms-templates-page .sms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sms-templates-page .template-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 1.25rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sms-templates-page .template-card:hover {
  border-color: var(--accent, #8FAF7C);
  box-shadow: 0 6px 20px rgba(30, 58, 30, 0.06);
}

.sms-templates-page .template-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sms-templates-page .chip {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.sms-templates-page .chip-use-case {
  background: rgba(143, 175, 124, 0.16);
  color: var(--accent-dark, #6B8F5C);
}

.sms-templates-page .chip-tone-friendly {
  background: rgba(143, 175, 124, 0.18);
  color: var(--accent-dark, #6B8F5C);
}

.sms-templates-page .chip-tone-urgent {
  background: rgba(196, 114, 77, 0.14);
  color: var(--terracotta, #C4724D);
}

.sms-templates-page .chip-tone-vip {
  background: var(--accent-dark, #6B8F5C);
  color: #fff;
}

.sms-templates-page .template-label {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg, #1E3A1E);
  margin-bottom: 10px;
}

.sms-templates-page .template-body {
  font-family: 'DM Mono', ui-monospace, Menlo, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--fg, #1E3A1E);
  background: var(--bg, #F8F5EF);
  border: 1px solid var(--border, rgba(143, 175, 124, 0.3));
  border-radius: 8px;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 12px;
}

.sms-templates-page .template-actions {
  display: flex;
  justify-content: flex-end;
}

.sms-templates-page .btn-copy {
  background: var(--accent-dark, #6B8F5C);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 36px;
  min-width: 84px;
}
.sms-templates-page .btn-copy:hover { background: var(--fg, #1E3A1E); }

@media (max-width: 720px) {
  .sms-templates-page .sms-main { padding: 32px 16px 64px; }
  .sms-templates-page .sms-title { font-size: 1.7rem; }
  .sms-templates-page .sms-filters {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }
}