/* Shared controls for storefront, blog and vendor auth layouts. */
@import url('./lucide-icons.css');

:root {
    --brebox-control-size: 16px;
    --brebox-control-color: #1d4766;
    --brebox-control-border: #bfcfda;
}

/* Keep password visibility switches and product swatches as specialized controls. */
input[type="checkbox"]:not(.custom-control-input):not([role="switch"]):not(.switcher_input):not(.switch-input):not(.btn-check):not(.checkbox-color input):not(.checkbox-alphanumeric input),
.custom-checkbox > input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    z-index: 0;
    inset: auto !important;
    display: inline-block !important;
    flex: 0 0 var(--brebox-control-size) !important;
    width: var(--brebox-control-size) !important;
    height: var(--brebox-control-size) !important;
    min-height: var(--brebox-control-size) !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--brebox-control-border) !important;
    border-radius: 4px !important;
    background: #fff !important;
    opacity: 1 !important;
    vertical-align: text-top;
    cursor: pointer;
}

.custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-inline-start: 0;
}

.custom-checkbox .custom-control-label::before,
.custom-checkbox .custom-control-label::after {
    display: none !important;
}

input[type="checkbox"]:not(.custom-control-input):not([role="switch"]):not(.switcher_input):not(.switch-input):not(.btn-check):not(.checkbox-color input):not(.checkbox-alphanumeric input):checked,
.custom-checkbox > input[type="checkbox"]:checked {
    border-color: var(--brebox-control-color) !important;
    background: var(--brebox-control-color) url('../img/lucide/check-white.svg') center / 14px 14px no-repeat !important;
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--brebox-control-color);
    outline-offset: 3px;
}

input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .5 !important;
}

.brebox-login-formzone .form-label,
.vendor-auth-field > label {
    margin-bottom: 8px;
}

.brebox-login-formzone p {
    margin-bottom: 16px;
}

.brebox-login-switch {
    justify-content: flex-end;
    margin-top: 20px;
    margin-bottom: 24px;
}

.brebox-login-switch__btn {
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
}

.brebox-login-switch__btn:hover {
    text-decoration: underline;
}

.brebox-profile-menu > a,
.brebox-profile-signout,
.brebox-profile-signout > span {
    font-weight: 500;
}

.brebox-profile-menu svg,
.brebox-profile-signout svg {
    stroke-width: 1.5;
}

.brebox-order-info {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.brebox-order-info .fs-12,
.brebox-order-payment > .fs-12 {
    display: flex;
    justify-content: space-between !important;
    gap: 16px;
}

.brebox-order-info .fs-12 > :last-child,
.brebox-order-payment > .fs-12 > :last-child {
    text-align: end;
}

.brebox-order-details-content .light-box h6:not(.fs-12) {
    margin-bottom: 14px;
}

.brebox-order-details-content .brebox-order-info .fs-12 > span,
.brebox-order-details-content .brebox-order-payment > .fs-12 > span {
    color: #333 !important;
    font-weight: 400 !important;
}

.brebox-order-facts {
    margin: 0;
    color: #333;
    font-size: 12px;
    line-height: 20px;
}

.brebox-order-facts > div {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) minmax(0, 2fr);
    column-gap: 16px;
    margin-bottom: 4px;
}

.brebox-order-facts dt {
    font-weight: 400;
}

.brebox-order-facts dd {
    margin: 0;
    text-align: end;
    overflow-wrap: anywhere;
}

.brebox-order-address-match {
    margin: 0;
    font-size: 12px;
    line-height: 20px;
}

.brebox-header .brebox-header-toolbar > .dropdown > .navbar-tool > .navbar-tool-icon-box svg.lucide path {
    fill: none !important;
}