/*
Theme Name: Caricojm
Theme URI: https://caricojm.com/
Author: Caricojm
Author URI: https://caricojm.com/
Description: A custom WordPress theme named Caricojm
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: caricojm
Tags: custom, responsive, blog
*/

/* ========== COLOR PALETTE VARIABLES ========== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
h1, h2, h3, h4, span, p, strong, div {
     font-family: "Outfit", sans-serif !important;
     font-optical-sizing: auto !important;
     font-weight: 700;
     font-style: normal;
}
a:focus {
    outline: unset !important;
    box-shadow: unset !important;
}
p,a, li, div {
    font-weight: 400;
    font-size: 18px !important;
}
:root {
    /* Primary */
    --primary-color: #F2B705;
    --primary-hover: #1f3c69;
    --primary-light: #E5F4FF;

    /* Secondary / Accent */
    --accent-color: #FF6B6B;
    --accent-secondary: #FFA500;
    --success-color: #28A745;

    /* Neutrals */
    --white: #FFFFFF;
    --light-gray: #F9F9F9;
    --gray: #DDDDDD;
    --dark-gray: #333333;
    --very-dark-gray: #222222;
}

/* ========== RESET & GLOBAL STYLES ========== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    margin: 0px !important;
    padding: 0px !important;
}

body {
    font-family: "Outfit", sans-serif !important;
    line-height: 1.6;
    color: var(--dark-gray);
    background: radial-gradient(circle at 82% 10%, rgba(220, 197, 141, .32), transparent 27%),
    linear-gradient(135deg, #fbfaf6 0%, #f4efdf 100%);
}
.page-id-452 h2 {
    display: none;
}
.carico-page section {
    padding: 0 !important;
}

section#tools, section.work-sect, #question-sect {
    padding: 100px 24px !important;
}

.page-template-shipper-dashboard .subscription-cards .pricing-card.pay-per-add {
    display: none;
}
 .subscription-cards a.btn-login {
    width: 100%;
}
.page-template-advertiser-dashboard  .pricing-card.pay-per-load {
    display:none;
}

div#dashboard-content .pricing-card ul li {
    font-size: 12px !important;
}

/* ========== HEADINGS ========== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--very-dark-gray);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.25rem; }

/* ========== LINKS ========== */
a {
    color: #1f3c69;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-hover);
}

/* ========== HEADER ========== */

/* TOP BAR */
.top-bar {
    background-color: #0073aa;
    font-size: 14px;
    padding: 12px 0;
}
.top-bar.header {
    margin-bottom: 0px !important;
}
.top-socials {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.top-socials a {
    display: flex;
    align-items: center;
}
ul#menu-top-bar li a {
    color: var(--white);
    border-right: 1px solid white;
    padding-right: 10px;
	padding-top: 0px;
	padding-bottom:0px;
}
.top-bar .container {
    display: flex;
    justify-content: space-between !important;
    align-items: center;
}

.top-bar .top-links,
.top-bar .top-right-menu {
    display: flex;
    gap: 15px;
}
.image-banner img, .shiiper-truxk img {
    border-radius: 20px;
}
.top-bar a {
    color: var(--dark-gray);
    transition: color 0.3s;
}

.top-bar a:hover {
    color: var(--primary-color);
}
.cjv-hero {
    background:unset !important;
    border-radius: 0 !important;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 1400px;
    margin: auto;
}

section.cj-verify {
    padding: 0;
}

.cj-verify .cjv-hero h1, .cj-verify .cjv-accent {
    text-align: left;
    width: 100%;
}



.banner-section-cjv {
    height: 60vh;
    background-size:cover;
    background-repeat:no-repeat;
	background-position:center;
}

.cj-verify .cjv-hero p {
    margin-left: 0 !important;
    text-align: left;
    margin-top: 20px !important;
}

.cjv-accent {
    display: none;
}
.jm-parish-link span {
    font-weight: 400;
}
/* MAIN HEADER */
.main-header {
    background: radial-gradient(circle at 82% 10%, rgba(220, 197, 141, .32), transparent 27%),
    linear-gradient(135deg, #fbfaf6 0%, #f4efdf 100%);
    padding: 15px 0;
    position: relative;
    z-index: 1000;
}
.top-socials a img {
    width: 40px;
    border-radius: 4px;
}
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header.main-header li.menu-item.menu-item-logout {
	border:unset !important;
	background:unset !important;
}
/* Logo */
.logo img {
    max-height: 120px;
}
a.insta-link,a.fb-link,a.tik-link {
    position: relative;
    top: 3px;
}
a.sc-bg-img-btn:hover {
    color: white;
}
.logo a {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--dark-gray);
}
.pricing-hero .container {
    text-align: left;
}
ul li{
    list-style-type: none;
}

/* Main Navigation */
.main-nav {
    position: relative;
    flex-grow: 1;
    margin-left: 40px;
}

.main-nav .main-menu {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
}

.main-nav .main-menu li {
    position: relative; 
}
.auth-hero p {
    max-width: 400px;
    margin: auto;
	margin-left:0px;
	text-align:left;
}
.main-nav .main-menu li a {
    display: block;
    padding: 10px 0;
    color: var(--dark-gray);
    font-weight: 500;
    transition: color 0.3s;
}

.main-nav .main-menu li a:hover {
    color: #2a4f86;
    text-decoration: none;
}

/* Submenu */
.main-nav .main-menu li ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: var(--white);
    border: 1px solid var(--gray);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: none;
    z-index: 999;
    padding: 10px 0;
}

.main-nav .main-menu li ul li {
    width: 100%;
}

.main-nav .main-menu li ul li a {
    padding: 5px 20px;
    color: var(--dark-gray);
	font-size:15px;
}
/* .pricing-card.pay-per-load, .pricing-card.pay-per-add {
    width: 460px;
    margin: 30px auto;
} */
div#carrier .pricing-card.pay-per-load, div#carrier .pricing-card.pay-per-add, div#shipper .pricing-card.pay-per-add {
    display: none;
}
div#advertiser .pricing-card.pay-per-load {
    display: none;
}
.main-nav .main-menu li ul li a:hover {
    background-color: var(--primary-light);
    color: #2a4f86;
    text-decoration: none;
}

/* Show submenu on hover */
.main-nav .main-menu li:hover > ul {
    display: block;
}

/* Font Awesome submenu arrow */
.main-nav .main-menu li.menu-item-has-children > a::after {
    content: "\f078"; /* Font Awesome chevron-down */
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    margin-left: 5px;
    font-size: 0.8em;
}
header.main-header {
    padding-bottom: 10px !important;
    padding-top: 5px !important;
/* 	box-shadow:0 3px 5px rgba(0,0,0,.1)!important; */
	position: sticky;
    top: 0;
}
/* Mobile Toggle */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.mobile-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--dark-gray);
    transition: all 0.3s ease;
}

.mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu Drawer */
.mobile-menu-wrapper {
    display: none;
    background-color: var(--white);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 9999;
}

.mobile-menu-wrapper .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-menu-wrapper .mobile-menu li a {
    color: var(--dark-gray);
    font-size: 16px;
}
section.auth-hero.signup h1 {
    max-width: 42%;
}
/* ========== FOOTER ========== */
.site-footer,
footer {
    background: #0073aa;
    color: var(--white);
    font-family: 'Montserrat', Arial, sans-serif;
    line-height: 1.6;
    font-size: 14px;
    width: 100%;
	margin-top:50px;
}

