/* mobile view */
@media only screen and (max-width: 767px) {

    /* product specification table alignment fix */
    table#product-attribute-specs-table td {
        display: flex;
        justify-content: space-between;
    }
}

/* BHP-244, spacing and responsive issue in suport section box fix */
p#htbo_img_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

ul.cdz-product-labels {
    pointer-events: none;
}

/* BHP-545 */
a.qs-button:hover::before,
a.action.towishlist:hover::after,
a.action.tocompare:hover::before {
    color: white;
}

/* BHP-544 */
@media (max-width: 575.98px) {
    div#ft-floating-bar .cdz-flbar {
        position: unset;
    }
}

/* BHP-673 */
body.catalog-product-view main .block.crosssell .product-list-style-17 .owl-item .product-item-top {
    border: solid 1px #f0f0f0;
}

body.catalog-product-view main .block.crosssell .product-list-style-17 .owl-item .product-item-top .button-hover-wrap.hidden-xs a:hover,
body.catalog-product-view main .block.crosssell .product-list-style-17 .owl-item .product-item-top .button-hover-wrap.hidden-xs button:hover {
    background-color: #cc2229 !important;
}

body.catalog-product-view main .block.crosssell .product-list-style-17 .owl-item .product-item-top .button-hover-wrap.hidden-xs button.action.tocart.primary:hover:after {
    color: #ffffff !important;
}

body.catalog-product-view main .block.crosssell .product-list-style-17 .product-item-info .product-item-details .price-final_price .old-price .price-wrapper .price {
    color: #b5b5b5;
    font-size: 12px;
}

body.catalog-product-view main .block.crosssell .product-list-style-17 .owl-item .emi-calculation {
    padding: 0 10px;
}

.hori-mobile-menu.visible-xs {
    background: #B4DDE6;
}

.mb-bottom-toolbar.visible-xs {
    background: #B4DDE6;
}

.mb-bottom-toolbar.visible-xs .menu-items i {
    color: #000;
}

.mb-bottom-toolbar.visible-xs .fa.fa-circle-o.dot {
    color: #000;
}

.group-switch .switcher .times:before,
.group-switch .switcher .times:after {
    background: #000;
}

/* BHP Gift Card Overlap & Sticky Scroll Fixes */
.catalog-product-view .box-tocart.mgift-div {
    width: 100%;
}

.catalog-product-view .box-tocart.mgift-div .gift-price {
    margin-bottom: 25px;
}

.catalog-product-view .box-tocart.mgift-div .gift-price .swatch-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.catalog-product-view .box-tocart.mgift-div .gift-price .swatch-options::after {
    content: '';
    display: table;
    clear: both;
}

.catalog-product-view .box-tocart.mgift-div .gift-receiver {
    clear: both;
    padding-top: 20px;
    border-top: 1px solid #e2e2e2;
    margin-top: 10px;
}

/* Force override the inline height restrictions set in the product description HTML */
.catalog-product-view .box-tocart.mgift-div .fieldset>.field,
.catalog-product-view .box-tocart.mgift-div form .field {
    height: auto !important;
}

/* Sticky override */
.catalog-product-view .box-tocart.mgift-div.active {
    display: block !important;
    height: auto !important;
    padding: 15px 0 !important;
    z-index: 999;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}

.catalog-product-view .box-tocart.mgift-div.active .gift-price {
    margin-bottom: 10px;
    border-bottom: 1px dashed #e2e2e2;
    padding-bottom: 15px;
}

.catalog-product-view .box-tocart.mgift-div.active .gift-price .swatch-options {
    margin-bottom: 0;
}

