/* WhatsApp Appointment Form v4.0.0 — Dev Awais (devawais.pro) */

/* ============================================================
   SCOPE: every rule lives under .waf-appointment-wrap so themes
   cannot interfere. !important is used on structural properties
   only to guarantee layout independence.
   ============================================================ */

/* ── box-sizing reset ──────────────────────────────────────── */
.waf-appointment-wrap,
.waf-appointment-wrap * {
    box-sizing: border-box !important;
}

/* ── wrapper ───────────────────────────────────────────────── */
.waf-appointment-wrap {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #2d4a6b !important;
    width: 100%;
}

/* ── card ──────────────────────────────────────────────────── */
.waf-appointment-wrap .waf-card {
    background: #ffffff !important;
    border: 1px solid #e2eaf4 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 18px rgba(21,54,93,0.08) !important;
    padding: 20px !important;
    margin: 0 !important;
}

/* ── grid ──────────────────────────────────────────────────── */
.waf-appointment-wrap .waf-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.waf-appointment-wrap .waf-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

.waf-appointment-wrap .waf-full { grid-column: 1 / -1 !important; }
.waf-appointment-wrap .waf-half { grid-column: span 1 !important; }

/* ── labels ────────────────────────────────────────────────── */
.waf-appointment-wrap .waf-label,
.waf-appointment-wrap .waf-radio-label {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #3a5a80 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.waf-appointment-wrap .waf-required {
    color: #d92d20 !important;
    font-weight: 700 !important;
    margin-left: 1px !important;
    padding: 0 !important;
}

/* ── inputs / select / textarea ────────────────────────────── */
.waf-appointment-wrap input.waf-input,
.waf-appointment-wrap select.waf-input,
.waf-appointment-wrap textarea.waf-input {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    border: 1.5px solid #dce8f5 !important;
    border-radius: 6px !important;
    background: #f8fbff !important;
    color: #2d4a6b !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}

.waf-appointment-wrap input.waf-input::placeholder,
.waf-appointment-wrap textarea.waf-input::placeholder {
    color: #b0c8de !important;
    opacity: 1 !important;
}

.waf-appointment-wrap input.waf-input:focus,
.waf-appointment-wrap select.waf-input:focus,
.waf-appointment-wrap textarea.waf-input:focus {
    border-color: #25d366 !important;
    background: #fff !important;
    box-shadow: 0 0 0 2.5px rgba(37,211,102,0.15) !important;
    outline: none !important;
}

.waf-appointment-wrap textarea.waf-input {
    resize: vertical !important;
    min-height: 84px !important;
}

.waf-appointment-wrap select.waf-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%236a89b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 13px !important;
    padding-right: 30px !important;
    cursor: pointer !important;
}

/* ── radio group ───────────────────────────────────────────── */
.waf-appointment-wrap .waf-radio-group {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.waf-appointment-wrap label.waf-radio-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    min-width: 120px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 1.5px solid #dce8f5 !important;
    border-radius: 6px !important;
    background: #f8fbff !important;
    color: #2d4a6b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: border-color .15s, background .15s !important;
}

.waf-appointment-wrap label.waf-radio-option:hover {
    border-color: #25d366 !important;
    background: #f3fef7 !important;
}