/* Footer Top: About & Menus */
.footer-top {
    padding: 60px 0 0px;
}
.footer-bottom-links p {
    color: #fff;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-about img.footer-logo {
    max-width: 150px;
    margin-bottom: 20px;
}
.footer-menu h4 {
    color: var(--white);
}
.footer-about p {
    color: #fff;
    font-size: 14px;
}
.footer-about img {
    height: 120px;
    margin-bottom: 20px;
}
.footer-menu h4 {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links li a {
    color: #fff;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links li a:hover {
    text-decoration: underline;
}

/* Footer Middle: Social + App Buttons */
.footer-middle {
    padding: 0px 0;
}

.footer-middle-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-social a {
    margin-right: 15px;
    font-size: 18px;
    color: #fff;
    transition: color 0.3s ease;
}

.footer-social a:last-child {
    margin-right: 0;
}

.footer-social a:hover {
    color: var(--primary-color);
}

.footer-apps a {
    display: inline-block;
    margin-left: 10px;
}

.footer-apps img {
    max-width: 130px;
    width: 100%;
    height: auto;

}

/* Footer Bottom: Copyright */
.footer-bottom {
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: #777;
}

.footer-bottom-links p span {
    margin: 0 5px;
    color: #555;
}

.footer-bottom-links a {
    color: #fff;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    text-decoration: underline;
}

/* ========== BUTTONS ========== */
button, .button, input[type="submit"] {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover, .button:hover, input[type="submit"]:hover {
    background-color: var(--primary-hover);
}

/* ========== SECTIONS ========== */
section {
    padding: 60px 20px;
    margin: auto;
}



/* ===== GLOBAL CONTAINER ===== */
.container {
    width: 100%;
    max-width: 1440px;
    padding: 0 10px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ========== IMAGES ========== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========== FORMS ========== */
input, textarea, select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--gray);
    border-radius: 5px;
}

/* ========== GRID SYSTEM ========== */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.col {
    flex: 1;
    min-width: 250px;
}

/* ========== UTILITY CLASSES ========== */
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.hidden { display: none !important; }

/* ========== ALERTS & MESSAGES ========== */
.alert {
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.alert-success { background-color: var(--success-color); color: var(--white); }
.alert-error { background-color: var(--accent-color); color: var(--white); }
.alert-warning { background-color: var(--accent-secondary); color: var(--white); }
/* Hide all top-bar menu items except Login on mobile/tablet */
@media (max-width: 1024px) { /* Tablets and below */
    #menu-top-bar li {
        display: none; /* hide all menu items */
    }
    #menu-top-bar li#menu-item-51 {
        display: list-item; /* show only Login / Sign Up */
    }
	
	.mobile-menu-wrapper.open {
    display: block !important;
}
	.mobile-menu-wrapper.open {
    
    height: 100vh;
}
	/* =========================
   MOBILE MENU – SCOPED
========================= */

.mobile-menu-wrapper {
  background: #fff;
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
}

/* Reset */
.mobile-menu-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-wrapper a {
  text-decoration: none;
  color: #111;
  display: block;
  padding: 14px 18px;
  font-size: 16px;
}

/* Top level items */
.mobile-menu-wrapper > ul > li {
  border-bottom: 1px solid #eee;
}

/* Parent items */
.mobile-menu-wrapper .menu-item-has-children > a {
  position: relative;
  padding-right: 40px;
}

/* Arrow */
.mobile-menu-wrapper .menu-item-has-children > a::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 20px;
  transition: transform 0.3s ease;
}

/* Rotate arrow when open */
.mobile-menu-wrapper .menu-item-has-children.open > a::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Submenus */
.mobile-menu-wrapper .sub-menu {
  max-height: 0;
  overflow: hidden;
  background: #f9f9f9;
  transition: max-height 0.35s ease;
}

.mobile-menu-wrapper .menu-item-has-children.open > .sub-menu {
  max-height: 500px; /* enough for nested menus */
}

/* Submenu links */
.mobile-menu-wrapper .sub-menu a {
  font-size: 15px;
  padding-left: 32px;
}

/* Nested submenu */
.mobile-menu-wrapper .sub-menu .sub-menu a {
  padding-left: 46px;
  background: #f3f3f3;
}

/* Active page */
.mobile-menu-wrapper .current-menu-item > a {
  font-weight: 600;
}

/* =========================
   LOGIN / LOGOUT SWITCH
========================= */


.mobile-menu-wrapper .sub-menu {
  display: none;
}

.mobile-menu-wrapper .menu-item-has-children.open > .sub-menu {
  display: block;
}
	li.menu-item.menu-item-logout {
    width: 100%;
}
}

/* ========== MEDIA QUERIES ========== */
@media (max-width: 991px) {
    .main-nav {
        display: none;
    }

    .mobile-toggle {
        display: flex;
		margin-right:10px;
    }

    .top-bar {
        display: none;
    }

    .top-bar .container {
        justify-content: center;
    }

    .main-nav.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 300px;
        background-color: var(--white);
        padding-top: 60px;
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
        transition: left 0.3s ease;
        z-index: 9999;
        margin-left: 0;
    }

    .main-nav .main-menu {
        flex-direction: column;
        gap: 0;
    }

    .main-nav .main-menu li {
        border-bottom: 1px solid var(--light-gray);
    }

    .main-nav .main-menu li a {
        padding: 15px 20px;
        display: block;
    }
    .footer-middle-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-apps {
        margin-top: 15px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* Two columns on tablet */
    }
}

@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    #menu-top-bar li {
        display: none; /* hide all menu items */
    }
	section#hero {
}
	section.auth-hero {
    padding-top: 0px;
}

.auth-hero .container {
    margin-top: -90px;
}
section.auth-hero.signup {
    min-height: 500px;
}

.signup .container {
    margin-top: -150px;
}	
    .banner-section-cjv {
        min-height: 500px;
    }
	.hero-section {
    min-height: 500px;
    padding-top: 30px !important;
}
	.cj-verify .cjv-hero{
		padding: 28px 20px !important;
        justify-content: start;
	}
	.carico-page h1 {
    font-size: 2.5rem !important;
}
.carico-page h2{
    font-size: 1.8rem !important;
}
.pricing-card.pay-per-add, .pricing-card.pay-per-load {
    margin: 10px !important;
    width: auto;
}
.carico-page section {
    padding: 0;
}
section.pricing-hero {
    padding: 10px !important;
}
.image-text-sect div {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
    #menu-top-bar li#menu-item-51 {
        display: list-item; /* show only Login / Sign Up */
    }
    .row { flex-direction: column; }

    .header-flex {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .logo {
        margin-bottom: 10px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-about img.footer-logo {
        max-width: 120px;
        margin-bottom: 15px;
    }

    .footer-links li {
        margin-bottom: 8px;
    }
    .footer-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 20px;
    }

}

/**top bar submen css**/
/* ===============================
   TOP BAR MENU
================================ */

.top-links {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.top-links > li {
    position: relative;
}

.top-links > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    padding: 6px 0;
}

/* ===== Dropdown Arrow ===== */
.top-links li.menu-item-has-children > a::after {
    content: "▾";
    font-size: 11px;
    margin-top: 1px;
    transition: transform 0.25s ease;
}

