/* Variables CSS para colores de la marca */
:root {
    --brand-gold: #FFD700;
    --brand-black: black;
    --brand-dark-grey: #333;
    --brand-light-grey: #e0e0e0;
    --brand-disabled-grey: #555;
    --brand-disabled-text: #aaa;
}

/* Estilos generales de la aplicación */
.taxi-app {
    font-family: 'Arial', sans-serif;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    overflow: hidden;
    position: relative;
    min-height: 500px;
}

/* Encabezado de la aplicación */
.taxi-header {
    background-color: var(--brand-black);
    color: #fff;
    padding: 15px 20px;
    text-align: center;
}

.taxi-header h2 {
    margin: 0;
    font-size: 20px;
    padding-bottom: 5px;
    font-family: 'Cinzel', serif;
    color: var(--brand-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.taxi-header p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #eee;
}

/* Contenido principal del formulario */
.taxi-content {
    padding: 20px;
}

/* Contenedor del selector de idioma */
.language-container {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

#language-label {
    font-size: 12px;
    color: #555;
    font-weight: 700;
}

.language-switcher {
    display: flex;
    gap: 5px;
}

.lang-btn {
    background-color: var(--brand-black);
    border: 1px solid var(--brand-gold);
    color: var(--brand-gold);
    padding: 4px 8px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    opacity: .8;
    font-family: 'Arial', sans-serif;
    min-width: 40px;
    text-align: center;
    transition: opacity .3s, background-color .3s;
    line-height: 1;
}

.lang-btn:hover { opacity: 1; }

.lang-btn.active {
    background-color: var(--brand-gold);
    color: var(--brand-black);
    opacity: 1;
    font-weight: 700;
    border-color: var(--brand-black);
}

/* Caja de entrada de pasajeros */
.passenger-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.passenger-icon { color: var(--brand-black); margin-right: 15px; font-size: 20px; }
.passenger-info { flex-grow: 1; }

.passenger-label { color: #777; font-size: 14px; margin: 0 0 5px; }

.passenger-input {
    width: 100%;
    padding: 8px 5px;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    font-weight: 700;
    outline: 0;
    background-color: transparent;
    box-sizing: border-box;
    text-align: left;
}
.passenger-input::placeholder { color: #aaa; font-weight: 400; }
.passenger-input:focus { border-bottom: 1px solid var(--brand-black); }

/* Contenedor del selector de tipo de servicio */
.service-type-selector-container {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
}
.service-type-selector-container label {
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 14px;
    color: #777;
}
#service-type-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 15px;
    box-sizing: border-box;
    font-family: inherit;
}

/* Caja de ubicación (Origen/Destino) */
.location-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    position: relative;
}
.location-icon { color: var(--brand-black); margin-right: 15px; font-size: 20px; }

#geolocation-btn {
    background: 0 0;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #555;
    padding: 0 5px;
    position: absolute;
    right: 5px; top: 50%;
    transform: translateY(-50%);
}
#geolocation-btn:hover { color: var(--brand-black); }

