/*
Theme Name: Logi
Theme URI: https://logi.wpengine.com/
Author: the WeDesignTech team
Author URI: https://wedesignthemes.com/
Description: Logi is a lightweight, superfast, and attractive business theme suitable for creating every type of professional website. This multipurpose responsive theme is neatly coded, fully customizable, and highly optimized for SEO to rank high on search engines. It works completely fine with Gutenberg and significant page builders like Elementor, Visual Composer, etc. Logi is entirely compatible with WooCommerce to create your online store. With its extensive collection of features and easy customization options, every beginner can easily set up the websites without coding knowledge. It supports all the popular WordPress plugins, Google fonts, Menu options & Translation Ready. This stylish theme is 100% responsive, mobile-friendly, and good-looking with all device screens. Logi is the best and well-suited theme for you to craft a high-quality website. Logi theme is designed, developed, and Professionally maintained by Creative Brahma, and it is regularly updated with new advanced features.
Tags: Blog ,Portfolio
Text Domain: logi
Version: 1.0.4
Requires at least: 5.0
Tested up to: 6.7.2
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Copyright (C) 2024 buddhathemes. All rights reserved.
*/

.dialpadConsent{
	color: #F57539!important;
}
.dialpadConsent:hover{
	font-weight:bold !important;
}

.wdt-cus-service-imgbox .wdt-content-item .wdt-content-title h5{
	    width: calc(100%) !important;
}



/* ==========================================================================
   Contact Form 7 Custom Styles - Transphere Application
   ========================================================================== */

/* Clean up the boxes (fieldsets) around the form sections */
.wpcf7 fieldset {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 25px 30px !important;
    margin-bottom: 40px !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
}

/* Make sure the section titles look neat over the border */
.wpcf7 legend {
    padding: 0 15px !important;
    font-weight: bold;
    color: inherit;
}

/* Space out the radio buttons and checkboxes to stop them from squishing */
span.wpcf7-list-item {
    display: inline-block !important;
    margin-right: 25px !important;
    margin-bottom: 10px !important;
    margin-top: 5px !important;
}

/* Add breathing room between the radio circle and the text word */
span.wpcf7-list-item-label {
    margin-left: 8px !important;
    cursor: pointer;
}

/* Keep paragraphs tight inside the form */
.wpcf7 fieldset p {
    margin-bottom: 15px;
}



/* ==========================================================================
   Date Picker Improvements
   ========================================================================== */

/* 1. Fix the messy text spacing & setup the custom icon */
input[type="date"].wpcf7-form-control {
    letter-spacing: normal !important; /* Fixes the weird gaps in dd-mm-yyyy */
    font-family: inherit !important;
    cursor: pointer !important;
    position: relative !important;
    
    /* Add a custom, clean white calendar icon to replace the default */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 18px !important;
}

/* 2. Stretch the clickable area across the entire field */
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important; /* Hides the native icon but keeps it entirely clickable */
    cursor: pointer !important;
}

/* 3. Slightly fade the 'dd/mm/yyyy' placeholder so it looks cleaner */
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: rgba(255, 255, 255, 0.6) !important; 
}


/* ==========================================================================
   Two-Column Form Row (Desktop) & Mobile Stacking
   ========================================================================== */

/* Place the two columns side-by-side on computers/tablets */
.cf7-2col-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Creates two equal 50% columns */
    gap: 30px !important; /* Space between the two columns */
    align-items: start !important;
}

/* Ensure the radio button text doesn't have extra bottom margins inside the column */
.cf7-2col-row p {
    margin-bottom: 0 !important;
}

/* On mobile phones, stack them vertically so they aren't squished */
@media screen and (max-width: 768px) {
    .cf7-2col-row {
        grid-template-columns: 1fr !important; /* Changes back to 1 column */
        gap: 0px !important;
    }
}

/* --- Stronger fix for the stretched dd----yyyy spacing --- */
::-webkit-datetime-edit, 
::-webkit-datetime-edit-fields-wrapper, 
::-webkit-datetime-edit-text, 
::-webkit-datetime-edit-month-field, 
::-webkit-datetime-edit-day-field, 
::-webkit-datetime-edit-year-field {
    letter-spacing: 0px !important;
}



/* ==========================================================================
   Three-Column Layout & Submit Button Styling
   ========================================================================== */

/* 1. Place the 3 English questions side-by-side on computers */
.cf7-3col-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; /* Creates three equal columns */
    gap: 25px !important;
    align-items: start !important;
}

/* Ensure paragraph margins don't mess up alignment */
.cf7-3col-row p {
    margin-bottom: 0 !important;
}

