/*!
Theme Name: Kymjojobs
Theme URI: http://underscores.me/
Author: kymjojobs Team
Author URI: http://kymjojobs.com
Description: A custom theme for the kymjojobs website.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kymjojobs
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Kymjojobs is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/* ... ALL THE UNDERSCORES DEFAULT CSS YOU PASTED EARLIER GOES HERE ... */
/* ... It ends with something like .aligncenter { ... } ... */


/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v48-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v48-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-v48-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v48-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/*--------------------------------------------------------------
>>> KYMJOJOBS CUSTOM STYLES START
--------------------------------------------------------------*/

/* --- Custom Registration & Login Form Styles --- */
.kymjojobs-form-container {
    max-width: 500px;
    margin: 40px auto;
    padding: 25px 30px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.kymjojobs-form-logo.text-center { text-align: center; margin-bottom: 20px; }
.kymjojobs-form-logo img { max-width: 150px; height: auto; }
/* Social login was removed, so .kymjojobs-form-social styles are not strictly needed unless you re-add it */
/* .kymjojobs-form-social.text-center { text-align: center; margin-bottom: 25px; } */
.kymjojobs-form-group { margin-bottom: 20px; position: relative; }
.kymjojobs-form-group label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 14px; color: #333; }
.kymjojobs-form-group input[type="text"],
.kymjojobs-form-group input[type="email"],
.kymjojobs-form-group input[type="password"],
.kymjojobs-form-group select { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 15px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.kymjojobs-form-group input:focus,
.kymjojobs-form-group select:focus { border-color: #0073aa; box-shadow: 0 0 0 1px #0073aa; outline: none; }
.required { color: red; margin-left: 2px; }
.kymjojobs-form-group input[type="password"] { padding-right: 60px; /* Increased space for toggle */ }
.kymjojobs-form-group #toggle_password,
.kymjojobs-form-group #toggle_login_password { position: absolute; right: 10px; /* Adjust if input padding-right changes */ top: 70%; /* May need fine-tuning depending on your input height and label */ transform: translateY(-50%); background: none; border: none; color: #555; cursor: pointer; padding: 5px; font-size: 12px; }
.kymjojobs-form-message.error { display: block; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 15px; margin-bottom: 20px; border-radius: 4px; }
.kymjojobs-form-message.error p { margin: 0 0 5px 0; padding: 0; }
.kymjojobs-form-message.error p:last-child { margin-bottom: 0; }
.error-message { display: block !important; color: #D8000C; font-size: 0.875em; margin-top: 5px; height: auto; opacity: 1; transition: opacity 0.3s ease; }
.error-message:empty { opacity: 0; height: 0; margin: 0; padding: 0; }
#g-recaptcha-container-for-registration,
#g-recaptcha-container-for-login { margin: 20px 0; min-height: 78px; /* For invisible reCAPTCHA, might not be needed if badge is inline and takes space */ }
.grecaptcha-badge { visibility: visible !important; z-index: 9999 !important; }
#reg_country_other_wrapper { transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0 !important; }
#reg_country_other_wrapper.active { max-height: 100px; opacity: 1; margin-top: 10px !important; }
#reg_submit_button,
#login_submit_button { background-color: #0073aa; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%; transition: background-color 0.3s ease; text-align: center; }
#reg_submit_button:hover,
#login_submit_button:hover { background-color: #005a87; }
#reg_submit_button.loading,
#login_submit_button.loading { position: relative; color: transparent !important; cursor: wait; }
#reg_submit_button.loading::after,
#login_submit_button.loading::after { content: ""; position: absolute; left: calc(50% - 10px); top: calc(50% - 10px); width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; border-top-color: #fff; animation: kymjojobs_spin 0.8s linear infinite; }
@keyframes kymjojobs_spin { to { transform: rotate(360deg); } }
.kymjojobs-form-footer.text-center { text-align: center; margin-top: 25px; font-size: 14px; }
.kymjojobs-form-footer a { color: #0073aa; text-decoration: none; }
.kymjojobs-form-footer a:hover { text-decoration: underline; }
@media (max-width: 520px) {
    .kymjojobs-form-container { margin: 20px 10px; padding: 20px 15px; }
    #reg_submit_button, #login_submit_button { padding: 15px; font-size: 15px; }
}
/* --- END Custom Registration & Login Form Styles --- */


/*--------------------------------------------------------------
/*--------------------------------------------------------------
>>> KYMJOJOBS CUSTOM STYLES START (Header, Footer, Forms)
--------------------------------------------------------------*/

/* --- Custom Header Styles --- */
.kymjo-custom-header {
    background: #fff; 
    padding: 10px 3%; /* Use percentage for side padding */
    position: relative; 
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); 
}

.kymjo-header-inner-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1280px; /* Max width for header content */
    margin: 0 auto;   /* Center the inner container */
}

.site-branding {
    flex-shrink: 0; /* Don't let logo shrink */
}
.site-branding img.custom-logo,
.site-branding .site-title a { /* If using site title as logo */
    display: block; 
    max-height: 40px;  /* <<< ADJUST YOUR LOGO HEIGHT HERE */
    width: auto;       
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5em;
}
.site-branding .site-title a:hover {
    color: #0073aa;
}


.site-title-mobile { /* Centered site title for mobile */
    flex-grow: 1;
    text-align: center;
    display: none; /* Hidden by default, shown on mobile */
}
.site-title-mobile p {
    margin: 0;
    font-size: 1.1em; /* Adjust size */
    font-weight: bold;
    color: #333;
}
.site-title-mobile p a {
    color: inherit;
    text-decoration: none;
}


/* Desktop Navigation & Auth Wrapper */
.header-navigation-auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Push to the right */
    flex-grow: 1; /* Take up available space */
}

.kymjo-nav-menu { /* Desktop Navigation */
    display: flex; 
    gap: 20px; 
    margin-right: 25px; 
}
.kymjo-nav-menu a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s ease;
    padding: 8px 4px; /* More compact padding */
    position: relative; 
}
.kymjo-nav-menu a::after { 
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #0073aa; /* Your primary color */
    bottom: -2px; 
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease-in-out;
}
.kymjo-nav-menu a:hover::after {
    width: 100%;
}
.kymjo-nav-menu a:hover {
    color: #0073aa; 
}

.kymjo-auth-links { /* Desktop Auth Links */
    display: flex;
    align-items: center;
    gap: 10px;
}
.kymjo-auth-links a {
    text-decoration: none;
    font-weight: 500; /* slightly less bold */
    font-size: 14px; 
    transition: all 0.2s ease;
    padding: 7px 15px; 
    border-radius: 4px; 
    border: 1px solid transparent; 
}
.kymjo-auth-links a.login,
.kymjo-auth-links a.dashboard-link {
    color: #0073aa;
    border-color: #0073aa; 
}
.kymjo-auth-links a.login:hover,
.kymjo-auth-links a.dashboard-link:hover {
    background-color: #0073aa;
    color: white;
}
.kymjo-auth-links a.register,
.kymjo-auth-links a.logout {
    background: #0073aa;
    color: white;
}
.kymjo-auth-links a.register:hover,
.kymjo-auth-links a.logout:hover {
    background-color: #005a87; 
}

/* Hamburger Icon */
.kymjo-hamburger {
    display: none; /* Hidden on desktop */
    cursor: pointer;
    padding: 8px; 
    z-index: 1005; /* Above mobile menu */
    margin-left: 10px; /* Space from edge or site title on mobile */
}
.kymjo-hamburger span {
    display: block;
    width: 22px; 
    height: 2.5px; 
    background-color: #333; /* Darker for better visibility */
    margin: 4px 0; 
    transition: all 0.3s ease-in-out;
    border-radius: 2px; 
}
.kymjo-hamburger:hover span {
    background-color: #0073aa; /* Hover color */
}
.kymjo-hamburger.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.kymjo-hamburger.active span:nth-child(2) {
    opacity: 0;
}
.kymjo-hamburger.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-menu-container {
display: none; /* Hidden by default /
position: absolute;
top: 100%; / Directly below the header /
left: 0; / Align to the left edge of the header /
/ right: 0; Remove this to control width /
width: 50%; / Cover half the width */
background: #ffffff;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
z-index: 999;
padding: 15px 0;
border-top: 1px solid #eee;
}
.mobile-menu-container.active { /* JS will toggle this class on .header-center-content */
    display: block;
}

.mobile-nav-menu {
    display: flex;
    flex-direction: column;
}
.mobile-nav-menu a {
    padding: 10px 25px; 
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
}
.mobile-nav-menu a:last-child {
    border-bottom: none;
}
.mobile-nav-menu a:hover {
    background-color: #f8f8f8;
    color: #0073aa;
}

.mobile-auth-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 25px;
    border-top: 1px solid #eee; /* Separator from nav links */
    margin-top: 10px;
}
.mobile-auth-links a {
    text-decoration: none;
    font-weight: 500;
    font-size: 15px; 
    padding: 10px 15px; 
    border-radius: 4px; 
    text-align: center;
    border: 1px solid transparent;
}
.mobile-auth-links a.login,
.mobile-auth-links a.dashboard-link {
    color: #0073aa;
    border-color: #0073aa; 
}
.mobile-auth-links a.register,
.mobile-auth-links a.logout {
    background-color: #0073aa;
    color: white;
}


/* --- Responsive Breakpoint for Header --- */
@media (max-width: 991px) { /* Tablet and Mobile */
    .kymjo-header-inner-container {
        position: relative; /* For mobile menu positioning */
    }
    .header-navigation-auth-wrapper {
        display: none; /* Hide desktop nav and auth links */
    }
    .site-title-mobile {
        display: block; /* Show mobile site title */
    }
    .kymjo-hamburger {
        display: flex; /* Show hamburger */
    }
}


/* --- Custom Registration & Login Form Styles --- */
.kymjojobs-form-container { max-width: 500px; margin: 40px auto; padding: 25px 30px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
.kymjojobs-form-logo.text-center { text-align: center; margin-bottom: 20px; }
.kymjojobs-form-logo img { max-width: 150px; height: auto; }
.kymjojobs-form-group { margin-bottom: 20px; position: relative; }
.kymjojobs-form-group label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 14px; color: #333; }
.kymjojobs-form-group input[type="text"], .kymjojobs-form-group input[type="email"], .kymjojobs-form-group input[type="password"], .kymjojobs-form-group select { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 15px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.kymjojobs-form-group input:focus, .kymjojobs-form-group select:focus { border-color: #0073aa; box-shadow: 0 0 0 1px #0073aa; outline: none; }
.required { color: red; margin-left: 2px; }
.kymjojobs-form-group input[type="password"] { padding-right: 60px; }
.kymjojobs-form-group #toggle_password, .kymjojobs-form-group #toggle_login_password { position: absolute; right: 10px; top: 70%; transform: translateY(-50%); background: none; border: none; color: #555; cursor: pointer; padding: 5px; font-size: 12px; }
.kymjojobs-form-message.error { display: block; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 15px; margin-bottom: 20px; border-radius: 4px; }
.kymjojobs-form-message.error p { margin: 0 0 5px 0; padding: 0; }
.kymjojobs-form-message.error p:last-child { margin-bottom: 0; }
.error-message { display: block !important; color: #D8000C; font-size: 0.875em; margin-top: 5px; height: auto; opacity: 1; transition: opacity 0.3s ease; }
.error-message:empty { opacity: 0; height: 0; margin: 0; padding: 0; }
#g-recaptcha-container-for-registration, #g-recaptcha-container-for-login { margin: 20px 0; } /* min-height removed as invisible takes no space until badge */
.grecaptcha-badge { visibility: visible !important; z-index: 9999 !important; }
#reg_country_other_wrapper { transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0 !important; }
#reg_country_other_wrapper.active { max-height: 100px; opacity: 1; margin-top: 10px !important; }
#reg_submit_button, #login_submit_button { background-color: #0073aa; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%; transition: background-color 0.3s ease; text-align: center; }
#reg_submit_button:hover, #login_submit_button:hover { background-color: #005a87; }
#reg_submit_button.loading, #login_submit_button.loading { position: relative; color: transparent !important; cursor: wait; }
#reg_submit_button.loading::after, #login_submit_button.loading::after { content: ""; position: absolute; left: calc(50% - 10px); top: calc(50% - 10px); width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; border-top-color: #fff; animation: kymjojobs_spin 0.8s linear infinite; }
@keyframes kymjojobs_spin { to { transform: rotate(360deg); } }
.kymjojobs-form-footer.text-center { text-align: center; margin-top: 25px; font-size: 14px; }
.kymjojobs-form-footer a { color: #0073aa; text-decoration: none; }
.kymjojobs-form-footer a:hover { text-decoration: underline; }
@media (max-width: 520px) {
    .kymjojobs-form-container { margin: 20px 10px; padding: 20px 15px; }
    #reg_submit_button, #login_submit_button { padding: 15px; font-size: 15px; }
}
/* --- END Custom Registration & Login Form Styles --- */


/*--------------------------------------------------------------
>>> KYMJOJOBS Custom Footer Styles (REVISED)
--------------------------------------------------------------*/
.site-footer#kymjo-footer {
    /* Brighter, professional dark blue background */
    background-color: #00233b; 
    /* Lighter text color for better contrast */
    color: #e0f2fe; 
    padding: 60px 0;
    /* Increased base font size for readability on desktop */
    font-size: 16px; 
    line-height: 1.7;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}

/* Updated link colors to match new theme */
.site-footer#kymjo-footer a { 
    color: #a8d8f0; 
    text-decoration: none; 
    transition: color 0.3s ease, text-decoration 0.3s ease;
}
.site-footer#kymjo-footer a:hover { 
    color: #ffffff; 
    text-decoration: none; 
}

.footer-container { 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 25px; 
    padding-right: 25px;
}
.footer-main-content {
    margin-bottom: 40px;
}

/* Increased gap for better spacing with larger text */
.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 40px; 
}
.footer-section { 
    margin-bottom: 20px; 
}
.footer-section h3 { 
    color: #ffffff; 
    font-size: 20px; /* Slightly larger heading */
    margin-top: 0; 
    margin-bottom: 20px; 
    font-weight: 600; 
}
.footer-section p { 
    color: #d0e8f8; /* Lighter paragraph text */
    margin-bottom: 1em; 
}

/* Social Media Section */
.footer-social-media {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #003a61; /* Updated separator color */
    text-align: center;
}
.footer-social-media h3 {
    margin-bottom: 20px;
}
.footer-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px; 
}
.footer-social-links a img {
    height: 28px; /* Slightly larger icons */
    width: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.footer-social-links a img:hover {
    opacity: 1;
    transform: scale(1.1); /* Add a subtle hover effect */
}

/* Footer Lists and Address */
.footer-section ul { list-style: none; padding: 0; margin: 0; }
.footer-section ul li { margin-bottom: 10px; }
.footer-section ul li a { color: #a8d8f0; }
.footer-section ul li a:hover { color: #ffffff; }
.footer-section.contact-info address { 
    color: #d0e8f8; 
    font-style: normal; 
}
.footer-section.contact-info address a { color: #a8d8f0; }
.footer-section.contact-info address a:hover { color: #ffffff; }

/* Footer Bottom (Copyright) */
.footer-bottom { 
    text-align: center; 
    padding: 30px 0; 
    color: #8bb6d6; /* Updated copyright color */
    font-size: 14px; 
    border-top: 1px solid #003a61; /* Updated separator color */
    margin-top: 0; 
}
.footer-bottom p { margin: 0; }

/* --- Responsive Adjustments --- */
@media (max-width: 768px) { 
    .footer-grid { 
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
        gap: 30px; 
    }
    .site-footer#kymjo-footer { padding: 40px 0; }
    .footer-main-content { margin-bottom: 30px; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-section { text-align: left; }
    .footer-social-media { text-align: left; }
    .footer-social-links { justify-content: flex-start; }
}
/*--------------------------------------------------------------
<<< END KYMJOJOBS Custom Footer Styles
--------------------------------------------------------------*/


/*--------------------------------------------------------------
>>> KYMJOJOBS Homepage Styles - V3.2 Design
--------------------------------------------------------------*/

/* --- Hero Section (White Background) --- */
.kymjo-hero-v3 {
    background-color: #ffffff; 
    position: relative;
    padding: 60px 20px 40px; 
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center; 
    text-align: center;
    overflow: hidden; 
    /* For true full-width if theme has a global max-width container for #content: */
    width: 100vw; 
    left: 50%;
    right: 50%;
    margin-left: -50vw; 
    margin-right: -50vw;
    box-sizing: border-box;
}

.kymjo-hero-content-container-v3 {
    position: relative; 
    z-index: 3; 
    max-width: 880px; 
    width: 100%;
    padding: 0 15px; 
}

.kymjo-hero-heading-v3 {
    font-size: 2.6em; 
    font-weight: 700; 
    margin-bottom: 15px;
    line-height: 1.25;
    color: #1A237E; /* Dark, professional blue */
}

.kymjo-hero-subheading-v3 {
    font-size: 1.1em; 
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 750px; 
    margin-left: auto;
    margin-right: auto;
    color: #37474F; /* Dark grey, softer than pure black */
}

/* Inline Moving Photo Cards */
.kymjo-moving-photo-cards-container {
    height: 90px; 
    margin: 25px auto 35px; 
    overflow: hidden; 
    position: relative;
    width: 100%;
    max-width: 900px; 
    /* The fading effect for the edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}
.kymjo-moving-cards-track {
    display: flex; 
    position: absolute;
    left: 0;
    /* JavaScript will handle the animation of this track */
}
.kymjo-moving-card {
    width: 70px; 
    height: 70px; 
    border-radius: 8px; 
    flex-shrink: 0; 
    margin: 0 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.kymjo-moving-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the square area without distortion */
    border-radius: 8px; /* Match parent's rounding */
    display: block;
}

/* Hero Search Bar - Trigger Button */
.kymjo-hero-search-wrapper-v3 {
    margin-top: 25px; 
    text-align: center;
}
.kymjo-open-search-button {
    background-color: #0056b3; 
    color: white;
    border: none;
    padding: 14px 30px; 
    font-size: 1.05em; 
    font-weight: 500;
    border-radius: 30px; 
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 3px 8px rgba(0, 86, 179, 0.3);
}
.kymjo-open-search-button:hover { background-color: #004080; transform: translateY(-2px); }
.kymjo-open-search-button .search-icon-placeholder { margin-right: 10px; font-size: 1.1em; }


/*--------------------------------------------------------------
>>> KYMJOJOBS Homepage - Hire Talent Section
--------------------------------------------------------------*/
/* This is the NEW, more professional code */
/* --- NEW CSS for the Trust Badge --- */
.kymjo-trust-container-wrapper {
    text-align: center; /* This centers the badge on the page */
    margin-bottom: 40px; /* This keeps the space below it */
}

.kymjo-trust-badge {
    display: inline-block; /* Makes the container only as wide as needed */
    background-color: #f8f9fa; /* A very light, professional grey */
    border-radius: 14px;      /* The rounded corners from your image */
    padding: 16px 28px;       /* Gives space inside the badge */
}

.kymjo-trust-text {
    margin: 0;                /* Resets default paragraph margin */
    color: #343a40;          /* A strong, dark (but not pure black) color */
    font-size: 1.15em;        /* A clean, readable size */
    font-weight: 600;         /* A confident semi-bold weight */
    line-height: 1.5;         /* Improves readability for multi-line text */
    /* We have removed text-transform and letter-spacing to match your image */
}

/* --- Responsive adjustment for the badge on mobile --- */
@media (max-width: 768px) {
    .kymjo-trust-text {
        font-size: 1em; /* Make text slightly smaller on mobile */
    }
    .kymjo-trust-badge {
        padding: 14px 22px; /* Make the badge padding a bit smaller */
    }
}



.kymjo-hire-interactive-area {
    position: relative;
    max-width: 800px; /* Controls the spread of the chat bubbles */
    margin: 0 auto;
    padding: 60px 0; /* Creates space for bubbles so they don't overlap other sections */
}

.kymjo-hire-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    padding: 35px 40px;
    text-align: center;
    position: relative; /* To ensure it sits above bubbles if needed */
    z-index: 10;
    max-width: 450px; /* The card itself is not too wide */
    margin: 0 auto; /* Center the card within the interactive area */
}

.kymjo-hire-card-heading {
    font-size: 2em;
    font-weight: 700;
    color: #1A237E; /* Using the dark blue from your hero */
    margin-top: 0;
    margin-bottom: 10px;
}

.kymjo-hire-rotating-text {
    font-size: 1.1em;
    color: #37474F; /* Dark grey from hero subheading */
    margin-bottom: 25px;
    line-height: 1.6;
}

.kymjo-hire-rotating-text #kymjo-rotating-category {
    font-weight: bold;
    color: #0056b3; /* Primary blue for emphasis */
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

.kymjo-hire-cta-button {
    display: inline-block;
    background-color: #0073aa; /* Your primary button color */
    color: white;
    padding: 12px 35px;
    font-size: 1.1em;
    font-weight: 500;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.kymjo-hire-cta-button:hover {
    background-color: #005a87;
    transform: translateY(-2px);
}

/* --- Chat Bubble Styling --- */
.kymjo-chat-bubble {
    position: absolute;
    background-color: #f1f3f5; /* Light grey, typical for chat bubbles */
    color: #333;
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 15px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    z-index: 5;
    opacity: 0; /* Start hidden for animation */
    animation: bubbleFadeIn 0.5s ease-out forwards;
}

/* Chat bubble animation */
@keyframes bubbleFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Individual bubble positions and animation delays */
.kymjo-chat-bubble.chat-right {
    border-bottom-right-radius: 5px; /* Creates the chat tail effect */
    right: 0;
}
.kymjo-chat-bubble.chat-left {
    border-bottom-left-radius: 5px; /* Creates the chat tail effect */
    left: 0;
}
.kymjo-chat-bubble.pos-1 { top: 0; right: 10%; animation-delay: 0.2s; }
.kymjo-chat-bubble.pos-2 { top: 50%; right: 0; transform: translateY(-50%); animation-delay: 0.8s; }
.kymjo-chat-bubble.pos-3 { bottom: -10%; right: 20%; animation-delay: 1.4s; }

.kymjo-chat-bubble.pos-4 { top: 10%; left: 5%; animation-delay: 0.5s; }
.kymjo-chat-bubble.pos-5 { top: 55%; left: 0; transform: translateY(-50%); animation-delay: 1.1s; }
.kymjo-chat-bubble.pos-6 { bottom: 0; left: 15%; animation-delay: 1.7s; }

/* --- Responsive Design for the Hire Section --- */
@media (max-width: 991px) {
    .kymjo-hire-interactive-area {
        max-width: 100%;
        padding: 40px 0;
    }
    .kymjo-chat-bubble.pos-1 { top: -10px; right: 2%;}
    .kymjo-chat-bubble.pos-3 { bottom: -20px; right: 5%;}
    .kymjo-chat-bubble.pos-4 { top: 0; left: 1%;}
    .kymjo-chat-bubble.pos-6 { bottom: -10px; left: 5%;}
}

@media (max-width: 768px) {
    /* On smaller screens, the bubbles can be distracting. We hide them. */
    .kymjo-chat-bubble {
        display: none;
    }
    .kymjo-hire-interactive-area {
        padding: 20px 0; /* Reduce padding when bubbles are gone */
    }
    .kymjo-hire-card {
        padding: 25px 20px;
    }
    .kymjo-hire-card-heading {
        font-size: 1.8em;
    }
}
/* hire workers end heres  */

/*--------------------------------------------------------------
>>> KYMJOJOBS Homepage - Recent Jobs Section (v3 Detailed)
--------------------------------------------------------------*/
#kymjo-recent-jobs {
    background-color: #ffffff;
}

/* This is the NEW heading code with the decorative line */
.kymjo-jobs-main-heading-v2 {
    text-align: left;
    font-size: 1.4em; /* Made much smaller */
    font-weight: 600;
    color: #212529;
    margin-bottom: 25px;
    display: flex; /* Using Flexbox for easy alignment */
    align-items: center; /* This vertically centers the line with the text */
}

.kymjo-jobs-main-heading-v2::before {
    content: ''; /* Required for pseudo-elements */
    display: block;
    width: 50px; /* This is the length of the line */
    height: 4px; /* This is the thickness of the line */
    background-color: #0073aa; /* Using your theme's primary blue color */
    border-radius: 2px; /* This gives the line slightly rounded edges */
    margin-right: 15px; /* This creates space between the line and the text */
}


.kymjo-job-listing-container-v2 {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Creates space between the job listings */
}

/* The container for a single job listing */
.kymjo-job-listing {
    border: 1px solid #dee2e6; /* Softer border color */
    padding: 25px;
    border-radius: 12px;
    background-color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Stacks main content and actions footer */
}
.kymjo-job-listing:hover {
    border-color: #0073aa;
    box-shadow: 0 4px 15px rgba(0, 115, 170, 0.07);
}

.kymjo-job-listing-main {
    flex-grow: 1; /* Allows this area to grow */
}

.kymjo-job-listing-title {
    font-size: 1.3em;
    font-weight: 500;
    color: #0073aa;
    margin: 0 0 10px 0;
}
.kymjo-job-listing-title strong {
    font-weight: 700;
    color: #212529;
}

.kymjo-job-listing-description {
    font-size: 0.95em;
    color: #495057;
    line-height: 1.6;
    margin: 0;
}

/* This is the container for the horizontal tags */
.kymjo-job-meta {
    display: flex;
    flex-wrap: wrap; /* This is key for responsiveness */
    gap: 12px;
    margin: 20px 0;
}

/* This is each individual tag/pill */
.kymjo-job-meta-item {
    display: inline-flex;
    align-items: center;
    background-color: #f1f3f5;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    color: #495057;
    font-weight: 500;
}
.kymjo-job-meta-item svg {
    margin-right: 8px;
    color: #868e96;
}

/* Container for the button and date at the bottom */
.kymjo-job-listing-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px; /* Pushes it away from the content above */
}

.kymjo-get-job-btn-v2 {
    background-color: #0073aa;
    color: #ffffff;
    padding: 8px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}
.kymjo-get-job-btn-v2:hover {
    background-color: #005a87;
}

.kymjo-job-listing-date {
    font-size: 0.9em;
    color: #6c757d;
    font-weight: 500;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .kymjo-job-listing-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}




/*--------------------------------------------------------------
>>> KYMJOJOBS Homepage - All Courses Section (Professional V2)
--------------------------------------------------------------*/
#kymjo-courses-section {
    background-color: #f8f9fa; /* Light background for the section */
    padding-top: 60px;
    padding-bottom: 60px;
}
.kymjo-courses-main-heading {
    text-align: center;
    font-size: 2.4em; /* Slightly larger for a section title */
    color: #212529;
    margin-bottom: 15px;
}
.kymjo-courses-subheading {
    text-align: center;
    font-size: 1.15em;
    color: #495057;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* --- Course Filter Buttons --- */
.kymjo-course-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
}
.kymjo-course-filters .filter-btn {
    background-color: #ffffff;
    color: #495057;
    border: 1px solid #dee2e6;
    padding: 10px 22px; /* Increased padding for a better look */
    border-radius: 30px; /* Pill shape */
    font-size: 0.95em; /* Slightly larger font */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.kymjo-course-filters .filter-btn:hover {
    border-color: #0073aa;
    color: #0073aa;
}
.kymjo-course-filters .filter-btn.active {
    background-color: #0073aa; /* Your primary color */
    color: #ffffff;
    border-color: #0073aa;
    box-shadow: 0 4px 8px rgba(0, 115, 170, 0.1);
}

/* --- Course Grid & Cards --- */
.kymjo-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Slightly larger min-width for cards */
    gap: 30px;
}
.kymjo-course-card {
    background-color: #ffffff;
    /* Removing the border, will use box-shadow for separation */
    border-radius: 12px; /* More pronounced radius */
    padding: 25px;
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07); /* Softer, more professional shadow */
    display: none; /* Initially hide all cards for JS (as before) */
}
.kymjo-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.kymjo-course-title {
    font-size: 1.3em; /* Larger, more prominent title */
    font-weight: 600;
    color: #212529; /* Darker color for better readability */
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.4;
}
.kymjo-course-duration {
    font-size: 0.9em;
    color: #6c757d; /* Softer color for secondary text */
    margin: 0 0 25px 0; 
    display: flex;
    align-items: center;
}
/* Optional: Add an icon for the duration */
.kymjo-course-duration::before {
    content: '🕒'; /* Example: Clock icon */
    margin-right: 8px;
    font-size: 1.1em;
}

.kymjo-course-enroll-btn {
    display: block;
    text-align: center;
    background-color: #0073aa; /* Primary color for button */
    color: #ffffff;
    /* Removing border, using solid background */
    padding: 12px 20px; /* Good padding for a button */
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.3s ease;
    margin-top: auto; 
}
.kymjo-course-enroll-btn:hover {
    background-color: #005a87; /* Darker shade on hover */
    box-shadow: 0 4px 10px rgba(0, 86, 135, 0.2);
}
.kymjo-course-card.visible {
    display: flex; 
}

/* --- Load More Button --- */
.kymjo-load-more-container {
    text-align: center;
    margin-top: 50px;
}
#kymjo-load-more-btn {
    background-color: #212529;
    color: #ffffff;
    border: none;
    padding: 14px 40px; /* Larger padding */
    font-size: 1.05em; /* Slightly larger font */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
#kymjo-load-more-btn:hover {
    background-color: #343a40;
    transform: translateY(-2px);
}
#kymjo-load-more-btn.hidden {
    display: none;
}


/*--------------------------------------------------------------
>>> KYMJOJOBS Homepage - Community Feature Section
--------------------------------------------------------------*/
#kymjo-community-feature {
    padding-top: 50px;
    padding-bottom: 50px;
}

