/* Modernized MainUi.css - ORIGINAL LAYOUT, ORANGE THEME */

/* FIXED: Only reset buttons inside catalog items, NOT globally */
.catalog-item button,
.play-toggle {
    all: unset;
    display: inline-block;
    cursor: pointer;
}

/* GLOBAL */

body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:#f5f7fa;
color:#222;
}

/* ===========================
   UPDATED NAV BAR (SoundFizz Orange)
=========================== */

nav{
background:#ff6a00;
color:#fff;
padding:16px 24px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.nav-left{
display:flex;
align-items:center;
}

.brand-title{
font-size:26px;
font-weight:800;
letter-spacing:.5px;
color:#fff;
}

.nav-buttons{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}

nav button{
background:#fff;
color:#ff6a00;
border:none;
padding:10px 18px;
border-radius:10px;
font-weight:600;
cursor:pointer;
transition:.2s;
}

nav button:hover{
background:#ffe3d1;
}

.report-btn{
background:#fff;
color:#ff6a00;
}

/* ===========================
   ORIGINAL CSS BELOW (unchanged)
=========================== */

.container{
max-width:1200px;
margin:auto;
padding:24px;
}

/* ===========================
   SEARCH BAR + FILTER BUTTON
=========================== */

.search-bar-wrapper{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}

#searchInput{
flex:1;
padding:14px 16px;
border:1px solid #d8dce2;
border-radius:12px;
font-size:17px;
background:#fff;
color:#222;
}

/* Filters button slightly smaller */
.filter-btn{
background:#ff6a00;
color:#fff;
border:none;
padding:12px 16px;
border-radius:12px;
font-weight:700;
cursor:pointer;
height:48px;
min-width:110px;
}

/* ⭐ MOBILE FIX — slim, clean, not thick */
@media(max-width:700px){

    .search-bar-wrapper{
        flex-direction:row;
        gap:8px;
    }

    #searchInput{
        flex:1;
        font-size:15px;
        height:42px;
        padding:10px 14px;
    }

    .filter-btn{
        height:42px;
        padding:8px 12px;
        font-size:15px;
        min-width:85px;
    }
}

/* DRAWER */

.drawer-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,.35);
opacity:0;
visibility:hidden;
transition:.25s;
z-index:9998;
}

.drawer-backdrop.show{
opacity:1;
visibility:visible;
}

.filter-drawer{
position:fixed;
top:0;
right:-420px;
width:390px;
max-width:95vw;
height:100vh;
background:#fff;
display:flex;
flex-direction:column;
box-shadow:-10px 0 30px rgba(0,0,0,.18);
transition:right .3s ease;
z-index:9999;
}

.filter-drawer.open{right:0;}

.drawer-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
border-bottom:1px solid #ececec;
}

.drawer-header h2{
margin:0;
font-size:24px;
}

.drawer-close{
width:38px;
height:38px;
border:none;
border-radius:10px;
background:#f2f2f2;
cursor:pointer;
font-size:18px;
}

.drawer-content{
flex:1;
overflow-y:auto;
padding:20px;
}

.filter-group{
margin-bottom:28px;
}

.filter-group h3{
margin:0 0 14px;
font-size:13px;
text-transform:uppercase;
letter-spacing:.08em;
color:#777;
}

.filter-card{
display:flex;
align-items:center;
gap:14px;
padding:14px;
border:1px solid #e4e7eb;
border-radius:14px;
margin-bottom:12px;
cursor:pointer;
transition:.2s;
}

.filter-card:hover{
background:#fff7f0;
border-color:#ff6a00;
}

.filter-card input{
width:20px;
height:20px;
accent-color:#ff6a00;
}

.filter-card span:nth-child(2){
flex:1;
font-weight:600;
}

.count-badge{
background:#ffe3d1;
color:#ff6a00;
padding:4px 10px;
border-radius:999px;
font-size:13px;
font-weight:700;
}

.drawer-footer{
display:flex;
gap:12px;
padding:20px;
border-top:1px solid #ececec;
}

.drawer-footer button{
flex:1;
padding:14px;
border:none;
border-radius:12px;
font-weight:700;
cursor:pointer;
}