.location-info { flex-grow: 1; padding-right: 35px; }
.location-label { color: #777; font-size: 14px; margin: 0 0 5px; }

.location-input {
    width: 100%;
    padding: 8px 5px;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    font-weight: 700;
    outline: 0;
    background-color: transparent;
    box-sizing: border-box;
}
.location-input:focus { border-bottom: 1px solid var(--brand-black); }

/* Enlace para señalar en el mapa */
.point-on-map {
    font-size: 11px; color: #555;
    margin-top: 5px; margin-bottom: 15px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.point-on-map:hover { color: var(--brand-black); text-decoration: underline; }
.point-on-map i { font-size: 12px; }

/* Estilos para Google Places */
.pac-container{ z-index:10000 !important; background:#fff; border-radius:5px; box-shadow:0 2px 6px rgba(0,0,0,.3); border:1px solid #ddd; margin-top:2px; }
.pac-item{ padding:10px 15px; font-size:15px; cursor:pointer; border-bottom:1px solid #eee; display:flex; align-items:center; gap:10px; }
.pac-item:last-child{ border-bottom:none; }
.pac-item:hover{ background:#f0f7ff; }
.pac-item-query{ font-weight:700; }
.pac-icon{ color:#555; }
.pac-item span{ line-height:1.4; }

/* Información del viaje */
.trip-info { background:#f0f7ff; border-radius:8px; padding:15px; margin-bottom:5px; }
.trip-info h3 { color:var(--brand-black); margin-top:0; }

/* Descuentos y agencia (global) */
.agency-discount-container{
    background:#f9f9f9; padding:15px; margin-top:15px; margin-bottom:20px;
    border:1px solid #eee; border-radius:8px; display:none;
}
.agency-checkbox-label{ display:flex; align-items:center; cursor:pointer; font-size:14px; margin-bottom:10px; }
#agency-checkbox{ margin-right:8px; cursor:pointer; }

#discount-input-container{
    display:none; margin-top:10px; display:flex; align-items:center; gap:10px;
}
#discount-code-input{ flex-grow:1; padding:8px; border:1px solid #ccc; border-radius:4px; font-size:14px; }
#apply-discount-btn{
    background:var(--brand-black); color:var(--brand-gold); border:none; padding:8px 12px;
    font-size:12px; border-radius:4px; cursor:pointer; font-family:'Cinzel', serif; text-transform:uppercase;
}
#apply-discount-btn:hover{ background:var(--brand-dark-grey); }
#discount-applied-msg{ font-size:12px; color:green; font-weight:700; margin-left:10px; display:none; }
#discount-error-msg{ font-size:12px; color:red; font-weight:700; margin-left:10px; display:none; }

/* Campo “Nombre de Agencia” (global) */
.agency-name-container{ margin-top:10px; display:none; }
.agency-name-container label{ display:block; font-weight:700; margin-bottom:5px; font-size:14px; color:#555; }
#agency-name-input{ width:100%; padding:8px; border:1px solid #ccc; border-radius:4px; font-size:14px; box-sizing:border-box; }

/* Selector de moneda */
.currency-switcher{ text-align:right; margin-top:0; margin-bottom:15px; }
#currency-btn{
    background:var(--brand-black); border:1px solid var(--brand-gold); color:var(--brand-gold);
    padding:5px 10px; font-size:12px; border-radius:5px; cursor:pointer; font-family:'Cinzel', serif; text-transform:uppercase;
}
#currency-btn:hover{ background:var(--brand-dark-grey); }
#currency-btn:disabled{
    background:var(--brand-disabled-grey); color:var(--brand-disabled-text); cursor:not-allowed; border-color:#777;
}

/* Categorías */
.category-title{ font-size:20px; font-weight:700; margin-bottom:15px; }
.service-category{
    border:1px solid #ddd; border-radius:8px; padding:15px; margin-bottom:15px; cursor:pointer;
    transition: border-color .3s, background-color .3s; display:none;
}
.service-category:hover{ background:#f8f8f8; }
.service-category.selected{ border-color:var(--brand-black); background:var(--brand-light-grey); }

.category-header{ display:flex; justify-content:space-between; align-items:center; }
.category-info{ flex-grow:1; margin-right:10px; }
.category-name{ font-weight:700; font-size:18px; margin:0 0 5px; }
.category-details{ color:#666; font-size:14px; margin:2px 0; }
.category-image{ width:160px; height:120px; object-fit:contain; flex-shrink:0; transition:opacity .5s ease-in-out; }

.price-display{ font-weight:700; font-size:20px; color:var(--brand-black); margin-top:10px; text-align:right; }
.original-price{ text-decoration:line-through; color:#999; font-size:16px; margin-left:10px; font-weight:400; }

/* Formulario dentro de la categoría */
.booking-form{ margin-top:15px; border-top:1px solid #eee; padding-top:15px; display:none; }
.service-category.selected .booking-form{ display:block; }

.form-group{ margin-bottom:15px; }
.form-group label{ display:block; font-weight:700; margin-bottom:5px; font-size:14px; }
.form-group input[type=date],
.form-group input[type=tel],
.form-group input[type=text],
.form-group input[type=time],
.form-group textarea{
    width:100%; padding:10px; border:1px solid #ddd; border-radius:5px; font-size:15px; box-sizing:border-box; font-family:inherit;
}
.form-group textarea{ min-height:60px; resize:vertical; }
.form-group textarea::placeholder{ color:#aaa; font-style:italic; }

.form-row{ display:flex; gap:15px; }
.form-row .form-group{ flex:1; }

/* Campos condicionales */
.form-field-llegada, .form-field-salida, .form-field-transfer{ display:none; }
.flight-info-legend{ font-size:12px; color:#777; margin-top:8px; display:block; margin-bottom:15px; }
.payment-info-legend{ font-size:12px; color:#777; margin-top:10px; text-align:center; display:block; }

/* Botones */
.btn-reserve{
    background:var(--brand-black); color:var(--brand-gold); border:none; padding:12px 20px; font-size:16px; font-weight:700;
    border-radius:5px; cursor:pointer; width:100%; transition:background-color .3s; font-family:'Cinzel', serif; text-transform:uppercase;
}
.btn-reserve:hover{ background:var(--brand-dark-grey); }
.btn-reserve:disabled{ background:#ccc; color:#888; cursor:not-allowed; border-color:#ccc; }

/* Acción (dos botones) */
.action-buttons{ display:flex; flex-direction:column; gap:10px; }
.pay-now-btn{ background:var(--brand-gold) !important; color:var(--brand-black) !important; border-color:var(--brand-gold) !important; display:block; }
.pay-now-btn:hover{ background:#e6c200 !important; }
.send-only-btn{ display:none; }

/* Confirmación */
#confirmation-screen{
    position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,.95); z-index:20000;
    display:none; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px;
}
#confirmation-screen h3{ font-family:'Cinzel', serif; color:var(--brand-black); margin-bottom:15px; font-size:22px; }
#confirmation-folio{
    font-size:18px; color:var(--brand-dark-grey); background:#eee; padding:10px 15px; border-radius:5px; margin-bottom:30px;
    font-weight:700; border:1px solid #ddd;
}
#return-to-form-btn{
    background:var(--brand-black); color:var(--brand-gold); border:none; padding:10px 20px; font-size:14px; border-radius:5px;
    cursor:pointer; font-family:'Cinzel', serif; text-transform:uppercase;
}
#return-to-form-btn:hover{ background:var(--brand-dark-grey); }

/* Modal mapa */
#map-modal{
    display:none; position:fixed; z-index:30000; left:0; top:0; width:100%; height:100%;
    overflow:auto; background:rgba(0,0,0,.6); justify-content:center; align-items:center;
}
.map-modal-content{
    background:#fefefe; margin:auto; padding:20px; border:1px solid #888; width:90%; max-width:600px;
    border-radius:8px; position:relative;
}
#map-canvas{ height:400px; width:100%; margin-bottom:15px; }
.map-modal-buttons{ display:flex; justify-content:flex-end; gap:10px; }
#close-map-modal, #confirm-map-location{
    padding:8px 15px; border-radius:5px; cursor:pointer; font-family:'Cinzel', serif; text-transform:uppercase; font-size:13px;
}
#close-map-modal{ background:#ccc; border:1px solid #aaa; color:#333; }
#confirm-map-location{ background:var(--brand-black); color:var(--brand-gold); border:none; }
#confirm-map-location:disabled{ background:var(--brand-disabled-grey); color:var(--brand-disabled-text); cursor:not-allowed; }

/* ==== HOTFIX VISIBILIDAD (agregado) ==== */
.agency-discount-container { display: block; } /* mostrar bloque de descuentos */
#currency-switcher-container { display: block !important; } /* forzar mostrar botón Cambiar a USD */