/*
Theme Name: TutorStarter Child
Theme URI: ElimuTech
Template: tutorstarter
Author: Daniel Maina - ElimuTech
Author URI: https://www.elimutech.com
Description: Tutor Starter is a free WordPress LMS theme powered by Tutor LMS, the popular eLearning plugin for WordPress. It is designed to let Tutor LMS take center stage while also letting you pick what feels right. Tutor Starter is created with the same Unified Design System from Tutor LMS making it the perfect companion eLearning theme for Tutor LMS. Tutor Starter is also highly specialized for speed and efficiency, with all of its components optimized to give your eLearning website a great score on Google's PageSpeed. Tutor Starter pages are also schema ready and SEO optimized to make ranking on search engines as easy as pie! It also boasts an impressive blog single page for perfect readability. With full support for both Elementor and Gutenberg, Tutor Starter hopes to cater to the largest audience of both classic page builders and modern Gutenberg based builders. It comes with customizer settings for headers, footers, and everything in between. With several header and footer variations, advanced typography settings, and contextual page settings, create the eLearning website of your dreams with this free LMS theme. Tutor Starter features 3 modern and pre-built home layouts with fully functioning inner pages for both Elementor and Gutenberg to let you get started in no time. Tutor Starter also features a clean and light one-click demo importer to import all these pre-built home layouts for Gutenberg and Elementor. This, along with deep ties with Tutor LMS makes it a no-brainer WordPress LMS theme.
Tags: education,e-commerce,blog,custom-logo,grid-layout,one-column,two-columns,custom-background,custom-colors,custom-header,custom-menu,featured-images,flexible-header,full-width-template,sticky-post,theme-options,threaded-comments,translation-ready,rtl-language-support,footer-widgets,left-sidebar,right-sidebar
Version: 1.1.1750662273
Updated: 2025-06-23 07:04:33

*/


/* =======================================
   HEADER MAIN STYLES
======================================= */
.navbar-brand {
    padding: 10px 0;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937 !important;
}

.navbar-brand a {
    color: #1f2937 !important;
    text-decoration: none;
}

header,
.site-header,
.main-header,
.navbar-nav {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
}

/* =======================================
   LOGO IMAGE STYLING (if image is used)
======================================= */
.navbar-brand img {
    height: 80px !important;
    width: auto !important;
    max-height: none !important;
}

/* =======================================
   NAV MENU LINKS
======================================= */
.navbar-nav > li > a {
    color: #1f2937 !important; /* dark gray */
    font-weight: 600;
    text-transform: uppercase;
    padding: 15px 20px;
    display: inline-block;
    transition: color 0.3s ease;
}

.navbar-nav > li > a:hover {
    color: #2563eb !important; /* blue hover */
}


/* =======================================
   MENU DROPDOWNS – STYLING
======================================= */
.navbar-nav .sub-menu {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb;
    padding: 10px 0;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 999;
}

