/* Store theme variables — overridden at runtime by the per-store <style> block in _Layout.cshtml */
:root {

    /* Applied to header */
    --store-header-bg:      #ededed;
    --store-header-text:    #212529;

    /* Applied to content region buttons */
    --store-button-bg:     #6c757d;
    --store-button-text:   #ffffff; 

    /* Applied to fixed-bottom navigation bars */
    --store-footer-bg:   #ededed;
    --store-footer-text: #212529;
}

.store-header {
    background-color: var(--store-header-bg);
    color: var(--store-header-text);
}

.logo-wrapper {
    max-width: 300px;
}

.logo-wrapper img {
    max-height: 50px;
}

/* start login card top icon */
.store-login-badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #333333;
    border: 1px solid #888888;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -36px;  
    position: relative;
    z-index: 2;
}

.store-login-badge svg {
    width: 36px;
    height: 36px;
    color: #888888; /* fill="currentColor" on the svg picks this up */
}
/* end login card top icon */

/* start login bg */
.store-login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: #121212;
    background-repeat: repeat;
    background-position: center;
    background-size: 1200px 900px;
} 

.card.shadow.bg-transparent {
    border:1px solid;
    border-color: color-mix(in srgb, var(--store-header-bg) 80%, white);

}
/* end login bg */

.store-button-bg {
    /* Base State Styles */
    --bs-btn-bg: var(--store-button-bg);
    --bs-btn-border-color: var(--store-button-bg);
    --bs-btn-color: var(--store-button-text);

    /* Apply directly too, so non-.btn elements (e.g. badges) are styled as well */
    background-color: var(--store-button-bg);
    border-color: var(--store-button-bg);
    color: var(--store-button-text);
}

/* Interaction States */
.store-button-bg:hover,
.store-button-bg:focus,
.store-button-bg:active {
    /* Keep the same base colors on hover... */
    --bs-btn-hover-bg: var(--store-button-bg);
    --bs-btn-hover-border-color: var(--store-button-bg);
    --bs-btn-hover-color: var(--store-button-text);

    /* ...so that your filter handles the visual shift exclusively here */
    filter: brightness(0.9);
}

.store-footer-bg { background-color: var(--store-footer-bg)!important; color: var(--store-footer-text)!important; }
.store-footer-text { color: var(--store-footer-text)!important; }
.tag-checkout-button.store-footer-text  {background-color: #0000001a; border: 1px solid color-mix(in srgb, var(--store-footer-text) 50%, transparent);}
.tag-checkout-button.store-footer-text:hover  {background-color: #0000000a;}

input[type="hidden"] {
    display: none !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


a {
    color: #6c757d;
    text-decoration: underline;
}

a:hover {
    color: #6c757d;
    text-decoration: none;
}

/* Address autocomplete suggestions */
.autocomplete-suggestions {
  position: absolute;
  z-index: 1050;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.autocomplete-suggestions .autocomplete-item {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.autocomplete-suggestions .autocomplete-item:hover {
  background-color: #e9ecef;
}


@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-animate {
    animation: fadeSlideUp 0.4s ease forwards;
    opacity: 0;
}

@media (max-width: 767.98px) {
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@media (max-width: 575.98px) {

    .tag-footer-nav .fs-4 {
        font-size: 18px!important;
    }
    .tag-footer-nav .btn-lg {
        padding:.5rem;
    }

}