/* DocSquire Checkout Add-Ons — Checkout Page Styles */

/* ── Wrapper: matches .pmpro .pmpro_card ── */
#dsca-addon-wrapper {
  background-color: var(--pmpro--color--base, #fff);
  border: 1px solid var(--pmpro--color--border--variation, #e3e8f0);
  border-radius: var(--pmpro--base--border-radius, 8px);
  box-shadow: var(--pmpro--box-shadow, 0 2px 12px rgba(30,40,80,.07));
  display: flex;
  flex-direction: column;
  margin: var(--pmpro--base--spacing--medium, 20px) 0;
  overflow: visible;
}
#dsca-addon-wrapper p:not(.pmpro_form_hint) {
  margin: var(--pmpro--base--spacing--small, 12px) 0;
  padding: 0;
}
#dsca-addon-wrapper p:last-of-type {
  margin-bottom: 0;
}

/* Inner padding wrapper (child of #dsca-addon-wrapper, wraps heading + cards) */
#dsca-addon-inner {
  padding: var(--pmpro--base--spacing--small, 12px)
           var(--pmpro--base--spacing--large, 24px)
           var(--pmpro--base--spacing--large, 24px);
}

/* ── Section heading: matches .pmpro_font-large ── */
.dsca-section-heading {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 16px;
  color: inherit;
}

/* ── Card ── */
.dsca-card {
  background: #fff;
  border: 1.5px solid #e3e8f0;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(30,40,80,.07);
  overflow: visible;
  transition: box-shadow .2s;
}
.dsca-card:hover { box-shadow: 0 4px 20px rgba(30,40,80,.13); }

.dsca-card-header {
  display: flex;
  align-items: center;
  gap: 3px !important;
  background: #f5f7fc;
  border-bottom: 1px solid #e3e8f0;
  padding: 14px 18px;
  position: relative;
}
.dsca-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: #1a1a2e;
}

/* ── Helper tooltip ── */
.dsca-helper-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50%;
  background: #4f8ef7;
  color: #fff;
  font-size: .65rem;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  font-style: normal;
}
.dsca-helper-tooltip {
  display: none;
  position: fixed;
  background: #1a1a2e;
  color: #e8eaf2;
  font-size: .82rem;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 320px;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
  z-index: 99999;
  pointer-events: none;
  white-space: normal;
}
.dsca-helper-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 22px;
  border: 6px solid transparent;
  border-bottom-color: #1a1a2e;
  border-top: none;
}
/* Tooltip shown/hidden via JS */

/* ── Card body ── */
.dsca-card-body {
  padding: 18px;
}

/* ── Selections ── */
.dsca-radio-label,
.dsca-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #e3e8f0;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: .9rem;
  color: #2d3a58;
  transition: border-color .15s, background .15s;
}
.dsca-radio-label:hover,
.dsca-check-label:hover {
  border-color: #4f8ef7;
  background: #f0f5ff;
}
.dsca-radio-label input,
.dsca-check-label input {
  accent-color: #4f8ef7;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.dsca-radio-label input:checked ~ .dsca-opt-price,
.dsca-check-label input:checked ~ .dsca-opt-price {
  color: #22c97e;
  font-weight: 700;
}
.dsca-opt-price {
  margin-left: auto;
  font-size: .82rem;
  font-weight: 600;
  color: #4f8ef7;
}
.dsca-select {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #e3e8f0;
  border-radius: 8px;
  font-size: .9rem;
  color: #2d3a58;
  background: #fff;
  outline: none;
  transition: border-color .15s;
  cursor: pointer;
}
.dsca-select:focus { border-color: #4f8ef7; box-shadow: 0 0 0 3px rgba(79,142,247,.14); }

/* ── State picker ── */
.dsca-state-picker {
  margin-top: 12px;
}
.dsca-state-picker label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #000;
  margin-bottom: 6px;
}
.dsca-state-picker .dsca-state-prompt {
  font-size: .88rem;
  color: #000;
  margin-bottom: 8px;
  font-style: normal;
}
.dsca-state-picker select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #c5d0e8;
  border-radius: 8px;
  font-size: .88rem;
  color: #2d3a58;
  background: #f8f9fd;
  outline: none;
  cursor: pointer;
}
.dsca-state-picker select:focus { border-color: #4f8ef7; }

/* ── Pricing table — replaces #pmpro_pricing_fields .pmpro_card_content ── */
#dsca-pricing-table {
  margin-bottom: 0;
}

.dsca-pricing-header {
  font-size: .9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #000;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.dsca-pricing-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--pmpro--color--border--variation, #e8ecf4);
  animation: dsca-fade-in .18s ease;
}
.dsca-pricing-line:last-of-type {
  border-bottom: none;
}

.dsca-pricing-line-name {
  font-size: .9rem;
  color: var(--pmpro--color--text, #2d3a58);
  flex: 1;
  padding-right: 12px;
}
.dsca-pricing-line-amt {
  font-size: .9rem;
  font-weight: 600;
  color: var(--pmpro--color--text, #2d3a58);
  white-space: nowrap;
}

/* Add-on lines */
.dsca-pricing-line--addon .dsca-pricing-line-name {
  color: var(--pmpro--color--primary, #4f8ef7);
}
.dsca-pricing-line--addon .dsca-pricing-line-amt {
  color: var(--pmpro--color--primary, #4f8ef7);
}

/* Pending (state not yet chosen) */
.dsca-pricing-line--pending .dsca-pricing-line-name {
  color: var(--pmpro--color--text--muted, #7e8aab);
  font-style: italic;
}
.dsca-pending {
  font-style: italic;
  font-size: .82rem;
  color: var(--pmpro--color--text--muted, #7e8aab);
}

/* Total row */
.dsca-pricing-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--pmpro--color--primary--tint, #f0f5ff);
  border-radius: var(--pmpro--base--border-radius, 8px);
  border: 1.5px solid var(--pmpro--color--primary--light, #c5d7fb);
  animation: dsca-fade-in .18s ease;
}
.dsca-pricing-total-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--pmpro--color--text, #2d3a58);
}
.dsca-pricing-total-amt {
  font-size: .9rem;
  font-weight: 700;
  color: var(--pmpro--color--text--dark, #1a1a2e);
}

/* Linked-level select in admin option rows */
.dsca-linked-level-field {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-border);
}
.dsca-linked-level-select { width: 100%; }

@keyframes dsca-fade-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}