*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background: url('/images/fondo_paypal.jpg');

background:#f4f6f9;
min-height:100vh;
padding:40px;
}

/* Dark Mode Auto */
@media (prefers-color-scheme: dark){
body{
background:#b5b5b5;
color:#fff;
}
form{
background:#b5b5b5;
}
input,select{
background:#ffffff69;
color:rgb(0, 0, 0);
border:1px solid #000000;
}
}

/* CONTENEDOR GENERAL */
.contenedor,
.container,
.wrapper,
.main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 40px;
}

/* FORMULARIO */
.form,
.formulario,
.left,
.left-side {
  flex: 1;
  background: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* BLOQUE DE PAGO */
.payment,
.pago,
.right,
.right-side {
  flex: 1;
  background: #f8f9fb;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* BOTONES MÁS BONITOS */
button {
  border-radius: 8px;
  transition: 0.3s ease;
}

button:hover {
  transform: translateY(-2px);
}


@media (max-width: 768px) {
  .contenedor,
  .container,
  .wrapper,
  .main {
    flex-direction: column;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .booking-container {
    gap: 25px;
  }

  .booking-form,
  .payment-section {
    max-width: 100%;
  }
}

/* Móvil */
@media (max-width: 768px) {
  .booking-container {
    flex-direction: column;
  }
}
/* Title */

h2{
margin-bottom:25px;
font-size:26px;
}
h3{
   color: #000000; 
   text-align: center;
}

/* Form Card */

form{
background:white;
padding:30px;
border-radius:12px;
width:100%;
max-width:450px;
box-shadow:0 10px 30px rgba(0, 0, 0, 0.785);
display:flex;
flex-direction:column;
gap:15px;
}

.color{
    background: #00000060;
    border-radius: 5px;
    height: 120px;
    width: 230px;
}
/* Inputs */

input,select{
padding:12px;
border-radius:8px;
border:1px solid #ffffff;
font-size:15px;
}

input:focus,select:focus{
outline:none;
border-color:#0070f3;
}

/* Price */

.total{
margin-top:20px;
font-size:18px;
text-align:center;
}

/* Paypal container */

#paypal-button-container{
margin-top:25px;
width:100%;
max-width:450px;
}

/* Mobile */

@media(max-width:500px){

body{
padding:20px;
}

form{
padding:20px;
}

}


/* ===============================
   BOOKING PAGE ONLY
================================ */

/* EVITA que el fondo global afecte */
.booking-wrapper {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: relative;
  z-index: 10;
}

/* CARD PRINCIPAL */
.booking-card {
  background: #ffffff;
  max-width: 420px;
  width: 100%;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.25);
}

/* TÍTULO */
#tourName {
  text-align: center;
  margin-bottom: 20px;
  color: #0f172a;
}

/* FORM */
#bookingForm {
  display: grid;
  gap: 12px;
}

#bookingForm input,
#bookingForm select {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 15px;
}

#bookingForm input:focus,
#bookingForm select:focus {
  outline: none;
  border-color: #0ea5e9;
}

/* TOTAL */
.total {
  margin: 15px 0;
  padding: 12px;
  border-radius: 12px;
  background: #f1f5f9;
  text-align: center;
  font-size: 16px;
  color: #0f172a;
}

/* ===============================
   PAYPAL – AISLADO
================================ */

.paypal-wrapper {
  background: #ffffff;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  margin-top: 12px;
}

#paypal-button-container {
  display: flex;
  justify-content: center;
}

/* ⚠️ BLOQUEA DARK MODE */
body.dark .booking-card,
body.dark .paypal-wrapper,
body.dark .total {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* PAYPAL */
#paypal-button-container {
  margin-top: 10px;
}

input[type="date"] {
  cursor: pointer;
}

input[type="date"]:invalid {
  border-color: red;
}

/* PAYPAL CLEAN BACKGROUND */
.paypal-wrapper {
  background: #ffffff;
  margin-top: 15px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Opcional: centrar botones */
#paypal-button-container {
  display: flex;
  justify-content: center;
}

/* ======================================
   LAYOUT PROFESIONAL 2 COLUMNAS
====================================== */

.booking-wrapper{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:70px;
  max-width:1100px;
  margin:60px auto;
}

/* FORM CARD */
.booking-card{
  flex:1;
  max-width:500px;
  background:#ffffff;
  padding:30px;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,0.15);
}

/* PAYPAL CARD */
.paypal-wrapper{
  flex:1;
  max-width:420px;
  background:#ffffff;
  padding:25px;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

/* FORM GRID */
#bookingForm{
  display:grid;
  gap:15px;
}

#bookingForm input,
#bookingForm select{
  padding:14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  font-size:15px;
}

#bookingForm input:focus,
#bookingForm select:focus{
  outline:none;
  border-color:#0ea5e9;
}

/* TOTAL */
.paypal-wrapper .total{
  background:#f1f5f9;
  padding:18px;
  border-radius:14px;
  text-align:center;
  font-size:18px;
  margin-bottom:25px;
}

/* PAYPAL */
#paypal-button-container{
  display:flex;
  justify-content:center;
}

/* RESPONSIVE */
@media (max-width:900px){
  .booking-wrapper{
    flex-direction:column;
    align-items:center;
    gap:40px;
  }

  .booking-card,
  .paypal-wrapper{
    width:100%;
    max-width:100%;
  }
}

/* ==== FIX PAYPAL ==== */

#paypal-button-container{
  width:100% !important;
  min-height:45px;
  display:block !important;
  margin-top:20px;
}

/* Evita que flex lo colapse */
.paypal-wrapper{
  display:block !important;

  background:#ffffff;
  padding:25px;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,0.12)
}