.catalog-product-view .box-tocart.mgift-div.active .gift-receiver {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 15px;
    padding-top: 0;
    border-top: none;
    margin-top: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.catalog-product-view .box-tocart.mgift-div.active .gift-receiver::before,
.catalog-product-view .box-tocart.mgift-div.active .gift-receiver::after {
    display: none;
}

.catalog-product-view .box-tocart.mgift-div.active .gift-receiver .field {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    flex: 1;
    min-width: 120px;
    height: auto !important;
}

.catalog-product-view .box-tocart.mgift-div.active .gift-receiver .field .label {
    margin-bottom: 4px;
    font-size: 12px;
}

/* Hide Notification Info title in sticky to save space */
.catalog-product-view .box-tocart.mgift-div.active .gift-receiver .field.price-label {
    display: none !important;
}

.catalog-product-view .box-tocart.mgift-div.active .gift-receiver .actions {
    flex: 0 0 auto;
    margin-left: auto;
    margin-bottom: 0;
    padding-top: 0;
}

.catalog-product-view .box-tocart.mgift-div.active .gift-receiver .actions .tocart {
    margin-bottom: 0;
}

/* Hide the prepended product info thumbnail completely for gift card sticky bar */
.catalog-product-view .box-tocart.mgift-div.active .scr-pinfo {
    display: none !important;
}
/* Create-account page: plain 50/50 split -- lifestyle photo as its own
   column on the left, form as its own column on the right (not an overlay
   on the photo). .account-social-login (Magepow's Google button block) is
   inserted by the module as a sibling BEFORE .account-create-split, not
   inside the form column -- that block position isn't ours to move without
   patching a vendor module, so it's pulled into the form column with CSS
   grid instead of being re-parented in the DOM. */
body.customer-account-create .column.main {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "visual social" "visual form";
    align-items: start;
    column-gap: 48px;
    row-gap: 0;
    max-width: 1040px;
    margin: 0 auto;
}

/* The page's real <h1> (.page-title-wrapper) lives outside .column.main as
   a sibling in #maincontent (before .columns), not inside the grid built
   below -- rather than fight cross-container absolute positioning (it was
   landing relative to a much higher ancestor and overlapping the nav), it
   stays in normal flow, just re-styled and width-capped to visually align
   with the left/image column above it. The text itself is changed via a
   real layout override (see customer_account_create.xml in this theme),
   not CSS content, so it stays real, readable DOM text for screen
   readers/SEO. */
body.customer-account-create .page-title-wrapper {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 40px;
}

body.customer-account-create .page-title-wrapper .page-title {
    max-width: calc(50% - 24px);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #1a1a1a;
    text-transform: none;
}

/* Sits visually on top of .account-create-formcol as one joined card:
   same background/radius, flat seam where the two meet. */
body.customer-account-create .account-social-login {
    grid-area: social;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: #fff;
    border-radius: 8px 8px 0 0;
    padding: 20px 22px 16px;
}

body.customer-account-create .account-social-login .block-content {
    display: block;
    width: 100%;
}

body.customer-account-create .account-social-login .actions-toolbar.social-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Codazon's theme has an unrelated ".account-social-login a { color: #fff
   !important }" rule (styles header account links) that happens to collide
   with this block's class name -- only !important can win against it. */
body.customer-account-create .account-social-login a.btn.btn-social.btn-google {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background: #fff;
    color: #1a1a1a !important;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

body.customer-account-create .account-social-login a.btn.btn-social.btn-google:hover {
    background: #f7f7f7;
    color: #1a1a1a !important;
}

/* Google "G" mark before the button text, using the icon the module
   already ships (css/images/g-logo.png) rather than adding a new asset */
/* Referenced by absolute static URL, not a relative path: this CSS file
   deploys under the locale-agnostic "default" folder, but Magento treats
   module images as locale-specific static content (only present under
   en_US), so no relative ../ path from here can ever reach it. */
body.customer-account-create .account-social-login a.btn.btn-social.btn-google::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    flex: none;
    background: url('/static/frontend/Codazon/unlimited_child/en_US/Magepow_SocialLogin/css/images/g-logo.png') center / contain no-repeat;
}

body.customer-account-create .account-social-login::after {
    content: "or use your email";
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6b6b;
}

body.customer-account-create .account-create-split {
    grid-area: form;
    display: contents;
}

body.customer-account-create .account-create-visual {
    grid-area: visual;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    min-height: 780px;
    align-self: stretch;
}

body.customer-account-create .account-create-formcol {
    grid-area: form;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 0 0 8px 8px;
    padding: 0 22px 22px;
}

