/* ========================================
   Sedamix iOS font + responsive hardening
   Loaded after the main theme to fix Safari/iOS font loading and mobile overflow.
   ======================================== */

@font-face {
    font-family: "Peyda";
    src: url("../assets/fonts/peyda/woff2/PeydaWeb-Regular.woff2") format("woff2"),
         url("../assets/fonts/peyda/woff/PeydaWeb-Regular.woff") format("woff"),
         url("../assets/fonts/peyda/eot/PeydaWeb-Regular.eot?#iefix") format("embedded-opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Peyda";
    src: url("../assets/fonts/peyda/woff2/PeydaWeb-Regular.woff2") format("woff2"),
         url("../assets/fonts/peyda/woff/PeydaWeb-Regular.woff") format("woff"),
         url("../assets/fonts/peyda/eot/PeydaWeb-Regular.eot?#iefix") format("embedded-opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Peyda";
    src: url("../assets/fonts/peyda/woff2/peydaWeb-light.woff2") format("woff2"),
         url("../assets/fonts/peyda/woff/peydaWeb-light.woff") format("woff"),
         url("../assets/fonts/peyda/eot/peydaWeb-light.eot?#iefix") format("embedded-opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Peyda";
    src: url("../assets/fonts/peyda/woff2/PeydaWeb-Bold.woff2") format("woff2"),
         url("../assets/fonts/peyda/eot/PeydaWeb-Bold.eot?#iefix") format("embedded-opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../assets/fonts/vazirmatn/webfonts/Vazirmatn[wght].woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --neon-blue: #E61D71;
    --neon-purple: #5c01ef;
    --neon-pink: #E73F61;
    --sedamix-page-gutter: clamp(14px, 4vw, 28px);
    --sedamix-bottom-player-safe: calc(96px + env(safe-area-inset-bottom, 0px));
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-x: clip;
    font-family: "Peyda", "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body,
button,
input,
select,
textarea,
.btn,
.dropdown-menu,
.navbar,
.offcanvas,
.modal,
.toast,
.card {
    font-family: "Peyda", "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif !important;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

iframe,
embed,
object {
    display: block;
}

pre,
code,
kbd,
samp {
    white-space: pre-wrap;
    word-break: break-word;
}

p,
li,
a,
span,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: anywhere;
}

.row {
    min-width: 0;
}

[class*="col-"] {
    min-width: 0;
}

.table-responsive,
.responsive-table,
.dashboard-table,
.transactions-table,
.purchases-table,
.orders-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

input,
select,
textarea,
.form-control,
.form-select {
    max-width: 100%;
    min-height: 44px;
}

button,
.btn,
a.btn,
.nav-link,
.dropdown-item {
    touch-action: manipulation;
}

.section-title,
.section-heading,
.title-area,
.banner-content,
.hero-content {
    max-width: 100%;
}

.swiper-slide {
    height: auto;
}

.swiper-button-next,
.swiper-button-prev,
.prev1,
.next1,
.prev2,
.next2,
.prev3,
.next3,
.prev4,
.next4,
.prev5,
.next5,
.prev6,
.next6,
.prev7,
.next7 {
    touch-action: manipulation;
}

.navbar .container,
.navbar .container.mw-1720 {
    gap: 12px;
}

.navbar-brand .logo,
.offcanvas-title .logo,
.footer-logo img {
    width: auto;
    max-width: clamp(112px, 34vw, 270px);
    height: auto;
}

.mobile-navbar-area {
    width: min(92vw, 380px) !important;
    max-width: 100vw;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-navbar-area .offcanvas-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.offcanvas-backdrop,
.modal-backdrop {
    max-width: 100vw;
}

.dropdown-menu {
    max-width: min(92vw, 360px);
}

.notification-dropdown {
    width: min(92vw, 350px) !important;
    max-height: min(70vh, 500px) !important;
    overflow-y: auto;
}

.toast-container {
    max-width: min(400px, calc(100vw - 24px)) !important;
    padding-top: env(safe-area-inset-top, 0px);
}

.toast {
    max-width: 100%;
    min-width: 0 !important;
}

.main-content,
.content-area,
.dashboard-content,
.profile-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.card,
.music-card,
.track-card,
.artist-card,
.album-card,
.playlist-card,
.stat-card,
.order-card,
.purchase-card,
.wallet-card,
.form-card {
    max-width: 100%;
    min-width: 0;
}

/* Sticky player and full-screen player */
#stickyPlayer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

#stickyPlayer .audio-track-play,
#stickyPlayer .controls {
    max-width: 100%;
}

#stickyPlayer .controls {
    flex-wrap: wrap;
    row-gap: 10px;
}


.music-modal-content,
.ad-player-ui {
    max-width: min(100%, 1200px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
}

/* Forms and upload boxes */
.form-group,
.input-group,
.upload-area,
.file-upload-area,
.file-upload-wrapper {
    max-width: 100%;
}

.input-group {
    flex-wrap: wrap;
}

.input-group > .form-control,
.input-group > .form-select {
    min-width: 0;
}

/* Prevent fixed or decorative images from causing horizontal scroll. */
[class*="shape"],
[class*="circle"],
[class*="blur"],
[class*="decor"] {
    max-width: 100vw;
}

@media (max-width: 1199.98px) {

    .navbar-option,
    .navbar-option-item {
        min-width: 0;
    }
}

@media (max-width: 991.98px) {
    :root {
        --sedamix-page-gutter: clamp(14px, 4.5vw, 22px);
        --sedamix-bottom-player-safe: calc(116px + env(safe-area-inset-bottom, 0px));
    }

    body:has(#stickyPlayer[style*="display: block"]),
    body:has(#stickyPlayer[style*="display:block"]) {
        padding-bottom: var(--sedamix-bottom-player-safe);
    }

    .navbar {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
    }

    .offcanvas-header,
    .mobile-navbar-area .offcanvas-body {
        padding-left: var(--sedamix-page-gutter) !important;
        padding-right: var(--sedamix-page-gutter) !important;
    }

    .dashboard-container {
        flex-direction: column !important;
        gap: 18px !important;
    }

    .sidebar {
        width: min(86vw, 340px) !important;
        max-width: min(86vw, 340px) !important;
    }

    .music-modal-body {
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .music-modal-left,
    .music-modal-right {
        flex: 0 0 auto;
        width: 100%;
        padding: 22px !important;
    }

    .modal-album-art {
        max-width: min(68vw, 150px) !important;
        margin-bottom: 18px !important;
    }

    .music-modal-controls {
        padding: 16px var(--sedamix-page-gutter) !important;
    }
}

@media (max-width: 767.98px) {
    :root {
        --sedamix-page-gutter: 16px;
        --sedamix-bottom-player-safe: calc(146px + env(safe-area-inset-bottom, 0px));
    }

    .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .ptb-100,
    .ptb-120,
    .ptb-150,
    .ptb-180,
    .pt-100,
    .pt-120,
    .pt-150,
    .pb-100,
    .pb-120,
    .pb-150 {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .mt-100,
    .mt-120,
    .mt-150 {
        margin-top: 48px !important;
    }

    .mb-100,
    .mb-120,
    .mb-150 {
        margin-bottom: 48px !important;
    }

    .banner-content,
    .hero-content,
    .section-title,
    .title-area {
        text-align: center;
    }

    .d-flex:not(.navbar-nav):not(.controls):not(.swiper-wrapper):not(.toast):not(.queue-item):not(.notification-item) {
        min-width: 0;
    }

    .btn-group,
    .button-group,
    .filter-buttons,
    .category-filter,
    .nav-pills {
        flex-wrap: wrap;
        gap: 8px;
    }

    .banner-img,
    .hero-img,
    .artist-img,
    .track-img,
    .album-img {
        margin-left: auto;
        margin-right: auto;
    }

    .carousel,
    .carousel-inner,
    .carousel-item {
        max-width: 100%;
    }

    #bannersCarousel .carousel-item img,
    .banner-slider .carousel-item img {
        width: 100%;
        height: auto !important;
        min-height: 140px;
        max-height: 220px !important;
        object-fit: cover;
        border-radius: 16px;
    }

    .toast-container {
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        right: 12px !important;
        left: 12px !important;
        max-width: none !important;
    }

    .notification-dropdown,
    .dropdown-menu.dropdown-menu-end {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }

    #stickyPlayer .audio-track-play.style-three {
        padding: 12px 0 !important;
    }

    #stickyPlayer h6,
    #stickyPlayer p {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #stickyPlayer .controls {
        gap: 16px !important;
        justify-content: center !important;
    }

    #stickyPlayer .controls p {
        width: 100%;
        margin: 2px 0 0 !important;
        text-align: center;
    }

    .queue-item {
        gap: 10px !important;
        padding: 10px !important;
    }

    .queue-item-img {
        width: 48px !important;
        height: 48px !important;
    }

    .queue-item-duration {
        display: none;
    }

    .progress-section {
        gap: 6px !important;
        overflow-x: visible !important;
    }

    .ad-player-ui {
        padding: 22px 16px !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --sedamix-page-gutter: 14px;
    }

    .mobile-navbar-area {
        width: 100vw !important;
    }

    .offcanvas-header {
        min-height: 66px;
    }

    .music-modal-content {
        border-radius: 18px !important;
    }

    .music-modal-header,
    .music-modal-controls {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .music-modal-left,
    .music-modal-right {
        padding: 16px 14px !important;
    }

    .modal-album-art {
        max-width: min(76vw, 120px) !important;
        border-radius: 16px !important;
    }

    .ad-header,
    .ad-actions {
        flex-direction: column;
        align-items: stretch !important;
    }

    .ad-badge,
    .ad-countdown,
    .ad-cta,
    .ad-skip-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 380px) {

    #stickyPlayer .controls {
        gap: 12px !important;
    }
}

/* RTL mobile offcanvas close button alignment */
.mobile-navbar-area .offcanvas-header {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
}

.mobile-navbar-area .offcanvas-header .offcanvas-title {
    margin: 0 !important;
    min-width: 0;
}

.mobile-navbar-area .offcanvas-header .btn-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.08) none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    flex: 0 0 auto;
}

.mobile-navbar-area .offcanvas-header .btn-close i {
    display: block;
    margin: 0 !important;
    color: #fff !important;
}

html[dir="rtl"] .mobile-navbar-area,
body.rtl .mobile-navbar-area {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .mobile-navbar-area .offcanvas-header,
body.rtl .mobile-navbar-area .offcanvas-header {
    direction: rtl;
}

html[dir="rtl"] .mobile-navbar-area .offcanvas-header .btn-close,
body.rtl .mobile-navbar-area .offcanvas-header .btn-close {
    order: 2;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}

html[dir="rtl"] .mobile-navbar-area .offcanvas-header .offcanvas-title,
body.rtl .mobile-navbar-area .offcanvas-header .offcanvas-title {
    order: 1;
}

html[dir="ltr"] .mobile-navbar-area .offcanvas-header .btn-close,
body:not(.rtl) .mobile-navbar-area .offcanvas-header .btn-close {
    margin-inline-start: auto !important;
}

@media (max-width: 575.98px) {
    .mobile-navbar-area .offcanvas-header {
        padding-top: max(14px, env(safe-area-inset-top, 0px)) !important;
    }
}

/* Android/WebView sticky player tap hardening */
#stickyPlayer,
#stickyPlayer .controls,
#stickyPlayer .controls button {
    pointer-events: auto !important;
}

#stickyPlayer .controls button {
    position: relative !important;
    z-index: 5 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

#stickyPlayer #play-pause-btn {
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 768px) {
    #stickyPlayer {
        z-index: 999998 !important;
    }

    #stickyPlayer #progress-bar,
    #stickyPlayer #volume-bar {
        z-index: 1 !important;
    }

    #stickyPlayer #play-pause-btn,
    #stickyPlayer #prev-btn,
    #stickyPlayer #next-btn,
    #stickyPlayer #shuffle-btn,
    #stickyPlayer #loop-btn,
    #stickyPlayer #mute-btn {
        z-index: 10 !important;
    }
}


