/* ===========================================================================
   idl-components.css — Layer 1

   Makes FOSSBilling's Bootstrap components read as idlhost.com.

   Loads AFTER idl-tokens.css (which is a byte-for-byte copy of the website's
   css/tokens.css) and after the theme's own idlhost.css.

   METHOD — read this before editing.
   Bootstrap 5.3 drives every component from `--bs-*` custom properties. So we
   remap those to the IDL tokens rather than overriding Bootstrap's rules.
   That matters for three reasons:
     1. Hover / focus / active / disabled states keep working, because Bootstrap
        derives them from the same variables.
     2. No specificity war. Every `!important` in this file is on a .badge
        colour rule and nowhere else, because Bootstrap's .bg-* and .text-bg-*
        utilities declare theirs `!important` and cannot be beaten otherwise.
        If you add one anywhere else, something has gone wrong -- find the
        --bs-* variable instead.
     3. A Bootstrap or FOSSBilling upgrade rewrites the rules but keeps the
        variable names, so this survives where rule overrides would silently rot.
   Only drop to a real rule where Bootstrap exposes no variable (noted inline).

   This file is shared verbatim by themes/idlhost and themes/admin_idlhost.
   Edit billing-theme/shared/idl-components.css and redeploy both — do not edit
   either copy in place or they will drift.
   =========================================================================== */

:root {
  /* --- Global ----------------------------------------------------------- */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--idl-body);
  --bs-body-bg: var(--idl-bg);
  --bs-emphasis-color: var(--idl-ink);
  --bs-secondary-bg: var(--idl-bg-alt);
  --bs-tertiary-bg: var(--idl-bg-alt);
  --bs-border-color: var(--idl-line);
  --bs-border-color-translucent: var(--idl-line);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-md);
  --bs-border-radius-xl: var(--r-md);

  --bs-primary: var(--idl-blue);
  --bs-primary-rgb: 0, 84, 166;          /* #0054a6 — keep in step with --idl-blue */
  --bs-link-color: var(--idl-blue);
  --bs-link-color-rgb: 0, 84, 166;
  --bs-link-hover-color: var(--idl-blue-dark);
  --bs-link-hover-color-rgb: 0, 65, 127;

  --bs-heading-color: var(--idl-ink);
  --bs-secondary-color: var(--idl-muted);
}

/* --- Accordion ----------------------------------------------------------
   The order flow IS an accordion (#orderManager), so this is the single
   highest-impact block in the file. Mirrors .accordion on the website. */
.accordion {
  --bs-accordion-bg: #fff;
  --bs-accordion-color: var(--idl-body);
  --bs-accordion-border-color: var(--idl-line);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: var(--r-md);
  --bs-accordion-inner-border-radius: var(--r-md);

  --bs-accordion-btn-color: var(--idl-ink);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-padding-x: var(--sp-5);
  --bs-accordion-btn-padding-y: var(--sp-4);
  --bs-accordion-btn-focus-box-shadow: var(--sh-focus);
  --bs-accordion-btn-icon-width: 1rem;

  --bs-accordion-active-color: var(--idl-blue);
  --bs-accordion-active-bg: var(--idl-blue-light);

  --bs-accordion-body-padding-x: var(--sp-5);
  --bs-accordion-body-padding-y: var(--sp-5);
}
/* No variable exists for the button's typography. */
.accordion-button {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-base);
}
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-button:hover { background: var(--idl-bg-alt); }
.accordion-button:not(.collapsed):hover { background: var(--idl-blue-light); }
/* The step icons FOSSBilling puts in each header. */
.accordion-button > .icon { color: var(--idl-blue); flex-shrink: 0; }

/* --- Forms --------------------------------------------------------------
   Mirrors .field on the website. Bootstrap has no variables for control
   padding or typography, so these are real rules. */
.form-label,
.col-form-label {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--idl-ink);
  margin-bottom: var(--sp-2);
}
.form-control,
.form-select {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--idl-ink);
  background-color: #fff;
  border: 1px solid var(--idl-line);
  border-radius: var(--r-sm);
  padding: 0.75rem var(--sp-4);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--idl-blue);
  box-shadow: var(--sh-focus);
}
.form-control::placeholder { color: var(--idl-muted); opacity: 1; }
.form-control:disabled,
.form-select:disabled { background-color: var(--idl-bg-alt); color: var(--idl-muted); }
textarea.form-control { min-height: 150px; resize: vertical; }