/* Stack the 3 columns vertically on mobile and smaller tablets so they don't squish */
@media screen and (max-width: 992px) {
    .cf7-3col-row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* 2. Fix the Invisible Submit Button */
.wpcf7-submit {
    background-color: #0d6efd !important; /* A nice, bright, clickable blue */
    color: #ffffff !important; /* White text */
    border: none !important;
    padding: 15px 35px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    margin-top: 15px !important;
    display: inline-block !important;
}

/* Make it slightly darker blue when hovered */
.wpcf7-submit:hover {
    background-color: #0b5ed7 !important;
    color: #ffffff !important;
}


/* ==========================================================================
   CF7 Glassmorphism (Blurred Glass) Effect for Fieldsets
   ========================================================================== */
.wpcf7 fieldset {
    background-color: rgba(0, 15, 30, 0.4) !important; /* Semi-transparent dark blue */
    backdrop-filter: blur(12px) !important; /* THE MAGIC BLUR EFFECT */
    -webkit-backdrop-filter: blur(12px) !important; /* Safari Support */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Faint white border */
    border-radius: 12px !important; /* Slightly rounder corners */
    padding: 30px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important; /* Adds depth over the video */
}

/* Make the input boxes stand out more against the blurred background */
.wpcf7 input[type="text"], 
.wpcf7 input[type="email"], 
.wpcf7 input[type="tel"], 
.wpcf7 select {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}

/* Make the main submit button full-width so it anchors the bottom of the form */
.wpcf7-submit {
    width: 100% !important;
    padding: 18px !important;
    font-size: 18px !important;
    letter-spacing: 0.5px !important;
}

/* 5. Clean up the main global error box that appears at the bottom on failure */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    font-size: 14px !important;
    border-radius: 6px !important;
    border-width: 2px !important;
    margin-top: 25px !important;
}

/* ==========================================================
   FORCE HIDE WDT/LOGI NEWSLETTER POPUP ONLY
   ========================================================== */
/* We target ONLY the newsletter box, leaving the mobile menu alone */
.wdt-popup-box-content-holder,
.wdt-popup-box-window {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* Ensure body scrolling is never permanently locked by the newsletter */
body, html {
    overflow-y: auto !important;
}


/* ==========================================================================
   FORM OPTIMIZATION: Unified Form & Cleaned Titles (V2)
   ========================================================================== */

/* 1. Hide the redundant section titles ("Company Profile", "Contact Info") */
.wpcf7 legend {
    display: none !important;
}

/* 2. Visually merge the two form sections into a single panel */

/* Target the FIRST fieldset ("Company Profile") */
.wpcf7 fieldset:first-of-type {
    margin-bottom: 0 !important;                     /* Remove the space between the two boxes */
    border-bottom: none !important;                   /* Remove the dividing border line */
    padding-bottom: 15px !important;                  /* Reduce bottom padding to avoid a large internal gap */
    border-bottom-left-radius: 0 !important;      /* Flatten the bottom-left corner */
    border-bottom-right-radius: 0 !important;     /* Flatten the bottom-right corner */
}

/* Target the LAST fieldset ("Contact Information") */
.wpcf7 fieldset:last-of-type {
    padding-top: 15px !important;                     /* Reduce top padding to tighten the gap */
    border-top-left-radius: 0 !important;         /* Flatten the top-left corner */
    border-top-right-radius: 0 !important;        /* Flatten the top-right corner */
}


/* 3. Style the newly integrated Consent & Submit button */

/* Target the consent checkbox paragraph using the class we added */
.sms-consent-wrapper {
    margin-top: 25px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Ensure the submit button has proper spacing */
.wpcf7-submit {
    margin-top: 25px !important;
}




/* ==========================================================================
   MULTI-STEP FORM FUNCTIONALITY & STYLING
   ========================================================================== */

/* FORCE HIDE STEPS - Use !important to stop the theme from overriding */
.wpcf7 .cf7-step {
    display: none !important;
}

/* ONLY SHOW THE ACTIVE STEP */
.wpcf7 .cf7-step.active {
    display: block !important;
}

/* Ensure the form doesn't 'flicker' on load */
.wpcf7-form {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Style the navigation button container */
.cf7-nav {
    display: flex; /* Use flexbox for easy alignment */
    justify-content: space-between; /* Pushes buttons to opposite ends */
    margin-top: 30px;
    gap: 20px;
}

/* 4. Style the custom Next/Previous buttons */
.cf7-next-btn,
.cf7-prev-btn {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.7);
    padding: 14px 30px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: auto; /* Allow button to size to its content */
}

/* Make the Next button look like the primary action */
.cf7-next-btn {
    background-color: #0d6efd; /* Use the same blue as your submit button */
    border-color: #0d6efd;
    margin-left: auto; /* Pushes the single 'Next' button to the right */
}

.cf7-next-btn:hover {
    background-color: #0b5ed7 !important;
    border-color: #0b5ed7 !important;
}

.cf7-prev-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* 5. Make the main submit button share the space in the nav bar */
.cf7-nav .wpcf7-submit {
    width: 100%; /* Make it fill the available space */
    margin-top: 0;
}


/* Styled Buttons */
.wpcf7-submit, 
#cf7-next-btn, 
#cf7-prev-btn {
    background: #007bff !important; /* Your brand blue */
    color: #ffffff !important;
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    transition: 0.3s !important;
}

#cf7-prev-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}