/* ===========================================================================
   Public /OSHC page — the same look as the client portal's Purchase Health
   Cover screen (/user/insurance).

   Why a copy and not a shared file: the portal's version of these rules lives
   in asset/user/css/user.css, which is the portal SHELL stylesheet — it also
   styles the sidebar, the header and the portal's own body background, so the
   public site cannot load it. What is portable is this page's own layer, so it
   is ported here and scoped under .u-oshc, which wraps the whole page in
   OSHC.view.php. Nothing here can reach the rest of the site.

   The one real difference from the portal copy: the portal's --u-* palette is
   a set of fixed light values, because that panel is light-only. The public
   site has a light/dark switch, so the same tokens are derived from the body
   colours instead — the page then follows whichever theme the visitor picked
   without a second set of rules.

   Kept in step with:
     app/user/user_insurance/user_insurance.view.php  (markup)
     asset/user/css/user.css  "health cover pages"    (rules)
   ======================================================================== */

.u-oshc {
    /* Surfaces and lines, mixed from the body pair so both themes work. */
    --u-surface: var(--bs-body-bg);
    --u-surface-2: color-mix(in srgb, var(--bs-body-color) 4%, var(--bs-body-bg));
    --u-text: var(--bs-body-color);
    --u-text-soft: color-mix(in srgb, var(--bs-body-color) 78%, var(--bs-body-bg));
    --u-muted: color-mix(in srgb, var(--bs-body-color) 58%, var(--bs-body-bg));
    --u-border: color-mix(in srgb, var(--bs-body-color) 14%, var(--bs-body-bg));
    --u-border-strong: color-mix(in srgb, var(--bs-body-color) 28%, var(--bs-body-bg));
    --u-radius: 12px;
    --u-radius-sm: 8px;
    --u-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);

    font-size: 14px;
}

/* ---------------------------------------------------------------- cards -- */

.u-oshc .u-card {
    background: var(--u-surface);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

/* Both pages are read top to bottom and their content is centred, so the card
   headers are centred too — a left-aligned title over centred content reads as
   a misalignment. */
.u-oshc .u-card-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--u-border);
    background: var(--u-surface-2);
}

.u-oshc .u-card-head > i { color: var(--color1); font-size: 16px; }

.u-oshc .u-card-title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--u-text);
    margin: 0;
}

.u-oshc .u-card-head > .u-btn { position: absolute; right: 12px; }
.u-oshc .u-card-body { padding: 16px; }

/* -------------------------------------------------------------- buttons -- */

.u-oshc .u-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--u-border-strong);
    border-radius: var(--u-radius-sm);
    background: var(--u-surface);
    color: var(--u-text) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
}

.u-oshc .u-btn:hover { background: var(--u-surface-2); border-color: var(--u-muted); }

.u-oshc .u-btn-primary {
    background: var(--color1);
    border-color: var(--color1);
    color: var(--color1_contrast) !important;
}

.u-oshc .u-btn-primary:hover { background: var(--color1_lighter); border-color: var(--color1_lighter); }
.u-oshc .u-btn-sm { padding: 5px 10px; font-size: 12px; }

/* -------------------------------------------------------- provider logos -- */

.u-oshc .ins-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 26px;
    padding: 6px 0 18px;
}

.u-oshc .ins-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 46px;
}

/* The logos are supplied at very different aspect ratios; contain keeps every
   one of them in its own proportions inside the same box. */
.u-oshc .ins-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* --------------------------------------------------------- quote fields -- */

/* Fixed tracks, centred as a block. The quote form is five controls that always
   need the same room, so every column is a pixel width and the whole grid is
   centred in the card: the form then looks identical on any monitor instead of
   stretching its date pickers and leaving its labels adrift. */
.u-oshc .u-oshc-fields {
    display: grid;
    grid-template-columns: 96px 96px 300px 300px 168px;
    justify-content: center;
    align-items: start;
    gap: 16px;
    padding: 6px 0 4px;
}

