/* ====================================================================================
CONTACT PAGE — two-card layout + form + info panel
==================================================================================== */

.page{ position: relative; }

/* Decorative glow */
.page::before{
    content:"";
    position:absolute;
    left: 50%;
    top: -14rem;
    transform: translateX(-50%);
    width: 1200px;
    max-width: 140%;
    height: 520px;
    background: radial-gradient(closest-side, rgba(255, 77, 227, .14), rgba(0,0,0,0));
    filter: blur(12px);
    pointer-events:none;
    z-index:-1;
}

/* Grid */
.contact-grid{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1.5rem;
    margin-top: 1.25rem;
}
@media (max-width: 900px){
    .contact-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.contact-card{
    padding: clamp(1.15rem, 2.6vw, 1.6rem);
}

/* Error */
.form-error{
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 90, 90, .35);
    background: rgba(255, 90, 90, .08);
    color: var(--fg);
    font-weight: 850;
}

/* Honeypot */
.hp-field{
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Form */
form{ margin-top: .5rem; }

.field{
    display: grid;
    gap: .45rem;
    margin-bottom: 1rem;
}

.field input,
.field textarea{
    width: 100%;
    padding: .85rem .95rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    color: var(--fg);
    outline: none;
}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea{ background: var(--surface); }

.field textarea{
    min-height: 150px;
    resize: vertical;
}

.field input:focus,
.field textarea:focus{
    border-color: rgba(255, 77, 227, .65);
    box-shadow: 0 0 0 4px rgba(255, 77, 227, .15);
}

.field small{
    color: rgba(255, 120, 120, .95);
    font-weight: 750;
    font-size: .85rem;
}

.contact-hint{
    margin: .55rem 0 0;
}

/* reCAPTCHA */
.recaptcha-wrap{ margin: .25rem 0 1rem; }
.recaptcha-wrap small{
    display:block;
    margin-top:.5rem;
    color: rgba(255, 120, 120, .95);
    font-weight: 750;
    font-size: .85rem;
}

/* Submit button spacing */
.contact-submit{ margin-top: .25rem; }

/* Info panel: chips */
.contact-links{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-top: 1rem;
}

.chip{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem .8rem;
    border-radius:999px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
    color: var(--fg);
    text-decoration:none;
    font-weight: 900;
    font-size: .95rem;
}
.chip:hover{ background: rgba(255,255,255,.06); }
.chip .ico{ font-size: 1.05rem; line-height:1; }

.chip-wa{
    border-color: rgba(37,211,102,.35);
}

/* Social list */
.social-row{
    display:grid;
    gap:.55rem;
    margin-top: .75rem;
}

.social{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.5rem .6rem;
    border-radius: 12px;
    border: 1px solid transparent;
    color: var(--fg);
    text-decoration:none;
    font-weight: 900;
}
.social:hover{
    border-color: var(--line);
    background: rgba(255,255,255,.04);
}
.social .ico{
    width: 1.25rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* Smaller HRs inside the info panel */
.contact-hr{ margin: 1.25rem 0; }

/* Booking policy inner card */
.contact-policy{
    margin-top: 1rem;
    padding: 1rem;
}
.contact-policy h3{ margin-bottom: .4rem; }
.contact-policy p{ margin: .5rem 0 0; }

/* FORCE side-by-side contact cards */
.contact-grid{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px){
    .contact-grid{
        grid-template-columns: 1fr;
    }
}

/* SVG icons */
.ico svg{
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

.chip:hover .ico svg,
.social:hover .ico svg{
    color: var(--brand);
}