/* checkout.css — scoped to the checkout page only.
 *
 * checkout/register.twig, shipping_address.twig, payment_address.twig,
 * shipping_method.twig and payment_method.twig are OpenCart 4 core fragments
 * fetched over AJAX; they are marked up with Bootstrap utility classes
 * (form-control, form-select, form-label, row/col, form-check, btn) and this
 * theme is Tailwind/DaisyUI-only, so those fragments render completely
 * unstyled. Loading catalog bootstrap.css is not an option (its reset would
 * break the rest of the 1:1 static port), so this file maps just the classes
 * those fragments actually use onto the look of static/checkout.html
 * (.field / .form-label / bordered radio cards / two-column grid).
 *
 * Everything is scoped under #checkout-page so no other route is affected.
 */

#checkout-page .form-control,
#checkout-page .form-select,
#checkout-page textarea.form-control,
#checkout-page input[type="text"],
#checkout-page input[type="email"],
#checkout-page input[type="tel"],
#checkout-page input[type="password"],
#checkout-page select,
#checkout-page textarea {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: .7rem .9rem;
  font-size: .95rem;
  color: var(--c-secondary, #1f274a);
  background: #fff;
  outline: none;
}

#checkout-page .form-control:focus,
#checkout-page .form-select:focus,
#checkout-page select:focus,
#checkout-page textarea:focus {
  border-color: var(--c-primary, #eb586a);
  box-shadow: 0 0 0 2px rgba(235, 88, 106, .18);
}

#checkout-page .form-label,
#checkout-page label.col-form-label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--c-secondary, #1f274a);
  margin-bottom: .35rem;
  display: block;
}

/* static/checkout.html lays the contact + address fields out two per row. */
#checkout-page .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  #checkout-page .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Core marks genuinely full-width rows with col-12 / col-md-12; plain .col is
     one of the two columns and must NOT be widened, or every field stacks. */
  #checkout-page .row > [class*="col-12"],
  #checkout-page .row > [class*="col-md-12"],
  #checkout-page .row > [class*="col-lg-12"] {
    grid-column: 1 / -1;
  }
}

#checkout-page .mb-3 { margin-bottom: 0; }
#checkout-page fieldset { margin-bottom: 1.25rem; }
#checkout-page fieldset > legend,
#checkout-page fieldset > h2,
#checkout-page legend {
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-secondary, #1f274a);
  margin-bottom: .75rem;
  float: none;
  width: auto;
}

/* Shipping/payment method pickers: bordered radio cards, as in the static. */
#checkout-page .form-check {
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: .75rem;
  margin-bottom: .5rem;
  font-size: .875rem;
  cursor: pointer;
}
#checkout-page .form-check:hover { border-color: #d9d9d9; }
#checkout-page .form-check-input { width: auto; margin: 0; flex: none; }
#checkout-page .form-check-label { margin: 0; cursor: pointer; }

/* Core fragments render their submit buttons as Bootstrap .btn-primary. */
#checkout-page .btn,
#checkout-page button[type="submit"]:not(.btn-redable):not(.btn-navy) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--c-btn, #494f6c);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn, 20px);
  padding: .7rem 2rem;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}
#checkout-page .btn:hover,
#checkout-page button[type="submit"]:not(.btn-redable):not(.btn-navy):hover {
  background: var(--c-btn-hover, #3a4059);
}
#checkout-page .btn:disabled { opacity: .55; cursor: default; }

/* The "Bestelling plaatsen" button lives in the order aside (#checkout-confirm)
   and must match the static's full-width navy CTA, not a pink inline button. */
#checkout-confirm .btn,
#checkout-confirm button[type="submit"] {
  width: 100%;
  margin-top: .25rem;
}

#checkout-page .text-danger { color: var(--c-danger, #e02b27); font-size: .8rem; }
#checkout-page hr { border: 0; border-top: 1px solid #eee; margin: 1.25rem 0; }