/*
 * Computer global head styles.
 * Extracted from module/computer/layout/head.style.phtml during audit Step 6a.
 *
 * The PHP conditional for `$app->module === "/checkout/"` was replaced with
 * a CSS attribute selector `body[data-module="/checkout/"]` — the body now
 * receives `data-module="<?=$app->module?>"` via head.phtml.
 *
 * The <noscript> simplebar fallback stays inline in head.phtml (small,
 * conditional on JS-disabled browsers — not worth a separate cacheable file).
 */

.hidden-h1{
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1200;
    display: none;
}

.no-select{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#searchInputForm #searchInput,
#searchInputForm #searchInputSubmit{
    border-radius: 0;
    border: 0;
    outline: none;
    box-shadow: none;
}

#searchInputForm #searchInput:focus,
#searchInputForm #searchInputSubmit:focus{
    outline: none;
    box-shadow: none;
}

#searchInputForm #searchInputSubmit{
    color: var(--lb-accent);
}

#searchInputWrapper{
    top: 55px;
    position: fixed;
    z-index: 40;
}

#clearSearchInputWrapper{
    position: absolute;
    right: 60px;
    top: 20px;
    z-index: 3000;
}

.search-input-result{
    border-bottom: 1px solid #d8d8d8;
    padding: 11.2px 14.4px;
    background-color: #FFF;
}

.search-input-result-highlight{
    color: var(--lb-accent);
    font-weight: bold;
}

#toast-container > div {
    margin: 0 0 6px;
    padding: 20px 20px 20px 50px;
    width: 300px;
    border-radius: 4px;
    box-shadow: none;
    color: #FFF;
    opacity: 1 !important;
    margin-bottom: 30px;
}

.lazyload-placeholder {
    background-color: #f0f0f0;
}

.field-error{
    border: 2px solid #e2504a !important;
}

.field-success{
    border: 2px solid #90e24a !important;
}

#body{
    width: 100% !important;
    overflow: hidden;
}

.btn:hover,
.btn:focus,
.btn.focus {
    color: #FFF;
    text-decoration: none;
}

.hyphenate{
    hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
}

/* ------------------------------------------------------------------
 * Checkout-mode overrides — hide nav chrome, shrink header
 * Activated by body[data-module="/checkout/"] (set in head.phtml).
 * Replaces the former PHP `if ($app->module === "/checkout/") { ... }`.
 * ------------------------------------------------------------------ */

/*
 * Phase B13 — granular hide. Previously `.panelLinks` was blanket-hidden
 * on checkout, taking the account dropdown with it; that left guests
 * with no in-funnel login path. Now `.panelLinks-account` stays
 * visible while the cart icon + theme toggle still hide. The cart
 * icon is hidden via :not() since it's the unmarked .panelLinks
 * sibling — Q35 default keeps customer mid-flow able to log in.
 */
body[data-module="/checkout/"] #searchForm,
body[data-module="/checkout/"] .panelLinks:not(.panelLinks-account),
body[data-module="/checkout/"] #headerMenu,
body[data-module="/checkout/"] .toggleLeftSidenav,
body[data-module="/checkout/"] #socialNetworksContainer,
body[data-module="/checkout/"] #header > .row > div.col{
    /* The last selector hides the empty SEARCH COLUMN (parent of
       #searchForm) — hiding only #searchForm left the column itself
       in the flex row competing with #logoContainer for grow space,
       so the logo ended up off-centre. */
    display: none !important;
}

body[data-module="/checkout/"] #header{
    height: 80px !important;
    padding: 0 !important;
}

body[data-module="/checkout/"] #headerWrapper{
    height: 80px !important;
}

/*
 * Phase D1 follow-up — chrome alignment fix.
 * Without `align-items: center` on the row, BS4's default stretch made
 * each column stretch to row height but their CHILDREN sat at the top
 * of each column ("Voltar ao Carrinho" pinned to top edge, account
 * icon mid-floating, etc.). Centering the row anchors every chrome
 * element to the vertical mid-line of the 80px band.
 *
 * Also drops the 15px top/bottom padding from #header so the 80px is
 * a true content box, not 50px usable.
 */
body[data-module="/checkout/"] #header > .row{
    align-items: center;
    height: 80px;
    margin: 0;
    flex-wrap: nowrap;
}

body[data-module="/checkout/"] .footerBlock{
    display: none;
}

/*
 * .stickyTopFix is a spacer div injected by header.phtml (non-homepage)
 * and slider.phtml (homepage). Historically its margin-bottom lived as
 * an inline style (120px / 130px); moved to CSS so we can override per
 * surface without fighting inline specificity. The variant
 * `.stickyTopFix--slider` is the homepage-only one that hugs the slider.
 *
 * On checkout we suppress the spacer entirely — it created a giant blank
 * strip between the slim chrome and the step nav.
 */
.stickyTopFix {
    margin-bottom: 120px;
}

.stickyTopFix--slider {
    margin-bottom: 130px;
}

body[data-module="/checkout/"] .stickyTopFix{
    display: none;
}

/*
 * Sticky chrome clearance — the blanket `.stickyTopFix { display: none }`
 * above removed the 80px spacer that used to push content below the
 * fixed 80px header. Each entry-point at the top of a checkout page
 * needs its own top offset to clear the chrome.
 *
 * - /checkout/choose: starts with <h2>Área do cliente</h2> (no step
 *   nav band). 100px gives the title some breathing room above it.
 * - /checkout/ + /checkout/summary-payment + /checkout/finish: start
 *   with .checkout-nav, designed to sit flush against the chrome
 *   bottom edge. 80px = chrome height, so no visual gap.
 */
