/* Banner & Tabs */
/* Overrides style.css and depends on cnd.css. */

/* Make the top header dark and use the new font */
#bannerWrapper {
    font-family: var(--cnd-font-sans2);
    font-weight: var(--cnd-weight-bold);
    font-size: var(--cnd-text2-sm);
    background-color: #0b1213;
    padding: 0 var(--cnd-space-md);
    border-bottom: 5px solid transparent;
}

/*
   Logo
*/

/* Hide the logo after login */
body.auth-int .bannerBrandIcon,
body.auth-ext .bannerBrandIcon {
    display: none;
}

.bannerBrandIcon {
    height: 2.5rem;
    width: auto;
    vertical-align: middle;
    margin-right: var(--cnd-space-sm);
}

/*
   Labels
*/

/* Banner labels in top row */
.BannerIndustrial,
.BannerResidential {
    font-family: var(--cnd-font-slab);
    font-size: var(--cnd-text2-sm);
    padding-top: var(--cnd-space-md);
    background-color: transparent;
}

.BannerIndustrial {
    color: var(--cnd-green);
}

.BannerResidential {
    color: var(--cnd-blue);
}

/* Add a horizontal line under the tabs for Industrial/Residential */
body.auth-int #bannerWrapper,
body.auth-ext #bannerWrapper {
    border-color: var(--cnd-white);
}

#bannerWrapper:has(.tab-activeIndustrial) {
    border-bottom-color: var(--cnd-green) !important;
}

#bannerWrapper:has(.tab-activeResidential) {
    border-bottom-color: var(--cnd-blue) !important;
}

/*
   Title
*/

/* Use the Slab font in the title */
.bannerTitle {
    font-family: var(--cnd-font-slab);
    font-size:  var(--cnd-text-md) !important;
    color: var(--cnd-white);
    padding: var(--cnd-space-sm) var(--cnd-space-md);
    border-radius: var(--cnd-radius-sm);
    white-space: nowrap;
}

/* Banner title environment/portal color coding */
body.env-test .bannerTitle {
    color: var(--cnd-orange);
}

body.env-acc .bannerTitle {
    color: var(--cnd-purple);
}

/* Flag positioning for Hungary and Spain */
body.env-hu .bannerTitle,
body.env-es .bannerTitle {
    padding-right: calc(var(--cnd-space-md) + 1.5rem);
    position: relative;
}

body.env-hu .bannerTitle::after,
body.env-es .bannerTitle::after {
    content: '';
    position: absolute;
    right: var(--cnd-space-md);
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 0.75rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

body.env-hu .bannerTitle::after {
    background-image: url('../images/Branding/icons/Hungary.svg');
}

body.env-es .bannerTitle::after {
    background-image: url('../images/Branding/icons/Spain.svg');
}

/*
   Date
*/

.bannerDate * {
    font-size: var(--cnd-text2-sm);
    font-weight: var(--cnd-weight-bold);
    color: var(--cnd-yellow);
    margin-left: var(--cnd-space-sm);
}

/*
   Logout button
*/

/* Make Logout look more like a button */
#tdBannerLogout .CommandButton {
    padding: var(--cnd-space-md);
    border-radius: var(--cnd-radius-lg);
    white-space: nowrap;
}

    /* Remove the underline */
    #tdBannerLogout .CommandButton,
    #tdBannerLogout .CommandButton:link,
    #tdBannerLogout .CommandButton:visited,
    #tdBannerLogout .CommandButton:active {
        text-decoration: none;
        color: var(--cnd-white);
    }

        #tdBannerLogout .CommandButton:hover {
            background-color: var(--cnd-hover-light);
            cursor: arrow;
        }

/*
   Tabs
*/

/* Make tabs rounded with no borders */
.tab-active,
.tab-inactive,
.tab-activeIndustrial,
.tab-inactiveIndustrial,
.tab-activeResidential,
.tab-inactiveResidential,
.tab-activeWebOffers {
    font-size: var(--cnd-text2-sm);
    border: 0;
    padding: var(--cnd-space-md) var(--cnd-space-lg);
    border-top-left-radius: var(--cnd-radius-sm) !important;
    border-top-right-radius: var(--cnd-radius-sm);
    white-space: nowrap; /* UX hack: prevent floating tabs on narrow screens */
}

/* Highlight normal active tabs in white */
.tab-active,
.tab-activeIndustrial,
.tab-activeResidential,
.tab-activeWebOffers {
    background-color: var(--cnd-white);
    color: var(--cnd-black);
    cursor: default;
}

/* But use ConDoor colors for Industrial and Residential tabs */
.tab-activeIndustrial {
    background-color: var(--cnd-green);
    color: var(--cnd-white);
}

.tab-activeResidential {
    background-color: var(--cnd-blue);
    color: var(--cnd-white);
}
/* Give inactive (page) tabs a slight highlight when hovered */
.tab-inactive:has(a:not([target])):hover,
.tab-inactiveIndustrial:has(a:not([target])):hover,
.tab-inactiveResidential:has(a:not([target])):hover {
    background-color: var(--cnd-hover-light);
    cursor: arrow;
}
/* But give inactive (link) tabs an underline when hovered */
.tab-inactive:has(a[target="_blank"]):hover {
    background-color: transparent;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}

/* 
    UX - Make entire tabs clickable, not just their links 
    (note that active tabs do not contain links)
*/
.tab-inactive,
.tab-inactiveIndustrial,
.tab-inactiveResidential {
    padding: 0;
}

    .tab-inactive a,
    .tab-inactiveIndustrial a,
    .tab-inactiveResidential a {
        display: block;
        padding: var(--cnd-space-md) var(--cnd-space-lg);
        font: inherit !important; /* site.css override */
    }

/*
    Info popup (dev info)
*/
.bannerInfoButton {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: white;
    line-height: 0;
}

    .bannerInfoButton svg {
        width: 27px;
        height: 27px;
        vertical-align: middle;
        fill: currentColor;
    }

    .bannerInfoButton:hover svg {
        opacity: 1;
    }

.bannerInfoWrapper {
    position: relative;
    display: inline-block;
}

.banner-info-popup {
    position: fixed;
    top: auto;
    right: var(--cnd-space-md);
    background: white;
    border: var(--cnd-popup-border);
    border-radius: var(--cnd-radius-sm);
    padding: 12px 16px;
    box-shadow: var(--cnd-popup-shadow);
    z-index: 2001;
    min-width: 220px;
    font-size: 0.875em;
    display: none;
}

.info-popup-row {
    margin-bottom: 8px;
}

    .info-popup-row:last-child {
        margin-bottom: 0;
    }

.info-popup-label {
    display: block;
    font-size: x-small;
    color: #999;
    margin-bottom: 2px;
}

.info-popup-value {
    display: block;
    font-size: smaller;
    color: #333;
}