/* Rotate arrow on hover */
.top-links li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* ===== Submenu ===== */
.top-links ul.sub-menu {
    position: absolute;
    top: 120%;
    left: 0;
    min-width: 180px;
    background: #ffffff;
    border-radius: 6px;
    padding: 8px 0;
    list-style: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.25s ease;
    z-index: 9999;
}

/* Show submenu on hover */
.top-links li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Submenu items */
.top-links ul.sub-menu li a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: #222222 !important;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Hover effect */
.top-links ul.sub-menu li a:hover {
    background: #2a4f86;
    color: #fff !important;
}
/***Footer ct info style**/
.footer-contact-info {
    margin-top: 20px;
}

.footer-contact-info p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    font-size: 14px;
    color: #ffffff;
}

.footer-contact-info svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
    flex-shrink: 0;
}

.footer-contact-info a {
    color: #ffffff;
    text-decoration: none;
}

.footer-contact-info a:hover {
    text-decoration: underline;
}
.footer-social {
    display: flex;
}
.footer-contact-info span {
    opacity: 0.6;
    margin: 0 4px;
}
.main-menu a[href*="login"], .main-menu a[href*="sign-up"] {
    padding: 8px 20px !important;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.lbt-btn.outline{
	border: 2px solid var(--primary-color) !important;
    color: #fff !important;
	background:var(--primary-color) !important;
}
.lbt-btn.outline:hover{
    background-color: #2a4f86 !important;
    border: 1px solid #2a4f86 !important;
    color: #ffffff !important;
}
header.main-header .main-menu a[href*="login"], header.main-header .main-menu a[href*="sign-up"], .lbt-btn.primary, .lp-view-all, .about-btn {
    background-color: #F2B705 !important;
	border:1px solid #F2B705 !important;
    color: #ffffff !important;
}

header.main-header .main-menu a[href*="login"]:hover, header.main-header .main-menu a[href*="sign-up"]:hover, .lp-view-all:hover, .about-btn:hover {
    background-color: #2a4f86 !important;
	color: #ffffff !important;
	border-color: #2a4f86 !important;
}

.main-menu a[href*="sign-up"] {
    padding: 8px 20px !important;
    background-color: #2a4f86; /* different color for Sign Up */
    color: #fff !important;
    border-radius: 5px;
	border:1px solid #2a4f86;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s;
}

.main-menu a[href*="sign-up"]:hover {
    background-color: white;
	color: #2a4f86 !important;
}

a.lbt-btn.primary:hover {
    background-color: #2a4f86 !important;
    border: 1px solid #2a4f86 !important;
    color: #ffffff !important;
    
}
/**messages**/
/* ===== Messages Wrapper ===== */
section#body-area {
    padding: 0px;
}
.message-users-list {
    background: #ffffff;
    border-radius: 6px;
    
    padding: 20px;
    max-width: 420px;
	width:420px;
   
}
.report-msg-buttons {
    margin: 0px;
}
button.btn.btn-report-spam.msg-spam-button {
    background: #2a4f86 !important;
    color: white !important;
    border: 1px solid #2a4f86 !important;
    font-family: 'Montserrat';
}
button#send-homey-message {
    background: #2a4f86 !important;
    color: white !important;
    border: 1px solid #2a4f86 !important;
    font-family: 'Montserrat';
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
button#send-homey-message:hover {
    background: #2a4f86 !important;
    color: white !important;
    border: 1px solid #2a4f86 !important;
    font-family: 'Montserrat';
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
/* ===== Header ===== */
.msg-user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.msg-user-header .title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
}
button#toggle-archive-msg {
    display: none;
}
.msg-user-header h2 {
    margin-bottom: 0px !important;
}
button#toggle-spam {
    background: #2a4f86;
    font-family: 'Montserrat';
    /* padding: 0px 30px; */
    height: 40px;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
li.message-user {
    margin: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}

button#toggle-blocked-msg {
    display: none;
}
/* Action buttons */
.msg-action-btns {
    display: flex;
    gap: 8px;
}

.msg-action-btns .btn {
    background: #f1f3f5;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.msg-action-btns .btn:hover {
    background: #2a4f86;
    color: #fff;
}

/* ===== Message List ===== */
.message-users-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ===== Single User Item ===== */
.message-user {
    border-bottom: 1px solid #eee;
    padding: 15px 10px;
    transition: background 0.3s ease;
    cursor: pointer;
}

.message-user:last-child {
    border-bottom: none;
}

.message-user:hover {
    background: #f8f9fb;
}

/* ===== User Info ===== */
.message-user-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Left content */
.message-user-content {
    flex: 1;
}

/* User name */
.user-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin-bottom: 4px;
}

/* City (optional) */
.user-name-city {
    display: block;
    font-size: 13px;
    color: #777;
    margin-bottom: 6px;
}

/* Last message */
.last-message {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Date */
.last-message-date {
    font-size: 12px;
    color: #999;
}

/* ===== Report / Action Buttons ===== */
.report-msg-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 10px;
}

.report-msg-buttons .btn {
    background: transparent;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Spam */
.btn-report-spam:hover {
    background: #ffe5e5;
    border-color: #ff4d4f;
    color: #ff4d4f;
}




/* ===== Responsive ===== */
@media (max-width: 576px) {
    .message-users-list {
        max-width: 100%;
    }

    .last-message {
        max-width: 180px;
    }

    .report-msg-buttons {
        display: none; /* hide buttons on mobile */
    }
}
button#toggle-archive-msg {
    display: none;
}

button#toggle-blocked-msg {
    display: none;
}

.msg-user-header h2 {
    margin-bottom: 0px !important;
}

button#toggle-spam {
    background: #2a4f86;
    font-family: 'Montserrat';
    /* padding: 0px 30px; */
    height: 40px;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg-user-header {
    display: flex;
    align-items: center;
}

li.message-user {
    margin: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}

button.btn.btn-report-archive.msg-spam-button {
    display: none;
}

button.btn.btn-report-block.msg-spam-button {
    display: none;
}

.message-user-info {
    flex-direction: column;
}


/*** Menu CSS ***/
li.menu-item.menu-item-logout {
    font-family: 'Montserrat';
    height: 46px;
    width: 120px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
li.menu-item.menu-item-logout:hover {
    background: transparent !important;
}

li.widget_text {
    padding-bottom: 0px !important;
}
h4.mega-block-title {
    font-weight: 500 !important;
}
ul.mega-sub-menu {
    padding: 10px !important;
}
h4.mega-block-title:before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    content: "\f054" !important;
    display: inline-block;
    margin-right: 10px;
    color: #2a4f86 !important;
    font-size: 16px;
    vertical-align: middle;
}
a.mega-menu-link {
    padding-left: 20px !important;
}
a.mega-menu-link {
    font-weight: 400 !important;
}
li.menu-item.menu-item-logout a {
    color: white;
}
li.menu-item.menu-item-login a {
    color: white;
	text-align:center;
}

