/* com_osmembership override styling — ported from shaper_gazette/css/custom.css
   (`.tap-profile-*` / `.tap-plan-badge*` / `.tap-sub-*` rules), re-themed to
   tap.css's tokens. The PHP overrides that emit these classes are otherwise
   unchanged from shaper_gazette (business logic, not markup, is what's shared). */

#osm-profile-page.tap-profile-wrap {
    /* Explicit width, not just auto — as a flex item (.page-body is display:flex),
       width:auto lets the browser re-stretch this box based on whichever tab panel
       is currently visible, so switching tabs would visibly change the page width.
       width:100% pins it to the full flex-container width regardless of content. */
    width: 100%;
    margin: 0 auto;
}

/* Edit Profile form (default_profile.php's #tap-profile-editform) — vendor's
   own 15px .form-group.form-row gap is disabled site-wide for #osm-signup-page
   only (see below), so this form needs its own explicit spacing or fields run
   together with no gap at all. 18px matches #os_form's grid gap on the
   register page for visual consistency. */
#tap-profile-editform .form-group.form-row {
    margin-bottom: 18px;
}
#tap-profile-editform .form-group.form-row:last-child {
    margin-bottom: 0;
}

.tap-profile-hero {
    background: linear-gradient(135deg, var(--violet) 0%, var(--ink-2) 100%);
    border-radius: var(--r-md);
    padding: 28px 32px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    color: #fff;
    box-shadow: var(--shadow-card);
}

.tap-profile-avatar {
    width: 76px;
    height: 76px;
    background: rgba(255, 255, 255, 0.18);
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 1px;
    font-family: var(--display);
}

.tap-profile-info {
    flex: 1;
    min-width: 180px;
}

.tap-profile-name {
    color: #fff !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2;
    font-family: var(--display);
}

.tap-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.875rem;
    opacity: 0.85;
}
.tap-profile-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tap-plan-badge {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-sm);
    padding: 14px 20px;
    text-align: center;
    min-width: 170px;
    flex-shrink: 0;
}
.tap-plan-badge--active .tap-plan-badge-status {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cyan);
    margin-bottom: 4px;
}
.tap-plan-badge-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.tap-plan-badge-expires {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}
.tap-plan-badge--none .tap-plan-badge-status {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}
.tap-btn-upgrade {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.tap-btn-upgrade:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #fff;
    text-decoration: none;
}

#osm-profile-page.tap-profile-wrap .nav-tabs {
    border-bottom: 2px solid var(--line);
    margin-bottom: 24px;
    gap: 4px;
}
#osm-profile-page.tap-profile-wrap .nav-tabs .nav-link {
    color: var(--body-ink);
    font-weight: 500;
    font-size: 0.9rem;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 10px 18px;
    transition: color 0.2s, border-color 0.2s;
}
#osm-profile-page.tap-profile-wrap .nav-tabs .nav-link:hover {
    color: var(--violet);
    border-bottom-color: var(--line-2);
}
#osm-profile-page.tap-profile-wrap .nav-tabs .nav-link.active {
    color: var(--violet);
    border-bottom: 3px solid var(--violet);
    background: transparent;
    font-weight: 600;
}

#osm-profile-page.tap-profile-wrap .tab-content {
    padding: 4px 0;
}

