/* ====== Layout base ====== */
.hryp-hrcost {
  max-width: 980px;
  margin: 32px auto;
  padding: 0 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0f172a; /* slate-900 */
}
.hryp-hrcost h2 {
  font-size: 34px;
  line-height: 1.2;
  margin: 0 0 6px 0;
  font-weight: 800;
}
.hryp-hrcost .subtitle {
  color: #475569; /* slate-600 */
  margin: 0 0 20px 0;
}

/* ====== Card form ====== */
.hrc-form {
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  border-radius: 16px;
  padding: 20px;
}

.hrc-form .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.hrc-form .field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155; /* slate-700 */
  margin-bottom: 6px;
}

.hrc-form input[type="text"],
.hrc-form input[type="number"],
.hrc-form select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: box-shadow .2s, border-color .2s;
  font-size: 14px;
}
.hrc-form select[multiple] {
  height: auto;
  min-height: 110px;
  padding: 8px;
}
.hrc-form input:focus,
.hrc-form select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* ====== Tier pricing ====== */
.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0 10px;
}
.tier {
  display: block;
  background: #f8fafc; /* slate-50 */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: #0f172a;
  cursor: pointer;
}
.tier input {
  margin-right: 8px;
  transform: translateY(1px);
}
.tier:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

/* ====== Buttons ====== */
.btn-primary, .btn-secondary, .btn-primary.outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
  border: 1px solid transparent;
}
.btn-primary {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .25);
}
.btn-primary:hover { background: #1d4ed8; }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  background: #fff;
  color: #0f172a;
  border-color: #e5e7eb;
}
.btn-secondary:hover { background:#f8fafc; }

.btn-primary.outline {
  background: #fff;
  color: #2563eb;
  border-color: #2563eb;
  box-shadow: none;
}
.btn-primary.outline:hover { background: #eff6ff; }

#btn-preview { margin-top: 6px; }

/* ====== Preview card ====== */
.hrc-preview {
  margin-top: 18px;
}
.hrc-preview h3 {
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 700;
}
.hrc-preview .card {
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  border-radius: 16px;
  padding: 16px;
}

/* ====== Paywall box ====== */
.hryp-hrcost .paywall {
  margin-top: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 14px;
}
.hryp-hrcost .paywall .field { max-width: 420px; margin-bottom: 8px; }
.hryp-hrcost .micro {
  color: #64748b; 
  font-size: 12px;
  margin-top: 8px;
}

/* ====== Actions row ====== */
.hryp-hrcost .actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* Forza stile neutro sulla tabella dell'anteprima */
.hryp-hrcost .hrc-table th,
.hryp-hrcost .hrc-table td {
  background: #ffffff !important;
  color: #0f172a !important;   /* testo scuro */
}
.hryp-hrcost .hrc-table thead th {
  background: #f8fafc !important;  /* header grigio chiaro */
  font-weight: 700;
}
.hryp-hrcost .hrc-table tbody tr:nth-child(odd) td {
  background: #fcfdff !important;  /* zebra leggerissimo */
}
/* evita evidenziazioni gialle su numeri in grassetto */
.hryp-hrcost .hrc-table td strong {
  color: #0f172a !important;
  background: transparent !important;
}

/* ====== Table (responsive) ====== */
.hrc-table-wrapper { width: 100%; overflow: auto; }
.hrc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.hrc-table th, .hrc-table td {
  border: 1px solid #e5e7eb;
  padding: 10px;
  white-space: nowrap;
}
.hrc-table thead th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
}
.hrc-table tbody tr:nth-child(odd) td { background: #fcfdff; }

/* ====== Insight text ====== */
.insight {
  margin: 12px 0 4px;
  color: #334155;
  font-size: 13px;
}

/* ====== Responsive ====== */
@media (max-width: 860px) {
  .hrc-form .grid { grid-template-columns: 1fr; }
  .actions { flex-direction: column; }
  .btn-primary, .btn-secondary, .btn-primary.outline { width: 100%; }
}

/* Email required + inline error */
.req { color:#dc2626; margin-left:2px; }
.hint { color:#64748b; font-weight:400; }
.field-error {
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#991b1b;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:8px;
  padding:8px 10px;
}

/* PayPal container full width on mobile */
@media (max-width: 640px){
  #paypal-button-container { width:100% !important; }
}