.form-text { font-size: var(--fs-xs); color: var(--idl-muted); }
.invalid-feedback { font-size: var(--fs-xs); }
.was-validated .form-control:invalid,
.form-control.is-invalid { border-color: #b3261e; }

.form-check-input { border-color: var(--idl-line); }
.form-check-input:checked {
  background-color: var(--idl-blue);
  border-color: var(--idl-blue);
}
.form-check-input:focus { border-color: var(--idl-blue); box-shadow: var(--sh-focus); }
.form-check-label { font-size: var(--fs-sm); color: var(--idl-body); }

.input-group-text {
  background: var(--idl-bg-alt);
  border-color: var(--idl-line);
  color: var(--idl-muted);
  font-size: var(--fs-sm);
}

/* --- Buttons ------------------------------------------------------------
   .btn / .btn-primary are already shaped by idlhost.css; only the focus ring
   is added here so it matches every other control. */
.btn:focus-visible { box-shadow: var(--sh-focus); }

/* --- Tabs, pagination, dropdowns, list groups --------------------------- */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--idl-line);
  --bs-nav-tabs-link-active-color: var(--idl-blue);
  --bs-nav-tabs-link-active-bg: #fff;
  --bs-nav-tabs-link-active-border-color: var(--idl-line) var(--idl-line) #fff;
  --bs-nav-link-color: var(--idl-body);
  --bs-nav-link-hover-color: var(--idl-blue);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
}
.pagination {
  --bs-pagination-color: var(--idl-body);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--idl-line);
  --bs-pagination-hover-color: var(--idl-blue);
  --bs-pagination-hover-bg: var(--idl-bg-alt);
  --bs-pagination-active-bg: var(--idl-blue);
  --bs-pagination-active-border-color: var(--idl-blue);
  --bs-pagination-focus-box-shadow: var(--sh-focus);
  font-size: var(--fs-sm);
}
.dropdown-menu {
  --bs-dropdown-border-color: var(--idl-line);
  --bs-dropdown-border-radius: var(--r-md);
  --bs-dropdown-link-color: var(--idl-body);
  --bs-dropdown-link-hover-bg: var(--idl-bg-alt);
  --bs-dropdown-link-hover-color: var(--idl-blue);
  --bs-dropdown-link-active-bg: var(--idl-blue);
  --bs-dropdown-font-size: var(--fs-sm);
  box-shadow: var(--sh-md);
}
.list-group {
  --bs-list-group-border-color: var(--idl-line);
  --bs-list-group-border-radius: var(--r-md);
  --bs-list-group-color: var(--idl-body);
  --bs-list-group-action-hover-bg: var(--idl-bg-alt);
  --bs-list-group-active-bg: var(--idl-blue);
  --bs-list-group-active-border-color: var(--idl-blue);
}

/* --- Modals ------------------------------------------------------------- */
.modal {
  --bs-modal-border-color: var(--idl-line);
  --bs-modal-border-radius: var(--r-md);
  --bs-modal-header-border-color: var(--idl-line);
  --bs-modal-footer-border-color: var(--idl-line);
}
.modal-title { font-family: var(--font-head); color: var(--idl-ink); }

/* --- Alerts -------------------------------------------------------------
   idlhost.css already covers .alert-info; these are the siblings, matched to
   .form-note--ok / --info on the website. */
.alert { border-radius: var(--r-sm); font-size: var(--fs-sm); }
.alert-success {
  --bs-alert-bg: var(--idl-green-light);
  --bs-alert-border-color: var(--idl-green);
  --bs-alert-color: var(--idl-green-text);
}
.alert-warning,
.alert-danger {
  --bs-alert-bg: var(--idl-orange-light);
  --bs-alert-border-color: var(--idl-orange);
  --bs-alert-color: var(--idl-orange-text);
}

/* --- Progress / badges --------------------------------------------------- */
.progress { --bs-progress-bar-bg: var(--idl-blue); --bs-progress-bg: var(--idl-line-soft); }
.badge { font-family: var(--font-head); font-weight: 600; }

/* --- Dot loader ---------------------------------------------------------
   Lifted from the website, where it echoes the logo's dot grid. Replaces
   FOSSBilling's full-screen dark overlay + animated GIF (loader8.gif).
   The markup for it lives in the mod_orderbutton_content override. */
.dot-loader {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
  margin-right: var(--sp-2);
}
.dot-loader i {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--idl-blue);
  animation: dot-pulse 1s infinite ease-in-out;
}
.dot-loader i:nth-child(2) { background: var(--idl-orange); animation-delay: 0.15s; }
.dot-loader i:nth-child(3) { background: var(--idl-green); animation-delay: 0.3s; }
@keyframes dot-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* NOTE: no rule for FOSSBilling's `.loading` scrim. That element is dead
   markup upstream — it ships `display:none` and nothing in the order JS,
   the theme's TS sources or FOSSBilling core ever shows it. The override of
   mod_orderbutton_content removes it outright rather than styling it. */