.tap-sub-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tap-sub-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s;
}
.tap-sub-card--active {
    border-left: 4px solid #12A594;
}
.tap-sub-card:hover {
    box-shadow: var(--shadow);
}
.tap-sub-card-icon {
    width: 44px;
    height: 44px;
    background: var(--paper-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--violet);
    flex-shrink: 0;
}
.tap-sub-card--active .tap-sub-card-icon {
    background: #e6f9f0;
    color: #00663d;
}
.tap-sub-card-body {
    flex: 1;
    min-width: 140px;
}
.tap-sub-card-name {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--ink);
    margin-bottom: 3px;
}
.tap-sub-card-name a {
    color: inherit;
    text-decoration: none;
}
.tap-sub-card-name a:hover {
    color: var(--violet);
}
.tap-sub-card-dates {
    font-size: 0.82rem;
    color: var(--muted);
}
.tap-sub-card-group-link {
    font-size: 0.8rem;
    margin-top: 4px;
    color: var(--body-ink);
}
.tap-sub-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tap-sub-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.tap-sub-status--active    { background: #e6f9f0; color: #00663d; }
.tap-sub-status--expired   { background: #fff0f0; color: #c0392b; }
.tap-sub-status--pending   { background: #fff8e1; color: #b07d00; }
.tap-sub-status--cancelled { background: var(--paper-2); color: var(--muted); }

.tap-sub-empty {
    text-align: center;
    padding: 52px 20px;
    color: var(--muted);
}
.tap-sub-empty i {
    font-size: 2.8rem;
    display: block;
    margin-bottom: 14px;
    color: var(--paper-2);
}
.tap-sub-empty p {
    margin-bottom: 18px;
    font-size: 0.95rem;
}

@media (max-width: 576px) {
    .tap-profile-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
    }
    .tap-plan-badge { width: 100%; }
    .tap-sub-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ------------------------------------------------------------------ */
/* Registration / subscribe form (#osm-signup-page) — additive-only   */
/* styling over com_osmembership's own markup/JS. No PHP override for */
/* field markup — the field grid, sector picker, file upload widget   */
/* and payment method switcher are all vendor JS-driven and stay      */
/* untouched. The page SHELL (hero, .panel box) is a template override*/
/* at html/com_osmembership/register/default.php, matching the        */
/* contact/feature hero pattern and reusing .panel/.panel-b instead   */
/* of a bespoke box here — see theme-preview/register.html.           */
/* ------------------------------------------------------------------ */
.osm-register-section { padding-top: 26px; }
.osm-register-wrap { max-width: 900px; padding: 0; }

#osm-signup-page .osm-message {
    font-size: 14.5px;
    color: var(--muted);
    margin-bottom: 22px;
}
#osm-signup-page .osm-heading {
    grid-column: 1 / -1;
    font-family: var(--display);
    font-size: 17px;
    letter-spacing: -0.01em;
    margin: 30px 0 18px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
#osm-signup-page .osm-heading:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
#osm-signup-page #field_Personal_Information {
    padding: 0;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    margin-bottom: 0;
    margin-top: 30px;
}

/* Each field's label+input wrapper is vendor markup (.row.form-group), and
   the per-field-type split is inconsistent: Email uses col-md-3/col-md-9
   (label beside input), First/Last Name/Address use no col split at all,
   Password doesn't even carry col-md-6 on the outer row. Rather than fight
   that per-field inconsistency, #os_form itself becomes the 2-column grid
   (matching the reference's .form-grid) and every field row is just one
   grid cell, label stacked above its input. */
#os_form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
}
/* Bootstrap's col-md-* classes (kept on the field rows so their width still
   resolves inside other, non-grid contexts) also carry their own left/right
   padding — redundant now that #os_form spaces cells with grid gap, and it
   was indenting each field's label/input in from the cell edge. */
#osm-signup-page [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
/* fields that span the full row, matching the reference's .fld.wide */
#os_form > .osm-heading,
#os_form > .form-actions,
#os_form > .osm-terms-and-conditions-container,
#os_form > .osm-coupon-container,
#os_form > .osm-captcha-container,
#field_email,
#field_address,
#field_address2,
#field_sectors,
#field_subsectors,
#field_cr_document {
    grid-column: 1 / -1;
}
/* #os_form's own grid (above) replaces Bootstrap's row/col system, so a
   field's Bootstrap width class (col-12/col-md-12 etc, e.g. set via the
   field's "CSS Class" setting in the backend — see the fieldlayout/message.php
   override, which is what actually prints $row->css_class onto the field)
   is otherwise inert: every field is just one 1fr grid cell unless its id is
   in the list above. Honour the width class generically instead of having to
   list every full-width field's id by hand. */
#osm-signup-page .col-12,
#osm-signup-page .col-md-12 {
    grid-column: 1 / -1;
}

/* Sector help note (OS Membership "sectorhelptext" field, container_class
   "alert alert-warning" in the backend) — recolored to match the Go/No-Go
   History empty-state CTA's look (.tap-gnh-cta, see tap-gonogohistory.css):
   Bootstrap's own warning-subtle tokens (bg #fff3cd / text #664d03), no
   border, generous rounding — that box was picked as the reference "look and
   feel" to reuse here instead of a bespoke blue.
   NOTE: this field's wrapper is also a "control-group" -> "row form-group
   form-row" (see bootstrap5.php's class mapping), so it's ALSO matched by
   the ".row.form-group{flex-direction:column}" rule above, at higher
   specificity (id+2 classes) than a plain "#osm-signup-page .alert-warning"
   (id+1 class) would have. Matching the same id+2-class weight here (and
   winning on source order, since this block comes after) is what neutralises
   that; the col-12 rule further up additionally makes it span the full grid.
   Layout is deliberately plain block + a floated icon (NOT flex/::before as
   tried earlier) — the field's description text is edited directly in the
   backend and already starts with a real "<i class="fas fa-info-circle">"
   tag, so a float lets the icon sit at the start and the paragraph's own
   text wrap around/below it on its own, with no flex-item line-wrapping
   edge cases to fight. */