/* Album/playlist detail track list responsive fix
   Prevents track titles from being squeezed into one-character lines on small Android/mobile screens. */
.album-container .tracks-list,
.playlist-container .tracks-list {
    width: 100%;
    max-width: 100%;
}

.album-container .tracks-list .track-item,
.playlist-container .tracks-list .track-item {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.album-container .tracks-list .track-item > .row,
.playlist-container .tracks-list .track-item > .row {
    display: grid !important;
    grid-template-columns: 44px 56px minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 12px;
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100%;
}

.album-container .tracks-list .track-item > .row > .col,
.album-container .tracks-list .track-item > .row > .col-auto,
.playlist-container .tracks-list .track-item > .row > .col,
.playlist-container .tracks-list .track-item > .row > .col-auto {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    flex: none !important;
}

.album-container .tracks-list .track-item h6,
.album-container .tracks-list .track-item p,
.album-container .tracks-list .track-item a,
.playlist-container .tracks-list .track-item h6,
.playlist-container .tracks-list .track-item p,
.playlist-container .tracks-list .track-item a {
    max-width: 100%;
    min-width: 0;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.album-container .tracks-list .track-item h6,
.album-container .tracks-list .track-item p,
.playlist-container .tracks-list .track-item h6,
.playlist-container .tracks-list .track-item p {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-container .tracks-list .track-item > .row > .col-auto:last-child,
.playlist-container .tracks-list .track-item > .row > .col-auto:last-child {
    min-width: max-content !important;
}

.album-container .tracks-list .track-item > .row > .col-auto:last-child .d-flex,
.playlist-container .tracks-list .track-item > .row > .col-auto:last-child .d-flex {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 10px !important;
}

.album-container .tracks-list .track-item > .row > .col-auto:last-child span,
.playlist-container .tracks-list .track-item > .row > .col-auto:last-child span {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .album-container,
    .playlist-container {
        padding-right: 10px;
        padding-left: 10px;
    }

    .album-container .card.border-0,
    .playlist-container .card.border-0 {
        padding: 14px !important;
        border-radius: 14px;
    }

    .album-container .tracks-list .track-item,
    .playlist-container .tracks-list .track-item {
        padding: 10px !important;
    }

    .album-container .tracks-list .track-item > .row,
    .playlist-container .tracks-list .track-item > .row {
        grid-template-columns: 36px 46px minmax(0, 1fr);
        gap: 8px;
    }

    .album-container .tracks-list .track-item > .row > .col-auto:first-child button,
    .playlist-container .tracks-list .track-item > .row > .col-auto:first-child button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .album-container .tracks-list .track-item > .row > .col-auto:nth-child(2) img,
    .playlist-container .tracks-list .track-item > .row > .col-auto:nth-child(2) img,
    .album-container .tracks-list .track-item > .row > .col-auto:nth-child(2) > div,
    .playlist-container .tracks-list .track-item > .row > .col-auto:nth-child(2) > div {
        width: 46px !important;
        height: 46px !important;
    }

    .album-container .tracks-list .track-item > .row > .col-auto:last-child,
    .playlist-container .tracks-list .track-item > .row > .col-auto:last-child {
        grid-column: 3 / -1;
        min-width: 0 !important;
        margin-top: -2px;
    }

    .album-container .tracks-list .track-item > .row > .col-auto:last-child .d-flex,
    .playlist-container .tracks-list .track-item > .row > .col-auto:last-child .d-flex {
        flex-wrap: wrap;
        gap: 6px 10px !important;
        line-height: 1.2;
        white-space: normal;
    }

    .album-container .tracks-list .track-item > .row > .col-auto:last-child span,
    .playlist-container .tracks-list .track-item > .row > .col-auto:last-child span {
        font-size: 11px;
    }
}

@media (max-width: 420px) {
    .album-container .tracks-list .track-item > .row > .col-auto:last-child span:first-child,
    .album-container .tracks-list .track-item > .row > .col-auto:last-child span:nth-child(2),
    .playlist-container .tracks-list .track-item > .row > .col-auto:last-child span:first-child,
    .playlist-container .tracks-list .track-item > .row > .col-auto:last-child span:nth-child(2) {
        display: none;
    }
}
