/*
 * Jemixo theme - shared by Super Admin, Admin, auth pages and the public website.
 * Loaded AFTER the compiled stylesheets (style.css, page.css, new_home/*.css) so it only
 * overrides colours; nothing in the compiled bundles is edited.
 *
 * Brand palette (from the Jemixo brand guide):
 *   #75b998  mint   - primary fills (buttons, active menu, toggles)
 *   #7ebc75  leaf   - secondary accent (badges, highlights)
 *   #f2f4f2  mist   - page background
 * Everything else is derived from those three. #75b998 is too light for white text
 * (2.3:1), so text on mint is dark ink (6.8:1) and text/links on white use the deeper
 * same-hue shade --jx-deep (5.6:1). Change the tokens below to retune the whole app.
 */
:root {
    --jx-mint: #75b998;
    --jx-leaf: #7ebc75;
    --jx-mist: #f2f4f2;

    --jx-mint-hover: #5aab84;   /* mint, 8% darker */
    --jx-leaf-hover: #65af5a;
    --jx-deep: #2f7453;         /* links, headings, icons on white */
    --jx-deep-hover: #296548;
    --jx-ink: #10281c;          /* text on mint / leaf fills */

    --jx-tint-50: #f1f8f5;      /* alternate table rows */
    --jx-tint-100: #e3f1ea;     /* table headers, chips */
    --jx-tint-200: #cfe6db;     /* borders */
    --jx-leaf-tint: #ecf5ea;
    --jx-card-gradient: linear-gradient(135deg, #f1f8f5 0%, #e3f1ea 55%, #ecf5ea 100%);

    --bs-primary: var(--jx-mint);
    --bs-primary-rgb: 117, 185, 152;
    --bs-info: var(--jx-mint);
    --bs-link-color: var(--jx-deep);
    --bs-link-hover-color: var(--jx-deep-hover);
}

/* ---------------------------------------------------------------- *
 * Admin + Super Admin + auth pages
 * ---------------------------------------------------------------- */
body {
    background-color: var(--jx-mist);
}

/* primary buttons: mint fill + dark ink text */
html body .btn-primary,
html body .btn-info,
html body .login-btn,
html body .register-btn,
html body .reset-link {
    background-color: var(--jx-mint) !important;
    border-color: var(--jx-mint) !important;
    color: var(--jx-ink) !important;
}
html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-info:hover,
html body .login-btn:hover,
html body .register-btn:hover,
html body .reset-link:hover {
    background-color: var(--jx-mint-hover) !important;
    border-color: var(--jx-mint-hover) !important;
    color: var(--jx-ink) !important;
}
/* outline buttons: deep text so it stays readable on white */
html body .btn-outline-primary {
    color: var(--jx-deep) !important;
    border-color: var(--jx-mint) !important;
    background-color: transparent !important;
}
html body .btn-outline-primary:hover {
    background-color: var(--jx-mint) !important;
    color: var(--jx-ink) !important;
}
html body .btn-secondary {
    background-color: var(--jx-leaf) !important;
    border-color: var(--jx-leaf) !important;
    color: var(--jx-ink) !important;
}
html body .btn-secondary:hover {
    background-color: var(--jx-leaf-hover) !important;
    border-color: var(--jx-leaf-hover) !important;
}

a {
    color: var(--jx-deep);
}
a:hover {
    color: var(--jx-deep-hover);
}
html body .text-primary,
html body .text-info {
    color: var(--jx-deep) !important;
}
html body .bg-primary,
html body .bg-info {
    background-color: var(--jx-mint) !important;
    color: var(--jx-ink) !important;
    opacity: 1 !important;
}
html body .bg-secondary {
    background-color: var(--jx-leaf) !important;
    color: var(--jx-ink) !important;
}
.form-check-input:checked {
    background-color: var(--jx-mint) !important;
    border-color: var(--jx-mint) !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--jx-mint);
    box-shadow: 0 0 0 0.2rem rgba(117, 185, 152, 0.25);
}