#osm-signup-page .row.form-group.alert-warning {
    display: block;
    background: #fff3cd;
    border: 0;
    color: #664d03;
    border-radius: var(--r-md);
    padding: 14px 18px;
    margin: 4px 0 18px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.7;
}
#osm-signup-page .row.form-group.alert-warning i {
    float: left;
    margin: 3px 10px 0 0;
    color: #664d03;
    font-size: 15px;
}
#osm-signup-page .row.form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 6px;
    padding: 0;
}
/* vendor style.css sets margin-bottom:15px on .osm-container .form-group.form-row
   — redundant with the grid gap on #os_form, so drop it there. Scoped to
   #osm-signup-page specifically (not .osm-container generally): the profile
   page's edit form also carries .osm-container, and zeroing it out there too
   left those fields with no vertical gap at all (see #tap-profile-editform
   below, which restores its own). */
#osm-signup-page .form-group.form-row {
    margin-bottom: 0;
}
#osm-signup-page .form-control-label,
#osm-signup-page .controls,
#osm-signup-page .eb-form-control {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0;
}
#osm-signup-page .form-control-label label,
#osm-signup-page label {
    font-size: 12.5px;
    font-weight: 700;
    color: #3b4170;
    display: block;
    margin-bottom: 6px;
}
#osm-signup-page .form-control-label { padding: 0; }
#osm-signup-page input.form-control,
#osm-signup-page select.form-control,
#osm-signup-page select.form-select,
#osm-signup-page textarea.form-control {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 11px);
    background: #fff;
    padding: 10px 13px;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    transition: border-color .2s, box-shadow .2s;
}
#osm-signup-page select.form-control,
#osm-signup-page select.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c86b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px 9px;
    padding-right: 32px;
}
#osm-signup-page select[multiple].form-control,
#osm-signup-page select[multiple].form-select { background-image: none; padding-right: 13px; }
#osm-signup-page input.form-control:hover,
#osm-signup-page select.form-control:hover,
#osm-signup-page textarea.form-control:hover { border-color: var(--line-2); }
#osm-signup-page input.form-control:focus,
#osm-signup-page select.form-control:focus,
#osm-signup-page textarea.form-control:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124,77,255,.12);
}
#osm-signup-page select[multiple] { min-height: 120px; }
/* show/hide-password toggle button (Joomla core passwordview.js drives the
   click behaviour + icon-eye/icon-eye-slash swap already) — it was hidden
   outright because the icomoon icon font it expects isn't loaded on the
   frontend; map those two icon classes onto Font Awesome (already loaded
   for the nav icons) instead of hiding the control.
   The button gets its own column in a flex .input-group rather than being
   absolutely-positioned on top of the input: an overlaid icon in a ~42px
   strip is an easy miss on any non-100% Windows display scaling, and a
   missed click falls straight through onto the password input underneath. */
#osm-signup-page .password-group .input-group {
    display: flex;
    /* Bootstrap's own .input-group defaults to flex-wrap:wrap; the password
       input's flex-basis resolves from its width:100% rule below, so
       "input + fixed 44px button" always overflows on that hypothetical
       (pre-shrink) size test and the button wraps to its own line even
       though shrinking the input would have fit both on one row. */
    flex-wrap: nowrap;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 11px);
    /* NB: no overflow:hidden here. It clipped validationEngine's .formError
       prompt, which is inserted as a sibling of the input (field.before() in
       j4.jquery.validationEngine.js) and positioned absolutely outside this
       44px-tall box — so a too-short password blocked submit with no visible
       message at all. The square-corner / autofill bleed it was hiding is
       handled by rounding the input and the toggle button themselves below. */
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
#osm-signup-page .password-group .input-group:hover { border-color: var(--line-2); }
#osm-signup-page .password-group .input-group:focus-within {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124,77,255,.12);
}
#osm-signup-page .password-group input.form-control {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    /* Matches the group's own radius on the side it actually touches, so the
       input (and the background the browser paints over it on autofill) stays
       inside the rounded edge now that the group no longer clips. */
    border-radius: var(--r-sm, 11px) 0 0 var(--r-sm, 11px);
    background: transparent;
}
#osm-signup-page .password-group .input-password-toggle {
    border-radius: 0 var(--r-sm, 11px) var(--r-sm, 11px) 0;
}
/* Length rule, stated before you submit rather than only as an error after.
   Injected by initPasswordHint() in tap.js from the field's own minSize rule. */
