/* =========================================================
   TemplateCat Components (no-markup-changes)
   - legal/info cards: .policy-card, .policy-meta
   - contact status banner: .status (+ .success/.error)
   - forms: form, label, input, textarea, select, button
   ========================================================= */

/* --- Policy / Legal / Contact card (privacy-policy, terms, contact) --- */
.policy-card{
  margin-top: 14px;
  border-radius: var(--radius2);
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 22px;
}

.policy-card h1{
  margin: 0 0 8px 0;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.10;
}

.policy-meta{
  margin: 0 0 18px 0;
  color: var(--muted2);
  font-size: 13px;
  font-weight: 700;
}

.policy-card h2{
  margin: 18px 0 8px 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.policy-card p{
  margin: 0 0 12px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 90ch;
}

.policy-card ul{
  margin: 10px 0 14px 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.policy-card li{ margin: 6px 0; }

/* --- Status banner (contact page) --- */
.status{
  display:none;
  border-radius: var(--radius2);
  padding: 14px 16px;
  margin: 14px 0;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.75);
  box-shadow: 0 14px 50px rgba(0,0,0,.10);
}

/* Show banner when either class is present */
.status.success,
.status.error{
  display:block;
}

.status.success{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  color: rgba(0,0,0,.82);
}

.status.error{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: rgba(0,0,0,.82);
}

/* --- Forms (contact page) --- */
.policy-card form,
form{
  display:grid;
  gap: 12px;
  max-width: 620px;
  margin-top: 10px;
}

.policy-card label,
label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(0,0,0,.82);
  display: grid;
  gap: 8px;
}

input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

textarea{
  min-height: 140px;
  resize: vertical;
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(254,170,38,.55);
  box-shadow: 0 0 0 4px rgba(254,170,38,.18);
}

/* Contact submit button (keep it compatible with your existing markup) */
button[type="submit"],
.policy-card button[type="submit"]{
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(90deg, rgba(254,170,38,1) 0%, rgba(254,225,38,1) 100%);
  color: rgba(0,0,0,.78);
  font-weight: 900;
  cursor:pointer;
}

button[type="submit"]:hover{
  transform: translateY(-1px);
  opacity: .98;
}

/* --- Mobile tweaks to match your legal pages --- */
@media (max-width: 480px){
  .policy-card{ padding: 18px; }
}