li.menu-item.menu-item-signup {
    background: transparent;
    font-family: 'Montserrat';
    height: 46px;
    width: 120px;
    display: flex;
	font-size:18px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
a.menu-btn.login-btn {
    background: #2a4f86;
    font-family: 'Montserrat';
    height: 46px;
    width: 120px;
	font-size:18px;
    display: flex;
    align-items: center;
    border: 1px solid #2a4f86;
    justify-content: center;
    border-radius: 4px;
}
li.menu-item.menu-item-signup:hover a{
	color: #2a4f86 !important;
}
a.menu-btn.login-btn:hover {
    background: transparent !important;
}
li.menu-item.menu-item-login:hover a {
    color: #2a4f86 !important;
}
h4.mega-block-title {
    font-size: 14px !important;
}
ul.mega-sub-menu {
    background: white !important;
}
a.mega-menu-link {
    background: white !important;
}
.mega-sub-menu a.mega-menu-link {
    font-size: 15px !important;
}
.mega-menu-item {
    padding-bottom: 0px !important;
}
button.btn-primary {
    padding: 12px 30px;
    border-radius: 6px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease;
    border: 1px solid var(--primary-color);
}
button.btn-primary:hover{
	background:transparent;
   color:var(--primary-color);
	border-color:var(--primary-color);
}
.signup-form input, .signup-form select, .signup-form textarea{
	margin-bottom:0px !important;
}
button.btn-primary {
    margin-top: 0px;
}
.form-group.remember-me {
    margin-bottom: 0px !important;
}
@media screen and (max-width: 1024px) {

    /* Mega menu links color on mobile */
    #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
        color: black !important;
    }

    /* Mega menu background on mobile */
    #mega-menu-wrap-main-menu .mega-menu-toggle + #mega-menu-main-menu {
        background: white;
        margin-left: 10px;
    }

    /* Login button full width on mobile */
    a.menu-btn.login-btn {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Signup menu item width on mobile */
    li.menu-item.menu-item-signup {
        width: 97%;
    }
}
button.btn-book.book-now-from-modal {
    background: #2a4f86 !important;
    font-family: 'Montserrat';
    height: 46px;
    width: 120px;
    font-size: 18px;
    display: flex;
    align-items: center;
    border: 1px solid #2a4f86 !important;
    justify-content: center;
    border-radius: 4px;
}
button.btn-primary {
    border-radius: 4px !important;
    height: 46px;
}
.btn-outline{
	border-radius:4px !important;
}
button.view-btn.active {
    background: var(--primary-color) !important;
	color:#fff;
    font-family: 'Montserrat';
    height: 46px;
    display: flex;
    align-items: center;
    border: 1px solid var(--primary-color) !important;
    justify-content: center;
    border-radius: 4px;
}

button.btn-view.view-load {
	background: var(--primary-color) !important;
    font-family: 'Montserrat';
	color:#fff;
    height: 46px;
    font-size: 12px;
    display: flex;
    align-items: center;
    border: 1px solid var(--primary-color) !important;
    justify-content: center;
    border-radius: 4px;
}
button#reset-filters {
    height: 46px;
    font-family: 'Montserrat';
    font-size: 16px;
    border-radius: 4px;
}
button.btn-book.book-now-from-modal:hover{
	background: transparent !important;
	color:#2a4f86 !important;
}
a.mega-menu-link {
    text-transform: capitalize !important;
}
#signup-success a.btn-primary {
    background: #2a4f86 !important;
    color: white;
	 border: 1px solid #2a4f86 !important;
}
#signup-success a.btn-primary:hover {
    background: transparent !important;
    color: #2a4f86 !important;
    border: 1px solid #2a4f86 !important;
}
.carrier-dashboard .btn-primary {
    border: 1px solid var(--primary-color) !important;
}
.carrier-dashboard .btn-primary:hover {
    background: transparent !important;
    border: 1px solid var(--primary-color) !important;
}
tbody#loads-table-body td {
    font-size: 12px;
    line-height: 22px;
}
table#loads-table th {
    font-size: 12px;
}
button.view-btn.active:hover {
    background: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.carrier-dashboard .btn-primary {
    font-weight: 400 !important;
}
button#reset-filters {
    background: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}
button#reset-filters:hover {
    background: var(--primary-color) !important;
    color: white !important;
}
button.view-btn {
    color: var(--primary-color);
    font-family: 'Montserrat';
    background: none;
    border: 1px solid var(--primary-color);
}
.view-btn:hover:not(.active) {
    background: var(--primary-color) !important;
    color: white !important;
}
.filter-group input, .filter-group select {
	font-family: 'Montserrat';}
button.btn-view.view-load:hover {
    background: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}
button#toggle-archive-msg, button#toggle-blocked-msg, button#toggle-inbox-msg{
	background: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.msg-action-btns {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}
.no-bookings a:hover {
    color: #2a4f86;
}
.no-bookings a {
    border-radius:4px !important;
}
button#toggle-spam:hover {
    background: transparent !important;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}
.btn-spam{
	line-height:100% !important;
}
a.btn-link.download-invoice {
    color: #2a4f86 !important;
}
a.btn-outline {
    border: 1px solid var(--primary-color) !important;
    border-radius: 4px !important;
	display: flex;
    align-items: center;
    justify-content: center;
}
a.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}
.profile-completion-alert {
    background: #ffffff !important;
}
.requirement-item {
    background: #2a4f86 !important;
}

.profile-completion-alert .alert-body p {
    color: #000000;
}

.profile-completion-alert .alert-header h3 {
    color: #000000;
}
button#send-verification {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
button.btn-primary:hover{
	background: transparent !important;
}
.no-loads-message a {
    border: 1px solid #2a4f86 !important;
}
.no-loads-message a:hover {
    background: transparent !important;
    color: #2a4f86 !important;
    border: 1px solid #2a4f86 !important;
}
.payment-summary {
    background: #2a4f86 !important;
}
button#view-pricing {
    background: transparent !important;
    color: #2a4f86 !important;
    border: 1px solid #2a4f86 !important;
}
button#view-pricing:hover {
    background: #2a4f86 !important;
    color: white !important;
}
.plan-features li:before {
    color: #2a4f86 !important;
}
span.plan-badge.pay-per-use {
    background: #2a4f86 !important;
}
.empty-state .btn-primary{
	border: 1px solid #2a4f86 !important;
}
.empty-state .btn-primary:hover{
	background: transparent !important;
    color: #2a4f86 !important;
    border: 1px solid #2a4f86 !important;
}
.payment-option input[type="radio"]:checked + span {
    font-weight: bold;
    color: #667eea;
    white-space: nowrap;
}
label.payment-option span {
    white-space: nowrap;
}
label.payment-option {
    display: flex;
    align-items: center;
    justify-content: center;
}
div#browse-loads {
    flex: 1 100%;
}
.browse-loads-sidebar {
    flex: 1 45%;
}
.ad-group-header {
    background: #2a4f86 !important;
}
button.btn-review.add-shipper-review{
	    border: 1px solid var(--primary-color);
}
button.btn-track.contact-shipper{
	 background: transparent !important;
	    color: var(--primary-color) !important;
			 border: 1px solid var(--primary-color);
}
button.btn-track.contact-shipper:hover{
	 background: var(--primary-color) !important;
	color: white !important;
	border: 1px solid var(--primary-color);
}
span.plan-badge.pro {
    background: #2a4f86 !important;
    color: white !important;
}
button.btn-review.add-shipper-review:hover{
	    background: transparent !important;
	    color: var(--primary-color) !important
}
.reset-password-container {
    max-width: 450px;
    margin: 0 auto;
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
    margin-top: 10px;
}
.reset-password-container h2 {
    font-size: 28px;
    text-align: center;
}
button#submit-reset-password {
    padding: 12px 30px;
    border-radius: 6px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease;
    border: 1px solid #2a4f86;
    width: 100%;
    font-family: 'Montserrat';
    font-weight: 400;
    margin: 0px;
}
 input#confirm_password {
    margin: 0px;
}

