/* ==========================================================================
   QueryForm usercontrol — modern redesign
   Rendered as a sidebar module on ~20 different templates (ContactUs, FAQs,
   Blog, Profile, TrackOrder, ...), so this file is loaded site-wide from
   MasterPageCityTour.master (after site-header.css) and everything is scoped
   under .qf-query-form / .qf-ads so it never leaks into other page styles.
   Palette: coral #FF6B4A / teal #1F7A6C / cream #FFF6EE on warm neutrals.
   Type: Fredoka (headings) + Nunito Sans (body) — loaded from the master page.
   ========================================================================== */

.qf-query-form {
    --qf-coral: #FF6B4A;
    --qf-coral-dark: #E24E2F;
    --qf-coral-soft: rgba(255, 107, 74, 0.08);
    --qf-teal: #1F7A6C;
    --qf-teal-dark: #145E53;
    --qf-gold: #FFB238;
    --qf-green: #2FA36B;
    --qf-danger: #E14D67;
    --qf-danger-soft: rgba(225, 77, 103, 0.08);
    --qf-cream: #FFF6EE;
    --qf-ink: #241F1B;
    --qf-body: #6B6058;
    --qf-muted: #A49A91;
    --qf-border: #F0E2D6;
    --qf-surface: #FFFFFF;
    --qf-radius: 16px;
    --qf-radius-sm: 10px;
    --qf-shadow: 0 10px 30px rgba(36, 31, 27, 0.07);

    color: var(--qf-body);
    font-family: "Nunito Sans", Arial, sans-serif;
}

.qf-query-form .qf-card {
    background: var(--qf-surface);
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius);
    box-shadow: var(--qf-shadow);
    padding: 24px;
    margin-bottom: 24px;
}

/* ---------- Need Help card ---------- */

.qf-query-form .qf-help {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
}

.qf-query-form .qf-help-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--qf-coral-soft);
    color: var(--qf-coral);
    font-size: 24px;
}

.qf-query-form .qf-help-title {
    margin: 0 0 4px;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--qf-ink);
}

.qf-query-form .qf-help-title span {
    color: var(--qf-coral);
}

.qf-query-form a.qf-phone {
    display: block;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--qf-teal);
    text-decoration: none;
    line-height: 1.3;
}

.qf-query-form a.qf-phone:hover {
    color: var(--qf-teal-dark);
}

.qf-query-form .qf-help-hours {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--qf-muted);
}

/* ---------- WhatsApp card ---------- */

.qf-query-form .qf-whatsapp {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.qf-query-form .qf-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #25D366;
    color: #fff;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: var(--qf-radius);
    box-shadow: var(--qf-shadow);
    transition: background 0.2s ease, transform 0.2s ease;
}

.qf-query-form .qf-whatsapp-btn:hover {
    background: #1EBE59;
    color: #fff;
    transform: translateY(-1px);
}

.qf-query-form .qf-whatsapp-icon {
    width: 24px;
    height: 24px;
}

/* ---------- Contact form card ---------- */

.qf-query-form .qf-form-title {
    margin: 0 0 4px;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--qf-ink);
}

.qf-query-form .qf-form-subtitle {
    margin: 0 0 20px;
    font-size: 13.5px;
    color: var(--qf-muted);
    line-height: 1.5;
}

.qf-query-form .qf-field {
    margin-bottom: 16px;
}

.qf-query-form .qf-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--qf-ink);
}

.qf-query-form .qf-input {
    width: 100%;
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius-sm);
    background: var(--qf-cream);
    color: var(--qf-ink);
    font-family: "Nunito Sans", Arial, sans-serif;
    font-size: 14px;
    padding: 11px 14px;
    height: 44px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.qf-query-form textarea.qf-input.qf-textarea {
    height: auto;
    min-height: 110px;
    resize: vertical;
}

.qf-query-form .qf-input::placeholder {
    color: var(--qf-muted);
}

.qf-query-form .qf-input:focus {
    outline: none;
    border-color: var(--qf-coral);
    box-shadow: 0 0 0 3px var(--qf-coral-soft);
}

.qf-query-form .qf-input.Mandetry {
    border-color: var(--qf-danger);
    background: var(--qf-danger-soft);
}

.qf-query-form .qf-submit-btn {
    display: block;
    width: 100%;
    border: none;
    background: var(--qf-coral);
    color: #fff;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: none;
    padding: 13px 20px;
    border-radius: var(--qf-radius-sm);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.qf-query-form .qf-submit-btn:hover {
    background: var(--qf-coral-dark);
    color: #fff;
    transform: translateY(-1px);
}

.qf-query-form .qf-recaptcha {
    margin-top: 16px;
}

.qf-query-form .qf-message {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--qf-danger);
}

.qf-query-form .qf-message:empty {
    display: none;
}

/* ---------- Ads slot ---------- */

.qf-ads {
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .qf-query-form .qf-help {
        text-align: left;
    }
}