#osm-signup-page .password-group .pw-hint {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #8C93B8);
}
#osm-signup-page .password-group input.form-control:hover,
#osm-signup-page .password-group input.form-control:focus {
    border: 0;
    box-shadow: none;
}
/* Edge's built-in reveal/clear controls would otherwise draw inside the
   input on top of our own layout. */
#osm-signup-page .password-group input[type="password"]::-ms-reveal,
#osm-signup-page .password-group input[type="password"]::-ms-clear {
    display: none !important;
}
#osm-signup-page .input-password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line);
    background: transparent;
    color: var(--muted, #7c86b8);
    cursor: pointer;
}
#osm-signup-page .input-password-toggle:hover { color: var(--violet); }
#osm-signup-page .icon-eye,
#osm-signup-page .icon-eye-slash { font-style: normal; }
#osm-signup-page .icon-eye::before,
#osm-signup-page .icon-eye-slash::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
}
#osm-signup-page .icon-eye::before { content: "\f06e"; }
#osm-signup-page .icon-eye-slash::before { content: "\f070"; }
/* readonly price/discount/tax fields (payment_information.php) read as
   a static value, not an editable box, matching the reference's .in.amount */
#osm-signup-page input[readonly].form-control { background: var(--paper); color: var(--body-ink); }

/* file-upload field: vendor renders a bare "Select File" button + a
   filename span with nothing wrapping them — group them into the same
   dashed-border pick area used by .filepick elsewhere on the site */
#osm-signup-page .controls:has(input[type="button"]) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm, 11px);
    background: var(--paper);
}
#osm-signup-page .osm-uploaded-file {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--body-ink);
}

#osm-signup-page .btn-primary {
    background: linear-gradient(120deg, var(--violet), #7d5bff 55%, var(--cyan));
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    padding: 12px 22px;
    font-size: 14.5px;
}
#osm-signup-page .form-actions { margin-top: 8px; }
#osm-signup-page #btn-submit { padding: 14px 26px; font-size: 15px; }

#osm-signup-page .osm-terms-and-conditions-container {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
#osm-signup-page .osm-terms-and-conditions-container a { color: var(--violet); font-weight: 700; }
/* the checkbox itself was still a bare, unstyled browser checkbox — only
   the surrounding container/link text had picked up template styling */
#osm-signup-page .osm-terms-and-conditions-container label.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: .5rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--body-ink);
    cursor: pointer;
}
/* custom checkbox to match the rest of the form controls (rounded box +
   accent fill + checkmark) instead of relying on accent-color, whose
   native browser shape still clashed with the panel's flat/rounded look */
#osm-signup-page .osm-terms-and-conditions-container input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 19px;
    height: 19px;
    margin: 0;
    flex: none;
    border: 1.5px solid var(--line-2, #c7cbe6);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
#osm-signup-page .osm-terms-and-conditions-container input[type="checkbox"]:hover {
    border-color: var(--violet);
}
#osm-signup-page .osm-terms-and-conditions-container input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124,77,255,.18);
}
#osm-signup-page .osm-terms-and-conditions-container input[type="checkbox"]:checked {
    background: var(--violet);
    border-color: var(--violet);
}
#osm-signup-page .osm-terms-and-conditions-container input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
#osm-signup-page .osm-price-container,
#osm-signup-page .field_price { font-size: 15px; font-weight: 700; }

/* Payment value input (Price/amount, etc.) sits next to a prepended
   currency addon (osm-addon-container), so only its outer (right) corners
   should be rounded — the left edge butts against the addon. */
#osm-signup-page .osm-addon-container.input-group {
    display: flex;
    border-radius: var(--r-sm, 11px);
    overflow: hidden;
}
#osm-signup-page .osm-addon-container .input-group-text {
    display: flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: var(--r-sm, 11px) 0 0 var(--r-sm, 11px);
    background: var(--paper);
    font-weight: 700;
}
#osm-signup-page .osm-addon-container input.form-control {
    border-radius: 0 var(--r-sm, 11px) var(--r-sm, 11px) 0;
}

/* Payment Information block (price/payment method) — kept in the DOM so
   #amount and the payment_method radio still submit their values, just
   hidden from view. */