.community-feature-wrapper {
    position: relative; /* This is the canvas for all our layers */
    max-width: 800px;
    margin: 0 auto;
}

.main-feature-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px; /* The soft rounded corners */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* --- Overlays --- */
.chat-ui-overlay {
    position: absolute;
    top: 8%;
    left: -5%;
    width: 60%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.chat-message.user-reply {
    align-self: flex-end; /* Pushes the second message to the right */
    width: 40%;
}
.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.chat-bubble {
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.9em;
    line-height: 1.5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.chat-message:not(.user-reply) .chat-bubble {
    background-color: #ffffff;
    color: #212529;
    border-bottom-left-radius: 5px;
}
.chat-bubble.main-subheading-bubble {
    font-weight: 500;
    font-size: 1em;
}
.chat-message.user-reply .chat-bubble {
    background-color: #0073aa; /* Your primary blue */
    color: #ffffff;
    border-bottom-right-radius: 5px;
}


.video-call-ui-overlay {
    position: absolute;
    bottom: 5%;
    right: 5%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px;
    border-radius: 12px;
}
.video-participant {
    width: 180px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: border-color 0.3s ease;
}
.video-participant.active-speaker {
    border-color: #28a745; /* Green border for active speaker */
}
.video-participant img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Responsive Design for the Feature Section --- */
@media (max-width: 991px) {
    .video-participant { width: 150px; height: 85px; }
    .chat-ui-overlay { left: -2%; }
}

@media (max-width: 768px) {
    /* On mobile, we switch to a simpler stacked layout */
    .community-feature-wrapper {
        position: static; /* Remove relative positioning */
    }
    .main-feature-image {
        margin-bottom: 25px; /* Space below the main image */
    }
    .chat-ui-overlay, .video-call-ui-overlay {
        position: static; /* Remove absolute positioning */
        width: 100%;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        margin-bottom: 25px;
    }
    .chat-message.user-reply {
        width: 60%; /* Adjust width for mobile */
    }
    .video-call-ui-overlay {
        flex-direction: row; /* Stack participants horizontally */
        justify-content: center;
        flex-wrap: wrap;
        background: none;
        backdrop-filter: none;
        padding: 0;
    }
    .video-participant {
        width: 100px;
        height: 65px;
    }
}

/*--------------------------------------------------------------
>>> KYMJOJOBS Homepage - Featured Courses Section (Horizontal Scroll)
--------------------------------------------------------------*/
#kymjo-featured-courses {
    background-color: #ffffff;
    padding-top: 50px;
    padding-bottom: 50px;
}

.featured-courses-header {
    margin-bottom: 30px;
    max-width: 600px;
}

/* The subheading is now the main descriptive text */
.kymjo-featured-courses-description {
    text-align: left;
    font-size: 1.1em; /* Slightly larger as it's now the primary text */
    color: #343a40;
    line-height: 1.6;
    font-weight: 500;
}

/* This is the new horizontally-scrolling container */
.featured-courses-grid {
    display: flex; /* Lays out children (cards) in a row */
    overflow-x: auto; /* Enables horizontal scrolling */
    gap: 20px;
    padding: 10px 0 20px 0; /* Adds some space for the scrollbar */
    /* Custom Scrollbar for a professional look */
    scrollbar-width: thin;
    scrollbar-color: #0073aa #e9ecef;
}
.featured-courses-grid::-webkit-scrollbar {
    height: 8px;
}
.featured-courses-grid::-webkit-scrollbar-track {
    background: #e9ecef;
    border-radius: 4px;
}
.featured-courses-grid::-webkit-scrollbar-thumb {
    background-color: #0073aa;
    border-radius: 4px;
}
.featured-courses-grid::-webkit-scrollbar-thumb:hover {
    background-color: #005a87;
}


/* Adjusting the card size to be smaller */
.course-feature-card {
    display: block;
    position: relative;
    height: 340px; /* Made the card shorter */
    flex: 0 0 280px; /* Sets a fixed width so cards don't shrink */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}
.course-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

.course-feature-card .card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.course-feature-card:hover .card-background-image {
    transform: scale(1.05);
}

.card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px; /* Slightly adjusted padding */
    color: #ffffff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 5;
}

.card-title {
    font-size: 1.3em; /* Adjusted for smaller card size */
    font-weight: 600;
    margin: 0 0 5px 0;
    line-height: 1.3;
}
.card-subtitle {
    font-size: 0.9em;
    font-weight: 400;
    margin: 0;
    opacity: 0.9;
}

