/* ==========================================================================
   Quieroloma Core — WhatsApp & Reservation Block Styles
   ========================================================================== */

:root {
    --ql-wa-green:    #25D366;
    --ql-wa-dark:     #128C7E;
    --ql-call-blue:   #1A73E8;
    --ql-form-accent: #FF6B35;
    --ql-badge-bg:    #F0FFF4;
    --ql-radius:      12px;
    --ql-shadow:      0 4px 20px rgba(0,0,0,.10);
    --ql-font:        'Inter', system-ui, sans-serif;
}

/* ── Bloque principal ─────────────────────────────────────────────────────── */
.qlcore-wa-block {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ql-radius);
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: var(--ql-shadow);
    font-family: var(--ql-font);
}

.qlcore-wa-block__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: #1a202c;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.qlcore-wa-block__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.qlcore-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: 9999px;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
    white-space: nowrap;
}

.qlcore-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.qlcore-btn:active { transform: translateY(0); }

.qlcore-btn--wa {
    background: var(--ql-wa-green);
    color: #fff;
}
.qlcore-btn--wa:hover { background: var(--ql-wa-dark); color: #fff; }

.qlcore-btn--call {
    background: var(--ql-call-blue);
    color: #fff;
}
.qlcore-btn--call:hover { background: #1557b0; color: #fff; }

.qlcore-btn--form {
    background: var(--ql-form-accent);
    color: #fff;
}
.qlcore-btn--form:hover { background: #e55a29; }

.qlcore-btn--submit {
    background: #2d3748;
    color: #fff;
    width: 100%;
    justify-content: center;
    border-radius: var(--ql-radius);
}
.qlcore-btn--cancel {
    background: transparent;
    color: #718096;
    border: 1px solid #cbd5e0;
    border-radius: var(--ql-radius);
    width: 100%;
    justify-content: center;
    margin-top: .5rem;
}

/* ── Formulario de reserva ───────────────────────────────────────────────── */
.qlcore-reservation-form {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.25rem;
    margin-top: 1rem;
    animation: ql-slide-down .25s ease;
}

@keyframes ql-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.qlcore-form__row {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: 1rem;
}

.qlcore-form__row label {
    font-size: .85rem;
    font-weight: 600;
    color: #4a5568;
}

.qlcore-form__row input {
    width: 100%;
    padding: .6rem .9rem;
    border: 1.5px solid #cbd5e0;
    border-radius: 8px;
    font-size: .95rem;
    transition: border-color .2s;
    box-sizing: border-box;
}
.qlcore-form__row input:focus {
    outline: none;
    border-color: var(--ql-wa-green);
    box-shadow: 0 0 0 3px rgba(37,211,102,.15);
}

.qlcore-form__actions { margin-top: 1.25rem; }

.qlcore-form__message {
    margin-top: .75rem;
    padding: .65rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
    display: none;
}
.qlcore-form__message--success { background: #f0fff4; color: #276749; display: block; }
.qlcore-form__message--error   { background: #fff5f5; color: #c53030; display: block; }

/* ── Disclaimer ──────────────────────────────────────────────────────────── */
.qlcore-wa-block__disclaimer {
    font-size: .78rem;
    color: #a0aec0;
    margin: .75rem 0 0;
}

/* ── Badges de la ficha ──────────────────────────────────────────────────── */
.qlcore-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
}

.qlcore-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 9999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.qlcore-badge--planta   { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.qlcore-badge--wifi     { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.qlcore-badge--mascotas { background: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA; }
.qlcore-badge--piscina  { background: #ECFEFF; color: #155E75; border: 1px solid #A5F3FC; }
.qlcore-badge--precio   { background: #F0FFF4; color: #14532D; border: 1px solid #BBF7D0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .qlcore-wa-block__buttons { flex-direction: column; }
    .qlcore-btn { width: 100%; justify-content: center; }
}