[data-bs-theme=light] {
    --bs-text-muted: #99A1B7;
    --bs-gray-100: #F9F9F9;
    --bs-gray-100-rgb: 249,249,249;
    --bs-gray-200: #F1F1F4;
    --bs-gray-200-rgb: 241,241,244;
    --bs-gray-300: #DBDFE9;
    --bs-gray-300-rgb: 219,223,233;
    --bs-gray-400: #C4CADA;
    --bs-gray-400-rgb: 196,202,218;
    --bs-gray-500: #99A1B7;
    --bs-gray-500-rgb: 153,161,183;
    --bs-gray-600: #78829D;
    --bs-gray-600-rgb: 120,130,157;
    --bs-gray-700: #4B5675;
    --bs-gray-700-rgb: 75,86,117;
    --bs-gray-800: #252F4A;
    --bs-gray-800-rgb: 37,47,74;
    --bs-gray-900: #071437;
    --bs-gray-900-rgb: 7,20,55;
    --bs-light: #F9F9F9;
    --bs-primary: #1B84FF;
    --bs-secondary: #F1F1F4;
    --bs-success: #17C653;
    --bs-info: #7239EA;
    --bs-warning: #F6C000;
    --bs-danger: #F8285A;
    --bs-dark: #1E2129;
    --bs-primary-active: #056EE9;
    --bs-secondary-active: #C4CADA;
    --bs-light-active: #F1F1F4;
    --bs-success-active: #04B440;
    --bs-info-active: #5014D0;
    --bs-warning-active: #DEAD00;
    --bs-danger-active: #D81A48;
    --bs-dark-active: #111318;
    --bs-primary-light: #E9F3FF;
    --bs-secondary-light: #F9F9F9;
    --bs-success-light: #DFFFEA;
    --bs-info-light: #F8F5FF;
    --bs-warning-light: #FFF8DD;
    --bs-danger-light: #FFEEF3;
    --bs-dark-light: #F9F9F9;
    --bs-light-light: #ffffff;
    --bs-primary-inverse: #ffffff;
    --bs-secondary-inverse: #252F4A;
    --bs-light-inverse: #252F4A;
    --bs-success-inverse: #ffffff;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark-inverse: #ffffff;
    --bs-primary-clarity: rgba(27, 132, 255, 0.2);
    --bs-secondary-clarity: rgba(249, 249, 249, 0.2);
    --bs-success-clarity: rgba(23, 198, 83, 0.2);
    --bs-info-clarity: rgba(114, 57, 234, 0.2);
    --bs-warning-clarity: rgba(246, 192, 0, 0.2);
    --bs-danger-clarity: rgba(248, 40, 90, 0.2);
    --bs-dark-clarity: rgba(30, 33, 41, 0.2);
    --bs-light-clarity: rgba(255, 255, 255, 0.2);
    --bs-light-rgb: 249,249,249;
    --bs-primary-rgb: 27,132,255;
    --bs-secondary-rgb: 241,241,244;
    --bs-success-rgb: 23,198,83;
    --bs-info-rgb: 114,57,234;
    --bs-warning-rgb: 246,192,0;
    --bs-danger-rgb: 248,40,90;
    --bs-dark-rgb: 30,33,41;
    --bs-text-white: #ffffff;
    --bs-text-primary: #1B84FF;
    --bs-text-secondary: #F1F1F4;
    --bs-text-light: #F9F9F9;
    --bs-text-success: #17C653;
    --bs-text-info: #7239EA;
    --bs-text-warning: #F6C000;
    --bs-text-danger: #F8285A;
    --bs-text-dark: #1E2129;
    --bs-text-muted: #99A1B7;
    --bs-text-gray-100: #F9F9F9;
    --bs-text-gray-200: #F1F1F4;
    --bs-text-gray-300: #DBDFE9;
    --bs-text-gray-400: #C4CADA;
    --bs-text-gray-500: #99A1B7;
    --bs-text-gray-600: #78829D;
    --bs-text-gray-700: #4B5675;
    --bs-text-gray-800: #252F4A;
    --bs-text-gray-900: #071437;
    --bs-border-color: #F1F1F4;
    --bs-border-dashed-color: #DBDFE9;
    --bs-component-active-color: #ffffff;
    --bs-component-active-bg: #1B84FF;
    --bs-component-hover-color: #1B84FF;
    --bs-component-hover-bg: #F9F9F9;
    --bs-component-checked-color: #ffffff;
    --bs-component-checked-bg: #1B84FF;
    --bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.05);
    --bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.1);
    --bs-input-bg: var(--bs-body-bg);
    --bs-input-color: var(--bs-gray-700);
    --bs-input-solid-color: var(--bs-gray-700);
    --bs-input-solid-bg: var(--bs-gray-100);
    --bs-input-solid-bg-focus: var(--bs-gray-200);
    --bs-input-solid-placeholder-color: var(--bs-gray-500);
    --bs-root-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    --bs-root-card-border-color: #F1F1F4;
    --bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    --bs-table-striped-bg: rgba(var(--bs-gray-100-rgb), 0.75);
    --bs-table-loading-message-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --bs-code-bg: #f1f3f8;
    --bs-code-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08);
    --bs-code-border-color: transparent;
    --bs-code-color: #b93993;
    --bs-symbol-label-color: var(--bs-gray-800);
    --bs-symbol-label-bg: var(--bs-gray-100);
    --bs-symbol-border-color: rgba(var(--bs-body-bg), 0.5);
    --bs-bullet-bg-color: var(--bs-gray-400);
    --bs-scrolltop-opacity: 0;
    --bs-scrolltop-opacity-on: 0.3;
    --bs-scrolltop-opacity-hover: 1;
    --bs-scrolltop-box-shadow: var(--bs-box-shadow);
    --bs-scrolltop-bg-color: var(--bs-primary);
    --bs-scrolltop-bg-color-hover: var(--bs-primary);
    --bs-scrolltop-icon-color: var(--bs-primary-inverse);
    --bs-scrolltop-icon-color-hover: var(--bs-primary-inverse);
    --bs-drawer-box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.05);
    --bs-drawer-bg-color: #ffffff;
    --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.2);
    --bs-menu-dropdown-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    --bs-menu-dropdown-bg-color: var(--bs-body-bg);
    --bs-menu-heading-color: #99A1B7;
    --bs-menu-link-color-hover: #1B84FF;
    --bs-menu-link-color-show: #1B84FF;
    --bs-menu-link-color-here: #1B84FF;
    --bs-menu-link-color-active: #1B84FF;
    --bs-menu-link-bg-color-hover: #F9F9F9;
    --bs-menu-link-bg-color-show: #F9F9F9;
    --bs-menu-link-bg-color-here: #F9F9F9;
    --bs-menu-link-bg-color-active: #F9F9F9;
    --bs-scrollbar-color: #F1F1F4;
    --bs-scrollbar-hover-color: #DBDFE9;
    --bs-overlay-bg: rgba(0, 0, 0, 0.05);
    --bs-blockui-overlay-bg: rgba(0, 0, 0, 0.05);
    --bs-rating-color-default: #C4CADA;
    --bs-rating-color-active: #FFAD0F;
    --bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(30, 33, 41, 0.1);
    --bs-ribbon-label-bg: #1B84FF;
    --bs-ribbon-label-border-color: #0053b4;
    --bs-ribbon-clip-bg: #1E2129;
    --bs-engage-btn-bg: #ffffff;
    --bs-engage-btn-box-shadow: 0px 0px 22px #E0E0E0;
    --bs-engage-btn-border-color: #E8E8E8;
    --bs-engage-btn-color: #252F4A;
    --bs-engage-btn-icon-color: #78829D;
    --bs-engage-btn-color-active: #252F4A
}
/* Estilos personalizados para la aplicación */
.hidden {
    display: none !important;
}
section.breadcrumb-category .breadcrumb-nav {
    height: 60px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 0;
    padding-right: 50px;
}
.navbar-nav .nav-item.active > .nav-link {
   /* color: #0dcaf0 !important;*/
    font-weight: bold;
}
.navbar-nav .nav-item.active > .nav-link:before {
    transform: scaleX(1) !important;
}
/* Estilo para elementos activos del submenú */
.megamenu .nav-item.active > .nav-link {
    color: #0dcaf0 !important;
    font-weight: bold;
}

