/* Variabili Colori */
:root {
    --red: #c91a14;
    --dark-grey: #191a1a;
    --bg-light-grey: #f4f4f4;
    --white: #ffffff;
    --mid-grey: #4b4d4e;
    --grey: #a4a7a8;
    --mild-grey: #e5e6e6;
    --dark-black: #0c0d0d;
    --dc-grey: #323334;
    --error: #ea3a3d;
    --error-bg: #fdeaea;
    --success: #439846;
    --success-bg: #e6f4ea;
    --alert: #ffbe33;
    --alert-bg: #fff8e5;
    --form-control-color: #da0028;
    --form-control-disabled: #a4a7a8;
    --blue: #0073df;
}

/* Stili generali per i componenti shortcode BC Integration */
.bci-component {
    box-sizing: border-box;
}

.small-subtitle {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: var(--grey);
    padding-bottom: 0.5rem;
}

.small-subtitle-red {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: var(--red);
}


.small-subtitle-dark {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--dark-grey);
    padding-bottom: 0.5rem;
}

.light-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--grey);
}

.medium-subtitle {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: var(--mid-grey);
}

.medium-link-thin {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--mid-grey);
}

.medium-link-thin:hover {
    text-decoration: underline;
    color: var(--red);
}

/* Menu*/
.side-menu {
    flex: 0 0 25%;
}

.bci-component-menu .bci-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.bci-component-menu .bci-nav__item {
    background-color: var(--bg-light-grey);
    padding: 1rem;
    font-size: 18px;
    line-height: 24px;
}

.bci-component-menu .bci-nav__item.is-active {
    font-weight: 600;
}

.bci-component-menu .bci-nav__item .bci-nav__link {
    text-decoration: none;
    display: block;
}

/* Debug component */
#bci-sc-debug {
    background-color: #fbeaea; /* rosso meno intenso */
    padding-inline: 30px;
    border: 1px dashed #d35a5a; /* bordo tratteggiato */
    margin-top: 10rem;
}

.bci-component__header {
    margin-left: 0 !important;
}

#bci-sc-debug .debug-title {
    color: var(--red) !important;
}

/* Orders */
.bci-component {
    max-width: unset !important;
}

.orders-component {
    display: flex;
    gap: 1.5rem;
}

.bci-component .orders-list {
    flex-grow: 1;
}

.bci-component .orders-list {
    flex-grow: 1;
}

.bci-component .order-item .order-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--mild-grey);
    padding-bottom: 1rem;
}

.bci-component .order-item .order-header .details-link {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}
.bci-component .order-item .order-header .details-link svg {
    margin-inline: 4px;
    transition: margin 0.3s ease;
}
.bci-component .order-item .order-header .details-link:hover svg {
    margin-left: 8px;
    margin-right: 0;
}

.bci-component .order-item .order-infos {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.bci-component .order-item .order-info {
    flex: 1;
}

.bci-component .order-item .order-infos .order-info-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--grey);
    text-transform: uppercase;
}

.bci-component .order-item .order-infos .order-info-value {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--mid-grey);
}

.bci-component .order-item {
    padding: 30px;
    background-color: var(--bg-light-grey);
    margin-bottom: 2rem;
}

/* Order Details */

.bci-order-detail-component .order-recap {
    margin-top: 2rem;
    background-color: var(--bg-light-grey);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bci-order-detail-component .bci-order-detail__content {
    display: flex;
    gap: 1.5rem;
}

.bci-order-detail-component .bci-order-detail__section {
    flex: 1;
}

.bci-order-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.bci-order-summary__item {
    display: flex;
    flex-direction: column;
}

.bci-order-product,
.bci-order-product__body,
.bci-order-product__meta {
    flex: 1;
    display: flex;
    gap: 1rem;
}

.bci-order-product {
    padding-block: 1rem;
    border-bottom: 1px solid var(--mild-grey);
}

.bci-order-product__qty,
.bci-order-product__unit-price,
.bci-order-product__total {
    flex: 1;
}

.bci-order-product__meta {
    justify-content: end;
}

.bci-order-product__meta .original-price {
    text-decoration: line-through;
    //color: var(--grey);
}

.bci-order-product__meta .price-container {
    display: flex;
    gap: 1rem;
}

.bci-order-product__meta .discount-percentage {
    color: var(--blue);
    font-weight: 600;
}

.bci-order-product__media,
.bci-order-product__media img {
    max-width: 80px;
    margin-right: 1rem;
}

.bci-order-summary__item--total {
    border-top: 1px solid var(--mild-grey);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
}
.bci-order-detail__section--shipping {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid var(--mild-grey);
}


/* Login component */
.bci-login {
    max-width: 420px;
    margin: 0 0 2rem 0;
}
.bci-login__form {
    margin-top: 1rem;
}
.bci-login__notice {
    margin-bottom: 1rem;
}
.bci-field {
    margin-bottom: 14px;
}
.bci-label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}
.bci-input {
    width: 100%;
    padding: 6px 8px;
    line-height: 1.4;
}
.bci-actions {
    margin-top: 8px;
}
.bci-login__submit {
}

/* Notices */
.bci-component .notice {
    padding: 4px;
    margin-bottom: 12px;
}

.bci-component .notice p {
    margin: 4px 8px;
}

.bci-component .notice-success {
    border-left: 4px solid #46b450;
    color: #3c763d;
    background: #dff0d8;
}

.bci-component .notice-error {
    border-left: 4px solid #dc3232;
    color: #a94442;
    background: #f8d7da;
}

/* Breadcrumbs */

