/* ============================================
   CARRITO - FONDO Y FUENTE GENERAL
   ============================================ */

#modal-cart {
    background: #f5f0eb !important;
    font-family: sans-serif !important;
}

#modal-cart .modal-body {
    padding: 20px !important;
    background: #f5f0eb !important;
}

#modal-cart .modal-header {
    background: #f5f0eb !important;
    border-bottom: 1px solid #e0d8d0 !important;
}

#modal-cart * {
    font-family: sans-serif !important;
    color: #333 !important;
}

#modal-cart a {
    color: #EEACC8 !important;
    text-decoration: none !important;
}

#modal-cart a:hover {
    color: #ff5aa5 !important;
}

/* ============================================
   ITEMS DEL CARRITO
   ============================================ */

.js-ajax-cart-list .js-cart-item {
    display: flex !important;
    align-items: center !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #e0d8d0 !important;
    position: relative !important;
    background: transparent !important;
}

.js-ajax-cart-list .js-cart-item:last-child {
    border-bottom: none !important;
}

.js-ajax-cart-list .js-cart-item .col-2 {
    flex: 0 0 80px !important;
    max-width: 80px !important;
    padding: 0 !important;
    margin-right: 12px !important;
    align-self: center !important;
}

.js-ajax-cart-list .js-cart-item .col-2 img {
    width: 100% !important;
    border-radius: 4px !important;
}

.js-ajax-cart-list .js-cart-item .col-10 {
    flex: 1 !important;
    padding: 0 !important;
    padding-right: 10px !important;
    max-width: calc(100% - 115px) !important;
}

/* Nombre en negro, variante en gris */
.js-ajax-cart-list .cart-item-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    color: #333 !important;
}

.js-ajax-cart-list .cart-item-name span,
.js-ajax-cart-list .cart-item-variant {
    color: #999 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.js-ajax-cart-list .js-cart-item-subtotal {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 8px !important;
    display: block !important;
    width: 100% !important;
}

.js-ajax-cart-list .cart-item-quantity {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
.js-shipping-method {
    padding: 8px !important;
   
}

/* ============================================
   TACHO DE BASURA - CORREGIDO
   ============================================ */

.js-ajax-cart-list .col-1.cart-item-delete {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    max-width: 30px !important;
    padding: 0 !important;
    transform: none !important;
    align-self: center !important;
}

.js-ajax-cart-list .col-1.cart-item-delete button {
    background: transparent !important;
    border: none !important;
    color: #999 !important;
    font-size: 18px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

/* ============================================
   CONTADOR
   ============================================ */

.js-ajax-cart-list .form-quantity {
    display: inline-flex !important;
    align-items: center !important;
    background: #f5fccd !important;
    border: 1px solid #d4ed3f !important;
    border-radius: 20px !important;
    padding: 4px 8px !important;
}

.js-ajax-cart-list .form-quantity .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
}

.js-ajax-cart-list .cart-item-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: all !important;
    cursor: pointer !important;
}

.js-ajax-cart-list .cart-item-btn:hover {
    background: rgba(0,0,0,0.05) !important;
}

.js-ajax-cart-list .js-cart-quantity-input {
    width: 35px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    margin: 0 4px !important;
    color: #333 !important;
}

.js-cart-quantity-input::-webkit-outer-spin-button,
.js-cart-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

.js-cart-quantity-input[type=number] {
    -moz-appearance: textfield !important;
}

/* ============================================
   OPCIONES DE ENVÍO - CORREGIDO
   ============================================ */

#cart-shipping-container,
.js-shipping-calculator-container,
.js-shipping-calculator-response,
.js-shipping-calculator-response > div,
.js-fulfillment-info,
.js-has-new-shipping {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: transparent !important;
}

/* Cada opción de envío como caja */
.js-shipping-list-item.radio-button-item {
    list-style: none !important;
    margin-bottom: 8px !important;
}

.js-shipping-list-item.radio-button-item label.js-shipping-radio {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 15px !important;
    border: 1px solid #e0d8d0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer !important;
    width: 100% !important;
}

.js-shipping-list-item.radio-button-item input[type="radio"]:checked 
+ label.js-shipping-radio,
.js-shipping-list-item.radio-button-item label.js-shipping-radio.selected {
    border-color: #EEACC8 !important;
    background: #fff5f9 !important;
}

/* Radio button rosado */
.js-shipping-list-item input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border: 2px solid #ccc !important;
    border-radius: 50% !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    position: relative !important;
    display: inline-block !important;
}

.js-shipping-list-item input[type="radio"]:checked {
    border-color: #EEACC8 !important;
    background: #EEACC8 !important;
    box-shadow: inset 0 0 0 3px #fff !important;
}

#cart-shipping-container {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #e0d8d0 !important;
}

/* ============================================
   SUBTOTAL Y TOTAL
   ============================================ */

.js-visible-on-cart-filled.h5.row.no-gutters {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
    color: #666 !important;
    font-weight: 400 !important;
}

.js-ajax-cart-total,
.js-cart-subtotal {
    color: #333 !important;
    font-weight: 500 !important;
    text-align: right !important;
}

.js-cart-total {
    color: #EEACC8 !important;
    font-weight: 700 !important;
    font-size: 22px !important;
}

