/* =========================
   MANGUSTA GSM CLEAN SYSTEM
   ========================= */

:root {
    --mangusta-orange: #FF9F1C;
    --mangusta-orange-hover: #e88c12;

    --mangusta-green: #519873;
    --mangusta-green-hover: #498E6A;
}

/* =========================
   🟠 CTA BUTTONS
   ========================= */

.btn-primary,
.chm-btn-primary,
.btn-primary:focus,
.btn-primary:active,
.chm-btn-primary:focus,
.chm-btn-primary:active {
    background-color: var(--mangusta-orange) !important;
    border-color: var(--mangusta-orange) !important;
    color: #fff !important;
}

.btn-primary:hover,
.chm-btn-primary:hover {
    background-color: var(--mangusta-orange-hover) !important;
    border-color: var(--mangusta-orange-hover) !important;
}

/* ADD TO CART */

.btn-general,
#product .cart .btn-general,
.add-to-cart-footer .btn-general {
    background-color: var(--mangusta-orange) !important;
    color: #fff !important;
}

.btn-general:hover {
    background-color: var(--mangusta-orange-hover) !important;
}

.btn-general .icon-cart-add {
    background: #fff !important;
}

/* =========================
   🟢 BADGES (IMPORTANT FIX)
   ========================= */

.cart-total,
.wishlist-quantity,
.compare-quantity {
    background: var(--mangusta-green) !important;
    color: #fff !important;
    border-radius: 50%;
    font-weight: 600;
}

/* =========================
   🟠 MENU
   ========================= */

.btn-menu,
.btn-menu-top {
    background: var(--mangusta-orange) !important;
}

/* ACTIVE MOBILE */

.mob-fix-panel .active-bg {
    background: rgba(255, 159, 28, 0.15) !important;
}

.mob-fix-panel .active-bg svg,
.mob-fix-panel .active-bg .text-a-icon {
    color: var(--mangusta-orange) !important;
}

/* =========================
   🎯 UI ELEMENTS
   ========================= */

.swiper-pagination-bullet-active {
    background: var(--mangusta-orange) !important;
}

a:hover {
    color: var(--mangusta-orange);
}

/* =========================
   🟠 CHECKOUT
   ========================= */

#button-register,
#button-confirm,
.checkout-btn,
.confirm-block .btn {
    background-color: var(--mangusta-orange) !important;
    border-color: var(--mangusta-orange) !important;
    color: #fff !important;
}

#button-register:hover,
#button-confirm:hover {
    background-color: var(--mangusta-orange-hover) !important;
}

/* =========================
   🟢 TRUST ELEMENTS
   ========================= */

.footer-ribbon {
    background: var(--mangusta-green) !important;
}

.footer-ribbon span {
    color: #fff !important;
}

footer .btn-newsletter {
    background: var(--mangusta-green) !important;
}

footer .btn-newsletter:hover {
    background: var(--mangusta-green-hover) !important;
}

/* =========================
   🟢 FORM UX
   ========================= */

input:focus,
select:focus,
textarea:focus {
    border-color: var(--mangusta-green) !important;
    box-shadow: 0 0 0 2px rgba(81, 152, 115, 0.15) !important;
}

/* =========================
   💎 GOOGLE BUTTON
   ========================= */

.popup-google-login a {
    background: linear-gradient(135deg, #FF9F1C, #ffb347);
    box-shadow: 0 6px 18px rgba(255, 159, 28, 0.3);
    border-radius: 8px;
}

.popup-google-login a:hover {
    background: linear-gradient(135deg, #e88c12, #ff9f1c);
}
/* =========================
   🔥 CHECKOUT PREMIUM LAYOUT
   ========================= */

#opc-shipping-address {
    display: flex;
    flex-wrap: wrap;
}

#opc-shipping-address .form-group {
    width: 50%;
    padding-right: 10px;
    margin-bottom: 15px;
}

/* FULL WIDTH FIELDS */
#opc-shipping-address .form-group.full-width {
    width: 100%;
    padding-right: 0;
}

/* ORDINE CORECTĂ */

