/*inc_header custom styling*/

body {
    max-width: 100vw;
    font-size: .875rem!important;
    font-family: Euclid,sans-serif!important;
    font-weight: 400!important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


#top-title #YouAreHere {
    padding-top: 3vh;
    padding-left: 5vw;
}
#YouAreHere a {
    color: #306989c7;
}

/*****first row of nav bar containing Harmony Logo and site categories *****/

.navbar-color-new {
    background-color: #EDF0F0;
    /*border-top: 2.5vh solid #35596d;*/
    /*border-bottom: 3vh solid #46758f;*/
    border-bottom: 3vh solid #4393D0;
    border-left: none; 
    border-right: none; 
    
}

.harmony-nav-container {
    /*border: 2px solid yellow;*/
    min-width: 90vw;
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin: auto;
}


.header-logo-image {
    max-height: 20vh;
    min-height: 20vh;
}

.navbar-toggler {
    background-color: black; /* Button background color */
    border: none; /* Remove any border */
    width: 40px; /* Width of the button */
    height: 40px; /* Height of the button, making it square */
    display: flex;
    align-items: center; /* Center lines vertically */
    justify-content: center; /* Center lines horizontally */
}

.navbar-toggler-icon {
    position: relative; /* Needed to position the pseudo-elements */
    width: 30px; /* Width of the icon */
    height: 2px; /* Height of the middle line */
    background-color: white; /* Color of the middle line */
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px; /* Height of the top and bottom lines */
    background-color: white; /* Color of the top and bottom lines */
}

.navbar-toggler-icon::before {
    top: -8px; /* Position above the middle line */
}

.navbar-toggler-icon::after {
    bottom: -8px; /* Position below the middle line */
}

#navbarNavDropdown {
  
    width: 80vw !important;
}

#navbarNavDropdown li {
    padding-right: 1vw;
}

#navbarNavDropdown a {
    font-size: 1.2rem;
    font-weight: 200;
}

.harmony-right-side-nav {
    width: 25%;
    padding: 2%;
}
@media (max-width: 991px) {
  .harmony-right-side-nav {
    width: 50%; /* adjusted width for smaller screens when this will be stacked, so can take up more room */
    padding-left: 0;
  }
}


.harmony-left-side-nav {
    /*width: 75%;*/
}



/*****second row of nav bar containing search input and button*****/

.harmony-navbar-second-row {
    width: 100%;
    /*background-color: #d7e4ec;*/
    background-color: #35596d;
}
.harmony-navbar-second-row form {
    max-width: 80vw !important;
    margin: auto;
}

.form-control, .btn {
    padding: 5px 10px; 
    font-size: 1rem; 
    /*max-height: 27px; */
}
#SearchForm .form-control, #SearchForm .btn {
    margin-top: 0.5rem; /* Smaller top margin */
    margin-bottom: 0.5rem; /* Smaller bottom margin */
    background-color: #adcee1;
}

#SearchForm .form-control {
    width: 60vw;
}
#SearchFrom .btn {
    width: 20vw;
}

/*****music store announcment/link section*****/

.harmony-announcement-bar {
  /*background: linear-gradient(90deg, #35596d, #4b738f);*/
  background: #ff1b1b;
  padding: 10px;
  overflow: hidden;
  text-align: center;
  position: relative;
}

.announcement-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50vw; /* limits the scrolling area width */
  margin: 0 auto; /* centes the scrolling container */
  white-space: nowrap;
  /*mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);*/
  /*-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); */
}




/*animation on the homepage */
.homepage .announcement-text {
  /*color: #ff4500;*/
  color: white;
  font-weight: bold;
  font-size: 1.3rem;
  animation: slideText 15s linear infinite;
}

/*static text for other pages */
:not(.homepage) .announcement-text {
  /*color: #ff4500;*/
  color: white;
  font-weight: bold;
  font-size: 1.3rem;
}

/*slide text animation */
@keyframes slideText {
  0% {
    transform: translateX(20vw); /* start from just outside 20vw to the right */
  }
  100% {
    transform: translateX(-100%); 
  }
}

/*hover effects and link style */
.announcement-link {
  text-decoration: none;
}

.announcement-text {
  /*color: #ff4500;*/
  /*font-weight: bold;*/
  /*font-size: 1.2rem;*/
  transition: color 0.3s ease;
}

