.bg-zinc-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(212 212 216 / var(--tw-bg-opacity));
}
.w-full {
    width: 100%;
}
.h-px {
    height: 1px;
}

.fi-simple-main .fi-simple-header .fi-logo {
    display: none !important;
}

.dot::before {
    content: "";
    display: block;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.3s;
}

.dot.is-active::before {
    width: 2rem;
    background: #fff;
}

.status-dot {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgb(22, 163, 74);
}

.status-dot-gary {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: rgb(228, 228, 231);
}

.arrow-icon {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid rgb(147, 51, 234); /* default blue */
    transform: translateY(1px);
}

/* .fi-sidebar {
    background-color: #ffffff !important;
}

.dark .fi-sidebar {
    background-color: rgb(24, 24, 27) !important;
} */

.card-container .folder-media-card:hover {
    background-color: #ffffff;
}

.custom-button-class {
    --tw-ring-shadow: 0 0 #0000 !important; /* effectively removes ring shadow */
    --tw-ring-inset: initial !important;
    --tw-ring-offset-width: 0px !important;
    --tw-ring-color: transparent !important;
    box-shadow: none !important; /* remove any remaining shadow */
    border: none !important;
    background-color: hsla(
        0,
        0%,
        100%,
        0.05
    ); /* optional: remove border if needed */
}

.center-modal {
    top: 5.5rem !important;
}

.model-width-lg {
    width: 32rem !important;
}

.center-modal .fi-modal-dialog {
    margin: 0 !important;
}

::-webkit-scrollbar {
    width: 0px;
    /* background: transparent; */
}

.dark .media-checkbox {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.dark .media-checkbox:checked {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(168, 85, 247) !important;
}

#video-lib-card .fi-section-content {
    padding: 1vw !important;
}

#video-lib-card.list-view .fi-section-content {
    padding: 0.5rem 0.5rem 0.5rem 0rem !important;
}

#dashboard .fi-section-content {
    padding: 1rem !important;
}

.fi-sidebar-item-label {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.fi-sidebar-group-label {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.sidebar-container-02 .sidebar-button-2 .sidebar-label-02 {
    font-weight: 600 !important;
    font-size: 16px !important;
}

.custom-scroll-section .fi-section-content {
    max-height: 43.3rem;
    overflow-y: scroll;
}

.custom-scroll-section-setting .fi-section-content {
    max-height: 28.5rem;
    overflow-y: scroll;
}

.custom-scroll-section-playlist {
     max-height: 25rem;
    overflow-y: scroll;
}

.fi-section-content {
    scrollbar-width: thin;
}

#subscription-page .fi-simple-header .fi-logo {
    display: none;
}

.fi-sidebar-item-grouped-border {
    opacity: 0 !important;
}

.dark .featured-sidebar-group .fi-sidebar-group-button .fi-sidebar-group-label {
    color: #ffffff !important;
}

.featured-sidebar-group .fi-sidebar-group-button .fi-sidebar-group-label {
    color: rgba(var(--gray-700), var(--tw-text-opacity, 1)) !important;
}

.featured-sidebar-group .fi-sidebar-item .fi-sidebar-item-label {
    font-weight: 500 !important;
}

ul.fi-sidebar-nav-groups {
    gap: 0.4rem !important;
}

.fi-breadcrumbs .fi-breadcrumbs-item-label {
    max-width: 30vw; /* Limit the label width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* display: inline-block;
    vertical-align: middle;
    cursor: default;
    position: relative; */
}

.fi-header .fi-header-heading {
    max-width: 30vw; /* Limit the label width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fi-section-header .fi-section-header-heading {
    max-width: 30vw; /* Limit the label width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-limit {
    max-width: 20vw; /* Limit the label width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.preview-section-header .fi-section-header-actions {
    justify-content: flex-end !important;
}

/* .dark .filepond--drop-label {
    background-color: hsla(0, 0%, 100%, 0) !important;
    color: #d1d5db !important;
    border-radius: 0.5rem;
} */

/* Optional: tweak border + inner padding */
/* .dark .filepond--root {
    border: none !important;
    padding: 0.75rem;
} */

.fi-dropdown-panel
    .fi-dropdown-list
    .fi-dropdown-list-item
    .fi-dropdown-list-item-label {
    font-weight: 600 !important;
    /* font-size: 1rem !important; */
}

.fi-ta-table .fi-ta-text .fi-ta-text-item .fi-ta-text-item-label {
    /* font-weight: 600 !important; */
    font-weight: normal;
}

.upload-captions-modal .fi-modal-content .fi-dropdown-panel {
    width: 6vw !important;
}

.privacy-options .fi-fo-field-wrp .break-inside-avoid span {
    font-size: 1rem; /* 16px */
}

.upload-action-wrapper {
    font-size: 1rem !important;
}

#sort-dropdown .fi-dropdown-panel {
    z-index: 99 !important;
}
/* @media (min-width: 1367px) and (max-width: 1600px) {
     .custom-scroll-section-setting .fi-section-content {
    max-height:  29.5vw;
    overflow-y: scroll;
}
} */

.fi-fo-field-wrp .fi-fo-field-wrp-label span {
    /* font-size: 1rem !important; */
    font-weight: 600 !important;
}

.fi-ta-header .fi-ta-actions a,
.fi-fo-tabs .fi-tabs .fi-tabs-item,
.fi-dropdown-header .fi-dropdown-header-label {
    font-size: 1rem !important;
}

.custom-color-picker .fi-fo-color-picker-preview {
    border: 1px solid rgba(var(--gray-500), var(--tw-border-opacity, 1)); /* Black border */
}

.fi-simple-main .fi-form-actions span,
.fi-section-content-ctn .fi-section-content button,
/* .fi-section-content-ctn .fi-section-content a, */
.update-button button,
.fi-fo-actions .fi-ac button,
.fi-modal-footer .fi-modal-footer-actions .fi-btn-label {
    font-size: 1rem !important;
}

.fi-section-content-ctn .fi-section-content .dashboard-dropdown button{
      font-size: 14px !important;
}

.fi-section-content-ctn .fi-section-content button#langSelectBtn,
.fi-section-content-ctn .fi-section-content button#cap-upload-btn {
    font-size: 14px !important;
}