.u-oshc .u-oshc-field { min-width: 0; }
.u-oshc .u-oshc-field * { min-width: 0; }
.u-oshc .u-oshc-field-btn { align-self: end; }

/* The date picker ships with `m-auto`, which centred the control inside its
   cell and left a gap between the label and the field it belongs to. */
.u-oshc .u-oshc-field .m-auto { margin: 0 !important; width: 100%; }
.u-oshc .u-oshc-field-date .row { flex-wrap: nowrap; margin: 0; }
.u-oshc .u-oshc-field-date select { width: 100%; }
.u-oshc .u-oshc-field-date .form-select,
.u-oshc .u-oshc-field-date select { min-width: 0; }

/* Labels: small, bold and uppercase, so the row reads as a form and every
   field is named in the same voice. */
.u-oshc .ins-field-label {
    display: block;
    margin-bottom: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--u-muted);
    text-align: left;
    white-space: nowrap;
}

.u-oshc .u-oshc-fields select,
.u-oshc .u-oshc-fields input {
    border-radius: var(--u-radius-sm);
    border-color: var(--u-border-strong);
    font-size: 13px;
}

.u-oshc .ins-quote-btn { width: 100%; height: 38px; padding: 0 18px; }

/* The columns are fixed, so the ladder below is about how many of them still
   fit — each step keeps the same pixel widths and simply folds the row. */
@media (max-width: 1329.98px) {
    .u-oshc .u-oshc-fields { grid-template-columns: 300px 300px; }
    .u-oshc .u-oshc-field-num { width: 96px; }
    .u-oshc .u-oshc-field-btn { grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 915.98px) {
    .u-oshc .u-oshc-fields { grid-template-columns: 300px; }
}

@media (max-width: 767.98px) {
    .u-oshc .u-card-head { flex-wrap: wrap; }
    .u-oshc .u-card-head > .u-btn { position: static; margin: 0 auto; }
    .u-oshc .u-oshc-fields { grid-template-columns: minmax(0, 300px); gap: 12px; }
}

/* ------------------------------------------------- the client's own list -- */

/* "YOUR APPLICATIONS", shown only to a signed-in client. It is built by
   xFlywireInsurances::getApplicationsView() as a plain bootstrap table with
   inline colours meant for the light panel, so the parts that would be
   invisible in dark mode are taken back here. */
.u-oshc .u-oshc-apps table { background: var(--u-surface) !important; color: var(--u-text); }
.u-oshc .u-oshc-apps thead { background: var(--u-surface-2) !important; }
.u-oshc .u-oshc-apps th,
.u-oshc .u-oshc-apps td { border-color: var(--u-border) !important; }
.u-oshc .u-oshc-apps a { color: var(--color1); }

/* ------------------------------------------------------------- CMS text -- */


.u-oshc .page-content > .text-container h2 { font-size: 22px; font-weight: 700; margin: 18px 0 10px; }
.u-oshc .page-content > .text-container h3 { font-size: 18px; font-weight: 700; margin: 16px 0 8px; }
.u-oshc .page-content > .text-container a { color: var(--color1); }
.u-oshc .page-content > .text-container ul { padding-left: 22px; margin-bottom: 14px; }
.u-oshc .page-content > .text-container ul li { list-style: disc; }

.u-oshc .page-title { text-align: center; }
.u-oshc-brand { text-align: center; margin-bottom: 12px; }

@media (max-width: 767.98px) {
    .u-oshc .page-content > .text-container { font-size: 13px; }
    .u-oshc .ins-logo { width: 96px; height: 36px; }
}

/* ------------------------------------------------- back to top and busy -- */

.u-oshc .u-oshc-backtotop { display: flex; justify-content: center; margin: 22px 0 8px; }

/* Full-page busy layer while the provider API is queried. The public page had
   none, so a visitor pressing Get Quote watched an unchanged page for several
   seconds; the portal's own loader is what #loader in the shared quote script
   shows and hides. */
.u-oshc-loader {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
}

.u-oshc-loader i { font-size: 56px; color: var(--color1); }