/* * himachal-patch.css — Adventure Vessel Himachal LP Optimisation Styles * Version: 1.0 | June 2026 * * HOW TO DEPLOY: * Add this single line inside (after your other CSS): * */ /* ============================================= 2. URGENCY BANNER ============================================= */ #av-urgency-bar { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%); color: #fff; text-align: center; padding: 10px 20px; font-size: 14px; font-weight: 500; letter-spacing: 0.3px; z-index: 99999; position: relative; } #av-urgency-bar a { color: #ffe082; font-weight: 700; text-decoration: underline; } #av-urgency-bar a:hover { color: #fff; } /* ============================================= 3. FORM DROPDOWNS ============================================= */ #av-travel-month, #av-from-city { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px; padding-right: 32px; cursor: pointer; } /* ============================================= 7. FLOATING WHATSAPP BUTTON ============================================= */ #av-wa-float { position: fixed; bottom: 24px; right: 24px; background-color: #25D366; color: #fff !important; border-radius: 50px; padding: 13px 22px; font-size: 15px; font-weight: 700; text-decoration: none !important; z-index: 99998; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease; display: inline-flex; align-items: center; gap: 6px; } #av-wa-float:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); color: #fff !important; } @media (max-width: 576px) { #av-wa-float { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 14px; } } /* ============================================= 8. FAQ SECTION ============================================= */ .av-faq-section { padding: 70px 0; background: #f8f9fb; } .av-faq-section .section-heading { text-align: center; margin-bottom: 40px; } .av-faq-list { max-width: 800px; margin: 0 auto; } .av-faq-item { border: 1px solid #e0e4ea; border-radius: 8px; margin-bottom: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } .av-faq-q { width: 100%; text-align: left; background: #fff; border: none; padding: 18px 22px; font-size: 15px; font-weight: 600; color: #1c3d71; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; line-height: 1.4; } .av-faq-q:hover, .av-faq-q[aria-expanded="true"] { background: #eef3fb; } .av-faq-icon { flex-shrink: 0; font-size: 22px; font-weight: 400; color: #1c3d71; margin-left: 12px; line-height: 1; } .av-faq-a { padding: 0 22px 18px; color: #555; font-size: 14px; line-height: 1.7; } .av-faq-a p { margin: 0; } /* ============================================= 13. MID-PAGE WHATSAPP CTA BANNER ============================================= */ .av-wa-mid-cta { background: linear-gradient(135deg, #1c3d71 0%, #2d5fa1 100%); padding: 50px 20px; text-align: center; color: #fff; } .av-wa-mid-cta h3 { font-size: 26px; font-weight: 700; margin-bottom: 12px; color: #fff; } .av-wa-mid-cta p { font-size: 15px; margin-bottom: 24px; opacity: 0.9; color: #fff; } .av-wa-cta-btn { background: #25D366 !important; color: #fff !important; border: none !important; font-weight: 700; font-size: 16px; padding: 14px 28px; border-radius: 50px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; display: inline-block; margin: 6px; } .av-wa-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); color: #fff !important; } .av-call-cta-btn { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,0.7) !important; font-weight: 600; font-size: 16px; padding: 12px 26px; border-radius: 50px; text-decoration: none; display: inline-block; margin: 6px; transition: border-color 0.2s, background 0.2s; } .av-call-cta-btn:hover { border-color: #fff !important; background: rgba(255,255,255,0.1) !important; color: #fff !important; } @media (max-width: 576px) { .av-wa-mid-cta h3 { font-size: 20px; } .av-wa-cta-btn, .av-call-cta-btn { width: 100%; text-align: center; margin: 5px 0; } } /* ============================================= 16. WHY BOOK WITH US SECTION ============================================= */ .av-why-us { padding: 70px 0; background: #fff; } .av-why-us .section-heading { text-align: center; margin-bottom: 40px; } .av-why-card { border: 1px solid #e8edf5; border-radius: 12px; padding: 28px 24px; text-align: center; height: 100%; transition: box-shadow 0.25s, transform 0.25s; background: #fff; } .av-why-card:hover { box-shadow: 0 8px 28px rgba(28, 61, 113, 0.12); transform: translateY(-4px); } .av-why-icon { font-size: 40px; margin-bottom: 14px; line-height: 1; } .av-why-card h4 { font-size: 16px; font-weight: 700; color: #1c3d71; margin-bottom: 8px; } .av-why-card p { font-size: 13px; color: #666; margin: 0; line-height: 1.6; } /* ============================================= RESPONSIVE FIXES ============================================= */ @media (max-width: 768px) { .av-faq-q { font-size: 14px; padding: 14px 16px; } .av-faq-a { padding: 0 16px 14px; } .av-why-us { padding: 50px 0; } .av-faq-section { padding: 50px 0; } } /* ============================================================ AV-PATCH-v2: Form Design Improvements ============================================================ */ /* --- Input fields: clean modern style --- */ #submitform .input-field .form-control, #modalform .input-field .form-control, #modalform1 .input-field .form-control, .av-input { height: 48px !important; border: 1.5px solid #c8d3e0 !important; border-radius: 8px !important; padding: 12px 16px !important; font-size: 14px !important; color: #2c3e50 !important; background: #ffffff !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; width: 100% !important; } #submitform .input-field .form-control:focus, #modalform .input-field .form-control:focus, #modalform1 .input-field .form-control:focus, .av-input:focus { border-color: #1c3d71 !important; box-shadow: 0 0 0 3px rgba(28, 61, 113, 0.12) !important; outline: none !important; background: #ffffff !important; } #submitform .input-field .form-control::placeholder, #modalform .input-field .form-control::placeholder, #modalform1 .input-field .form-control::placeholder, .av-input::placeholder { color: #9aabb8 !important; font-size: 13px !important; } /* Remove number spinner arrows */ .av-input[type="number"]::-webkit-inner-spin-button, .av-input[type="number"]::-webkit-outer-spin-button, #submitform input[type="number"]::-webkit-inner-spin-button, #modalform input[type="number"]::-webkit-inner-spin-button, #modalform1 input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* --- Field spacing --- */ #submitform .input-field, #modalform .input-field, #modalform1 .input-field, .av-f { margin-bottom: 10px !important; } /* --- Submit button: gradient + lift effect --- */ #submitform .actionbtn, #modalform .actionbtn, #modalform1 .actionbtn, .av-submit-btn { height: 50px !important; width: 100% !important; background: linear-gradient(135deg, #1c3d71 0%, #2a5ba8 100%) !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; box-shadow: 0 4px 14px rgba(28, 61, 113, 0.38) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; cursor: pointer !important; margin-top: 6px !important; display: block !important; } #submitform .actionbtn:hover, #modalform .actionbtn:hover, #modalform1 .actionbtn:hover, .av-submit-btn:hover { background: linear-gradient(135deg, #152e57 0%, #1c4a8a 100%) !important; box-shadow: 0 6px 20px rgba(28, 61, 113, 0.52) !important; transform: translateY(-2px) !important; color: #ffffff !important; } #submitform .actionbtn:active, .av-submit-btn:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(28, 61, 113, 0.3) !important; } /* --- Hide any injected select dropdowns (travel_month, departure) --- */ #submitform select, #modalform select, #modalform1 select { display: none !important; } /* --- Form card wrapper (hero section) --- */ .form-section, .hero-enquiry, .sidebar-form, .booking-form-wrap { border-radius: 12px !important; overflow: hidden !important; }