.dark #langSelectBtn {
    background-color: hsla(0, 0%, 100%, 0.05) !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.dark #langSelectMenu {
    background: rgba(24, 24, 27) !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
    border: 1px solid rgba(var(--gray-200), 1);
}

.dark #langSelectMenu li {
    background: rgba(24, 24, 27) !important;
    /* color: rgb(255 255 255/var(--tw-text-opacity,1)) !important; */
}

.fi-global-search-result h4 {
    max-width: 22vw; /* Limit the label width */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.empty-actions button,
.empty-actions a {
    font-size: 1rem !important;
}

.filament-breezy-grid-section .filament-breezy-grid-title,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
.fi-fo-radio span {
    font-weight: 600 !important;
}

.onbording-logo {
    width: 6rem;
    margin-bottom: 2.1rem;
}

.onbording-side-img {
    width: 28rem;
    margin-bottom: 2rem;
}

#cap-upload-btn:focus {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.4); /* subtle glow */
}

.fi-input-wrp[data-validation-state="error"] {
    @apply ring-1 ring-danger-600 border-danger-600;
}
.fi-input-wrp[data-validation-state="error"]:focus-within {
    @apply ring-danger-600;
}

.chat-box .chat-area {
    max-height: 25rem !important;
    height: 25rem !important;
}

.fi-breadcrumbs .fi-breadcrumbs-item .fi-breadcrumbs-item-separator {
    padding-top: 2.5px;
}

.fav-gold {
    color: rgb(245 158 11);
} /* amber-500 */
.dark .fav-gold {
    color: rgb(251 191 36);
} /* amber-400 */

/* make sure nested SVGs inherit it (Filament list.item wraps an svg) */
.fav-gold svg,
.fav-gold .fi-dropdown-list-item-icon {
    color: inherit;
}

/* if an icon ignores text color, force it */
.fav-gold svg,
.fav-gold .ph,
.fav-gold [data-icon] {
    fill: currentColor;
}

[data-fav-icon] .fi-btn-icon {
    color: var(--fav-icon-color, currentColor) !important;
}
[data-fav-icon] .fi-btn-icon svg {
    fill: currentColor !important;
}

/* Dropdown list item icon */
[data-fav-icon] .fi-dropdown-list-item-icon {
    color: var(--fav-icon-color, currentColor) !important;
}
[data-fav-icon] .fi-dropdown-list-item-icon svg {
    fill: currentColor !important;
}

.dark .ai-credit {
    background: #ffffff0d;
}

.select-img {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(var(--primary-600), var(--tw-ring-opacity, 1));
}

.dark .select-img {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(var(--primary-500), var(--tw-ring-opacity, 1));
}

/* app.css */
.dark .collapsible-card {
    --tw-bg-opacity: 1;
    background-color: #1d1d20 !important;
}

.form-field-dropdown:focus {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.4);
}

.active-time-bg {
    background-color: #f6f4fe;
}

.dark .active-time-bg {
    background-color: #32273e;
}

.media-gallery-pop #upload-button {
    font-size: 1rem !important;
}

.dark .empty-logo {
    background-color: #ffffff0d !important;
}

.marketing-empty-state-section {
    height: 34.5vw !important;
}

.my-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.fi-dropdown-trigger button {
    font-size: 1rem !important;
}