/* Estilo al hacer hover sobre elementos activos */
.navbar-nav .nav-item.active > .nav-link:hover,
.megamenu .nav-item.active > .nav-link:hover {
    color: inherit;
}

/* Correcciones y ajustes para Metronic Dark Theme */
[data-bs-theme="dark"] .select2-container--bootstrap5 .select2-selection {
    background-color: var(--kt-input-solid-bg);
    border-color: var(--kt-input-solid-bg);
    color: var(--kt-input-solid-color);
}
.artist-bio .bio-content.gray,
.artist-bio .bio-content.gray p {
    font-size: 1.2rem;
    line-height: 1.7rem;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumb-category .breadcrumb-nav .breadcrumb .breadcrumb-item .breadcrumb-link:hover, 
.breadcrumb-category .breadcrumb-nav .breadcrumb .breadcrumb-item .breadcrumb-link:hover .icon {
    color: #eee;
}
[data-bs-theme="dark"] .select2-container--bootstrap5.select2-container--focus .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap5.select2-container--open .select2-selection {
    border-color: var(--kt-primary);
}
/* Nav menu */

/* Estilos para el menú fijo */
a.badge.lang-link:NOT(.active) {
    background-color: transparent;
    border-color: #99a1b7 !important;
}
.navbar-bottom-wrapper.fixed-top {
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: #000; /* Asegúrate de que coincida con tu esquema de colores */
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Animación al desplazarse hacia abajo */
.smart-scroll.scrolled-down .navbar-bottom-wrapper.fixed-top {
  transform: translateY(0);
}

/* Animación al desplazarse hacia arriba */
.smart-scroll.scrolled-up .navbar-bottom-wrapper.fixed-top {
  transform: translateY(0);
}

/* Para ajustar el espacio cuando el menú está fijo */
body.has-fixed-nav {
  padding-top: 70px; /* Ajusta según la altura de tu navbar */
}

/* Agregar un poco de transición */
.navbar-bottom-wrapper {
  transition: transform 0.3s ease, background-color 0.3s ease;
}
/* Estilos para inputs numéricos */
.number-input {
    text-align: right;
}

.currency-symbol {
    opacity: 0.7;
    margin-left: 0.25rem;
}
#kt_header_user_menu_toggle{
    height: 74px;
}
#kt_header_user_menu_toggle .las {
    font-size: 40px;
}
.html-content {
    white-space: nowrap;
    overflow: hidden;
}
div#kt_table_translations_wrapper .table.gy-5 td {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
button.btn.btn-secondary.buttons-pdf.buttons-html5 {
    margin-right: 10px;
    border-radius: 6px;
}
button.btn.btn-secondary.buttons-print {
    border-radius: 6px;
}
.table:not(.table-bordered) td:first-child, .table:not(.table-bordered) th:first-child, .table:not(.table-bordered) tr:first-child {
    padding-left: 15px;
}
.table:not(.table-bordered) td:last-child, .table:not(.table-bordered) th:last-child, .table:not(.table-bordered) tr:last-child {
    padding-right: 15px;
}
#kt_table_translations_wrapper .dt-buttons.btn-group {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 15%;
    float: left;
    margin-bottom: 10px;
}
#kt_table_videos_wrapper > div:nth-child(2),
#kt_table_translations_wrapper > div:nth-child(2) {
  width: 45%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    float: right;
}
#kt_table_videos_wrapper > div:nth-child(2) .form-control-sm,
#kt_table_translations_wrapper > div:nth-child(2) .form-control-sm {
    min-height: calc(1.5em + 1.1rem + 12px);
    background-color: #ffffff;
    border: 2px solid #e6e6e6;
}
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 1rem;
}
.holder .badge:hover {
    background-color: rgb(0 0 0 / 15%);
    color: #dee2e6;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 0 0.25rem;
    border: 0 !important;
    border-radius: 0.475rem;
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--kt-gray-700) !important;
    background-color: transparent;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--kt-primary) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background-color: var(--kt-gray-100) !important;
    color: var(--kt-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.first,
.dataTables_wrapper .dataTables_paginate .paginate_button.last {
    font-size: 0.85rem;
}

/* Estilos para el contenedor de paginación */
.card-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0;
}