@media (prefers-reduced-motion: reduce) {
  .dot-loader i { animation: none; opacity: 0.7; }
}

/* ===========================================================================
   GAP PASS — 2026-09-20, after seeing the order page rendered.

   The first pass mapped .nav-tabs but the domain selector uses .nav-pills, and
   several button/badge variants were never mapped at all. Verified against the
   templates rather than guessed from the screenshot:
     nav-pills   Servicehosting/…/mod_servicehosting_order_form.html.twig:41
     btn-dark    the domain "Check" button
     bg-info     the "4 Items" count
   =========================================================================== */

/* --- Nav pills (domain: Register / Transfer / Own domain) ---------------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--idl-blue);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-border-radius: var(--r-sm);
  --bs-nav-link-color: var(--idl-body);
  --bs-nav-link-hover-color: var(--idl-blue);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
}
.nav-pills .nav-link { text-align: left; }

/* --- Button variants ----------------------------------------------------
   Bootstrap 5.3 buttons are driven by --bs-btn-*, so no rule overrides. */
.btn-dark,
.btn-secondary {
  --bs-btn-bg: var(--idl-blue);
  --bs-btn-border-color: var(--idl-blue);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--idl-blue-dark);
  --bs-btn-hover-border-color: var(--idl-blue-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--idl-blue-dark);
  --bs-btn-active-border-color: var(--idl-blue-dark);
}
.btn-outline-success {
  --bs-btn-color: var(--idl-green-text);
  --bs-btn-border-color: var(--idl-green);
  --bs-btn-hover-bg: var(--idl-green-light);
  --bs-btn-hover-color: var(--idl-green-text);
  --bs-btn-hover-border-color: var(--idl-green);
}

/* --- Badges -------------------------------------------------------------
   !important here is unavoidable: Bootstrap's .bg-* utilities declare
   `background-color: ... !important`, so a plain rule cannot win. Light
   background + dark text rather than white-on-colour: white on --idl-green
   (#0db14b) is about 2.8:1, which fails WCAG AA for small bold text. This
   mirrors .form-note--ok / --info on the website. */
.badge.bg-info {
  background-color: var(--idl-blue-light) !important;
  color: var(--idl-blue);
}
.badge.bg-success {
  background-color: var(--idl-green-light) !important;
  color: var(--idl-green-text);
}
.badge.bg-secondary {
  background-color: var(--idl-line-soft) !important;
  color: var(--idl-body);
}

/* --- .well --------------------------------------------------------------
   Bootstrap 3 leftover that FOSSBilling still emits around the product
   details; it has no styling at all in Bootstrap 5. */
.well { margin-bottom: var(--sp-5); }
.well h3 {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  color: var(--idl-ink);
  margin-bottom: var(--sp-3);
}

/* --- text-bg-* helpers ---------------------------------------------------
   Bootstrap 5.3 has TWO badge colour idioms and FOSSBilling uses both:
     .badge.bg-info        -> handled above
     .badge.text-bg-success-> sets colour AND background in one class
   The gap pass only covered the first, which is why the Cart count stayed
   Bootstrap green while the "4 Items" badge went brand blue. Both of these
   declare !important, so matching it is unavoidable. */
.badge.text-bg-success {
  background-color: var(--idl-green-light) !important;
  color: var(--idl-green-text) !important;
}
.badge.text-bg-info {
  background-color: var(--idl-blue-light) !important;
  color: var(--idl-blue) !important;
}
.badge.text-bg-warning {
  background-color: var(--idl-orange-light) !important;
  color: var(--idl-orange-text) !important;
}

/* --- Product details block ----------------------------------------------
   `.well` wraps the product description and billing selector in the order
   flow. The description is authored in Markdown by whoever edits the product,
   so style both prose and list forms — a spec list reads far better than a
   run-on paragraph, and this makes that reformat land properly. */
.well p {
  color: var(--idl-body);
  line-height: 1.65;
  margin-bottom: var(--sp-4);
}
.well ul {
  margin: 0 0 var(--sp-4);
  padding-left: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-5);
}
.well ul li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--idl-body);
}
/* Square bullet, echoing the logo's dot grid. */
.well ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--idl-blue);
}
.well ul li strong { color: var(--idl-ink); font-weight: 600; }
.well h4 {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  color: var(--idl-ink);
}
.well hr { border-color: var(--idl-line); opacity: 1; margin: var(--sp-5) 0; }

@media (max-width: 640px) {
  .well ul { grid-template-columns: 1fr; }
}