* { box-sizing: border-box; }
body {
    font-family: var(--font-family);
    background: #f8f8f6;
    margin: 0;
    padding: 0;
    color: #1a1a1a;
}

/* Hero */
.res-hero {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #222;
}
.res-hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: brightness(0.55);
}
.res-hero-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
    height: 100%; padding: 24px 16px;
    text-align: center; color: #fff;
}
.res-hero-title { font-size: 2rem; font-weight: 800; margin: 0; letter-spacing: -0.5px; }

/* Contact bar */
.res-contact-bar {
    background: var(--primary);
    padding: 10px 16px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
    font-size: 0.875rem; font-weight: 600; color: #1a1a1a;
}
.res-contact-bar a { color: #1a1a1a; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.res-contact-bar span { display: flex; align-items: center; gap: 6px; }

/* Main */
.res-main { max-width: 960px; margin: 0 auto; padding: 32px 0 0; }

/* Services grid */
.res-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.res-service-card {
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
    margin-bottom: auto;
}
.res-service-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.res-service-card.selected { border-color: var(--primary); }
.res-service-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #eee; display: block; }
.res-service-img-placeholder { width: 100%; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #f0f0ee, #e8e8e6); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #ccc; }

/* Custom calendar */
.res-calendar {
    border-radius: 18px;
    overflow: hidden;
    user-select: none;
}
.res-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 14px;
    background: #fff;
}
.res-cal-month-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.res-cal-month-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.2px;
    line-height: 1.2;
}
.res-cal-year-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #bbb;
    letter-spacing: 0.8px;
}
.res-cal-nav {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f3;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #555;
    font-size: 0.75rem;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
    flex-shrink: 0;
}
.res-cal-nav:hover:not(:disabled) { background: #eaeae8; transform: scale(1.06); }
.res-cal-nav:active:not(:disabled) { transform: scale(0.94); }
.res-cal-nav:disabled { opacity: 0.25; cursor: default; }
.res-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 10px 6px;
    border-bottom: 1px solid #f2f2f2;
}
.res-cal-weekdays span {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #c0c0c0;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 0;
}
.res-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 8px 10px 14px;
    row-gap: 3px;
}
.res-cal-day {
    position: relative;
    background: none;
    border: none;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 38px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
    color: #1a1a1a;
    padding: 0;
    line-height: 1;
}
.res-cal-day:hover:not(:disabled):not(.selected) {
    background: #f0f0ee;
    transform: scale(1.1);
}
.res-cal-day.today:not(.selected) {
    color: #1a1a1a;
    font-weight: 800;
}
.res-cal-day.today:not(.selected)::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
}
.res-cal-day.selected {
    background: var(--primary) !important;
    color: #1a1a1a !important;
    transform: scale(1.12) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.13);
    font-weight: 800;
}
.res-cal-day:disabled {
    color: #ddd;
    cursor: default;
}