/* tara */
#opc-shipping-address .form-group:nth-child(1) { order: 1; }

/* judet */
#opc-shipping-address .form-group:nth-child(2) { order: 2; }

/* adresa */
#opc-shipping-address .form-group:nth-child(4) { order: 3; }

/* oras */
#opc-shipping-address .form-group:nth-child(3) { order: 4; }

/* cod postal */
#opc-shipping-address .form-group:nth-child(5) { 
    order: 5;
    width: 100%;
    padding-right: 0;
}

/* companie */
#opc-shipping-address .form-group:nth-child(6) { 
    order: 6;
    width: 100%;
    padding-right: 0;
}

/* MOBILE */
@media (max-width: 768px) {
    #opc-shipping-address .form-group {
        width: 100%;
        padding-right: 0;
    }
}
#toggle-company {
    margin-right: 6px;
    transform: scale(1.1);
}
#company-field.hidden,
#cui-field.hidden {
    display: none;
}
/* 🔥 ALIGN CHECKBOX LIKE PRO */
.chm-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* 🔥 ALIGN FIELD HEIGHT */
#toggle-company {
    transform: scale(1.1);
}
/* 🔥 FIX ALIGN ROW */
.checkout-customer .form-group {
    margin-bottom: 15px;
}

/* 🔥 ALIGN CHECKBOX PERFECT */
.chm-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
}

/* 🔥 FIX VERTICAL ALIGN */
.d-flex.align-items-center {
    display: flex;
    align-items: center;
}
#company-field,
#cui-field {
    background: #fff8f0;
    padding: 10px;
    border-radius: 6px;
    margin-top: 5px;
}
.checkout-customer .form-group {
    margin-bottom: 14px;
}

.opc-label {
    font-weight: 600;
    font-size: 13px;
}
.form-control:focus {
    border-color: #FF9F1C;
    box-shadow: 0 0 0 2px rgba(255,159,28,0.2);
}
/* =========================
   /* =========================
   🔥 CTA BADGES PRO VERSION
   ========================= */

.cta-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.cta-badges .badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #f1f1f1;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    transition: all 0.2s ease;
}