.announcement-link:hover {
    text-decoration: none;
}
/*.announcement-link:hover .announcement-text {*/
/*  color: #ff7567; */
/*}*/
.harmony-announcement-bar:hover {
  /*background: linear-gradient(90deg, #466d82, #5b86a5);*/ /* lighter blue gradient on hover */
  background: #ff1b1bde;
}





/*****Music Store styling*****/



.harmony-store-categories-links {
    text-align: center;
    width: 80vw;
    margin: auto;
    margin-top: 5vw;
}
.harmony-store-categories-links p {
    font-weight: bold;
}



/* for the filter menu and items container */
.store-filter-and-items-wrapper {
    display: flex;
    flex-direction: row; /* keeps filter and items side by side */
    max-width: 80%;
    margin: 0 auto; 
    margin-bottom: 7vh;
    margin-top: 7vh;
    padding: 0 10px; 
    /*border: 3px solid black;*/
}

/* for the filter menu/form container */
.filter-menu-container{
    flex: 0 0 25%; /* 25% of the width */
    /*border: 1px solid red;*/
    padding: 10px;
    
}


.store-products-container{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 1vw;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
    /*border: 5px solid red;*/

}


.product-card-outer-container {
    border: 1px solid;
    display: flex;
    align-items: stretch;
    margin-bottom: 4vh; 
    padding-left: 2vw; 
    padding-right: 2vw; 
    padding-bottom: 2vh;
    padding-top: 2vh;
    border: 1px solid #ccc; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  
    width: 100%;
    /*border: 3px solid purple;*/
  
}

.product-thumbnail-image-wrapper {
    width: 25%; 
    padding: 0;
    margin-right: 1%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 2px solid green;*/
}
.product-thumbnail-image-wrapper img {
    width: 100%; 
    height: auto;
   
}

.product-info-wrapper {
    width: 74%; 
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
    /*border: 2px solid green;*/
}

.product-info-body {
    width: 100%;
    /*border: 2px solid blue;*/
    padding-left: 0.5vw;
    padding-top: 1vh;
    padding-right: 0;
}

.store-product-description {
    margin-bottom: 0;
    /*border: 1px solid yellow;*/
    font-size: 0.7rem;
}

.store-product-title {
    font-family: 'Fugaz One', sans-serif;
    font-weight: bold;
    font-size: 0.85rem;
    width: 100%;
}
.store-product-title a {
    color: black;
}


.custom-more-info{
    box-sizing: border-box;
    display: block;
    font-size: 0.75rem;
    width: 33%;
    margin: auto;
    text-align: center;
    margin-top: 1vh;
}

.product-price {
    margin-top: auto;
    /*border: 2px solid blue;*/
    display: flex;
    justify-content: flex-end; /* aligns items to the bottom inside the product-price */
    box-sizing: border-box;
    width: 100%;
    float: right;
}

.product-price p{
    /*border: 1px solid black;*/
    font-size: 0.65rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    align-self: flex-end; /* Aligns the p element to the bottom */
    box-sizing: border-box;

}

/*styling for the filter selection form*/
.filter-products-form {
    display: flex;
    flex-direction: column;
    background-color: #f9f9f9;
    border: 0.5px solid #ccc;
    padding-top: 5vh;
    padding-bottom: 5vh;
    /*border: 4px solid green;*/
}

.filter-products-form h5{
    margin-top: 0;
    margin-bottom: 5vh;
    font-size: 0.8rem;
    text-align: center;
    font-weight: bold;
}

/*styling for filter menu for category pages with products which are under the parent category and other child categories: ex:'sheet music' page (has products under 'sheet music' that are also under 'piano' or 'string'*/
/*this filter menu shows child categories and also other product properties user can filter by, such as publisher or level*/
/*.store-child-categories-and-filters-container {*/
/*    width: 80%;*/
/*    margin: auto;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    background-color: #f9f9f9;*/
/*    border: 0.5px solid #ccc;*/
/*    padding-top: 5vh;*/
/*    padding-bottom: 5vh;*/
/*    border: 4px solid purple;*/