.customtd{
    color: var(--bs-text-gray-900) !important;
    transition: color .2s ease;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 1.075rem !important;
}

.dataTables_wrapper .dataTables_processing {
    background: var(--kt-body-bg);
    border: 1px solid var(--kt-border-color);
    box-shadow: var(--kt-box-shadow-sm);
}

.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}

/* Personalización de tooltips */
.tooltip-inner {
    max-width: 200px;
    padding: 0.5rem 1rem;
    border-radius: 0.475rem;
}

/* Estilos para cards personalizados */
.card.card-custom {
    box-shadow: var(--kt-box-shadow-sm);
    transition: box-shadow 0.3s ease;
}

.card.card-custom:hover {
    box-shadow: var(--kt-box-shadow);
}

/* Estilos para los totales */
.total-amount {
    font-weight: bold;
    color: var(--kt-primary);
}

.total-fixed {
    color: var(--kt-info);
}

.total-house {
    color: var(--kt-success);
}

.total-market {
    color: var(--kt-warning);
}

.total-payments {
    color: var(--kt-danger);
}

/* Estilos para la barra de progreso */
.progress-sm {
    height: 0.5rem;
}

.progress-label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

/* Estilos para las sugerencias de conceptos */
.suggestions-container {
    position: absolute;
    z-index: 1000;
    background: var(--kt-body-bg);
    border: 1px solid var(--kt-border-color);
    border-radius: 0.475rem;
    box-shadow: var(--kt-box-shadow);
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
}

