html, body {
   margin:0;
   padding:0;
   height:100%;

}

body {
}

* {
   font-family: Asap; 
   font-size: 15px; 
   color: #414042; 
}

nav a {
    font-family: Asap; 
    font-size: 17px; 
    color: #414042;
   
}

nav a:selected {
    font-family: Asap; 
    font-size: 15px; 
    color: #414042; 
}

nav .selected a {
    font-weight: bold;
}

nav .selected:after {
    content:'';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-bottom: solid 15px #009ECE;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
}

.nav-row {
    min-height: 60px;
    margin-top: 10px;
    line-height: 40px;
    vertical-align: middle;
}

.nav-pointer-row {
    height: 4px;
    background-color: #009ECE;
    line-height: 4px;

}

/*TODO: background image is stretching */
.header {
  /*  background-image: url('/images/header-background.jpg'); */
   background-image: url('/images/masthead4-1440px.jpg'); 
  /*  background-image: url('/images/masthead4-1920px.jpg'); */
   
    background-repeat: no-repeat;
    background-size: cover;
    height: 225px;
    border-bottom: 1px solid #a2a3a6;
    padding-top: 10px;
}

div.headerElements:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    
}


.header h1 {
    text-align: center;
       font-family: "Bubblegum Sans"; 
    font-size: 56px; 
    color: #ce181e; 
}

.header h3 {
       text-align: center;
      font-family: Asap; 
      font-size: 26px; 
      color: #414042;
}

.header {
    background-color: lightgrey;
    padding-bottom: 10px;
}

.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:110px;   /* Height of the footer */
   background-color: #414042;
    text-align: center;
}

.footer * {
      color: #ffffff;
}

.footer a {
    color: #ffffff;
    font-size: 15px;
    margin-left: 10px;
    margin-right: 10px;
}

.footer a:focus {
    color: #ffffff;
}

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

.footer p {
    color: #e6e7e8;
    font-size: 11px;
    margin-bottom: 1px;
}


[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

#mainBody {

    padding-top: 2em;
    padding-bottom:155px;   /* Height of the footer + bit of margin room */
    position: relative;
    background:#c7d3dd url(/images/bkg.png) no-repeat top center;
    background-size: 100%; /*stretch the image */
    min-height: 800px;
    /*background-image: url('/images/snow-falling-blue-repeating-fill.jpg');
	background-position: 0px 0px;
	background-repeat: repeat;
    
     
  
	animation: animatedBackground 60s linear infinite;
        */
}

#mainBody:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    /*background-image: url('/images/snow-falling-blue-repeating-fill.jpg'); 
    	background-position: 0px 0px;
	background-repeat: repeat;
        */
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
    animation: animatedBackground 60s linear infinite;
}

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 0 100%; }
}


#bodyContainer {
   min-height:100%;
   position:relative;
}

/* Product Carousel */
.product-carousel {
    padding: 10px;
}

.carousel-header h2 {
    font-family: 'Bubblegum Sans', cursive;
    color: #009ECE;
    text-align: center;
    margin-bottom: 20px;
}

.carousel-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.carousel-row {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.carousel-item {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
}

.carousel-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 15px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.carousel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.carousel-card.already-added {
    opacity: 0.7;
}

.carousel-image-container {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.carousel-image {
    max-height: 170px;
    max-width: 100%;
    object-fit: contain;
}

.carousel-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.carousel-title {
    font-size: 13px;
    line-height: 1.3;
    margin: 0 0 8px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.carousel-price {
    font-weight: bold;
    color: #ce181e;
    margin-bottom: 10px;
}

.carousel-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.carousel-add-btn {
    flex: 1;
    font-size: 14px;
    padding: 8px;
}

.carousel-info-btn {
    cursor: pointer;
    font-size: 22px;
    color: #5bc0de;
    padding: 4px;
}

.carousel-info-btn:hover {
    color: #31b0d5;
}

/* Nav links */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    line-height: 40px;
    padding-top: 10px;
}

.nav-links a {
    text-decoration: none;
}

.nav-links .nav-active {
    font-weight: bold;
}

.nav-links-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 5px 0;
}

/* Wishlist nav icon */
.nav-wishlist-icon {
    position: relative;
    cursor: pointer;
    font-size: 24px;
    color: #ce181e;
}

.nav-wishlist-icon:hover {
    color: #a01015;
}

.wishlist-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #009ECE;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
}

.wishlist-icon-pulse {
    animation: wishlistPulse 0.4s ease;
}

@keyframes wishlistPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Wishlist slide-out panel */
.wishlist-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
}

.wishlist-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 90vw;
    height: 100%;
    background: white;
    box-shadow: -4px 0 20px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: right 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.wishlist-panel-open {
    right: 0;
}

.wishlist-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 2px solid #009ECE;
    flex-shrink: 0;
}

.wishlist-panel-header h3 {
    margin: 0;
    color: #009ECE;
    font-family: 'Bubblegum Sans', cursive;
    font-size: 22px;
}

.wishlist-panel-header .fa-heart {
    color: #ce181e;
    margin-right: 5px;
}

.wishlist-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 5px;
}

.wishlist-panel-close:hover {
    color: #333;
}

/* Header Search */
.header-search {
    padding-top: 12px;
}

.header-search-mobile {
    padding: 5px 15px 10px;
}

.header-search-wrapper {
    position: relative;
}

.header-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.header-search-icon {
    position: absolute;
    left: 12px;
    color: #999;
    font-size: 14px;
    z-index: 1;
}

.header-search-input {
    width: 100%;
    padding: 8px 35px 8px 35px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    background: #f8f8f8;
}

.header-search-input:focus {
    border-color: #009ECE;
    background: white;
}

.header-search-input::placeholder {
    color: #aaa;
}

.header-search-clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
}

.header-search-clear:hover {
    color: #333;
}

.header-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 1000;
    margin-top: 4px;
    max-height: 400px;
    overflow-y: auto;
}

.header-search-results-header {
    padding: 8px 12px;
    font-size: 12px;
    color: #888;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-search-results-close {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
}

.header-search-result {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 10px;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.15s;
}

.header-search-result:hover {
    background: #f8f8f8;
}

.header-search-result:last-child {
    border-bottom: none;
}

.header-search-result-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.header-search-result-info {
    flex: 1;
    min-width: 0;
}

.header-search-result-title {
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-result-add {
    flex-shrink: 0;
    border-radius: 20px;
    padding: 4px 12px;
}