/* ============================================================
   Tingler Advisory — Membership Pro · Custom CSS
   ------------------------------------------------------------
   EINFÜGEN: Membership Pro → Konfiguration → Custom CSS
   (kompletter Inhalt – ersetzt das bisherige Feld 1:1).
   Erbt --ta-* aus tingler-tokens.css (Theme-Wechsel automatisch).

   Geändert ggü. alt:
     - Akzent = var(--ta-accent)  (vorher fälschlich --ta-hover)
     - Buttons = Verlauf + Glow (Primär) / Outline (Sekundär)
     - Radius = var(--ta-radius-control)  → Theme-Studio-Slider
   ============================================================ */

/* ---- Tool-Variablen: erben vom Kontrakt, mit Fallbacks ---- */
.osm-container {
    --osm-bg:            var(--ta-bg, #0C0E11);
    --osm-bg-card:       var(--ta-bg-card, #161B22);
    --osm-bg-input:      var(--ta-input-bg, #0F141A);
    --osm-text:          var(--ta-text-primary, #E8EDF2);
    --osm-text-muted:    var(--ta-text-secondary, #B4BFCC);
    --osm-text-label:    var(--ta-text-secondary, #B4BFCC);
    --osm-accent:        var(--ta-accent, #14B8A6);
    --osm-accent-rgb:    var(--ta-accent-rgb, 20, 184, 166);
    --osm-border:        rgba(var(--ta-accent-rgb, 20, 184, 166), 0.15);
    --osm-border-input:  var(--ta-input-border, rgba(20, 184, 166, 0.20));
    --osm-danger:        var(--ta-neg, #F08079);
    --osm-radius:        var(--ta-radius-control, 10px);
    --osm-font-body:     var(--ta-font-body, 'DM Sans', sans-serif);
    --osm-font-mono:     var(--ta-font-mono, 'JetBrains Mono', monospace);
}

/* ============================================================
   1) HAUPT-CONTAINER
   ============================================================ */
.osm-container,
#osm-profile-page,
.osm-container .osm-profile,
.osm-container [class*="osmembership"] {
    background-color: transparent !important;
    color: var(--osm-text) !important;
    font-family: var(--osm-font-body);
}

.osm-container joomla-tab,
.osm-container joomla-tab-element,
joomla-tab joomla-tab-element,
.osm-container .joomla-tab-element {
    background-color: var(--osm-bg-card) !important;
    color: var(--osm-text) !important;
    border: 1px solid var(--osm-border) !important;
    border-radius: 0 0 var(--osm-radius) var(--osm-radius) !important;
    box-shadow: none !important;
}

.osm-container joomla-tab .nav,
.osm-container joomla-tab > .nav-tabs,
joomla-tab .tab-nav {
    background-color: transparent !important;
    border-bottom: 1px solid var(--osm-border) !important;
}

.osm-container .well,
.osm-container .panel,
.osm-container .card,
.osm-container .osm-card,
.osm-container .osm-box,
.osm-container .tab-content,
.osm-container .tab-pane {
    background-color: var(--osm-bg-card) !important;
    color: var(--osm-text) !important;
    border-color: var(--osm-border) !important;
    border-radius: var(--osm-radius) !important;
    box-shadow: none !important;
}

/* ============================================================
   2) TAB-LEISTE
   ============================================================ */
.osm-container .nav-tabs,
.osm-container .osm-tabs,
.osm-container ul.nav {
    background-color: transparent !important;
    border-bottom: 1px solid var(--osm-border) !important;
    gap: 0.25rem;
}

.osm-container .nav-tabs > li > a,
.osm-container .nav-tabs .nav-link,
.osm-container .nav-item button,
.osm-container .osm-tabs button,
.osm-container ul.nav button,
.osm-container ul.nav > li > a {
    background-color: transparent !important;
    color: var(--osm-text-muted) !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    border-radius: var(--osm-radius) var(--osm-radius) 0 0 !important;
    font-family: var(--osm-font-body) !important;
    font-weight: 500 !important;
    padding: 0.7rem 1.2rem !important;
    transition: color 200ms ease, background-color 200ms ease !important;
}

.osm-container .nav-tabs > li > a:hover,
.osm-container .nav-tabs .nav-link:hover,
.osm-container .nav-item button:hover,
.osm-container .osm-tabs button:hover,
.osm-container ul.nav button:hover {
    color: var(--osm-accent) !important;
    background-color: rgba(var(--osm-accent-rgb), 0.06) !important;
}

.osm-container .nav-tabs > li.active > a,
.osm-container .nav-tabs .nav-link.active,
.osm-container .nav-item button.active,
.osm-container .osm-tabs button.active,
.osm-container ul.nav button.active,
.osm-container ul.nav > li.active > a,
.osm-container .nav-tabs .nav-link[aria-selected="true"],
.osm-container button[aria-selected="true"] {
    background-color: var(--osm-bg-card) !important;
    color: var(--osm-accent) !important;
    border-color: var(--osm-border) !important;
    border-bottom: 2px solid var(--osm-accent) !important;
}

/* ============================================================
   3) LABELS
   ============================================================ */
.osm-container label,
.osm-container .control-label,
.osm-container .osm-label,
.osm-container .form-label {
    color: var(--osm-text-label) !important;
    font-family: var(--osm-font-body) !important;
    font-weight: 500 !important;
}

.osm-container .required,
.osm-container .star,
.osm-container label .required {
    color: var(--osm-danger) !important;
}

.osm-container .osm-value,
.osm-container .field-value,
.osm-container .controls .uneditable-input {
    color: var(--osm-text) !important;
}

/* ============================================================
   4) EINGABEFELDER (dunkel, wie alle Formularfelder)
   ============================================================ */
.osm-container .input-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem;
    width: 100%;
}
.osm-container .input-group > .form-control,
.osm-container .input-group > input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: 46px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-self: center !important;
}
.osm-container .input-group > .input-password-toggle {
    flex: 0 0 46px !important;
    margin: 0 !important;
    align-self: center !important;
}
.osm-container input[type="text"],
.osm-container input[type="email"],
.osm-container input[type="password"],
.osm-container input[type="tel"],
.osm-container input[type="number"],
.osm-container input[type="url"],
.osm-container input[type="date"],
.osm-container input[type="search"],
.osm-container textarea,
.osm-container select,
.osm-container .form-control {
    background-color: var(--osm-bg-input) !important;
    color: var(--osm-text) !important;
    border: 1px solid var(--osm-border-input) !important;
    border-radius: var(--osm-radius) !important;
    font-family: var(--osm-font-body) !important;
    box-shadow: none !important;
}

.osm-container input::placeholder,
.osm-container textarea::placeholder {
    color: var(--osm-text-muted) !important;
    opacity: 0.7;
}

.osm-container input:focus,
.osm-container textarea:focus,
.osm-container select:focus,
.osm-container .form-control:focus {
    border-color: var(--osm-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--osm-accent-rgb), 0.15) !important;
    outline: none !important;
}

.osm-container select option {
    background-color: var(--osm-bg-card) !important;
    color: var(--osm-text) !important;
}

.osm-container input:-webkit-autofill,
.osm-container input:-webkit-autofill:hover,
.osm-container input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--osm-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--osm-bg-input) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: var(--osm-text);
}

/* ============================================================
   5) BUTTONS  (Primär = Verlauf + Glow / Sekundär = Outline)
   ============================================================ */
.osm-container .btn,
.osm-container button[type="submit"],
.osm-container input[type="submit"],
.osm-container .btn-primary {
    background: var(--ta-btn-grad, var(--osm-accent)) !important;
    color: var(--ta-btn-text, var(--osm-bg)) !important;
    border: none !important;
    border-radius: var(--osm-radius) !important;
    font-family: var(--osm-font-body) !important;
    font-weight: 600 !important;
    padding: 0.6rem 1.4rem !important;
    text-shadow: none !important;
    box-shadow: var(--ta-btn-glow, none) !important;
    transition: box-shadow 200ms ease, transform 100ms ease !important;
}

.osm-container .btn:hover,
.osm-container button[type="submit"]:hover,
.osm-container input[type="submit"]:hover,
.osm-container .btn-primary:hover {
    box-shadow: var(--ta-btn-glow-hover, var(--ta-btn-glow, none)) !important;
    transform: translateY(-1px);
    filter: none !important;
}

/* Sekundär / unscheinbar = Outline */
.osm-container .btn-secondary,
.osm-container .btn-default {
    background: transparent !important;
    color: var(--ta-btn-outline-text, var(--osm-accent)) !important;
    border: 1px solid var(--ta-btn-outline-border, var(--osm-accent)) !important;
    box-shadow: none !important;
}
.osm-container .btn-secondary:hover,
.osm-container .btn-default:hover {
    background-color: rgba(var(--osm-accent-rgb), 0.08) !important;
}

/* Passwort-anzeigen-Toggle (Auge) */
.osm-container .input-password-toggle,
.osm-container button.input-password-toggle {
    background-color: var(--osm-bg-input) !important;
    color: var(--osm-accent) !important;
    border: 1px solid var(--osm-border-input) !important;
    border-radius: var(--osm-radius) !important;
    padding: 0 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    flex: 0 0 46px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.osm-container .input-password-toggle:hover {
    background-color: rgba(var(--osm-accent-rgb), 0.12) !important;
    color: var(--osm-accent) !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.osm-container .input-password-toggle .icon-eye,
.osm-container .input-password-toggle .icon-eye-slash,
.osm-container .input-password-toggle [class*="icon-"] {
    color: var(--osm-accent) !important;
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    background-color: var(--osm-accent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.osm-container .input-password-toggle .icon-eye {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4 142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 92.9-131.1 3.3-7.9 3.3-16.7 0-24.6-14.8-35.7-46.1-87.7-92.9-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1-288 0zm144-64c0 35.3-28.7 64-64 64-7.1 0-13.9-1.2-20.3-3.3-5.5-1.8-11.9 1.6-11.7 7.4.3 6.9 1.3 13.8 3.2 20.7 13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1-5.8-.2-9.2 6.1-7.4 11.7 2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4 142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 92.9-131.1 3.3-7.9 3.3-16.7 0-24.6-14.8-35.7-46.1-87.7-92.9-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1-288 0zm144-64c0 35.3-28.7 64-64 64-7.1 0-13.9-1.2-20.3-3.3-5.5-1.8-11.9 1.6-11.7 7.4.3 6.9 1.3 13.8 3.2 20.7 13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1-5.8-.2-9.2 6.1-7.4 11.7 2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/svg%3E");
}
.osm-container .input-password-toggle .icon-eye-slash {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4 3.3-7.9 3.3-16.7 0-24.6-14.8-35.7-46.1-87.7-92.9-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144 0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3-11.1-41.5-47.8-69.4-88.6-71.1-5.8-.2-9.2 6.1-7.4 11.7 2.1 6.4 3.3 13.2 3.3 20.3 0 .7 0 1.3-.1 2L223.1 149.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4 3.3-7.9 3.3-16.7 0-24.6-14.8-35.7-46.1-87.7-92.9-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144 0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3-11.1-41.5-47.8-69.4-88.6-71.1-5.8-.2-9.2 6.1-7.4 11.7 2.1 6.4 3.3 13.2 3.3 20.3 0 .7 0 1.3-.1 2L223.1 149.5z'/%3E%3C/svg%3E");
}
.osm-container .input-password-toggle [class*="icon-"]::before {
    content: none !important;
}

/* ============================================================
   6) TABELLEN
   ============================================================ */
.osm-container table,
.osm-container .table {
    background-color: var(--osm-bg-card) !important;
    color: var(--osm-text) !important;
    border-color: var(--osm-border) !important;
}

.osm-container table th,
.osm-container .table th,
.osm-container thead th {
    background-color: rgba(var(--osm-accent-rgb), 0.08) !important;
    color: var(--osm-text) !important;
    border-color: var(--osm-border) !important;
    font-family: var(--osm-font-mono) !important;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
}

.osm-container table td,
.osm-container .table td {
    background-color: transparent !important;
    color: var(--osm-text) !important;
    border-color: var(--osm-border) !important;
}

.osm-container table tr:hover td,
.osm-container .table tbody tr:hover td {
    background-color: rgba(var(--osm-accent-rgb), 0.05) !important;
}

.osm-container a {
    color: var(--osm-accent) !important;
}
.osm-container a:hover {
    filter: brightness(1.15);
}

.osm-container .alert {
    background-color: rgba(var(--osm-accent-rgb), 0.08) !important;
    color: var(--osm-text) !important;
    border: 1px solid var(--osm-border) !important;
    border-radius: var(--osm-radius) !important;
}

/* ============================================================
   7) PLAN-DETAIL-ANSICHT (#osm-plan-item)
   ============================================================ */
#osm-plan-item,
#osm-plan-item.osm-container,
.osm-container#osm-plan-item {
    background-color: var(--osm-bg-card, #161B22) !important;
    background-image: none !important;
    color: var(--osm-text) !important;
    border: 1px solid var(--osm-border) !important;
    border-radius: var(--osm-radius) !important;
    box-shadow: none !important;
    padding: 1.5rem !important;
}

.osm-container .osm-item-heading-box {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid var(--osm-border) !important;
    box-shadow: none !important;
    padding: 0 0 1rem 0 !important;
    margin-bottom: 1.25rem !important;
}

.osm-container .osm-page-title,
.osm-container .osm-item-heading-box h1,
.osm-container .osm-item-heading-box h2 {
    color: var(--osm-accent) !important;
    font-family: var(--ta-font-display, 'Playfair Display', Georgia, serif) !important;
    text-shadow: none !important;
    margin: 0 !important;
}

.osm-container .osm-item-description,
.osm-container .osm-description-details,
.osm-container .osm-description-details p {
    color: var(--osm-text) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#osm-plan-item .ta-plan-features {
    display: block !important;
    float: none !important;
    width: 100% !important;
    list-style: none !important;
    margin: 1rem 0 0 0 !important;
    padding: 1rem 0 0 0 !important;
    border-top: 1px solid var(--osm-border) !important;
    column-count: 1 !important;
    text-align: left !important;
    font-family: var(--osm-font-body) !important;
}
#osm-plan-item .ta-plan-features__item {
    display: block !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0.5rem 0 0.5rem 1.85rem !important;
    border: none !important;
    background: transparent !important;
    color: var(--osm-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    list-style: none !important;
    text-align: left !important;
}
#osm-plan-item .ta-plan-features__item::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.7rem !important;
    width: 14px !important;
    height: 14px !important;
    background: var(--osm-accent) !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat !important;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat !important;
}
#osm-plan-item .ta-plan-features__item--off {
    color: var(--osm-text-muted) !important;
    opacity: 0.55 !important;
}
#osm-plan-item .ta-plan-features__item--off::before {
    background: var(--osm-text-muted) !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center/contain no-repeat !important;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center/contain no-repeat !important;
}
#osm-plan-item .ta-plan-features__item a {
    color: var(--osm-accent) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(var(--osm-accent-rgb), 0.4) !important;
    text-underline-offset: 2px !important;
}
#osm-plan-item .ta-plan-features__item a:hover {
    text-decoration-color: var(--osm-accent) !important;
}

.osm-container .table-striped > tbody > tr:nth-of-type(odd) > td,
.osm-container .table-striped > tbody > tr:nth-of-type(odd) > th,
.osm-container .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent !important;
    color: var(--osm-text) !important;
}
.osm-container .table-striped > tbody > tr:nth-of-type(even) > td,
.osm-container .table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(var(--osm-accent-rgb), 0.04) !important;
    color: var(--osm-text) !important;
}

#osm-plan-item .col-md-5 {
    margin-top: 2rem !important;
}
.osm-container .osm-plan-property-label {
    color: var(--osm-text) !important;
    font-family: var(--osm-font-mono) !important;
    font-weight: 600 !important;
    background-color: rgba(var(--osm-accent-rgb), 0.06) !important;
}
.osm-container .osm-plan-property-value {
    color: var(--osm-text) !important;
    background-color: transparent !important;
}

.osm-container .osm-taskbar {
    background-color: transparent !important;
    border: none !important;
}