/* table headers (were blue-grey #d9e0ea) */
.dashboard-table thead tr th,
.dashboard-table-recent thead tr th,
.table > thead > tr > th,
table thead th {
    background: var(--jx-tint-100) !important;
    color: var(--jx-ink);
    border-bottom-color: var(--jx-tint-200) !important;
}
.dashboard-table tbody tr:nth-of-type(2n) td,
.dashboard-table-recent tbody tr:nth-of-type(2n) td {
    --bs-table-accent-bg: var(--jx-tint-50) !important;
    background-color: var(--jx-tint-50) !important;
}

/* dashboard stat cards: one mint family, like the jemixo.com result card */
.dashboard-card-row .dashboard-card .dashboard-card-bg {
    background-image: var(--jx-card-gradient) !important;
    border: 1px solid var(--jx-tint-200) !important;
}
.dashboard-card-row .dashboard-card .dashboard-card-bg h5,
.dashboard-card-row .dashboard-card .dashboard-card-bg p,
.dashboard-card-row .dashboard-card .dashboard-card-bg .add-card a {
    color: var(--jx-ink) !important;
}
.dashboard-card-row .dashboard-card .dashboard-card-bg .card-icon {
    background-color: var(--jx-mint) !important;
    color: var(--jx-ink) !important;
}
.dashboard-card-row .dashboard-card .dashboard-card-bg:after {
    background-image: radial-gradient(circle, #a9d6c0, #cfe6db61 40%, #0000 70%) !important;
}

/* modal inputs + misc blue-grey surfaces */
.common-modal-card .form-control,
.common-modal-card .modal-footer .discard-btn {
    background-color: var(--jx-tint-50) !important;
}
.template-border {
    border-color: var(--jx-mint) !important;
}
.analytics-badge {
    background: var(--jx-card-gradient);
    border-color: var(--jx-tint-200);
}
.analytics-icon,
.analytics-count {
    color: var(--jx-deep);
}

/* places where the compiled CSS used the primary colour as TEXT/ICON colour, or put white on it */
.dashboard-calendar-btn,
.common-modal-card .form-control,
.common-modal-card .modal-footer .discard-btn,
.common-modal-card .modal-footer .discard-btn:hover,
.common-modal-card .modal-footer .btn-primary:hover {
    color: var(--jx-deep) !important;
}
.dashboard-calendar-btn svg path,
.graph-icon svg path {
    fill: var(--jx-deep) !important;
}
.graph-icon {
    background-color: var(--jx-tint-100) !important;
}
.sidebar-bottom-btn:hover,
.dashboard-dropdown:hover {
    background-color: var(--jx-mint) !important;
    color: var(--jx-ink) !important;
}
.sidebar-bottom-btn:hover i,
.sidebar-bottom-btn:hover span,
.dashboard-dropdown:hover span {
    color: var(--jx-ink) !important;
}
.sidebar-bottom-btn:hover svg path,
.dashboard-dropdown:hover svg path {
    fill: var(--jx-ink) !important;
}

/* leftovers found by scanning the rendered pages */
html body .link-info {
    color: var(--jx-deep) !important;
}
html body .bg-light-info {
    background-color: var(--jx-tint-100) !important;
    color: var(--jx-deep) !important;
}
html body .bg-light-success {
    background-color: var(--jx-leaf-tint) !important;
    color: #3d7a35 !important;
}
/* active sidebar item: ink on mint (white on #75b998 is only 2.3:1) */
.nav-item.active > .nav-link,
.nav-item.active > .nav-link span {
    color: var(--jx-ink) !important;
}
/* navy (#1C274C) header icons */
svg path[fill="#1C274C" i] {
    fill: var(--jx-deep);
}

/* ---------------------------------------------------------------- *
 * Public website (new_home theme) - purple #7638f9 -> mint
 * ---------------------------------------------------------------- */
.nav-link:active,
.header .dropdown .dropdown-menu li .nav-link:focus,
.header .dropdown .dropdown-menu li .nav-link:hover {
    color: var(--jx-deep) !important;
}
.btn-white {
    border-color: var(--jx-mint);
    color: var(--jx-deep);
}
.btn-white.active,
.btn-white:active,
.btn-white:focus,
.btn-white:hover {
    background-color: var(--jx-mint);
    border-color: var(--jx-mint);
    color: var(--jx-ink);
}
.btn-primary-light,
.btn-primary.active,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    background-color: #fff;
    border-color: var(--jx-mint);
    color: var(--jx-deep);
}
.btn-primary-light.active,
.btn-primary-light:active,
.btn-primary-light:focus,
.btn-primary-light:hover {
    background-color: var(--jx-mint);
    border-color: var(--jx-mint);
    color: var(--jx-ink);
}
.section-heading h2:after {
    background-color: var(--jx-mint);
}
mark {
    color: var(--jx-deep);
}
.slick-arrow {
    background-color: var(--jx-mint);
    border-color: var(--jx-mint);
    color: var(--jx-ink);
}
.slick-arrow.active,
.slick-arrow:active,
.slick-arrow:focus,
.slick-arrow:hover {
    background-color: transparent;
    border-color: var(--jx-mint);
    color: var(--jx-deep);
}
.features-section .feature-slider .slick-list .feature-card:hover .card-img {
    border-color: var(--jx-mint);
    box-shadow: 0 0 20px var(--jx-tint-100);
}
.modern-interface-section .interface-card .interface-img:before {
    border-color: var(--jx-mint);
}
.pricing-plan-section .pricing-slider .pricing-card .pricing-plan-list li.active-check .check-box,
.pricing-plan-section .pricing-slider .slick-current .pricing-card .price,
.pricing-plan-section .pricing-slider .slick-dots li.slick-active button:before,
.contact-section .icon-purpul,
.center-slider .slick-arrow,
.less-plan-icon-btn,
.show-plan-icon-btn {
    color: var(--jx-deep) !important;
}
.pricing-plan-section .pricing-slider .slick-current .pricing-card .btn-gray {
    background-color: var(--jx-mint);
    color: var(--jx-ink);
}
.testimonial-section .testimonial-slider .testimonial-card {
    border-bottom-color: var(--jx-mint);
    border-right-color: var(--jx-mint);
}
.testimonial-section .testimonial-slider .testimonial-card .profile-img {
    border-color: var(--jx-mint);
}