/* If Google sign-in is disabled (sociallogin/google/is_enabled = 0), the
   whole .account-social-login block never renders (see social.phtml's
   canShow() + availableSocials check) -- restore the form card's own top
   radius/padding so it doesn't look flat-topped and cut off with nothing
   capping it. */
body.customer-account-create .column.main:not(:has(.account-social-login)) .account-create-formcol {
    border-radius: 8px;
    padding: 22px;
}

/* Field order now matches real DOM order in register.phtml (Name -> Email
   -> Password -> Mobile/NIC -> checkboxes -> Submit), so this is a plain
   two-column grid with no grid-row reordering or `order`/`:has()` tricks --
   those were needed only because fields used to render out of visual
   order, which also broke keyboard tab order (tab follows DOM order, not
   grid position). Fixing the source order fixed both at once. */
body.customer-account-create .account-create-formcol form.form-create-account {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
    align-items: start;
}

body.customer-account-create .account-create-formcol .fieldset,
body.customer-account-create .account-create-formcol .entry-edit.form-inline {
    display: contents;
}

body.customer-account-create .account-create-formcol .fieldset > br,
body.customer-account-create .account-create-formcol .legend,
body.customer-account-create .account-create-formcol .admin__legend,
body.customer-account-create .account-create-formcol input[type="hidden"] {
    display: none;
}

body.customer-account-create .account-create-formcol .field {
    margin-bottom: 0;
}

/* Email and Password each span both columns; everything else pairs up
   two-to-a-row in natural DOM order. Scoped under .account-create-formcol
   throughout -- this page also has a global cookie-consent banner that
   reuses generic classes like .actions-toolbar/.primary/.field.choice, and
   a body-level-only selector was leaking styles onto it (e.g. making its
   buttons full-width too). */
body.customer-account-create .account-create-formcol .field.required:has(#email_address),
body.customer-account-create .account-create-formcol .field.password {
    grid-column: 1 / -1;
}

/* jQuery Validate's error message renders as a sibling right after the
   input, inside .account-create-password-control -- keep it clear of the
   Show/Hide toggle sitting on top of the input's right edge */
body.customer-account-create .account-create-formcol .account-create-password-control label.mage-error {
    display: block;
    padding-right: 56px;
}

body.customer-account-create .account-create-formcol #password-strength-meter-container {
    margin-top: 6px;
    font-size: 11.5px;
    color: #6b6b6b;
}

/* Consolidated checkbox group (Cash Back, Newsletter, Privacy Policy) --
   one real wrapper div in the template now, not three siblings stitched
   together with :has()/adjacency selectors.
   `order` (not grid-row) is used here deliberately: Mobile No./National ID
   (Nipuna_Mage's customer-attributes block) isn't server-rendered inline --
   it's mounted into the page by its own JS component at a fixed point
   independent of where its empty placeholder container sits in
   register.phtml's source, so no amount of reordering the static template
   markup changes where it actually lands in the DOM. `order` repositions
   it and this checkbox group relative to each other without needing to
   know or control that mount point. */
body.customer-account-create .account-create-formcol .account-create-checks {
    order: 2;
    grid-column: 1 / -1;
    margin: 0 0 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}

body.customer-account-create .account-create-formcol .field-nav_customer_mobile_no {
    order: 1;
    grid-column: 1;
}

body.customer-account-create .account-create-formcol .field-nav_national_id {
    order: 1;
    grid-column: 2;
}

body.customer-account-create .account-create-formcol .account-create-checks .field.choice {
    background: #fafafa;
    padding: 8px 12px;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12px;
}

body.customer-account-create .account-create-formcol .account-create-checks .field.choice + .field.choice {
    border-top: 1px solid #eee;
}

body.customer-account-create .account-create-formcol .account-create-checks .field.choice input {
    margin-top: 2px;
}

body.customer-account-create .account-create-formcol .privacy-consent a {
    color: #cc2229;
    text-decoration: underline;
}