input#confirm_password {
    width: 100%;
    border: 1px solid var(--gray);
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 0px;
}
form#custom-reset-password-form button#submit-reset-password:hover {
    background: transparent !important;
    color: #2a4f86 !important;
    border: 1px solid #2a4f86 !important;
}
div#custom-forgot-password-form {
    max-width: 450px;
    margin: 0 auto;
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
    margin-bottom: 50px;
} 
button#submit-forgot-password, button#back-to-login {
    font-family: 'Montserrat';
}
div#custom-forgot-password-form h3 {
    text-align: center;
    font-size: 28px;
    font-family: 'Montserrat';
}
div#custom-forgot-password-form p {
    font-size: 14px;
    text-align: center;
}
form#forgot-password-form {
    margin-top: 20px;
}
.form-group {
    margin-bottom: 0pc;
}

button#back-to-login {
    padding: 12px 30px;
    border-radius: 4px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease;
    border: 1px solid #2a4f86;
    font-weight: 400;
    width: 50%;
}
button#submit-forgot-password {
    padding: 12px 30px;
    border-radius: 4px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease;
    border: 1px solid #2a4f86;
    font-weight: 400;
    width: 48%;
}
button#submit-forgot-password:hover, button#back-to-login:hover {
    background: transparent;
    color: #2a4f86;
}
button#submit-reset-password {
    margin-top: 20px;
}
button#upgradeBtn {
    padding: 12px 22px !important;
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
     border: 1px solid var(--primary-color) !important;
    cursor: pointer;
    font-weight: 400;
    font-size: 1rem;
    transition: background 0.3s, transform 0.3s;
    border-radius: 4px !important;
}
button#upgradeBtn:hover {
    background: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}
.advertiser-dashboard .card-icon {
    display: none;
}
.advertiser-dashboard p.card-number {
    font-size: 22px !important;
}
.advertiser-dashboard .card{
	padding:18px !important;
}
.plan-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.advertiser-dashboard ul.plan-features li , .shipper-dashboard ul.plan-features li {
    padding-left: 20px;
}
.subscription-card.cancelling {
    border-left:none !important;
   background-color: transparent !important;
}
.plan-meta div {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.plan-meta span.status.active {
    width: fit-content;
}
.shipper-dashboard .card-icon {
    display: none;
}
.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.advertiser-dashboard .history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
	    flex-wrap: wrap;
}
p.small-text {
    color: white !important;
}
.load-actions .btn-sm.btn-info.view-load {
  background: #2a4f86;
  font-family: 'Montserrat';
  height: 46px;
  width: 100px;
  font-size: 18px;
  display: flex;
  align-items: center;
  border: 1px solid #2a4f86;
  justify-content: center;
  border-radius: 4px;
}
.recent-load-card {
  background: white !important;
}
.load-actions .btn-sm.btn-outline {
  font-family: 'Montserrat';
  height: 46px;
  width: 120px;
  font-size: 18px;
  display: flex;
  align-items: center;
  border: 1px solid #2a4f86;
  justify-content: center;
  border-radius: 4px;
  color: #ffffff !important;
}
.load-actions .btn-sm.btn-outline {
  font-family: 'Montserrat';
  height: 46px;
  width: 120px;
  font-size: 18px;
  display: flex;
  align-items: center;
  border: 1px solid #2a4f86;
  justify-content: center;
  border-radius: 4px;
  color: #ffffff !important;
}

/* =====================================================================
   GLOBAL BUTTON COLOUR SCHEME (same as home-page hero buttons)
   Normal : yellow bg (#F2B705), yellow border, white text
   Hover  : blue bg (#2a4f86), blue border, white text
   Only colours are changed (size / spacing / layout untouched).
   Structural controls (modal close, tabs, pagination, accordion,
   toggles, swiper arrows, hamburger) and destructive buttons
   (danger/delete/reject) are intentionally NOT included.
   ===================================================================== */
body .lbt-btn,
body .hero-btn,
body .about-btn,
body .lp-view-all,
body .lp-btn,
body .sc-bg-img-btn,
body .bg-img-btn,
body a.menu-btn,
body .btn,
body .btn-primary,
body .btn-secondary,
body .btn-outline,
body .btn-book,
body .btn-view,
body .btn-view-doc,
body .btn-view-campaign,
body .btn-edit-campaign,
body .btn-track,
body .btn-review,
body .btn-link,
body .btn-small,
body .btn-sm,
body .btn-success,
body .btn-info,
body .btn-warning,
body .btn-cancel,
body .btn-login,
body .btn-date-range,
body .btn-print-receipt,
body .jm-book-button,
body .jm-view-button,
body .jm-search-btn,
body .search-button,
body .filter-btn,
body .sidebar-book-button,
body .button,
body a.button,
body button.button,
body button#choose-plan,
body button#upgradeBtn,
body button#renewBtn,
body button#cancel-subscription,
body button#submit-load,
body button#submit-campaign,
body button#submit-forgot-password,
body button#submit-reset-password,
body button#back-to-login,
body button#send-verification,
body button#send-advertiser-verification,
body button#reset-filters,
body button#refresh-dashboard,
body button#view-pricing,
body input[type="submit"],
body input[type="button"] {
    background: #F2B705 !important;
    background-color: #F2B705 !important;
    border: 1px solid #F2B705 !important;
    color: #ffffff !important;
}

body .lbt-btn:hover,
body .hero-btn:hover,
body .about-btn:hover,
body .lp-view-all:hover,
body .lp-btn:hover,
body .sc-bg-img-btn:hover,
body .bg-img-btn:hover,
body a.menu-btn:hover,
body .btn:hover,
body .btn-primary:hover,
body .btn-secondary:hover,
body .btn-outline:hover,
body .btn-book:hover,
body .btn-view:hover,
body .btn-view-doc:hover,
body .btn-view-campaign:hover,
body .btn-edit-campaign:hover,
body .btn-track:hover,
body .btn-review:hover,
body .btn-link:hover,
body .btn-small:hover,
body .btn-sm:hover,
body .btn-success:hover,
body .btn-info:hover,
body .btn-warning:hover,
body .btn-cancel:hover,
body .btn-login:hover,
body .btn-date-range:hover,
body .btn-print-receipt:hover,
body .jm-book-button:hover,
body .jm-view-button:hover,
body .jm-search-btn:hover,
body .search-button:hover,
body .filter-btn:hover,
body .sidebar-book-button:hover,
body .button:hover,
body a.button:hover,
body button.button:hover,
body button#choose-plan:hover,
body button#upgradeBtn:hover,
body button#renewBtn:hover,
body button#cancel-subscription:hover,
body button#submit-load:hover,
body button#submit-campaign:hover,
body button#submit-forgot-password:hover,
body button#submit-reset-password:hover,
body button#back-to-login:hover,
body button#send-verification:hover,
body button#send-advertiser-verification:hover,
body button#reset-filters:hover,
body button#refresh-dashboard:hover,
body button#view-pricing:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body .btn-date-range.active,
body li.menu-item:hover > a.menu-btn {
    background: #2a4f86 !important;
    background-color: #2a4f86 !important;
    border-color: #2a4f86 !important;
    color: #ffffff !important;
}

