/*!
 * MediProducts Equipment Forms — module stylesheet
 *
 * Deliberately NOT a Bootstrap copy. The target WordPress theme ("eversafe")
 * already loads Bootstrap 5.3.3, verified by live probe as near-stock:
 * --bs-primary #0d6efd, .card white on 1px rgba(0,0,0,.176) at 6px radius,
 * .form-control on a #dee2e6 border. Shipping a second Bootstrap would create a
 * competing cascade for no gain, so this file carries ONLY the module's own
 * `ce-*` classes plus any measured corrections for theme divergence.
 *
 * Every rule is scoped under .mp-equipment-forms so the plugin can never restyle
 * the host theme. The unscoped originals live in web/public/index.html (EMS SPA);
 * the source of truth for these values is that file.
 */

/* ---------------------------------------------------------------------------
   Touch targets and photo previews (EMS: index.html .ce-touch / .ce-preview)
   --------------------------------------------------------------------------- */
.mp-equipment-forms .ce-touch {
  min-height: 44px;
}

.mp-equipment-forms .ce-preview {
  max-height: 220px;
  width: auto;
}

/* ---------------------------------------------------------------------------
   Mobile treatment.

   The inquiry form injected these rules at runtime via ensureMobileInquiryStyles()
   (web/public/pages/customerEquipmentInquiryForm.js). The plugin owns them here
   instead, so there is exactly one owner of the module's styles and no <style>
   element is written into the host page's <head> at runtime.

   var(--bs-border-color) is kept rather than the hardcoded #dee2e6 the HubSpot
   port used: the theme supplies Bootstrap 5, so the custom property resolves and
   the border follows the host's own border colour.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .mp-equipment-forms .ce-public-form .form-control,
  .mp-equipment-forms .ce-public-form .form-select {
    min-height: 48px;
  }

  /* Costco: appliance cards go edge-to-edge on small screens. */
  .mp-equipment-forms .costco-equipment-form .costco-appliance-card {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  /* Inquiry: locations and appliances flatten into a plain stacked list. */
  .mp-equipment-forms .ce-mobile-flat-location {
    border: 0 !important;
    border-radius: 0 !important;
  }

  .mp-equipment-forms .ce-mobile-flat-location > .card-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mp-equipment-forms .ce-mobile-flat-location + .ce-mobile-flat-location {
    border-top: 1px solid var(--bs-border-color) !important;
    padding-top: 1rem;
  }

  .mp-equipment-forms .ce-mobile-flat-appliance {
    border: 0 !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mp-equipment-forms .ce-mobile-flat-appliance + .ce-mobile-flat-appliance {
    border-top: 1px solid var(--bs-border-color) !important;
    padding-top: 1rem;
  }
}

/* ---------------------------------------------------------------------------
   Theme-divergence corrections.

   Measured against the live theme. Only differences that affect the form are
   corrected; the site's own typeface is deliberately NOT overridden, so the form
   reads as part of the page it is embedded in rather than as a foreign panel.

   Measured divergence retained on purpose:
     - font-family: theme uses "DM Sans" site-wide (EMS uses the Bootstrap system
       stack). Left alone by design.
   Measured divergence corrected:
     - .badge border-radius: theme renders 20px (pill); stock Bootstrap 5 and the
       EMS form render 0.375rem. The appliance counter badge reads as a pill
       otherwise, which is not how the cloned form looks.
     - dd margin: see below.
     - list margin: see below.
   --------------------------------------------------------------------------- */
.mp-equipment-forms .badge {
  border-radius: 0.375rem;
}

/* The theme declares `dd { margin-left:1.5em; margin-right:1.5em }` and then
   resets ONLY margin-left in a later rule, so dd keeps a 21px right margin.
   In the "Your inquiry" summary that pushes col-7 + col-5 + 21px to 314px inside
   a 294px row, and the definition list wraps onto two lines per pair. Measured on
   the live theme stylesheet; the EMS form renders dd with margin 0 on one line.
   Scoped to our definition lists so the theme's own dd styling is untouched. */
.mp-equipment-forms dl.row > dd {
  margin-left: 0;
  margin-right: 0;
}

/* The theme adds a 42px left margin to lists. Bootstrap's reboot sets no list
   margin-left, and the EMS form measures 0, so the location summary sits over-
   indented under its heading. Padding is left alone — the ps-3 utility owns it. */
.mp-equipment-forms ol,
.mp-equipment-forms ul {
  margin-left: 0;
  margin-right: 0;
}