.kymjo-view-all-courses-container {
    text-align: center;
    margin-top: 40px;
}
.kymjo-view-all-btn {
    display: inline-block;
    background-color: #0073aa;
    color: #ffffff;
    padding: 12px 35px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.kymjo-view-all-btn:hover {
    background-color: #005a87;
}


/*--------------------------------------------------------------
>>> KYMJOJOBS Homepage - Inline Text Job Listings
--------------------------------------------------------------*/
#kymjo-inline-jobs {
    background-color: #ffffff; /* Clean white background */
}
/* This is the NEW, smaller subheading style */
.kymjo-jobs-subheading-v2 {
    text-align: left;
    font-size: 1.1em; /* Smaller base font size */
    font-weight: 400; /* Normal font weight, not bold */
    color: #6c757d; /* Softer, grey color for a subheading */
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

/* This makes it even smaller on mobile */
@media (max-width: 768px) {
    .kymjo-jobs-subheading-v2 {
        font-size: 1em;
    }
}


.job-text-listing-container {
    padding: 0;
}

.job-text-item {
    padding: 25px 0;
    border-bottom: 1px solid #e9ecef; /* Subtle separator line */
}
.job-text-item:first-child {
    padding-top: 10px;
}
.job-text-item:last-child {
    border-bottom: none;
}

.job-text-title {
    margin: 0 0 8px 0;
}
.job-text-title a {
    font-size: 1.25em;
    font-weight: 600;
    color: #0073aa;
    text-decoration: none;
    transition: color 0.2s ease;
}
.job-text-title a:hover {
    color: #005a87;
    text-decoration: underline;
}

.job-text-description {
    font-size: 1em;
    color: #495057;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.job-meta-sentence {
    display: flex;
    flex-wrap: wrap; /* This is key for responsiveness */
    align-items: center;
    gap: 8px 12px; /* Row and column gap */
    font-size: 0.9em;
    color: #6c757d;
}
.meta-separator {
    color: #ced4da; /* Make the dot separator very subtle */
}

.kymjo-view-all-jobs-container {
    text-align: center;
    margin-top: 40px;
}
.kymjo-view-all-jobs-btn {
    display: inline-block;
    background-color: transparent;
    color: #212529;
    border: 2px solid #212529;
    padding: 10px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.kymjo-view-all-jobs-btn:hover {
    background-color: #212529;
    color: #ffffff;
}



/*--------------------------------------------------------------
>>> Homepage Add-on Sections
--------------------------------------------------------------*/

/* General styles for the new sections */
.kymjo-homepage-section .section-header { text-align: center; margin-bottom: 50px; }
.kymjo-homepage-section .section-title { font-size: 2.5em; font-weight: 700; color: #1A237E; margin-bottom: 15px; }
.kymjo-homepage-section .section-subtitle { font-size: 1.15em; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.6; color: #495057; }
.kjo-button-primary { display: inline-block; background-color: #0073aa; color: #fff !important; padding: 12px 28px; text-decoration: none; border-radius: 5px; font-weight: 500; transition: all 0.2s ease; border: 1px solid #0073aa; }
.kjo-button-primary:hover { background-color: #005a87; transform: translateY(-2px); }

/* 1. Logo Wall Section */
.logo-wall-section { padding: 40px 20px; background-color: #f8f9fa; }
.logo-wall-title { text-align: center; color: #888; font-size: 0.9em; font-weight: 600; letter-spacing: 1px; margin-bottom: 25px; }
.logo-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; }
.logo-grid img { max-height: 35px; max-width: 150px; filter: grayscale(100%); opacity: 0.7; transition: all 0.3s ease; }
.logo-grid img:hover { filter: grayscale(0%); opacity: 1; }

/*--------------------------------------------------------------
>>> [V2] Homepage Add-on: Living Product Showcase
--------------------------------------------------------------*/

/* --- Main Section & Tab Styles (Largely Unchanged) --- */
.platform-features-section { padding: 60px 20px 80px; }
.kymjo-homepage-section .section-header { text-align: center; margin-bottom: 50px; }
.kymjo-homepage-section .section-title { font-size: 2.5em; font-weight: 700; color: #1A237E; margin-bottom: 15px; }
.kymjo-homepage-section .section-subtitle { font-size: 1.15em; max-width: 700px; margin: 0 auto; line-height: 1.6; color: #495057; }
.tabs-container { max-width: 1100px; margin: 0 auto; }
.tabs-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.tab-link { background: #f1f3f5; color: #495057; border: none; padding: 12px 25px; border-radius: 50px; font-size: 1em; font-weight: 500; cursor: pointer; transition: all 0.2s ease; }
.tab-link.active { background-color: #0073aa; color: #fff; box-shadow: 0 4px 10px rgba(0,115,170,0.2); transform: translateY(-2px); }
.tab-pane { display: none; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; }
.tab-pane.active { display: grid; animation: fadeIn 0.5s; }

/* --- Browser Window & Living Image --- */
.pane-image { position: relative; }
.browser-window-wrapper { border: 1px solid #e9ecef; border-radius: 8px; background-color: #fff; box-shadow: 0 20px 50px rgba(0,35,59,0.15); overflow: hidden; }
.browser-header { background-color: #f1f3f5; padding: 10px; display: flex; gap: 8px; border-bottom: 1px solid #e9ecef; }
.browser-header span { display: block; width: 12px; height: 12px; border-radius: 50%; background-color: #dee2e6; }
.living-image-container { position: relative; overflow: hidden; height: 350px; }
.living-image {
    position: absolute;
    width: 110%; /* Slightly larger to allow for panning */
    height: 110%;
    top: -5%;
    left: -5%;
    object-fit: cover;
    animation: kenburns-pan 20s infinite alternate ease-in-out;
}
@keyframes kenburns-pan {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(-2%, 2%); }
}

/* --- Floating UI Elements --- */
.floating-ui {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: float-bob 8s infinite alternate ease-in-out;
}
.floating-ui .ui-icon { font-size: 1.5em; }
.floating-ui .ui-text { font-size: 0.9em; line-height: 1.3; }
.floating-ui .ui-text strong { display: block; font-weight: 600; }
.floating-ui .ui-text span { opacity: 0.8; }
.floating-ui img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* Positioning & Animation Delays */
.floating-ui.element-1 { top: 10%; left: 5%; }
.floating-ui.element-2 { bottom: 15%; right: 10%; animation-delay: -4s; }
.floating-ui.element-3 { bottom: 12%; left: 8%; animation-delay: -2s; }

@keyframes float-bob {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* --- Pane Text Content (Unchanged) --- */
.pane-text h3 { font-size: 2em; font-weight: 600; margin-bottom: 20px; }
.pane-text ul { list-style: none; padding: 0; margin: 0 0 30px 0; }
.pane-text ul li { padding-left: 30px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2328a745'%3e%3cpath d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm-1.03-9.47a.75.75 0 0 1 1.06-1.06l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 1 1-1.06-1.06L8.44 8 6.97 6.53z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: left 5px; background-size: 20px; margin-bottom: 15px; font-size: 1.1em; line-height: 1.6; }

/* --- Responsive Adjustments --- */
@media(max-width: 991px) {
    .tab-pane { grid-template-columns: 1fr; text-align: center; }
    .pane-image { margin-bottom: 40px; }
    .pane-text ul { display: inline-block; text-align: left; max-width: 400px; }
}

/* 3. Testimonials Section */
.testimonials-section { padding: 80px 20px; background-color: #f8f9fa; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; max-width: 1100px; margin: 0 auto; }
.testimonial-card { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.06); }
.testimonial-card img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; float: left; margin-right: 20px; }
.testimonial-card blockquote { font-size: 1.1em; line-height: 1.7; margin: 0 0 15px 0; border: none; padding: 0; font-style: italic; color: #343a40; }
.testimonial-card cite { font-style: normal; color: #495057; }
.testimonial-card cite strong { color: #000; }

/* 4. Responsive Adjustments */
@media (max-width: 991px) {
    .tab-pane { grid-template-columns: 1fr; text-align: center; }
    .pane-image { display: none; }
    .pane-text ul { display: inline-block; text-align: left; max-width: 400px; }
}
@media (max-width: 768px) {
    .kymjo-homepage-section .section-title { font-size: 2em; }
}
/*........the END...............
..............*/



/* In style.css, within KYMJOJOBS Homepage Styles section */

/* --- Subscribe to Job Alerts Section --- */
.kymjo-job-alerts-subscribe {
    background-color: #e9f5ff; /* A very light, inviting blue */
    padding: 60px 0;
    text-align: center; /* Center the content within the section */
}

.kymjo-job-alerts-heading {
    font-size: 2.1em; /* Matches other section headings */
    color: #1A237E; /* Dark blue from your hero heading */
    margin-top: 0;
    margin-bottom: 15px;
}

.kymjo-job-alerts-subheading {
    font-size: 1.05em;
    color: #37474F; /* Dark grey */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    line-height: 1.7;
}

.kymjojobs-subscribe-form {
    max-width: 550px; /* Max width for the form itself */
    margin: 0 auto; /* Center the form */
}

.kymjojobs-subscribe-fields {
    display: flex;
    border-radius: 8px; /* Rounded container for input and button */
    overflow: hidden; /* To make the border-radius clip children */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #b0c4de; /* Light blue border */
}

.kymjojobs-subscribe-email-field {
    flex-grow: 1; /* Email field takes available space */
    padding: 15px 20px; /* Generous padding */
    font-size: 1em;
    border: none; /* Remove individual border */
    /* border-radius: 8px 0 0 8px; /* Round left corners if not part of a flex group that clips */
    outline: none;
    color: #333;
}
.kymjojobs-subscribe-email-field::placeholder {
    color: #888;
}

.kymjojobs-subscribe-submit-button {
    background-color: #007bff; /* Primary blue */
    color: white;
    border: none;
    padding: 15px 25px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    /* border-radius: 0 8px 8px 0; /* Round right corners if not part of a flex group that clips */
    transition: background-color 0.2s ease;
    white-space: nowrap; /* Prevent button text from wrapping */
}
.kymjojobs-subscribe-submit-button:hover {
    background-color: #0056b3; /* Darker blue */
}

/* Responsive for subscribe form */
@media (max-width: 576px) {
    .kymjojobs-subscribe-fields {
        flex-direction: column; /* Stack input and button on small screens */
        border-radius: 8px; /* Apply to container */
        box-shadow: none; /* Optional: remove shadow on stacked mobile view */
    }
    .kymjojobs-subscribe-email-field {
        border-radius: 8px 8px 0 0; /* Top corners rounded */
        text-align: center;
        border-bottom: 1px solid #b0c4de; /* Separator if stacked */
    }
    .kymjojobs-subscribe-submit-button {
        border-radius: 0 0 8px 8px; /* Bottom corners rounded */
    }
    .kymjo-job-alerts-heading {
        font-size: 1.8em;
    }
    .kymjo-job-alerts-subheading {
        font-size: 1em;
    }
}
/* --- End Subscribe to Job Alerts Section --- */


/*--------------------------------------------------------------
<<< END KYMJOJOBS Homepage Styles
--------------------------------------------------------------*/


/*--------------------------------------------------------------
<<< KYMJOJOBS CUSTOM STYLES END
--------------------------------------------------------------*/



/*--------------------------------------------------------------
>>> KYMJOJOBS Profile Settings Page Styles
--------------------------------------------------------------*/

/* --- Main Container & Notices --- */
.profile-settings-container {
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    border: 1px solid #e9ecef;
    max-width: 900px; /* Limits width on very large screens for readability */
    margin: 0 auto;   /* Centers the form container */
}

.profile-settings-notice {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107; /* A nice amber color for notices */
    padding: 15px 20px;
    margin-bottom: 25px;
    color: #856404;
    border-radius: 4px;
}
.profile-settings-notice p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.6;
}

/* --- Tab Navigation --- */
.profile-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 25px;
}
.tab-link {
    padding: 12px 22px;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 1.05em; /* Slightly larger tab text */
    color: #555;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s ease;
}
.tab-link:hover {
    background-color: #f8f9fa;
    color: #333;
}
.tab-link.active {
    color: #0073aa; /* Your primary color */
    border-bottom-color: #0073aa;
    font-weight: 600;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* --- General Form Styles (Based on your existing CSS) --- */
.kymjojobs-form.profile-settings-section h3 {
    font-size: 1.3em;
    color: #333;
    margin-top: 30px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.kymjojobs-form.profile-settings-section h3:first-of-type {
    margin-top: 0;
}

.profile-settings-section .kymjojobs-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px; /* A little more gap */
}
.profile-settings-section .kymjojobs-form-row .kymjojobs-form-group.half-width {
    flex: 1;
    min-width: calc(50% - 13px); /* Adjusted for gap */
}
.profile-settings-section .readonly-field {
    background-color: #e9ecef;
    color: #495057;
    cursor: not-allowed;
}
.profile-settings-section input[type="file"] {
    padding: 12px; /* A bit more padding */
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    background-color: #f8f9fa; /* Light background for file inputs */
}

/* This targets all form groups for consistent spacing, inheriting from your main form styles */
.profile-settings-section .kymjojobs-form-group {
    margin-bottom: 20px;
}
.profile-settings-section .kymjojobs-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500; /* Use 500 for a clean semi-bold look */
}
.profile-settings-section .kymjojobs-form-group .description {
    font-size: 0.85em;
    color: #6c757d;
    margin-top: 5px;
    font-style: italic;
}

.profile-settings-section hr {
    margin: 40px 0; /* More vertical space for separators */
    border: 0;
    border-top: 1px solid #e0e0e0;
}

/* --- Responsive for Form --- */
@media (max-width: 600px) {
    .profile-settings-container {
        padding: 20px 15px;
    }
    .profile-settings-section .kymjojobs-form-row .kymjojobs-form-group.half-width {
        min-width: 100%; /* Stack the two-column fields */
    }
    .profile-tabs {
        overflow-x: auto; /* Allow tabs to be scrolled horizontally on small screens */
    }
}


/* --- Affiliate Wrapper Toggle --- */
#jobseeker-bank-wrapper, #trainee-bank-wrapper {
    display: none; /* Hidden by default */
    overflow: hidden;
    transition: all 0.4s ease;
}
#jobseeker-bank-wrapper.active, #trainee-bank-wrapper.active {
    display: block; /* Shown when JS adds the 'active' class */
}

/* Profile Status Section */
.profile-status-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns on desktop */
    gap: 25px;
}
/* The .profile-summary-card and .profile-quick-stats-card will inherit .dashboard-section styles if nested,
   or you can style them independently if they are direct children of .profile-status-layout */

.profile-summary-card .card-title, /* Shared card title style */
.profile-quick-stats-card .card-title,
.referral-condensed-card .card-title {
    font-size: 1.2em;
    color: #343a40;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.profile-summary-card p {
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 0.95em;
}
.profile-summary-card .status-pending { color: #ffc107; font-weight: 500; }
.profile-summary-card .status-approved { color: #28a745; font-weight: 500; }
.profile-summary-card .status-incomplete { color: #dc3545; font-weight: 500; }

.profile-summary-card .kymjo-button-primary,
.profile-summary-card .kymjo-button { /* Assuming you have these button classes */
    display: inline-block;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 0.9em;
    margin-top: 10px;
}
.profile-summary-card .kymjo-button-primary { background-color: #0073aa; color: #fff; }
.profile-summary-card .kymjo-button-primary:hover { background-color: #005a87; }
.profile-summary-card .kymjo-button { background-color: #6c757d; color: #fff; }
.profile-summary-card .kymjo-button:hover { background-color: #5a6268; }


.profile-quick-stats-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.profile-quick-stats-card ul li {
    padding: 5px 0;
    font-size: 0.95em;
    border-bottom: 1px dashed #f0f0f0;
}
.profile-quick-stats-card ul li:last-child {
    border-bottom: none;
}


/* Notifications Area */
.dashboard-notifications-area .section-title-decorated-alt { /* A slightly different title style for variety */
    font-size: 1.3em;
    color: #343a40;
    margin:0 0 15px 0; /* Adjusted margin */
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}
.notifications-list p {
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 0.95em;
    border: 1px solid transparent;
}
.notifications-list p.payment-success-notice { background-color: #d1e7dd; color: #0f5132; border-color: #badbcc; } /* Example */
.notifications-list p.reward-notice { background-color: #cce5ff; color: #004085; border-color: #b8daff; } /* Example */
.notifications-list p.info-notice { background-color: #e2e3e5; color: #383d41; border-color: #d6d8db; } /* Example */


/* Responsive for Dashboard Content Sections */
@media (max-width: 768px) {
    .profile-status-layout {
        grid-template-columns: 1fr; /* Stack columns on mobile */
    }
    .dashboard-greeting-section .dashboard-greeting-title {
        font-size: 1.5em;
    }
    .profile-summary-card .card-title,
    .profile-quick-stats-card .card-title,
    .referral-condensed-card .card-title,
    .dashboard-notifications-area .section-title-decorated-alt {
        font-size: 1.1em;
    }
    .referral-link-area {
        flex-direction: column; /* Stack input and button on mobile */
        align-items: stretch;
    }
    .referral-link-area input[type="text"]#kymjojobsUserReferralLinkCondensed {
         margin-bottom: 5px;
    }
}


/*--------------------------------------------------------------
>>> KYMJOJOBS Buy Coins Page Styles
--------------------------------------------------------------*/
.page-template-page-buy-coins .entry-header { /* Specific to buy coins page template */
    text-align: center;
    margin-bottom: 20px; /* Space below title */
}

.page-template-page-buy-coins .entry-content > p { /* Targeting the introductory paragraphs */
    text-align: center;
    font-size: 1.1em;
    color: #555;
    margin-bottom: 10px;
}
.page-template-page-buy-coins .entry-content > p:last-of-type {
    margin-bottom: 30px; /* More space before packages */
}


.coin-packages-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive cards */
    gap: 25px; /* Space between cards */
    max-width: 1000px; /* Max width for the container of cards */
    margin-left: auto;
    margin-right: auto;
}

.coin-package {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column; /* Align items vertically */
    justify-content: space-between; /* Push button to bottom */
}

.coin-package:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.coin-package h3 { /* Package description, e.g., "Get 20 Coins" */
    margin-top: 0;
    font-size: 1.4em; /* Larger package name */
    color: #0056b3; /* Dark blue */
    margin-bottom: 10px;
}

.coin-package p {
    font-size: 1.2em; /* Price font size */
    color: #333;
    margin-bottom: 25px; /* Space above button */
}
.coin-package p strong {
    font-weight: 600;
}

.coin-package .buy-coins-button.kymjojobs-button { /* Targeting your existing button class */
    padding: 12px 20px;
    background-color: #007bff; /* Primary blue */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 500;
    border: none;
    cursor: pointer;
    display: inline-block; /* Ensure it doesn't take full width unless intended */
    width: auto; /* Auto width based on content */
    margin-top: auto; /* Pushes button to bottom if card heights vary */
    transition: background-color 0.2s ease;
}

.coin-package .buy-coins-button.kymjojobs-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Special styling for a "Best Value" or featured package - add class in PHP if needed */
/* Example: <div class="coin-package featured-package"> ... </div> */
.coin-package.featured-package {
    border-color: #007bff;
    border-width: 2px;
    position: relative; /* For a potential badge */
}
/* .coin-package.featured-package::before {
    content: "Best Value!";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #007bff;
    color: white;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: bold;
} */

.custom-purchase-contact {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}
.custom-purchase-contact p {
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #555;
}
.custom-purchase-contact .kymjojobs-button { /* Style for the contact support button */
    background-color: #6c757d; /* Grey */
    color: white;
}
.custom-purchase-contact .kymjojobs-button:hover {
    background-color: #5a6268; /* Darker grey */
}


/* Responsive adjustments for Buy Coins page */
@media (max-width: 600px) {
    .coin-packages-container {
        grid-template-columns: 1fr; /* Stack cards on smaller mobile */
        gap: 20px;
    }
     .page-template-page-buy-coins .entry-content > p {
        font-size: 1em;
    }
    .coin-package h3 {
        font-size: 1.3em;
    }
    .coin-package p {
        font-size: 1.1em;
    }
}

/*
--------------------------------------------------------------
>>> Buy Coins Page - Payment Button Styles
--------------------------------------------------------------
*/
.payment-options-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically by default */
    gap: 10px; /* Space between buttons */
}

.buy-coins-button {
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.buy-coins-button.flutterwave-btn {
    background-color: #0073aa;
    color: #ffffff;
    border-color: #0073aa;
}

.buy-coins-button.transfer-btn {
    background-color: #f8f9fa;
    color: #0073aa;
    border-color: #0073aa;
}

.buy-coins-button.transfer-btn:hover {
    background-color: #0073aa;
    color: #ffffff;
}

/* On larger screens, place buttons side-by-side */
@media (min-width: 768px) {
    .payment-options-buttons {
        flex-direction: row;
    }
    .buy-coins-button {
        flex: 1; /* Make both buttons take up equal space */
    }
}

/*
--------------------------------------------------------------
>>> Bank Transfer Payment Instructions Page
--------------------------------------------------------------
*/
.kymjo-instruction-page-container {
    background-color: #f4f6f9;
    padding: 40px 20px;
}

.instruction-box {
    max-width: 700px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    text-align: center;
}

.instruction-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    font-size: 2.5em;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20px;
}
.instruction-icon.success { background-color: #28a745; }
.instruction-icon.error { background-color: #dc3545; }

.instruction-title {
    font-size: 2.2em;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 10px 0;
}

.instruction-subtitle {
    font-size: 1.1em;
    color: #495057;
    margin: 0 auto 30px auto;
    max-width: 500px;
    line-height: 1.6;
}

.payment-details, .bank-details {
    text-align: left;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 25px;
}

.payment-details .detail-item:first-child,
.bank-details .detail-item:first-child {
    border-top: none;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border-top: 1px solid #e9ecef;
}

.detail-label {
    font-weight: 500;
    color: #495057;
}

.detail-value {
    font-weight: 600;
    color: #2c3e50;
}

.detail-value.amount {
    font-size: 1.2em;
    color: #0073aa;
}

.bank-details-title {
    font-size: 1.2em;
    padding: 15px;
    margin: 0;
    border-bottom: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.reference-box {
    border: 2px dashed #0073aa;
    background-color: #e7f3ff;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
}

.reference-title {
    font-size: 1.2em;
    color: #c0392b; /* Red to draw attention */
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.reference-box p {
    margin: 0 0 10px 0;
}

.reference-code {
    background-color: #ffffff;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 10px;
    border-radius: 4px;
    color: #2c3e50;
    user-select: all; /* Makes it easy to copy */
}

.final-notice p {
    font-size: 0.9em;
    color: #6c757d;
    margin-bottom: 20px;
}

/*--------------------------------------------------------------
<<< END KYMJOJOBS Buy Coins Page Styles
--------------------------------------------------------------*/


 /*--------------------------------------------------------------
>>> KYMJOJOBS Coin Transaction History Styles
--------------------------------------------------------------*/
.kymjojobs-payment-callback .entry-content, /* Re-using for callback page too if needed */
.page-template-page-coin-history .entry-content { /* More specific to the template */
    font-size: 1rem; /* Base font size */
}

.kymjojobs-transactions-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: separate; /* Allows border-radius on rows/cells if needed */
    border-spacing: 0 10px; /* Vertical space between "rows" (cards) */
}

.kymjojobs-transactions-table thead {
    display: none; /* Hide traditional table header on mobile for card look */
}

.kymjojobs-transactions-table tbody tr {
    display: block; /* Make each row a block for card styling */
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 15px; /* Space between transaction cards */
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #e9ecef;
}

.kymjojobs-transactions-table tbody td {
    display: block; /* Stack table cells vertically */
    text-align: left !important; /* Override any previous right-align for mobile */
    padding: 5px 0;
    border-bottom: 1px dashed #f0f0f0; /* Light separator within a card */
    position: relative; /* For pseudo-elements if needed for labels */
}
.kymjojobs-transactions-table tbody tr td:last-child {
    border-bottom: none;
}

/* Add labels using ::before pseudo-element for mobile card view */
.kymjojobs-transactions-table tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    width: 120px; /* Adjust width as needed */
    color: #555;
    margin-right: 10px;
}

.kymjojobs-transactions-table .transaction-amount {
    font-weight: bold;
    font-size: 1.1em;
}
.kymjojobs-transactions-table .transaction-amount.positive {
    color: #28a745; /* Green for positive amounts */
}
.kymjojobs-transactions-table .transaction-amount.negative {
    color: #dc3545; /* Red for negative amounts */
}

.kymjojobs-transactions-table .transaction-description {
    font-size: 1em;
    color: #333;
    margin-bottom: 3px; /* Space between description and date */
}
.kymjojobs-transactions-table .transaction-date {
    font-size: 0.85em;
    color: #6c757d; /* Grey for date */
}
.kymjojobs-transactions-table .transaction-balance,
.kymjojobs-transactions-table .transaction-reference {
    font-size: 0.9em;
    color: #555;
}


/* Desktop and Tablet View - Revert to Table Layout */
@media (min-width: 768px) {
    .kymjojobs-transactions-table thead {
        display: table-header-group; /* Show table header on larger screens */
    }
    .kymjojobs-transactions-table th {
        background-color: #f8f9fa;
        font-weight: bold;
        color: #495057;
        padding: 12px 15px;
        text-align: left;
        border-bottom: 2px solid #dee2e6;
    }
    .kymjojobs-transactions-table tbody tr {
        display: table-row; /* Revert to table row display */
        margin-bottom: 0; /* Reset mobile margin */
        box-shadow: none;
        border: none; /* Individual row borders removed, rely on td borders */
    }
    .kymjojobs-transactions-table tbody tr:nth-child(odd) {
        background-color: #fdfdfd; /* Optional: very light striping for odd rows */
    }
    .kymjojobs-transactions-table tbody tr:hover {
        background-color: #f0f4f8; /* Hover effect for rows */
    }
    .kymjojobs-transactions-table tbody td {
        display: table-cell; /* Revert to table cell display */
        padding: 10px 15px;
        vertical-align: middle;
        border-bottom: 1px solid #e0e0e0;
    }
    .kymjojobs-transactions-table tbody td[data-label]::before {
        display: none; /* Hide data-label pseudo-elements on larger screens */
    }
    .kymjojobs-transactions-table td:nth-child(3), /* Coins Changed column */
    .kymjojobs-transactions-table td:nth-child(4) { /* New Balance column */
        text-align: right; /* Right align numbers on desktop */
    }
}
/*--------------------------------------------------------------
<<< END KYMJOJOBS Coin Transaction History Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
>>> KYMJOJOBS Transfer Coins Page Styles
--------------------------------------------------------------*/
.page-template-page-transfer-coins .dashboard-main-area {
    /* Ensures padding even if the global dashboard one is removed for this page */
    padding: 20px 15px; /* Mobile first padding */
}

.page-template-page-transfer-coins .transfer-coins-form-section {
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    border: 1px solid #e9ecef;
    max-width: 550px; /* Control max width of the form itself */
    margin: 20px auto; /* Center the form */
}

.page-template-page-transfer-coins .transfer-coins-form-section p:first-of-type { /* Your current balance text */
    font-size: 1.1em;
    color: #333;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
    text-align: center;
}
.page-template-page-transfer-coins .transfer-coins-form-section p strong {
    font-weight: 600;
    color: #007bff; /* Highlight balance */
}

/* Re-use .kymjojobs-form-group and input styles from your main form CSS for consistency */
/* If they are not specific enough, you can override them here like: */
.page-template-page-transfer-coins .kymjojobs-form-group label {
    font-size: 0.9em;
    color: #495057;
    margin-bottom: 6px;
}

.page-template-page-transfer-coins .kymjojobs-form-group input[type="text"],
.page-template-page-transfer-coins .kymjojobs-form-group input[type="number"] {
    padding: 12px 15px; /* Consistent padding */
    font-size: 1em;
    /* Other styles like border, border-radius will be inherited from global form styles */
}
.page-template-page-transfer-coins .kymjojobs-form-group input[type="number"] {
    /* Specific styling for number input if needed */
}

.page-template-page-transfer-coins .kymjojobs-form-group .description {
    font-size: 0.85em;
    color: #6c757d;
    margin-top: 5px;
}

/* Submit button styling - can inherit from global .button.button-primary or customize */
.page-template-page-transfer-coins #kymjojobs_transfer_submit_button {
    width: 100%;
    padding: 12px 20px;
    font-size: 1.05em;
    font-weight: 500;
    background-color: #0069d9; /* Slightly different blue for transfer */
    border-color: #0062cc;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.page-template-page-transfer-coins #kymjojobs_transfer_submit_button:hover {
    background-color: #0056b3;
    border-color: #004a99;
}

/* Error and Success Messages (can inherit from .kymjojobs-form-message or customize) */
.page-template-page-transfer-coins .transfer-errors p,
.page-template-page-transfer-coins .transfer-success p {
    margin: 0;
    padding: 0;
    line-height: 1.6;
}
.page-template-page-transfer-coins .transfer-errors {
    /* Styles from .kymjojobs-form-message.error should apply if classes are matched */
}
.page-template-page-transfer-coins .transfer-success {
    background-color: #d1e7dd; /* Softer green */
    color: #0f5132;
    border-color: #badbcc;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid;
}

/* Responsive adjustments for Transfer Coins page specifically */
@media (min-width: 768px) { /* Desktop / Tablet */
    .page-template-page-transfer-coins .dashboard-main-area {
        padding: 30px 40px; /* More padding on larger screens */
    }
     .page-template-page-transfer-coins .transfer-coins-form-section {
        padding: 30px 40px;
    }
}
/*--------------------------------------------------------------
<<< END KYMJOJOBS Transfer Coins Page Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
>>> 404 Page Custom Styles
--------------------------------------------------------------*/
.kymjo-404-section {
    padding: 60px 0;
    text-align: center;
}

.error-404-content {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.error-404-heading {
    font-size: 2.8em;
    color: #212529;
    margin-bottom: 20px;
    font-weight: 600;
}

.error-404-message p {
    font-size: 1.15em;
    color: #495057;
    margin-bottom: 30px;
    line-height: 1.7;
}

/*
--------------------------------------------------------------
>>> 404 Page - Live Search Bar Styles (Desktop & Mobile)
--------------------------------------------------------------
*/

/* Centering and spacing for the search bar on the 404 page */
.kymjo-404-section .kymjo-live-search-wrapper {
    max-width: 500px;
    margin: 0 auto 40px auto; /* Center the search bar and give it bottom margin */
}

/* This is the responsive fix that solves the horizontal scroll */
@media (max-width: 480px) {
    .kymjo-404-section .live-search-bar {
        /* Stack the input and button vertically on small screens */
        flex-direction: column;
    }

    .kymjo-404-section .live-search-input {
        /* Adjust corners for stacked layout */
        border-radius: 5px 5px 0 0;
        text-align: center;
    }

    .kymjo-404-section .live-search-button {
         /* Adjust corners and fix border for stacked layout */
        border-radius: 0 0 5px 5px;
        border-top: none;
    }
}


.error-404-quick-links .quick-links-title {
    font-size: 1.3em;
    color: #343a40;
    margin-bottom: 25px;
    font-weight: 500;
}

.error-404-quick-links {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.error-404-quick-link-btn {
    display: inline-block;
    padding: 12px 25px;
    background-color: #0073aa;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.error-404-quick-link-btn:hover {
    background-color: #005a87;
    transform: translateY(-2px);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .error-404-heading {
        font-size: 2.2em;
    }
    .error-404-message p {
        font-size: 1.05em;
    }
    .error-404-quick-link-btn {
        font-size: 0.95em;
        padding: 10px 20px;
    }
}
/* ----------------------------------
>>>>>>>the ending of 404 .....................*/

/*--------------------------------------------------------------
>>> FAQ Page Specific Styles
--------------------------------------------------------------*/
.kymjo-faq-page .entry-header.faq-page-header {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f9fa; /* Light background for header */
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 30px; /* Add some space before filters/content */
}
.kymjo-faq-page .entry-header.faq-page-header .entry-title {
    font-size: 2.5em;
    color: #212529;
    margin-bottom: 10px;
}
.kymjo-faq-page .faq-intro {
    font-size: 1.1em;
    color: #495057;
    max-width: 700px;
    margin: 0 auto;
}

.faq-category-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    padding: 0 20px;
}
.faq-category-filters .filter-btn {
    background-color: #fff;
    color: #495057;
    border: 1px solid #dee2e6;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}
.faq-category-filters .filter-btn:hover {
    border-color: #0073aa;
    color: #0073aa;
}
.faq-category-filters .filter-btn.active {
    background-color: #0073aa;
    color: #ffffff;
    border-color: #0073aa;
}

.kymjo-faq-accordion-wrapper {
    max-width: 800px; /* Max width for the FAQ list */
    margin: 0 auto 40px auto;
    padding: 0 20px;
}

.faq-category-group {
    margin-bottom: 40px;
}
.faq-category-group.hidden-category {
    display: none;
}

.faq-category-title {
    font-size: 1.8em;
    color: #343a40;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0073aa;
}

/* Reusing and adapting accordion styles from homepage FAQ */
.kymjo-faq-accordion .faq-item {
    border-bottom: 1px solid #e9ecef;
}
.kymjo-faq-accordion .faq-item:last-child {
    border-bottom: none;
}

.kymjo-faq-accordion .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 18px 0; /* Slightly more padding */
    font-size: 1.15em;
    font-weight: 500;
    color: #343a40;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}
.kymjo-faq-accordion .faq-question:hover {
    color: #0073aa;
}
.kymjo-faq-accordion .faq-icon {
    flex-shrink: 0;
    margin-left: 15px;
    transition: transform 0.3s ease-in-out;
    color: #0073aa;
}
.kymjo-faq-accordion .faq-item.active .faq-question {
    color: #0073aa; /* Active question color */
}
.kymjo-faq-accordion .faq-item.active .faq-icon {
    transform: rotate(180deg);
}
.kymjo-faq-accordion .faq-answer {
    display: none; /* Hide by default */
    padding: 0 0 20px 0; /* Apply padding when visible */
    /* overflow: hidden; /* Still good to keep if content might be odd */
}
.kymjo-faq-accordion .faq-item.active .faq-answer {
    display: block; /* Show when active */

}
.kymjo-faq-accordion .faq-answer p {
    font-size: 1em;
    line-height: 1.7;
    color: #495057;
    margin:0; /* Reset default p margin */
}

.faq-page-quick-links,
.faq-page-contact-info {
    max-width: 800px;
    margin: 50px auto;
    padding: 30px 20px;
    text-align: center;
    border-top: 1px solid #e9ecef;
}
.faq-page-quick-links h3,
.faq-page-contact-info h3 {
    font-size: 1.5em;
    color: #343a40;
    margin-bottom: 20px;
}
.faq-page-quick-links .kymjo-button,
.faq-page-contact-info .kymjo-button-primary {
    margin: 5px;
    /* Basic button styling (you might have these globally) */
    display: inline-block;
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.faq-page-quick-links .kymjo-button {
    background-color: #f1f3f5;
    color: #343a40;
    border: 1px solid #dee2e6;
}
.faq-page-quick-links .kymjo-button:hover {
    background-color: #e9ecef;
}
.faq-page-contact-info .kymjo-button-primary {
    background-color: #0073aa;
    color: #fff;
    border: 1px solid #0073aa;
}
.faq-page-contact-info .kymjo-button-primary:hover {
    background-color: #005a87;
}

/* Responsive for FAQ Page */
@media (max-width: 768px) {
    .kymjo-faq-page .entry-header.faq-page-header .entry-title {
        font-size: 2em;
    }
    .faq-category-title {
        font-size: 1.5em;
    }
    .kymjo-faq-accordion .faq-question {
        font-size: 1.05em;
    }
}


/*--------------------------------------------------------------
>>> Privacy Policy Page Specific Styles
--------------------------------------------------------------*/
.kymjo-privacy-policy-page .entry-content {
    max-width: 800px; /* Constrain width for better readability of text */
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0;
}

.privacy-policy-section {
    margin-bottom: 30px;
}

.privacy-policy-section h2 {
    font-size: 1.6em;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.privacy-policy-section p {
    font-size: 1em;
    line-height: 1.7;
    color: #495057;
    margin-bottom: 1em;
}


/*--------------------------------------------------------------
>>> Terms of Service Page Specific Styles
--------------------------------------------------------------*/
.kymjo-tos-page .entry-header .entry-title {
    font-size: 2.8em; /* Prominent page title */
    color: #212529;
    margin-bottom: 10px;
}

.kymjo-tos-page .entry-content {
    max-width: 820px; /* Constrain width for optimal text line length */
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0 40px 0; /* Add more bottom padding */
}

.tos-section {
    margin-bottom: 35px;
}

.tos-section h2 {
    font-size: 1.7em;
    color: #333;
    margin-top: 20px; /* Add space above section titles */
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd; /* Subtle separator for sections */
}
.kymjo-tos-page .last-updated + .tos-section h2 {
    margin-top: 0; /* No extra top margin for the first section title */
}


.tos-section p,
.tos-section ul li {
    font-size: 1.05em; /* Good readable size for body text */
    line-height: 1.8; /* Generous line height for readability */
    color: #454545; /* Slightly softer than pure black */
    margin-bottom: 1.2em;
}

.tos-section ul {
    list-style: disc;
    padding-left: 25px;
    margin-left: 10px;
}

.tos-section ul li {
    margin-bottom: 0.6em;
}

.tos-section strong {
    font-weight: 600;
    color: #212529;
}

.tos-section a {
    color: #0073aa; /* Your theme's primary link color */
    text-decoration: underline;
}
.tos-section a:hover {
    color: #005a87;
    text-decoration: none;
}

/* Responsive adjustments for ToS readability */
@media (max-width: 768px) {
    .kymjo-tos-page .entry-header .entry-title {
        font-size: 2.2em;
    }
    .tos-section h2 {
        font-size: 1.5em;
    }
    .tos-section p,
    .tos-section ul li {
        font-size: 1em;
    }
}



/*--------------------------------------------------------------
>>> Policy Page Generic Styles (Privacy, ToS, Refund)
--------------------------------------------------------------*/
.kymjo-policy-page .entry-header.policy-page-header,
.kymjo-privacy-policy-page .entry-header, /* For Privacy Policy if using older class */
.kymjo-tos-page .entry-header { /* For ToS if using older class */
    text-align: center;
    padding: 30px 20px 10px 20px; /* Adjusted padding */
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.kymjo-policy-page .entry-header .entry-title,
.kymjo-privacy-policy-page .entry-header .entry-title,
.kymjo-tos-page .entry-header .entry-title {
    font-size: 2.4em; /* Consistent large title for policy pages */
    color: #212529;
    margin-bottom: 5px;
}

.kymjo-policy-page .entry-content {
    max-width: 800px; /* Optimal width for text readability */
    margin-left: auto;
    margin-right: auto;
    padding: 20px 15px 40px 15px; /* Ensure some padding around content */
}

.kymjo-policy-page .last-updated {
    text-align: left;
    font-style: italic;
    color: #555;
    margin-bottom: 30px;
    font-size: 0.9em;
}

.policy-section { /* Class for sections within any policy page */
    margin-bottom: 35px;
}

.policy-section h2 {
    font-size: 1.5em; /* Slightly smaller section headings */
    color: #333;
    margin-top: 10px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.kymjo-policy-page .last-updated + .policy-section h2,
.kymjo-policy-page .entry-content > .policy-section:first-of-type h2 {
    margin-top: 0; /* No extra top margin for the very first section title */
}

.policy-section p,
.policy-section ul li {
    font-size: 1em;
    line-height: 1.8; /* Good line height for legal text */
    color: #454545;
    margin-bottom: 1.1em;
}

.policy-section ul {
    list-style: disc;
    padding-left: 25px;
    margin-left: 10px;
}
.policy-section ul li {
    margin-bottom: 0.5em;
}

.policy-section strong {
    font-weight: 600;
    color: #212529;
}

.policy-section a {
    color: #0073aa; /* Your theme's primary link color */
    text-decoration: underline;
}
.policy-section a:hover {
    color: #005a87;
    text-decoration: none;
}

/* Responsive adjustments for Policy Pages */
@media (max-width: 768px) {
    .kymjo-policy-page .entry-header .entry-title,
    .kymjo-privacy-policy-page .entry-header .entry-title,
    .kymjo-tos-page .entry-header .entry-title {
        font-size: 2em;
    }
    .policy-section h2 {
        font-size: 1.3em;
    }
    .policy-section p,
    .policy-section ul li {
        font-size: 0.95em;
    }
}

/*--------------------------------------------------------------
>>> [V2] Professional About Us Page
--------------------------------------------------------------*/

/* --- 1. General Section Styling --- */
.kymjo-about-us-page-v2 .site-main {
    background-color: #ffffff;
}
.kymjo-about-us-page-v2 section {
    padding: 80px 20px;
    position: relative;
}
.kymjo-about-us-page-v2 .container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.kymjo-about-us-page-v2 .section-heading {
    font-size: 2.5em;
    font-weight: 700;
    color: #1A237E;
    margin: 0 0 20px 0;
}
.kymjo-about-us-page-v2 .section-subtitle {
    font-size: 1.15em;
    color: #495057;
    max-width: 700px;
    line-height: 1.7;
    margin-bottom: 40px;
}
.kymjo-about-us-page-v2 .section-heading.centered,
.kymjo-about-us-page-v2 .section-subtitle.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* --- 2. Hero Section --- */
.about-hero-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
}
.about-hero-image-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
}
.about-hero-image-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
}
.about-hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0, 35, 59, 0.8), rgba(0, 35, 59, 0.4));
    z-index: 1;
}
.about-hero-content .hero-title {
    font-size: 3.2em;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.about-hero-content .hero-subtitle {
    font-size: 1.3em;
    max-width: 750px;
    opacity: 0.95;
}

/* --- 3. Founder's Note Section (Dark) --- */
.founder-note-section {
    background-color: #00233b;
    color: #ffffff;
}
.founder-note-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 50px;
    align-items: center;
}
.founder-image {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid #005a87;
}
.founder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.founder-text .section-heading {
    color: #ffffff;
}
.founder-text blockquote {
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.8;
    border-left: 4px solid #0073aa;
    padding-left: 25px;
    margin: 0 0 25px 0;
    opacity: 0.9;
}
.founder-text cite .founder-name {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
}
.founder-text cite .founder-title {
    display: block;
    font-size: 1em;
    color: #a8d8f0;
}

/* --- 4. Timeline Section --- */
.timeline-section {
    background-color: #f8f9fa;
}
.timeline {
    position: relative;
    max-width: 750px;
    margin: 40px auto 0;
    padding: 0;
    list-style: none;
}
.timeline::before { /* The vertical line */
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    height: 100%;
    width: 4px;
    background: #e9ecef;
}
.timeline-item {
    margin-bottom: 50px;
    position: relative;
    padding-left: 60px;
}
.timeline-item::before { /* The bullet points */
    content: '';
    position: absolute;
    left: 8px;
    top: 5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #0073aa;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-content h3 {
    font-size: 1.4em;
    font-weight: 600;
    color: #005a87;
    margin: 0 0 10px 0;
}
.timeline-content p {
    line-height: 1.7;
    margin: 0;
    color: #495057;
}

/* --- 5. "What We Do" Section --- */
.what-we-do-section { background-color: #ffffff; }
.what-we-do-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; }
.what-we-do-item { padding: 25px; text-align: center; }
.what-we-do-item .icon-wrapper { width: 50px; height: 50px; margin: 0 auto 20px; background-color: #0073aa; color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.what-we-do-item .icon-wrapper svg { width: 28px; height: 28px; }
.what-we-do-item h3 { font-size: 1.3em; margin-bottom: 10px; }
.what-we-do-item p { color: #495057; line-height: 1.6; }

/* --- 6. "Meet the Team" Section --- */
.meet-the-team-section { background-color: #00233b; }
.meet-the-team-section .section-heading { color: #ffffff; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 30px; }
.team-member-card { text-align: center; color: #ffffff; }
.team-member-card img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 15px; border: 4px solid #ffffff; }
.team-member-card h3 { font-size: 1.2em; margin: 0 0 5px 0; }
.team-member-card .member-title { font-size: 1em; color: #a8d8f0; margin: 0; }

/* --- 7. Final CTA Section --- */
.about-cta-section { background-color: #e7f3ff; text-align: center; }
.about-cta-section .section-heading { color: #1A237E; }
.cta-buttons { margin-top: 30px; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
/* Reusing button classes or define new ones like .kjo-button-primary */

/* --- 8. Responsive Design --- */
@media (max-width: 768px) {
    .kymjo-about-us-page-v2 .section-heading { font-size: 2em; }
    .about-hero-content .hero-title { font-size: 2.5em; }
    .founder-note-grid { grid-template-columns: 1fr; text-align: center; }
    .founder-image { margin: 0 auto 30px; width: 200px; height: 200px; }
    .timeline::before { left: 12px; }
    .timeline-item { padding-left: 50px; }
    .timeline-item::before { left: 0; }
}


/*--------------------------------------------------------------
>>> Buy a Book Page Specific Styles
--------------------------------------------------------------*/
.kymjo-buy-a-book-page .entry-header.buy-a-book-page-header {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 30px;
}
.kymjo-buy-a-book-page .entry-header.buy-a-book-page-header .entry-title {
    font-size: 2.5em;
    color: #212529;
    margin-bottom: 10px;
}
.kymjo-buy-a-book-page .buy-a-book-intro {
    font-size: 1.1em;
    color: #495057;
    max-width: 700px;
    margin: 0 auto;
}

.book-category-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    padding: 0 20px;
}
.book-category-filters .filter-btn { /* Similar to FAQ filters */
    background-color: #fff;
    color: #495057;
    border: 1px solid #dee2e6;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}
.book-category-filters .filter-btn:hover {
    border-color: #0073aa;
    color: #0073aa;
}
.book-category-filters .filter-btn.active {
    background-color: #0073aa;
    color: #ffffff;
    border-color: #0073aa;
}

.kymjo-books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 0 20px 40px 20px;
}

.kymjo-book-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex; /* For internal structure if needed */
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kymjo-book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.kymjo-book-card .book-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.book-cover-image {
    width: 100%;
    height: 250px; /* Or use aspect-ratio if preferred */
    background-color: #e9ecef; /* Placeholder bg */
}
.book-cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.book-cover-placeholder {
    width: 100%;
    height: 250px;
    background-color: #0073aa;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    padding: 15px;
}

.book-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.book-title {
    font-size: 1.25em;
    font-weight: 600;
    color: #212529;
    margin: 0 0 10px 0;
    line-height: 1.3;
}
.book-excerpt {
    font-size: 0.9em;
    color: #495057;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1;
    /* Optional: Limit lines for excerpt */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.book-price {
    font-size: 1.1em;
    font-weight: bold;
    color: #005a87;
    margin-bottom: 15px;
}
.book-action-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    background-color: #0073aa;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease;
    margin-top: auto; /* Pushes button to bottom */
}
.book-action-btn:hover {
    background-color: #005a87;
}
.no-books-found {
    grid-column: 1 / -1; /* Span all columns if grid is empty */
    text-align: center;
    font-size: 1.1em;
    padding: 40px 0;
    color: #555;
}

/* Responsive Book Grid */
@media (max-width: 600px) {
    .kymjo-books-grid {
        grid-template-columns: 1fr; /* Stack to single column on small mobile */
    }
}


/*--------------------------------------------------------------
>>> KYMJOJOBS User Dashboard Layout Styles (REVISED & CONSOLIDATED)
--------------------------------------------------------------*/

/* --- Main Dashboard Wrapper (Existing - Kept) --- */
.kymjojobs-dashboard-wrapper {
    display: flex;
    min-height: 100vh;
}

/* --- Dashboard Sidebar (Existing - Kept, with Nav Scroll Fix) --- */
.dashboard-sidebar {
    width: 260px;
    background-color: #2c3e50; /* User's preferred color - Kept */
    color: #ecf0f1; /* User's preferred color - Kept */
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: fixed; 
    left: 0;
    top: 0;
    height: 100%; 
    z-index: 1001; 
    transform: translateX(0); 
    transition: transform 0.3s ease-in-out; 
}

.dashboard-sidebar-logo {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #34495e; /* User's preferred color - Kept */
}
.dashboard-sidebar-logo img {
    max-height: 40px; 
    width: auto;
}
.dashboard-sidebar-logo a {
    color: #ecf0f1; /* User's preferred color - Kept */
    text-decoration: none;
    font-size: 1.5em;
    font-weight: bold;
}

/* Navigation within Sidebar */
.dashboard-nav { /* MODIFIED: Added scroll properties */
    flex-grow: 1;
    overflow-y: auto; /* Enables vertical scrolling if content overflows */
    min-height: 0;    /* Important for flexbox to allow shrinking */
    /* scrollbar-width: thin; */ /* Optional: For thinner scrollbar in Firefox */
    /* scrollbar-color: #556c85 #2c3e50; */ /* Optional: Scrollbar colors (thumb track) */
}
/* Optional: Webkit scrollbar styling (Chrome, Safari, Edge) */
/*
.dashboard-nav::-webkit-scrollbar {
    width: 8px;
}
.dashboard-nav::-webkit-scrollbar-track {
    background: #2c3e50;
}
.dashboard-nav::-webkit-scrollbar-thumb {
    background-color: #556c85;
    border-radius: 4px;
    border: 2px solid #2c3e50;
}
*/

.dashboard-nav ul { list-style: none; padding: 0; margin: 0; }
.dashboard-nav li.nav-category-title { padding: 15px 0 5px; font-size: 0.9em; font-weight: bold; text-transform: uppercase; color: #95a5a6; margin-top: 10px; } /* User's styles - Kept */
.dashboard-nav li.nav-category-title:first-child { margin-top: 0; }
.dashboard-nav li a { display: block; padding: 10px 0px; color: #ecf0f1; text-decoration: none; font-size: 1em; border-radius: 4px; transition: background-color 0.2s ease, padding-left 0.2s ease; } /* User's styles - Kept */
.dashboard-nav li a:hover { background-color: #34495e; padding-left: 10px; color: #ffffff; } /* User's styles - Kept */

.sidebar-footer-links { margin-top: auto; padding-top: 20px; border-top: 1px solid #34495e; } /* User's styles - Kept */
.sidebar-footer-links ul { list-style: none; padding: 0; margin: 0; }
.sidebar-footer-links li a { display: block; padding: 8px 0px; color: #bdc3c7; text-decoration: none; font-size: 0.9em; } /* User's styles - Kept */
.sidebar-footer-links li a:hover { color: #ffffff; } /* User's styles - Kept */

/* --- Mobile Hamburger Toggle (Existing - Kept as user likes it) --- */
.dashboard-sidebar-mobile-toggle-wrapper {
    display: none; 
    position: fixed; 
    top: 15px; /* Adjusted slightly for better spacing perhaps */      
    left: 15px; /* Adjusted slightly */
    z-index: 1005; 
}

#dashboard-hamburger-toggle {
    background: #2c3e50;
    border: 1px solid #34495e;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
}
#dashboard-hamburger-toggle span {
    display: block;
    width: 22px;
    height: 2.5px;
    background-color: #ecf0f1; 
    margin: 4px 0;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}
#dashboard-hamburger-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#dashboard-hamburger-toggle.active span:nth-child(2) { opacity: 0; }
#dashboard-hamburger-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Dashboard Main Area (Existing Base - Kept) --- */
.dashboard-main-area {
    margin-left: 260px;
    padding: 0; /* MODIFIED: Remove padding here, header and content will manage their own */
    width: calc(100% - 260px); 
    flex-grow: 1; 
    background-color: #f4f6f9; /* User's preferred bg - Kept */
    transition: margin-left 0.3s ease-in-out;
}

/* --- Dashboard Main Header (Existing Base - Kept, with NEW internal element styles) --- */
.dashboard-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px; /* User's padding - Kept */
    background-color: #ffffff; /* User's bg - Kept */
    /* MODIFIED: No margin-bottom here; sections below will have margin-top or main content wrap has padding */
    border-radius: 8px; /* User's radius - Kept (or remove if you want full width seamless with top) */
    box-shadow: 0 3px 10px rgba(0,0,0,0.07); /* User's shadow - Kept */
    border-bottom: 1px solid #dee2e6; /* ADDED: For a clean separation, if top margin is 0 for main area */
    /* Note: If .dashboard-main-area has padding:0, this header will be truly full width.
       If you want the header to have the 25px 30px padding like before,
       add it back to .dashboard-main-area and remove padding from individual sections below.
       For now, assuming header is edge-to-edge within its allocated space. */
}

.dashboard-main-header .dashboard-header-left .welcome-message { /* NEW */
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
}

.dashboard-main-header .dashboard-header-right { /* Minor modifications might occur based on new items */
    display: flex;
    align-items: center;
    gap: 15px; /* Adjusted gap for potentially more icons */
}

.dashboard-main-header .coins-info,
.dashboard-main-header .topup-coins-button,
.dashboard-main-header .user-profile-info img.avatar {
    /* These existing styles from user's CSS are fine */
}

.dashboard-main-header .header-icon-group { /* NEW */
    display: flex;
    align-items: center;
    gap: 12px; /* Space between new icons */
}

.dashboard-main-header .header-icon svg { /* NEW */
    width: 22px;
    height: 22px;
    color: #55575a; /* Slightly darker for icons */
    transition: color 0.2s ease;
}
.dashboard-main-header .header-icon:hover svg { /* NEW */
    color: #0073aa; /* Your primary color */
}
.dashboard-main-header .user-profile-info { /* Keeping existing user profile info styles */
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- In your main dashboard CSS block --- */

.topup-coins-button {
    padding: 9px 20px;
    background-color: #20c997; /* Light Green */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: 600; /* Made slightly bolder */
    transition: background-color 0.2s ease, transform 0.2s ease;
    border: none;
    display: inline-block; /* Ensures proper padding and margins */
    text-align: center; /* Centers text within the button */
}

.topup-coins-button:hover {
    background-color: #1baa80; /* A slightly darker shade for hover */
    transform: translateY(-1px); /* A subtle lift on hover */
}

/* --- Add this media query for mobile devices --- */

@media (max-width: 768px) {
    .topup-coins-button {
        padding: 12px 15px; /* Adjust padding for smaller screens */
        font-size: 1em;     /* Make font size slightly larger for readability on mobile */
        width: 100%;        /* Make the button full-width on mobile */
        box-sizing: border-box; /* Ensures padding is included in the total width */
    }
}


/* --- Dashboard Main Content Area (Styling for NEW elements) --- */
.dashboard-content-wrap {
    padding: 25px 30px; /* ADDED: Padding for the main content area, was on .dashboard-main-area */
}

/* Generic Dashboard Section (NEW) */
.dashboard-section {
    margin-bottom: 25px;
}
.dashboard-section:last-child {
    margin-bottom: 0;
}

/* Onboarding Section (NEW) */
.dashboard-onboarding {
    background: linear-gradient(135deg, #0073aa 0%, #005073 100%); /* Example: Slightly adjusted blue gradient */
    color: #ffffff;
    padding: 30px 25px;
    border-radius: 10px; /* Slightly more pronounced radius */
    display: flex;
    flex-direction: column; /* Default stack */
    align-items: center;
    text-align: center;
    gap: 20px;
}

.dashboard-onboarding .onboarding-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.dashboard-onboarding .onboarding-avatar {
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.6); /* Thicker, more prominent border */
    width: 96px; /* Ensure specific size */
    height: 96px;
}
.dashboard-onboarding .onboarding-text {
    margin-top: 10px;
}
.dashboard-onboarding .onboarding-title {
    font-size: 1.8em;
    font-weight: 600;
    margin: 0 0 8px 0;
}
.dashboard-onboarding .commission-earned-card {
    background: rgba(255, 255, 255, 0.2);
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.commission-earned-card .card-subtitle {
    margin: 0 0 5px 0;
    font-size: 0.9em;
    opacity: 0.9;
    font-weight: 500;
}
.commission-earned-card .card-main-stat {
    font-size: 1.8em;
    font-weight: 700;
    margin: 0;
}

/* Quick Actions Section (NEW) */
.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid for actions */
    gap: 15px;
}
.quick-action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    background-color: #ffffff;
    color: #343a40; /* Darker text for better contrast */
    border: 1px solid #dee2e6; /* Softer border */
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    min-height: 120px;
}
.quick-action-button:hover {
    background-color: #f8f9fa; /* Lighter hover */
    border-color: #ced4da;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.07);
}
.quick-action-button .quick-action-icon {
    font-size: 1.8em; /* For emoji */
    margin-bottom: 10px;
    color: #0073aa; /* Primary color for icons */
}
.quick-action-button .quick-action-icon svg { /* If using SVGs */
    width: 30px;
    height: 30px;
    fill: #0073aa; /* Or stroke, depending on SVG */
}
.quick-action-button .quick-action-text {
    font-size: 1em; /* Slightly larger text */
    font-weight: 500;
}

/* Dashboard Grid Layout & Cards (NEW) */
.dashboard-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 25px;
}
.dashboard-card {
    background-color: #ffffff;
    padding: 20px 25px;
    border-radius: 10px; /* Slightly more modern radius */
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* Softer, more modern shadow */
    /* border: 1px solid #e9ecef; /* Optional subtle border */
    display: flex;
    flex-direction: column;
}
.dashboard-card .card-title {
    font-size: 1.2em; /* Consistent card title size */
    font-weight: 600;
    color: #2c3e50; /* Dark blue, matches sidebar for consistency */
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ecf0f1; /* Lighter separator */
}
.dashboard-card .card-description {
    font-size: 0.9em;
    color: #55575a; /* Softer text color */
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1;
}
.dashboard-card .button, .dashboard-card .button-secondary, .dashboard-card .view-all-link {
    margin-top: auto; /* Pushes button to the bottom */
    /* Your existing .button styles should apply. Add specific overrides if needed */
}
.dashboard-card .button-secondary {
    background-color: #6c757d;
    color: white;
    border: none;
}
.dashboard-card .button-secondary:hover {
    background-color: #5a6268;
}


/* Referral Card Specifics (NEW) */
.referral-card .referral-link-input-group input[type="text"] {
    background-color: #f8f9fa; /* Lighter background for readonly */
    color: #495057;
    font-size: 0.9em;
}
.referral-card .referral-link-input-group button {
    background-color: #0073aa; /* Match primary button */
    font-size: 0.9em;
}
.referral-card .copy-feedback-text {
    min-height: 1.2em; /* Keep space for message */
}
.referral-card .referral-stats {
    font-size: 0.95em; /* Slightly larger stats text */
    color: #333;
    margin-top: 12px;
}
.referral-card .view-referrals-link {
    font-size: 0.9em;
    color: #0073aa;
    text-decoration: underline;
}

/* Profile Completion Card Specifics (NEW) */
.profile-completion-card .progress-bar-container {
    background-color: #e9ecef;
    border-radius: 20px; /* Pill shape for container */
    margin: 10px 0 15px 0; /* More vertical margin */
}
.profile-completion-card .progress-bar {
    height: 18px;
    background-color: #20c997; /* A vibrant green */
    line-height: 18px;
    font-size: 0.75em;
    border-radius: 20px; /* Pill shape for bar */
}

/* Recent Activity Card Specifics (NEW) */
.recent-activity-card .activity-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0; /* More space before button */
}
.recent-activity-card .activity-item {
    padding: 12px 0; /* More padding */
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between; /* Align items better */
    align-items: center; /* Vertically align items */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 5px; /* Space if items wrap */
}
.recent-activity-card .activity-item:last-child { border-bottom: none; }
.recent-activity-card .activity-description {
    font-weight: 500;
    color: #343a40;
    font-size: 0.9em;
    flex-basis: 60%; /* Allow more space for description */
    flex-grow: 1;
}
.recent-activity-card .activity-details {
    font-size: 0.8em;
    text-align: right;
    flex-basis: 35%; /* Space for coins and time */
    flex-shrink: 0; /* Don't let it shrink too much */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.recent-activity-card .activity-coins { font-weight: bold; display: block; }
.recent-activity-card .activity-coins.positive { color: #198754; } /* Bootstrap success green */
.recent-activity-card .activity-coins.negative { color: #dc3545; } /* Bootstrap danger red */
.recent-activity-card .activity-time { color: #6c757d; display: block; margin-top: 2px;}


/* Styles for dashboard page titles if any are used via standard loop (Kept from user's CSS, may be less relevant for new widget layout) */
.dashboard-content-wrap .entry-header { margin-bottom: 20px; }
.dashboard-content-wrap .dashboard-page-title { font-size: 1.7em; color: #212529; font-weight: 600; }


/* --- Responsive Adjustments (Existing Kept & Merged with New) --- */
@media (max-width: 991px) { /* Tablet breakpoint */
    .dashboard-sidebar {
        transform: translateX(-100%); 
    }
    .dashboard-sidebar.active {
        transform: translateX(0) !important; 
    }
    .dashboard-main-area {
        width: 100%;
        margin-left: 0; 
    }
    .dashboard-sidebar-mobile-toggle-wrapper { 
        display: block; 
    }

    /* Onboarding text might need to be smaller */
    .dashboard-onboarding .onboarding-title {
        font-size: 1.5em;
    }
    .dashboard-onboarding .commission-earned-card .card-main-stat {
        font-size: 1.5em;
    }
}

@media (max-width: 768px) { /* Smaller tablets and large mobiles */
    .dashboard-main-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 15px; /* User's padding - Kept */
    }
    .dashboard-main-header .dashboard-header-left,
    .dashboard-main-header .dashboard-header-right {
        width: 100%;
        justify-content: space-between;
    }
    .dashboard-main-header .dashboard-header-right {
        margin-top: 0; /* Removed top margin as gap handles it */
        gap: 10px;
    }
    .dashboard-main-header .welcome-message {
        font-size: 1.1em;
        text-align: center; /* Center welcome message if it's alone on its line */
        width: 100%;
        margin-bottom: 10px;
    }
    .dashboard-main-header .coins-info { font-size: 0.9em; }
    .dashboard-main-header .topup-coins-button { padding: 8px 12px; font-size: 0.85em;}

    .dashboard-quick-actions {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Allow 2-across if space */
        gap: 10px;
    }
    .quick-action-button {
        min-height: 90px;
        padding: 15px 5px;
    }
    .quick-action-button .quick-action-icon { font-size: 1.6em; }
    .quick-action-button .quick-action-icon svg { width: 26px; height: 26px; }
    .quick-action-button .quick-action-text { font-size: 0.85em; }


    /* Adjust onboarding if avatar and text are too cramped */
    .dashboard-onboarding {
        padding: 20px;
    }
    .dashboard-onboarding .onboarding-content {
        flex-direction: column; /* Ensure it's column */
    }
    .dashboard-onboarding .onboarding-avatar {
        width: 80px;
        height: 80px;
    }

    .dashboard-grid-layout {
        grid-template-columns: 1fr; /* Stack cards on smaller screens */
    }
}

@media (max-width: 480px) { /* Small mobiles */
    .dashboard-content-wrap {
        padding: 15px; /* Reduce padding for small screens */
    }
    .dashboard-main-header {
        padding: 15px;
    }
    .dashboard-main-header .dashboard-header-right {
        flex-direction: column; /* Stack coin info/topup and icons */
        align-items: stretch;
        gap: 10px;
    }
    .dashboard-main-header .coins-info,
    .dashboard-main-header .topup-coins-button,
    .dashboard-main-header .header-icon-group,
    .dashboard-main-header .user-profile-info {
        width: 100%;
        justify-content: center; /* Center items when stacked */
    }
    .dashboard-main-header .header-icon-group {
        justify-content: space-around; /* Spread icons a bit */
    }


    .quick-action-button .quick-action-text { font-size: 0.8em; }

    .dashboard-card { padding: 15px; }
    .dashboard-card .card-title { font-size: 1.1em; }

    .recent-activity-card .activity-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .recent-activity-card .activity-details {
        width: 100%;
        flex-direction: row; /* Put coins and time side-by-side */
        justify-content: space-between;
        margin-top: 5px;
    }
}


/*--------------------------------------------------------------
>>> Dashboard Promotion Board (V3 - Image Background Style)
--------------------------------------------------------------*/

/* --- Main Promo Board Container --- */
.kymjo-promo-board {
    position: relative; /* CHANGED: This is now the positioning container */
    border-radius: 12px;
    margin-bottom: 25px;
    overflow: hidden; /* This is crucial to clip the corners of the scrolling image */
    background-color: #e9ecef; /* A fallback color while images load */
}

/* --- The Image Slider (Now the Background) --- */
.promo-slider {
    height: 100px; /* Desktop height */
    width: 100%;
    position: absolute; /* It's now a background layer */
    top: 0;
    left: 0;
    z-index: 1; /* Sits behind the buttons */
}

.promo-slider-track {
    display: flex;
    width: calc(1920px * 8); /* Adjust '8' if you change the number of images (4 images * 2) */
    animation: promo-scroll 60s linear infinite;
}

.promo-slide {
    flex-shrink: 0;
    width: 1920px;
    height: 100px; /* Desktop height */
}

.promo-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- The Scrolling Animation (Unchanged) --- */
@keyframes promo-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-1920px * 4)); } /* Adjust '4' if you change number of images */
}

/* --- The Action Buttons (Now an Overlay) --- */
.promo-actions {
    position: relative; /* CHANGED: It's now a layer on top */
    z-index: 2; /* Sits ON TOP of the slider */
    height: 100px; /* Matches the slider height */
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center; /* This vertically centers the buttons */
    gap: 15px;
    flex-wrap: wrap;
    /* NEW: This dark overlay ensures buttons are ALWAYS readable */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
}

.promo-button {
    text-decoration: none;
    font-weight: 600;
    font-size: 1em;
    padding: 10px 25px;
    border-radius: 8px;
    border: 2px solid #ffffff; /* CHANGED: White border for visibility */
    transition: all 0.2s ease-in-out;
    display: inline-block;
    text-align: center;
    /* NEW: Adds a subtle shadow to the text for readability */
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* "Get Gift for sharing" button */
.promo-button.promo-button-left {
    background-color: rgba(255, 255, 255, 0.9); /* CHANGED: A solid, bright style */
    color: #005a87;
    border-color: rgba(255, 255, 255, 0.9);
}

.promo-button.promo-button-left:hover {
    background-color: #ffffff;
    transform: translateY(-2px) scale(1.02);
}

/* "Data house" button */
.promo-button.promo-button-right {
    background-color: transparent; /* CHANGED: A "ghost button" style */
    color: #ffffff;
    border-color: #ffffff;
}

.promo-button.promo-button-right:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px) scale(1.02);
}

/* --- Responsive for Mobile --- */
@media (max-width: 768px) {
    .promo-slider,
    .promo-slide,
    .promo-actions {
        height: 80px; /* Mobile height */
    }

    .promo-button {
        font-size: 0.9em;
        padding: 8px 20px;
    }
}
/*--------------------------------------------------------------
<<< END KYMJOJOBS User Dashboard Layout Styles (REVISED)
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> KYMJOJOBS COURSE PAGE - VIBRANT REBUILD & FIXES
--------------------------------------------------------------*/

/* --- 1. ENHANCEMENT: Brighter Color & Font Variables --- */
:root {
    --course-primary-blue: #0073aa;      /* A vibrant, trusted blue */
    --course-dark-blue: #00233b;
    --course-light-text: #ffffff;
    --course-text-dark: #212529;
    --course-text-body: #495057;
    --course-text-muted: #6c757d;
    --course-bg-light: #f8f9fa;          /* A clean, light grey */
    --course-bg-white: #ffffff;
    --course-border-color: #dee2e6;      /* Softer border color */
    --course-success-green: #28a745;      /* A vibrant green for success actions */
}

/* --- 2. EXISTING & ENHANCED STYLES (Your structure is maintained) --- */

/* --- Main Page Header --- */
.course-header {
    background-color: var(--course-dark-blue);
    color: var(--course-light-text); /* ENHANCEMENT */
    padding: 60px 20px; /* ENHANCEMENT: More padding */
}
.course-header__content {
    max-width: 1200px;
    margin: 0 auto;
}
.course-header__title {
    font-size: 2.5em; 
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

/* --- Meta Info Bar --- */
.course-meta {
    background-color: var(--course-bg-white); /* ENHANCEMENT */
    border-bottom: 1px solid var(--course-border-color);
    padding: 20px; /* ENHANCEMENT */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px; 
    max-width: 1200px;
    margin: 0 auto;
}
.course-meta__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.course-meta__instructor-photo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--course-border-color);
}
.course-meta__label {
    font-size: 0.85em;
    color: var(--course-text-muted);
    display: block;
}
.course-meta__value {
    font-size: 1em; /* ENHANCEMENT: Larger text */
    font-weight: 600; /* ENHANCEMENT: Bolder */
    color: var(--course-text-dark);
}

/* --- Main Body & Sidebar Layout --- */
.course-body {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr; 
    gap: 30px;
    align-items: flex-start;
}
.course-body__ad-slot {
    width: 100%;
    min-height: 90px;
    background-color: var(--course-bg-light);
    border: 1px dashed var(--course-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--course-text-muted);
    margin: 20px 0;
}
.course-body__ad-slot--footer {
    margin-top: 40px;
}

/* --- Content Cards (What you learn, etc.) --- */
.course-content-card {
    background-color: var(--course-bg-white); /* ENHANCEMENT */
    border: 1px solid var(--course-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ENHANCEMENT: Soft shadow */
}
.course-content-card__title {
    font-size: 1.6em; /* ENHANCEMENT: Larger */
    font-weight: 700; /* ENHANCEMENT: Bolder */
    color: var(--course-text-dark);
    margin: 0;
    padding: 20px 25px;
    border-bottom: 1px solid var(--course-border-color);
}
.course-content-card__list {
    list-style: none;
    padding: 25px;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
.course-content-card__list li {
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230073aa'%3e%3cpath d='M12.736 3.97a.75.75 0 0 1 1.047 1.078l-7.25 7.5a.75.75 0 0 1-1.065.027L2.22 8.354a.75.75 0 1 1 1.06-1.06l3.72 3.722 6.736-6.992z'/%3e%3c/svg%3e"); /* ENHANCEMENT: Better checkmark SVG */
    background-repeat: no-repeat;
    background-position: left top 4px;
    background-size: 20px;
    color: var(--course-text-body);
    font-size: 1.05em; /* ENHANCEMENT: Larger */
    line-height: 1.8; /* ENHANCEMENT: More spacing */
}
.course-content-card__list--single-col {
    grid-template-columns: 1fr;
}
.course-content-card__prose {
    padding: 25px;
    color: var(--course-text-body);
    line-height: 1.8; /* ENHANCEMENT: More spacing */
    font-size: 1.05em; /* ENHANCEMENT: Larger */
}
.course-content-card__prose > *:first-child { margin-top: 0; }
.course-content-card__prose > *:last-child { margin-bottom: 0; }

.course-content-card__salary-box {
    margin: 20px 25px 0;
    padding: 15px;
    background-color: var(--course-bg-light);
    border-left: 4px solid var(--course-primary-blue);
    border-radius: 0 4px 4px 0;
}
.course-content-card__salary-box span {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--course-text-dark);
    margin-left: 8px;
}

/* --- 3. NEW STYLES: Certificate Section --- */
.course-certificate-wrapper {
    text-align: center;
}
.course-certificate-image {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    border: 1px solid var(--course-border-color);
}

/* --- Sticky Sidebar Card --- */
.course-body__sidebar {
    width: 100%;
}
.course-sidebar__sticky-wrapper {
    position: sticky;
    top: 30px;
}
.course-sidebar__card {
    border: 1px solid var(--course-border-color);
    border-radius: 8px;
    background-color: var(--course-bg-white);
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08); /* ENHANCEMENT: Softer shadow */
}
.course-sidebar__image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.course-sidebar__content {
    padding: 20px;
}
.course-sidebar__title {
    font-size: 1.25em;
    font-weight: 600;
    margin: 0 0 15px 0;
    text-align: center;
}
.course-sidebar__button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--course-success-green); /* ENHANCEMENT: Clear CTA color */
    color: var(--course-light-text);
    padding: 14px; /* ENHANCEMENT: Larger button */
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1em; /* ENHANCEMENT: Larger text */
    font-weight: 700; /* ENHANCEMENT: Bolder */
    transition: background-color 0.2s ease;
    border: none; /* Make sure it behaves like a button */
    cursor: pointer; /* Make sure it behaves like a button */
}
.course-sidebar__button:hover {
    background-color: #20893a; /* ENHANCEMENT: Darker green */
}
.course-sidebar__meta-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9em;
    color: var(--course-text-body);
}
.course-sidebar__meta-list li {
    padding-left: 24px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2328a745'%3e%3cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m3.84-8.41a.75.75 0 1 1-1.18 1.04l-3.23-3.41a.75.75 0 0 1 0-1.04l3.23-3.41a.75.75 0 1 1 1.18 1.04L8.36 7.5z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
}

/* --- "Explore More Courses" (Swiper) --- */
.explore-courses {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}
.explore-courses__main-title {
    font-size: 1.8em;
    font-weight: 600;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--course-border-color);
    padding-bottom: 10px;
}
/* --- FIX: This is the container for the slider and its buttons --- */
.explore-courses__category-block {
    position: relative; /* This is the anchor for the nav buttons */
    padding: 0 45px;    /* Make room on the sides for the buttons */
    margin-bottom: 40px;
}
.explore-courses__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0; /* No padding needed here anymore */
}
.explore-courses__category-title {
    font-size: 1.4em;
    font-weight: 600;
    margin: 0;
}
.explore-courses__slider-nav {
    display: none; /* We hide the old empty container */
}
/* --- FIX: Position the Swiper navigation buttons absolutely --- */
.explore-courses__slider .swiper-button-prev,
.explore-courses__slider .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: var(--course-bg-white);
    color: var(--course-primary-blue);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    z-index: 10;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-top: 0; /* Override Swiper's default margin */
}
.explore-courses__slider .swiper-button-prev {
    left: 0px; /* Position to the far left of the padded container */
}
.explore-courses__slider .swiper-button-next {
    right: 0px; /* Position to the far right */
}
.explore-courses__slider .swiper-button-prev:hover,
.explore-courses__slider .swiper-button-next:hover {
    background-color: var(--course-primary-blue);
    color: var(--course-light-text);
}
.explore-courses__slider .swiper-button-prev::after,
.explore-courses__slider .swiper-button-next::after {
    font-size: 18px; /* Bolder icon */
    font-weight: 900;
}
.explore-courses__slider .swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: auto; /* Make it selectable even when disabled */
}

.explore-courses__card {
    display: block;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--course-border-color);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.explore-courses__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.explore-courses__card-image-wrapper {
    aspect-ratio: 16 / 10;
    background-color: var(--course-bg-light);
}
.explore-courses__card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.explore-courses__card-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--course-text-muted); padding: 10px; font-size: 0.9em;
}
.explore-courses__card-content {
    padding: 15px;
    background-color: #fff;
}
.explore-courses__card-title {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--course-text-dark);
    margin: 0 0 5px 0;
    line-height: 1.3;
}
.explore-courses__card-instructor {
    font-size: 0.85em;
    color: var(--course-text-muted);
}

/* --- Floating Enroll Widget --- */
.floating-enroll-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--course-success-green); /* ENHANCEMENT: Matches sidebar button */
    color: #fff;
    padding: 10px 18px 10px 12px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: scale(0); 
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    border: none; /* Ensure it looks like a button */
    cursor: pointer; /* Ensure it looks like a button */
}
.floating-enroll-widget.visible {
    transform: scale(1);
}
.floating-enroll-widget__icon {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
}
.floating-enroll-widget__bubble-icon { font-size: 18px; line-height: 1; color: var(--course-dark-blue); }
.floating-enroll-widget__blink {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    background-color: var(--course-success-green);
    opacity: 0.7;
    animation: course-blink-animation 1.5s infinite ease-in-out;
}
.floating-enroll-widget__text { font-weight: 600; font-size: 1em; }

@keyframes course-blink-animation {
    0% { transform: scale(0.9); opacity: 0.7; }
    70% { transform: scale(1.6); opacity: 0; }
    100% { opacity: 0; }
}

/* --- Responsive Breakpoints --- */
@media (max-width: 768px) {
    .explore-courses__category-block {
        padding: 0; /* Remove side padding on mobile */
    }
    .explore-courses__slider .swiper-button-prev,
    .explore-courses__slider .swiper-button-next {
        display: none; /* Hide slider nav buttons on mobile for more space */
    }
}

@media (min-width: 768px) {
    .course-header__title { font-size: 3em; }
    .course-body { grid-template-columns: 2fr 1fr; gap: 40px; }
    .course-content-card__list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .course-header__title { font-size: 3.5em; }
}

/*--------------------------------------------------------------
>>> Professional Course Browser Styles
--------------------------------------------------------------*/
.explore-courses__header-v2 {
    max-width: 700px;
    margin: 0 auto 40px auto;
    text-align: center;
}
.explore-courses__main-title {
    font-size: 2.2em;
    color: #212529;
    margin-bottom: 20px;
}
.course-search-bar {
    position: relative;
}
.course-search-bar .search-icon-placeholder {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    color: #888;
}
#course-search-input {
    width: 100%;
    padding: 15px 20px 15px 50px; /* Make room for icon */
    font-size: 1.1em;
    border-radius: 30px;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
#course-search-input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2);
}

.kymjo-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    min-height: 150px; /* Prevent layout shift when loading */
}
.kymjo-course-card-alt {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kymjo-course-card-alt:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.card-alt-link {
    text-decoration: none;
}
.card-alt-image-wrapper {
    aspect-ratio: 16 / 10;
    background: #f1f3f5;
}
.card-alt-image-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
}
.card-alt-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: #6c757d; padding: 10px; font-weight: 500;
}
.card-alt-content {
    padding: 15px;
}
.card-alt-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
    line-height: 1.4;
}
.card-alt-instructor {
    font-size: 0.9em;
    color: #6c757d;
}
.no-results-found {
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    padding: 30px;
    font-size: 1.1em;
}


/*--------------------------------------------------------------
>>> KYMJOJOBS Delete Account Page Styles
--------------------------------------------------------------*/

/* --- Main container for the page --- */
.kymjo-delete-account-container {
    max-width: 750px;
    margin: 40px auto;
    padding: 20px;
}

.kymjo-delete-account-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.kymjo-delete-account-header .entry-title {
    font-size: 2.5em;
    color: #c0392b; /* A serious, cautionary red */
    margin: 0;
}

/* --- The yellow warning box --- */
.kymjo-warning-box {
    background-color: #fef9e7; /* Light yellow */
    border: 1px solid #f1c40f; /* Amber border */
    border-left-width: 5px;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.kymjo-warning-box .warning-icon {
    font-size: 2.5em;
    line-height: 1;
    margin-top: 5px;
}
.kymjo-warning-box .warning-text h3 {
    margin-top: 0;
    color: #d35400; /* Darker orange for heading */
}
.kymjo-warning-box .warning-text p,
.kymjo-warning-box .warning-text ul {
    font-size: 0.95em;
    color: #555;
    line-height: 1.7;
}
.kymjo-warning-box .warning-text ul {
    padding-left: 20px;
    margin-top: 10px;
}

/* --- Wrapper for your shortcode's form --- */
.kymjo-delete-form-wrapper {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 40px;
}
.kymjo-delete-form-wrapper p {
    margin-top: 0;
    font-size: 1.1em;
    text-align: center;
    color: #34495e;
}
/* This will style the form generated by your shortcode */
.kymjo-delete-form-wrapper form .kymjojobs-form-group {
    margin-bottom: 15px;
}
.kymjo-delete-form-wrapper form .button,
.kymjo-delete-form-wrapper form input[type="submit"] {
    width: 100%;
    background-color: #e74c3c; /* Red for delete button */
    border-color: #c0392b;
    color: #fff;
    padding: 12px;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.kymjo-delete-form-wrapper form .button:hover,
.kymjo-delete-form-wrapper form input[type="submit"]:hover {
    background-color: #c0392b; /* Darker red on hover */
}

/* --- Alternatives section --- */
.kymjo-delete-alternatives {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    font-size: 0.9em;
}
.kymjo-delete-alternatives h3 {
    margin-top: 0;
}
.kymjo-delete-alternatives a {
    color: #0073aa; /* Your primary blue */
    text-decoration: underline;
}


/* VVVVVV ADD THIS ENTIRE BLOCK TO THE END OF YOUR style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> All Classes Enrollment Page
--------------------------------------------------------------*/
.kymjo-all-classes-page .entry-header.all-classes-header {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f9fa;
    margin-bottom: 40px;
}
.kymjo-all-classes-page .entry-title {
    font-size: 2.8em;
    color: #212529;
}
.kymjo-all-classes-page .all-classes-intro {
    font-size: 1.15em;
    color: #495057;
    max-width: 700px;
    margin: 10px auto 0;
}
.kymjo-classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.kymjo-class-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}
.class-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.class-title {
    font-size: 1.4em;
    font-weight: 600;
    margin: 0 0 10px 0;
    line-height: 1.3;
}
.class-excerpt {
    font-size: 0.95em;
    color: #495057;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 20px;
}
.class-price {
    font-size: 1.1em;
    color: #005a87;
    margin-bottom: 20px;
}
.class-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}
.class-actions .kymjo-button-secondary,
.class-actions .kymjo-button-primary {
    flex: 1;
    text-align: center;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s ease;
}
.kymjo-button-secondary { background-color: #6c757d; color: #fff; border-color: #6c757d; }
.kymjo-button-secondary:hover { background-color: #5a6268; border-color: #545b62; }
.kymjo-button-primary { background-color: #0073aa; color: #fff; border-color: #0073aa; }
.kymjo-button-primary:hover { background-color: #005a87; border-color: #005a87; }

/* --- Enrollment Modal Styles --- */
.kymjo-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
}
.kymjo-modal-content {
    background-color: #fefefe;
    padding: 30px 40px;
    border: none;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    position: relative;
    animation: modal-fade-in 0.3s ease;
}
@keyframes modal-fade-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.kymjo-modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.kymjo-modal-close:hover { color: black; }

#modal-content-area h3 { margin-top: 0; }
.modal-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }

/* Notice styles for inside the modal */
.kymjo-notice {
    padding: 15px;
    border-radius: 5px;
    border: 1px solid;
    margin: 10px 0;
    line-height: 1.6;
}
.kymjo-notice.success { background-color: #d1e7dd; color: #0f5132; border-color: #badbcc; }
.kymjo-notice.error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }

/* Spinner for loading state */
.kymjo-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 115, 170, 0.2);
    border-radius: 50%;
    border-top-color: #0073aa;
    animation: kymjojobs_spin 1s ease-in-out infinite;
}
@keyframes kymjojobs_spin { to { transform: rotate(360deg); } }

/* ^^^^^^ END ADDED BLOCK ^^^^^^ */


/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/* --- All Classes Page Search Bar --- */
.kymjo-class-search-container {
    margin-top: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.kymjo-class-search-form {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
}
.kymjo-class-search-form .search-field {
    flex-grow: 1;
    border: none;
    padding: 12px 15px;
    font-size: 1em;
    outline: none;
}
.kymjo-class-search-form .search-submit {
    background-color: #0073aa;
    border: none;
    color: white;
    padding: 0 25px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
}
.kymjo-class-search-form .search-submit:hover {
    background-color: #005a87;
}
.no-results-message {
    text-align: center;
    grid-column: 1 / -1; /* Make it span the full width of the grid */
    padding: 30px;
    font-size: 1.1em;
}



/* VVVVVV ADD THIS ENTIRE BLOCK TO THE END OF YOUR style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> Webinar Page Styles
--------------------------------------------------------------*/
.kymjo-webinar-page {
    background-color: #f4f6f9;
}
.webinar-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}
.webinar-header {
    text-align: center;
    margin-bottom: 30px;
}
.webinar-eyebrow {
    font-size: 1em;
    font-weight: 500;
    color: #0073aa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
.webinar-title {
    font-size: 2.8em;
    color: #212529;
    margin: 5px 0 0 0;
}
.webinar-box {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    margin-bottom: 40px;
}
.webinar-icon {
    font-size: 3em;
    line-height: 1;
    margin-bottom: 15px;
}
.webinar-icon.success { color: #28a745; }
.webinar-icon.pending { color: #ffc107; }
.webinar-icon.error { color: #dc3545; }

.webinar-status-heading {
    font-size: 1.8em;
    margin: 0 0 10px 0;
    color: #343a40;
}
.webinar-status-message {
    font-size: 1.1em;
    color: #495057;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 25px auto;
}
.webinar-join-button {
    padding: 12px 35px;
    font-size: 1.1em;
    font-weight: 600;
}
.webinar-description {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}
.webinar-description h3 {
    margin-top: 0;
}

/* ^^^^^^ END ADDED BLOCK ^^^^^^ */


/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> Focus Mode Header (for Classes/Webinars)
--------------------------------------------------------------*/
.kymjo-focus-header {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}
.kymjo-focus-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.focus-header-btn {
    padding: 8px 20px !important;
    font-size: 0.9em !important;
}
/* ^^^^^^ END ADDED BLOCK ^^^^^^ */

/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> Single Class Page Styles
--------------------------------------------------------------*/
.kymjo-class-page .class-page-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
}
.kymjo-class-page .class-page-header {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 30px;
}
.class-page-header .class-main-title {
    margin-top: 0;
}
.class-page-header .class-page-intro {
    font-size: 1.1em;
    color: #495057;
    margin-bottom: 0;
}
.class-page-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 30px;
}
.class-content-area .entry-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}
.class-content-area .entry-content > *:first-child {
    margin-top: 0;
}
.class-content-area .entry-content > *:last-child {
    margin-bottom: 0;
}
/* Using the access denied box from the webinar page */
.kymjo-class-page .access-denied {
    margin: 0;
}

/* ^^^^^^ END ADDED BLOCK ^^^^^^ */

/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/* --- Single Class Page Meta Info --- */
.class-meta-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #e0e0e0;
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 0.95em;
    color: #495057;
}
.class-meta-info .meta-item strong {
    color: #212529;
}

/* ^^^^^^ END ADDED BLOCK ^^^^^^ */
/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/* --- Focus Mode Back Arrow Bar --- */
.kymjo-focus-back-bar {
    background-color: #34495e; /* A complementary dark color */
    padding: 8px 20px;
    text-align: left;
}
.back-to-dashboard-arrow {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
}
.back-to-dashboard-arrow:hover {
    color: #fff;
    text-decoration: underline;
}
/* This adjusts the main content to account for the new bar */
body.kymjo-focus-mode {
    padding-top: 39px; /* Height of the back-bar */
}
.kymjo-focus-back-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
}

/* ^^^^^^ END ADDED BLOCK ^^^^^^ */


/* VVVVVV ADD THIS ENTIRE BLOCK TO THE END OF YOUR style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> Single Community Page Styles
--------------------------------------------------------------*/
.community-page-header {
    position: relative;
    padding: 80px 20px;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}
.community-header-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 58, 87, 0.6);
}
.community-header-content {
    position: relative;
    z-index: 2;
}
.community-header-content .community-eyebrow {
    font-weight: 500;
    margin: 0;
}
.community-header-content .community-main-title {
    font-size: 3em;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.community-page-body {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}
.new-community-post-form {
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 40px;
}
.new-community-post-form h3 { margin-top: 0; }
.new-community-post-form label { font-weight: bold; display: block; margin-bottom: 5px; }
.new-community-post-form input[type="text"] { width: 100%; padding: 8px; }
.new-community-post-form .wp-editor-wrap { margin-top: 5px; }

.feed-title {
    font-size: 1.8em;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.community-post {
    background-color: #fff;
    padding: 25px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 25px;
}
.community-post-header .community-post-title {
    margin: 0;
    font-size: 1.4em;
}
.community-post-header .community-post-meta {
    font-size: 0.85em;
    color: #6c757d;
    margin-top: 5px;
}
.community-post-content {
    padding: 20px 0;
    border-bottom: 1px dashed #e9ecef;
}
.community-post-footer {
    margin-top: 15px;
    display: flex;
    gap: 20px;
    font-size: 0.9em;
    font-weight: 500;
}
.community-post-footer .like-button { cursor: pointer; color: #0073aa; }
.community-post-footer .comments-link a { text-decoration: none; color: #495057; }
.community-post-footer .comments-link a:hover { text-decoration: underline; }

/* ^^^^^^ END ADDED BLOCK ^^^^^^ */

/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/* --- Community Like Button --- */
.community-post-footer .like-button {
    background: #f0f2f5;
    border: 1px solid #e0e2e7;
    border-radius: 20px;
    padding: 6px 12px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
}
.community-post-footer .like-button:hover {
    background-color: #e4e6eb;
}
.community-post-footer .like-button.active {
    background-color: #e7f3ff;
    border-color: #0073aa;
    color: #0073aa;
}
.community-post-footer .like-button.processing {
    opacity: 0.6;
    cursor: wait;
}
/* ^^^^^^ END ADDED BLOCK ^^^^^^ */


/* --- All Jobs Page --- */
.kymjo-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}
.kymjo-job-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
}
.kymjo-job-card .job-title { margin-top: 0; }
.kymjo-job-card .job-excerpt { flex-grow: 1; margin-bottom: 20px; }
.kymjo-job-card .job-actions { margin-top: auto; }

/* --- Access Denied Box for Logged-Out Users --- */
.kymjo-access-denied-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}
.kymjo-access-denied-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}


/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> My Content Pages (Classes, Communities, etc.)
--------------------------------------------------------------*/
.kymjo-my-content-page .my-content-header {
    text-align: center;
    padding: 30px 20px;
    background-color: #f8f9fa;
    margin-bottom: 30px;
}
.kymjo-my-content-page .entry-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.kymjo-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}
.kymjo-content-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.kymjo-content-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.kymjo-content-card .card-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.kymjo-content-card .card-image {
    aspect-ratio: 16 / 9;
    background-color: #f1f3f5;
}
.kymjo-content-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kymjo-content-card .card-image-placeholder {
    aspect-ratio: 16 / 9;
    background-color: #005a87;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}
.kymjo-content-card .card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.kymjo-content-card .card-title {
    color: #212529;
    font-size: 1.2em;
    margin: 0 0 15px 0;
    flex-grow: 1;
}
.kymjo-content-card .kymjo-button-primary {
    display: block;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: auto;
}
.no-content-message {
    text-align: center;
    padding: 40px;
    font-size: 1.1em;
}

/* ^^^^^^ END ADDED BLOCK ^^^^^^ */


/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/* --- Single Job Page --- */
.kymjo-single-job-page .entry-header {
    text-align: center;
    padding: 30px 20px;
    background-color: #f8f9fa;
}
.kymjo-single-job-page .entry-content {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
}
.job-apply-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e9ecef;
    text-align: center;
}
.job-apply-status {
    margin-top: 20px;
    min-height: 1em;
}

/* ^^^^^^ END ADDED BLOCK ^^^^^^ */


/*--------------------------------------------------------------
>>> Single Job Container - Job Card Redesign
--------------------------------------------------------------*/
.kymjo-single-job-container-page .single-job-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.job-listings-container {
    display: grid;
    grid-template-columns: 1fr; /* Single column of cards */
    gap: 20px;
    margin-top: 40px;
}

/* On larger screens, you can have two columns if you like */
@media (min-width: 768px) {
    .job-listings-container {
        grid-template-columns: 1fr 1fr; /* Two cards side-by-side */
    }
}

.kymjo-job-card-v2 {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kymjo-job-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: #0073aa;
}

.job-card-clickable-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    text-decoration: none;
}

.job-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.job-card-logo {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.job-card-logo-placeholder {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    background-color: #0073aa;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    font-weight: bold;
    flex-shrink: 0;
}

.job-card-title {
    margin: 0 0 2px 0;
    font-size: 1.15em;
    color: #212529;
    line-height: 1.3;
}

.job-card-company {
    margin: 0;
    font-size: 0.95em;
    color: #495057;
}

.job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px 0;
    border-top: 1px solid #f0f0f0;
    font-size: 0.85em;
}
.job-card-meta .meta-item {
    background-color: #f8f9fa;
    padding: 4px 10px;
    border-radius: 15px;
    color: #495057;
}

.job-card-footer {
    border-top: 1px solid #f0f0f0;
    margin-top: auto; /* Pushes footer to bottom */
    padding-top: 15px;
    text-align: right;
}

.job-card-action-text {
    color: #0073aa;
    font-weight: 600;
    font-size: 0.9em;
}
/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/* --- Job Container Page Feed --- */
.individual-listings-feed .feed-title {
    font-size: 1.8em;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.listing-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.listing-item:hover {
    border-color: #0073aa;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.listing-item .listing-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    text-decoration: none;
}
.listing-item .listing-title {
    margin: 0;
    font-size: 1.3em;
    color: #343a40;
}
.listing-item .listing-action {
    font-weight: 600;
    color: #0073aa;
    white-space: nowrap;
    margin-left: 20px;
}
/* ^^^^^^ END ADDED BLOCK ^^^^^^ */


/* --- Rating Modal --- */
.rating-modal-content { max-width: 450px; }
.rating-modal-content h3 { margin-top: 0; text-align: center; }
.rating-modal-content p { text-align: center; margin-bottom: 20px; color: #495057; }
.star-rating-wrapper { display: flex; flex-direction: row-reverse; justify-content: center; font-size: 2.5em; }
.star-rating-wrapper input[type="radio"] { display: none; }
.star-rating-wrapper label { color: #ccc; cursor: pointer; transition: color 0.2s; }
.star-rating-wrapper input[type="radio"]:checked ~ label,
.star-rating-wrapper label:hover,
.star-rating-wrapper label:hover ~ label { color: #ffc107; }
#rating-quote { width: 100%; margin: 20px 0; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.rating-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }



/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> Cookie Consent Banner
--------------------------------------------------------------*/
#kymjo-cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #2c3e50; /* Dark, professional background */
    color: #ecf0f1;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
}
#kymjo-cookie-consent-banner.show {
    transform: translateY(0);
}
.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.cookie-consent-text {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.6;
    flex-grow: 1;
}
.cookie-consent-text a {
    color: #3498db; /* A clear blue for the link */
    text-decoration: underline;
}
.cookie-consent-text a:hover {
    color: #5dade2;
}
.cookie-consent-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.cookie-consent-actions button {
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    border: 1px solid transparent;
}
/* Responsive styles for the banner */
@media (max-width: 768px) {
    .cookie-consent-content {
        flex-direction: column;
        text-align: center;
    }
    .cookie-consent-actions {
        width: 100%;
        justify-content: center;
        margin-top: 15px;
    }
}
/* ^^^^^^ END ADDED BLOCK ^^^^^^ */


/* VVVVVV ADD THIS TO THE END OF style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> Blog Redesign - Single Post
--------------------------------------------------------------*/
.kymjo-article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}
.kymjo-article-main .entry-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 20px;
}
.kymjo-article-main .entry-title {
    font-size: 2.8em;
    line-height: 1.2;
    margin-bottom: 20px;
}
.entry-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}
.entry-meta .author-avatar img {
    border-radius: 50%;
}
.entry-meta .meta-text {
    display: flex;
    flex-direction: column;
}
.entry-meta .author-name {
    font-weight: 600;
    color: #212529;
}
.entry-meta .post-details {
    font-size: 0.9em;
    color: #6c757d;
}

.post-thumbnail-container {
    margin-bottom: 30px;
}
.post-thumbnail-container img {
    border-radius: 8px;
}

.entry-content {
    font-size: 1.1em;
    line-height: 1.8;
    color: #343a40;
}
.entry-content p {
    margin-bottom: 1.5em;
}
.entry-content h2 { margin-top: 2em; }
.entry-content h3 { margin-top: 1.8em; }

.entry-footer {
    margin-top: 30px;
    padding: 20px 0;
    border-top: 1px solid #e9ecef;
    font-size: 0.9em;
}
.entry-footer .cat-links, .entry-footer .tags-links {
    display: block;
    margin-bottom: 10px;
}

.author-bio {
    margin-top: 30px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    gap: 20px;
    align-items: center;
}
.author-bio .author-avatar img {
    border-radius: 50%;
}

.kymjo-sidebar .widget {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}
.kymjo-sidebar .widget-title {
    font-size: 1.2em;
    margin-bottom: 15px;
}
.widget_related_posts ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget_related_posts ul li {
    margin-bottom: 15px;
}
.widget_related_posts ul li a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}
.related-post-thumbnail img {
    border-radius: 4px;
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.related-post-title {
    font-weight: 500;
    color: #343a40;
    line-height: 1.4;
}
.related-post-title:hover {
    color: #0073aa;
}

/* Responsive layout with sidebar */
@media (min-width: 992px) {
    .kymjo-article-layout {
        grid-template-columns: 2.5fr 1fr;
    }
    .kymjo-article-sidebar {
        position: sticky;
        top: 40px;
        align-self: start;
    }
}

/* VVVVVV ADD THIS TO THE END OF style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> Blog Redesign - Index & Archive
--------------------------------------------------------------*/
.kymjo-blog-index, .kymjo-blog-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.kymjo-blog-index .page-header, .kymjo-blog-archive .page-header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 20px;
}

/* Featured Post */
.kymjo-featured-post {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 40px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.07);
}
.featured-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.featured-post-content {
    padding: 30px;
}
.featured-post-content .category-tag {
    display: inline-block;
    background: #0073aa;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 15px;
}
.featured-post-content .entry-title {
    font-size: 2.2em;
    margin: 0 0 15px 0;
}
.featured-post-content .entry-title a {
    text-decoration: none;
    color: #212529;
}
.featured-post-content .entry-excerpt {
    color: #495057;
    margin-bottom: 20px;
}
.featured-post-content .entry-meta {
    border-top: 1px solid #e9ecef;
    padding-top: 20px;
}

/* Post Grid */
.kymjo-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}
.kymjo-post-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kymjo-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.card-thumbnail a { display: block; }
.card-thumbnail img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.card-content { padding: 20px; }
.card-content .category-tag { font-size: 0.75em; margin-bottom: 10px; }
.card-content .entry-title { font-size: 1.3em; margin: 0 0 10px 0; line-height: 1.3; }
.card-content .entry-title a { text-decoration: none; color: #212529; }
.card-meta { font-size: 0.85em; color: #6c757d; }
.card-meta .post-date { margin-left: 10px; }

@media (min-width: 768px) {
    .kymjo-featured-post {
        grid-template-columns: 1fr 1fr;
    }
}


/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> Custom "Nothing Found" Page
--------------------------------------------------------------*/
.no-results.not-found {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e9ecef;
}
.no-results .page-title {
    margin-bottom: 15px;
}
.no-results .page-content p {
    font-size: 1.1em;
    color: #495057;
    margin-bottom: 25px;
}
.no-results .search-form {
    max-width: 400px;
    margin: 0 auto;
}



/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> Custom Search Results Page
--------------------------------------------------------------*/
.kymjo-search-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}
.kymjo-search-page .page-header {
    text-align: center;
    margin-bottom: 30px;
}
.search-results-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 992px) {
    .search-results-layout {
        grid-template-columns: 2.5fr 1fr;
    }
}

/* Style for individual search result items if needed */
.post-type-post.hentry {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e9ecef;
}




/* VVVVVV ADD THIS TO THE END OF YOUR style.css FILE VVVVVV */

/*--------------------------------------------------------------
>>> Blog Redesign - Custom Sidebar Widgets
--------------------------------------------------------------*/
.kymjo-sidebar .widget_search .search-form {
    display: flex;
}
.kymjo-sidebar .widget_search .search-field {
    width: 100%;
    border: 1px solid #ccc;
    padding: 8px 10px;
}
.kymjo-sidebar .widget_search .search-submit {
    background: #0073aa;
    color: white;
    border: none;
    padding: 0 15px;
}

.kymjo-sidebar .widget_recent_posts_custom ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.kymjo-sidebar .widget_recent_posts_custom ul li {
    margin-bottom: 15px;
}
.kymjo-sidebar .widget_recent_posts_custom ul li a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}



/* --- Custom Ad Styling for Different Locations --- */

/* Style for the ad when it's inside a page */
.page-ad-slot .kymjojobs-ad-wrapper {
    margin: 20px 0;
    border: 2px solid #0073aa; /* Example: Give it a blue border */
    padding: 5px;
}

/* Style for the ad when it's in the sidebar */
.sidebar-ad-slot .kymjojobs-ad-wrapper {
    margin-bottom: 25px;
    border: none; /* Example: No border in the sidebar */
}

/* Style for the ad when it's in the footer */
.footer-ad-slot .kymjojobs-ad-wrapper {
    margin-top: 30px;
    padding: 10px;
    background-color: #f8f9fa; /* Example: Give it a light grey background */
    border-radius: 8px;
}

/* You can even style the images inside differently */
.footer-ad-slot .kymjojobs-ad-wrapper img {
    border-radius: 4px; /* Example: Round the corners of only footer ads */
}


/*--------------------------------------------------------------
>>> Live AJAX Search Bar Styles
--------------------------------------------------------------*/
.kymjo-live-search-wrapper {
    position: relative;
    max-width: 700px; /* Adjust as needed */
    margin: 20px auto;
}
.live-search-bar {
    display: flex;
    width: 100%;
}
.live-search-input {
    flex-grow: 1;
    border: 2px solid #ced4da;
    font-size: 1.1em;
    padding: 15px 20px;
    border-radius: 50px 0 0 50px; /* Pill shape */
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.live-search-input:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2);
    z-index: 11;
    position: relative;
}
.live-search-button {
    border: 2px solid #0073aa;
    background-color: #0073aa;
    color: white;
    padding: 0 25px;
    cursor: pointer;
    border-radius: 0 50px 50px 0;
    font-size: 1.3em;
}