/* keep disabled / already-booked buttons visibly inactive */
body .btn-book.disabled,
body .jm-book-button.is-booked,
body button:disabled.btn-primary,
body button:disabled.btn-secondary,
body button:disabled.btn-outline {
    opacity: .6;
    cursor: not-allowed;
}


/* =====================================================================
   PRICING CARDS + PLAN TABS (home page & pricing page)
   Same scheme: yellow -> blue on hover. Colours only.
   ===================================================================== */
body .pricing-card .btn-choose,
body .pricing-card.featured .btn-choose,
body a.btn-primary.select-subscription,
body a.btn-login,
body .pricing-tab-content a[class*="btn"],
body .pricing-tab-content a[class*="select"],
body .pricing-tab-content a.button,
body .pricing-tab-content button:not(.tab-btn),
body .pricing-teaser-section .pricing-card a,
body .pricing-teaser-section .pricing-card button,
body .pricing-tabs .tab-btn.active,
body .billing-btn.active {
    background: #F2B705 !important;
    background-color: #F2B705 !important;
    border: 1px solid #F2B705 !important;
    color: #ffffff !important;
}

body .pricing-card .btn-choose:hover,
body .pricing-card.featured .btn-choose:hover,
body a.btn-primary.select-subscription:hover,
body a.btn-login:hover,
body .pricing-tab-content a[class*="btn"]:hover,
body .pricing-tab-content a[class*="select"]:hover,
body .pricing-tab-content a.button:hover,
body .pricing-tab-content button:not(.tab-btn):hover,
body .pricing-teaser-section .pricing-card a:hover,
body .pricing-teaser-section .pricing-card button:hover,
body .pricing-tabs .tab-btn:hover,
body .pricing-tabs .tab-btn.active:hover,
body .billing-btn:hover {
    background: #2a4f86 !important;
    background-color: #2a4f86 !important;
    border-color: #2a4f86 !important;
    color: #ffffff !important;
}


/* =====================================================================
   INNER-PAGE BANNERS (all pages except Home)
   Banner height fixed at 400px, content vertically centred so the space
   above and below it is equal. Home page hero (#hero) is NOT touched.
   On small screens the height becomes "at least 400px" so text never clips.
   ===================================================================== */
