/* =======================================================
   HERO SUPERIOR
======================================================= */
.yanay-confirm-hero {
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
                url('https://haciendayanay.com/wp-content/uploads/2024/11/hero-y-3.jpg')
                center/cover no-repeat;
    padding: 100px 20px;
    text-align: center;
    color: white;
}

.yanay-confirm-hero h1 {
    font-size: 3rem;
    font-weight: 700;
}

.yanay-confirm-hero p {
    font-size: 1.25rem;
    margin-top: 8px;
    opacity: 0.9;
}


/* =======================================================
   TARJETA PRINCIPAL
======================================================= */
.yanay-confirm-wrapper {
    max-width: 1100px;
    margin: 60px auto;
    padding: 20px;
}

.yanay-confirm-card {
    background: #fff;
    padding: 45px;
    border-radius: 24px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
    border: 1px solid #eee;
}


/* =======================================================
   TÍTULOS PRINCIPALES - Más elegantes
======================================================= */
.yanay-confirm-card h2,
.yanay-confirm-card h3,
.mphb-confirm-section-title,
.mphb-room-details-title,
.mphb-price-breakdown-title,
.mphb-customer-details-title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #1d5c42 !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 3px solid #e8f5e9 !important;
}

/* Subtítulos más pequeños */
.yanay-confirm-card h4,
.yanay-confirm-card h5 {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: #2d6a4f !important;
    margin-top: 25px !important;
    margin-bottom: 12px !important;
}