.live-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    z-index: 10;
    max-height: 400px;
    overflow-y: auto;
}

a.live-search-item,
.live-search-item.no-results {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
}
a.live-search-item:last-child {
    border-bottom: none;
}
a.live-search-item:hover {
    background-color: #f8f9fa;
}

.live-search-item-title {
    font-weight: 500;
}
.live-search-item-type {
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background-color: #6c757d; /* Muted grey for the tag */
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.live-search-item.no-results {
    justify-content: center;
    color: #6c757d;
    font-style: italic;
}



/*--------------------------------------------------------------
>>> User Messages Page (page-messages.php)
--------------------------------------------------------------*/
.page-template-page-messages .site-main {
    padding: 0;
    margin: 0;
}
.kymjo-messages-layout {
    display: flex;
    height: calc(100vh - 60px); /* Adjust 60px to your header's height */
    background: #f0f2f5;
    max-width: 1400px;
    margin: 0 auto;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

/* --- Left Pane: Sidebar --- */
.messages-sidebar {
    width: 340px;
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
}
.sidebar-header {
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
}
.sidebar-header h2 {
    margin: 0;
    font-size: 1.4em;
}
.message-thread-list {
    overflow-y: auto;
    flex-grow: 1;
}
.message-thread-item {
    display: flex;
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    color: inherit;
}
.message-thread-item:hover {
    background-color: #f8f9fa;
}
.message-thread-item.active {
    background-color: #e7f3ff;
    border-right: 3px solid #0073aa;
}
.thread-item-avatar {
    position: relative;
    flex-shrink: 0;
}
.initials-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #005a87;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: bold;
}
.unread-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background-color: #0073aa;
    border-radius: 50%;
    border: 2px solid #fff;
}
.thread-item-content {
    flex-grow: 1;
    overflow: hidden;
}
.thread-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.thread-item-sender {
    font-weight: bold;
    font-size: 1em;
}
.message-thread-item.unread .thread-item-sender {
    color: #000;
}
.thread-item-date {
    font-size: 0.8em;
    color: #666;
}
.thread-item-subject {
    margin: 0 0 4px 0;
    font-size: 0.95em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
}
.message-thread-item.unread .thread-item-subject {
    font-weight: bold;
    color: #333;
}
.thread-item-excerpt {
    margin: 0;
    font-size: 0.9em;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.no-messages {
    padding: 20px;
    text-align: center;
    color: #666;
}

/* --- Right Pane: Content Area --- */
.message-content-area {
    flex-grow: 1;
    background: #f0f2f5;
    display: flex;
    flex-direction: column;
}
.content-area-header {
    display: none; /* Hidden on desktop */
    padding: 10px;
    border-bottom: 1px solid #ddd;
    background: #fff;
}
.back-to-list-btn {
    background: none;
    border: none;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    color: #0073aa;
}
.message-full-content {
    display: none;
    padding: 30px 40px;
    flex-grow: 1;
    overflow-y: auto;
    background: #fff;
}
.message-full-content.active {
    display: block;
}
.message-full-subject {
    font-size: 1.8em;
    margin: 0 0 15px 0;
}
.message-full-meta {
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
    color: #555;
}
.message-full-body {
    line-height: 1.7;
    font-size: 1.05em;
}
.message-content-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
}
.message-content-empty .empty-icon {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.5;
}