/* Service card body */
.res-service-body { padding: 16px; }
.res-service-name { font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; }
.res-service-desc { font-size: 0.875rem; color: #666; margin: 0 0 10px; line-height: 1.4; }
.res-service-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.res-service-badge { background: #f5f5f3; border-radius: 6px; padding: 3px 8px; font-size: 0.78rem; font-weight: 600; color: #555; }
.res-service-badge.price { background: #fff8e1; color: #b45309; }
.res-btn-book {
    display: block; width: 100%; margin-top: 14px;
    padding: 10px; border-radius: 8px; border: none;
    background: var(--primary); color: #1a1a1a; font-weight: 700;
    font-size: 0.95rem; cursor: pointer; transition: opacity 0.2s;
}
.res-btn-book:hover { opacity: 0.85; }

/* Booking panel */
.res-booking-panel {
    background: #fff; border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 28px 24px;
    max-width: 560px;
    margin: 0 auto 48px;
}
.res-booking-panel h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 20px; }
.res-form-label { font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; display: block; }
.res-form-input {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    border: 1.5px solid #ddd; font-size: 0.95rem;
    font-family: var(--font-family); transition: border-color 0.2s;
}
.res-form-input:focus { outline: none; border-color: var(--primary); }
.res-slots-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.res-slot-btn {
    padding: 7px 14px; border-radius: 8px; border: 1.5px solid #ddd;
    background: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
}
.res-slot-btn.available:hover, .res-slot-btn.selected {
    background: var(--primary); border-color: var(--primary); color: #1a1a1a;
}
.res-slot-btn.unavailable {
    opacity: 0.4; cursor: not-allowed; text-decoration: line-through;
}
.res-submit-btn {
    display: block; width: 100%; padding: 13px;
    border-radius: 10px; border: none;
    background: var(--primary); color: #1a1a1a;
    font-size: 1rem; font-weight: 800;
    cursor: pointer; transition: opacity 0.2s; margin-top: 20px;
}
.res-submit-btn:hover { opacity: 0.85; }
.res-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Push reCAPTCHA badge up so it doesn't overlap the WhatsApp button */
.grecaptcha-badge { bottom: 100px !important; }

/* WhatsApp float */
.whatsapp-float-btn {
    position: fixed; bottom: 24px; right: 20px; z-index: 999;
    width: 52px; height: 52px; background: #25D366;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(37,211,102,0.4); color: #fff;
    text-decoration: none;
}
.whatsapp-float-btn svg { width: 28px; height: 28px; }
.whatsapp-float-btn__ping {
    position: absolute; inset: -4px; border-radius: 50%;
    animation: ping 2s cubic-bezier(0,0,0.2,1) infinite;
    background: rgba(37,211,102,0.35);
}
@keyframes ping { 75%,100% { transform: scale(1.6); opacity: 0; } }

/* Business hours */
.res-hours-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 0 36px 0;
}
.res-hours-title {
    font-size: 1rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 14px;
    letter-spacing: -0.2px;
}
.res-hours-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    overflow: hidden;
}
.res-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 18px;
    border-bottom: 1px solid #f2f2f0;
    font-size: 0.875rem;
}
.res-hours-row:last-child { border-bottom: none; }
.res-hours-day { font-weight: 600; color: #1a1a1a; }
.res-hours-time { color: #444; }
.res-hours-closed { color: #bbb; font-style: italic; }

/* Responsive */
@media (max-width: 600px) {
    .res-hero { height: 180px; }
    .res-hero-title { font-size: 1.5rem; }

    .res-contact-bar { gap: 10px; font-size: 0.8rem; padding: 8px 12px; }

    .res-services-grid {
        grid-template-columns: 1fr;
    }

    .res-booking-panel { padding: 20px 16px; border-radius: 12px; }
    .res-booking-panel h2 { font-size: 1.1rem; }

    .res-cal-header { padding: 14px 12px 10px; }
    .res-cal-days { padding: 6px 6px 10px; }
    .res-cal-day { max-width: 34px; font-size: 0.8rem; }

    .res-slot-btn { padding: 6px 11px; font-size: 0.8rem; }

    .res-main{
        padding: 32px 16px 0;
    }

    .res-hours-wrap{
        padding: 0 16px 36px;
    }
}

@media (max-width: 380px) {
    .res-hero-title { font-size: 1.25rem; }
    .res-cal-day { max-width: 30px; font-size: 0.75rem; }
    .res-cal-weekdays span { font-size: 0.6rem; }
}

/* Confirmation page */
.res-confirm-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 40px 0 48px;
    text-align: center;
}
.res-confirm-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.res-confirm-icon i { font-size: 1.8rem; color: #1a1a1a; }
.res-confirm-title {
    font-size: 1.75rem; font-weight: 800;
    margin: 0 0 10px; letter-spacing: -0.4px;
}
.res-confirm-subtitle {
    font-size: 1rem; color: #555; line-height: 1.6;
    margin: 0 0 28px;
}
.res-confirm-card {
    background: #fff; border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    padding: 6px 0; margin-bottom: 20px;
    text-align: left;
}
.res-confirm-card-heading {
    font-size: 0.75rem; font-weight: 700; color: #bbb;
    letter-spacing: 0.8px; text-transform: uppercase;
    margin: 0; padding: 14px 20px 10px;
    border-bottom: 1px solid #f2f2f0;
}
.res-confirm-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 20px;
    border-bottom: 1px solid #f2f2f0;
    gap: 12px;
}
.res-confirm-row:last-child { border-bottom: none; }
.res-confirm-row-label {
    font-size: 0.875rem; font-weight: 600; color: #888;
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.res-confirm-row-value {
    font-size: 0.9rem; font-weight: 700; color: #1a1a1a;
    text-align: right;
}
.res-confirm-badge {
    background: #fff8e1; color: #b45309;
    border-radius: 6px; padding: 3px 10px;
    font-size: 0.8rem; font-weight: 700;
}
.res-confirm-notice {
    background: #f5f5f3; border-radius: 12px;
    padding: 14px 18px; margin-bottom: 28px;
    font-size: 0.875rem; color: #555; line-height: 1.6;
    text-align: left; display: flex; gap: 10px; align-items: flex-start;
}
.res-confirm-notice i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }
.res-confirm-actions { display: flex; flex-direction: column; gap: 14px; }
.res-confirm-back-link {
    font-size: 0.875rem; color: #999; text-decoration: underline;
}
.res-confirm-back-link:hover { color: #555; }
.res-confirm-wa-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #25D366; color: #fff; font-weight: 700;
    padding: 13px; border-radius: 10px; text-decoration: none;
    font-size: 1rem; transition: opacity 0.2s;
}
.res-confirm-wa-btn:hover { opacity: 0.88; color: #fff; }
.res-confirm-wa-btn i { font-size: 1.15rem; }

@media (max-width: 600px) {
    .res-confirm-wrap { padding: 32px 0 40px; }
    .res-confirm-title { font-size: 1.5rem; }
}

/* Footer */
.res-footer {
    text-align: center;
    padding: 12px 24px;
    background: #1a1a1a;
}
.res-footer__text {
    margin: 0;
    font-size: 0.8rem;
    color: #aaa;
}
.res-footer__link {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}
.res-footer__link:hover { opacity: 0.8; }