/*        background-color: #f9f9f9;*/
/*        padding: 10px;*/
/*        border: none;*/
/*        border-radius: 3px;*/
/*        margin-top: 2vh;*/
/*        border: 2px solid yellow !important;*/
/*}*/
/*.store-child-categories-and-filters-container h5 {*/
/*    margin-top: 0;*/
/*    margin-bottom: 5vh;*/
/*    font-size: 0.8rem;*/
/*    text-align: center;*/
/*    font-weight: bold;*/
/*}*/
/*.store-child-categories ul {*/
/*    display: flex;*/
/*    justify-content: center; */
/*    align-items: center; */
/*    padding: 0;*/
/*    margin: 0;*/
/*    width: 50%;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*}*/
/*.store-child-categories li {*/
/*    margin: 0 5vw; */
/*}*/
/*make the links to the child categories appear as buttons*/
/*.store-child-categories a{*/
/*    display: inline-block;*/
/*    align-self: center;*/
/*    background-color: #46758f; */
/*    color: white; */
/*    border-radius: 3px; */
/*    cursor: pointer; */
/*    text-align: center; */
/*    font-size: 0.9rem;*/
/*    padding: 0.5vh 4vw; */
/*    text-decoration: none;*/
/*}*/

.filter-products-form-group {
    display: flex;
    flex-direction: column;
  
}

.filter-products-form-group label {
    font-weight: bold;
    font-size: 0.7rem;
    width: 80%;
    margin: auto;
}

.filter-products-form-group select {
    width: 80%;
    align-self: center;

}

.filter-products-form-button {
    width: 80%;
    align-self: center;
    text-align: center;
    background-color: #46758f;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.filter-products-form-button:hover {
    background-color: #35596d;
}

.clear-all-filters-button {
    background-color: #5999bd !important;
}



/* media query to hide modified-filter-menu-container on larger screens wider than 927px*/
@media (min-width: 927px) {
    .modified-filter-menu-container {
        display: none;
    }
}

/*adjust styling of the modified filter form, which we switch to on small screens*/
@media (max-width: 926px) {
    /*for the modified filter menu/form container on small screens */
    .modified-filter-menu-container {
        width: 100%;
        text-align: center;
        margin-top: 3vh;
        margin-bottom: -5vh;
    }
    /*styling for the modified(collapsible) filter selection form on small screens */
    .filter-toggle-button {
        background-color: #46758f;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        cursor: pointer;
        width: auto;
        font-size: 0.9em;
        border-radius: 3px;
        margin-left: 25vw;
        margin-right: 25vw;
    }
    .filter-form-collapsed {
        display: none;
        width: 90%;
        margin: auto;
        /*background-color: #f9f9f9;*/
        padding: 10px;
        border: none;
        border-radius: 3px;
        margin-top: 2vh;
    }
    
    /*adjust styling of the filter menu form when it switches to the small screen version*/
    .filter-products-form {
        display: flex;
        flex-direction: row;
        background-color: #f9f9f9;
        /*background-color: white;*/
        border: 0.5px solid #ccc;
        padding-top: 5vh;
        padding-bottom: 5vh;
        padding-left: 6vw;
        padding-right: 6vw;
        flex-wrap: wrap;
        margin-top: 2vh;
        margin-bottom: 5vh;
    }

    .filter-products-form h5 {
        width: 100%;
        margin-top: 0;
        margin-bottom: 2vh;
        font-size: 0.95rem;
        text-align: center;
        font-weight: bold;
    }

    .filter-products-form-group {
        width: 33.3%;
        display: flex;
        flex-direction: row;
        flex-direction: column;
    }
    
    .filter-products-form-group label {
        font-weight: bold;
        font-size: 0.9rem;
        width: 90%;
        text-align: left;
    }
    
    .filter-products-form-group select {
        width: 90%;
        font-size: 1.1rem;
    }
    
    
    .filter-products-form-button {
        width: 30%;
        text-align: center;
        background-color: #46758f;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        margin-top: 2vh;
        margin-left: 35%;
        margin-right: 35%;
    }
}