.suggestion-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.suggestion-item:hover {
    background-color: var(--kt-gray-200);
}

/* Estilos para los iconos en inputs */
.input-icon {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.form-control:focus + .input-icon,
.form-control:hover + .input-icon {
    opacity: 1;
}

/* Estilos para mensajes de validación */
.invalid-feedback {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Estilos para el modo de edición inline */
.editable-cell {
    position: relative;
}

.editable-cell.editing {
    padding: 0;
}

.editable-cell.editing input {
    width: 100%;
    height: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
}

/* Estilos para gráficos */
.chart-container {
    position: relative;
    min-height: 300px;
}

.chart-legend {
    margin-top: 1rem;
    padding: 1rem;
    border-top: 1px solid var(--kt-border-color);
}

/* Estilos para filtros */
.filter-section {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--kt-border-color);
    border-radius: 0.475rem;
    background-color: var(--kt-body-bg);
}

/* Estilos para botones de acción */
button#copy-key-button {
    border: 1px solid #ccc;
}

.action-buttons {
    white-space: nowrap;
}

.action-buttons .btn {
    margin-right: 0.5rem;
}

.action-buttons .btn:last-child {
    margin-right: 0;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .card-stretch {
        height: auto !important;
    }
    
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left;
        margin-bottom: 1rem;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .table-responsive {
        overflow: visible !important;
    }
    
    .card {
        border: none !important;
        box-shadow: none !important;
    }
}

.quill-editor {
    height: 200px;
    margin-bottom: 1rem;
    border-radius: 0.475rem;
}

/* Ajustar altura mínima del contenedor de Quill */
.ql-container {
    min-height: 150px;
}

/* Ajuste para el modo oscuro */
.dark-mode .ql-toolbar,
.dark-mode .ql-container {
    border-color: #323248 !important;
}

.dark-mode .ql-toolbar {
    background-color: #1e1e2d;
}

.dark-mode .ql-editor {
    color: #9899ac;
}

/* Hacer que Quill se adhiera al estilo de Metronic */
.ql-toolbar {
    border-top-left-radius: 0.475rem;
    border-top-right-radius: 0.475rem;
    background-color: #f5f8fa;
}

.ql-container {
    border-bottom-left-radius: 0.475rem;
    border-bottom-right-radius: 0.475rem;
}

/* Asegurar que el editor Quill tenga el tamaño correcto */
.ql-editor {
    font-family: inherit;
    font-size: 1rem;
}
.html-content p{
    margin: 0px;
}
/* Estilos para mensajes de alerta personalizados */
.custom-alert {
    position: relative;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0.475rem;
    border-left: 0.25rem solid transparent;
}

.custom-alert.alert-success {
    background-color: #E8FFF3;
    border-color: #50cd89;
    color: #095030;
}

.custom-alert.alert-danger {
    background-color: #FFF5F8;
    border-color: #f1416c;
    color: #7a0d2f;
}

