/* Client Theme System CSS */

/* Theme Variables (duplicated for fallback) */
:root {
    --accent-color-rgb: 52, 152, 219;
}

[data-theme="theme1"] {
    --primary-color: #d8b4dc;
    --secondary-color: #c299c7;
    --accent-color: #d8b4dc;
    --accent-color-rgb: 216, 180, 220;
    --text-dark: #6b4c75;
    --text-light: #8b6b95;
}

[data-theme="theme2"] {
    --primary-color: #486cc4;
    --secondary-color: #3d5ba3;
    --accent-color: #486cc4;
    --accent-color-rgb: 72, 108, 196;
    --text-dark: #2d4482;
    --text-light: #5577a2;
}

/* Override only PRIMARY colors, keep semantic colors */
.btn-primary,
.bg-primary:not(.alert):not(.badge):not(.card-header) {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary {
    color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

.text-primary:not(.alert):not(.badge) {
    color: var(--accent-color) !important;
}

/* Keep semantic colors for status indication */
/* .alert-success,
.bg-success,
.text-success,
.badge.bg-success,
.card-header.bg-success {
    background-color: #28a745 !important;
    color: white !important;
}

.alert-danger,
.bg-danger,
.text-danger,
.badge.bg-danger,
.card-header.bg-danger {
    background-color: #dc3545 !important;
    color: white !important;
}

.alert-warning,
.bg-warning,
.text-warning,
.badge.bg-warning,
.card-header.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.alert-info,
.bg-info,
.text-info,
.badge.bg-info,
.card-header.bg-info {
    background-color: #17a2b8 !important;
    color: white !important;
} */

/* Tables */
.table-primary {
    background-color: rgba(var(--accent-color-rgb), 0.1) !important;
}

.table thead th {
    background-color: var(--accent-color) !important;
    color: white !important;
}

.table-striped > tbody > tr:nth-child(odd) > td {
    background-color: rgba(var(--accent-color-rgb), 0.05) !important;
}

/* Primary badges only */
.badge.bg-primary {
    background-color: var(--accent-color) !important;
}

/* Primary progress only */
.progress-bar.bg-primary {
    background-color: var(--accent-color) !important;
}

/* Forms */
.form-control:focus,
.form-select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-color-rgb), 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Links (exclude title links so blog/service titles can set their own color) */
/* Exclude footer quick links (class .footer-link) from global themed anchors */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.title-link):not(.footer-link) {
    color: var(--accent-color) !important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.title-link):not(.footer-link):hover {
    color: var(--primary-color) !important;
}

/* Spinner */
.spinner-border.text-primary {
    color: var(--accent-color) !important;
}

/* Cards */
.card-header.bg-primary {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* List Group */
.list-group-item.active {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Navbar */
.navbar-brand {
    color: var(--primary-color) !important;
}

/* Pagination */
.page-link {
    color: var(--accent-color) !important;
}

.page-link:hover {
    color: var(--primary-color) !important;
    background-color: rgba(var(--accent-color-rgb), 0.1) !important;
    border-color: var(--accent-color) !important;
}

.page-item.active .page-link {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Dropdown */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--accent-color-rgb), 0.1) !important;
    color: var(--accent-color) !important;
}

/* Modern Service Card */
.modern-service-card:hover .title-link {
    color: var(--accent-color) !important;
}

.meta-item i {
    color: var(--accent-color) !important;
}

.modern-service-card:hover .meta-item {
    background: rgba(var(--accent-color-rgb), 0.1) !important;
    color: var(--accent-color) !important;
}

/* SweetAlert2 theme override */
.swal2-confirm {
    background-color: var(--accent-color) !important;
}

.swal2-cancel {
    background-color: var(--text-light) !important;
}

/* Animation transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Custom Theme Classes */
.theme-accent {
    color: var(--accent-color) !important;
}

.theme-bg-accent {
    background-color: var(--accent-color) !important;
    color: white !important;
}

.btn-theme-primary {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}

.btn-theme-primary:hover,
.btn-theme-primary:focus,
.btn-theme-primary:active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.border-theme-accent {
    border-color: var(--accent-color) !important;
}

/* Specific Color Overrides - Keep Original Colors */

/* Force footer links and list items to remain white regardless of theme overrides */
footer.footer,
footer.footer a,
footer.footer li,
footer.footer .list-unstyled a,
.footer ul.list-unstyled li a,
.footer .social-links a,
.footer .social-links i {
    color: #ffffff !important;
}

