/* ==============================================
   TM24 NOVAChild – UI Components
   Modul: modules/shared/ui-components/ui-components.css
   Scope: .alert, .modal, .dropdown, .table,
          .consent-banner, .scroll-top-wrapper,
          .compare-button, .wishlist-button
   Quelle: custom.css (Legacy)
   UTF-8 ohne BOM
   ============================================== */

/* ---- Alerts ---- */
.alert {
    border-radius: var(--rs) !important;
    border: none !important;
    font-family: var(--f) !important;
    font-weight: 500 !important;
}

.alert-info {
    background: var(--pl) !important;
    color: var(--p) !important;
}

.alert-success {
    background: rgba(5, 150, 105, .06) !important;
    color: var(--ok) !important;
}

.alert-danger {
    background: rgba(220, 38, 38, .06) !important;
    color: var(--err) !important;
}

.alert-warning {
    background: rgba(217, 119, 6, .06) !important;
    color: var(--warn) !important;
}

/* ---- Modal ---- */
.modal-content {
    border-radius: var(--r) !important;
    border: none !important;
    box-shadow: var(--s3) !important;
    animation: scaleIn .25s ease !important;
}

.modal-header {
    border-bottom: 1px solid var(--brd) !important;
}

.modal-footer {
    border-top: 1px solid var(--brd) !important;
}

/* ---- Dropdown ---- */
.dropdown-menu {
    border-radius: var(--rs) !important;
    border: 1px solid var(--brd-l) !important;
    box-shadow: var(--s3) !important;
    padding: 8px !important;
    animation: fadeInDown .2s ease !important;
}

.dropdown-item {
    border-radius: 8px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    transition: background .15s !important;
}

.dropdown-item:focus {
    background: var(--pl) !important;
    color: var(--p) !important;
}

/* ---- Table ---- */
.table {
    font-family: var(--f) !important;
}

.table thead th {
    border-bottom: 2px solid var(--brd) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: var(--mut) !important;
}

.table td {
    border-color: var(--brd) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(0, 0, 0, .012) !important;
}

/* ---- Compare / Wishlist ---- */
.compare-button {
    color: var(--mut) !important;
    transition: color var(--speed) !important;
}

.compare-button:hover {
    color: var(--p) !important;
}

.wishlist-button.active {
    color: var(--err) !important;
}

/* ---- Image Thumbnail ---- */
.img-thumbnail {
    border-radius: var(--rs) !important;
    border-color: var(--brd) !important;
}

/* ---- Consent Banner ---- */
.consent-banner {
    background: var(--card) !important;
    border-radius: var(--r) var(--r) 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .12) !important;
    font-family: var(--f) !important;
    padding: 24px 32px !important;
    border: 0 !important;
}

.consent-banner-actions .btn {
    border-radius: var(--rs) !important;
    font-weight: 600 !important;
    min-width: 140px !important;
}

/* ---- Scroll to Top ---- */
.scroll-top-wrapper {
    border-radius: 50% !important;
    background: var(--p) !important;
    color: #fff !important;
    box-shadow: var(--sb) !important;
    width: 44px !important;
    height: 44px !important;
    transition: all var(--speed) !important;
}

.scroll-top-wrapper:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(46, 43, 203, .3) !important;
}