/* ==========================================================================
   Patron Accounting - hero enquiry form ("Get Free Consultation")
   Component stylesheet for partials/lead-form + partials/enquiry-form.
   Linked once by partials/enquiry-form-scripts; never paste it into a page.

   Colours resolve to the page's own design tokens where it defines them and
   fall back to the Patron palette where it does not, so the form is styled on
   every page whether or not patron-cluster.css is loaded.
   ========================================================================== */

/* ============================================
           FORM CARD
           ============================================ */
        .form-card {
            background: var(--white, #FFFFFF); border-radius: var(--radius-xl, 24px);
            padding: 32px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.08)); border: 1px solid var(--gray-100, #F3F4F6); position: relative;
            max-width: 420px; width: 100%;
            animation: fadeInForm 0.5s ease 0.2s forwards; opacity: 0;
            margin: 0 auto;
        }
        @keyframes fadeInForm { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
        .form-card::before {
            content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 3px;
            background: linear-gradient(90deg, var(--orange, #E8712C), var(--blue, #1B365D)); border-radius: 0 0 3px 3px;
        }
        .form-header { margin-bottom: 24px; }
        .form-title { font-size: 22px; font-weight: 800; color: var(--blue, #1B365D); margin-bottom: 4px; }
        .form-subtitle { font-size: 13px; color: var(--text-muted, #6B7280); }
        .form-group { margin-bottom: 16px; }
        .form-label {
            display: block; font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 700;
            color: var(--blue, #1B365D); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px;
        }
        .form-input {
            width: 100%; padding: 13px 16px; font-family: 'Barlow', sans-serif; font-size: 14px;
            color: var(--text-primary, #1F2937); background: var(--gray-50, #F9FAFB); border: 1.5px solid transparent;
            border-radius: var(--radius-md, 12px); transition: all 0.2s ease;
        }
        .form-input::placeholder { color: var(--gray-400, #9CA3AF); }
        .form-input:hover { background: var(--gray-100, #F3F4F6); }
        .form-input:focus { outline: none; background: var(--white, #FFFFFF); border-color: var(--orange, #E8712C); box-shadow: 0 0 0 3px rgba(232,113,44,0.08); }

        /* Select */
        .form-select {
            width: 100%; padding: 13px 16px; font-family: 'Barlow', sans-serif; font-size: 14px;
            color: var(--text-primary, #1F2937); background: var(--gray-50, #F9FAFB); border: 1.5px solid transparent;
            border-radius: var(--radius-md, 12px); cursor: pointer; appearance: none; -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 14px center; transition: all 0.2s ease;
        }
        .form-select:hover { background-color: var(--gray-100, #F3F4F6); }
        .form-select:focus { outline: none; background-color: var(--white, #FFFFFF); border-color: var(--orange, #E8712C); box-shadow: 0 0 0 3px rgba(232,113,44,0.08); }

        /* Phone Group + Country Dropdown */
        .phone-group {
            min-height: 50px;
            display: flex; align-items: center; background: var(--gray-50, #F9FAFB); border-radius: var(--radius-md, 12px);
            border: 1.5px solid transparent; overflow: visible; transition: all 0.2s ease; position: relative;
        }
        .phone-group:hover { background: var(--gray-100, #F3F4F6); }
        .phone-group:focus-within { background: var(--white, #FFFFFF); border-color: var(--orange, #E8712C); box-shadow: 0 0 0 3px rgba(232,113,44,0.08); }

        .country-code-dropdown {
            display: flex; align-items: center; justify-content: flex-start; gap: 6px;
            padding: 13px 10px 13px 14px; cursor: pointer;
            border-right: 1px solid var(--gray-200, #E5E7EB); background: transparent; position: relative;
            min-width: 80px; user-select: none; flex-shrink: 0; transition: background 0.15s;
            box-sizing: border-box;
        }
        .country-code-dropdown:hover { background: rgba(0,0,0,0.03); }
        .selected-flag {
            font-size: 20px; line-height: 1; display:flex; align-items:center;
            width: 26px; overflow: hidden; flex-shrink: 0;
            /* On browsers where flag emoji renders as "IN" text, clip it */
            font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
        }
        .selected-code { font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-secondary, #4B5563); white-space: nowrap; }
        .dropdown-arrow { transition: transform 0.25s ease; color: var(--gray-400, #9CA3AF); flex-shrink: 0; width: 12px; height: 12px; }
        .country-code-dropdown.open .dropdown-arrow { transform: rotate(180deg); }

        /* Country Dropdown List */
        .country-dropdown-list {
            display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 300px; max-height: 320px;
            background: var(--white, #FFFFFF); border: 1.5px solid var(--gray-200, #E5E7EB); border-radius: var(--radius-md, 12px);
            box-shadow: var(--shadow-xl, 0 20px 48px rgba(0,0,0,0.1)); z-index: 9999; overflow: hidden; flex-direction: column;
        }
        .country-code-dropdown.open .country-dropdown-list { display: flex; }
        .country-search-input {
            width: 100%; padding: 11px 14px; border: none; border-bottom: 1px solid var(--gray-200, #E5E7EB);
            font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--text-primary, #1F2937);
            background: var(--gray-50, #F9FAFB); outline: none;
        }
        .country-search-input::placeholder { color: var(--gray-400, #9CA3AF); }
        .country-options { overflow-y: auto; max-height: 260px; scrollbar-width: thin; }
        .country-options::-webkit-scrollbar { width: 5px; }
        .country-options::-webkit-scrollbar-track { background: transparent; }
        .country-options::-webkit-scrollbar-thumb { background: var(--gray-300, #D1D5DB); border-radius: 10px; }
        .country-option {
            display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
            transition: background 0.12s ease; font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--text-primary, #1F2937);
        }
        .country-option:hover, .country-option.active { background: var(--orange-lighter, #FFF9F5); }
        .country-option .flag-emoji { font-size: 18px; line-height: 1; width: 24px; text-align: center; }
        .country-option .country-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
        .country-option .dial-code { color: var(--text-muted, #6B7280); font-weight: 600; font-size: 12px; flex-shrink: 0; }

        /* Phone Input Override */
        .phone-input { border: none !important; background: transparent !important; box-shadow: none !important; flex: 1; min-width: 0; padding-left: 12px !important; align-self: center; }
        .phone-input:focus { box-shadow: none !important; border: none !important; }

        /* Submit Button */
        .btn-submit {
            width: 100%; padding: 15px 24px; font-family: 'Barlow', sans-serif;
            font-size: 17px; font-weight: 700; color: var(--white, #FFFFFF); background: var(--orange, #E8712C);
            border: none; border-radius: 50px; cursor: pointer; transition: all 0.25s ease;
            display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px;
        }
        .btn-submit:hover { background: var(--orange-dark, #D4621F); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(232,113,44,0.35); }
        .btn-submit:active { transform: translateY(0); }
        .btn-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; }

        /* Form Footer */
        .form-response-note { text-align: center; font-size: 12px; color: var(--text-muted, #6B7280); margin-top: 14px; margin-bottom: 0; }
        .form-footer {
            display: flex; justify-content: center; gap: 16px; margin-top: 16px;
            padding-top: 16px; border-top: 1px solid var(--gray-100, #F3F4F6);
        }
        .form-footer-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted, #6B7280); }
        .form-footer-item svg { width: 14px; height: 14px; color: var(--green, #10B981); }

        /* Error States */
        .form-input.input-error, .form-select.input-error { border-color: #FD6B6D !important; box-shadow: 0 0 0 2px rgba(253,107,109,0.12) !important; }
        .phone-group.input-error { border-color: #FD6B6D !important; box-shadow: 0 0 0 2px rgba(253,107,109,0.12) !important; }
        .field-error-msg { font-size: 12px; color: #FD6B6D; margin-top: 4px; font-weight: 500; }

        /* Success State */
        .form-success { text-align: center; padding: 40px 20px; }
        .form-success-icon { width: 64px; height: 64px; background: rgba(16,185,129,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
        .form-success h3 { font-size: 22px; font-weight: 700; color: var(--blue, #1B365D); margin-bottom: 8px; }
        .form-success p { font-size: 14px; color: var(--text-muted, #6B7280); line-height: 1.6; }

        @media (max-width: 480px) {
            .form-card { padding: 24px 16px; border-radius: var(--radius-lg, 16px); max-width: 100%; }
            .form-title { font-size: 20px; }
            .country-dropdown-list { width: 260px; }
            .form-footer { flex-wrap: wrap; gap: 10px; }
            .btn-submit { font-size: 16px; padding: 14px 20px; }
        }

/* The card fades in from opacity:0. With animations suppressed that keyframe
   never runs, so without this the form would stay invisible for anyone using
   reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .form-card { animation: none; opacity: 1; }
}

/* ===========================================================================
   Compact variant  (partials/bigin-form.blade.php)
   ---------------------------------------------------------------------------
   The service is fixed to the page and is NOT displayed - it travels to Bigin
   in hidden fields only, so there is no service control to style.
   =========================================================================== */

/* Compact variant - FAQ column and other narrow slots. Same form, less air. */
.bigin-form--compact { padding: 20px 18px; }
.bigin-form--compact .form-title    { font-size: 17px; }
.bigin-form--compact .form-subtitle { font-size: 12px; }
.bigin-form--compact .form-header   { margin-bottom: 14px; }
.bigin-form--compact .form-group    { margin-bottom: 12px; }
.bigin-form--compact .form-label    { font-size: 12px; }
.bigin-form--compact .form-input    { padding: 10px 12px; font-size: 14px; }
.bigin-form--compact .btn-submit    { padding: 11px 16px; font-size: 14px; }
.bigin-form--compact .form-footer   { gap: 10px; font-size: 11px; }

/* Inline per-field error text created by js/enquiry-form.js */
.field-error-msg {
    margin-top: 4px;
    padding-left: 2px;
    font-size: 12px;
    color: #FD6B6D;
}