/* ICON */
.cta-badges .badge-item i {
    background: rgba(255,159,28,0.1);
    color: var(--mangusta-orange);
    font-size: 16px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* HOVER PREMIUM */
.cta-badges .badge-item:hover {
    border-color: var(--mangusta-orange);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

/* MOBILE */
@media (max-width: 768px) {
    .cta-badges {
        gap: 10px;
    }

    .cta-badges .badge-item {
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* =========================
   🔴 ERORI VALIDARE CHECKOUT
   ========================= */

/* Câmpuri cu eroare */
.form-control.error_input_checkout {
    border-color: #e53935 !important;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.15) !important;
}

/* Label cu eroare */
.control-label.error_input_checkout {
    color: #e53935 !important;
}

/* Mesaj eroare sub camp */
.opc-text-error {
    color: #e53935;
    font-size: 12px;
    margin-top: 4px;
}

/* Checkbox termeni cu eroare */
.error-checkbox {
    border: 1px solid #e53935 !important;
    border-radius: 6px;
    padding: 6px 8px;
    background: rgba(229, 57, 53, 0.04);
}

.error-checkbox .chm-checkbox {
    color: #e53935;
}

/* Buton cu animatie de eroare */
@keyframes error-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(229,57,53,0.5); }
    50%  { box-shadow: 0 0 0 8px rgba(229,57,53,0); }
    100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}

.btn-error-pulse {
    animation: error-pulse 0.6s ease 3;
    border-color: #e53935 !important;
}

/* =========================
   MODIFICARI CHECKOUT
   ========================= */

/* 1. Butoane + upsell produse - portocaliu */
.btn-add-to-cart {
    background-color: var(--mangusta-orange) !important;
    border-color: var(--mangusta-orange) !important;
    color: #fff !important;
}
.btn-add-to-cart:hover {
    background-color: var(--mangusta-orange-hover) !important;
    border-color: var(--mangusta-orange-hover) !important;
}

/* 2. Radio buttons plata si transport - portocaliu */
.chm-radio label input[type="radio"]:checked {
    background: var(--mangusta-orange) !important;
    border: solid 1px var(--mangusta-orange) !important;
}

/* 3. Bara progres livrare gratuita - verde */
.free-ship-bar-fill {
    background: var(--mangusta-green) !important;
}
/* Textul "Pentru livrare gratuita mai ai nevoie de:" - negru (neatins) */
/* Caseta cu suma (60,05 lei) - verde */
.free-ship-info span,
.free-ship-info .label,
.free-ship-info b,
.free-ship-info strong {
    background: var(--mangusta-green) !important;
    border-color: var(--mangusta-green) !important;
    color: #fff !important;
}
/* Caseta atins prag "Livrare gratuita" - verde */
.free-ship-info.active-free-ship {
    color: var(--mangusta-green) !important;
    border-color: var(--mangusta-green) !important;
}

/* 4. Link Termeni si Conditii - verde */
.checkout-agree a {
    color: var(--mangusta-green) !important;
    font-weight: 600;
}
.checkout-agree a:hover {
    color: var(--mangusta-green-hover) !important;
    text-decoration: underline;
}

/* =========================
   📋 SHORT DESCRIPTION PRODUS
   ========================= */

.text_short_description ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.text_short_description li {
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    line-height: 1.6;
}

.text_short_description li:last-child {
    border-bottom: none;
}

/* =========================
   🔵 GOOGLE LOGIN BUTTON — Light Theme Official
   ========================= */

.popup-google-login a {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px #DADCE0 !important;
    border-radius: 4px !important;
    color: #3C4043 !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.25px !important;
    padding: 10px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: box-shadow 0.2s ease !important;
}

.popup-google-login a:hover {
    background: #f8f8f8 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 0 1px #DADCE0 !important;
}

/* Fix text vizibil buton Google */
.popup-google-login a,
.popup-google-login a span,
.popup-google-login a div {
    color: #3C4043 !important;
}

/* =========================
   🔵 GOOGLE LOGIN — Pagina Înregistrare
   ========================= */

.googleLoginAnchor {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px #DADCE0 !important;
    border-radius: 4px !important;
    color: #3C4043 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border: none !important;
    transition: box-shadow 0.2s ease !important;
}

.googleLoginAnchor:hover {
    background: #f8f8f8 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 0 1px #DADCE0 !important;
    color: #3C4043 !important;
}

.googleLoginAnchor span,
.googleLoginAnchor div {
    color: #3C4043 !important;
}

/* Fix culoare text Google buttons - fortat */
.googleLoginAnchor,
.googleLoginAnchor:link,
.googleLoginAnchor:visited,
.googleLoginAnchor:active,
.popup-google-login a,
.popup-google-login a:link,
.popup-google-login a:visited,
.popup-google-login a:active {
    color: #3C4043 !important;
}

/* =========================
   🔵 GOOGLE BUTTON — Official Light Theme
   per Google Branding Guidelines
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

.googleLoginAnchor,
.googleLoginAnchor:link,
.googleLoginAnchor:visited,
.googleLoginAnchor:active,
.popup-google-login a,
.popup-google-login a:link,
.popup-google-login a:visited,
.popup-google-login a:active {
    background: #FFFFFF !important;
    border: 1px solid #747775 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    color: #1F1F1F !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 10px 12px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: background 0.2s ease !important;
}

.googleLoginAnchor:hover,
.popup-google-login a:hover {
    background: #f8f9fa !important;
    color: #1F1F1F !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}

.googleLoginAnchor *,
.popup-google-login a * {
    color: #1F1F1F !important;
    font-family: 'Roboto', sans-serif !important;
}

/* =========================
   📱 FOOTER RIBBON — Mobile Fix
   ========================= */

@media (max-width: 767px) {
    .footer-ribbon {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    .footer-ribbon span {
        transform: none !important;
        -moz-transform: none !important;
        -o-transform: none !important;
        -ms-transform: none !important;
        font-size: 13px !important;
        line-height: 18px !important;
        display: block !important;
        padding: 0 10px !important;
    }
}