/* ============================================
   CHECKOUT PAGE STYLES
   ============================================ */

.checkout-page-wrapper {
    background-color: var(--blanco);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0 100px 0;
    gap: 50px;
    width: 100%;
    min-height: 100vh;
}

/* ============================================
   LOADING & EMPTY STATES
   ============================================ */

.checkout-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    gap: 20px;
}

.checkout-loading .spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--grisgris-30);
    border-top-color: var(--primario);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   NO PERMISSION STATE
   ============================================ */

.checkout-no-permission {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 30px;
    max-width: 600px;
    text-align: center;
}

.no-permission-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-no-permission h2 {
    font-family: var(--title-large-font-family);
    font-size: var(--title-large-font-size);
    font-weight: 600;
    line-height: var(--title-large-line-height);
    color: var(--black-fonts-headings);
    margin: 0;
}

.checkout-no-permission p {
    font-family: var(--body-large-font-family);
    font-size: var(--body-large-font-size);
    line-height: var(--body-large-line-height);
    color: var(--gris-50);
    margin: 0;
}

.no-permission-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.btn-volver-cesta {
    background-color: var(--primario);
    color: var(--blanco);
    border: none;
    border-radius: 6px;
    padding: 15px 30px;
    font-family: var(--title-medium-font-family);
    font-size: var(--title-medium-font-size);
    font-weight: var(--title-medium-font-weight);
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-volver-cesta:hover {
    background-color: var(--primaryprimary-60);
}

.contact-admin-hint {
    font-size: 14px;
    color: var(--gris-50);
    margin-top: 10px;
}

/* ============================================
   EMPTY CART STATE
   ============================================ */

.checkout-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 30px;
    max-width: 500px;
    text-align: center;
}

.checkout-empty h2 {
    font-family: var(--title-large-font-family);
    font-size: var(--title-large-font-size);
    font-weight: 600;
    color: var(--black-fonts-headings);
    margin: 0;
}

.checkout-empty p {
    font-family: var(--body-large-font-family);
    font-size: var(--body-large-font-size);
    color: var(--gris-50);
    margin: 0;
}

