@charset "UTF-8";

/*
    Color scheme for this website:
    #ffcc99 - peach orange - navbar background 
	#7f0000 - deep red - button, border, header
	#000000 - text
	#ffffff - background, text 
	#F5F5F5 - whitesmoke - song heading 
	
  */

body {
    font-family: Lato, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
}

* {
    box-sizing: border-box;
}

.clear {
    clear: both;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}

.rounded-top-thumbs {
    border-radius: 10px 10px 0 0;
}

.main-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}




.navbar {
    height: 45px;
    width: 100%;
    background-color: #ffcc99;
    display: block;
    top: 0;
    box-sizing: border-box;
    z-index: 1000;
    overflow: hidden;
    padding: 0 0 0 6px ;
}


#nav {
    height: 45px;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

#nav li, #nav li a {
    height: 45px;
    display: block;
}

#nav li {
    float: left;
    list-style: none;
    text-indent: -9999em;
}




 

#nav-01 { background:url("/images/hgm_mobile.png") -6px 0px no-repeat;
    margin: 0; 
    width: 188px; 
    height: 45px;
}

#nav-02 { background:url("/images/hgm_mobile.png") -198px 0px no-repeat;
    margin: 0; 
    width: 132px; 
    height: 45px;
}



#nav-03 { background:url("/images/hgm_mobile.png") -326px 0px no-repeat;
    margin: 0; 
    width: 132px; 
    height: 45px;
}

#nav-04 { background:url("/images/hgm_mobile.png") -454px 0px no-repeat;
    margin: 0; 
    width: 132px; 
    height: 45px;
}

#nav-05 { background:url("/images/hgm_mobile.png") -582px 0px no-repeat;
    margin: 0; 
    width: 120px; 
    height: 45px;
}


.search-container {
    padding: 10px;
    background-color: #eeeeee;
    border-bottom: 1px solid #999999;
}

.search-form {
    display: flex;
    gap: 4px;
}

.search-input {
    flex: 1 1 100px;
    min-width: 120px ;
    padding: 6px;
    border: 1px solid #999999;
    border-radius: 4px;
    font-size: 16px;
}

.search-button {
    padding: 6px;
    flex: 0 0 100px;
    background-color: #7f0000;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.search-button:hover {
    background-color: #990000;
}


/* * BOX COMMON STYLES */



.main_box{
    border: 2px solid #7f0000;
    margin: 0px 4px;
    padding: 4px;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    }


.box_header {

    background-color: #7f0000;
	color:#ffffff;
    margin: 10px 4px 0 4px;
    padding: 4px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	border-radius:8px 8px 0 0 ;
}


.box_footer {
	width:100%;
	margin: 0;
	padding: 4px;
	border: 1px solid #cccccc;
	border-width: 1px 0 0 0;
	background-color:#eeeeee;
	text-align:left ;
	font-size:12px;
	color:#000000;
	float:left;


    
    
}

.box_footer a{
	color:#000000;
	text-decoration: none;
}

.box_footer a:hover {
    color: #7f0000;
    text-decoration: underline;
}



/* * BOX COMMON STYLES */
.gallery-box,
.hgm-box,
.hgm-lyrics-box,
.hgm-text-box,
.hgm-text-box-2,
.year-box,
.alphabet-box,
.advance-search-box,
.song-index-box,
.playlist-box,
.main-footer {
    border: 1px solid #7f0000;
    margin: 0 4px;
    padding: 0;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
}

.gallery-box h2,
.year-box h2,
.alphabet-box h2,
.advance-search-box h2,
.song-index-box h2,
.playlist-box h2,
.main-footer h2, 
.main_box h2{
    background-color: #7f0000;
    color: white;
    margin: 0;
    padding: 4px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.hgm-lyrics-box {
    padding: 4px;
    text-align: center;
    align-items: center;
    justify-content: center;

}

.lyrics_png {
    display: block;
    max-width: 380px ;
    margin-left: auto;
    margin-right: auto;
    }

.hgm-text-box-2 {
    text-align: left;
    padding: 4px;
}



.hgm-text-box {
    text-align: left;
	font-size: 13px; 
}


/* --- Footer Styles --- */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
    list-style: none;
    margin: 0;
}

.footer-links li {
    padding: 5px 10px;
    white-space: nowrap;
}

.footer-links a {
    color: #7f0000;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #cc0000;
    text-decoration: underline;
}

.yt-comment {
    padding:5px;
    word-wrap : break-word;
    overflow-wrap: break-word;
    
}

.fbuc {
    font-weight: bold;
    text-decoration: underline;
    }
.fic {
    font-style:italic;     
    font-size: 11px;
    }

.fb {font-weight: bold}
.fi {font-style:italic}
.fu {text-decoration: underline}


/* * PLAYLIST BOX SPECIFIC STYLES */
/* When the playlist box is placed inside the song index content area, adjust its margins */
.song-index-content .playlist-box {
    margin: 0 0 15px 0;
    /* Remove side margins, use standard card spacing below */
}