/* purple hero blob is a raster image (#7638f9, hue ~258deg) -> lighter mint */
img[src*="hero-bg"] {
    filter: hue-rotate(-107deg) saturate(0.5) brightness(1.5);
}
/* decorative purple/magenta shapes (hues 259 / 285 -> ~151 mint) */
img[src*="new_home_page/shape-1."],
img[src*="new_home_page/quote-img"] {
    filter: hue-rotate(-107deg) saturate(0.75) brightness(1.25);
}
img[src*="new_home_page/shape-4."] {
    filter: hue-rotate(-134deg) saturate(0.75) brightness(1.2);
}

/* inner pages (vCard templates, blog, FAQ...): the banner sits under a white-text header, so it
   uses the deep shade of the mint (white on it is 5.6:1) instead of the light mint fill */
html body .hero-section.bg-primary {
    background: linear-gradient(135deg, #296548 0%, #2f7453 55%, #35825d 100%) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------- *
 * Homepage Polish & Aesthetics
 * ---------------------------------------------------------------- */

/* Floating hero card animation */
@keyframes jxFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(0.4deg);
    }
}
.hero-floating-card {
    animation: jxFloat 6s ease-in-out infinite;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.hero-floating-card:hover {
    transform: translateY(-6px) scale(1.02);
}

.hero-section {
    position: relative;
    overflow: hidden;
}
.hero-pill-badge {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-action-buttons .btn-primary {
    background: linear-gradient(135deg, var(--jx-mint) 0%, var(--jx-leaf) 100%) !important;
    border: none !important;
    color: var(--jx-ink) !important;
    box-shadow: 0 10px 22px rgba(117, 185, 152, 0.3) !important;
    transition: all 0.3s ease;
}
.hero-action-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(117, 185, 152, 0.45) !important;
}
.hero-action-buttons .btn-outline-primary {
    border: 1.5px solid var(--jx-mint) !important;
    color: var(--jx-deep) !important;
    background: #ffffff !important;
    transition: all 0.3s ease;
}
.hero-action-buttons .btn-outline-primary:hover {
    background: var(--jx-mint) !important;
    color: var(--jx-ink) !important;
    transform: translateY(-2px);
}

/* Feature cards: elevate and animate */
.features-section .feature-card {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.features-section .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(47, 116, 83, 0.12) !important;
    border-color: var(--jx-mint) !important;
}
.features-section .feature-icon-badge {
    transition: transform 0.3s ease, background 0.3s ease;
}
.features-section .feature-card:hover .feature-icon-badge {
    transform: scale(1.08);
}

/* vCard templates: smooth card hover */
.vcard-template-section .vcard-card {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-radius: 20px;
    overflow: hidden;
}
.vcard-template-section .vcard-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(16, 40, 28, 0.16) !important;
}