.btn-volver-productos {
    background-color: var(--primario);
    color: var(--blanco);
    border: none;
    border-radius: 6px;
    padding: 15px 30px;
    font-family: var(--title-medium-font-family);
    font-size: var(--title-medium-font-size);
    font-weight: var(--title-medium-font-weight);
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-volver-productos:hover {
    background-color: var(--primaryprimary-60);
}

/* ============================================
   TABS HEADER
   ============================================ */

.checkout-tabs-header {
    display: flex;
    width: 640px;
    gap: 0;
}

.checkout-tabs-header .tab-item {
    flex: 1;
    padding: 0 0 20px 0;
    text-align: center;
    border-bottom: 1px solid var(--grisgris-30);
    cursor: pointer;
    transition: all 0.3s;
}

.checkout-tabs-header .tab-item.active {
    border-bottom: 1px solid var(--negro);
}

.checkout-tabs-header .tab-item span {
    font-family: var(--title-large-font-family);
    font-size: var(--title-large-font-size);
    font-weight: var(--title-large-font-weight);
    line-height: var(--title-large-line-height);
    color: var(--negro);
}

.checkout-tabs-header .tab-item:not(.active) span {
    color: var(--gris-50);
}

.checkout-tabs-header .tab-item:last-child {
    text-align: right;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.checkout-main-content {
    display: flex;
    gap: 50px;
    padding: 0 115px;
    width: 100%;
    max-width: 1920px;
    box-sizing: border-box;
}

/* ============================================
   LEFT COLUMN - FORMS
   ============================================ */

.checkout-left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.checkout-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section-header h2 {
    font-family: var(--title-large-font-family);
    font-size: var(--title-large-font-size);
    font-weight: var(--title-large-font-weight);
    line-height: var(--title-large-line-height);
    color: var(--black-fonts-headings);
    margin: 0;
}

.section-line {
    height: 1px;
    width: 100%;
    background-color: var(--grisgris-30);
}

/* ============================================
   DIRECCIONES
   ============================================ */

.direcciones-lista {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.direccion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    cursor: pointer;
    transition: background-color 0.2s;
}

.direccion-row:hover {
    background-color: var(--grisgris-10);
}

.direccion-row.selected {
    background-color: var(--primaryprimary-10);
}

.direccion-radio {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.radio-outer {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--grisgris-50);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}

.radio-outer.checked {
    border-color: var(--primario);
}

.radio-inner {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primario);
}

.direccion-text {
    flex: 1;
    display: flex;
    align-items: center;
}

.direccion-full {
    font-family: var(--label-large-font-family);
    font-size: var(--label-large-font-size);
    font-weight: var(--label-large-font-weight);
    line-height: var(--label-large-line-height);
    color: var(--negro);
}

.btn-edit-direccion {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: var(--gris-50);
    transition: color 0.2s;
}

.btn-edit-direccion:hover {
    color: var(--primario);
}

.no-direcciones {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    background-color: var(--grisgris-10);
    border-radius: 8px;
    text-align: center;
}

.btn-add-direccion {
    background-color: var(--primario);
    color: var(--blanco);
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-family: var(--title-medium-font-family);
    font-size: var(--title-medium-font-size);
    font-weight: var(--title-medium-font-weight);
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-add-direccion:hover {
    background-color: var(--primaryprimary-60);
}

/* ============================================
   DATOS PEDIDO INTERNO
   ============================================ */

.section-header-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
}

.section-title-group {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.section-title-group h2 {
    font-family: var(--title-large-font-family);
    font-size: var(--title-large-font-size);
    font-weight: var(--title-large-font-weight);
    line-height: var(--title-large-line-height);
    color: var(--black-fonts-headings);
    margin: 0;
}

.optional-label {
    font-family: var(--body-large-font-family);
    font-size: var(--body-large-font-size);
    font-weight: var(--body-large-font-weight);
    line-height: var(--body-large-line-height);
    letter-spacing: var(--body-large-letter-spacing);
    color: var(--gris-50);
}

.btn-toggle-section {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: var(--gris-50);
    transition: color 0.2s, transform 0.2s;
}

.btn-toggle-section:hover {
    color: var(--primario);
}

.datos-pedido-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font-family: var(--title-medium-font-family);
    font-size: var(--title-medium-font-size);
    font-weight: var(--title-medium-font-weight);
    line-height: var(--title-medium-line-height);
    color: var(--black-fonts-headings);
}

.form-field input {
    background-color: var(--grisgris-10);
    border: none;
    border-radius: 6px;
    padding: 16px;
    font-family: var(--l-body-0-font-family);
    font-size: var(--l-body-0-font-size);
    font-weight: var(--l-body-0-font-weight);
    color: var(--negro);
    transition: background-color 0.2s;
}

.form-field input::placeholder {
    color: var(--gris-50);
}

.form-field input:focus {
    outline: 2px solid var(--primario);
    background-color: var(--blanco);
}

/* ============================================
   INFORMACIÓN PARA LA ENTREGA
   ============================================ */

.comentario-input {
    width: 100%;
}

.comentario-input input {
    width: 100%;
    height: 128px;
    background-color: var(--grisgris-10);
    border: none;
    border-radius: 6px;
    padding: 17px 16px;
    font-family: var(--l-body-0-font-family);
    font-size: var(--l-body-0-font-size);
    font-weight: var(--l-body-0-font-weight);
    color: var(--negro);
    resize: none;
    box-sizing: border-box;
}

.comentario-input input::placeholder {
    color: var(--gris-50);
}

.comentario-input input:focus {
    outline: 2px solid var(--primario);
    background-color: var(--blanco);
}

/* ============================================
   RIGHT COLUMN - SUMMARY
   ============================================ */

.checkout-right-column {
    width: 673px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
}

/* ============================================
   PRODUCTOS BOX
   ============================================ */

.productos-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.productos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.productos-count {
    font-family: var(--body-large-font-family);
    font-size: var(--body-large-font-size);
    font-weight: var(--body-large-font-weight);
    line-height: var(--body-large-line-height);
    letter-spacing: var(--body-large-letter-spacing);
    color: var(--black-fonts-headings);
}

.btn-modificar {
    background: none;
    border: none;
    font-family: var(--body-large-font-family);
    font-size: var(--body-large-font-size);
    font-weight: var(--body-large-font-weight);
    line-height: var(--body-large-line-height);
    letter-spacing: var(--body-large-letter-spacing);
    color: var(--black-fonts-headings);
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

.btn-modificar:hover {
    color: var(--primario);
}

.productos-grid {
    border: 1px solid var(--negro);
    border-radius: 15px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.producto-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding-bottom: 20px;
}

.producto-separator {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, var(--grisgris-30), transparent);
    border-style: dashed;
}

.producto-imagen {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 14px;
    flex-shrink: 0;
    cursor: pointer;
}

.producto-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.producto-nombre {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--negro);
    cursor: pointer;
}

