/* ═══════════════════════════════════════════════════════════════════════════
   HomeBridge Booking — Stylesheet
   Brand: navy #16365C  |  teal #1E8CA8  |  light teal #4FB3C4
   Senior-friendly: large touch targets, high contrast, clear labels
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ──────────────────────────────────────────────────────────── */
:root {
    --hb-navy:          #16365C;
    --hb-teal:          #1E8CA8;
    --hb-teal-light:    #4FB3C4;
    --hb-teal-hover:    #176F86;
    --hb-white:         #FFFFFF;
    --hb-bg-light:      #F4F8FA;
    --hb-border:        #DCE6EC;
    --hb-text:          #33414F;
    --hb-text-muted:    #6B7B8A;
    --hb-error:         #C0392B;
    --hb-success:       #1E7A3C;
    --hb-radius:        8px;
    --hb-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* ── Booking wrapper ────────────────────────────────────────────────────────── */
.hb-booking-wrap {
    font-family: var(--hb-font) !important;
    color: var(--hb-text) !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 24px !important;
}

/* ── Step indicator ─────────────────────────────────────────────────────────── */
.hb-steps {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 28px !important;
    flex-wrap: wrap !important;
}

.hb-step {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px 6px !important;
    background: var(--hb-border) !important;
    color: var(--hb-text-muted) !important;
    border-radius: var(--hb-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.hb-step.active {
    background: var(--hb-teal) !important;
    color: var(--hb-white) !important;
}

.hb-step.completed {
    background: var(--hb-navy) !important;
    color: var(--hb-white) !important;
}

/* ── Notice / error bar ─────────────────────────────────────────────────────── */
.hb-notice {
    padding: 14px 18px !important;
    border-radius: var(--hb-radius) !important;
    margin-bottom: 20px !important;
    font-size: 16px !important;
}

.hb-notice.hb-error {
    background: #FDF0EF !important;
    border: 2px solid var(--hb-error) !important;
    color: var(--hb-error) !important;
}

/* ── Section headings ───────────────────────────────────────────────────────── */
.hb-step-panel h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--hb-navy) !important;
    margin: 0 0 20px !important;
}

/* ── Field groups ───────────────────────────────────────────────────────────── */
.hb-field {
    margin-bottom: 20px !important;
}

.hb-field label,
.hb-field > label {
    display: block !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: var(--hb-navy) !important;
    font-size: 16px !important;
}

.hb-req {
    color: var(--hb-error) !important;
}

.hb-optional {
    font-weight: 400 !important;
    color: var(--hb-text-muted) !important;
    font-size: 14px !important;
}

.hb-hint {
    font-size: 14px !important;
    color: var(--hb-text-muted) !important;
    margin: 4px 0 0 !important;
}

/* ── Inputs ─────────────────────────────────────────────────────────────────── */
.hb-booking-wrap input[type="text"],
.hb-booking-wrap input[type="email"],
.hb-booking-wrap input[type="tel"],
.hb-booking-wrap input[type="date"],
.hb-booking-wrap input[type="time"],
.hb-booking-wrap select,
.hb-booking-wrap textarea {
    width: 100% !important;
    padding: 13px 16px !important;
    border: 2px solid var(--hb-border) !important;
    border-radius: var(--hb-radius) !important;
    font-size: 16px !important;
    font-family: var(--hb-font) !important;
    color: var(--hb-text) !important;
    background: var(--hb-white) !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.hb-booking-wrap input:focus,
.hb-booking-wrap select:focus,
.hb-booking-wrap textarea:focus {
    border-color: var(--hb-teal) !important;
    outline: 3px solid rgba(30, 140, 168, 0.2) !important;
}

.hb-booking-wrap textarea {
    resize: vertical !important;
    min-height: 90px !important;
}

/* ── Radio groups ───────────────────────────────────────────────────────────── */
.hb-radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.hb-radio-group label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--hb-text) !important;
    padding: 10px 14px !important;
    border: 2px solid var(--hb-border) !important;
    border-radius: var(--hb-radius) !important;
    transition: border-color 0.2s, background 0.2s !important;
}

.hb-radio-group label:hover {
    border-color: var(--hb-teal) !important;
    background: var(--hb-bg-light) !important;
}