.waf-appointment-wrap label.waf-radio-option input[type="radio"] {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    accent-color: #25d366 !important;
    cursor: pointer !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.waf-appointment-wrap label.waf-radio-option:has(input[type="radio"]:checked) {
    border-color: #25d366 !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
    font-weight: 600 !important;
}

/* ── validation errors ─────────────────────────────────────── */
.waf-appointment-wrap .waf-error {
    display: none !important;
    font-size: 11px !important;
    color: #d92d20 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.waf-appointment-wrap .waf-field.waf-invalid .waf-error {
    display: block !important;
}

.waf-appointment-wrap .waf-field.waf-invalid input.waf-input,
.waf-appointment-wrap .waf-field.waf-invalid select.waf-input,
.waf-appointment-wrap .waf-field.waf-invalid textarea.waf-input {
    border-color: #d92d20 !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 2.5px rgba(217,45,32,.10) !important;
}

.waf-appointment-wrap .waf-field.waf-invalid .waf-radio-group {
    border: 1.5px solid #d92d20 !important;
    border-radius: 6px !important;
    padding: 4px !important;
    box-shadow: 0 0 0 2.5px rgba(217,45,32,.10) !important;
}

/* ── required note ─────────────────────────────────────────── */
.waf-appointment-wrap .waf-required-note {
    font-size: 10.5px !important;
    color: #a0bdd4 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* ── submit button ─────────────────────────────────────────── */
.waf-appointment-wrap .waf-submit-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg,#25d366,#1bb558) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    cursor: pointer !important;
    box-shadow: 0 3px 12px rgba(37,211,102,.30) !important;
    transition: background .18s, transform .1s, box-shadow .18s !important;
}

.waf-appointment-wrap .waf-submit-button:hover {
    background: linear-gradient(135deg,#1ebe5d,#16a34a) !important;
    box-shadow: 0 5px 18px rgba(37,211,102,.40) !important;
}

.waf-appointment-wrap .waf-submit-button:active {
    transform: translateY(1px) !important;
}

.waf-appointment-wrap .waf-submit-button:disabled {
    opacity: .6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.waf-appointment-wrap .waf-wa-icon {
    width: 19px !important;
    height: 19px !important;
    fill: #fff !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* ── responsive ────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   NOTICES  –  controlled entirely by [data-mode] on the form.
   JS sets  form.setAttribute('data-mode', 'Online')  or
            form.setAttribute('data-mode', 'In-Person')
   and clears to ''  on reset.  No JS display toggling at all.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   NOTICES  –  3 types: online / inperson / inquiry
   All hidden by default via display:none !important.
   Shown by CSS attribute selector on form[data-mode="X"].
   Each notice uses unique BEM-style classes + unique IDs.
   ═══════════════════════════════════════════════════════════ */

/* ── Base: all notices hidden ─────────────────────────────── */
.waf-appointment-wrap .waf-notice {
    display: none !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    overflow: hidden !important;
}

/* ── Shared header row (icon + title) ─────────────────────── */
.waf-appointment-wrap .waf-notice__hdr {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 13px !important;
    margin: 0 !important;
}


/* ── Shared title ─────────────────────────────────────────── */
.waf-appointment-wrap .waf-notice__title {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ── Shared list ──────────────────────────────────────────── */
.waf-appointment-wrap .waf-notice__list {
    list-style: disc !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 6px 10px 30px !important;
}
.waf-appointment-wrap .waf-notice__list li {
    display: list-item !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
}
.waf-appointment-wrap .waf-notice__list li:last-child {
    margin-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   ONLINE NOTICE  #waf-notice-online
   ════════════════════════════════════════════════════════════ */
.waf-appointment-form[data-mode="Online"] .waf-notice--online {
    display: block !important;
    background: #eff8ff !important;
    border-color: #3b9ede !important;
}

/* Online header background */
#waf-notice-online .waf-notice__hdr--online {
    background: #dbeeff !important;
    border-bottom: 1px solid #b3d8f5 !important;
}


/* Online title */
#waf-notice-online .waf-notice__title--online {
    color: #1a5a8a !important;
}

/* Online list items */
#waf-notice-online .waf-notice__list--online li {
    color: #1c4f78 !important;
}

/* ════════════════════════════════════════════════════════════
   IN-PERSON NOTICE  #waf-notice-inperson
   ════════════════════════════════════════════════════════════ */
.waf-appointment-form[data-mode="In-Person"] .waf-notice--inperson {
    display: block !important;
    background: #f0fdf4 !important;
    border-color: #25d366 !important;
}

/* In-person header background */
#waf-notice-inperson .waf-notice__hdr--inperson {
    background: #dcfce7 !important;
    border-bottom: 1px solid #a7f3c0 !important;
}


/* In-person title */
#waf-notice-inperson .waf-notice__title--inperson {
    color: #14532d !important;
}

/* In-person address text */
#waf-notice-inperson .waf-notice__addr {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #166534 !important;
    line-height: 1.45 !important;
    padding: 6px 13px 11px 38px !important;
    margin: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   INQUIRY NOTICE  #waf-notice-inquiry
   ════════════════════════════════════════════════════════════ */
.waf-appointment-form[data-mode="Inquiry"] .waf-notice--inquiry {
    display: block !important;
    background: #fdfaf0 !important;
    border-color: #d4a017 !important;
}

/* Inquiry header background */
#waf-notice-inquiry .waf-notice__hdr--inquiry {
    background: #fef3c7 !important;
    border-bottom: 1px solid #fcd34d !important;
}


/* Inquiry title */
#waf-notice-inquiry .waf-notice__title--inquiry {
    color: #78430a !important;
}

/* Inquiry description text */
#waf-notice-inquiry .waf-notice__desc {
    display: block !important;
    font-size: 12.5px !important;
    color: #5c3d0a !important;
    line-height: 1.5 !important;
    padding: 6px 13px 0 13px !important;
    margin: 0 !important;
}

/* Inquiry list items */
#waf-notice-inquiry .waf-notice__list--inquiry {
    padding-top: 5px !important;
}
#waf-notice-inquiry .waf-notice__list--inquiry li {
    color: #5c3d0a !important;
}


/* ── Get Directions button (in-person notice footer) ─────── */
#waf-notice-inperson .waf-notice__footer--inperson {
    display: flex !important;
    padding: 0 13px 11px 13px !important;
    margin: 0 !important;
}

#waf-directions-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 18px !important;
    background: #15803d !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(21,128,61,0.30) !important;
    transition: background 0.15s, box-shadow 0.15s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    text-decoration: none !important;
}

#waf-directions-btn:hover,
#waf-directions-btn:focus {
    background: #166534 !important;
    box-shadow: 0 3px 10px rgba(21,128,61,0.40) !important;
    color: #fff !important;
}

#waf-directions-btn:active {
    transform: translateY(1px) !important;
}


@media (max-width: 640px) {
    .waf-appointment-wrap .waf-card { padding: 14px !important; }
    .waf-appointment-wrap .waf-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
    .waf-appointment-wrap .waf-half,
    .waf-appointment-wrap .waf-full { grid-column: auto !important; }
    .waf-appointment-wrap label.waf-radio-option { flex: unset !important; min-width: unset !important; width: 100% !important; }
}

@media (max-width: 380px) {
    .waf-appointment-wrap .waf-card { padding: 11px !important; }
    .waf-appointment-wrap input.waf-input,
    .waf-appointment-wrap select.waf-input,
    .waf-appointment-wrap textarea.waf-input { padding: 6px 9px !important; font-size: 13px !important; }
    .waf-appointment-wrap .waf-submit-button { padding: 11px 14px !important; font-size: 14px !important; }
}