body section.about-hero,
body section.advertise-hero,
body section.browse-hero,
body section.contact-hero,
body section.faq-hero,
body section.howitworks-hero,
body section.pricing-hero,
body section.auth-hero,
body section.jm-loads-hero,
body:not(.home) .hero-section:not(#hero) {
    height: 400px !important;
    min-height: 400px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* remove the old negative offsets that were used to fake vertical centering */
body section.auth-hero .container,
body section.auth-hero.signup .container,
body .signup .container,
body section.jm-loads-hero h1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* no extra top/bottom gap from first/last element inside banners */
body section.about-hero .container > :first-child,
body section.advertise-hero .container > :first-child,
body section.browse-hero .container > :first-child,
body section.contact-hero .container > :first-child,
body section.faq-hero .container > :first-child,
body section.howitworks-hero .container > :first-child,
body section.pricing-hero .container > :first-child,
body section.auth-hero .container > :first-child,
body section.jm-loads-hero .container > :first-child,
body:not(.home) .hero-section:not(#hero) .container > :first-child {
    margin-top: 0 !important;
}
body section.about-hero .container > :last-child,
body section.advertise-hero .container > :last-child,
body section.browse-hero .container > :last-child,
body section.contact-hero .container > :last-child,
body section.faq-hero .container > :last-child,
body section.howitworks-hero .container > :last-child,
body section.pricing-hero .container > :last-child,
body section.auth-hero .container > :last-child,
body section.jm-loads-hero .container > :last-child,
body:not(.home) .hero-section:not(#hero) .container > :last-child {
    margin-bottom: 0 !important;
}

/* Shipper / Carrier / Advertiser intro banners */
body section.banner-shipper {
    min-height: 400px;
    display: flex;
    align-items: center;
}
body section.banner-shipper > div {
    width: 100%;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* mobile: keep 400px as minimum so content is never cut off */
@media (max-width: 768px) {
    body section.about-hero,
    body section.advertise-hero,
    body section.browse-hero,
    body section.contact-hero,
    body section.faq-hero,
    body section.howitworks-hero,
    body section.pricing-hero,
    body section.auth-hero,
    body section.jm-loads-hero,
    body:not(.home) .hero-section:not(#hero) {
        height: auto !important;
        min-height: 400px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}


/* =====================================================================
   MOBILE / TABLET RESPONSIVE FIXES (public pages)
   Added at the end so it safely overrides older rules.
   ===================================================================== */

/* ---------- Global safety (all screens) ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, canvas, svg { max-width: 100%; }
img { height: auto; }
body p, body li, body h1, body h2, body h3, body h4, body a { overflow-wrap: break-word; }

/* ---------- Tablet & below (<= 991px) ---------- */
@media (max-width: 991px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .logo img { max-height: 80px; width: auto; }
    .main-header { padding: 10px 0; }
    .header-flex { gap: 10px; }

    /* About page: decorative 1175px line caused sideways scroll */
    .history-grid:after { display: none !important; }

    /* inline-styled big sections (Shipper / Carrier / Advertiser pages) */
    body [style*="padding: 96px"],
    body [style*="padding: 104px"],
    body [style*="padding: 88px"] {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
    body [style*="gap: 56px"],
    body [style*="gap: 64px"] { gap: 32px !important; }
}

/* ---------- Mobile (<= 768px) ---------- */
@media (max-width: 768px) {
    body { font-size: 16px; }
    body p, body a, body li, body div { font-size: 16px !important; }

    .container { padding-left: 16px; padding-right: 16px; }

    /* inline-styled headings */
    body h1[style*="font-size"] { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; line-height: 1.15 !important; }
    body h2[style*="font-size"] { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; line-height: 1.2 !important; }

    /* inline-styled sections: smaller side + vertical padding */
    body [style*="padding: 96px"],
    body [style*="padding: 104px"],
    body [style*="padding: 88px"],
    body [style*="padding: 70px"] {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    body [style*="gap: 48px"],
    body [style*="gap: 56px"],
    body [style*="gap: 64px"] { gap: 24px !important; }
    body [style*="margin-bottom: 52px"],
    body [style*="margin-bottom: 48px"],
    body [style*="margin-bottom: 44px"] { margin-bottom: 28px !important; }

    /* Shipper / Carrier / Advertiser intro banner: keep inner side padding */
    body section.banner-shipper > div {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    body section.banner-shipper .image-banner img { width: 100%; height: auto; }

    /* header */
    .logo img { max-height: 64px; }
    .logo { margin-bottom: 0; }
    .mobile-menu-wrapper { padding: 10px; }

    /* home hero buttons wrap instead of overflowing */
    .lbt-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
    .lbt-btn,
    .hero-section .lbt-btn {
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
        display: inline-block !important;
        text-align: center;
    }

    /* pricing tabs + cards */
    .pricing-tabs { flex-wrap: wrap; gap: 8px; justify-content: center; }
    .pricing-tabs .tab-btn,
    button.tab-btn { padding: 10px 16px !important; font-size: 14px !important; }
    .pricing-grid, .pricing-tab-content .pricing-grid { grid-template-columns: 1fr !important; gap: 20px; }
    .pricing-card { padding: 28px 18px !important; }
    .pricing-card h3 { font-size: 22px !important; }
    .pricing-card .price { font-size: 26px !important; }

    /* sign-up / login forms */
    .signup-form-section, .auth-form-section { padding: 32px 16px !important; }
    .signup-form, .auth-form, .auth-form-container { max-width: 100% !important; width: 100% !important; }
    .signup-roles, .role-cards { flex-direction: column; }

    /* tables: scroll sideways inside their own box, never the page */
    .jm-loads-table-wrap, .lp-table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* generic flex/grid rows used on public pages */
    .row { flex-direction: column; }
    .about-who-grid, .vm-grid, .history-grid, .values-grid { grid-template-columns: 1fr !important; }

    /* footer */
    footer, .site-footer { padding: 40px 16px; }
    .footer-top { padding-top: 30px; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 24px; }
    .footer-bottom-links { flex-wrap: wrap; gap: 8px; text-align: center; }
    .footer-middle-flex { gap: 16px; }
}

/* ---------- Small phones (<= 480px) ---------- */
@media (max-width: 480px) {
    .lbt-btn, .hero-section .lbt-btn { flex: 1 1 100%; }
    .logo img { max-height: 54px; }
    .main-header .container { padding-left: 12px; padding-right: 12px; }
    section.pricing-tiers, .pricing-teaser-section { padding-left: 0; padding-right: 0; }
    .pricing-tabs .tab-btn, button.tab-btn { flex: 1 1 100%; }
}


/* =====================================================================
   "HOW WE VERIFY CARRIERS" BANNER (.banner-section-cjv / .cjv-hero)
   - dark gradient overlay so white text is readable over the photo
   - description limited in width (no longer runs across the whole image)
   - banner height 400px, content centred (equal space top & bottom)
   ===================================================================== */
body .banner-section-cjv {
    position: relative;
    height: 400px !important;
    min-height: 400px !important;
    display: flex !important;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}
/* overlay: strong on the text side (left), fades out on the van/person side */
/* body .banner-section-cjv::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(6, 26, 52, 0.92) 0%,
        rgba(6, 26, 52, 0.80) 38%,
        rgba(6, 26, 52, 0.35) 65%,
        rgba(6, 26, 52, 0.05) 100%);
    z-index: 1;
    pointer-events: none;
} */
/* content sits above the overlay */
body .banner-section-cjv .cjv-hero,
body .banner-section-cjv > * {
    position: relative;
    z-index: 2;
}
body .banner-section-cjv .cjv-hero {
    width: 100%;
    min-height: 0 !important;
    padding: 0 16px !important;
    justify-content: center;
    align-items: flex-start;
}
body .cj-verify .cjv-hero h1 {
    color: #ffffff !important;
    margin: 0 0 14px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
body .cj-verify .cjv-hero p {
    color: #ffffff !important;
    max-width: 560px;          /* keeps the description on the dark left side */
    width: 100%;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.6;
    text-align: left;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

@media (max-width: 768px) {
    body .banner-section-cjv {
        height: auto !important;
        min-height: 400px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    /* on phones the text covers the whole image, so darken evenly */
    body .banner-section-cjv::before {
        background: linear-gradient(180deg, rgba(6,26,52,.80) 0%, rgba(6,26,52,.70) 100%);
    }
    body .cj-verify .cjv-hero p { max-width: 100%; font-size: 16px !important; }
}


/* =====================================================================
   BLOG PAGE (page-blogs.php) + single blog – responsive fixes
   ===================================================================== */
body .premium-blog-page { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; }
body .premium-blog-page .container { width: 100%; max-width: 1440px; box-sizing: border-box; }
body .blogs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}
body .blogs-grid > *,
body .blog-card { min-width: 0; max-width: 100%; box-sizing: border-box; }
body .blog-card .blog-image img { width: 100%; max-width: 100%; height: 220px; object-fit: cover; }
body .blog-title, body .blog-excerpt { overflow-wrap: anywhere; }

/* banner / cover that sits above the blog list (any of these class patterns) */
body .premium-blog-page ~ .blog-hero,
body [class*="blog"][class*="hero"],
body [class*="blog"][class*="banner"],
body .page-template-page-blogs-php .wp-block-cover {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
}
section.auth-hero.signup h1 {
    max-width: 300px;
}
/* body [class*="blog"][class*="hero"]::before,
body [class*="blog"][class*="banner"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
} */
body [class*="blog"][class*="hero"] > *,
body [class*="blog"][class*="banner"] > * { position: relative; z-index: 2; }

@media (max-width: 768px) {
    body .premium-blog-page { padding: 28px 16px !important; }
    body .premium-blog-page .container { padding-left: 0 !important; padding-right: 0 !important; }
    body .premium-blog-page .page-title { font-size: 1.8rem !important; margin-bottom: 24px; text-align: left; }
    body .blogs-grid { grid-template-columns: 1fr !important; gap: 22px; }
    body .blog-card .blog-image img { height: 200px; }
    body .blog-content { padding: 18px 16px; }
    body .blog-title { font-size: 1.25rem !important; line-height: 1.3; }

    /* single blog */
    body .single-blog-title, body .post-title { font-size: 1.7rem !important; line-height: 1.25; }
    body .single-blog-content img, body .entry-content img, body .post-content img { width: 100%; height: auto; }
}
@media (max-width: 768px) {
    body .premium-single-blog { padding: 28px 12px !important; }
    body .single-blog-card { padding: 20px 16px !important; border-radius: 12px; }
}


/* =====================================================================
   MOBILE BANNERS USE THE SAME IMAGES AS DESKTOP
   (the old mobile-only background swaps were removed above; this one is
    for the Find Load page whose swap lives in find-load.php)
   ===================================================================== */
@media (max-width: 767px) {
    body section.jm-loads-hero {
        background-image: url(https://caricojm.com/wp-content/uploads/2026/10/Island-Logistics-Network-Banner.png) !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
	.page-template section.auth-hero {
    background-image: url(https://caricojm.com/wp-content/uploads/2026/10/image_20261023_162842.jpg) !important;
    min-height: 100vw !important;
}

body.page-template section.auth-hero .container {
    margin-top: -220px !important;
    text-align: center;
}

section.auth-hero .container h1, section.auth-hero .container p {
    text-align: center;
    width: 100% !important;
    max-width: 100%;
}
}
@media (max-width: 768px) {
    body section.about-hero,
    body section.advertise-hero,
    body section.browse-hero,
    body section.contact-hero,
    body section.faq-hero,
    body section.howitworks-hero,
    body section.pricing-hero,
    body section.auth-hero,
    body .banner-section-cjv,
    body:not(.home) .hero-section:not(#hero) {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}


/* =====================================================================
   MOBILE BANNERS – SAME LOOK AS LAPTOP
   Image fills the banner and is shown whole (scaled to the screen width),
   text sits ON the image with the same dark overlay as on the laptop.
   Banner height follows the image shape (16:9); it only grows if the text
   needs more room.
   ===================================================================== */
@media (max-width: 768px) {
    body section.about-hero,
    body section.advertise-hero,
    body section.browse-hero,
    body section.contact-hero,
    body section.faq-hero,
    body section.howitworks-hero,
    body section.pricing-hero,
    body section.auth-hero,
    body section.jm-loads-hero,
    body .banner-section-cjv,
    body:not(.home) .hero-section:not(#hero) {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
        height: auto !important;
        min-height: 56.25vw !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        align-items: center !important;
    }
    body section.auth-hero .container,
    body section.jm-loads-hero .container,
    body .banner-section-cjv .cjv-hero { margin: 0 !important; }

    /* text scaled down so it fits on the image like on the laptop */
    body section.about-hero h1,
    body section.advertise-hero h1,
    body section.browse-hero h1,
    body section.contact-hero h1,
    body section.faq-hero h1,
    body section.howitworks-hero h1,
    body section.pricing-hero h1,
    body section.auth-hero h1,
    body section.jm-loads-hero h1,
    body .cj-verify .cjv-hero h1,
    body:not(.home) .hero-section:not(#hero) h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }
    body section.about-hero p,
    body section.advertise-hero p,
    body section.browse-hero p,
    body section.contact-hero p,
    body section.faq-hero p,
    body section.howitworks-hero p,
    body section.pricing-hero p,
    body section.auth-hero p,
    body .cj-verify .cjv-hero p,
    body:not(.home) .hero-section:not(#hero) p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    /* verify-carriers banner: same overlay on mobile as on laptop */
    body .banner-section-cjv::before {
        background: rgba(6, 26, 52, 0.62) !important;
    }
}


/* FAQ banner image (laptop + mobile) */
body section.faq-hero {
    background-image: url(https://mu.sikmaagroup.com/wp-content/uploads/2026/10/WhatsApp-Image-2026-10-19-at-2.11.57-AM.png) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* =====================================================================
   ONE COMMON CONTENT WIDTH FOR HEADER, EVERY SECTION AND FOOTER
   Same as the header/footer container: max 1440px, centred, 10px side
   padding -> left edge and right edge of all content line up.
   ===================================================================== */
:root { --site-max: 1440px; --site-gutter: 10px; }

/* header / footer / standard sections */
body .container {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    box-sizing: border-box;
}
/* footer had extra 20px side padding on top of its container */
body footer.site-footer,
body .site-footer,
body footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* sections that were built with their own inline 1200px / 1000px wrapper
   (Shipper, Carrier, Advertiser and How-it-Works pages) */
body [style*="max-width: 1200px"][style*="margin: 0 auto"],
body [style*="max-width: 1000px"][style*="margin: 0 auto"] {
    width: 100%;
    max-width: var(--site-max) !important;
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
    box-sizing: border-box;
}
/* verify-carriers banner content */
body .cjv-hero {
    max-width: var(--site-max) !important;
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
}

@media (max-width: 768px) {
    :root { --site-gutter: 16px; }
    body [style*="max-width: 1200px"][style*="margin: 0 auto"],
    body [style*="max-width: 1000px"][style*="margin: 0 auto"],
    body section.banner-shipper > div {
        padding-left: var(--site-gutter) !important;
        padding-right: var(--site-gutter) !important;
    }
    body footer, body .site-footer { padding-left: 0 !important; padding-right: 0 !important; }
}

/* =====================================================================
   FINAL BUTTON FIXES
   Yellow bg + white text; hover = blue (#2a4f86) bg + white text.
   ===================================================================== */

/* Inline-styled CTA buttons on landing pages */
body a.cj-btn-yellow {
    background: #F2B705 !important;
    border: 0 !important;
    color: #ffffff !important;
    transition: background .2s ease, color .2s ease;
}
body a.cj-btn-yellow:hover {
    background: #2a4f86 !important;
    color: #ffffff !important;
}
body a.cj-btn-outline {
    background: transparent !important;
    border: 2px solid #2a4f86 !important;
    color: #2a4f86 !important;
    transition: background .2s ease, color .2s ease;
}
body a.cj-btn-outline:hover {
    background: #2a4f86 !important;
    color: #ffffff !important;
}
body a.cj-btn-outline-white {
    background: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    transition: background .2s ease, color .2s ease;
}
body a.cj-btn-outline-white:hover {
    background: #ffffff !important;
    color: #2a4f86 !important;
}

/* Keep white text on yellow / blue buttons even where a page-level rule used dark text */
body .load-actions .btn-sm,
body .load-actions .btn-sm.btn-outline,
body .load-actions .btn-sm:hover,
body .load-actions .btn-sm.btn-outline:hover {
    color: #ffffff !important;
}

/* BOOKED / disabled buttons: grey, inactive, no hover colour change */
body .jm-book-button.is-booked,
body .jm-book-button.is-booked:hover,
body .jm-book-button:disabled,
body .jm-book-button:disabled:hover,
body .jm-view-button.is-disabled,
body .jm-view-button.is-disabled:hover,
body .jm-loads-page .jm-loads-table .jm-view-button.is-disabled,
body .jm-loads-page .jm-loads-table .jm-view-button.is-disabled:hover,
body .btn-book.disabled,
body .btn-book.disabled:hover,
body a.btn-book.disabled,
body a.btn-book.disabled:hover,
body .btn-book[disabled],
body .btn-book[disabled]:hover {
    background: #d9dde1 !important;
    background-color: #d9dde1 !important;
    border: 1px solid #d9dde1 !important;
    color: #3a434c !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
/* =====================================================================
   LANDING PAGES (carico-shippers / carriers / advertisers) + BOOKED
   All buttons: yellow bg + white text. Hover: #2a4f86 bg + white text.
   ===================================================================== */

/* text links that used the old blue */
body a[style*="color: #0A6FA8"]:not([style*="border"]):not([style*="background"]) {
    color: #2a4f86 !important;
}
body a[style*="color: #0A6FA8"]:not([style*="border"]):not([style*="background"]):hover {
    color: #F2B705 !important;
}

/* every inline-styled button: yellow outline-blue, filled-blue, white-outline, yellow */
body a[style*="border: 2px solid #0A6FA8"],
body a[style*="border: 2px solid #FFFFFF"],
body a[style*="background: #0A6FA8"],
body a[style*="background: #F2B705"] {
    background: #F2B705 !important;
    border: 2px solid #F2B705 !important;
    color: #ffffff !important;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
body a[style*="border: 2px solid #0A6FA8"]:hover,
body a[style*="border: 2px solid #FFFFFF"]:hover,
body a[style*="background: #0A6FA8"]:hover,
body a[style*="background: #F2B705"]:hover {
    background: #2a4f86 !important;
    border-color: #2a4f86 !important;
    color: #ffffff !important;
}

/* Booked buttons (find-load table): yellow bg, white text, not clickable */
body .jm-book-button.is-booked,
body .jm-book-button.is-booked:hover,
body .jm-book-button:disabled,
body .jm-book-button:disabled:hover,
body .btn-book.disabled,
body .btn-book.disabled:hover,
body a.btn-book.disabled,
body a.btn-book.disabled:hover,
body .btn-book[disabled],
body .btn-book[disabled]:hover {
    background: #F2B705 !important;
    background-color: #F2B705 !important;
    border: 1px solid #F2B705 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
nav[aria-label="Choose your role"] a:hover {
    background: #2a4f86 !important;
    border-color: #2a4f86 !important;
	color:#fff !important;
}
html body.page-id-452 .banner-section-cjv{
	background-image:url(https://caricojm.com/wp-content/uploads/2026/10/image_029157_overlay_40.png) !important;
}
/* Banner / CTA buttons on landing pages = same size & shape as home-page hero button */
body a[style*="font-size: 17px"][style*="border-radius: 8px"] {
    display: inline-block;
    padding: 12px 30px !important;
    border-radius: 5px !important;
    border: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    text-align: center;
}