/* Main header menu - WHITE */ .main-header-menu > .menu-item > a { color: #ffffff !important; } /* Main menu hover - WHITE */ .main-header-menu > .menu-item > a:hover { color: #ffffff !important; } /* Services dropdown - GREY text */ .main-header-menu .sub-menu a { color: #666666 !important; } /* Dropdown background - WHITE */ .main-header-menu .sub-menu { background-color: #ffffff !important; } /* Dropdown hover */ .main-header-menu .sub-menu a:hover { color: #444444 !important; background-color: #f5f5f5 !important; } .card-container { transition: all 0.35s ease; } .card-container:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15); } .recent-posts .post, .recent-posts article, .recent-posts .post-item, .recent-posts .blog-post, .recent-posts .blog-post-item { transition: all 0.35s ease !important; } .recent-posts .post:hover, .recent-posts article:hover, .recent-posts .post-item:hover, .recent-posts .blog-post:hover, .recent-posts .blog-post-item:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 35px rgba(70, 50, 40, 0.15) !important; } /* Contact Info Cards */ .contact-info-card { transition: all 0.4s ease; border-radius: 22px; position: relative; overflow: hidden; } /* Card Hover */ .contact-info-card:hover { background-color: #8A5A44; transform: translateY(-8px); box-shadow: 0 18px 40px rgba(70, 45, 30, 0.18); } /* Icon Circle */ .contact-info-card .elementor-icon { transition: all 0.4s ease; } /* Icon Circle Hover */ .contact-info-card:hover .elementor-icon { background-color: #F3E5D8; color: #8A5A44; transform: scale(1.08); } /* Heading */ .contact-info-card .elementor-heading-title { transition: color 0.4s ease; } /* Heading Hover */ .contact-info-card:hover .elementor-heading-title { color: #FFFFFF; } /* Text */ .contact-info-card .elementor-widget-text-editor { transition: color 0.4s ease; } /* Text Hover */ .contact-info-card:hover .elementor-widget-text-editor, .contact-info-card:hover .elementor-widget-text-editor p { color: rgba(255, 255, 255, 0.9); } /* Links */ .contact-info-card a { transition: color 0.4s ease; } .contact-info-card:hover a { color: #FFFFFF; } .contact-info-card .elementor-icon-box-icon { transition: all 0.4s ease; } .contact-info-card:hover .elementor-icon-box-icon { transform: scale(1.08); } .contact-info-card:hover .elementor-icon-box-title { color: #FFFFFF; } .contact-info-card:hover .elementor-icon-box-description { color: rgba(255, 255, 255, 0.9); } /* ========================================================= PATCHOULI BEAUTY - BOOKING CALENDAR PREMIUM DESIGN ========================================================= */ :root { --pb-brown: #7B523E; --pb-dark-brown: #613D2D; --pb-light-brown: #EFE2D7; --pb-cream: #FBF7F3; --pb-border: #E5D6CA; --pb-text: #3D3029; --pb-muted: #8A7A70; } /* ========================================================= MAIN BOOKING CONTAINER ========================================================= */ .booking_form_div { background: #FFFFFF !important; border: 1px solid var(--pb-border) !important; border-radius: 24px !important; padding: 36px 38px !important; box-shadow: 0 15px 45px rgba(80, 52, 38, 0.08) !important; color: var(--pb-text) !important; } /* ========================================================= FORM ELEMENT SPACING ========================================================= */ .booking_form_div .bfb_element { margin-bottom: 12px !important; padding-bottom: 0 !important; } .booking_form_div .control-group { margin-bottom: 13px !important; } /* ========================================================= LABELS ========================================================= */ .booking_form_div .control-label { display: block !important; color: var(--pb-text) !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 6px !important; } /* ========================================================= INPUTS ========================================================= */ .booking_form_div input[type="text"], .booking_form_div input[type="email"], .booking_form_div input[type="tel"], .booking_form_div input[type="number"], .booking_form_div select, .booking_form_div textarea { width: 100% !important; background: var(--pb-cream) !important; border: 1px solid var(--pb-border) !important; border-radius: 9px !important; color: var(--pb-text) !important; font-size: 13px !important; padding: 10px 13px !important; height: 43px !important; min-height: 43px !important; outline: none !important; box-shadow: none !important; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease !important; } /* ========================================================= TEXTAREA ========================================================= */ .booking_form_div textarea { height: 82px !important; min-height: 82px !important; resize: vertical !important; } /* ========================================================= INPUT HOVER ========================================================= */ .booking_form_div input:hover, .booking_form_div select:hover, .booking_form_div textarea:hover { border-color: #C8AFA0 !important; } /* ========================================================= INPUT FOCUS ========================================================= */ .booking_form_div input:focus, .booking_form_div select:focus, .booking_form_div textarea:focus { border-color: var(--pb-brown) !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(123, 82, 62, 0.08) !important; } /* ========================================================= PLACEHOLDER ========================================================= */ .booking_form_div input::placeholder, .booking_form_div textarea::placeholder { color: #A6978E !important; font-size: 12px !important; } /* ========================================================= CALENDAR ========================================================= */ .booking_form_div .datepick-inline { background: #FFFFFF !important; border: 1px solid var(--pb-border) !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 6px 18px rgba(80,52,38,.05) !important; max-width: 100% !important; } /* ========================================================= CALENDAR HEADER ========================================================= */ .booking_form_div .datepick-inline .datepick-header { background: var(--pb-brown) !important; color: #FFFFFF !important; border: none !important; padding: 13px !important; font-size: 14px !important; font-weight: 600 !important; } /* Header arrows */ .booking_form_div .datepick-inline .datepick-header a { color: #FFFFFF !important; } /* ========================================================= CALENDAR WEEKDAYS ========================================================= */ .booking_form_div .datepick-inline .datepick-title-row th { color: var(--pb-brown) !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; padding: 8px 3px !important; } /* ========================================================= CALENDAR CELLS ========================================================= */ .booking_form_div .datepick-inline .datepick-days-cell { border-color: #EFE4DC !important; transition: all .25s ease !important; } /* Available dates */ .booking_form_div .datepick-inline .datepick-days-cell.date_available { background: #FFFFFF !important; } /* Available date hover */ .booking_form_div .datepick-inline .datepick-days-cell.date_available:hover { background: var(--pb-light-brown) !important; color: var(--pb-brown) !important; } /* Selected date */ .booking_form_div .datepick-inline .datepick-days-cell.date_selected { background: var(--pb-brown) !important; color: #FFFFFF !important; } /* Selected date text */ .booking_form_div .datepick-inline .datepick-days-cell.date_selected a { color: #FFFFFF !important; } /* ========================================================= TIME SLOTS ========================================================= */ .wpbc_container .wpbc_timeslot { background: #FFFFFF !important; border: 1px solid #D8C7BA !important; border-radius: 8px !important; color: var(--pb-text) !important; padding: 10px 14px !important; margin: 4px 3px !important; min-height: 40px !important; font-size: 11px !important; font-weight: 500 !important; transition: all .25s ease !important; } /* Time slot hover */ .wpbc_container .wpbc_timeslot:hover { background: var(--pb-light-brown) !important; border-color: var(--pb-brown) !important; color: var(--pb-brown) !important; transform: translateY(-2px); } /* Selected time slot */ .wpbc_container .wpbc_timeslot_selected { background: var(--pb-brown) !important; border-color: var(--pb-brown) !important; color: #FFFFFF !important; box-shadow: 0 5px 12px rgba(123,82,62,.18) !important; } /* ========================================================= REQUIRED STAR ========================================================= */ .booking_form_div .wpbc_required { color: var(--pb-brown) !important; } /* ========================================================= EMAIL HELPER TEXT ========================================================= */ .booking_form_div .description { color: var(--pb-muted) !important; font-size: 11px !important; margin-top: 4px !important; margin-bottom: 4px !important; } /* ========================================================= CAPTCHA ========================================================= */ .booking_form_div .wpbc_captcha { margin-top: 4px !important; margin-bottom: 8px !important; } /* CAPTCHA INPUT */ .booking_form_div .wpbc_captcha input { width: 90px !important; height: 40px !important; } .wpbc_container .wpbc_button_light { background-color: #5A3D2C !important; color: #FFFFFF !important; border: none !important; border-radius: 50px !important; padding: 13px 30px !important; min-height: 46px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; box-shadow: 0 8px 18px rgba(90, 61, 44, 0.18) !important; transition: all 0.3s ease !important; } /* Hover */ .wpbc_container .wpbc_button_light:hover { background-color: #432D21 !important; color: #FFFFFF !important; transform: translateY(-3px) !important; box-shadow: 0 12px 25px rgba(90, 61, 44, 0.25) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .booking_form_div { padding: 22px 16px !important; border-radius: 18px !important; } .booking_form_div .datepick-inline { width: 100% !important; max-width: 100% !important; } .wpbc_container .wpbc_timeslot { margin: 3px 2px !important; padding: 9px 10px !important; font-size: 10px !important; } .booking_form_div input[type="text"], .booking_form_div input[type="email"], .booking_form_div input[type="tel"], .booking_form_div select, .booking_form_div textarea { width: 100% !important; } .wpbc_container .wpbc_button_light { width: 100% !important; } }