body[data-module="/checkout/"] #choose{
    margin-top: 100px;
}
body[data-module="/checkout/"] .checkout-nav{
    margin-top: 80px;
    margin-bottom: 24px;
}

/*
 * Slim checkout chrome — 3-column flex layout that puts the logo at
 * the *viewport* horizontal centre.
 *
 * The two side columns ("Voltar ao Carrinho" left, "Iniciar sessão"
 * right) have different intrinsic content widths. If the logo column
 * just stretches to fill the gap between them (the previous fix),
 * `text-align: center` centres the logo within the *gap* — which is
 * NOT the viewport centre unless the two sides happen to be the same
 * width.
 *
 * Fix: give both side columns `flex: 1 1 0` (same grow factor, zero
 * basis) so they end up the same width regardless of content. The
 * logo column gets `flex: 0 0 auto` (intrinsic size). Result:
 * left = right = (viewport - logo_width) / 2, so the logo lands
 * exactly at the viewport centre.
 *
 * Content alignment inside each side: left col text-align:left so
 * "Voltar" hugs the viewport left edge; right col text-align:right
 * so "Iniciar sessão" hugs the viewport right edge.
 */
body[data-module="/checkout/"] #header > .row > .col-auto:first-child{
    flex: 1 1 0;
    text-align: left;
}
body[data-module="/checkout/"] #header > .row > .col-auto.panelLinks-account{
    flex: 1 1 0;
    text-align: right;
}
body[data-module="/checkout/"] #logoContainer{
    flex: 0 0 auto;
    text-align: center;
    width: auto;
}

body[data-module="/checkout/"] #logoContainer a img{
    /* 160px keeps the proportional height (~62px) well within the
       80px header band — slightly bigger than the previous 130px
       so the logo reads at the same prominence as in the regular
       storefront chrome. */
    width: 160px !important;
    height: auto;
}

/*
 * Phase B13 — "Voltar ao Carrinho" escape link.
 * Rendered server-side by header.phtml only when $inCheckoutFlow is
 * true (steps 02/03, NOT finish). Now that the parent row uses
 * `align-items: center` the link inherits proper vertical centering
 * — no need for explicit height. Padding handles the comfortable
 * tap target.
 */
.checkout-escape-link{
    display: none;
}
body[data-module="/checkout/"] .checkout-escape-link{
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    color: #fff;
    font-size: 15.2px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    opacity: 0.9;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
/*
 * Hover/focus pill — semi-transparent white tint instead of an underline.
 * Provides clear tactile feedback against the dark blue header chrome
 * without breaking the "no underlines in chrome" convention.
 */
body[data-module="/checkout/"] .checkout-escape-link:hover,
body[data-module="/checkout/"] .checkout-escape-link:focus-visible{
    opacity: 1;
    color: #fff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.12);
}

/*
 * Account-link label on checkout. Hidden by default so the storefront
 * chrome stays icon-only on every other page. On checkout the other
 * icons are hidden, the account icon is alone with plenty of room,
 * and a guest mid-funnel needs an explicit "Iniciar sessão" affordance
 * rather than guessing what a lone icon means. Sized small to stay
 * proportional to the icon, not compete with it.
 */
.account-link-label {
    display: none;
}
body[data-module="/checkout/"] .panelLinks-account .account-link-label {
    display: inline;
    margin-left: 8px;
    color: #fff;
    font-size: 15.2px;
    font-weight: 500;
    opacity: 0.9;
    transition: opacity 0.15s ease;
}

/*
 * Shrink the user-circle icon inside the slim checkout chrome. The
 * regular storefront sizes panel icons at 30px (`.panelLinks .fa`),
 * but in the slim chrome the icon now sits next to the "Iniciar sessão"
 * label and needs to read as a peer to the "Voltar ao Carrinho" arrow
 * (~15px). 22px keeps it visible without dominating the label.
 */
body[data-module="/checkout/"] .panelLinks-account .fa {
    font-size: 22px;
}
body[data-module="/checkout/"] .panelLinks-account a:hover .account-link-label,
body[data-module="/checkout/"] .panelLinks-account a:focus-visible .account-link-label {
    opacity: 1;
}
body[data-module="/checkout/"] .panelLinks-account a,
body[data-module="/checkout/"] .panelLinks-account a:hover,
body[data-module="/checkout/"] .panelLinks-account a:focus,
body[data-module="/checkout/"] .panelLinks-account a:focus-visible {
    text-decoration: none;
    color: #fff;
}

/*
 * Vertical centering of the icon + label inside the account link.
 * Default `display: inline` aligns text and icon by baseline — but the
 * fa-user-circle glyph has different vertical metrics than the latin
 * label, so they read as misaligned. inline-flex with align-items:center
 * pins both to the visual mid-line of the link.
 *
 * Same hover treatment as .checkout-escape-link: semi-transparent white
 * pill that gives clear tactile feedback against the blue chrome.
 */
body[data-module="/checkout/"] .panelLinks-account a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}
body[data-module="/checkout/"] .panelLinks-account a:hover,
body[data-module="/checkout/"] .panelLinks-account a:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
}