/* ==========================================================================
   register.css — simplified + stable
   ========================================================================== */

/* Base */
:root { --page-bg: #f5f7fb; }
body { background: var(--page-bg); }
.br-xl { border-radius: 1rem; }
.card { background: #fff; }

/* Sections */
.section-block {
  background: #f8fafc;                 /* a touch darker than the card */
  border: 1px solid #e5e7eb;
  border-radius: .875rem;
  padding: 1.25rem;
  margin-top: 1rem;
}

/* Section headers */
.section-title-wrap { display:flex; align-items:center; margin-bottom:.75rem; }
.section-accent { width:.35rem; height:1.5rem; border-radius:.35rem; background: var(--bs-primary); margin-right:.6rem; }
.section-title { margin:0; font-size:1.06rem; font-weight:700; color:#0b1320; }

/* Labels & controls */
.form-label { font-size:1rem; font-weight:700; color:#111827; margin-bottom:.25rem; }
.form-control-lg, .form-select-lg { font-size:1rem; padding-top:.6rem; padding-bottom:.6rem; }
.form-control:focus, .form-select:focus { box-shadow:0 0 0 .2rem rgba(13,110,253,.15); border-color:rgba(13,110,253,.5); }
.text-uppercase { text-transform:uppercase; }
.form-check-input { width:1.05em; height:1.05em; }

/* Billing toggle row */
#billing-toggle { padding-left:1.25rem; margin-top:1rem; }
#billing-toggle .form-check-input { margin-top:.2rem; }
#billing-toggle .form-check-label { font-weight:600; color:#0b1320; }

/* Billing accordion (JS controls height) */
#billing-section {
  overflow:hidden;
  height:0;              /* collapsed by default; JS sets to px/auto */
  padding-top:0;
  padding-bottom:0;
  border-width:0;
  margin-top:0;
  transition: height .28s ease;
}
#billing-section.open {
  /* visual when open; height is handled by JS */
  padding:1.25rem;
  border-width:1px;
  margin-top:1rem;
}

/* Payment placeholder (optional) */
.card-placeholder {
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6c757d;
  background:#fff;
  border:1px dashed #d7deea;
  border-radius:.5rem;
}

/* =======================
   Service picker — radio cards
   ======================= */

/* =======================
   Service picker — radio cards (redesigned)
   ======================= */

.service-picker legend { font-weight: 700; }

/* Card container */
.service-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: .875rem;
  padding: 1.25rem 1.5rem 1rem;   /* extra bottom space for price */
  min-height: 170px;              /* make cards feel substantial */
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.service-card:hover {
  border-color: rgba(13,110,253,.35);
  background: #f4f7fd;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.06);
}
.btn-check:checked + .service-card {
  border-color: var(--bs-primary);
  background: #eef4ff;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* Inner layout: single column, description on top, price at bottom */
.service-card .card-grid {
  display: grid;
  grid-template-columns: 1fr;        /* single column so text is full width */
  grid-auto-rows: auto;
  gap: .75rem;
}

/* Description: full width, smaller text, natural wrapping */
.service-title {
  grid-column: 1 / -1;
  font-weight: 600;
  font-size: .96rem;                 /* smaller per your request */
  line-height: 1.5;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;         /* only break very long words */
}

/* Price: centered at the bottom, larger */
.service-price {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: .5rem;
}
.service-price .h5,
.service-price .fw-bold {            /* handle both .h5 and .fw-bold cases */
  font-size: 1.35rem;                /* bigger price */
  line-height: 1.1;
}
.service-price .text-muted {
  margin-top: .15rem;
  display: block;                    /* ensure it sits under the amount */
}

/* Selected checkmark */
.select-check {
  position: absolute;
  top: .75rem; right: .75rem;
  font-size: 1.15rem;
  color: var(--bs-primary);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .12s ease, transform .12s ease;
}
.btn-check:checked + .service-card .select-check {
  opacity: 1;
  transform: scale(1);
}

/* ============= Service picker — visual tweaks ============= */

/* Unselected: white background + stronger border */
.service-card {
  background: #ffffff !important;
  border: 2px solid #d6dee9 !important;   /* more prominent */
}

/* Hover: crisper border, subtle glow */
.service-card:hover {
  border-color: #9fb7dc !important;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.06);
  background: #fcfdff !important;
}

/* Selected: keep strong border + gentle tint */
.btn-check:checked + .service-card {
  border-color: var(--bs-primary) !important;
  background: #f1f6ff !important;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* Price centered footer & full-width description (from your redesign) */
.service-card .card-grid { display:grid; grid-template-columns:1fr; gap:.75rem; }
.service-title {
  font-weight:600; font-size:.96rem; line-height:1.5;
  white-space:normal; word-break:normal; overflow-wrap:break-word;
}
.service-price { text-align:center; margin-top:.5rem; }
.service-price .h5, .service-price .fw-bold { font-size:1.35rem; line-height:1.1; }
.service-price .text-muted { display:block; margin-top:.15rem; }

/* Checkmark visibility */
.select-check {
  position:absolute; top:.75rem; right:.75rem; font-size:1.15rem;
  color:var(--bs-primary); opacity:0; transform:scale(.9);
  transition:opacity .12s ease, transform .12s ease;
}
.btn-check:checked + .service-card .select-check { opacity:1; transform:scale(1); }

/* On small screens the layout is already single column, so no extra rules needed */


/* Small header polish */
header h1 { letter-spacing:.2px; }
header p  { color:#6b7280; }

/* Red asterisk on required labels */
.form-label.req::after {
  content: " *";
  color: var(--bs-danger);
  margin-left: .25rem;
}

/* Slightly tighter space under invalid messages inside grid forms */
.was-validated .invalid-feedback,
.is-invalid ~ .invalid-feedback {
  display: block;
}