/* frontend/css/style.css */
/* Version 1.2.1 */

/* -------------------------------------------------------------------------- */
/* 1. Global Resets & Base Styles
/* -------------------------------------------------------------------------- */
body {
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0 !important;
    line-height: 1.6;
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body > span[class*="border-"],
body > span[class*="shape-"] {
    display: none !important;
}

a {
    text-decoration: none;
    transition: color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Courier New', Courier, monospace;
    text-transform: none;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0.75em;
}

.cronpost-section {
    padding: 50px 0;
}

.section-title {
    font-size: 2em;
    margin-bottom: 40px;
    font-weight: bold;
    text-align: center;
}

/* -------------------------------------------------------------------------- */
/* 2. Theme Definitions
/* -------------------------------------------------------------------------- */

/* ----- Dark Theme (Default) ----- */
body.theme-dark {
    background-color: #121212;
    color: #e0e0e0;
}

body.theme-dark header.site-header .header-wrapper,
body.theme-dark .section-divider,
body.theme-dark footer.site-footer {
    border-color: #333333 !important;
}

body.theme-dark a {
    color: #ffa500;
}
body.theme-dark a:hover {
    color: #ffc966;
}

body.theme-dark .site-branding h1 a {
    color: #e0e0e0 !important;
}
body.theme-dark .site-branding h1 a:hover {
    color: #ffa500 !important;
}

body.theme-dark nav.main-navigation ul.main-menu > li > a,
body.theme-dark nav.menu-responsive ul.main-menu > li > a {
    color: #c0c0c0;
}
body.theme-dark nav.main-navigation ul.main-menu > li > a:hover,
body.theme-dark nav.menu-responsive ul.main-menu > li > a:hover {
    color: #ffa500;
}

body.theme-dark .cta-button-nav,
body.theme-dark .cta-button-main {
    color: #121212 !important;
    background-color: #ffa500;
    border: 1px solid #ffa500;
    padding: 8px 15px;
    border-radius: 3px;
    font-weight: bold;
    display: inline-block;
}
body.theme-dark .cta-button-nav:hover,
body.theme-dark .cta-button-main:hover {
    background-color: #dd8c00;
    border-color: #dd8c00;
    color: #121212 !important;
}

body.theme-dark .hero-section h1,
body.theme-dark .hero-section h2.welcome-title {
    color: #ffa500;
}

body.theme-dark .section-title, body.theme-dark h2 {
    color: #e0e0e0;
}

body.theme-dark .step .step-icon {
    color: #ffa500;
}

body.theme-dark nav#nav ul.dropdown-menu,
body.theme-dark nav.menu-responsive ul.dropdown-menu {
    background-color: #2a2a2a;
    border: 1px solid #333333;
}
body.theme-dark nav#nav ul.dropdown-menu > li > a,
body.theme-dark nav.menu-responsive ul.dropdown-menu > li > a {
    color: #c0c0c0;
}
body.theme-dark nav#nav ul.dropdown-menu > li > a:hover,
body.theme-dark nav.menu-responsive ul.dropdown-menu > li > a:hover {
    background-color: #ffa500;
    color: #121212 !important;
}

.theme-dark .card {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}

.theme-dark .card-header,
.theme-dark .card-footer {
    background-color: #2a2a2a;
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
}

.theme-dark .table {
    color: #e0e0e0;
    --bs-table-bg: transparent;
    --bs-table-border-color: #333;
    --bs-table-striped-color: #f0f0f0;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-active-color: #f0f0f0;
    --bs-table-active-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: #f0f0f0;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

.theme-dark .table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
}

.theme-dark .modal-content {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}

.theme-dark .modal-header {
    border-bottom-color: #333;
}

.theme-dark .modal-footer {
    border-top-color: #333;
}

.theme-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.theme-dark .list-group-item {
    background-color: transparent;
    border-color: #333;
    color: #e0e0e0;
}

.theme-dark a.list-group-item-action:hover {
    background-color: #2a2a2a;
}

.theme-dark .nav-tabs .nav-link {
    border-color: #333;
    color: #adb5bd;
}

.theme-dark .nav-tabs .nav-link.active {
    background-color: #1e1e1e;
    border-color: #333;
    border-bottom-color: #1e1e1e;
    color: #fff;
}

.theme-dark .nav-tabs {
    border-bottom-color: #333;
}

.theme-dark .table td div,
.theme-dark .table td span {
    color: #e0e0e0;
}

.theme-dark .text-muted {
    color: #adb5bd !important;
}

.theme-dark .text-info {
    color: #6ea8fe !important;
}

.theme-dark .table th {
    color: #f8f9fa;
}

.theme-dark .table strong {
    color: #e0e0e0;
}

.theme-dark .table td {
    color: #e0e0e0;
}

.theme-dark .form-control,
.theme-dark .form-select {
    background-color: #2b3035;
    color: #dee2e6;
    border-color: #495057;
}

.theme-dark .form-control:focus,
.theme-dark .form-select:focus {
    background-color: #2b3035;
    color: #dee2e6;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.theme-dark .form-control::placeholder {
    color: #6c757d;
}

.theme-dark .form-control:disabled,
.theme-dark .form-select:disabled {
    background-color: #212529;
    opacity: 0.65;
}

.theme-dark .form-label,
.theme-dark .form-check-label,
.theme-dark .form-text {
    color: #f8f9fa;
}

.theme-dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.theme-dark .input-group-text {
    background-color: #343a40;
    border-color: #495057;
    color: #dee2e6;
}

/* Đổi màu chữ của các "viên thuốc" email đã nhập */
.theme-dark .multi-email-container .email-pill {
    background-color: #0d6efd; /* Giữ màu xanh dương của Bootstrap */
    color: #fff;
}

/* Đổi màu chữ của ô input đang gõ */
.theme-dark .multi-email-container input {
    color: #dee2e6 !important; /* Dùng !important để đảm bảo ghi đè */
}

/* Đổi màu chữ placeholder của ô input */
.theme-dark .multi-email-container input::placeholder {
    color: #6c757d;
}

/* ----- Light Theme ----- */
body.theme-light {
    background-color: #f0f0f0;
    color: #1c1c1c;
}

body.theme-light header.site-header .header-wrapper,
body.theme-light .section-divider,
body.theme-light footer.site-footer {
    border-color: #cccccc !important;
}

body.theme-light a {
    color: #d96c00;
}
body.theme-light a:hover {
    color: #b85a00;
}

body.theme-light .site-branding h1 a {
    color: #1c1c1c !important;
}
body.theme-light .site-branding h1 a:hover {
    color: #d96c00 !important;
}

body.theme-light nav.main-navigation ul.main-menu > li > a,
body.theme-light nav.menu-responsive ul.main-menu > li > a {
    color: #333333;
}
body.theme-light nav.main-navigation ul.main-menu > li > a:hover,
body.theme-light nav.menu-responsive ul.main-menu > li > a:hover {
    color: #d96c00;
}

body.theme-light .cta-button-nav,
body.theme-light .cta-button-main {
    color: #f0f0f0 !important;
    background-color: #d96c00;
    border: 1px solid #d96c00;
    padding: 8px 15px;
    border-radius: 3px;
    font-weight: bold;
    display: inline-block;
}
body.theme-light .cta-button-nav:hover,
body.theme-light .cta-button-main:hover {
    background-color: #b85a00;
    border-color: #b85a00;
    color: #f0f0f0 !important;
}

body.theme-light .hero-section h1,
body.theme-light .hero-section h2.welcome-title {
    color: #d96c00;
}

body.theme-light .section-title, body.theme-light h2 {
    color: #1c1c1c;
}

body.theme-light .step .step-icon {
    color: #d96c00;
}

body.theme-light nav#nav ul.dropdown-menu,
body.theme-light nav.menu-responsive ul.dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #cccccc;
}
body.theme-light nav#nav ul.dropdown-menu > li > a,
body.theme-light nav.menu-responsive ul.dropdown-menu > li > a {
    color: #333333;
}
body.theme-light nav#nav ul.dropdown-menu > li > a:hover,
body.theme-light nav.menu-responsive ul.dropdown-menu > li > a:hover {
    background-color: #d96c00;
    color: #f0f0f0 !important;
}