.playlist-content {
    /* Padding matches the .song-index-content padding to align the inner video container */
    padding: 0px;
    text-align: center;
}

.video-container {
    position: relative;
    width: 100%;
    /* 16:9 Aspect Ratio */
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* * SONG INDEX SPECIFIC STYLES (List View) */
.song-index-content {
    padding: 4px;
}

.song-card {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background-color: #eeeeee;
}

/* CONTAINER FOR THUMBNAIL AND HEADING */
.song-card-heading-container {
    display: flex;
    align-items: flex-start;
    background-color: #f5f5f5;
    gap: 10px;
    margin-bottom: 2px;
}

/* THUMBNAIL STYLES (Width now exactly 105px to match max label width) */
.song-thumb {
    width: 105px;
    height: 63px;
    flex-shrink: 0;
    background-color: #f5f5f5;
    border: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #555;
    overflow: hidden;
}

.song-card-header {
    flex-grow: 1;
    font-size: 14px;
    background-color: #f5f5f5;
    font-weight: bold;
    color: #7f0000;
    line-height: 1.2;
    min-width: 0;
}

.song-card-header a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.song-card-header a:hover {
    color: #990000;
    text-decoration: underline;
}

.song-card-details {
    font-size: 14px;
    line-height: 1.4;
    display: grid;
    /* Label column size fixed to 100px. Value column: rest of space (1fr) */
    grid-template-columns: 105px 1fr;
    /* REMOVED HORIZONTAL GAP (now 0px) */
    gap: 0px 0px;
}

/* 🎨 LABEL STYLES: DEFAULT (EVEN) ROW STYLES */
.song-card-label {
    font-weight: bold;
    color: #808080;
    /* Background for EVEN rows (Rows 2, 4, 10, etc.) */
    background-color: #dcdcdc;
    /* Padding on the right to separate label text from value text */
    padding: 2px 3px;
    margin-left: 0;
    box-sizing: border-box;
}

/* 🎨 VALUE STYLES: DEFAULT (EVEN) ROW STYLES */
.song-card-value {
    color: #303030;
    /* Background for EVEN rows (Rows 2, 4, 10, etc.) */
    background-color: #f5f5f5;
    /* Added 10px of left padding for separation from label background */
    /* Added 5px right padding for internal spacing */
    padding: 2px 3px 2px 3px;
    box-sizing: border-box;
}


.song-card-value a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.song-card-value a:hover {
    color: #990000;
    text-decoration: underline;
}



/* 🦓 ZEBRA STRIPING: Odd Rows (Rows 1, 3, 5, etc.) */

/* Targets the 1st, 5th, 9th... elements (Odd Rows - Label Side) */
.song-card-details .song-card-label:nth-child(4n - 3) {
    /* Darker background for the label in the odd row to maintain contrast */
    background-color: #d3d3d3;
}

/* Targets the 2nd, 6th, 10th... elements (Odd Rows - Value Side) */
.song-card-details .song-card-value:nth-child(4n - 2) {
    /* Lighter background for the value in the odd row (creating the desired difference) */
    background-color: #eeeeee;
}

/* * ADVANCED SEARCH SPECIFIC STYLES */
        .advance-search-content {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            padding: 15px;
        }
        
        .search-form-advanced {
            flex: 1 1 300px; 
            display: flex;
            flex-direction: column;
            align-items: center; 
            gap: 8px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        
        /* FIX FOR IOS/CHROME HEIGHT AND COLOR */
        .search-field-group input[type="text"],
        .search-field-group select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
            min-width: 100px;
            
            /* ADDED: Ensure text is dark and not the native blue color */
            color: #333; 

            /* ADDED: Reset the native iOS/Safari styling to enforce CSS height/padding */
            -webkit-appearance: none; 
            appearance: none; 
            
            /* ADDED: Force minimum height on select for alignment */
            min-height: 34px;
        }
        
        /* Added custom background image for the select arrow since native one is removed */
        .search-field-group select {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%237f0000" d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 8px center;
            padding-right: 30px; /* Make space for the custom arrow */
        }
        /* END FIX FOR IOS/CHROME */

        .search-field-group input[type="text"] {
            flex-grow: 1; 
            flex-basis: 65%; 
            min-width: 150px;
        }
        
        .search-field-group select {
            flex-shrink: 0;
            flex-basis: 30%; 
            max-width: 150px;
            background-color: white;
        }

        .search-form-advanced label {
            font-weight: bold;
            color: #7f0000;
            font-size: 14px;
            margin-bottom: -4px;
        }

        .search-field-group {
            display: flex;
            flex-wrap: wrap; 
            gap: 5px;
            width: 100%; 
            justify-content: space-between; 
            align-items: center; 
        }

        @media (max-width: 400px) {
            .search-field-group input[type="text"],
            .search-field-group select {
                flex-basis: 100%; 
                max-width: 100%;
                margin: 0; 
            }
        }
        
        .search-form-advanced button {
            padding: 8px 15px; 
            max-width: 150px; 
            background-color: #7f0000;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px; 
            font-weight: bold;
            transition: background-color 0.2s;
        }
        .search-form-advanced button:hover {
            background-color: #990000;
        }


.pagination1 {
    margin: 10px 5px 0 5px;
    float: left;
}

.pagination2 {
    margin: 10px 5px 0 5px;
    float: right;
}


.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 0;
    border-radius: 4px;
}

