/* css/contact.css - FIXED EMAIL + 3D CARDS WITH IMAGES */
.contact-hero {
    background:#b44124;
    color:#fff;
    padding:180px 5% 120px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.contact-hero::before {
    content:''; position:absolute; inset:0;
    background:url('https://images.unsplash.com/photo-1556742111-a301076d9d41?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=90') center/cover;
    opacity:0.25;
}
.contact-hero h1 { font-family:'Playfair Display',serif; font-size:4.8rem; margin-bottom:1rem; }
.contact-hero .subtitle { font-size:1.5rem; opacity:0.95; margin-top:1rem; }

.section-grey-bg { background:#f4f6f9; padding:80px 5%; }

/* 3D Contact Cards with Images */
.contact-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2.5rem;
    margin-top:4rem;
}
.contact-card {
    background:#fff;
    padding:3rem 2rem;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,0.1);
    transition:all 0.4s ease;
    overflow:hidden;
}
.contact-card:hover {
    transform:translateY(-15px);
    box-shadow:0 30px 70px rgba(220,53,69,0.2);
}
.card-icon {
    width:100px;
    height:100px;
    margin:0 auto 1.5rem;
    padding:15px;
    background:var(--red-gradient);
    border-radius:50%;
    box-shadow:0 10px 30px rgba(220,53,69,.3);
}
.card-icon img {
    width:100%;
    height:100%;
    object-fit:contain;
    filter:brightness(0) invert(1); /* Makes icon white */
}
.contact-card h3 {
    font-size:1.6rem;
    margin-bottom:1rem;
    color:var(--navy);
}
.contact-value {
    font-size:1.25rem;
    margin:1rem 0;
    word-break:break-word; /* Fixes long email overflow */
    padding:0 10px;
}
.contact-card a {
    color:var(--red);
    font-weight:700;
    text-decoration:none;
}
.contact-card a:hover { text-decoration:underline; }
.contact-card small {
    color:var(--gray);
    font-size:1rem;
    display:block;
    margin-top:1rem;
}

/* Form - Same as book-now */
.contact-form-wrapper {
    max-width:900px;
    margin:4rem auto 0;
    background:#fff;
    padding:3rem;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,0.12);
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem;
    margin-bottom:2rem;
}
input, textarea {
    width:100%;
    padding:1.2rem 1.5rem;
    border:2px solid #eee;
    border-radius:12px;
    font-size:1.1rem;
    transition:all .3s;
}
input:focus, textarea:focus {
    outline:none;
    border-color:var(--red);
    box-shadow:0 0 0 4px rgba(220,53,69,.1);
}
.submit-btn {
    background:var(--red-gradient);
    color:#fff;
    font-size:1.3rem;
    padding:1.3rem 3rem;
    width:100%;
    margin-top:1rem;
    border:none;
    cursor:pointer;
    border-radius:60px;
}

/* Responsive */
@media (max-width:768px) {
    .contact-hero h1 { font-size:3.5rem; }
    .form-grid { grid-template-columns:1fr; }
    .contact-value { font-size:1.1rem; }
}


/* Spinner inside button */
.submit-btn {
    position: relative;
}
.btn-spinner {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* Smooth slide down for message */
#formMessage.show {
    max-height: 500px; /* enough to show content */
    padding: 15px;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    opacity: 1;
}
#formMessage.hide {
    max-height: 0;
    padding: 0 15px;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}