/* -------------------------------------------------------------------------- */
/* 3. Header Styles - Tinh chỉnh lại theo cấu trúc Bootstrap
/* -------------------------------------------------------------------------- */

header.site-header {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    animation: none !important;
    border: none !important;
}

header.site-header .header-wrapper {
    padding: 15px 0;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    width: 100%;
    box-sizing: border-box;
}

header.site-header .row {
    display: flex;
    align-items: center;
}

header.site-header .col-md-4 {
    display: flex;
    align-items: center;
}

header.site-header .col-md-8 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.logo-area {
    display: flex;
    align-items: center;
}
.logo-area h1 {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 1.8em !important;
    font-weight: bold !important;
    text-transform: none !important;
    margin: 0;
}
.logo-area img {
    height: 30px;
    margin-right: 8px;
    vertical-align: middle;
}

nav#nav {
}

nav.main-navigation ul.main-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}
nav.main-navigation ul.main-menu > li {
    margin-left: 15px;
}
nav.main-navigation ul.main-menu > li:first-child {
    margin-left: 0;
}
nav.main-navigation ul.main-menu > li > a {
    padding: 10px 12px;
    font-size: 0.9em;
    text-transform: uppercase;
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: normal !important;
}

nav#nav ul.main-menu li.dropdown ul.dropdown-menu,
nav.menu-responsive ul.main-menu li.dropdown ul.dropdown-menu {
    min-width: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 13px;
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0,0,0,.15);
    position: absolute;
    display: none;
}
nav#nav ul.main-menu li.dropdown.open ul.dropdown-menu,
nav.menu-responsive ul.main-menu li.dropdown.open ul.dropdown-menu {
    display: block;
}
nav#nav ul.main-menu li.dropdown ul.dropdown-menu > li,
nav.menu-responsive ul.main-menu li.dropdown ul.dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
}
nav#nav ul.main-menu li.dropdown ul.dropdown-menu > li > a,
nav.menu-responsive ul.main-menu li.dropdown ul.dropdown-menu > li > a {
    display: block !important;
    padding: 6px 15px !important;
    font-weight: normal !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    text-transform: none !important;
    font-family: 'Courier New', Courier, monospace !important;
}