/* Header navbar styling */
.header .navbar-nav .nav-item .nav-link {
    font-weight: 500;
    transition: color 0.2s ease;
}
.header .navbar-nav .nav-item .nav-link:hover,
.header .navbar-nav .nav-item .nav-link.active {
    color: var(--jx-deep) !important;
}
.header .btn-white {
    border-radius: 50px !important;
    padding: 8px 22px !important;
    font-weight: 600 !important;
    border: 1.5px solid var(--jx-mint) !important;
    transition: all 0.25s ease;
}
.header .btn-white:hover {
    background-color: var(--jx-mint) !important;
    color: var(--jx-ink) !important;
    box-shadow: 0 6px 16px rgba(117, 185, 152, 0.3);
}

/* Cookie consent banner: sleek frosted glass */
.cookie-consent {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--jx-tint-200) !important;
    box-shadow: 0 -10px 30px rgba(16, 40, 28, 0.08) !important;
    padding: 16px 24px !important;
    z-index: 9999 !important;
}
.cookie-consent .cookie-consent__message {
    color: var(--jx-ink) !important;
    font-size: 14px !important;
    font-weight: 500;
}
.cookie-consent .cookie-consent__agree {
    background-color: var(--jx-mint) !important;
    border-color: var(--jx-mint) !important;
    color: var(--jx-ink) !important;
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 14px rgba(117, 185, 152, 0.35) !important;
    transition: all 0.25s ease;
}
.cookie-consent .cookie-consent__agree:hover {
    background-color: var(--jx-mint-hover) !important;
    transform: translateY(-1px);
}
.cookie-consent .js-cookie-consent-declined {
    background-color: transparent !important;
    border: 1px solid var(--jx-tint-200) !important;
    color: #556960 !important;
    border-radius: 50px !important;
    padding: 8px 22px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.25s ease;
}
.cookie-consent .js-cookie-consent-declined:hover {
    background-color: #f1f5f3 !important;
    color: var(--jx-ink) !important;
}

/* "AI vCard" button: was a blue->purple gradient */
html body .ai-btn {
    background: linear-gradient(135deg, var(--jx-mint) 0%, var(--jx-leaf) 100%) !important;
    border: 0 !important;
    color: var(--jx-ink) !important;
}
html body .ai-btn:hover {
    background: linear-gradient(135deg, var(--jx-mint-hover) 0%, var(--jx-leaf-hover) 100%) !important;
}

/* livewire tables: cloak phantom columns and fix table cell alignment */
[x-cloak] {
    display: none !important;
}
.laravel-livewire-tables-reorderingMinimised {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
.dashboard-table thead th,
.livewire-table thead th {
    vertical-align: middle;
}
.dashboard-table tbody td,
.livewire-table tbody td {
    vertical-align: middle;
}