.clear-btn{background:#eceff3;}
.apply-btn{background:#ff6a00;color:#fff;}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:22px;
}

.catalog-item{
background:#fff;
border:1px solid #e5e7eb;
border-radius:16px;
padding:20px;
box-shadow:0 4px 14px rgba(0,0,0,.08);
transition:.2s;
position:relative;
}

.catalog-item:hover{
transform:translateY(-4px);
box-shadow:0 8px 18px rgba(255,106,0,.25);
}

.sound-type-badge{
display:inline-block;
padding:6px 12px;
border-radius:8px;
color:#fff;
font-size:13px;
font-weight:700;
margin-bottom:10px;
background:#ff6a00;
}

.item-title{font-size:20px;font-weight:700;}
.item-meta{color:#666;margin:8px 0 14px;}

/* PLAYBACK */

.playback {
display: flex;
align-items: center;
gap: 14px;
margin-top: 16px;
}

.play-toggle {
all: unset;
width: 46px;
height: 46px;
background: #ff6a00;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 22px;
font-weight: bold;
flex-shrink: 0;
}

.play-toggle:hover {
background: #ff8c33;
transform: scale(1.05);
}

.play-toggle:active {
transform: scale(.95);
}

.play-toggle.paused::before {
content: "▶";
margin-left: 3px;
}

.play-toggle.playing::before {
content: "❚❚";
}

.progress {
flex: 1;
height: 8px;
background: #ddd;
border-radius: 999px;
overflow: hidden;
}

.progress-fill {
width: 0%;
height: 100%;
background: #ff6a00;
transition: width .1s linear;
}

.button-row{
display:flex;
gap:10px;
margin-top:16px;
flex-wrap:wrap;
}

.button-row button{
border:none;
padding:10px 16px;
border-radius:10px;
cursor:pointer;
font-weight:600;
}

.download-btn{background:#2ecc71;color:#fff;}
.delete-btn{background:#e53935;color:#fff;}

@media(max-width:700px){
.filter-drawer{
width:100%;
max-width:100%;
right:-100%;
}
}

/* ===========================
   FEED TABS — CENTERED + BIGGER
=========================== */

.feed-tabs {
display:flex;
justify-content:center;
gap:14px;
overflow-x:auto;
padding:8px 0 12px;
margin-top:10px;
margin-bottom:20px;
scrollbar-width:none;
}

.feed-tabs::-webkit-scrollbar {
display:none;
}

.feed-tab {
flex-shrink:0;
padding:14px 22px;
background:#e9eef5;
border-radius:999px;
font-weight:700;
font-size:17px;
color:#333;
border:none;
cursor:pointer;
transition:background .2s, color .2s, transform .15s;
}

.feed-tab:hover {
background:#dce3ec;
}

.feed-tab.active {
background:#ff6a00;
color:#fff;
transform:scale(1.08);
}

@media(max-width:700px){
.feed-tabs {
gap:10px;
padding-bottom:10px;
}

.feed-tab {
padding:12px 18px;
font-size:16px;
}
}

/* ===========================
   ⭐ TIKTOK-STYLE LIKE BUTTON
=========================== */

.like-wrapper {
position:absolute;
bottom:16px;
right:16px;
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
z-index:20;
}

.like-btn {
font-size:32px;
cursor:pointer;
transition:transform .15s ease;
user-select:none;
}

.like-btn.unliked {
color:#bbb;
}

.like-btn.liked {
color:#ff2d55;
}

.like-btn:hover {
transform:scale(1.15);
}

.like-btn:active {
transform:scale(0.9);
}

.like-count {
font-size:14px;
font-weight:700;
color:#444;
text-shadow:0 1px 2px rgba(0,0,0,.15);
}

/* Pulse animation when liking */
@keyframes likePulse {
0% { transform:scale(1); }
50% { transform:scale(1.35); }
100% { transform:scale(1); }
}

.like-btn.liked {
animation:likePulse .25s ease;
}

@media(max-width:700px){
.like-btn {
font-size:28px;
}

.like-count {
font-size:13px;
}
}