@font-face {
    font-family: 'Poppins-extra';
    src: url('/fonts/trueno_bold.otf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Poppins-bold';
    src: url('/fonts/trueno_bold.otf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Poppins-medium';
    src: url('/fonts/trueno_sbd.otf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Poppins-regular';
    src: url('/fonts/trueno_lt.otf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Poppins-light';
    src: url('/fonts/trueno_lt.otf') format('truetype');
    font-display: swap;
}





      :root {
            --bg-dark: #2B2A33;
            --input-bg: #444;
            --accent: #CF05FC;
        }


       body {
          font-size: clamp(14px, 1.8vw, 18px);
        }

        h1 {
          font-size: clamp(22px, 4vw, 40px);
        }

        h2 {
          font-size: clamp(20px, 3vw, 32px);
        }

        h3 {
          font-size: clamp(18px, 2.5vw, 26px);
        }

        p {
          line-height: 1.6;
        }


        /* HEADER */
        #top-header {
            width: 100%;
            font-family: Poppins-regular;
            overflow: hidden;
        }


        .header-row {
                height: 100%;
                display: flex;
                align-items: center;
                gap: .5rem;
                width: 100%;
        }


        .logo img {
            width: 40px;
            height: 40px;
            border-radius: 8px;
        }

        /* Prevent shrinking */
            .logo,
            .btn-add-station,
            {
                flex-shrink: 0;
            }



        /* ADD BUTTON */
        .btn-add {
            background: var(--accent);
            border: none;
            color: white;
            border-radius: 9999px;
            padding: .45rem 1.1rem;
        }

        /* DESKTOP NAV */
        .desktop-nav a {
            color: #ddd;
            text-decoration: none;
            margin: 0 0.8rem;
            font-size: .95rem;
        }


        .desktop-nav a:hover {
            color: white;
        }

        /* OFFCANVAS */
        .offcanvas {
            background: var(--bg-dark);
            color: white;
        }

        .offcanvas a {
            display: block;
            padding: .9rem 0;
            color: white;
            text-decoration: none;
            border-bottom: 1px solid #3a3a44;
        }

        .search-wrapper form {
            position: relative;
        }


        /* Search takes remaining space */
        .search-wrapper {
            flex: 1;
            min-width: 0;
            height: 38px;
            border-radius: 9999px;
            background: var(--input-bg);
            border: none;
            margin-left: 6px;
            color: white;
        }

        .search-wrapper input:focus {
              outline: none;
              box-shadow: none;
              border: none; /* optional */
            }

        .search-wrapper input:focus {
              outline: none !important;
              box-shadow: none !important;
            }


            /* right buttons */
        .scroll-controls {
          display: flex;
          gap: 6px;
          margin-left: auto; /* EXTRA push right */
        }

        /* buttons style */
        .scroll-btn {
          border: none;
          background: rgba(255,255,255,0.15);
          color: #fff;
          width: 28px;
          height: 28px;
          border-radius: 6px;
          cursor: pointer;
          display:flex;
          align-items:center;
          justify-content:center;
        }

    #genreGrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 15px;
    }

    .genre-card {
      background: #111;
      color: #fff;
      padding: 10px;
      font-family: Poppins-regular;
      border-radius: 10px;
      text-align: center;
      cursor: pointer;
      transition: 0.2s;
      font-size: 14px;
      border: 1px solid #ccc
    }

    .genre-card:hover {
      background: #525259;
    }

    #pagination {
      margin-top: 20px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
       align-items: center;
       justify-content: center;
    }

    #pagination button {
      min-width: 36px;
          height: 36px;
          border-radius: 8px;
          border: medium;
          cursor: pointer;
          font-size: 14px;
          color: rgb(255, 255, 255);
          background: rgba(255, 255, 255, 0.12);
          opacity: 1;
          transition: 0.2s;
    }

    #pagination .active {
      background: #525259;
      color: white;
    }



        input {
            width: 100%;
            height: 40px;
            border-radius: 9999px;
            background: var(--input-bg);
            border: none;
            color: white;
        }

        .search-icon-btn {
            position: absolute;
            right: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            font-size: 1.3rem;
            color: #bbb;
            cursor: pointer;
            padding: 0;
        }

        .search-icon-btn:hover {
            color: white;
        }


        /* Base (mobile first) */
            .btn-add-station {
                display: inline-flex;
                align-items: center;
                justify-content: center;

                background-color: #0d6efd;
                color: #fff;
                text-decoration: none;

                border-radius: 50px;
                font-family: Poppins-medium, sans-serif;
                font-size: 10px;

                padding: 4px 12px;
                min-height: 28px;
                width: auto;

                white-space: nowrap;   /* ADD THIS */
            }


            @media (min-width: 300px) {

                    .header-row{
                    gap:4px;
                }

                .logo img{
                    width:40px;
                    height:40px;
                }

                .btn-add-station{
                    font-size:9px;
                    padding:4px 8px;
                }

                .search-wrapper input{
                    font-size:11px;
                }


                  #top-header{
                        height: 44px;
                    }
            }


            @media (min-width: 320px) {


                    .header-row{
                    gap:4px;
                }

                .logo img{
                    width:40px;
                    height:40px;
                }

                .btn-add-station{
                    font-size:9px;
                    padding:4px 8px;
                }

                .search-wrapper input{
                    font-size:11px;
                }


                  #top-header{
                        height: 44px;
                    }
            }


              @media (min-width: 380px) {

                .header-row{
                    gap:4px;
                }

                .logo img{
                    width:40px;
                    height:40px;
                }

                .btn-add-station{
                    font-size:9px;
                    padding:4px 8px;
                }

                .search-wrapper input{
                    font-size:11px;
                }


                  #top-header{
                        height: 44px;
                    }
            }


            @media (max-width: 480px) {

                .header-row{
                    gap:4px;
                }

                .logo img{
                    width:40px;
                    height:40px;
                }

                .btn-add-station{
                    font-size:9px;
                    padding:4px 8px;
                }

                .search-wrapper input{
                    font-size:11px;
                }


                    #top-header{
                        height: 44px;
                    }

            }


            /* Hover */
            .btn-add-station:hover {
                background-color: #0b5ed7;
                color: #fff;
                transform: translateY(-1px);
            }

            /* Tablet */
            @media (min-width: 768px) {
                .btn-add-station {
                    font-size: 10px;
                    height: 28px;
                    padding: 4px 12px;
                }

                #top-header{
                    height: 89px;
                }
            
            }

            /* Desktop */
            @media (min-width: 992px) {
                
                .btn-add-station {
                     font-size: 10px;
                    height: 28px;
                    padding: 4px 12px;
                }


                  #top-header{
                        height: 89px;
                    }
            }

            @media (min-width: 1200px){

                    #top-header{
                        height: 89px;
                    }

            }