/* --- Responsive for Mobile --- */
@media (max-width: 768px) {
    .kymjo-messages-layout {
        flex-direction: column;
        height: auto;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }
    .messages-sidebar {
        width: 100%;
        display: block; /* Initially show the list */
        border-right: none;
        height: auto;
    }
    .message-content-area {
        display: none; /* Initially hide the content */
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: #fff;
        z-index: 10;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }
    .message-content-area.is-visible {
        display: flex;
        transform: translateX(0);
    }
    .content-area-header {
        display: block; /* Show the header with the back button */
    }
    .message-full-content {
        padding: 20px;
    }
}


/*--------------------------------------------------------------
>>> Announcements / Notifications Page
--------------------------------------------------------------*/
.kymjo-announcements-page .site-main {
    background-color: #f0f2f5; /* Facebook-style light grey background */
    padding: 20px 0;
}
.kymjo-notifications-container {
    max-width: 850px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.notifications-header {
    padding: 16px;
    border-bottom: 1px solid #ddd;
}
.notifications-header h1 {
    margin: 0;
    font-size: 1.8em;
}
.notification-feed {
    padding: 8px 0;
}
.notification-item {
    display: flex;
    gap: 15px;
    padding: 12px 16px;
    align-items: flex-start;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item:hover {
    background-color: #f8f9fa;
}
.notification-item.is-unread {
    background-color: #e7f3ff; /* Light blue for unread */
}
.notification-icon .dashicons {
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0073aa;
    color: #fff;
}
.notification-content {
    flex-grow: 1;
}
.notification-text {
    margin: 0 0 4px 0;
    font-size: 1.05em;
    line-height: 1.5;
    color: #1c1e21;
}
.notification-body {
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    background: #f0f2f5;
    padding: 15px;
    border-radius: 8px;
    margin-top: 8px;
}
.notification-body p:last-child {
    margin-bottom: 0;
}
.notification-timestamp {
    font-size: 0.85em;
    font-weight: bold;
    color: #606770;
    margin-top: 8px;
    display: block;
}
.notification-item.is-unread .notification-timestamp {
    color: #0073aa; /* Blue timestamp for unread items */
}
.notification-status-dot {
    background-color: #0073aa;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    align-self: center; /* Vertically center the dot */
    flex-shrink: 0;
}
.no-notifications-found {
    padding: 40px 20px;
    text-align: center;
    color: #65676b;
}
.no-notifications-found .dashicons {
    font-size: 48px;
    margin-bottom: 15px;
    color: #bec3c9;
}


/*--------------------------------------------------------------
>>> Pro Chat System (page-chat.php)
--------------------------------------------------------------*/

/* Main page body and app container */
.page-template-page-chat .site-main {
    padding: 0; /* Remove theme padding */
}
.kymjo-chat-page-body {
    background-color: #e5ddd5; /* WhatsApp background pattern color */
    background-image: url('https://i.imgur.com/6Uv9KqP.png'); /* Subtle pattern */
}
#kymjojobs-pro-chat-app {
    width: 100%;
    max-width: 850px; /* Max width of the chat window on desktop */
    height: calc(100vh - 40px); /* Fill most of the viewport height */
    margin: 20px auto;
    background-color: #f0f2f5; /* Main app background */
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat Header */
.chat-header {
    background-color: #005e54; /* Dark WhatsApp green */
    color: white;
    padding: 10px 15px;
    font-weight: 500;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
}
.chat-header .avatar-stack { display: flex; }
.chat-header .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    color: #005e54;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-info .chat-title { font-size: 1.1em; display: block; }
.header-info .chat-status { font-size: 0.8em; opacity: 0.8; }

/* Messages Container */
.chat-messages-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px 8%; /* Padding on the sides */
    display: flex;
    flex-direction: column;
}
.security-notice {
    background-color: #fffbe2;
    color: #5f4c00;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85em;
    text-align: center;
    margin: 0 auto 15px auto;
    max-width: 90%;
}

/* Individual Messages */
.chat-message {
    display: flex;
    margin-bottom: 5px;
    max-width: 75%;
}
.message-bubble {
    padding: 8px 12px;
    border-radius: 8px;
    line-height: 1.4;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    position: relative;
}
.sender-name {
    font-size: 0.8em;
    font-weight: bold;
    color: #0073aa;
    margin-bottom: 4px;
}
.message-text {
    margin: 0;
    font-size: 0.95em;
    white-space: pre-wrap; /* Respects line breaks */
    word-wrap: break-word;
}
.message-timestamp {
    font-size: 0.7em;
    color: #667781;
    float: right;
    margin-left: 10px;
    margin-top: 5px;
}

/* Sent vs Received Styles */
.chat-message.sent {
    align-self: flex-end;
}
.chat-message.sent .message-bubble {
    background-color: #d9fdd3; /* WhatsApp sent green */
}
.chat-message.received {
    align-self: flex-start;
}
.chat-message.received .message-bubble {
    background-color: #ffffff;
}

/* Chat Input Footer */
.chat-footer {
    background-color: #f0f2f5;
    padding: 8px 12px;
    flex-shrink: 0;
    border-top: 1px solid #ddd;
}
.chat-footer form {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-footer input[type="text"] {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 1em;
    padding: 12px 18px;
    border-radius: 25px;
}
.chat-footer button {
    background-color: #00a884; /* WhatsApp send green */
    border: none;
    color: white;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.chat-footer button:hover {
    background-color: #008a6c;
}
.chat-footer button svg {
    width: 24px;
    height: 24px;
}


/*--------------------------------------------------------------
>>> Confirmation Page Styles (Check Email, etc.)
--------------------------------------------------------------*/
.kymjo-confirmation-container {
    max-width: 650px;
    margin: 60px auto;
    padding: 40px 50px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    border-top: 5px solid #0073aa;
}

.confirmation-icon {
    color: #0073aa;
    margin-bottom: 20px;
}
.confirmation-icon svg {
    width: 64px;
    height: 64px;
}

.confirmation-title {
    font-size: 2.2em;
    font-weight: 600;
    color: #212529;
    margin: 0 0 15px 0;
}

.confirmation-message {
    font-size: 1.1em;
    color: #495057;
    line-height: 1.7;
    margin-bottom: 40px;
}

.confirmation-troubleshoot {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
    text-align: left;
}
.confirmation-troubleshoot h3 {
    margin-top: 0;
    font-size: 1.2em;
}
.confirmation-troubleshoot ul {
    list-style-position: inside;
    padding-left: 0;
    margin: 10px 0 0 0;
    font-size: 0.95em;
    color: #495057;
}
.confirmation-troubleshoot ul li {
    margin-bottom: 8px;
}

.confirmation-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Re-using button styles you already have */
.confirmation-actions .kymjo-button-primary,
.confirmation-actions .kymjo-button-secondary {
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    border: 1px solid transparent;
}
.kymjo-button-primary { background-color: #0073aa; color: #fff; border-color: #0073aa; }
.kymjo-button-secondary { background-color: #6c757d; color: #fff; border-color: #6c757d; }


/*--------------------------------------------------------------
>>> KYMJOJOBS Affiliate Program Dashboard Styles
--------------------------------------------------------------*/

/* --- Main Page Container & Header --- */
.kymjo-affiliate-page-container {
    background-color: #f4f6f9; /* Matches your dashboard background */
    padding: 20px 15px; /* Padding for mobile */
}

.kymjo-affiliate-dashboard {
    max-width: 1100px;
    margin: 0 auto;
}

.affiliate-dashboard-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #dee2e6;
}

.affiliate-dashboard-header .dashboard-title {
    font-size: 2.2em;
    font-weight: 600;
    color: #2c3e50; /* Matches your sidebar for consistency */
    margin: 0 0 10px 0;
}

.affiliate-dashboard-header .dashboard-subtitle {
    font-size: 1.1em;
    color: #495057;
    margin: 0;
    max-width: 700px;
}

/* --- Stat Cards Section --- */
.affiliate-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cards on desktop */
    gap: 25px;
    margin-bottom: 40px;
}

.stat-card {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.stat-card .stat-card-icon {
    font-size: 2.5em;
    display: block;
    margin-bottom: 15px;
}

.stat-card .stat-card-title {
    font-size: 1em;
    font-weight: 500;
    color: #6c757d;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card .stat-card-value {
    font-size: 2em;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    line-height: 1.2;
}

/* Special styling for the cash value card */
.stat-card.highlighted {
    background-color: #00233b; /* Dark blue from your footer */
    color: #ffffff;
    border-color: #00233b;
}

.stat-card.highlighted .stat-card-title {
    color: #a8d8f0; /* Light blue from footer links */
}

.stat-card.highlighted .stat-card-value {
    color: #ffffff;
}

/* --- Referral Link & Withdrawal Section --- */
.affiliate-actions-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 40px;
}

.referral-link-box, .withdrawal-info-box {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
}

.affiliate-actions-section .section-title {
    font-size: 1.3em;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
}

.affiliate-actions-section .section-description {
    font-size: 0.95em;
    color: #495057;
    margin: 0 0 20px 0;
    line-height: 1.6;
}

.referral-link-input-group {
    display: flex;
}
.referral-link-input-group input[type="text"] {
    flex-grow: 1;
    padding: 10px 15px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 5px 0 0 5px;
    background-color: #f8f9fa;
    color: #495057;
    outline: none;
}
.referral-link-input-group button.kymjo-button { /* Re-using your button class */
    padding: 10px 20px;
    border-radius: 0 5px 5px 0;
    border: 1px solid #0073aa;
    background-color: #0073aa;
    color: white;
    cursor: pointer;
    font-weight: 500;
}

.copy-feedback {
    font-size: 0.85em;
    color: #28a745;
    font-weight: 500;
    margin-top: 10px;
    min-height: 1.2em;
}

.withdrawal-actions .kymjo-button-primary { /* Re-using your button class */
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    font-size: 1em;
}

/* --- Tabs & Data Tables --- */
.tabs-navigation {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 25px;
}
.tabs-navigation .tab-link {
    padding: 12px 25px;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1.1em;
    color: #6c757d;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* To make the active border sit on the main border */
}
.tabs-navigation .tab-link.active {
    color: #0073aa;
    font-weight: 600;
    border-bottom-color: #0073aa;
}

.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}

.affiliate-data-table {
    width: 100%;
    border-collapse: collapse;
}
.affiliate-data-table thead {
    display: none; /* Hide for mobile-first */
}
.affiliate-data-table tr {
    display: block;
    margin-bottom: 15px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}
.affiliate-data-table td {
    display: block;
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0;
}
.affiliate-data-table td:before {
    content: attr(data-label);
    font-weight: bold;
    color: #333;
    display: inline-block;
    width: 130px; /* Label width */
}
.affiliate-data-table tr td:last-child {
    border-bottom: none;
}
.affiliate-data-table .align-right { text-align: left; }
.affiliate-data-table .commission-positive {
    color: #28a745;
    font-weight: 500;
}

/* --- Responsive Adjustments --- */
@media (min-width: 768px) {
    .kymjo-affiliate-page-container {
        padding: 40px; /* More padding on larger screens */
    }

    /* Revert table to traditional layout on desktop */
    .affiliate-data-table thead {
        display: table-header-group;
    }
    .affiliate-data-table tr {
        display: table-row;
        border: none;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
    .affiliate-data-table tr:nth-child(even) {
        background: #fdfdfd;
    }
    .affiliate-data-table td {
        display: table-cell;
        padding: 12px 15px;
        border-bottom: 1px solid #e9ecef;
    }
    .affiliate-data-table td:before {
        display: none; /* Hide mobile labels */
    }
    .affiliate-data-table .align-right { text-align: right; }
}

@media (max-width: 991px) {
    .affiliate-stats-grid {
        grid-template-columns: 1fr; /* Stack stat cards */
    }
    .affiliate-actions-section {
        grid-template-columns: 1fr; /* Stack action boxes */
    }
}

/*--------------------------------------------------------------
>>> Professional "Advertise With Us" Page (V2)
--------------------------------------------------------------*/

/* --- 1. Main Page & Hero --- */
.kymjo-advert-page-wrapper {
    background-color: #f4f6f9;
}
.advert-hero-section {
    background: #00233b;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}
.advert-hero-section .hero-title {
    font-size: 2.8em;
    font-weight: 700;
    margin: 0 0 15px 0;
}
.advert-hero-section .hero-subtitle {
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto 30px auto;
    opacity: 0.9;
}
.hero-stats-bar {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    background: rgba(255,255,255,0.1);
    padding: 15px;
    border-radius: 8px;
    max-width: 900px;
    margin: 0 auto;
}
.hero-stats-bar .stat-item {
    font-size: 1em;
    font-weight: 500;
}
.hero-stats-bar .stat-item strong {
    font-size: 1.2em;
    margin-right: 8px;
}

/* --- 2. Form Section & Container --- */
.advert-form-section {
    padding: 50px 20px;
}
.kymjojobs-advert-form-container {
    max-width: 850px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.form-header { text-align: center; margin-bottom: 30px; }
.form-header h2 { font-size: 2em; margin-bottom: 5px; }
.form-header p { color: #495057; }

/* --- 3. Step Progress Bar --- */
.step-progress-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto 30px auto;
}
.step-progress-item {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
}
.step-progress-item.active {
    background: #0073aa;
    color: #fff;
}
.step-progress-item::after {
    content: attr(data-step-title);
    position: absolute;
    top: 120%;
    font-size: 0.8em;
    white-space: nowrap;
    color: #6c757d;
}
.step-progress-item.active::after {
    color: #0073aa;
    font-weight: bold;
}
.step-progress-connector {
    flex-grow: 1;
    height: 2px;
    background: #e9ecef;
}

/* --- 4. Form Steps & Fields --- */
.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn 0.5s ease; }
.form-step .step-title {
    font-size: 1.4em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
}
.form-subsection-title {
    font-size: 1.1em;
    font-weight: 500;
    margin: 20px 0 15px 0;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}
.form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

/* --- 5. Budget Cards --- */
.budget-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.budget-option-card {
    display: block;
    border: 2px solid #dee2e6;
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
}
.budget-option-card:hover { border-color: #0073aa; }
.budget-option-card input[type="radio"] { display: none; }
.budget-option-card.is-selected {
    border-color: #0073aa;
    background-color: #e7f3ff;
    box-shadow: 0 0 0 2px #0073aa;
}
.budget-option-card .badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #e74c3c;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 10px;
}
.budget-option-card .budget-title {
    display: block;
    font-weight: bold;
    font-size: 1.5em;
    color: #2c3e50;
    margin-bottom: 5px;
}
.budget-option-card .budget-title small { font-size: 0.6em; font-weight: 400; }
.budget-option-card .budget-desc {
    display: block;
    font-size: 0.9em;
    color: #495057;
    line-height: 1.5;
}

/* --- 6. Thank You Page --- */
.kymjo-advert-thanks-page {
    background: #f4f6f9;
    padding: 50px 20px;
    min-height: 80vh;
    display: flex;
    align-items: center;
}
.confirmation-box {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.confirmation-box .icon-wrapper {
    width: 64px;
    height: 64px;
    background: #28a745;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
}
.icon-wrapper svg { width: 36px; height: 36px; }
.confirmation-title { font-size: 2.5em; margin-bottom: 15px; }
.confirmation-message { font-size: 1.1em; color: #495057; line-height: 1.7; }
.next-steps {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e9ecef;
    text-align: left;
}
.next-steps h2 { text-align: center; }
.actions { margin-top: 30px; }


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .budget-options-grid { grid-template-columns: 1fr; }
    .kymjojobs-advert-form-container { padding: 25px 20px; }
}



/*--------------------------------------------------------------
>>> KYMJOJOBS AI Help Chat Page Styles
--------------------------------------------------------------*/

/* --- 1. Page-Level Setup --- */
.kymjo-ai-chat-page-area {
    background-color: #d1d7db; /* A neutral, slightly textured background */
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px); /* Adjust 80px based on your focus header/footer height */
}

/* --- 2. Main Chat Window --- */
#kymjojobs-ai-chat-window {
    width: 100%;
    max-width: 750px; /* Max width on desktop */
    height: 80vh; /* Takes up 80% of the viewport height */
    max-height: 800px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- 3. Chat Header --- */
.kymjojobs-chat-header {
    background-color: #0073aa; /* Your primary brand color */
    color: #ffffff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
}
.kymjojobs-chat-header .header-icon {
    font-size: 1.5em;
}
.kymjojobs-chat-header .header-title {
    font-size: 1.1em;
    font-weight: 600;
}

/* --- 4. Messages Area --- */
.kymjojobs-chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #e5ddd5; /* WhatsApp-style light pattern background */
    background-image: url('https://kymjojobs.com/wp-content/uploads/2025/06/kymjojobs-Ai-lets-chat_20250619_124257_0000.png');
}

/* --- 5. Individual Messages & Bubbles --- */
.kymjojobs-chat-message {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    max-width: 80%; /* Messages shouldn't be full-width */
}
.kymjojobs-chat-message .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ccc;
    color: white;
    font-weight: bold;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kymjojobs-chat-message .bubble {
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.5;
    word-wrap: break-word;
}

/* AI Messages (Left Aligned) */
.kymjojobs-chat-message.ai {
    align-self: flex-start;
}
.kymjojobs-chat-message.ai .avatar {
    background-color: #005a87; /* Darker blue for AI avatar */
}
.kymjojobs-chat-message.ai .bubble {
    background-color: #ffffff;
    color: #333;
    border-bottom-left-radius: 4px; /* Creates the "tail" on the bubble */
}

/* User Messages (Right Aligned) */
.kymjojobs-chat-message.user {
    align-self: flex-end;
    flex-direction: row-reverse; /* Puts avatar on the right */
}
.kymjojobs-chat-message.user .avatar {
    background-color: #128C7E; /* A different color for the user */
}
.kymjojobs-chat-message.user .bubble {
    background-color: #dcf8c6; /* Light green, similar to WhatsApp */
    color: #333;
    border-bottom-right-radius: 4px; /* Tail on the right */
}

/* Error Message Style */
.kymjojobs-chat-message.error .bubble {
    background-color: #f8d7da;
    color: #721c24;
}

/* --- 6. Typing Indicator Animation --- */
.kymjojobs-typing-indicator .bubble {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 15px 18px;
}
.kymjojobs-typing-indicator .dot {
    width: 8px;
    height: 8px;
    background-color: #8e8e93;
    border-radius: 50%;
    animation: blink 1.4s infinite both;
}
.kymjojobs-typing-indicator .dot:nth-child(2) {
    animation-delay: 0.2s;
}
.kymjojobs-typing-indicator .dot:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes blink {
    0% { opacity: 0.2; }
    20% { opacity: 1; }
    100% { opacity: 0.2; }
}

/* --- 7. Chat Footer & Input Form --- */
.kymjojobs-chat-footer {
    background-color: #f0f2f5;
    padding: 10px 15px;
    border-top: 1px solid #d1d7db;
    flex-shrink: 0;
}
#kymjojobs-chat-form {
    display: flex;
    align-items: center;
    gap: 10px;
}
#kymjojobs-chat-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 12px 20px;
    font-size: 1em;
    border-radius: 25px;
}
#kymjojobs-chat-form button {
    background-color: #0073aa;
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
#kymjojobs-chat-form button:hover {
    background-color: #005a87;
}