.bci-breadcrumbs {
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 1rem 0;
    color: var(--grey);
}

.bci-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.bci-breadcrumbs__item {
    display: flex;
    align-items: center;
}

/* Separatore via pseudo-element sul link o current che NON è il primo */
.bci-breadcrumbs__item + .bci-breadcrumbs__item:before {
    content: "/";
    margin: 0 0.35rem;
    color: var(--mild-grey);
    font-weight: 400;
}

.bci-breadcrumbs__link {
    text-decoration: none;
    color: var(--mid-grey);
    transition: color 0.2s ease;
}
.bci-breadcrumbs__link:hover,
.bci-breadcrumbs__link:focus {
    color: var(--red);
}

.bci-breadcrumbs__current {
    color: var(--dark-grey);
    font-weight: 600;
}

/* Variante compatta dentro header component */
.bci-component__header .bci-breadcrumbs {
    margin-bottom: 0.5rem;
}

/* Profile Component */
.bci-component__header.profile-header {
}

.profile-component {
    display: flex;
    gap: 2rem;
}

.profile-component .side-menu .bci-nav__list {
    gap: 0;
}

.profile-component .side-menu .bci-nav__item {
    background-color: transparent;
    border-bottom: 1px solid var(--mild-grey);
}

.profile-component .side-menu .bci-nav__item:first-child {
    border-top: 1px solid var(--mild-grey);
}

.profile-component .bci-profile__content {
    flex: 1;
}

.profile-component .account-card {
    padding-block: 2rem;
    margin-top: 2rem;
}

.profile-component .info-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.profile-component .account-title,
.profile-component .address-title {
    border-bottom: 1px solid var(--mild-grey);
    margin-top: 0;
    margin-bottom: 1rem;
}

.profile-component .account-info {
    padding-block: 1rem;
}

.profile-component .account-actions {
    display: flex;
    flex-direction: column;
}

.profile-component .account-actions a {
    text-decoration: none;
    padding-block: 1rem;
    &:not(:first-child) {
        border-top: 1px solid var(--mild-grey);
    }
}

.profile-component .account-actions a svg {
    margin-inline: 8px;
}

.profile-component .profile-addresses {
    display: flex;
    gap: 2rem;
}

.profile-address {
    flex: 1;
}

/* Address card */

.address-card {
    background-color: var(--bg-light-grey);
    padding: 3rem 1.5rem;
}

.address-card__header {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: var(--dark-grey);
    padding-bottom: 1.5rem;
}

/* Address Component */

.addresses-component {
    display: flex;
    gap: 2rem;
}

.addresses-component .addresses-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.addresses-component .addresses-list .address-item {
    flex: 1;
}

.address-card__preferred {
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 0;
}

/* Cart */
.bci-cart-totals__actions {
    display: flex;  
    flex-direction: column;
    gap: 1rem;
}

.bci-component.cart-component {
    display: flex;
    gap: 2rem;
}

.bci-component.cart-component .bci-order-product__remove-link,
.bci-component.cart-component .bci-order-product__remove-link:hover,
.bci-component.cart-component .bci-order-product__remove-link:focus,
.bci-component.cart-component .bci-order-product__remove-link:active {
    border: 0px !important;
    background: transparent !important;
}


.bci-component.cart-component .bci-order-product.removing{
    opacity: 0.5;
    pointer-events: none;
}

.bci-component.cart-component .input-number-wrapper.disabled {
    opacity: 0.5;
}

.bci-component.cart-component .input-number-wrapper .value-control.limit-reached {
    opacity: 0.3;
    cursor: not-allowed;
}

.bci-component.cart-component .input-number-wrapper {
    display: flex;
    align-items: center;
}

.bci-component.cart-component .input-number-wrapper input.product-info-quantity {
    min-width: 45px;
}

/* Remove arrows from number input */
.bci-component.cart-component .input-number-wrapper input[type="number"]::-webkit-inner-spin-button,
.bci-component.cart-component .input-number-wrapper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bci-component.cart-component .input-number-wrapper input[type="number"] {
    -moz-appearance: textfield;
}

.bci-message {
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
}

.bci-message.bci-message--success {
    border-left: 4px solid var(--success);
    background-color: var(--success-bg);
    color: var(--success);
}

.bci-message.bci-message--error {
    border-left: 4px solid var(--error);
    background-color: var(--error-bg);
    color: var(--error);
}
/* Address Form - Dynamic States Loading */
.bci-field.bci-loading {
    position: relative;
    opacity: 0.6;
}

.bci-field.bci-loading::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--form-control-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: bci-spin 0.6s linear infinite;
}

@keyframes bci-spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Button inline loader (white spinner for primary buttons) */
.bci-btn--loading {
    position: relative;
    opacity: 0.8;
    cursor: wait;
    overflow: visible;
}

.bci-btn-loader {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: bci-btn-spin 0.6s linear infinite;
}

@keyframes bci-btn-spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Address Form - Required indicator */
.bci-label .required {
    color: var(--form-control-color);
    margin-left: 2px;
}

/* Address Form Component */
.address-form-component {
    display: flex;
    gap: 2rem;
}

.address-form-component .bci-address-form {
    flex: 1;
}

.bci-address-form__delete-form {
    display: flex;
}

.bci-address-form__delete-form .bci-address-form__delete-button {
    margin-left: auto;
}

.bci-component__description {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.bci-login__forgot-password {
    width: 100%;
    text-align: right;
}

#bci-price-list-selection #bci-price-list-currency #select2-bci-currency-container {
    background-image: none !important;
}