.custom-alert.alert-info {
    background-color: #F1FAFF;
    border-color: #009ef7;
    color: #004873;
}

.custom-alert.alert-warning {
    background-color: #FFF8DD;
    border-color: #ffc700;
    color: #7a6400;
}

/* Animación para mensajes de estado */
.fade-in-down {
    animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mejoras en el medidor de fortaleza de contraseña */
.password-strength-container {
    margin-top: 0.5rem;
}

.password-strength-meter {
    height: 6px;
    border-radius: 3px;
    background-color: #e4e6ef;
    margin-bottom: 0.5rem;
}

.password-strength-meter .strength-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.password-strength-text {
    font-size: 0.85rem;
    color: #5e6278;
}

/* Estilo para tooltips */
.custom-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-left: 0.25rem;
}

.custom-tooltip .tooltip-text {
    visibility: hidden;
    width: 250px;
    background-color: #3f4254;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -125px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
}

.custom-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.custom-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #3f4254 transparent transparent transparent;
}
.html-content:before {
    content: "\F4CA";
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    margin-right: 5px;
    color: #17c653;
}
.ratio.ratio-16x9,
div#local_video_preview {
    max-width: 482px;
}
.card-body .card-image-icon {
    display: inline-block;
    margin-right: .5rem;
    height: 15px;
  }

.badge.outline1 {
    background-color: #000000;
}

.card.has-full-image .title {
    margin-top: 1rem !important;
}

/* Badge/Button with black background and text shadow for contrast */
.badge.black-solid {
    background-color: #000000;
    border: 2px solid #000000;
}

.badge.black-solid .badge-text {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 
                 -1px -1px 2px rgba(0, 0, 0, 0.8);
}

.badge.black-solid:hover .badge-text {
    color: #ffffff;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 1), 
                 -2px -2px 3px rgba(0, 0, 0, 0.9);
}

/* Title with black text shadow for contrast */
.title.black-shadow {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 
                 -1px -1px 2px rgba(0, 0, 0, 0.8),
                 0 0 8px rgba(0, 0, 0, 0.7);
}

.title.black-shadow:hover {
    color: #ffffff;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 1), 
                 -2px -2px 3px rgba(0, 0, 0, 0.9),
                 0 0 12px rgba(0, 0, 0, 0.8);
}



/* Navbar background only when scrolling down */
.shock-header .navbar.smart-scroll.scrolled {
    background-color: #000000c9 !important;
    backdrop-filter: blur(10px);
}

/* Ensure navbar is transparent initially */
.shock-header .navbar.smart-scroll {
    background-color: transparent !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Additional specificity for navbar wrapper */
.shock-header .navbar.smart-scroll .navbar-wrapper {
    background-color: inherit;
}

/* Team Cards Integrated Design */
.team-card-integrated .image-wrapper {
    overflow: hidden;
    border-radius: 0.475rem;
}

.team-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.95) 100%);
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    border-bottom-left-radius: 0.475rem;
    border-bottom-right-radius: 0.475rem;
}

.team-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.team-position {
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    text-align: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    align-self: flex-start;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.team-name {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 
                 -1px -1px 2px rgba(0, 0, 0, 0.8),
                 0 0 8px rgba(0, 0, 0, 0.7);
    line-height: 1.2;
}

/* Hover effects for team cards */
.team-card-integrated:hover .team-overlay {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.95) 100%);
}

.team-card-integrated:hover .team-position {
    background-color: rgba(0, 0, 0, 1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.team-card-integrated:hover .team-name {
    transform: translateY(-1px);
    transition: all 0.3s ease;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 1), 
                 -2px -2px 3px rgba(0, 0, 0, 0.9),
                 0 0 12px rgba(0, 0, 0, 0.8);
}

/* Responsive adjustments for team cards */
@media (max-width: 768px) {
    .team-overlay {
        padding: 1.5rem 1rem 1rem 1rem;
    }
    
    .team-position {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .team-name {
        font-size: 1.6rem;
    }
}

@media (max-width: 576px) {
    .team-overlay {
        padding: 1rem 0.75rem 0.75rem 0.75rem;
    }
    
    .team-position {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    
    .team-name {
        font-size: 1.6rem;
    }
}