/* Prevent accidental underline or color change on hover inside footer */
footer.footer a:hover,
.footer .list-unstyled a:hover,
.footer .social-links a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Mobile spacing for 'View All' buttons on home page */
@media (max-width: 768px) {
    .view-all-btn {
        margin-top: 20px !important;
    }
    /* Hide horizontal scroll Previous/Next controls on small screens */
    #prevBtn,
    #nextBtn,
    #journeyPrevBtn,
    #journeyNextBtn {
        display: none !important;
    }
}
.stars .fa-star {
    color: #FFD700 !important; /* Gold for rating stars */
}

.text-success {
    color: #28a745 !important; /* Keep green for success */
}

.text-danger {
    color: #dc3545 !important; /* Keep red for danger */
}

.text-warning {
    color: #ffc107 !important; /* Keep yellow for warning */
}

.text-info {
    color: #17a2b8 !important; /* Keep cyan for info */
}

.text-muted {
    color: #6c757d !important; /* Keep gray for muted text */
}

.text-dark {
    color: #343a40 !important; /* Keep dark for dark text */
}

.text-light {
    color: #f8f9fa !important; /* Keep light for light text */
}

/* Badge Colors - Keep Semantic Colors */
.badge.bg-success {
    background-color: #28a745 !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.badge.bg-info {
    background-color: #17a2b8 !important;
}

/* Alert Colors - Keep Semantic Colors */
.alert-success {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

.alert-danger {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

.alert-warning {
    background-color: #fff3cd !important;
    border-color: #ffeaa7 !important;
    color: #856404 !important;
}

.alert-info {
    background-color: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #0c5460 !important;
}

/* Progress bar semantic colors */
.progress-bar.bg-success {
    background-color: #28a745 !important;
}

.progress-bar.bg-danger {
    background-color: #dc3545 !important;
}

.progress-bar.bg-warning {
    background-color: #ffc107 !important;
}

.progress-bar.bg-info {
    background-color: #17a2b8 !important;
}

/* Ensure Get Started / primary-custom buttons hover with the active theme accent color */
.btn-our-service:hover,
.btn-primary-custom:hover,
.btn-custom.btn-primary-custom:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
    box-shadow: 0 6px 18px rgba(var(--accent-color-rgb), 0.18) !important;
}

/* Global read-more / Get Started button styling — use theme accent and white hover text */
.read-more-btn {
    color: var(--accent-color) !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 24px !important;
    text-decoration: none !important;
    background: linear-gradient(
        135deg,
        rgba(var(--accent-color-rgb), 0.08) 0%,
        rgba(var(--accent-color-rgb), 0.04) 100%
    ) !important;
    border-radius: 50px !important;
    border: 2px solid rgba(var(--accent-color-rgb), 0.12) !important;
    position: relative !important;
    overflow: hidden !important;
}

.read-more-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color) 100%) !important;
    transition: left 0.4s ease !important;
    z-index: -1 !important;
}

.read-more-btn:hover {
    color: white !important;
    border-color: var(--accent-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(var(--accent-color-rgb), 0.3) !important;
}

.read-more-btn:hover::before {
    left: 0 !important;
}

.read-more-btn:hover span,
.read-more-btn:hover i {
    color: #ffffff !important;
}

/* Feature icon theme switcher
   Show the purple icon for theme1 and the blue icon for theme2.
   Use opacity transition to make switching smooth. */
   
/* Icon container to center and stack icons perfectly */
.icon-container {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 5rem !important;
    width: 5rem !important;
    margin: 0 auto !important;
}

.feature-icon {
    width: 4.5rem !important;
    height: 4.5rem !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0 !important;
    transition: opacity 300ms ease !important;
}

/* Default: hide both until theme applies */
.icon-blue,
.icon-purple {
    position: absolute !important;
    opacity: 0 !important;
}

/* Theme1 -> purple */
body[data-theme="theme1"] .icon-purple {
    opacity: 1 !important;
}
body[data-theme="theme1"] .icon-blue {
    opacity: 0 !important;
}

/* Theme2 -> blue */
body[data-theme="theme2"] .icon-blue {
    opacity: 1 !important;
}
body[data-theme="theme2"] .icon-purple {
    opacity: 0 !important;
}

/* Highly specific overrides for footer quick links to ensure they're always white
   This uses multiple selector parts and targets .footer-link explicitly to beat
   broader themed anchor selectors that use multiple :not() clauses with !important. */
body .footer a.footer-link,
footer.footer a.footer-link,
.footer .list-unstyled a.footer-link,
.footer ul.list-unstyled li a.footer-link,
.footer .social-links a.footer-link {
    color: #ffffff !important;
}

body .footer a.footer-link:hover,
.footer .list-unstyled a.footer-link:hover,
.footer .social-links a.footer-link:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Also ensure icons inside social links remain white */
body .footer .social-links a i,
body .footer .social-links a svg {
    color: #ffffff !important;
}