.producto-nombre:hover {
    color: var(--primario);
}

.producto-ref {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: normal;
    color: var(--negro);
}

.producto-acciones {
    display: flex;
    gap: 5px;
    align-items: center;
}

.regalo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.btn-ver {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--negro);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    transition: color 0.2s;
}

.btn-ver:hover {
    color: var(--primario);
}

.productos-more {
    text-align: center;
    padding-top: 10px;
    font-family: var(--body-large-font-family);
    font-size: var(--body-large-font-size);
    color: var(--gris-50);
}

/* ============================================
   TOTALES BOX
   ============================================ */

.totales-box {
    width: 100%;
    background-color: var(--grisgris-10);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-label {
    font-family: var(--title-medium-font-family);
    font-size: var(--title-medium-font-size);
    font-weight: var(--title-medium-font-weight);
    line-height: var(--title-medium-line-height);
    letter-spacing: var(--title-medium-letter-spacing);
    color: var(--neutral-07100);
}

.total-value {
    font-family: var(--title-medium-font-family);
    font-size: var(--title-medium-font-size);
    font-weight: var(--title-medium-font-weight);
    line-height: var(--title-medium-line-height);
    letter-spacing: var(--title-medium-letter-spacing);
    color: var(--neutral-07100);
    text-align: right;
}

.total-separator {
    height: 1px;
    width: 100%;
    background-color: var(--negro);
}

.total-final {
    margin-top: 10px;
}

.total-label-final {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--neutral-07100);
}

.total-value-final {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--neutral-07100);
    text-align: right;
}

/* ============================================
   FOOTER ACTIONS
   ============================================ */

.checkout-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 115px;
    width: 100%;
    max-width: 1920px;
    box-sizing: border-box;
}

.btn-volver {
    background-color: var(--blanco);
    border: 1px solid var(--primario);
    color: var(--primario);
    border-radius: 6px;
    padding: 15px 24px;
    width: 335px;
    height: 54px;
    font-family: var(--title-medium-font-family);
    font-size: var(--title-medium-font-size);
    font-weight: var(--title-medium-font-weight);
    letter-spacing: var(--title-medium-letter-spacing);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-volver:hover {
    background-color: var(--primaryprimary-10);
}

.btn-tramitar {
    background-color: var(--primario);
    color: var(--blanco);
    border: none;
    border-radius: 6px;
    padding: 15px 24px;
    width: 673px;
    height: 54px;
    font-family: var(--title-medium-font-family);
    font-size: var(--title-medium-font-size);
    font-weight: var(--title-medium-font-weight);
    letter-spacing: var(--title-medium-letter-spacing);
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-tramitar:hover:not(:disabled) {
    background-color: var(--primaryprimary-60);
}

.btn-tramitar:disabled {
    background-color: var(--gris-40);
    cursor: not-allowed;
}

.spinner-btn {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--blanco);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   GUARDAR PEDIDO
   ============================================ */

.checkout-guardar {
    text-align: center;
    width: 100%;
}

.btn-guardar-text {
    background: none;
    border: none;
    font-family: var(--body-large-font-family);
    font-size: var(--body-large-font-size);
    font-weight: var(--body-large-font-weight);
    color: var(--black-fonts-headings);
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;
}

.btn-guardar-text:hover {
    color: var(--primario);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1440px) {
    .checkout-main-content {
        padding: 0 60px;
    }
    
    .checkout-footer-actions {
        padding: 0 60px;
    }
}

@media (max-width: 1200px) {
    .checkout-main-content {
        flex-direction: column;
        align-items: center;
    }
    
    .checkout-right-column {
        width: 100%;
        max-width: 673px;
    }
    
    .checkout-footer-actions {
        flex-direction: column;
        gap: 20px;
    }
    
    .btn-volver,
    .btn-tramitar {
        width: 100%;
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    .checkout-page-wrapper {
        padding: 30px 0 50px 0;
        gap: 30px;
    }
    
    .checkout-tabs-header {
        width: 100%;
        padding: 0 20px;
    }
    
    .checkout-main-content {
        padding: 0 20px;
        gap: 30px;
    }
    
    .checkout-footer-actions {
        padding: 0 20px;
    }
    
    .checkout-left-column {
        gap: 50px;
    }
    
    .productos-grid {
        padding: 20px;
    }
}