.navbar-nav .sub-menu li a {
    color: #000000 !important;
    padding: 10px 20px;
    display: block;
    font-size: 15px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar-nav .sub-menu li a:hover {
    color: #2563eb !important; /* Yellow text on hover */
    background-color: #f9fafb !important; /* Light background */
}


/* =======================================
   DROPDOWN INDICATOR ( ▼ ) ON PARENT LINKS
======================================= */
.navbar-nav .menu-item-has-children > a::after {
    content: " ▼";
    font-size: 0.7em;
    margin-left: 6px;
    color: #6b7280; /* Tailwind gray-500 */
    transition: transform 0.3s ease, color 0.3s ease;
}

.navbar-nav .menu-item-has-children:hover > a::after {
    transform: rotate(180deg); /* flip the arrow on hover */
    color: #facc15; /* Optional: make it yellow on hover */
}


/* =======================================
   TUTOR LMS - USER PROFILE DROPDOWN
======================================= */
.tutor-header-submenu {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    border-radius: 6px;
    margin-top: 8px;
    z-index: 9999;
}

.tutor-header-submenu .tutor-submenu-links ul li a {
    color: #1f2937 !important;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 20px;
    display: block;
    transition: all 0.2s ease;
}

.tutor-header-submenu .tutor-submenu-links ul li a:hover {
    color: #2563eb !important;
    background-color: #f1f5f9 !important;
}

/* Optional: style the name block in the dropdown */
.tutor-submenu-links .profile-name {
    font-weight: 700;
    padding: 10px 20px;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

/* === CART ICON BACKGROUND === */
.utils-cart .btn-cart {
    background-color: #ffffff !important; /* Blue background */
    color: #2563eb !important;            /* White cart icon/text */
    padding: 8px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.utils-cart .btn-cart:hover {
    background-color: #1d4ed8 !important; /* Darker blue on hover */
    color: #ffffff;
}

/* === PROFILE NAME IN DROPDOWN === */
.tutor-submenu-links .profile-name {
    background-color: #f3f4f6 !important; /* Light gray background */
    color: #111827 !important;           /* Dark text */
    font-weight: 700;
    padding: 12px 20px;
    font-size: 16px;
    border-bottom: 1px solid #e5e7eb;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}


/* === Force username to be black === */
.tutor-header-profile-submenu span[role="button"] {
    color: #000000 !important; /* Black text */
}

/* === Optional: Change arrow color separately (if needed) === */
.tutor-header-profile-submenu span[role="button"] svg {
    color: #6b7280 !important; /* Gray icon */
    fill: currentColor !important;
}





/* === Form Container === */
    #tutor-registration-form {
      max-width: 720px;
      margin: 60px auto;
      padding: 40px 35px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
      font-family: 'Inter', sans-serif;
    }
    
    
    /* === Step Progress Indicator === */
    .step-progress {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      position: relative;
      padding: 0 10px;
    }
    
    .step-progress::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 10%;
      width: 80%;
      height: 4px;
      background: #e5e7eb;
      z-index: 0;
      transform: translateY(-50%);
    }
    
    .step {
      position: relative;
      z-index: 1;
      background: #e5e7eb;
      color: #6b7280;
      padding: 10px 20px;
      border-radius: 50px;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
      flex: 1;
      text-align: center;
      margin: 0 5px;
    }
    
    .step.active,
    .step.completed {
      background: #6366f1;
      color: #fff;
    }
    
    
    
    /* === Step Sections === */
    .form-step {
      display: none;
      animation: fadeIn 0.3s ease;
    }
    .form-step:first-child {
      display: block;
    }
    
    /* === Animation === */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* === password strength indicator === */
    .password-strength-text,
    .password-match-text {
      font-size: 14px;
      margin-top: 6px;
      font-weight: 500;
    }
    
    .password-strength-weak span {
      color: #dc2626; /* red */
    }
    
    .password-strength-medium span {
      color: #f59e0b; /* amber */
    }
    
    .password-strength-strong span {
      color: #16a34a; /* green */
    }
    
    .password-match-text {
      font-weight: 600;
    }
    
    .password-match-success {
      color: #16a34a; /* green */
    }
    
    .password-match-error {
      color: #dc2626; /* red */
    }
    
    
    /* === Form Row and Columns === */
    .tutor-form-row {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 24px;
    }
    .tutor-form-col-6 {
      flex: 1 1 calc(50% - 12px);
    }
    .tutor-form-col-12 {
      flex: 1 1 100%;
    }
    
    /* === Input Styling === */
    .tutor-form-group {
      display: flex;
      flex-direction: column;
    }
    .tutor-form-group label {
      font-size: 15px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 8px;
    }
    .tutor-form-group input {
      padding: 14px 16px;
      border: 1px solid #d1d5db;
      border-radius: 12px;
      font-size: 16px;
      background: #f9fafb;
      transition: all 0.3s ease;
    }
    .tutor-form-group input:focus {
      border-color: #6366f1;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
      outline: none;
    }
    input::placeholder {
      color: #9ca3af;
      font-size: 14px;
    }


    /* Checkbox Wrapper Styling */
    .tutor-form-group input[type="checkbox"] {
        color: #3c82f6; /* Blue checkbox tick == accent color */ 
    	width: 18px;
    	height: 18px;
    	margin-right: 10px;
    	cursor: pointer;
    }
    
    /* Label Styling */
    .tutor-form-group label {
    	font-size: 14px;
    	color: #444;
    	line-height: 1.5;
    	cursor: pointer;
    	display: flex;
    	align-items: flex-start;
    	margin-right: 10px;
    }
    
    /* Terms link text */
    .tutor-form-group label a {
    	color: #3c82f6;
    	text-decoration: underline;
    }
    
    .tutor-form-group label a:hover {
    	color: #1e60d1;
    	text-decoration: none;
    }
    
    /* Login Link Styling */
    #tutor-registration-wrap .tutor-mb-24:last-of-type {
    	margin-top: 16px;
    	font-size: 14px;
    	text-align: center;
    }
    
    #tutor-registration-wrap .tutor-mb-24:last-of-type a {
    	color: #3c82f6;
    	text-decoration: underline;
    	font-weight: 500;
    }
    
    #tutor-registration-wrap .tutor-mb-24:last-of-type a:hover {
    	color: #1e60d1;
    	text-decoration: none;
    }



    /* === Buttons === */
    .form-navigation {
      text-align: right;
      margin-top: 30px;
    }
    .form-navigation button {
      padding: 12px 24px;
      margin-left: 10px;
      font-size: 15px;
      font-weight: 600;
      border: none;
      border-radius: 10px;
      background: #6366f1;
      color: #fff;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .form-navigation button:hover {
      background: #4f46e5;
    }
    
    /* Hide button on first/last steps */
    .prev-btn {
      display: none;
    }