#osm-signup-page #osm-payment-heading,
#osm-signup-page #osm-setup-fee-container,
#osm-signup-page #osm-amount-container,
#osm-signup-page #osm-discount-container,
#osm-signup-page #osm-tax-amount-container,
#osm-signup-page #osm-payment-processing-fee-container,
#osm-signup-page #osm-gross-amount-container,
#osm-signup-page #payment_method_container { display: none; }

/* Sector/Subsector picker — plg_system_tap builds this widget in JS
   (plugins/system/tap), hides the native #field_sectors/#field_subsectors
   rows and inserts it as a new sibling of #field_sectors, so it's not
   caught by the ID selectors above and defaults to a single 1fr grid cell.
   Its own CSS ships inline from the plugin (a later <style> than this
   stylesheet's <link>), so every override here needs #osm-signup-page's ID
   to win on specificity rather than relying on source order. Vendor colors
   (#d1d5db borders, flat blue chips, Bootstrap success/danger buttons) are
   swapped for the site's own tokens; layout/behavior (add/remove rows,
   the tag dropdown) is untouched. */
#os_form > .tap-sf-wrap { grid-column: 1 / -1; }
#osm-signup-page .tap-sf-wrap { padding: 0; }
#osm-signup-page .tap-sf-row {
    border: 1px solid var(--line);
    border-radius: var(--r-sm, 11px);
    padding: 16px 18px;
    background: #fff;
}
#osm-signup-page .tap-sf-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #3b4170;
}
#osm-signup-page .tap-sf-sector {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background-color: #fff;
    padding: 10px 32px 10px 13px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237c86b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px 9px;
    transition: border-color .2s, box-shadow .2s;
}
#osm-signup-page .tap-sf-sector:hover { border-color: var(--line-2); }
#osm-signup-page .tap-sf-sector:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124,77,255,.12);
}
#osm-signup-page .tap-sf-sector:disabled {
    background-color: var(--paper) !important;
    border-color: var(--line) !important;
    color: var(--muted) !important;
    opacity: 1 !important;
}
#osm-signup-page .tap-sf-sector option:disabled { color: var(--muted); background: var(--paper); }
#osm-signup-page .tap-tag-wrap {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    padding: 6px 8px;
    gap: 6px;
}
#osm-signup-page .tap-tag {
    background: var(--paper-2);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    padding: 4px 4px 4px 9px;
}
#osm-signup-page .tap-tag-x { color: var(--violet); font-size: 14px; }
#osm-signup-page .tap-tag-x:hover { color: #5a3ce8; }
#osm-signup-page .tap-tag-dd-btn {
    border: 1px dashed var(--line-2);
    border-radius: 8px;
    color: var(--violet);
    font-size: 12.5px;
    font-weight: 700;
    background: transparent;
    padding: 6px 11px;
}
#osm-signup-page .tap-tag-dd-btn:hover { background: rgba(108,77,255,.06); }
#osm-signup-page .tap-tag-dd-btn:disabled { border-color: var(--line); color: var(--muted); }
#osm-signup-page .tap-tag-dd-list {
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 6px;
}
#osm-signup-page .tap-tag-dd-item {
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--body-ink);
}
#osm-signup-page .tap-tag-dd-item:hover { background: var(--paper-2); color: var(--violet); }
#osm-signup-page .tap-sf-add-btn,
#osm-signup-page .tap-sf-remove-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 0;
    font-weight: 700;
    font-size: 15px;
}
#osm-signup-page .tap-sf-add-btn { background: var(--c2, #12A594); color: #fff; }
#osm-signup-page .tap-sf-remove-btn { background: rgba(255,107,87,.12); color: #C8442A; }

@media (max-width: 700px) {
    #os_form { grid-template-columns: 1fr; }
    #os_form > .row.form-group { grid-column: 1 / -1; }
    #osm-signup-page .controls,
    #osm-signup-page .eb-form-control,
    #osm-signup-page .form-group { padding: 0; }
}

/* Terms and Conditions popup (tingle.js, loaded by
   OSMembershipHelperModal::iframeModal in default_terms_conditions.php) —
   tingle.min.css ships its own padding/square corners; this stylesheet's
   <link> loads after tingle's in <head>, so a plain class override here
   already wins on source order without needing !important. */
.tingle-modal-box__content {
    padding: 0rem;
    border-radius: 10px;
    overflow: hidden;
}