/* media query to hide filter-menu-container on small screens of width below 926px */
@media (max-width: 926px) {
    .filter-menu-container {
        display: none;
    }
}
/* media query to increase the width of the thumbnail image + product info on small screens */
@media (max-width: 780px) {
    .store-filter-and-items-wrapper {
        max-width: 95%;
    }
}
/* media query to stack product-thumbnail-image-wrapper and product-info-wrapper on small screens */
@media (max-width: 670px) {
    .product-card-outer-container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
    }
    .product-thumbnail-image-wrapper, .product-info-wrapper {
        width: 100%; /* Make each div take full width */
        margin-right: 0; /* Remove margin */
    }
}


/*styling for child category links (example: sheet music page has 'piano', 'guiter' as links at the top of the page)*/
.childCategoryLinksTable {
    width: 100vw;
    text-align: center;
    min-height: 8vh;
    border-top: 0.5px solid #FFCD90;
    border-bottom: 0.5px solid #FFCD90;
    background-color:#f4f2f2;
   
}

.childCategoryLinksTable td {
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
}
.childCategoryLinksTable a {
    display: inline-block;
    align-self: center;
    color: #46758f; 
    border-radius: 3px; 
    cursor: pointer; 
    text-align: center; 
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    max-height: 5vh;
}


/*styling for individual product page*/
.individual-product-page-wrapper {
   
}

.individual-product-image {
    min-width: 20vw;
    padding: 0.5%;
    max-width: 100%; /* prevents image overflow */
    height: auto; /* maintains aspect ratio */
}

/*small screens (mobile devices) */
@media screen and (max-width: 767px) {
    .individual-product-image {
        min-width: 40vw; /* larger width on mobile */
    }
}

.individual-product-page-product-info {
    width: 95%;
    margin: auto;
    
    /*text-align: left;*/
}

.individual-product-page-product-info h1{
    font-size: 1rem !important;
    margin-bottom: 0;
}
.individual-product-page-product-info p {
    font-size: .8rem;
    margin-bottom: 5vh;
}
.table-of-product-attributes-for-individual-product table {
    width: 90%;
}
.table-of-product-attributes-for-individual-product td {
    /*border: 2px solid red;*/
    width: 20%;
    font-size: .65rem;
}



.table-of-product-attributes-for-individual-product a {
    padding: 0;
    margin-left: 2vw;
    font-size: .70rem;
    width: 100%;
}


.individual-product-page-wrapper .col-md-6 img {
    width: 60%;
    height: auto;
    margin-top: 2vh;
    margin-bottom:2vh;
    margin-left: 20%;
}

.individual-product-full-description {
    font-size: .8rem;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 7vh;
}



.go-back-link-container {
    margin: auto;
    margin-top: 7vh;
    display: flex;
    justify-content: center;
} 


/*Product results styling (when in a category page wth products to display) */
.page-numbers-of-products-at-the-top {
    font-size: 0.8rem;
    width: 100%;
    text-align: center;
    padding-bottom: 2vh;
}
.page-numbers-of-products-at-the-top .page-numbers-menu a {
    color: #35596d;
}


/**** checkout/payment.php styling ****/

#PageBody > div.ad-intro > div > div.col-sm-6.text-center.credit-card-checkout-table-custom > form > b {
    font-size: 1.2rem;
    display: block;
}
#PageBody > div.ad-intro > div > div:nth-child(5) > form > b {
    font-size: 1.2rem;
    display: block;
}

.credit-card-checkout-table-custom select, input{
    /*width: 98%;*/
    margin-left: 0;
    text-align: left;
    display: block;
    margin-bottom: 0.5rem;
    
}

.btn:disabled {
    opacity: 0.3;
}


.schedule-page-card {
    flex: 1 1 calc(50% - 1rem);
    background-color: #f8f9fa;
    /*background-color: transparent;*/
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    transition: background-color 0.2s;
}

.schedule-page-card .card-top {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.schedule-page-card .card-top img {
    max-width: 100%;
    height: 25vh;
    display: block;
}

.schedule-page-card .card-bottom {
    padding: 1rem;
    width: 100%;
    text-align: center;
    color: #ff1b1b;
}

.schedule-page-card .card-bottom strong {
    font-family: 'Fugaz One', sans-serif;
    font-size: 1.5rem;
}

.schedule-page-card:hover {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

@media (max-width: 850px) {
    .schedule-page-card {
        flex: 1 1 100%; /* Stacks cards */
        margin-bottom: 1rem;
    }
    
    .container {
        max-width: 100vw!important;
    }
}