/* -------------------------------------------------------------------------- */
/* 4. Hero Section Styles
/* -------------------------------------------------------------------------- */
.hero-section {
    padding: 60px 0;
    text-align: center;
}
.hero-section#menu-1 {
    animation: none !important;
}
.hero-section .welcome-title {
    font-size: 2.5em;
    margin-bottom: 25px;
    font-weight: bold;
    animation: none !important;
}
.hero-section .subtitle {
    font-size: 1.1em;
    line-height: 1.7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px;
    opacity: 0.9;
    animation: none !important;
}

.home-section#menu-1 .home-intro {
    margin-bottom: 0;
}
.home-section#menu-1 .list-icons,
.home-section#menu-1 .home-projects {
    display: none !important;
}

/* -------------------------------------------------------------------------- */
/* 5. How It Works, User Stories, Final CTA Section Styles
/* -------------------------------------------------------------------------- */
.how-it-works-section,
.user-stories-section,
.final-cta-section {
    padding: 50px 0;
    text-align: center;
}

.steps-container,
.stories-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}
.step {
    flex-basis: calc(25% - 22px);
    min-width: 180px;
    padding: 2px;
    border: 1px solid;
    border-radius: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
body.theme-dark .step { border-color: #333; }
body.theme-light .step { border-color: #ccc; }
.step .step-icon-wrapper {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.step .step-icon {
    font-size: 2.2em;
    font-weight: bold;
}
.step h3 {
    font-size: 1.15em;
    margin-bottom: 10px;
    font-weight: bold;
}
.step p {
    font-size: 0.9em;
    line-height: 1.5;
    opacity: 0.85;
    flex-grow: 1;
}

.story {
    flex-basis: calc(33.333% - 22px);
    min-width: 250px;
    padding: 20px;
    border: 1px dashed;
    border-radius: 3px;
    opacity: 0.9;
}
body.theme-dark .story { border-color: #444; }
body.theme-light .story { border-color: #bbb; }

.story h4 {
    font-size: 1.1em;
    font-style: normal;
    margin-bottom: 10px;
}

.final-cta-section h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
}
.final-cta-section p {
    margin-bottom: 30px;
    font-size: 1.1em;
    opacity: 0.9;
}

/* -------------------------------------------------------------------------- */
/* 7. Footer Styles - Updated as per new requirements
/* -------------------------------------------------------------------------- */

footer.site-footer {
    padding: 25px 0 !important;
    font-size: 0.9em;
    border-top-width: 1px !important;
    border-top-style: solid !important;
}

/* Main container for footer items */
footer.site-footer .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Stack items on mobile */
    gap: 15px;
}

.footer-copyright {
    text-align: center; /* Center text on mobile */
    flex-basis: 100%; /* Full width on mobile */
    order: 1;
}
.footer-copyright p {
    margin-bottom: 0;
    opacity: 0.8;
}

.cronpost-footer-nav {
    text-align: center;
    flex-basis: 100%; /* Full width on mobile */
    order: 2;
}
.cronpost-footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}
.cronpost-footer-nav ul li {
    margin: 0 8px 5px;
}

/* Container for both Language and Theme selectors */
.footer-selectors-container {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between dropdowns */
    flex-basis: 100%; /* Full width on mobile */
    order: 3;
}
body.theme-dark #language-dropdown option,
body.theme-dark #theme-dropdown option {
    background-color: #2b3035;
    color: #e0e0e0;
}

/* --- Shared style for both dropdowns for 100% consistency --- */
#theme-dropdown,
#language-dropdown {
    background-color: inherit;
    color: inherit;
    border: 1px solid;
    padding: 5px 8px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

/* --- Desktop Layout Tweaks --- */
@media (min-width: 768px) {
    footer.site-footer .container {
        flex-wrap: nowrap; /* Prevent items from wrapping to the next line */
    }

    /* Rule for Copyright and Selectors containers */
    .footer-copyright,
    .footer-selectors-container {
        flex-basis: auto;
        text-align: left;
    }
    
    /* MODIFIED: Rule for Footer Navigation */
    .cronpost-footer-nav {
        flex-basis: auto;
        flex-grow: 1; /* Allows the nav to expand and fill available space */
        text-align: center; /* Horizontally centers the nav links */
    }

    /* This rule pushes the selectors container to the far right */
    .footer-selectors-container {
        margin-left: auto;
    }
}

/* -------------------------------------------------------------------------- */
/* 8. Responsive
/* -------------------------------------------------------------------------- */
#main-footer.disabled {
  opacity: 0.5;
  pointer-events: none;
}

a.toggle-nav {
    color: inherit !important;
    background: transparent !important;
    width: auto;
    height: auto;
    line-height: normal;
    padding: 10px;
    margin: 10px 0 !important;
    top: 5px !important;
    right: 15px !important;
}
a.toggle-nav i.fa-bars {
    font-size: 1.8em;
}

nav.menu-responsive {
    background-color: transparent !important;
    padding: 0 !important;
}
nav.menu-responsive ul.main-menu {
    flex-direction: column;
    width: 100%;
}
body.theme-dark nav.menu-responsive ul.main-menu { background-color: rgba(26,26,26,0.95); }
body.theme-light nav.menu-responsive ul.main-menu { background-color: rgba(248,249,250,0.98); }

nav.menu-responsive ul.main-menu > li {
    margin-left: 0;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid;
}
body.theme-dark nav.menu-responsive ul.main-menu > li { border-color: #333; }
body.theme-light nav.menu-responsive ul.main-menu > li { border-color: #ddd; }

nav.menu-responsive ul.main-menu > li:last-child {
    border-bottom: none;
}
nav.menu-responsive ul.main-menu > li > a {
    padding: 12px 20px;
    display: block;
}
nav.menu-responsive ul.main-menu li.dropdown ul.dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    box-shadow: none !important;
    border-top: 1px solid !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
}
body.theme-dark nav.menu-responsive ul.main-menu li.dropdown ul.dropdown-menu { border-top-color: #444 !important;}
body.theme-light nav.menu-responsive ul.main-menu li.dropdown ul.dropdown-menu { border-top-color: #ddd !important;}

nav.menu-responsive ul.main-menu li.dropdown ul.dropdown-menu > li > a {
    padding-left: 30px !important;
}

@media (max-width: 767px) {
    .step, .story {
        flex-basis: calc(100% - 20px);
        margin-bottom: 20px;
    }
    .hero-section h1 { font-size: 1.8em; }
    .hero-section .subtitle { font-size: 0.9em; }
    .section-title { font-size: 1.6em; }

    .cronpost-footer-nav ul { margin: 10px 0; }
    .cronpost-footer-nav ul li { margin: 5px 7px; }
}

@media (min-width: 768px) {
    footer.site-footer .container {
        flex-direction: row;
        justify-content: space-between;
    }
    .footer-copyright {
        flex-basis: auto;
        text-align: left;
        order: 1;
    }
    .cronpost-footer-nav {
        flex-basis: auto;
        order: 2;
    }
    .footer-theme-selector {
        flex-basis: auto;
        justify-content: flex-end;
        order: 3;
    }
}

.section-divider {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 40px;
    margin-bottom: 0;
}

main section:last-of-type.section-divider {
    border-bottom: none;
    padding-bottom: 0;
}

.btn-custom-google {
    background-color: transparent !important;
    border: none !important;
    padding: 0;
    outline: none !important;
    box-shadow: none !important;
    display: inline-block;
    line-height: 0;
    transition: transform 0.1s ease-out;
}

.btn-custom-google:hover {
    opacity: 0.9;
}

.btn-custom-google:active {
    transform: scale(0.98);
    opacity: 1;
}

.btn-custom-google:focus,
.btn-custom-google:active {
    outline: none !important;
    box-shadow: none !important;
}

.btn-custom-google img {
    display: block;
    width: auto;
    max-height: 40px;
}

.otp-input-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.otp-input {
    width: 45px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    border: 1px solid #495057;
    border-radius: .375rem;
    background-color: #343a40;
    color: #fff;
    -webkit-appearance: none;
    margin: 0;
}

.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-input[type=number] {
    -moz-appearance: textfield;
}

.otp-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

/* --- IN-APP MESSAGING --- */

#message-view-body {
    display: flex;
    flex-direction: column;
}

.message-group-sent, .message-group-received {
    display: flex;
    flex-direction: column;
    max-width: 75%;
    margin-bottom: 1rem;
}

.message-group-sent {
    align-self: flex-end;
    align-items: flex-end;
}

.message-group-received {
    align-self: flex-start;
    align-items: flex-start;
}

.message {
    padding: 0.75rem 1rem;
    border-radius: 1.25rem;
    word-wrap: break-word;
    line-height: 1.4;
}

.message-group-sent .message {
    background-color: #007bff;
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.message-group-received .message {
    background-color: #495057;
    color: white;
    border-bottom-left-radius: 0.25rem;
}

.message-timestamp {
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.25rem;
    padding: 0 0.5rem;
}

#iam-main-card .card-header { padding: 0.5rem 1rem; }
#iam-nav-tabs .nav-link { padding: 0.75rem 1rem; cursor: pointer; }
#iam-content-pane { min-height: 65vh; position: relative; }
#iam-message-detail-view .message-body { white-space: pre-wrap; word-wrap: break-word; padding: 1.25rem; border-top: 1px solid var(--bs-border-color); }
.unread-indicator { width: 10px; height: 10px; border-radius: 50%; background-color: transparent; flex-shrink: 0; margin-right: 10px; }
.unread-indicator.unread { background-color: var(--bs-primary); }
.multi-email-container { display: flex; flex-wrap: wrap; align-items: center; padding: 5px; cursor: text; }
.email-pill { display: inline-flex; align-items: center; background-color: #007bff; color: white; border-radius: 10px; padding: 2px 8px; margin: 2px; font-size: 0.9em; }
.email-pill .remove-pill { margin-left: 5px; cursor: pointer; font-weight: bold; }
.multi-email-container input { border: none; outline: none; flex-grow: 1; padding: 5px; background-color: transparent; color: var(--bs-body-color); }

/* --- Sending History Page Styles --- */
.text-truncate {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.sortable-header {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sortable-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.sortable-header .sort-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: #6c757d;
}

.sortable-header.active .sort-icon {
    color: #fff;
}

/* --- Pricing Table --- */
.pricing-table {
    margin-top: 2rem;
    border-radius: .5rem;
    overflow: hidden;
}

.pricing-table th, .pricing-table td {
    vertical-align: middle;
    text-align: center;
    padding: 1rem 0.75rem;
}

.pricing-table .feature-col {
    width: 40%;
}

.pricing-table .feature-column {
    text-align: left;
    font-weight: 500;
}

.pricing-table thead th {
    font-size: 1.1rem;
    padding: 1.25rem 0.75rem;
}

.pricing-table .table-group-header td {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    text-align: left;
    padding-left: 1.5rem;
}

.pricing-table .icon-yes { color: #198754; font-size: 1.2rem; }
.pricing-table .icon-no { color: #dc3545; font-size: 1.2rem; }

/* Styles for Dark Theme */
.theme-dark .pricing-table {
    border-color: #444;
}

.theme-dark .pricing-table .table-group-header td {
    background-color: rgba(255, 255, 255, 0.05);
    color: #adb5bd;
}

/* Highlight the Premium column (3rd child) in dark theme */
.theme-dark .pricing-table td:nth-child(3), 
.theme-dark .pricing-table th:nth-child(3) {
    background-color: rgba(13, 110, 253, 0.1);
}

.theme-dark .accordion-button {
    background-color: #2a2a2a;
    color: #e0e0e0;
}
.theme-dark .accordion-button:not(.collapsed) {
    background-color: #0d6efd;
    color: white;
}
.theme-dark .accordion-item {
    background-color: #1e1e1e;
    border-color: #333;
}
.theme-dark .accordion-body {
    background-color: #1e1e1e;
}


/* Styles for Light Theme */
.theme-light .pricing-table {
    color: #212529;
    border-color: #dee2e6;
}

.theme-light .pricing-table .table-group-header td {
    background-color: #f8f9fa;
    color: #6c757d;
}

/* Highlight the Premium column (3rd child) in light theme */
.theme-light .pricing-table td:nth-child(3), 
.theme-light .pricing-table th:nth-child(3) {
    background-color: #e9f4ff;
}

.theme-light .pricing-table th,
.theme-light .pricing-table td,
.theme-light .pricing-table .feature-column,
.theme-light .pricing-table td strong {
    color: #212529;
}

.theme-light .pricing-table .text-muted {
    color: #6c757d !important;
}

.theme-light .table-bordered {
    border-color: #dee2e6;
}

.theme-light .accordion-button {
    background-color: #f8f9fa;
    color: #212529;
}
.theme-light .accordion-button:not(.collapsed) {
    background-color: #0d6efd;
    color: white;
}
.theme-light .accordion-item {
    background-color: #fff;
    border-color: #dee2e6;
}

/* --- Fix for Dashboard Header Mobile Menu --- */

nav.menu-responsive ul.main-menu {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 0.375rem;
}

nav.menu-responsive ul.main-menu li {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

nav.menu-responsive ul.main-menu li:last-child {
    border-bottom: none;
}

nav.menu-responsive ul.main-menu li a {
    display: block;
    padding: 12px 15px;
    font-weight: 500;
}

nav.menu-responsive ul.main-menu li hr.dropdown-divider {
    margin: 0;
}

/* === Fix for Dashboard Header v1.6.0 === */

/* Desktop User Dropdown Theme Fix */
.theme-dark .user-dropdown .dropdown-menu {
    background-color: #2a2a2a;
    border-color: #333;
}
.theme-dark .user-dropdown .dropdown-menu .dropdown-item {
    color: #c0c0c0;
}
.theme-dark .user-dropdown .dropdown-menu .dropdown-item:hover,
.theme-dark .user-dropdown .dropdown-menu .dropdown-item:focus {
    background-color: #ffa500;
    color: #121212;
}
.theme-dark .user-dropdown .dropdown-divider {
    border-top-color: #333;
}

.theme-light .user-dropdown .dropdown-menu {
    background-color: #ffffff;
    border-color: #cccccc;
}
.theme-light .user-dropdown .dropdown-menu .dropdown-item {
    color: #333333;
}
.theme-light .user-dropdown .dropdown-menu .dropdown-item:hover,
.theme-light .user-dropdown .dropdown-menu .dropdown-item:focus {
    background-color: #d96c00;
    color: #f0f0f0;
}

/* Mobile Menu Styling */
nav.menu-responsive ul.main-menu {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 0.375rem;
}
nav.menu-responsive ul.main-menu li {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
nav.menu-responsive ul.main-menu li:last-child {
    border-bottom: none;
}
nav.menu-responsive ul.main-menu li a {
    display: block;
    padding: 12px 15px;
    font-weight: 500;
}
nav.menu-responsive ul.main-menu li hr.dropdown-divider {
    margin: 0;
}

.theme-dark nav.menu-responsive ul.main-menu {
    background-color: #1e1e1e;
    border: 1px solid #333;
}
.theme-dark nav.menu-responsive ul.main-menu li {
    border-color: #333;
}
.theme-dark nav.menu-responsive ul.main-menu a {
    color: #e0e0e0;
}
.theme-dark nav.menu-responsive ul.main-menu a:hover {
    background-color: #ffa500;
    color: #121212;
}

.theme-light nav.menu-responsive ul.main-menu {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
}
.theme-light nav.menu-responsive ul.main-menu li {
    border-color: #dee2e6;
}
.theme-light nav.menu-responsive ul.main-menu a {
    color: #212529;
}
.theme-light nav.menu-responsive ul.main-menu a:hover {
    background-color: #d96c00;
    color: #f0f0f0;
}

/* --- I18N Anti-Flicker v1.0 --- */
main[data-i18n-container] {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

main[data-i18n-container].i18n-ready {
    visibility: visible;
    opacity: 1;
}

/* Flatpickr Dark Theme */
.flatpickr-calendar.dark {
    background: #343a40;
    border-color: #495057;
    box-shadow: 0 3px 15px rgba(0,0,0,0.2);
}
.flatpickr-calendar.dark .flatpickr-months .flatpickr-month,
.flatpickr-calendar.dark .flatpickr-months .flatpickr-current-month,
.flatpickr-calendar.dark .flatpickr-weekday,
.flatpickr-calendar.dark .numInput,
.flatpickr-calendar.dark .numInputWrapper span {
    color: #f8f9fa;
}
.flatpickr-calendar.dark .flatpickr-day {
    color: #adb5bd;
}
.flatpickr-calendar.dark .flatpickr-day:hover {
    background: #495057;
}
.flatpickr-calendar.dark .flatpickr-day.today {
    border-color: #0d6efd;
}
.flatpickr-calendar.dark .flatpickr-day.selected,
.flatpickr-calendar.dark .flatpickr-day.startRange,
.flatpickr-calendar.dark .flatpickr-day.endRange {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}
.flatpickr-calendar.dark .flatpickr-time input {
    color: #f8f9fa;
}
.flatpickr-calendar.dark .flatpickr-time .flatpickr-am-pm:hover {
    background: #495057;
}

#quote-folders-container .badge,
#discover-results-container .badge {
    background-color: #bf0de2 !important;
    color: #fff !important;
}

/* User Reviews Section */
.user-reviews-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

#reviews-container {
    transition: opacity 0.5s ease-in-out;
    min-height: 180px;
}

#reviews-container.fading-out {
    opacity: 0;
}

.review-card {
    border-left: 3px solid #007bff;
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
    min-height: 220px; 
}

.review-card .rating-stars {
    color: #ffc107;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.review-card .review-comment {
    font-style: italic;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    min-height: 72px; 
}

.review-card .review-author {
    font-weight: bold;
    color: #adb5bd;
    font-size: 0.9rem;
}

.show-all-link {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}
.show-all-link:hover {
    text-decoration: underline;
}