/* --- 8. Responsive Design for All Devices --- */
@media (max-width: 768px) {
    .kymjo-ai-chat-page-area {
        padding: 0; /* Remove padding for full-screen experience */
        min-height: 100vh;
    }
    #kymjojobs-ai-chat-window {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }
    .kymjojobs-chat-messages {
        padding: 10px;
    }
    .kymjojobs-chat-message {
        max-width: 85%;
    }
}
/* --- AI Chat Icon Size --- */
#kymjojobs-chat-form button img {
    width: 24px;
    height: 24px;
    display: block; /* Helps prevent extra space below the image */
}

/*--------------------------------------------------------------
>>> [COMPLETE & CORRECTED] Professional Contact Us Page (V2)
--------------------------------------------------------------*/

/* --- 1. Main Page Wrapper & Hero Section --- */
.kymjo-contact-page-wrapper {
    background-color: #f8f9fa;
    overflow-x: hidden; /* Prevents horizontal scroll from edge cases */
}

.contact-hero-section {
    background-color: #00233b;
    color: #ffffff;
    text-align: center;
    padding: 60px 20px;
}

.contact-hero-section .contact-hero-title {
    font-size: 2.8em;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.contact-hero-section .contact-hero-subtitle {
    font-size: 1.15em;
    line-height: 1.7;
    max-width: 750px;
    margin: 0 auto;
    opacity: 0.9;
}

/* --- 2. Main Two-Column Layout --- */
.contact-main-content-grid {
    display: grid;
    /* Two columns on desktop */
    grid-template-columns: 1fr 1.5fr;
    gap: 50px; /* Increased gap for better spacing */
    padding: 50px 20px; /* Added horizontal padding */
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 3. Left Panel: Contact Details --- */
.contact-details-panel .panel-title {
    font-size: 1.5em;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 25px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #0073aa;
    display: inline-block;
}

.contact-details-panel .contact-info-block,
.contact-details-panel .social-links-block {
    margin-bottom: 40px;
}

.contact-details-panel .info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.contact-details-panel .info-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: #e7f3ff;
    color: #0073aa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-details-panel .info-icon svg { width: 20px; height: 20px; }
.contact-details-panel .info-text { font-size: 1em; line-height: 1.6; word-break: break-word; }
.contact-details-panel .info-text strong { display: block; color: #343a40; margin-bottom: 2px; }
.contact-details-panel .info-text a,
.contact-details-panel .info-text span { color: #495057; text-decoration: none; }
.contact-details-panel .info-text a:hover { text-decoration: underline; }

.social-links-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.social-links-container .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #e9ecef;
    color: #495057;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s ease;
}

.social-links-container .social-icon svg { width: 22px; height: 22px; }
.social-links-container .social-icon:hover { color: #ffffff; transform: scale(1.1); }
.social-icon.facebook:hover { background-color: #1877F2; }
.social-icon.whatsapp:hover { background-color: #25D366; }
.social-icon.twitter-x:hover { background-color: #000000; }
.social-icon.linkedin:hover { background-color: #0A66C2; }

/* --- 4. Right Panel: Contact Form --- */
.contact-form-panel {
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}

.kymjojobs-form-group {
    margin-bottom: 25px;
}

.kymjojobs-form-group label {
    display: block;
    font-weight: 500;
    color: #495057;
    margin-bottom: 8px;
}

.kymjojobs-form-group input,
.kymjojobs-form-group textarea {
    box-sizing: border-box; /* Ensures padding is included in width */
    width: 100%;
}

.kymjojobs-form-group textarea {
    background: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 12px 15px;
    min-height: 120px;
    resize: vertical;
    font-size: 1em;
    font-family: inherit;
}

.kymjojobs-form-group-icon .input-with-icon {
    position: relative;
}

.kymjojobs-form-group-icon .input-with-icon svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    width: 20px;
    height: 20px;
    transition: color 0.2s ease;
}

.kymjojobs-form-group-icon .input-with-icon input {
    padding: 12px 15px 12px 50px; /* Make space for the icon */
    background: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1em;
}

.kymjojobs-form-group-icon .input-with-icon input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

.kymjojobs-form-group-icon .input-with-icon input:focus + svg {
    color: #0073aa;
}

/* --- 5. Map & FAQ Sections --- */
.contact-map-section,
.contact-faq-section {
    padding: 50px 20px;
}

.section-heading.centered-heading {
    text-align: center;
    font-size: 2.2em;
    margin: 0 auto 30px auto;
    max-width: 1200px;
}

.google-map-embed-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    line-height: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.google-map-embed-wrapper iframe {
    border: 0;
    width: 100%;
    height: 400px;
    display: block;
}

.faq-accordion {
    max-width: 850px;
    margin: 0 auto;
    border-top: 1px solid #dee2e6;
}

.faq-item {
    border-bottom: 1px solid #dee2e6;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 20px 0;
    font-size: 1.15em;
    font-weight: 500;
    color: #343a40;
    cursor: pointer;
    background: none;
    border: none;
}

.faq-question:hover span {
    color: #0073aa;
}

.faq-icon {
    font-size: 1.5em;
    font-weight: bold;
    color: #0073aa;
    transition: transform 0.3s ease;
    line-height: 1;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer p { padding: 0 0 20px 0; font-size: 1em; line-height: 1.7; color: #495057; }


/* --- 6. Responsive Adjustments --- */
/* This is the key fix for mobile horizontal scroll */
@media (max-width: 991px) {
    .contact-main-content-grid {
        /* On mobile, stack to a single column */
        grid-template-columns: 1fr;
    }

    .contact-details-panel {
        order: 2; /* Show contact details after the form on mobile */
        text-align: center;
    }

    .contact-details-panel .panel-title {
        display: inline-block;
    }
    
    .contact-details-panel .info-item, 
    .social-links-container {
        justify-content: center;
    }

    .contact-form-panel {
        order: 1; /* Show form first */
    }
}

@media (max-width: 768px) {
    .contact-hero-section .contact-hero-title {
        font-size: 2.2em;
    }
    .contact-form-panel {
        padding: 25px 20px;
    }
}
/*--------------------------------------------------------------
>>> [COMPLETE] Hire a Worker Page (V2 - Multi-Step)
--------------------------------------------------------------*/

/* --- 1. Main Page Wrapper --- */
.kymjo-hire-page-wrapper {
    background-color: #f8f9fa; /* A very light, clean background */
}

/* --- 2. Hero Section --- */
.hire-hero-section {
    background-color: #ffffff;
    text-align: center;
    padding: 60px 20px;
    border-bottom: 1px solid #e9ecef;
}
.hire-hero-section .container {
    max-width: 800px;
    margin: 0 auto;
}
.hire-hero-section .hero-title {
    font-size: 2.8em;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
    margin: 0 0 20px 0;
}
.hire-hero-section .hero-subtitle {
    font-size: 1.2em;
    color: #495057;
    line-height: 1.7;
    margin: 0 auto 30px auto;
}
.hire-hero-section .hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
.hire-hero-section .stat-item {
    text-align: center;
}
.hire-hero-section .stat-number {
    display: block;
    font-size: 2em;
    font-weight: 700;
    color: #0073aa;
}
.hire-hero-section .stat-label {
    font-size: 0.9em;
    color: #6c757d;
    font-weight: 500;
}

/* --- 3. Trust Badges Section --- */
.trust-badges-section {
    background-color: #ffffff;
    padding: 20px;
}
.trust-badges-section .container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}
.trust-badges-section .badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
    font-weight: 500;
    color: #495057;
}
.trust-badges-section .badge svg {
    width: 22px;
    height: 22px;
    color: #0073aa;
    flex-shrink: 0;
}

/* --- 4. "How It Works" Section --- */
.how-it-works-section {
    padding: 50px 20px;
}
.section-title-centered {
    text-align: center;
    font-size: 2.2em;
    font-weight: 600;
    color: #343a40;
    margin: 0 auto 40px auto;
}
.kymjo-process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}
.process-step {
    text-align: center;
    padding: 20px;
}
.step-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0073aa;
    color: #ffffff;
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    border: 3px solid #e3f2fd;
}
.step-title {
    font-size: 1.3em;
    color: #343a40;
    margin: 0 0 10px 0;
}
.step-description {
    font-size: 1em;
    color: #495057;
    line-height: 1.6;
    margin: 0;
}

/* --- 5. Improved Testimonial Section --- */
.testimonial-section-v2 {
    padding: 50px 20px;
    background-color: #00233b; /* Dark blue background */
}
.testimonial-card-v4 {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
    position: relative;
    padding: 20px;
}
.testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    margin: 0 auto 20px auto;
    display: block;
}
.testimonial-card-v4 blockquote {
    font-size: 1.25em;
    font-style: italic;
    line-height: 1.7;
    margin: 0 0 15px 0;
    opacity: 0.95;
    border: none;
    padding: 0;
}
.testimonial-card-v4 cite {
    font-weight: 600;
    font-style: normal;
    opacity: 0.9;
}

/* --- 6. Main Form Container & Multi-Step Form --- */
.hire-form-container {
    padding: 50px 20px;
}
.hire-form-container .container {
    max-width: 850px;
    margin: 0 auto;
    background-color: #ffffff; /* Changed to white for a cleaner look */
    padding: 40px 50px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
}
.hire-form-container .form-title {
    text-align: center;
    font-size: 2em;
    font-weight: 600;
    color: #343a40;
    margin: 0 0 15px 0;
}
.kymjojobs-professional-form {
    position: relative;
}
.form-step {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}
.form-step.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    margin: 0 auto 30px auto;
    overflow: hidden;
}
.step-progress {
    width: 0%;
    height: 100%;
    background-color: #0073aa;
    border-radius: 4px;
    transition: width 0.4s ease-in-out;
}
.form-step .step-title {
    font-size: 1.2em;
    font-weight: 500;
    color: #495057;
    margin-bottom: 20px;
    text-align: center;
}
.form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}
.form-navigation button,
.form-navigation .kymjo-button-primary {
    padding: 10px 25px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-size: 1em;
}
.form-navigation .prev-step {
    background-color: transparent;
    color: #495057;
    border: 1px solid #ced4da;
}
.form-navigation .prev-step:hover {
    background-color: #f8f9fa;
}

.hire-form-container .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.hire-form-container .kymjojobs-form-group { margin-bottom: 20px; }
.hire-form-container .kymjojobs-form-group label { font-weight: 500; color: #495057; }
.hire-form-container .kymjojobs-form-group input,
.hire-form-container .kymjojobs-form-group select,
.hire-form-container .kymjojobs-form-group textarea {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    width: 100%;
    padding: 12px 15px;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
}

.review-step-summary {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}
#review-summary-content .review-item {
    padding: 10px 0;
    border-bottom: 1px dashed #ced4da;
}
#review-summary-content .review-item:last-child { border-bottom: none; }
#review-summary-content .review-label { font-weight: bold; color: #343a40; display: block; margin-bottom: 4px; }
#review-summary-content .review-value { color: #495057; white-space: pre-wrap; word-break: break-word; }
#review-summary-content .review-value.review-image { max-width: 100px; height: auto; border-radius: 4px; margin-top: 5px; }

/* Replace with this improved version... */
.agreement-box {
    display: flex;
    align-items: center; /* This is the key change for vertical alignment */
    gap: 10px;
    margin-top: 20px;
    background-color: #f8f9fa; /* A slightly different background to stand out */
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #e9ecef;
}
.agreement-box input[type="checkbox"] {
    /* We no longer need margin-top */
    flex-shrink: 0; /* Prevents checkbox from shrinking */
    width: 18px;   /* Optional: set a consistent size */
    height: 18px;  /* Optional: set a consistent size */
}
.agreement-box label {
    margin-bottom: 0; /* Remove default margin from label */
    font-size: 0.9em;
    color: #495057;
}
.agreement-box label a {
    color: #0073aa;
    text-decoration: underline;
}
.agreement-box label a:hover {
    color: #005a87;
}

/* --- 7. Enhanced Success/Status Message --- */
.form-status-notice.success {
    padding: 0;
    background: transparent;
    border: none;
}
.hire-success-message {
    text-align: center;
    padding: 30px;
}
.hire-success-message .success-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #28a745;
    color: #fff;
    font-size: 2.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    line-height: 1;
}
.hire-success-message h3 { font-size: 1.8em; color: #343a40; margin: 0 0 10px 0; }
.hire-success-message p { font-size: 1.1em; color: #495057; margin-bottom: 25px; }


/* --- 8. Value Propositions Section --- */
.value-props-section {
    padding: 50px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}
.value-props-section .container {
    max-width: 1000px;
    margin: 0 auto;
}
.value-props-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.prop-card {
    text-align: center;
    padding: 25px;
}
.prop-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.3em;
    color: #343a40;
    margin: 0 0 10px 0;
}
.prop-card h3 svg {
    width: 24px;
    height: 24px;
    color: #0073aa;
    flex-shrink: 0;
}
.prop-card p {
    font-size: 1em;
    line-height: 1.6;
    color: #495057;
    margin: 0;
}

/* --- 9. Responsive Design --- */
@media (max-width: 768px) {
    .hire-hero-section .hero-title { font-size: 2.2em; }
    .hire-hero-section .hero-stats { flex-direction: column; gap: 20px; }
    .hire-form-container .container { padding: 30px 20px; }
    .hire-form-container .form-grid { grid-template-columns: 1fr; }
    .value-props-grid { grid-template-columns: 1fr; }
}
.kymjo-button-primary.full-width.loading {
    position: relative;
    color: transparent !important; /* Hide the button text */
    cursor: wait;
}

.kymjo-button-primary.full-width.loading::after {
    content: "";
    position: absolute;
    left: calc(50% - 12px);
    top: calc(50% - 12px);
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    border-top-color: #fff;
    animation: kymjojobs_spin 0.8s linear infinite;
}

/* you should already have this keyframe animation from your login form styles */
@keyframes kymjojobs_spin {
    to { transform: rotate(360deg); }
}


/*--------------------------------------------------------------
>>> Professional "Become an Instructor" Page
--------------------------------------------------------------*/

/* --- 1. Page Wrapper & Main Sections --- */
.kymjo-instructor-page-wrapper {
    background-color: #f8f9fa;
}
.instructor-hero-section, .why-teach-section, .instructor-form-section {
    padding: 60px 20px;
}
.section-title {
    text-align: center;
    font-size: 2.4em;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 auto 15px auto;
}
.section-subtitle {
    text-align: center;
    font-size: 1.1em;
    color: #495057;
    max-width: 700px;
    margin: 0 auto 40px auto;
    line-height: 1.7;
}

/* --- 2. Hero Section --- */
.instructor-hero-section {
    background-color: #00233b;
    color: #ffffff;
    text-align: center;
}
.instructor-hero-section .hero-title {
    font-size: 3em;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px 0;
}
.instructor-hero-section .hero-subtitle {
    font-size: 1.2em;
    opacity: 0.9;
    max-width: 800px;
}
.instructor-hero-section .hero-cta {
    margin-top: 20px;
    padding: 14px 35px;
    font-size: 1.1em;
}

/* --- 3. "Why Teach?" Benefits Section --- */
.why-teach-section {
    background-color: #ffffff;
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}
.benefit-card {
    text-align: center;
    padding: 20px;
}
.benefit-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e7f3ff;
    color: #0073aa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}
.benefit-icon svg { width: 30px; height: 30px; }
.benefit-title {
    font-size: 1.4em;
    color: #343a40;
    margin: 0 0 10px 0;
}
.benefit-card p {
    font-size: 1em;
    color: #495057;
    line-height: 1.6;
}

/* --- 4. Multi-Step Form Container --- */
.kymjojobs-multistep-form-container {
    max-width: 850px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.step-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    margin-bottom: 30px;
    overflow: hidden;
}
.step-progress {
    width: 33.33%;
    height: 100%;
    background-color: #0073aa;
    border-radius: 4px;
    transition: width 0.4s ease-in-out;
}
.form-step {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}
.form-step.active {
    display: block;
}
.form-step .step-title {
    font-size: 1.3em;
    font-weight: 500;
    color: #495057;
    margin-bottom: 25px;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}
.form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}
.form-navigation button, .form-navigation .kymjo-button-primary, .form-navigation .kymjo-button-secondary {
    padding: 12px 30px;
    font-size: 1em;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid transparent;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}
.kymjojobs-form-group, .file-upload-group {
    margin-bottom: 25px;
}
.kymjojobs-form-group textarea, .kymjojobs-form-group input[type="text"], .kymjojobs-form-group input[type="email"], .kymjojobs-form-group input[type="tel"], .kymjojobs-form-group input[type="url"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1em;
    background: #f8f9fa;
}
.file-upload-group input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #f8f9fa;
}
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kymjojobs-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
}
.review-step-summary {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    margin-bottom: 20px;
}
.review-step-summary p { margin-top: 0; }
.agreement-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
}
.agreement-box input[type="checkbox"] { flex-shrink: 0; }
.agreement-box label { margin: 0; }
.agreement-box label a { color: #0073aa; }

/* --- Success Message --- */
.instructor-success-message { text-align: center; padding: 30px; }
.instructor-success-message .success-icon { width: 60px; height: 60px; line-height: 60px; border-radius: 50%; background-color: #28a745; color: #fff; font-size: 2.5em; font-weight: bold; margin: 0 auto 20px auto; }
.instructor-success-message h3 { font-size: 1.8em; }
.instructor-success-message p { font-size: 1.1em; }


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .instructor-hero-section .hero-title { font-size: 2.2em; }
    .form-grid { grid-template-columns: 1fr; }
    .kymjojobs-multistep-form-container { padding: 25px 20px; }
}


/*--------------------------------------------------------------
>>> Professional Instructor Welcome/Thank You Page
--------------------------------------------------------------*/

/* --- 1. Main Page & Section Structure --- */
.kymjo-instructor-welcome-page {
    background-color: #f4f6f9; /* A light, clean background */
}
.kymjo-instructor-welcome-page section {
    padding: 60px 20px;
    border-bottom: 1px solid #e9ecef;
}
.kymjo-instructor-welcome-page section:last-child {
    border-bottom: none;
}
.kymjo-instructor-welcome-page .container {
    max-width: 900px;
    margin: 0 auto;
}
.kymjo-instructor-welcome-page .section-title {
    text-align: center;
    font-size: 2.2em;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 auto 30px auto;
}
.kymjo-instructor-welcome-page .section-text {
    text-align: center;
    font-size: 1.1em;
    color: #495057;
    max-width: 700px;
    margin: 0 auto 30px auto;
    line-height: 1.7;
}

/* --- 2. Hero Section --- */
.welcome-hero-section {
    text-align: center;
    background-color: #ffffff;
}
.welcome-hero-section .success-icon {
    width: 72px;
    height: 72px;
    line-height: 72px;
    border-radius: 50%;
    background-color: #28a745;
    color: #fff;
    font-size: 3em;
    font-weight: bold;
    margin: 0 auto 25px auto;
}
.welcome-hero-section .hero-title {
    font-size: 2.8em;
    font-weight: 700;
    color: #343a40;
    margin-bottom: 15px;
}
.welcome-hero-section .hero-subtitle {
    font-size: 1.2em;
    color: #495057;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- 3. What's Next Section --- */
.whats-next-section {
    background-color: #e7f3ff; /* Light, reassuring blue */
    text-align: center;
}
.whats-next-section .section-title {
    color: #005a87;
}

/* --- 4. Opportunity/Benefits Section --- */
.opportunity-section {
    background-color: #ffffff;
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 20px;
}
.benefit-card {
    text-align: center;
}
.benefit-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background-color: #e7f3ff;
    color: #0073aa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}
.benefit-icon svg { width: 28px; height: 28px; }
.benefit-title {
    font-size: 1.3em;
    color: #343a40;
    margin: 0 0 10px 0;
}
.benefit-card p {
    font-size: 1em;
    color: #495057;
    line-height: 1.6;
}

/* --- 5. Partnership Section --- */
.partnership-section {
    background-color: #f8f9fa;
}
.policy-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}
.policy-item h4 {
    font-size: 1.2em;
    color: #343a40;
    margin: 0 0 10px 0;
}
.policy-item p {
    line-height: 1.7;
    color: #495057;
    margin: 0;
}

/* --- 6. Social Share Section --- */
.social-share-section {
    background-color: #ffffff;
    color: #ffffff;
}
.social-share-section .section-title {
    color: #ff5722;
}
.social-share-section .section-text {
    color: #000000;
    opacity: 0.9;
}
.share-buttons-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}
.share-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.share-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
.share-button svg { width: 22px; height: 22px; }
.share-button.facebook { background-color: #1877F2; }
.share-button.twitter-x { background-color: #1DA1F2; } /* Using traditional Twitter blue */
.share-button.whatsapp { background-color: #25D366; }

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .kymjo-instructor-welcome-page .hero-title { font-size: 2.2em; }
    .kymjo-instructor-welcome-page .section-title { font-size: 1.8em; }
    .policy-highlights { grid-template-columns: 1fr; }
}

/*--------------------------------------------------------------
>>> Professional Withdrawal Pages (Hub & Success)
--------------------------------------------------------------*/
.kymjo-withdraw-page-wrapper, .kymjo-withdraw-success-page { background-color: #f4f6f9; padding: 50px 20px; }
.kymjo-withdraw-page-wrapper .container, .kymjo-withdraw-success-page .container { max-width: 800px; margin: 0 auto; }
.withdraw-page-header { text-align: center; margin-bottom: 40px; }
.withdraw-page-header h1 { font-size: 2.5em; margin-bottom: 10px; }
.withdraw-page-header p { font-size: 1.2em; color: #495057; }
.info-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 40px; }
.info-card { background: #fff; padding: 20px; border-radius: 8px; text-align: center; border: 1px solid #e9ecef; }
.info-card.main-balance { background-color: #0073aa; color: #fff; }
.info-card .card-label { display: block; font-size: 0.9em; color: #6c757d; font-weight: 500; margin-bottom: 5px; }
.info-card.main-balance .card-label { color: #e0f2fe; }
.info-card .card-value { font-size: 1.8em; font-weight: 700; color: #2c3e50; }
.info-card.main-balance .card-value { color: #fff; }
.withdraw-form-container { background: #fff; padding: 30px 40px; border-radius: 8px; border: 1px solid #e9ecef; }
.withdraw-form-container .form-section { border: none; padding: 0; margin: 0 0 25px 0; }
.withdraw-form-container legend { font-size: 1.3em; font-weight: 600; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #e9ecef; }
.withdraw-notice-box { padding: 20px 25px; border-radius: 8px; border: 1px solid; text-align: center; }
.withdraw-notice-box.insufficient_funds, .withdraw-notice-box.pending_request { background-color: #fff3cd; color: #856404; border-color: #ffeeba; }
.withdraw-notice-box h3 { margin-top: 0; }
.kymjo-withdraw-success-page .confirmation-box, .kymjo-withdraw-success-page .next-steps, .kymjo-withdraw-success-page .actions { /* Reusing styles from advert-thanks */ }

/*--------------------------------------------------------------
>>> [V2] Professional Ad Inserter Styles
--------------------------------------------------------------*/

/* Main ad container. The alignment rules are still valid. */
.kymjojobs-ad-wrapper {
    display: block;
    margin: 15px 0;
    line-height: 1; /* Prevents extra space under the image */
    box-sizing: border-box;
}
.kymjojobs-ad-align-left { margin-left: 0; margin-right: auto; text-align: left; }
.kymjojobs-ad-align-center { margin-left: auto; margin-right: auto; text-align: center; }
.kymjojobs-ad-align-right { margin-right: 0; margin-left: auto; text-align: right; }

/* The link (<a>) tag is now our main sizing container */
.kymjojobs-ad-wrapper a {
    display: inline-block; /* Allows centering and respects dimensions */
    overflow: hidden; /* This is crucial: it will crop anything outside the defined size */
    background-color: #f0f2f5; /* A light placeholder background */
    border-radius: 4px; /* Optional: adds nice rounded corners */
}

/* The image itself is now told to fill its container */
.kymjojobs-ad-wrapper a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the magic! Fills the space, maintains aspect ratio, and crops if needed. */
    transition: transform 0.3s ease;
}
.kymjojobs-ad-wrapper a:hover img {
    transform: scale(1.05); /* Adds a subtle zoom effect on hover */
}


/* --- Defining the Exact Ad Slot Sizes --- */

.kymjojobs-ad-size-full a {
    max-width: 100%; /* Allows it to be responsive */
}

.kymjojobs-ad-size-leaderboard a {
    width: 728px;
    height: 90px;
    aspect-ratio: 728 / 90;
    max-width: 100%; /* Ensures it shrinks on mobile */
}

.kymjojobs-ad-size-medium_rectangle a {
    width: 300px;
    height: 250px;
    aspect-ratio: 300 / 250;
    max-width: 100%;
}

.kymjojobs-ad-size-large_skyscraper a {
    width: 300px;
    height: 600px;
    aspect-ratio: 300 / 600;
    max-width: 100%;
}

.kymjojobs-ad-size-mobile_banner a {
    width: 320px;
    height: 50px;
    aspect-ratio: 320 / 50;
    max-width: 100%;
}

/* --- Ad Rotator Styles (Unchanged) --- */
.kymjojobs-ad-rotator-wrapper { position: relative; min-height: 50px; }
.kymjojobs-ad-rotator-wrapper .rotator-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}
.kymjojobs-ad-rotator-wrapper .rotator-item.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* --- Professional Subscribe Form Enhancements (Corrected) --- */

/* 1. Honeypot field for bot protection */
.kymjojobs-hp-field {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

/* 2. Message area for AJAX responses */
.kymjojobs-subscribe-message {
    font-size: 0.9em;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    display: none;
    text-align: center;
}
.kymjojobs-subscribe-message.success {
    display: block;
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}
.kymjojobs-subscribe-message.error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* 3. Loading spinner for the submit button */
.kymjojobs-subscribe-submit-button {
    position: relative;
    transition: all 0.2s ease;
}
.kymjojobs-subscribe-submit-button .button-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kymjojobs_spin 0.8s linear infinite;
}

/* CORRECTED: This now targets the .loading class */
.kymjojobs-subscribe-submit-button.loading .button-text {
    visibility: hidden; /* Hide text when loading */
}
.kymjojobs-subscribe-submit-button.loading .button-spinner {
    display: block; /* Show the spinner */
}

/*--------------------------------------------------------------
>>> "Speak with Instructor" Page Styles
--------------------------------------------------------------*/

/*
 * NOTE: This page reuses the main classes like .kymjo-form-page-container,
 * .kymjo-form-wrapper, and .kymjojobs-professional-form from your existing stylesheet.
 * The rules below are specific enhancements for this page.
 */

/* Style for the non-editable "Your Name" and "Your Email" fields */
.kymjojobs-professional-form input[readonly] {
    background-color: #e9ecef; /* Light grey to indicate it's not editable */
    color: #495057;           /* Darker grey text for good readability */
    cursor: not-allowed;       /* Show a 'not-allowed' cursor on hover */
    border-color: #ced4da;
}

/* Style for the notice boxes (e.g., "Please Login") */
.kymjo-form-wrapper .form-status-notice.notice {
    background-color: #fff3cd; /* A soft yellow for informational notices */
    border-left: 5px solid #ffc107; /* Amber accent color */
    text-align: center;
    padding: 25px 30px;
    border-radius: 8px;
}

.kymjo-form-wrapper .form-status-notice strong {
    font-size: 1.3em;
    display: block;
    margin-bottom: 10px;
    color: #856404;
}

.kymjo-form-wrapper .form-status-notice p {
    font-size: 1.1em;
    color: #856404;
    line-height: 1.6;
    margin: 0;
}


/*--------------------------------------------------------------
>>> Floating AI Chat Pop-up Widget
--------------------------------------------------------------*/
.kymjo-ai-chat-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* Initially hidden off-screen */
    transform: translateX(calc(100% + 40px));
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth slide animation */
}

/* The class that JavaScript will add to show the widget */
.kymjo-ai-chat-popup.visible {
    transform: translateX(0);
}

/* The floating "Hi, how can i help?" message */
.popup-speech-bubble {
    background: #ffffff;
    color: #333;
    padding: 12px 20px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 1em;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: relative;
    border: 1px solid #eee;
}

/* Creates the little triangle pointer for the speech bubble */
.popup-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 15px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #ffffff;
    border-bottom: 0;
    margin-bottom: -10px;
}

/* The "Chat with AI" button */
.popup-chat-button {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0073aa; /* Your primary button color */
    color: #ffffff !important; /* Important to override default link styles */
    padding: 12px 20px;
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(0, 86, 135, 0.3);
    transition: transform 0.2s ease;
}

.popup-chat-button:hover {
    transform: translateY(-2px);
}

.popup-chat-button .chat-icon {
    font-size: 1.5em;
    line-height: 1;
}

/* On smaller mobile screens, bring it in from the edge a bit */
@media (max-width: 480px) {
    .kymjo-ai-chat-popup {
        right: 10px;
        bottom: 10px;
    }
}

/*--------------------------------------------------------------
>>> [V2] One-Time Welcome Notification Card
--------------------------------------------------------------*/
#kymjojobs-welcome-popup-overlay {
    /* This container no longer has a dark background. It's just a positioning wrapper. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99998;
    padding: 20px;
    display: flex;
    /* Aligns the card to the bottom right corner */
    align-items: flex-end;
    justify-content: flex-end;
    /* This makes the overlay non-interactive, so you can click through it */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#kymjojobs-welcome-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

#kymjojobs-welcome-popup {
    background-color: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 420px; /* Compact card width */
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    border: 1px solid #e9ecef;
    /* Allows clicks on the card itself */
    pointer-events: auto;
    /* Animation: slide in from the bottom */
    transform: translateY(calc(100% + 30px));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

#kymjojobs-welcome-popup-overlay.visible #kymjojobs-welcome-popup {
    transform: translateY(0);
}

.popup-header {
    background-color: #f8f9fa; /* Lighter header */
    color: #2c3e50;
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.popup-header .popup-icon {
    font-size: 2.2em;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
}
.popup-header h2 {
    margin: 0 0 4px 0;
    font-size: 1.5em; /* Slightly smaller */
    font-weight: 600;
}
.popup-header p {
    margin: 0;
    font-size: 1em;
    color: #495057;
}

.popup-reward-card {
    /* Removed the card-within-a-card design for a cleaner look */
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
}

.popup-reward-card .reward-text {
    font-size: 0.9em;
    color: #495057;
    font-weight: 500;
}
.popup-reward-card .reward-value {
    font-size: 1.8em; /* Slightly smaller for compact view */
    font-weight: 700;
    color: #28a745;
    margin: 2px 0;
}
.popup-reward-card .reward-subtext {
    font-size: 0.85em;
    color: #6c757d;
}

.popup-guidance {
    padding: 20px;
    background-color: #f8f9fa;
}
.popup-guidance h4 {
    font-size: 1em;
    font-weight: 600;
    color: #495057;
    margin: 0 0 15px 0;
}

.guidance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.guidance-card {
    background: #ffffff;
    padding: 12px 10px; /* More compact */
    border-radius: 8px;
    border: 1px solid #dee2e6;
    text-decoration: none;
    color: #343a40;
    font-weight: 500;
    font-size: 0.85em; /* More compact */
    display: flex;
    align-items: center; /* Horizontally align icon and text */
    justify-content: flex-start;
    gap: 10px;
    transition: all 0.2s ease;
}
.guidance-card:hover {
    transform: translateY(0); /* Remove lift on hover for this design */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    border-color: #0073aa;
    color: #0073aa;
}
.guidance-card .guidance-icon {
    width: 32px; /* Smaller icon container */
    height: 32px;
    background: #e7f3ff;
    color: #0073aa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.guidance-card .guidance-icon svg {
    width: 18px; /* Smaller icon */
    height: 18px;
}

.popup-footer {
    background-color: #ffffff;
    padding: 20px;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 12px 12px;
}
.popup-footer p {
    font-size: 0.8em; /* Smaller text */
    color: #6c757d;
    line-height: 1.5;
    margin: 0 0 15px 0;
}
.popup-dismiss-btn {
    background-color: #0073aa; /* Primary color for main action */
    color: #ffffff;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
}
.popup-dismiss-btn:hover {
    background-color: #005a87;
}

/* Responsive: On smaller screens, make the card full-width at the bottom */
@media (max-width: 480px) {
    #kymjojobs-welcome-popup-overlay {
        padding: 0;
        align-items: flex-end;
        justify-content: center;
    }
    #kymjojobs-welcome-popup {
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        transform: translateY(100%); /* Start fully below screen */
    }
}

/*--------------------------------------------------------------
>>> AdSense Ad Slot Styling
--------------------------------------------------------------*/
.course-body__ad-slot {
    display: block;      /* Ensure it's treated as a block */
    width: 100%;         /* Make it take the full width of its parent column */
    min-height: 150px;   /* IMPORTANT: Give it a minimum height so it never collapses */
    margin: 30px 0;      /* Add some space above and below the ad */
    text-align: center;  /* Center the ad within the slot */
}


/*
--------------------------------------------------------------
>>> Custom Registration Page Landing Footer
--------------------------------------------------------------
*/
.registration-landing-footer {
    width: 100%;
}

.reg-footer-benefits {
    background-color: #ffffff;
    padding: 60px 20px;
    border-top: 1px solid #e9ecef;
}

.reg-footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
}

.benefit-item .benefit-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #e7f3ff;
    color: #0073aa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.benefit-item .benefit-icon svg {
    width: 24px;
    height: 24px;
}

.benefit-item .benefit-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 10px 0;
}

.benefit-item .benefit-text {
    font-size: 0.95em;
    color: #495057;
    line-height: 1.6;
    margin: 0;
}

.reg-footer-trust-badges {
    text-align: center;
    margin-top: 50px;
    font-size: 0.9em;
    color: #6c757d;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.reg-footer-cta {
    background-color: #005a87; /* A strong, dark blue */
    padding: 20px;
}

.reg-footer-cta-button {
    display: block;
    width: 100%;
    max-width: 400px; /* Limit button width on large screens */
    margin: 0 auto;
    padding: 15px 20px;
    background-color: #0073aa;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

.reg-footer-cta-button:hover {
    background-color: #008ae6; /* A slightly lighter, brighter blue on hover */
}
/*
--------------------------------------------------------------
>>> Mobile Fix for Registration Page Footer (V3 - Final Button Fix)
--------------------------------------------------------------
*/
@media (max-width: 768px) {
    /* --- Fix for the Benefits Section --- */
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .reg-footer-benefits {
        padding: 40px 20px;
    }

    .benefit-item .benefit-title {
        font-size: 1.1em;
    }

    /* --- Fix for the "Post a Job" Container Bar --- */
    .reg-footer-cta {
        /* This rule centers the button inside the blue bar */
        text-align: center;
        padding: 20px; /* A little more padding for a better look */
    }

    /* --- THIS IS THE KEY FIX FOR THE BUTTON ITSELF --- */
    .reg-footer-cta-button {
        /* This tells the button to be only as wide as its content, not full-width */
        display: inline-block;
        width: auto;
        
        /* Adjust padding for a good size */
        padding: 12px 35px; 
        font-size: 1em;
    }
}

/*
--------------------------------------------------------------
>>> Registration Page Layout Fix
- Hides the default site footer to show the custom one,
- while still allowing scripts from wp_footer() to load.
--------------------------------------------------------------
*/
.page-template-page-registration .site-footer#kymjo-footer {
    display: none;
}