.text-accent {
    color: #333 !important;
}

/* ============================================
   BOTÓN - PLAYFAIR DISPLAY
   ============================================ */

.js-ajax-cart-submit input[type="submit"],
.js-ajax-cart-submit .btn-primary {
    width: 100% !important;
    background: linear-gradient(135deg, #ff85c8 0%, #EEACC8 100%) !important;
    border: none !important;
    color: white !important;
    padding: 14px 20px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    letter-spacing: 1px !important;
    box-shadow: 0 2px 8px rgba(255, 105, 180, 0.2) !important;
}

.js-ajax-cart-submit input[type="submit"]:hover,
.js-ajax-cart-submit .btn-primary:hover {
    background: linear-gradient(135deg, #ff75b8 0%, #ff5aa5 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3) !important;
}

/* Fila de envío generada por Tiendanube */
#modal-cart .cart-shipping-display {
    font-size: 14px !important;
    color: #666 !important;
    font-weight: 400 !important;
    margin-bottom: 6px !important;
}

#modal-cart .cart-shipping-display strong,
#modal-cart .cart-shipping-display span {
    font-weight: 400 !important;
    color: #333 !important;
}
/* Radio button visible */
#modal-cart .js-shipping-list-item input[type="radio"] {
    display: inline-block !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    border: 2px solid #ccc !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

#modal-cart .js-shipping-list-item input[type="radio"]:checked {
    border-color: #EEACC8 !important;
    background: #EEACC8 !important;
    box-shadow: inset 0 0 0 3px #fff !important;
}

/* Caja seleccionada con borde rosa */
#modal-cart .js-shipping-list-item.radio-button-item label.js-shipping-radio {
    border: 1px solid #e0d8d0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 20px 15px !important;
    cursor: pointer !important;
}

#modal-cart .js-shipping-list-item input[type="radio"]:checked + span,
#modal-cart .js-shipping-list-item.radio-button-item:has(input:checked) label.js-shipping-radio {
    border-color: #EEACC8 !important;
    background: #fff5f9 !important;
}
#modal-cart .radio-button-content {
    padding: 0 !important;
}
/* ============================================
   RESPONSIVE
   ============================================ */

@media (min-width: 768px) {
    .shipping-calculator-head.with-error {
        height: 60px;
    }
}

@media (max-width: 576px) {
    #modal-cart .modal-body {
        padding: 15px !important;
    }

    .js-ajax-cart-list .js-cart-item .col-2 {
        flex: 0 0 70px !important;
        max-width: 70px !important;
    }

    .js-ajax-cart-list .cart-item-name {
        font-size: 13px !important;
    }

    .js-ajax-cart-list .js-cart-item-subtotal {
        font-size: 15px !important;
    }

    .js-ajax-cart-list .form-quantity {
        padding: 3px 6px !important;
    }

    .js-ajax-cart-list .cart-item-btn {
        width: 22px !important;
        height: 22px !important;
    }

    .js-ajax-cart-list .js-cart-quantity-input {
        width: 30px !important;
        font-size: 13px !important;
    }

    .js-ajax-cart-list .js-cart-item {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .js-ajax-cart-list .js-cart-item .col-10 {
        max-width: calc(100% - 120px) !important;
    }

    .form-group {
        width: 40%;
    }
}

/* Input código postal */
#modal-cart .js-shipping-calculator-form .form-control {
    border: 1px solid #e0d8d0 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: #333 !important;
    height: 38px !important;
    margin-bottom: 10px !important;
}

/* Botón Calcular */
#modal-cart .js-calculate-shipping {
    background: #EEACC8 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    height: 38px !important;
    cursor: pointer !important;
}

#modal-cart .js-calculate-shipping:hover {
    background: #ff5aa5 !important;
}

/* Radio buttons más chicos */
#modal-cart .js-shipping-list-item input[type="radio"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
}

/* Espacio entre calculadora y opciones */
#modal-cart .js-shipping-calculator-head {
    margin-bottom: 0 !important;
}

#modal-cart .shipping-calculator-head {
    min-height: 0 !important;
    height: auto !important;
}

/* Arreglar superposición del formulario */
#modal-cart .js-shipping-calculator-head {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

#modal-cart .js-shipping-calculator-form,
#modal-cart .js-shipping-calculator-with-zipcode {
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

/* Radio buttons chicos sin romper el padding */
#modal-cart .js-shipping-list-item input[type="radio"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
}

#modal-cart .js-shipping-list-item label.js-shipping-radio {
    padding: 10px 12px !important;
    gap: 0 !important;
}

/* Fix espacio vacío entre precio y calculadora */
#modal-cart .js-shipping-calculator-head {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

#modal-cart .shipping-calculator-head {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 0 !important;
}

#modal-cart .js-shipping-calculator-head .js-shipping-calculator-form,
#modal-cart .js-shipping-calculator-head .js-shipping-calculator-with-zipcode {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Ocultar formulario cuando hay CP guardado */
#modal-cart .shipping-calculator-head.with-zip .js-shipping-calculator-form {
    display: none !important;
}

/* Ocultar el CP guardado cuando está en modo formulario */
#modal-cart .shipping-calculator-head.with-form .js-shipping-calculator-with-zipcode {
    display: none !important;
}