/* Subscription-complete page — #osm-subscription-complete carries vendor's
   own .osm-container class, whose media/com_osmembership/assets/css/style.css
   rule (padding:10px 0) we can't edit directly; an ID selector beats that
   plain class selector regardless of source order. The mt-5/mb-5/ps-5/pe-5
   spacing itself is added on the element in the template/complete/default.php
   override. */
#osm-subscription-complete.osm-container { padding: 0; }

/* Subscription history table (html/com_osmembership/common/subscriptions_history.php)
 *
 * Moved out of the override itself: these are template rules, not component
 * rules. They use this template's own custom properties (--line, --violet,
 * --muted, --shadow-card, --r-md) and style only markup this template emits.
 * This stylesheet is already loaded exactly when option=com_osmembership,
 * which is when that markup renders, and none of these class names is defined
 * anywhere else, so nothing depends on the old in-body cascade position.
 */
.osmh-wrap{background:#fff;border:1px solid var(--line,#e5eaef);border-radius:var(--r-md,.6rem);
	box-shadow:var(--shadow-card,0 1px 3px rgba(20,20,43,.06));overflow:hidden;}
table.osmh-tbl{border-collapse:collapse;width:100%;font-size:13.5px;}
.osmh-tbl th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
	color:var(--muted,#5C6E7E);background:#FBFAFF;padding:12px 16px;border-bottom:1px solid var(--line,#e5eaef);}
.osmh-tbl td{padding:14px 16px;border-bottom:1px solid rgba(108,77,255,.08);vertical-align:middle;}
.osmh-tbl tbody tr:last-child td{border-bottom:0;}
.osmh-tbl tbody tr:nth-child(odd){background:#FCFBFF;}
.osmh-tbl tbody tr:hover{background:#F6F5FF;}
.osmh-tbl a{color:var(--violet,#6C4DFF);font-weight:700;text-decoration:none;}
.osmh-tbl a:hover{text-decoration:underline;}
.osmh-chip{display:inline-block;font-size:.72rem;font-weight:700;padding:.28rem .65rem;border-radius:1rem;
	white-space:nowrap;}
.osmh-chip.green{background:#e4f4ea;color:#1e7e34;}
.osmh-chip.amber{background:#fdf6db;color:#8a6d1a;}
.osmh-chip.grey{background:#eef0f4;color:#5C6E7E;}
.osmh-chip.red{background:#fbeceb;color:#C0392B;}
.osmh-tbl .osmh-pay-link{display:inline-block;margin-top:.35rem;}

/* Read-only profile layout (html/com_osmembership/profile/default_profile.php)
 *
 * Moved out of the override itself: these are template rules, not component
 * rules. They use this template's own custom properties (--line, --violet,
 * --muted, --shadow-card, --r-md) and style only markup this template emits.
 * This stylesheet is already loaded exactly when option=com_osmembership,
 * which is when that markup renders, and none of these class names is defined
 * anywhere else, so nothing depends on the old in-body cascade position.
 */
.tap-ro-wrap { padding: 4px 0; }
.tap-ro-wrap .tap-ro-actions { display:flex; justify-content:flex-end; margin-bottom:16px; }
.tap-ro-row { display:grid; grid-template-columns:220px 1fr; gap:8px; padding:9px 0; border-bottom:1px solid #f3f4f6; align-items:start; }
.tap-ro-row:last-child { border-bottom:none; }
.tap-ro-label { font-size:13px; font-weight:600; color:#6b7280; padding-top:1px; }
.tap-ro-value { font-size:14px; color:#111827; word-break:break-word; }
.tap-ro-value strong { font-weight:600; }
.tap-ro-heading { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#9ca3af; padding:16px 0 4px; border-bottom:2px solid #e5e7eb; margin-bottom:4px; }
.tap-ro-tag { display:inline-block; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; border-radius:4px; font-size:12px; padding:2px 8px; margin:2px 3px 2px 0; line-height:1.5; }
.tap-ro-empty { color:#9ca3af; font-style:italic; }
.tap-sector-group { margin-bottom:10px; }
.tap-sector-group:last-child { margin-bottom:0; }
.tap-sector-name { display:inline-block; background:#1d4ed8; color:#fff; border-radius:4px; font-size:12px; font-weight:600; padding:3px 10px; margin-bottom:5px; }
.tap-subsector-tags { padding-left:2px; }
@media(max-width:600px){
    .tap-ro-row { grid-template-columns:1fr; gap:2px; }
    .tap-ro-value { padding-left:0; }
}