.fi-fo-date-time-picker-display-text-input {
    width: 12vw !important;
}

.text-new-color {
    color: #9333ea;
}

.edit_preview_button {
    color: #737373 !important;
}

.dark .edit_preview_button {
    color: #d4d4d4 !important;
}

.center-modal-marketing-tutorial {
    grid-template-rows: 1fr auto 1fr !important;
}

div[x-ref="modalContainer"]:has(.tutorial-modal-window) {
    grid-template-rows: 1.5fr auto 1fr !important;
}

.select-playlist{
    background-color:  #F4F4F5 !important;
}

.dark .select-playlist{
    background-color: #242427 !important;
}

.select-playlist:hover{
    background-color:  #FAFAFA !important;
}

.dark .select-playlist:hover{
    background-color:  #262626 !important;
}

.playlist-disable{
    background-color:  #FAFAFA  !important;
}

.dark .playlist-disable{
    background-color:  #181818  !important;
}

.dark .disable-text{
    color: #2E2D31 !important;
}


/* .change-button-width{
    width: 10.5rem !important;
}

@media screen and (max-width: 1397px) {
.change-button-width{
    width: 7rem !important;
}
} */

@media (min-width: 768px) {
    .desktop-h-50 {
        height: 50rem;
    }
    .marketing-empty-state-section {
        height: 34.5vw !important;
    }
}

@media only screen and (max-width: 767px) {
    .fi-simple-main .fi-simple-header .fi-logo {
        display: flex !important;
    }

    .fi-simple-layout .fi-simple-main-ctn div.left-side {
        display: none !important;
    }

    .fi-simple-layout .fi-simple-main-ctn .fi-simple-main {
        width: 22rem !important;
        border-radius: 0.75rem !important;
    }

    .fi-simple-layout .fi-simple-main-ctn {
        height: auto !important;
    }
}

@media (min-width: 1365px) and (max-width: 1400px) {
    .timing-font {
        font-size: 12px !important;
    }
}

@media (min-width: 1710px) {
    .marketing-empty-state-section {
        height: 35vw !important;
    }
}

@media (min-width: 1920px) {
    .marketing-empty-state-section {
        height: 30vw !important;
    }
}

@media (min-width: 1601px) {
    .custom-scroll-section .fi-section-content {
        max-height: 44.8rem;
        overflow-y: scroll;
    }

    .custom-scroll-section-setting .fi-section-content {
        max-height: 30rem;
        overflow-y: scroll;
    }

    .chat-box .chat-area {
        max-height: 35rem !important;
        height: 35rem !important;
    }
}

/* button possition*/

.fi-radio-custom span {
    color: rgba(var(--gray-500), var(--tw-text-opacity, 1)) !important;
}
/* Logo Position Selector Styles */
.logo-position-wrapper {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.logo-position-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.logo-position-box {
    width: 4.5rem;
    height: 4.5rem;
    border: 2px solid;
    border-radius: 0.5rem;
    padding: 0.6rem;
    display: flex;
    align-items: flex-start;
    transition: all 0.2s ease;
    position: relative;
    justify-content: space-between;
}

.center-box {
    align-items: center !important;
}

/* Light mode - default state */
.logo-position-box {
    background-color: #f9fafb;
    border-color: #e5e7eb;
}

/* Dark mode - default state */
.dark .logo-position-box {
    background-color: hsla(0, 0%, 100%, 0);
    /* background-color: #1f2937; */
    border-color: #374151;
}

/* Selected state - light mode */
.logo-position-box.selected {
    border-color: #a855f7;
}

/* Selected state - dark mode */
.dark .logo-position-box.selected {
    border-color: #a855f7;
}

/* Logo indicators */
.logo-indicator-marketing {
    width: 1rem;
    height: 0.875rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

/* Default gray indicator - light mode */
.logo-indicator-marketing.inactive {
    background-color: #d1d5db;
    display: block !important;
}

/* Default gray indicator - dark mode */
.dark .logo-indicator-marketing.inactive {
    background-color: #4b5563;
}

/* Active purple indicator - light mode */
.logo-indicator-marketing.active {
    background-color: #a855f7;
}

/* Active purple indicator - dark mode */
.dark .logo-indicator-marketing.active {
    background-color: #a855f7;
}

/* Label text */
.logo-position-label {
    font-size: 0.875rem;
    color: #6b7280;
}

.dark .logo-position-label {
    color: #9ca3af;
}

/* Hover effect */
.logo-position-option:hover .logo-position-box {
    border-color: #d1d5db;
}

.dark .logo-position-option:hover .logo-position-box {
    border-color: #4b5563;
}

.logo-position-option:hover .logo-position-box.selected {
    border-color: #9333ea;
}

.dark .logo-position-option:hover .logo-position-box.selected {
    border-color: #9333ea;
}