.hb-radio-group input[type="radio"] {
    width: auto !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
    accent-color: var(--hb-teal) !important;
}

/* ── Inline side-by-side fields (date + time) ───────────────────────────────── */
.hb-inline-fields {
    display: flex !important;
    gap: 16px !important;
}

.hb-inline-fields > div {
    flex: 1 !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.hb-btn {
    display: inline-block !important;
    padding: 14px 28px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    border-radius: var(--hb-radius) !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.1s !important;
    line-height: 1.3 !important;
}

.hb-btn:active { transform: scale(0.98) !important; }

.hb-btn-primary {
    background: var(--hb-teal) !important;
    color: var(--hb-white) !important;
}

.hb-btn-primary:hover {
    background: var(--hb-teal-hover) !important;
    color: var(--hb-white) !important;
}

.hb-btn-primary:disabled {
    background: var(--hb-text-muted) !important;
    cursor: not-allowed !important;
}

.hb-btn-secondary {
    background: var(--hb-bg-light) !important;
    color: var(--hb-navy) !important;
    border: 2px solid var(--hb-border) !important;
}

.hb-btn-secondary:hover {
    background: var(--hb-border) !important;
}

.hb-btn-full {
    width: 100% !important;
    text-align: center !important;
}

.hb-step-nav {
    display: flex !important;
    gap: 12px !important;
    margin-top: 24px !important;
    flex-wrap: wrap !important;
}

/* ── Conditional fields ─────────────────────────────────────────────────────── */
.hb-conditional {
    background: var(--hb-bg-light) !important;
    border: 2px solid var(--hb-border) !important;
    border-radius: var(--hb-radius) !important;
    padding: 16px !important;
}

/* ── Loading spinner ────────────────────────────────────────────────────────── */
.hb-loading {
    padding: 20px !important;
    text-align: center !important;
    color: var(--hb-text-muted) !important;
    font-style: italic !important;
}

/* ── Estimate table ─────────────────────────────────────────────────────────── */
.hb-estimate {
    background: var(--hb-bg-light) !important;
    border: 2px solid var(--hb-border) !important;
    border-radius: var(--hb-radius) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.hb-estimate h3 {
    margin: 0 0 14px !important;
    color: var(--hb-navy) !important;
    font-size: 18px !important;
}

.hb-estimate-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.hb-estimate-table td {
    padding: 8px 4px !important;
    border-bottom: 1px solid var(--hb-border) !important;
    font-size: 16px !important;
}

.hb-estimate-table td:last-child {
    text-align: right !important;
    font-weight: 600 !important;
}

.hb-estimate-total td {
    border-top: 2px solid var(--hb-navy) !important;
    border-bottom: none !important;
    padding-top: 12px !important;
    font-size: 18px !important;
    color: var(--hb-navy) !important;
}

.hb-discount { color: var(--hb-success) !important; }

.hb-estimate-note {
    font-size: 13px !important;
    color: var(--hb-text-muted) !important;
    margin: 12px 0 0 !important;
}

/* ── Payment options ────────────────────────────────────────────────────────── */
.hb-payment-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

.hb-payment-option {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px !important;
    border: 2px solid var(--hb-border) !important;
    border-radius: var(--hb-radius) !important;
    cursor: pointer !important;
    transition: border-color 0.2s, background 0.2s !important;
}

.hb-payment-option:hover,
.hb-payment-option:has(input:checked) {
    border-color: var(--hb-teal) !important;
    background: var(--hb-bg-light) !important;
}

.hb-payment-option input[type="radio"] {
    width: auto !important;
    flex-shrink: 0 !important;
    accent-color: var(--hb-teal) !important;
}

.hb-payment-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.hb-payment-label strong {
    font-size: 16px !important;
    color: var(--hb-navy) !important;
}

.hb-payment-label small {
    font-size: 14px !important;
    color: var(--hb-text-muted) !important;
}

.hb-payment-total {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--hb-navy) !important;
    padding: 12px 0 !important;
}

/* ── Summary box ────────────────────────────────────────────────────────────── */
.hb-summary {
    background: var(--hb-bg-light) !important;
    border: 2px solid var(--hb-border) !important;
    border-radius: var(--hb-radius) !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
}

.hb-summary h3 {
    margin: 0 0 10px !important;
    color: var(--hb-navy) !important;
    font-size: 17px !important;
}

.hb-summary ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.hb-summary li {
    padding: 4px 0 !important;
    font-size: 15px !important;
    border-bottom: 1px solid var(--hb-border) !important;
}

.hb-summary li:last-child { border-bottom: none !important; }

/* ── Disclaimer ─────────────────────────────────────────────────────────────── */
.hb-disclaimer {
    font-size: 14px !important;
    color: var(--hb-text-muted) !important;
    border-top: 1px solid var(--hb-border) !important;
    padding-top: 12px !important;
    margin-top: 16px !important;
}

/* ── Success screen ─────────────────────────────────────────────────────────── */
.hb-success {
    text-align: center !important;
    padding: 32px 20px !important;
}

.hb-success-icon {
    width: 64px !important;
    height: 64px !important;
    background: var(--hb-success) !important;
    color: var(--hb-white) !important;
    border-radius: 50% !important;
    font-size: 32px !important;
    line-height: 64px !important;
    margin: 0 auto 20px !important;
}

.hb-success h2 {
    color: var(--hb-success) !important;
    font-size: 24px !important;
    margin-bottom: 12px !important;
}

/* ── Rates table ─────────────────────────────────────────────────────────────── */
.hb-rates-table {
    font-family: var(--hb-font) !important;
}

.hb-rates-table h3 {
    color: var(--hb-navy) !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
}

.hb-rates {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 24px !important;
}

.hb-rates th {
    background: var(--hb-navy) !important;
    color: var(--hb-white) !important;
    padding: 12px 16px !important;
    text-align: left !important;
    font-size: 15px !important;
}

.hb-rates td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--hb-border) !important;
    font-size: 15px !important;
}

