/* ---- PAGE HEADER ---- */
.contact-page-header {
    padding: var(--sp-16) 0 var(--sp-10);
    background: var(--nook-bg-page);
    border-bottom: var(--nook-border-50);
}
.contact-breadcrumb {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--nook-fs-small); font-weight: 500;
    color: var(--nook-c-meta); margin-bottom: var(--sp-4);
}
.contact-breadcrumb a { color: var(--nook-c-meta); }
.contact-breadcrumb a:hover { color: var(--nook-c-primary); }
.contact-breadcrumb .sep {
    display: inline-block; width: 12px; height: 1px;
    background: #d4d4d4; flex-shrink: 0;
}
.contact-breadcrumb .current { color: var(--nook-c-blue); font-weight: 700; }

.contact-eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--nook-fs-small); font-weight: 600;
    color: var(--nook-c-primary); margin-bottom: var(--sp-3);
}
.contact-eyebrow::before {
    content: ''; width: 16px; height: 2px;
    background: var(--nook-c-primary); border-radius: 2px;
}

.contact-page-title {
    font-family: var(--nook-font-display);
    font-size: var(--nook-fs-h1); line-height: var(--nook-lh-h1);
    color: var(--nook-c-title); letter-spacing: 0.01em;
    margin-bottom: var(--sp-3);
}
@media (min-width: 1024px) {
    .contact-page-title { font-size: var(--nook-fs-6); line-height: var(--nook-lh-6); }
}
.contact-page-desc {
    font-size: var(--nook-fs-body);
    color: var(--nook-c-meta); max-width: 480px;
}

/* ---- MAIN LAYOUT ---- */
.contact-wrap {
    display: grid; grid-template-columns: 1fr;
    gap: var(--sp-10);
    padding: var(--sp-16) 0 var(--sp-20);
}
@media (min-width: 768px) {
    .contact-wrap { grid-template-columns: 1fr 1.4fr; gap: var(--sp-16); }
}

/* ---- INFO SIDE ---- */
.contact-info { display: flex; flex-direction: column; gap: var(--sp-8); }
.contact-methods { display: flex; flex-direction: column; }

.method-item {
    padding: var(--sp-5) 0;
    border-bottom: var(--nook-border-50);
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.method-item:first-child { border-top: var(--nook-border-50); }

.method-label {
    font-size: var(--nook-fs-xsmall); font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--nook-c-meta);
}
.method-value {
    font-size: var(--nook-fs-h4); line-height: var(--nook-lh-h4);
    font-weight: 700; color: var(--nook-c-title);
}
.method-value a { color: var(--nook-c-title); }
.method-value a:hover { color: var(--nook-c-primary); }

.response-badge {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    background: var(--nook-c-white); border: var(--nook-border-50);
    border-radius: var(--nook-radius-sm);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--nook-fs-xsmall); font-weight: 700;
    color: var(--nook-c-meta); margin-top: var(--sp-2);
}
.response-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
    flex-shrink: 0;
}

.contact-reservation-link {
    background: var(--nook-c-white); border: var(--nook-border-50);
    border-left: 3px solid var(--nook-c-primary);
    border-radius: 0 var(--nook-radius) var(--nook-radius) 0;
    padding: var(--sp-5) var(--sp-6);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); transition: var(--nook-transition);
}
.contact-reservation-link:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.contact-reservation-link p {
    font-size: var(--nook-fs-body); font-weight: 600;
    color: var(--nook-c-title); margin: 0;
}
.contact-reservation-link p span {
    display: block; font-size: var(--nook-fs-xsmall);
    font-weight: 400; color: var(--nook-c-meta); margin-top: 2px;
}
.contact-reservation-link .arrow {
    font-size: var(--nook-fs-small); font-weight: 700;
    color: var(--nook-c-primary); white-space: nowrap;
}

/* ---- FORM SIDE ---- */
.contact-form-wrap {
    background: var(--nook-c-white); border: var(--nook-border-50);
    border-radius: var(--nook-radius); padding: var(--sp-8);
}
.contact-form-title {
    font-size: var(--nook-fs-h3); font-weight: 700;
    color: var(--nook-c-title); margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-5); border-bottom: var(--nook-border-50);
}

@media (max-width: 573px) {
    .contact-form-wrap { padding: var(--sp-5); }
}