/* SMARTIFY_PRODUCTION_RESET_FALLBACK_BEGIN */
/*
 * Production-only safety net for rules already present in the original
 * reset.css. This does not redesign the UI.
 *
 * On the hosted screenshot Bootstrap/default browser typography/link styles
 * were winning (blue underlined tabs, different text geometry). site.css is
 * confirmed to load on the host because the language switcher is styled.
 * Repeating only these reset semantics here makes the final result stable
 * even when reset.css is served stale/late/missing by the host/CDN.
 */
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
ul,
ol,
li,
label,
button,
input {
    font: inherit;
    vertical-align: baseline;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

a,
a:hover,
a:focus,
a:active,
a:visited {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span {
    line-height: 1.5;
}
/* SMARTIFY_PRODUCTION_RESET_FALLBACK_END */

/*
 * Smartify behavior-only additions.
 * Visual geometry, spacing, input/focus/hover states and modal dimensions
 * come exclusively from the uploaded reference index.css.
 */

/* Keep profile/language controls outside the source geometry flow. */
.header-profile-cluster {
    position: relative;
    margin-bottom: 20px;
}

    .header-profile-cluster .header-profile {
        margin-bottom: 0;
    }

.header-profile[data-open-login] {
    cursor: pointer;
}

/* Language selector is an added product feature and is absolutely positioned
   so it does not change the source header dimensions. */
.language-switcher {
    position: absolute;
    top: 0;
    right: calc(100% + 10px);
    z-index: 20;
    direction: ltr;
}

.language-switcher__button {
    height: 46px;
    min-width: 142px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 8px;
    color: #000;
    background-color: whitesmoke;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
}

    .language-switcher__button:hover,
    .language-switcher__button:focus,
    .language-switcher__button:active {
        color: #000;
        background-color: whitesmoke;
    }

.language-switcher__flag {
    display: block;
    width: 24px;
    height: 16px;
    flex: 0 0 24px;
    object-fit: cover;
    border-radius: 2px;
}

.language-switcher__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.language-switcher__chevron {
    margin-left: auto;
    line-height: 1;
}

.language-switcher__menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 46px;
    right: 0;
    width: 190px;
    max-height: min(360px, calc(100vh - 80px));
    overflow-y: auto;
    padding: 4px 0;
    background-color: whitesmoke;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.language-switcher.is-open .language-switcher__menu {
    visibility: visible;
    opacity: 1;
}

.language-switcher__item,
.language-switcher__item:hover,
.language-switcher__item:focus,
.language-switcher__item:active,
.language-switcher__item:visited {
    display: flex;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    padding: 8px 10px;
    color: #000;
    background: transparent;
    text-decoration: none;
    outline: none;
}

    .language-switcher__item:hover,
    .language-switcher__item:focus,
    .language-switcher__item.is-current {
        background-color: rgb(218, 218, 218);
        box-shadow: inset 0 2px 0 whitesmoke, inset 0 -2px 0 whitesmoke;
    }

/* Modal behavior only; dimensions and visual styling stay in index.css. */
body.modal-open {
    overflow: hidden;
}

.modal-overlay {
    pointer-events: none;
}

    .modal-overlay.show {
        pointer-events: auto;
    }

.modal-login,
.modal-register,
.modal-forgot {
    pointer-events: none;
}

    .modal-login.show,
    .modal-register.show,
    .modal-forgot.show {
        pointer-events: auto;
    }

    /* Modal links keep exactly the source blue appearance on every state. */
    .modal-login .auth-link,
    .modal-register .auth-link,
    .modal-forgot .auth-link,
    .modal-login .auth-link:hover,
    .modal-register .auth-link:hover,
    .modal-forgot .auth-link:hover,
    .modal-login .auth-link:focus,
    .modal-register .auth-link:focus,
    .modal-forgot .auth-link:focus,
    .modal-login .auth-link:active,
    .modal-register .auth-link:active,
    .modal-forgot .auth-link:active,
    .modal-login .auth-link:visited,
    .modal-register .auth-link:visited,
    .modal-forgot .auth-link:visited {
        color: blue;
        background: transparent;
        text-decoration: none;
        box-shadow: none;
        outline: none;
        transition: none;
    }

/* Functional visibility only. */
[data-auth-error][hidden],
[data-auth-success][hidden],
[data-register-view][hidden],
[data-forgot-view][hidden],
[data-auth-guest][hidden],
[data-auth-user][hidden] {
    display: none !important;
}

/* Source colors for runtime messages. */
.modal-login [data-auth-error],
.modal-register [data-auth-error],
.modal-forgot [data-auth-error] {
    color: red;
}

.modal-login [data-auth-success],
.modal-register [data-auth-success],
.modal-forgot [data-auth-success] {
    color: #388e42;
}

/* Loading is visible only during an active AJAX request. Idle buttons remain
   visually identical to the uploaded reference. */
[data-auth-form] button.is-loading {
    cursor: wait;
}

    [data-auth-form] button.is-loading::after {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-inline-start: 8px;
        vertical-align: -2px;
        border: 2px solid currentColor;
        border-inline-end-color: transparent;
        border-radius: 50%;
        animation: smartify-auth-spin 0.7s linear infinite;
    }

@keyframes smartify-auth-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Existing functional forms must not add wrapper geometry. */
.header-profile-form,
.playlist-delete-form {
    margin: 0;
    padding: 0;
}

.header-profile-form {
    display: contents;
}

.playlist-delete-form {
    display: contents;
}

.header-profile-logout {
    width: 100%;
    padding: 0;
    color: #000;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

    .header-profile-logout:hover,
    .header-profile-logout:focus {
        color: #000;
        background-color: rgb(218, 218, 218);
    }

.playlist-delete-button {
    /* The source reference used a div here. Reset the global button padding
     so the playlist-name bar remains exactly 32px high and does not overlap
     the playlist URL text below it. */
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
}

/* Runtime page message only; does not affect the source when absent. */
.portal-message {
    margin-top: 12px;
    overflow-wrap: anywhere;
}

html[dir="rtl"] .apk__icon-container,
html[dir="rtl"] .android__icon-container,
html[dir="rtl"] .ios__icon-container,
html[dir="rtl"] .samsung__icon-container,
html[dir="rtl"] .lgtv__icon-container,
html[dir="rtl"] .playlists__delete {
    left: auto;
    right: 0;
}

html[dir="rtl"] .apk__text {
    text-align: right;
}

html[dir="rtl"] .language-switcher {
    right: auto;
    left: calc(100% + 10px);
}

html[dir="rtl"] .language-switcher__menu {
    right: auto;
    left: 0;
}

@media (max-width: 576px) {
    .header-profile {
        padding: 0px;
    }

    .icon-tabler-user {
        width: 32px;
        height: 32px;
    }

    .header__logo {
        width: 240px;
    }

    .language-switcher__button {
        min-width: 32px;
        width: 32px;
        height: 32px;
        padding: 0 4px;
    }

        .language-switcher__button .language-switcher__name,
        .language-switcher__button .language-switcher__chevron {
            display: none;
        }

    .language-switcher__menu {
        width: 180px;
        top: 32px;
    }

    .header-profile__menu {
        top: 32px;
    }
}


/* SMARTIFY_PROFILE_MENU_BOOTSTRAP_GAP_FIX_BEGIN */
/*
 * Bootstrap applies padding-left: 2rem to ul elements.
 * The profile dropdown uses a ul, so that padding creates the visible
 * empty strip on the left. Reset only this list; do not alter menu geometry.
 */
.header-profile__items {
    margin: 0;
    padding: 0;
}
/* SMARTIFY_PROFILE_MENU_BOOTSTRAP_GAP_FIX_END */

/* SMARTIFY_PROFILE_MENU_ICONS_BEGIN */
/* Fill the existing dropdown's left-side space with compact semantic icons. */
.header-profile__item-row,
.header-profile-logout {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.header-profile__menu-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: #000;
}

.header-profile__item-row span,
.header-profile-logout span {
    min-width: 0;
}

.header-profile-logout {
    justify-content: flex-start;
}
/* SMARTIFY_PROFILE_MENU_ICONS_END */

/* SMARTIFY_DEVICE_MANAGEMENT_BEGIN */

/* The delete icon keeps the exact original Manage geometry. */
.device-remove-trigger {
    padding: 2px;
    color: #151a22;
    border: 0;
}

    .device-remove-trigger:hover,
    .device-remove-trigger:focus,
    .device-remove-trigger:active {
        color: #151a22;
        background-color: #49b355;
    }

/* Confirmation modal deliberately reuses .modal-login geometry. */
.modal-device-remove {
    pointer-events: none;
}

    .modal-device-remove.show {
        pointer-events: auto;
    }

.device-remove-overlay {
    pointer-events: none;
}

    .device-remove-overlay.show {
        pointer-events: auto;
    }

.device-remove-name {
    padding: 10px;
    border: 1px solid #388e42;
    border-radius: 4px;
    background-color: #f4f6f5;
    overflow-wrap: anywhere;
}

.device-remove-warning {
    font-size: 14px;
    line-height: 1.5;
}

.device-remove-actions {
    display: flex;
    column-gap: 10px;
    margin-top: 10px;
}

    .device-remove-actions button {
        flex: 1 1 0;
    }

.device-remove-cancel {
    background-color: #616161;
}

    .device-remove-cancel:hover,
    .device-remove-cancel:focus {
        background-color: #777;
    }

.device-remove-confirm {
    background-color: #b3261e;
}

    .device-remove-confirm:hover,
    .device-remove-confirm:focus {
        background-color: #d32f2f;
    }

[data-device-remove-form] button.is-loading {
    cursor: wait;
}

    [data-device-remove-form] button.is-loading::after {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-inline-start: 8px;
        vertical-align: -2px;
        border: 2px solid currentColor;
        border-inline-end-color: transparent;
        border-radius: 50%;
        animation: smartify-auth-spin 0.7s linear infinite;
    }

[data-device-remove-error][hidden],
[data-device-remove-success][hidden],
[data-device-empty][hidden] {
    display: none !important;
}

[data-device-remove-error] {
    color: red;
}

[data-device-remove-success] {
    color: #388e42;
}

.portal-message--error {
    color: red;
}

/* SMARTIFY_DEVICE_MANAGEMENT_END */

/* SMARTIFY_PLAYLIST_DELETE_CONFIRM_BEGIN */

.modal-playlist-delete {
    pointer-events: none;
}

    .modal-playlist-delete.show {
        pointer-events: auto;
    }

.playlist-delete-overlay {
    pointer-events: none;
}

    .playlist-delete-overlay.show {
        pointer-events: auto;
    }

.playlist-delete-name {
    padding: 10px;
    border: 1px solid #388e42;
    border-radius: 4px;
    background-color: #f4f6f5;
    overflow-wrap: anywhere;
}

.playlist-delete-actions {
    display: flex;
    column-gap: 10px;
    margin-top: 10px;
}

    .playlist-delete-actions button {
        flex: 1 1 0;
    }

.playlist-delete-cancel {
    background-color: #616161;
}

    .playlist-delete-cancel:hover,
    .playlist-delete-cancel:focus {
        background-color: #777;
    }

.playlist-delete-confirm {
    background-color: #b3261e;
}

    .playlist-delete-confirm:hover,
    .playlist-delete-confirm:focus {
        background-color: #d32f2f;
    }

[data-playlist-delete-form] button.is-loading {
    cursor: wait;
}

    [data-playlist-delete-form] button.is-loading::after {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-inline-start: 8px;
        vertical-align: -2px;
        border: 2px solid currentColor;
        border-inline-end-color: transparent;
        border-radius: 50%;
        animation: smartify-auth-spin 0.7s linear infinite;
    }

[data-playlist-delete-error][hidden],
[data-playlist-delete-success][hidden],
[data-playlist-empty][hidden] {
    display: none !important;
}

[data-playlist-delete-error] {
    color: red;
}

[data-playlist-delete-success] {
    color: #388e42;
}

/* SMARTIFY_PLAYLIST_DELETE_CONFIRM_END */

/* SMARTIFY_PLAYLIST_ROW_HEIGHT_FIX_BEGIN */
.playlists_item {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.playlists__items {
    height: auto;
    min-height: 0;
}
/* SMARTIFY_PLAYLIST_ROW_HEIGHT_FIX_END */

/* SMARTIFY_DOWNLOAD_LINKS_BEGIN */
.store-download-link,
.store-download-link:hover,
.store-download-link:focus,
.store-download-link:active,
.store-download-link:visited {
    display: block;
    color: inherit;
    text-decoration: none;
}
    /* SMARTIFY_DOWNLOAD_LINKS_END */

    /* SMARTIFY_DOWNLOAD_LINK_CLICK_FIX_BEGIN */
    .store-download-link,
    .store-download-link:hover,
    .store-download-link:focus,
    .store-download-link:active,
    .store-download-link:visited {
        display: block;
        width: 100%;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
    }

        .store-download-link > .apk__container,
        .store-download-link > .android__container {
            width: 100%;
        }
/* SMARTIFY_DOWNLOAD_LINK_CLICK_FIX_END */

/* SMARTIFY_RTL_PROFILE_DROPDOWN_FIX_BEGIN */
/*
 * In RTL the profile button can sit at the left edge of the header.
 * Anchor the dropdown to its left edge so the menu grows to the right,
 * into the viewport, instead of overflowing off-screen.
 */
html[dir="rtl"] .header-profile__menu {
    right: auto;
    left: 0;
}
/* SMARTIFY_RTL_PROFILE_DROPDOWN_FIX_END */

/* SMARTIFY_PROTECTED_PORTAL_NO_VISUAL_OVERLAY_BEGIN */
/*
 * Upload/Manage remain visually identical to the original template while
 * unauthenticated. The auth overlay is only an invisible interaction layer
 * for the mandatory modal; no blur, backdrop blur or darkening is applied.
 */

/* SMARTIFY_PROTECTED_PORTAL_NO_VISUAL_OVERLAY_END */

/* SMARTIFY_AUTH_MODAL_CLOSE_SAFE_BEGIN */
/*
 * The original modal geometry remains 100% controlled by index.css.
 * Do not set position/top/left/right/margin/display/flex/padding on the modal.
 */
.auth-modal-close,
.auth-modal-close:focus,
.auth-modal-close:active {
    position: absolute;
    inset-block-start: -9px;
    inset-inline-end: -11px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #dcdcdc;
    color: #151a22;
    font-size: 26px;
    font-weight: 400;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

    .auth-modal-close:hover {
        background: #56d564;
    }
    .auth-modal-close:focus-visible {
        outline: 2px solid #388e42;
        outline-offset: 1px;
    }

/*
 * Preserve the original 340px desktop width, but prevent overflow on
 * very narrow phones. This only constrains width when the viewport is
 * smaller than the original modal.
 */
@media (max-width: 380px) {
    .modal-login,
    .modal-register,
    .modal-forgot {
        width: calc(100vw - 24px);
        max-width: 340px;
    }
}

/* Larger touch target on touch screens without changing content flow. */
@media (pointer: coarse) {
    .auth-modal-close,
    .auth-modal-close:hover,
    .auth-modal-close:focus,
    .auth-modal-close:active {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        line-height: 34px;
    }
}
/* SMARTIFY_AUTH_MODAL_CLOSE_SAFE_END */

/* SMARTIFY_MAIN_TABS_REFERENCE_RESPONSIVE_BEGIN */
/*
 * Original reference geometry is untouched in index.css:
 *   top:-34px; left:-4px; column-gap:10px; padding:5px 10px.
 *
 * Keep physical tab order/placement identical in every language.
 * RTL text still reads RTL inside each tab.
 */
.menu {
    direction: ltr;
}

.menu__item,
.menu__item > li {
    white-space: nowrap;
}

html[dir="rtl"] .menu__item {
    direction: rtl;
    unicode-bidi: isolate;
}

/*
 * On mobile, long translated labels must never wrap and change tab height.
 * The strip keeps the original position and becomes horizontally swipeable
 * only when its content is wider than the available section width.
 */
@media (max-width: 576px) {
    .menu {
        left: -4px;
        right: auto;
        width: calc(100% + 8px);
        max-width: calc(100% + 8px);
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

        .menu::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }

    .menu__item {
        flex: 0 0 auto;
    }
}
/* SMARTIFY_MAIN_TABS_REFERENCE_RESPONSIVE_END */

/* SMARTIFY_CONFIRM_DISABLED_NAME_INPUTS_BEGIN */
.playlist-delete-name:disabled,
.device-remove-name:disabled {
    width: 100%;
    opacity: 1;
    cursor: default;
    color: #151a22;
    -webkit-text-fill-color: #151a22;
    background-color: #f4f6f5;
    border: 1px solid #b7c0bd;
    box-shadow: none;
}

    .playlist-delete-name:disabled:focus,
    .device-remove-name:disabled:focus {
        outline: none;
    }
/* SMARTIFY_CONFIRM_DISABLED_NAME_INPUTS_END */

/* SMARTIFY_GLOBAL_OPERATION_BUSY_BEGIN */
form[aria-busy="true"] button {
    pointer-events: none;
}

button.is-loading {
    cursor: wait;
}

    button.is-loading::after {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-inline-start: 8px;
        vertical-align: -2px;
        border: 2px solid currentColor;
        border-inline-end-color: transparent;
        border-radius: 50%;
        animation: smartify-auth-spin 0.7s linear infinite;
    }
/* SMARTIFY_GLOBAL_OPERATION_BUSY_END */