/**
 * Country confirmation banner (MosCountryTax).
 *
 * Colours come from the theme's own custom properties, and every fallback repeats that
 * theme's actual value rather than a neutral guess. The banner is rendered immediately
 * after the opening body tag, which may sit outside the element the variables are
 * declared on; with matching fallbacks it looks the same either way.
 *
 * Background and text are always taken from the same pair. Taking one from the theme
 * and letting the other inherit is what produced light text on a light bar.
 *
 * The four size declarations read a --sc-* custom property with the shipped value as its
 * fallback, so leaving them unset renders exactly as before. The Banner Studio (and the
 * storefront, when a size is saved) sets those properties to override a size shop-wide.
 */

.sc-country-banner {
    background: var(--moshammer-page, #303030);
    border-bottom: 1px solid var(--moshammer-border, rgba(255, 255, 255, .12));
    color: var(--moshammer-text, #fcfcfc);
    /* Set on the bar rather than the message, so the buttons and the country select
       scale with it and the row keeps its proportions. */
    font-size: var(--sc-banner-font, .8125rem);
}

.sc-country-banner--busy {
    opacity: .6;
}

/* Closing the bar on success has to actually remove it from the layout, otherwise the
   page below would simply not move back up until the reload finished. */
.sc-country-banner[hidden] {
    display: none;
}

.sc-country-banner__toggle[hidden] {
    display: none;
}

.sc-country-banner__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin: 0 auto;
    max-width: 1400px;
    padding: var(--sc-pad-y, .7rem) 1.25rem;
}

.sc-country-banner__message {
    color: var(--moshammer-text, #fcfcfc);
    flex: 1 1 18rem;
    margin: 0;
}

.sc-country-banner__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Buttons and the select carry the theme's own classes - btn-warning, btn-link,
   btn-sm, form-select - so their colour, borders, casing and states come from the
   shop's design system rather than being restated here. In this theme btn-warning is
   the accent, which is why the confirm button needs no colour of its own.

   Only two things are left: the type is a step smaller than any size the theme offers,
   and the secondary action needs to be white, for which the theme compiles no utility
   (btn-link resolves to near-black, invisible on this bar). */
.sc-country-banner .btn {
    font-size: var(--sc-btn-font, .6875rem);
}

.sc-country-banner .btn.sc-country-banner__toggle {
    color: var(--moshammer-text, #fcfcfc);
}

.sc-country-banner .btn.sc-country-banner__toggle:hover,
.sc-country-banner .btn.sc-country-banner__toggle:focus {
    color: var(--moshammer-text, #fcfcfc);
    text-decoration: underline;
}

.sc-country-banner__chooser {
    align-items: center;
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: .5rem;
}

.sc-country-banner__chooser[hidden] {
    display: none;
}

.sc-country-banner__label {
    color: var(--moshammer-text-muted, #c4c4c4);
    margin: 0;
}

/* form-select supplies the control's own styling; only its width is constrained, so a
   long country name cannot stretch the bar. */
.sc-country-banner__select {
    max-width: 22rem;
    width: auto;
}

.sc-country-banner__status {
    color: var(--moshammer-text-muted, #c4c4c4);
    flex-basis: 100%;
    margin: 0;
}

.sc-country-banner__status:empty {
    display: none;
}

.sc-country-banner__status--error {
    color: #ff8a80;
}

/* Creative Elements prints its own "Tax included" beside the price. Where this module
   states the tax itself, that is the same fact twice, so the native label is hidden -
   but only inside a Creative Elements root that actually contains our line. A category
   grid, which has the label and no line of ours, keeps it and loses no information.
   Browsers without :has() simply show both, which is untidy rather than broken. */
.elementor:has(.sc-ce-product-tax) .ce-tax-shipping-delivery-label {
    display: none;
}

/* The tax line the product page renders through the module, inside the theme's price-block
   tax label (displayProductPriceBlock/after_price). It ships as a <span> and is promoted
   here to its own block line, so it sits directly below the price. Colour is deliberately
   left unset so it inherits the theme's own tax-label colour - the theme decides it. */
.sc-product-tax {
    display: block;
    font-size: var(--sc-tax-font, .875rem);
    line-height: 1.3;
    margin: .25rem 0 0;
}

/* Our line lives inside the theme's own tax label, beside its generic "tax included" text.
   When our line is present, collapse that generic text (its font-size/line-height go to 0)
   while our line keeps its own size - so the tax is stated once, as the specific rate,
   directly below the price. With the feature off (no line of ours) the label is untouched.
   Mirrors the Creative Elements rule above. Browsers without :has() show both - untidy, not
   broken. */
.product__tax-label:has(.sc-product-tax) {
    font-size: 0;
    line-height: 0;
}

@media (max-width: 991.98px) {
    .sc-country-banner__inner {
        align-items: stretch;
        flex-direction: column;
        gap: .6rem;
    }

    /* Stacked, a flex basis stops being a width and becomes a height. `flex: 1 1 18rem`
       on the message therefore reserved 288px of vertical space and grew to fill it,
       which is what turned the bar into nearly half a phone screen; the status and the
       chooser carry the same trap with their 100% basis. When the axis changes, the
       basis has to change with it. */
    .sc-country-banner__message,
    .sc-country-banner__status,
    .sc-country-banner__chooser,
    .sc-country-banner__actions {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Full width is easier to hit with a thumb than a control sized to its text. */
    .sc-country-banner__select {
        max-width: none;
        width: 100%;
    }
}