/* =======================================================
   CARDS INTERNAS - Más refinadas
======================================================= */
.mphb-room-details,
.mphb-price-breakdown,
.mphb-confirm-section,
.mphb-customer-details {
    background: linear-gradient(135deg, #f8fdf9 0%, #ffffff 100%) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    border: 2px solid #e8f5e9 !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 12px rgba(29, 92, 66, 0.08) !important;
    transition: all 0.3s ease !important;
}

.mphb-room-details:hover,
.mphb-price-breakdown:hover,
.mphb-confirm-section:hover,
.mphb-customer-details:hover {
    box-shadow: 0 6px 20px rgba(29, 92, 66, 0.12) !important;
    transform: translateY(-2px) !important;
}


/* =======================================================
   TABLA DE PRECIOS - Más clara y organizada
======================================================= */
.mphb-price-breakdown table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

.mphb-price-breakdown table tr {
    background: white !important;
    transition: background 0.2s ease !important;
}

.mphb-price-breakdown table tr:hover {
    background: #f0f8f4 !important;
}

.mphb-price-breakdown table td {
    padding: 14px 16px !important;
    font-size: 1rem !important;
    border: none !important;
}

.mphb-price-breakdown table td:first-child {
    font-weight: 600 !important;
    color: #333 !important;
    border-radius: 8px 0 0 8px !important;
}

.mphb-price-breakdown table td:last-child {
    text-align: right !important;
    font-weight: 700 !important;
    color: #1d5c42 !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Total Price - Más destacado */
.mphb-total-price {
    background: linear-gradient(135deg, #1d5c42 0%, #2d6a4f 100%) !important;
    color: white !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    padding: 20px 30px !important;
    border-radius: 16px !important;
    margin-top: 20px !important;
    text-align: center !important;
    box-shadow: 0 6px 20px rgba(29, 92, 66, 0.3) !important;
}


/* =======================================================
   FORMULARIO - Labels más bonitos
======================================================= */
.mphb-label,
.yanay-confirm-card label {
    display: block !important;
    font-weight: 600 !important;
    color: #2d4a3e !important;
    margin-bottom: 8px !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.3px !important;
}

.mphb-label .required,
label .required {
    color: #1d5c42 !important;
    margin-left: 3px !important;
}


/* =======================================================
   CAMPOS DE FORMULARIO - Más refinados
======================================================= */
.mphb-confirm-section input,
.mphb-confirm-section select,
.mphb-confirm-section textarea,
.mphb-customer-details input,
.mphb-customer-details select,
.mphb-customer-details textarea,
.yanay-confirm-card input[type="text"],
.yanay-confirm-card input[type="email"],
.yanay-confirm-card input[type="tel"],
.yanay-confirm-card input[type="number"],
.yanay-confirm-card select,
.yanay-confirm-card textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #d4e8dc !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    background: white !important;
    color: #333 !important;
    font-family: inherit !important;
}

/* Placeholder más suave */
.yanay-confirm-card input::placeholder,
.yanay-confirm-card textarea::placeholder {
    color: #95a5a6 !important;
    opacity: 1 !important;
}

/* Focus state - Más elegante */
.mphb-confirm-section input:focus,
.mphb-confirm-section select:focus,
.mphb-confirm-section textarea:focus,
.yanay-confirm-card input:focus,
.yanay-confirm-card select:focus,
.yanay-confirm-card textarea:focus {
    border-color: #1d5c42 !important;
    box-shadow: 0 0 0 4px rgba(29, 92, 66, 0.1) !important;
    outline: none !important;
    background: #fafffe !important;
}

/* Select dropdown - Mejorar apariencia */
.yanay-confirm-card select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d5c42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
}

/* Textarea más espacioso */
.yanay-confirm-card textarea {
    min-height: 100px !important;
    resize: vertical !important;
}


/* =======================================================
   VALIDACIÓN - Sin rosa, todo verde
======================================================= */
/* Remover validación rosa del navegador */
input:invalid,
select:invalid,
textarea:invalid {
    border-color: #d4e8dc !important;
    box-shadow: none !important;
}

input:valid,
select:valid,
textarea:valid {
    border-color: #d4e8dc !important;
}

/* Solo mostrar verde cuando el usuario ha interactuado */
input:not(:placeholder-shown):valid,
select:not(:placeholder-shown):valid,
textarea:not(:placeholder-shown):valid {
    border-color: #52b788 !important;
}

/* Mensajes de error personalizados */
.mphb-error,
.error {
    color: #c62828 !important;
    font-size: 0.875rem !important;
    margin-top: 6px !important;
    display: block !important;
}

/* Campos con error */
input.mphb-error,
select.mphb-error,
textarea.mphb-error {
    border-color: #ef5350 !important;
    background: #fff5f5 !important;
}


/* =======================================================
   SECCIÓN DE INFORMACIÓN - Mejorar legibilidad
======================================================= */
.mphb-room-details p,
.mphb-confirm-section p {
    line-height: 1.8 !important;
    color: #555 !important;
    margin-bottom: 12px !important;
}

.mphb-room-details strong,
.mphb-confirm-section strong {
    color: #1d5c42 !important;
    font-weight: 600 !important;
}


/* =======================================================
   BOTÓN FINALIZAR RESERVA - Más impactante
======================================================= */
.mphb-confirm-reservation,
.yanay-confirm-card button[type="submit"],
.yanay-confirm-card input[type="submit"] {
    background: linear-gradient(135deg, #1d5c42 0%, #2d6a4f 100%) !important;
    padding: 18px 45px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    border-radius: 14px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-top: 25px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(29, 92, 66, 0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.mphb-confirm-reservation:hover,
.yanay-confirm-card button[type="submit"]:hover,
.yanay-confirm-card input[type="submit"]:hover {
    background: linear-gradient(135deg, #154d3a 0%, #1d5c42 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(29, 92, 66, 0.4) !important;
}

.mphb-confirm-reservation:active {
    transform: translateY(-1px) !important;
}


/* =======================================================
   ELEMENTOS DE LISTA - Más organizados
======================================================= */
.yanay-confirm-card ul,
.yanay-confirm-card ol {
    padding-left: 25px !important;
    margin: 15px 0 !important;
}

.yanay-confirm-card li {
    margin-bottom: 10px !important;
    line-height: 1.6 !important;
    color: #555 !important;
}


/* =======================================================
   ESPACIADO Y MÁRGENES - Más armonioso
======================================================= */
.yanay-confirm-card > *:first-child {
    margin-top: 0 !important;
}

.yanay-confirm-card > *:last-child {
    margin-bottom: 0 !important;
}

/* Separación entre secciones */
.mphb-confirm-section + .mphb-confirm-section,
.mphb-room-details + .mphb-customer-details {
    margin-top: 35px !important;
}


/* =======================================================
   RESPONSIVE - Optimizado para móviles
======================================================= */
@media (max-width: 768px) {
    .yanay-confirm-card {
        padding: 25px 20px;
        border-radius: 16px;
    }

    .yanay-confirm-hero h1 {
        font-size: 2.2rem;
    }

    .yanay-confirm-card h2,
    .yanay-confirm-card h3,
    .mphb-confirm-section-title,
    .mphb-room-details-title,
    .mphb-price-breakdown-title,
    .mphb-customer-details-title {
        font-size: 1.5rem !important;
    }

    .mphb-room-details,
    .mphb-price-breakdown,
    .mphb-confirm-section,
    .mphb-customer-details {
        padding: 20px !important;
    }

    .mphb-total-price {
        font-size: 1.3rem !important;
        padding: 16px 20px !important;
    }

    .mphb-confirm-reservation,
    .yanay-confirm-card button[type="submit"] {
        width: 100% !important;
        padding: 16px 30px !important;
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    .yanay-confirm-wrapper {
        padding: 15px;
        margin: 30px auto;
    }

    .mphb-price-breakdown table td {
        padding: 10px 8px !important;
        font-size: 0.9rem !important;
    }
}


/* =======================================================
   ANIMACIONES SUTILES
======================================================= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.yanay-confirm-card {
    animation: fadeIn 0.5s ease-out;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}


/* =======================================================
   ACCESIBILIDAD
======================================================= */
/* Focus visible para navegación con teclado */
*:focus-visible {
    outline: 3px solid #1d5c42 !important;
    outline-offset: 2px !important;
}

/* Mejorar contraste de texto */
.yanay-confirm-card {
    color: #333 !important;
}

/* Links más accesibles */
.yanay-confirm-card a {
    color: #1d5c42 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.yanay-confirm-card a:hover {
    color: #2d6a4f !important;
}





















/* Centrar el botón de checkout de MotoPress */
.mphb_sc_checkout-submit-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 30px !important;
}

/* Asegurar que el botón no tenga floats */
.mphb_sc_checkout-submit-wrapper input[type="submit"],
.mphb_sc_checkout-submit-wrapper button[type="submit"] {
    margin: 0 auto !important;
    display: block !important;
}