/* Fields not used at registration on this store */
body.customer-account-create .account-create-formcol .field.choice:has(#assistance_allowed_checkbox),
body.customer-account-create .account-create-formcol .field-nav_customer_mobile_no_alt {
    display: none;
}

body.customer-account-create .account-create-formcol .field-tooltip.toggle {
    display: none;
}

/* Matches the theme's regular .field label computed style exactly (13px,
   #999, weight 400) so Mobile No./National ID (rendered by a different UI
   component with its own admin__field-label class) don't look mismatched */
body.customer-account-create .account-create-formcol .admin__field-label {
    display: block;
    font-size: 13px;
    color: #999;
    margin-bottom: 4px;
    font-weight: 400;
}

body.customer-account-create .account-create-formcol .admin__control-text {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #b3b3b3;
    border-radius: 3px;
    padding: 9px 10px;
    font-size: 13.5px;
    line-height: 1.45;
    height: auto;
    min-height: 0;
}

/* Scoped to the form itself, not just body.customer-account-create -- this
   page also has a global cookie-consent banner that happens to reuse the
   same generic .actions-toolbar/.primary/.action.submit classes, and a
   body-level selector was making its buttons full-width too. */
body.customer-account-create .account-create-formcol .actions-toolbar {
    order: 3;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 4px;
}

body.customer-account-create .account-create-formcol .actions-toolbar .primary {
    width: 100%;
}

body.customer-account-create .account-create-formcol .actions-toolbar .primary .action.submit {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

body.customer-account-create .account-create-formcol .actions-toolbar .secondary {
    text-align: center;
}

/* All text inputs in the form: darken the washed-out default border, and
   force identical box metrics so Mobile No./National ID (rendered by a
   different UI component with its own admin__control-text class) match
   the regular register.phtml fields exactly instead of being a hair taller */
body.customer-account-create .account-create-formcol input.input-text,
body.customer-account-create .account-create-formcol input[type="email"],
body.customer-account-create .account-create-formcol input[type="password"],
body.customer-account-create .account-create-formcol input[type="text"],
body.customer-account-create .account-create-formcol .admin__control-text {
    box-sizing: border-box;
    border-color: #b3b3b3;
    border-radius: 3px;
    padding: 9px 10px;
    font-size: 13.5px;
    line-height: 1.45;
    height: auto;
}

/* Inline Show/Hide toggle inside the Password field, replacing the separate
   Confirm Password field + checkbox row */
body.customer-account-create .account-create-formcol .account-create-password-control {
    position: relative;
}

body.customer-account-create .account-create-formcol .account-create-password-control input {
    position: relative;
    z-index: 1;
    padding-right: 56px;
}

body.customer-account-create .account-create-formcol .account-create-password-toggle {
    all: unset;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    height: 40px;
    max-height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #6b6b6b;
    cursor: pointer;
    pointer-events: auto;
}

body.customer-account-create .account-create-formcol .account-create-password-toggle:hover {
    color: #cc2229;
}

body.customer-account-create .account-create-formcol input.input-text:focus,
body.customer-account-create .account-create-formcol input[type="email"]:focus,
body.customer-account-create .account-create-formcol input[type="password"]:focus,
body.customer-account-create .account-create-formcol input[type="text"]:focus {
    border-color: #cc2229;
}

@media only screen and (max-width: 991px) {
    body.customer-account-create .column.main {
        display: block;
    }

    body.customer-account-create .account-create-visual {
        display: none;
    }

    /* No half-width image column to align next to on mobile -- the 50%
       cap that lines the heading up with the desktop image column just
       squeezed it into a cramped 3-line wrap here instead. */
    body.customer-account-create .page-title-wrapper .page-title {
        max-width: 100%;
        text-align: center;
    }

    body.customer-account-create .account-create-formcol {
        padding: 0 22px 22px;
    }

    /* Single column -- real DOM order (fixed for tab-order correctness)
       already matches the desired visual order, so nothing needs an
       explicit grid-row/grid-column here anymore. */
    body.customer-account-create .account-create-formcol form.form-create-account {
        grid-template-columns: 1fr;
    }

    body.customer-account-create .account-create-formcol .field.required:has(#email_address),
    body.customer-account-create .account-create-formcol .field.password,
    body.customer-account-create .account-create-formcol .field-nav_customer_mobile_no,
    body.customer-account-create .account-create-formcol .field-nav_national_id {
        grid-column: 1;
    }
}