/* ==========================================================================
   MBTI Coach Theme Base Styles (Modern Minimalist + Violet Brand)
   ========================================================================== */

   ========================================================================== */
   :root {
       /* Typography and Layout variables */
       --font-primary: 'Inter', sans-serif;
       --radius: 4px; /* Minimalist sharp/soft corners */
       --radius-lg: 8px;
       --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
       --shadow-hover: 0 10px 15px -3px rgba(90, 46, 152, 0.1), 0 4px 6px -2px rgba(90, 46, 152, 0.05);
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html {
       scroll-behavior: smooth;
   }

   body {
       font-family: var(--font-primary);
       background-color: var(--def-white);
       color: var(--def-black);
       line-height: 1.6;
       -webkit-font-smoothing: antialiased;
       overflow-x: hidden;
   }
   
   h1, h2, h3, h4, h5, h6 {
       font-weight: 700;
       color: var(--def-black);
       margin-bottom: 15px;
       line-height: 1.2;
   }
   
   .hero-title {
       font-size: 3.5rem;
   }
   
   .hero-desc {
       font-size: 1.1rem;
   }
   
   a {
       text-decoration: none;
       color: var(--brand-violet);
       transition: all 0.2s ease;
   }
   
   a:hover {
       color: var(--brand-violet-hover);
   }
   
   img {
       max-width: 100%;
       height: auto;
       display: block;
   }
   
   .container {
       max-width: 1280px;
       margin: 0 auto;
       padding: 0 24px;
       overflow-x: hidden;
   }
   
   .site-header .container {
       overflow: visible !important;
   }

   .section {
       padding: 80px 0;
   }
   
   .bg-gray {
       background-color: var(--brand-violet-light); /* Changed to violet-light */
   }

   .text-center {
       text-align: center;
   }
   
   /* ==========================================================================
      Buttons
      ========================================================================== */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background-color: var(--brand-violet); /* Using Violet */
       color: #FFFFFF;
       padding: 14px 28px;
       border-radius: var(--radius);
       font-family: var(--font-primary);
       font-weight: 600;
       font-size: 0.95rem;
       border: 1px solid var(--brand-violet);
       cursor: pointer;
       transition: all 0.2s ease;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }
   
   .btn:hover {
       background-color: var(--brand-violet-hover);
       border-color: var(--brand-violet-hover);
       color: #FFFFFF;
   }
   
   .btn-outline {
       background-color: transparent;
       color: var(--brand-violet);
       border-color: var(--brand-violet);
   }
   
   .btn-outline:hover {
       background-color: var(--brand-violet-light);
       border-color: var(--brand-violet);
       color: var(--brand-violet-hover);
   }
   
   /* ==========================================================================
      Header
      ========================================================================== */
   .site-header {
       background-color: var(--def-white);
       border-bottom: 1px solid var(--def-gray);
       position: sticky;
       top: 0;
       z-index: 1000;
       transition: all 0.3s ease;
   }

   .site-header.scrolled {
       box-shadow: var(--shadow);
   }
   
   .header-main {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 20px 0;
        width: 100%;
    }
   
   .logo a {
       font-size: 1.5rem;
       font-weight: 800;
       color: var(--brand-violet);
       letter-spacing: -1px;
       text-transform: uppercase;
   }

   .logo {
       display: flex;
       justify-content: flex-start;
   }

   .logo a:hover {
       color: var(--brand-violet-hover);
   }
   
   .main-nav {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-nav ul {
        display: flex;
        list-style: none;
        gap: 30px;
        margin: 0;
        padding: 0;
    }
   
   .main-nav a {
       color: var(--def-black);
       font-weight: 500;
       font-size: 0.95rem;
   }
   
   .main-nav a:hover, .main-nav a.active {
       color: var(--brand-violet);
   }
   
   .header-actions {
       display: flex;
       gap: 20px;
       align-items: center;
       justify-content: flex-end;
       white-space: nowrap;
   }
   
   .lang-switch {
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--def-gray-dark);
   }

   .lang-switch a {
       color: var(--def-gray-dark);
   }

   .lang-switch a.active {
       color: var(--brand-violet);
   }

   /* Mobile Menu Toggle Button */
   .menu-toggle {
       display: none;
       background: none;
       border: none;
       color: var(--def-black);
       cursor: pointer;
       padding: 5px;
       margin-left: 15px;
   }
   
   .menu-toggle svg {
       width: 28px;
       height: 28px;
   }

   /* ==========================================================================
      Forms & Inputs
      ========================================================================== */
   input[type="text"], input[type="email"], textarea {
       width: 100%;
       padding: 12px 16px;
       border: 1px solid var(--def-gray);
       border-radius: var(--radius);
       font-family: var(--font-primary);
       font-size: 0.95rem;
       outline: none;
       transition: all 0.2s;
       margin-bottom: 20px;
   }

   input:focus, textarea:focus {
       border-color: var(--brand-violet);
   }

   /* ==========================================================================
      Grid & Cards (3P Framework & About)
      ========================================================================== */
   .grid-3 {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 30px;
   }
   
   .grid-2 {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 60px;
       align-items: center;
   }

   .service-card {
       background: var(--def-white);
       border: 1px solid var(--def-gray);
       padding: 40px;
       border-radius: var(--radius);
       transition: var(--shadow-hover);
       display: flex;
       flex-direction: column;
   }

   .service-card:hover {
       box-shadow: var(--shadow);
       border-color: var(--brand-violet);
   }

   .card-number {
       font-size: 1.25rem;
       font-weight: 700;
       color: var(--brand-violet);
       margin-bottom: 20px;
   }

   .service-card h3 {
       font-size: 1.5rem;
       margin-bottom: 10px;
       color: var(--def-black);
   }

   .service-card p {
       color: var(--def-gray-dark);
       margin-bottom: 20px;
   }

   .service-card ul {
       list-style: none;
       margin-bottom: 20px;
       flex-grow: 1;
   }

   .service-card li {
       position: relative;
       padding-left: 20px;
       margin-bottom: 10px;
       font-size: 0.95rem;
       color: var(--def-black);
   }

   .service-card li::before {
       content: '•';
       position: absolute;
       left: 0;
       color: var(--brand-violet);
   }

   /* Fix double bullets on custom lists */
   ul[style*="list-style: none"] li,
   ul[style*="list-style:none"] li {
       list-style-type: none !important;
   }

   /* ==========================================================================
      Stats & Badges
      ========================================================================== */
   .stats-container {
       display: flex;
       gap: 40px;
       margin-top: 30px;
   }

   .stat-item {
       display: flex;
       flex-direction: column;
   }

   .stat-num {
       font-size: 2.5rem;
       font-weight: 700;
       line-height: 1;
       margin-bottom: 5px;
       color: var(--brand-violet);
   }

   .stat-label {
       font-size: 0.85rem;
       color: var(--def-gray-dark);
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   /* ==========================================================================
      Clients Marquee
      ========================================================================== */
   .marquee-container {
       overflow: hidden;
       position: relative;
       width: 100%;
       padding: 40px 0;
       background: var(--def-white);
       border-top: 1px solid var(--def-gray);
       border-bottom: 1px solid var(--def-gray);
   }

   .marquee-content {
       display: flex;
       align-items: center;
       width: max-content;
       animation: scroll 40s linear infinite;
   }

   .marquee-content img {
       height: 40px !important;
       width: auto !important;
       max-width: 150px !important;
       margin: 0 40px;
       object-fit: contain;
       opacity: 0.6;
       transition: all 0.3s ease;
   }

   .marquee-content img:hover {
       opacity: 1;
   }

   @keyframes scroll {
       0% { transform: translateX(0); }
       100% { transform: translateX(-50%); }
   }

   /* ==========================================================================
      Page Header (for internal pages)
      ========================================================================== */
   .page-header {
       background-color: var(--brand-violet-light);
       padding: 80px 0;
       text-align: center;
       border-bottom: 1px solid var(--def-gray);
   }

   .page-header h1 {
       font-size: 3rem;
       margin-bottom: 10px;
       letter-spacing: -1px;
   }

   .page-header p {
       color: var(--def-gray-dark);
       font-size: 1.1rem;
       max-width: 600px;
       margin: 0 auto;
   }

   /* ==========================================================================
      Footer
      ========================================================================== */
   .site-footer {
       background-color: var(--def-offwhite);
       border-top: 1px solid var(--def-gray);
       padding: 80px 0 30px;
   }
   
   .footer-inner {
       display: grid;
       grid-template-columns: 2fr 1fr 1fr 1.5fr;
       gap: 40px;
       margin-bottom: 60px;
   }
   
   .footer-col h4 {
       font-size: 1rem;
       margin-bottom: 20px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       color: var(--def-black) !important;
   }
   
   .footer-col p {
       color: var(--def-gray-dark) !important;
       font-size: 0.95rem;
       margin-bottom: 20px;
   }
   
   .site-footer .footer-col ul {
       list-style: none;
   }
   
   .site-footer .footer-col ul li {
       margin-bottom: 12px;
   }
   
   footer.site-footer .footer-col ul li a,
   footer.site-footer .footer-col ul a {
       color: var(--def-gray-dark) !important;
       font-size: 0.95rem !important;
       opacity: 1 !important;
   }
   
   footer.site-footer .footer-col ul li a:hover,
   footer.site-footer .footer-col ul a:hover {
       color: var(--brand-violet) !important;
   }
   
   .footer-col ul a:hover {
       color: var(--brand-violet);
   }
   
   .footer-bottom {
       text-align: center;
       padding-top: 30px;
       border-top: 1px solid var(--def-gray);
       color: var(--def-gray-dark) !important;
       font-size: 0.85rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .footer-bottom a {
       color: var(--def-gray-dark) !important;
   }
   
   .footer-bottom a:hover {
       color: var(--brand-violet) !important;
   }

   /* ==========================================================================
      Responsive Design
      ========================================================================== */
   @media (max-width: 992px) {
       .grid-3, .grid-2 {
           grid-template-columns: 1fr;
       }
       .hero-title {
           font-size: 2.5rem;
       }
       .page-header h1 {
           font-size: 2.2rem;
       }
       .footer-inner {
           grid-template-columns: 1fr 1fr;
       }
   }

   @media (max-width: 768px) {
       .header-main {
           display: flex !important;
           flex-direction: row !important;
           flex-wrap: nowrap !important;
           justify-content: space-between !important;
           align-items: center !important;
           position: relative !important;
       }
       .logo {
           max-width: 80%;
           display: flex;
       }
       .menu-toggle {
           display: block;
       }
        .site-header .main-nav.active .header-actions {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            margin-top: 20px !important;
            padding-top: 20px !important;
            border-top: 1px solid var(--def-gray-light) !important;
            gap: 15px !important;
        }
        .site-header .main-nav.active .header-actions .btn {
            width: 100% !important;
            text-align: center !important;
        }
       .main-nav {
           display: none !important;
       }
       .main-nav.active {
           display: flex !important;
           flex-direction: column !important;
           position: absolute !important;
           top: 100% !important;
           left: -24px !important; /* To account for .container 24px padding if header-main is the relative parent */
           width: 100vw !important; /* Full viewport width */
           background: var(--def-white) !important;
           padding: 20px 24px !important;
           box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
           border-top: 1px solid var(--def-gray) !important;
           z-index: 999999 !important;
           opacity: 1 !important;
           visibility: visible !important;
       }
        .main-nav.active ul {
            position: static !important;
            transform: none !important;
            flex-direction: column !important;
            gap: 15px !important;
            display: flex !important;
            align-items: flex-start !important;
            text-align: left !important;
            width: 100% !important;
        }
       .main-nav.active ul li, .main-nav.active ul a {
           text-align: left !important;
           width: 100% !important;
           justify-content: flex-start !important;
       }
       .footer-inner {
           grid-template-columns: 1fr;
       }
       .footer-bottom {
           flex-direction: column;
           gap: 15px;
       }
       .stats-container {
           flex-direction: column;
       }
    }

    /* Fix WooCommerce Quantity Input Layout */
    .woocommerce .quantity, .quantity, .cart-item-qty > div {
        display: inline-flex !important;
        align-items: center !important;
        border: 1px solid #d1d5db !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        height: 40px !important;
        width: auto !important;
        min-width: 130px !important;
        background: #fff !important;
        padding: 0 !important;
    }
    .woocommerce .quantity .minus,
    .woocommerce .quantity .plus,
    .woocommerce .quantity .qty,
    .woocommerce .quantity input,
    .woocommerce .quantity button,
    .quantity .minus,
    .quantity .plus,
    .quantity .qty,
    .quantity input,
    .quantity button {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        height: 100% !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 10px !important;
        border-radius: 0 !important;
    }
    .woocommerce .quantity .minus,
    .woocommerce .quantity .plus,
    .woocommerce .quantity input[type="button"],
    .woocommerce .quantity button,
    .quantity .minus,
    .quantity .plus,
    .quantity input[type="button"],
    .quantity button,
    .cart-item-qty button {
        cursor: pointer !important;
        font-size: 16px !important;
        background: transparent !important;
        color: #4b5563 !important;
        min-width: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
    }
    .woocommerce .quantity .minus:hover,
    .woocommerce .quantity .plus:hover,
    .woocommerce .quantity input[type="button"]:hover,
    .woocommerce .quantity button:hover,
    .quantity .minus:hover,
    .quantity .plus:hover,
    .quantity input[type="button"]:hover,
    .quantity button:hover,
    .cart-item-qty button:hover {
        background: #f3f4f6 !important;
    }
    .woocommerce .quantity .qty,
    .woocommerce .quantity input[type="number"],
    .quantity .qty,
    .quantity input[type="number"],
    .cart-item-qty input.qty {
        text-align: center !important;
        width: 60px !important;
        border: none !important;
        border-left: 1px solid #d1d5db !important;
        border-right: 1px solid #d1d5db !important;
        border-radius: 0 !important;
        -moz-appearance: textfield !important;
        max-width: 60px !important;
        min-height: auto !important;
        margin-bottom: 0 !important;
        padding: 12px 16px !important;
        height: auto !important;
    }
    .woocommerce .quantity .qty::-webkit-outer-spin-button,
    .woocommerce .quantity .qty::-webkit-inner-spin-button,
    .woocommerce .quantity input[type="number"]::-webkit-outer-spin-button,
    .woocommerce .quantity input[type="number"]::-webkit-inner-spin-button,
    .quantity .qty::-webkit-outer-spin-button,
    .quantity .qty::-webkit-inner-spin-button,
    .quantity input[type="number"]::-webkit-outer-spin-button,
    .quantity input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    /* Hide Additional Information / Order Notes section */
    .woocommerce-additional-fields {
        display: none !important;
    }

    /* ==========================================================================
       Services Dark Mode (New Designs)
       ========================================================================== */
    .service-dark-wrapper {
        background-color: #0d111c;
        color: #e2e8f0;
        font-family: var(--font-primary);
        padding-bottom: 40px;
    }

    .service-dark-header {
        text-align: center;
        padding: 80px 20px 60px;
    }

    .service-dark-header h1 {
        font-size: 3.5rem;
        color: #ffffff;
        margin-bottom: 15px;
        letter-spacing: -1px;
    }

    .service-dark-header p {
        font-size: 1.25rem;
        color: #eab308; /* Goldish yellow */
        max-width: 800px;
        margin: 0 auto;
    }

    .service-dark-grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .service-dark-main-content {
        padding-right: 20px;
    }

    .service-dark-card {
        background-color: #1e293b;
        border-radius: 12px;
        padding: 40px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border: 1px solid #334155;
    }

    .service-dark-card-image {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 30px;
        object-fit: cover;
    }

    .service-dark-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #7c3aed; /* Violet */
        color: #ffffff;
        padding: 16px 32px;
        border-radius: 8px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.2s;
        border: none;
        cursor: pointer;
        width: 100%;
    }
    .service-dark-btn:hover {
        background-color: #6d28d9;
        color: #ffffff;
    }
    
    .service-dark-footer {
        max-width: 1200px;
        margin: 40px auto 0;
        padding: 30px 40px;
        background-color: transparent;
        border: 1px solid #334155;
        border-radius: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    @media (max-width: 992px) {
        .service-dark-grid-layout {
            grid-template-columns: 1fr;
        }
        .service-dark-footer {
            flex-direction: column;
            text-align: center;
        }
    }

/* ==========================================================================
   Service Dark Packages (WooCommerce Products Override)
   ========================================================================== */
.service-dark-packages .woocommerce ul.products li.product {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Move Wishlist to Top Right of Image */
.service-dark-packages .etalasio-wishlist-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    margin: 0 !important;
    z-index: 10 !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.service-dark-packages .etalasio-wishlist-btn span {
    display: none !important;
}
.service-dark-packages .etalasio-wishlist-btn svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}
.service-dark-packages li.product > div[style*="margin-top: 10px;"] {
    position: static !important;
    margin: 0 !important;
}
.service-dark-packages .etalasio-wishlist-btn:hover {
    background: #fff !important;
    transform: scale(1.05) !important;
}

/* View Cart Replacement & Identical Button Styling */
.service-dark-packages .woocommerce ul.products li.product .button,
.service-dark-packages .woocommerce ul.products li.product .added_to_cart {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: #ffffff !important;
    color: #000000 !important;
    padding: 12px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
    margin-top: auto !important;
    border: none !important;
    line-height: 1.5 !important;
}
.service-dark-packages .woocommerce ul.products li.product .button:hover,
.service-dark-packages .woocommerce ul.products li.product .added_to_cart:hover {
    background: var(--brand-violet) !important;
    color: #ffffff !important;
}
.service-dark-packages .woocommerce ul.products li.product .button.added {
    display: none !important; /* Hide original Add to Cart when added */
}