.pagination>li {
    display: inline;
}

.pagination>li>a,
.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 6px;
    font-size: 16px;

    margin-left: -1px;
    height: 32px;
    min-width: 32px;
    color: #7f0000;
    text-decoration: none;
    text-align: center;
    background-color: #fff;
    border: 1px solid #7f0000;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    z-index: 2;
    color: #23527c;
    background-color: #eee;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #7f0000;
}

.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
}




/* --- Other Boxes (Year, Alpha) --- */
.year-links-grid,
.hgm-links-grid,
.alphabet-links-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 5px;
    gap: 5px;
    box-sizing: border-box;
}


.hgm-link, 
.year-link {
    height: 34px;
    min-width: 34px;
    flex-shrink: 0;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}



.hgm-link:hover,
.hgm-link:focus,
.year-link:hover,
.year-link:focus {
    background-color: #7f0000;
    color: white;
    border-color: #7f0000;
    }


/* --- Content & Footer Styles (Unchanged) --- */
.thumb-grid {
    display: grid;
    padding: 6px;
    gap: 6px;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}



.thumb-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #7f0000;
    padding: 4px;
    border-radius: 8px;
    background-color: #fff;
    align-items: center;
    min-width: 0;
}

.thumb-image {
    width: 100%;
    max-width: 160px;
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    margin: 0;
}

.thumb-image-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.thumb-caption {
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    color: #000;
    padding: 6px 0 2px 0;
    line-height: 14px;
    display: block;
    height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.thumb-item a {
    text-decoration: none;
    color: #000000;
}

.thumb-item a:hover {
    text-decoration: underline;
    color: #7f0000;
}



.starr {
    background: url("/images/hgm_icons.png") -96px -16px;
    float: left;
    width: 16px;
    height: 16px;
    margin: 2px;
    padding: 0;
}

.yt1 {
    background: url("/images/hgm_icons.png") -64px 0;
    float: left;
    width: 16px;
    height: 16px;
    margin: 2px;
    padding: 0;
}

.yt2 {
    background: url("/images/hgm_icons.png") -80px 0;
    float: left;
    width: 16px;
    height: 16px;
    margin: 2px;
    padding: 0;
}


.yes {
    background: url("/images/hgm_icons.png") -80px -16px;
    float: left;
    width: 16px;
    height: 16px;
    margin: 2px;
    padding: 0;
}

.no {
    background: url("/images/hgm_icons.png") -64px -16px;
    float: left;
    width: 16px;
    height: 16px;
    margin: 2px;
    padding: 0;
}

.hindi {
    background: url("/images/hgm_icons.png") -96px 0px;
    float: left;
    width: 16px;
    height: 16px;
    margin: 2px;
    padding: 0;
}


.starrate {
    font-weight: normal;
    font-size: 12px;
    color: #303030;
    text-decoration: none;
    height: 16px;
    display: block;
    margin-top: 4px;
}


.content {
    padding: 0;
    line-height: 1.6;
}

h1 {
    color: #7f0000;
    margin-top: 0;
    padding-left: 20px;
}

.content>p {
    padding-left: 20px;
}


lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 720px;
}

/* gradient */
lite-youtube::before {
    content: attr(data-title);
    display: block;
    position: absolute;
    top: 0;
    /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
    background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
    height: 99px;
    width: 100%;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: hsl(0deg 0% 93.33%);
    text-shadow: 0 0 2px rgba(0,0,0,.5);
    font-size: 18px;
    padding: 25px 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

lite-youtube:hover::before {
    color: white;
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    display: block;
    /* Make the button element cover the whole area for a large hover/click target… */
    width: 100%;
    height: 100%;
    /* …but visually it's still the same size */
    background: no-repeat center/68px 48px;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position: absolute;
    cursor: pointer;
    z-index: 1;
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: 0;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }








@media (max-width: 400px) {

    .search-field-group input[type="text"],
    .search-field-group select {
        flex-basis: 100%;
        max-width: 100%;
        margin: 0;
    }
}

@media (min-width: 440px) {
    .thumb-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .nav-links2 li, .nav-links2 a {
    display: block;
    }
    
}

@media (min-width: 600px) {
    .thumb-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .nav-links li,
.nav-links2 li {
    margin-right: 20px;
}
    
.nav-links a, 
.nav-links2 a {
    padding: 6px 12px;
}    
    
    
}