.hb-rates tr:nth-child(even) td {
    background: var(--hb-bg-light) !important;
}

.hb-rates-note {
    font-size: 14px !important;
    color: var(--hb-text-muted) !important;
    font-style: italic !important;
    margin-top: 8px !important;
}

/* ── Callback: floating button ───────────────────────────────────────────────── */
.hb-callback-float {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 9999 !important;
    font-family: var(--hb-font) !important;
}

.hb-callback-toggle {
    background: var(--hb-teal) !important;
    color: var(--hb-white) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 22px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
    transition: background 0.2s !important;
}

.hb-callback-toggle:hover {
    background: var(--hb-teal-hover) !important;
}

.hb-callback-popup {
    position: absolute !important;
    bottom: calc(100% + 12px) !important;
    right: 0 !important;
    width: 340px !important;
    background: var(--hb-white) !important;
    border: 2px solid var(--hb-border) !important;
    border-radius: var(--hb-radius) !important;
    padding: 20px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important;
}

/* ── Callback: form ─────────────────────────────────────────────────────────── */
.hb-callback-form h3 {
    margin: 0 0 8px !important;
    color: var(--hb-navy) !important;
    font-size: 18px !important;
}

.hb-callback-form p {
    font-size: 14px !important;
    color: var(--hb-text-muted) !important;
    margin-bottom: 14px !important;
}

.hb-callback-form .hb-field {
    margin-bottom: 12px !important;
}

.hb-callback-notice {
    padding: 10px !important;
    border-radius: var(--hb-radius) !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
}

.hb-callback-notice.hb-error {
    background: #FDF0EF !important;
    color: var(--hb-error) !important;
    border: 1px solid var(--hb-error) !important;
}

.hb-success-msg {
    color: var(--hb-success) !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 20px 0 !important;
}

/* ── Phone link ─────────────────────────────────────────────────────────────── */
.hb-phone-link {
    color: var(--hb-teal) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.hb-phone-link:hover {
    color: var(--hb-teal-hover) !important;
    text-decoration: underline !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
    .hb-booking-wrap {
        padding: 16px !important;
    }

    .hb-inline-fields {
        flex-direction: column !important;
    }

    .hb-step {
        font-size: 12px !important;
        padding: 8px 4px !important;
    }

    .hb-callback-popup {
        width: calc(100vw - 48px) !important;
        right: 0 !important;
    }

    .hb-callback-float {
        bottom: 16px !important;
        right: 16px !important;
    }

    .hb-step-nav {
        flex-direction: column !important;
    }

    .hb-btn {
        width: 100% !important;
        text-align: center !important;
    }
}