/* ==========================================================================
   ChicCharm Consolidated Main Stylesheet (Refactored)
   ========================================================================== */

/* ---------------------------------------
   1. GLOBAL CUSTOM PROPERTIES (VARIABLES)
   ----------------------------------------- */
:root {
    /* Core Brand Colors */
    --cc-primary:                   #ff2384;
    --cc-primary-light:             #ff519d;
    --cc-primary-dark:              #f4006b;
    --cc-primary-darker:            #b40057;
    --cc-primary-darkest:           #8d0044;
    --cc-primary-lighter:           #ff7fb7;
    --cc-accent:                    #ffb8d7;
    --cc-highlight:                 #e5e50f;
    --cc-success:                   #23c483;
    --cc-success-darker:            #2EE59D66;
    --cc-fab-bg:                    #651A62;
    --cc-fab-bg-hover:              #EACAE8;
    --cc-fab-svg:                   #F6EAF6;

    /* Neutral & Background Colors */
    --cc-white:                     #fff;
    --cc-body-bg:                   #ffeef5;
    --cc-dark-bg:                   #505050;
    --cc-light-bg:                  #f0f0f0;
    --cc-section-bg-alt:            #f0f8ff; /* Alice Blue */
    --cc-dark:                      #212529;
    --cc-text-base:                 #444;
    --cc-text-muted:                #717275;
    --cc-border:                    #dee2e6;

    /* Typography */
    --cc-font-family-base:          'Poppins', sans-serif;

    /* Font Sizes */
    --cc-fs-h1:                     52px;
    --cc-fs-h2:                     46px;
    --cc-fs-h3:                     32px;
    --cc-fs-h4:                     28px;
    --cc-fs-h5:                     24px;
    --cc-fs-h6:                     22px;
    --cc-fs-p:                      16px;
    --cc-fs-btn:                    18px;
    --cc-fs-small:                  14px;

    /* Font Weights */
    --cc-fw-normal:                 400;
    --cc-fw-medium:                 500;
    --cc-fw-semibold:               600;
    --cc-fw-bold:                   700;

    /* Border Radius */
    --cc-radius-lg:                 100px;
    --cc-radius-md:                 20px;
    --cc-radius-sm:                 10px;
    --cc-radius-card:               12px;
    --cc-radius-faq-input:          4px;
    --cc-radius-bs-default:         0.375rem; /* Bootstrap's default */

    /* Transitions */
    --cc-transition-base:           all 0.3s ease 0s;

    /* Layout Specifics */
    --cc-padding:                   59px; /* General for desktop content below nav */
    --cc-navbar-height-mobile:      56px; /* General for mobile */
}

/* ---------------------------------------
   2. BASE HTML ELEMENT STYLING
   ----------------------------------------- */
html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--cc-font-family-base), serif;
    background-color: var(--cc-body-bg);
    color: var(--cc-text-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;

    /* padding-top handled by layout-specific classes or main element */
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--cc-font-family-base), serif;
    color: var(--cc-dark);
    font-weight: var(--cc-fw-medium); /* Default for headings */
    margin-top: 0;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

h1, .h1 { font-size: var(--cc-fs-h1);
    font-weight: var(--cc-fw-bold); }

h2, .h2 {
    font-size: var(--cc-fs-h2);
    font-weight: var(--cc-fw-bold); }
h3, .h3 { font-size: var(--cc-fs-h3); }
h4, .h4 { font-size: var(--cc-fs-h4); }
h5, .h5 { font-size: var(--cc-fs-h5); }
h6, .h6 { font-size: var(--cc-fs-h6); }

p {
    color: var(--cc-text-muted);
    font-size: var(--cc-fs-p);
    font-weight: var(--cc-fw-normal);
    margin-bottom: 1rem;
}

/* General list items, not nav specific */
ul li {
    color: var(--cc-text-muted);
    font-size: var(--cc-fs-p);
    font-weight: var(--cc-fw-normal);
    padding: 0 0.9rem; /* Specific padding for general list items */
}

a {
    color: var(--cc-primary-darker);
    text-decoration: none;
    transition: var(--cc-transition-base);
}

a:hover, a:focus {
    color: var(--cc-primary-lighter);
}

button {
    font-family: inherit;
    touch-action: manipulation;
    transition: var(--cc-transition-base);
}

b, strong {
    font-weight: var(--cc-fw-bold);
}

hr {
    border: 0;
    border-top: 1px solid var(--cc-border);
    margin: 1rem 0;
    opacity: 0.25;
}

/* ---------------------------------------
   3. LAYOUT & GENERIC WRAPPERS
   ----------------------------------------- */
main {
    padding-top: var(--cc-padding);
    flex-grow: 1; /* Ensures main content pushes footer down */
}

/* Main content wrappers for admin/provider */
.admin-main-content,
.provider-main-content {
    padding: var(--cc-padding) 15px 30px;
}

/* Public page sections */
.section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.section-bg {
    background-color: var(--cc-section-bg-alt);
}

.section-overlay {
    background-color: var(--cc-accent); /* Light pink for overlay */
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

.section-overlay + .container {
    position: relative; /* Ensure content is above overlay */
}

/* Content card wrapper for admin/provider index/view/edit pages */
.content.card { /* Assumes .content is the primary class and .card is a modifier */
    border: none;
    border-radius: var(--cc-radius-bs-default);
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%); /* Bootstrap shadow-sm */
}

.content.card > h3,
.content.card > h4 {
    margin-bottom: 1rem;
}

/* ---------------------------------------
   4. NAVIGATION
   ----------------------------------------- */

/* Base .navbar for all layouts - HTML should add .fixed-top if needed */
.navbar {
    z-index: 1030; /* Standard Bootstrap z-index */
}

/* Public Navbar (.navbar-public applied in homepage.php layout) */
.navbar-public {
    background: transparent; /* Default transparent for hero sections */
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

/* Solid background when scrolled or not on a hero section that requires transparency */
.navbar-public.fixed-top.scrolled,
.navbar-public.fixed-top:not(.navbar-transparent-on-hero) {
    background-color: var(--cc-body-bg) !important;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%);
}

.navbar-public .navbar-brand,
.navbar-public .navbar-nav .nav-link {
    color: var(--cc-text-base) !important; /* Default link color for public nav */
}

.navbar-public .navbar-brand {
    font-size: var(--cc-fs-h6);
    font-weight: var(--cc-fw-medium);
    display: flex;
    align-items: center;
}

.navbar-public .logo {
    border-radius: var(--cc-radius-lg);
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
}

.navbar-public .navbar-nav .nav-link {
    font-size: var(--cc-fs-p);
    font-weight: var(--cc-fw-medium);
}

.navbar-public .navbar-nav .nav-link.active,
.navbar-public .navbar-nav .nav-link:hover,
.navbar-public .navbar-nav .nav-link:focus {
    color: var(--cc-primary-lighter) !important;
    background: transparent; /* Ensure no background on hover for top-level links */
}

/* Toggler for public navbar (default assumes light text on dark, then changes for scrolled/solid) */
.navbar-public .navbar-toggler {
    border-color: rgb(255 255 255 / 25%); /* For transparent hero */
}

.navbar-public .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-admin-provider .navbar-toggler {
    border-color: rgb(255 255 255 / 10%) !important;
    display: inline-block;
}

.navbar-admin-provider .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Toggler for public navbar when scrolled or solid */
.navbar-public.fixed-top.scrolled .navbar-toggler,
.navbar-public.fixed-top:not(.navbar-transparent-on-hero) .navbar-toggler {
    border-color: rgb(0 0 0 / 10%) !important;
}

.navbar-public.fixed-top.scrolled .navbar-toggler-icon,
.navbar-public.fixed-top:not(.navbar-transparent-on-hero) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Admin/Provider Navbar */
.navbar-admin-provider {
    background-color: var(--cc-dark);
}

.navbar-admin-provider .navbar-brand,
.navbar-admin-provider .navbar-text {
    color: var(--cc-white) !important;
}

.navbar-admin-provider .navbar-nav .nav-link:hover,
.navbar-admin-provider .navbar-nav .nav-link:focus,
.navbar-admin-provider .navbar-nav .nav-link.active {
    color: var(--cc-accent) !important; /* Use accent for hover on dark background */
}


/* Dropdown Menus (General Theming) */
.dropdown-menu {
    background: var(--cc-white);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); /* Standard BS shadow */
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-bs-default);
    margin-top: 0.25rem; /* Default BS offset */
    padding: 0.5rem 0; /* BS default padding */
}

/* Optional arrow for dropdowns */
.dropdown-menu::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 8px solid var(--cc-white);
    position: absolute;
    top: -8px;
    left: 10px;
}

.dropdown-item {
    color: var(--cc-text-base);
    font-size: var(--cc-fs-p);
    font-weight: var(--cc-fw-normal);
    padding: 0.375rem 1rem;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--cc-light-bg);
    color: var(--cc-primary-darker);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--cc-primary-darker);
    color: var(--cc-white);
}

/* Offcanvas Sidebar (Admin/Provider) */
.offcanvas-header {
    background-color: var(--cc-primary-darker);
    border-bottom: 1px solid rgb(0 0 0 / 10%);
    padding: 0.6rem 1rem;
}

.offcanvas-title {
    color: var(--cc-white);

}

.offcanvas-body a {
    color: var(--cc-primary-darker);
    text-decoration: none;
    display: block;
    padding: 0.375rem 0.5rem;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-radius: var(--cc-radius-sm);
}

.offcanvas-body a:hover,
.offcanvas-body a:focus {
    color: var(--cc-primary-dark);
    background-color: #f8f9fa; /* Standard light hover */
}
.offcanvas-body .accordion-item { border: none; }

.offcanvas-body .accordion-button {
    color: var(--cc-primary-darker);
    font-weight: var(--cc-fw-medium);
    background-color: transparent;
    padding: 0.75rem 1rem;
}

.offcanvas-body .accordion-button:hover,
.offcanvas-body .accordion-button:focus {
    background-color: #f1f1f1;
}

.offcanvas-body .accordion-button:not(.collapsed) {
    background-color: #fcecec; /* Light accent color */
    color: var(--cc-primary-darker);
}
.offcanvas-body .accordion-body { padding: 0.5rem 0 0.5rem 1.5rem; }

.offcanvas-body .accordion-body ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

.offcanvas-body .accordion-body ul li a {
    padding: 0.25rem 0;
    margin: 0; /* Reset margin if any from general 'a' */
}

/* ---------------------------------------
   5. COMMON UI COMPONENTS
   ----------------------------------------- */

/* Buttons */
.btn {
    font-size: var(--cc-fs-p);
    font-weight: var(--cc-fw-normal);
    letter-spacing: 1px;
    color: var(--cc-white);
    background-color: var(--cc-primary-darker);
    border: none;
    border-radius: var(--cc-radius-lg);
    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
    transition: var(--cc-transition-base);
    cursor: pointer;
    outline: none;
}

.btn-secondary {
    color: var(--cc-white);
    background-color: var(--cc-dark-bg);
}

.btn:hover, .btn:focus, .btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--cc-primary-darkest);
    box-shadow: 0 2px 5px var(--cc-dark-bg);
    color: #fff;
    transform: translateY(-3px);
}

.btn:active {
    transform: translateY(-1px);
}

.btn-success {
    background-color: var(--cc-success);
    color: var(--cc-white);
}

.btn-success:hover, .btn-success:focus {
    background-color: var(--cc-success);
    box-shadow: 0 5px 10px var(--cc-success-darker);
    color: #fff;
    transform: translateY(-3px);
}

.btn-success:active {
    transform: translateY(-1px);
}

.btn.chic { /* Outline style, e.g., for hero */
    background: transparent;
    border: 2px solid var(--cc-white); /* White border for dark backgrounds */
    color: var(--cc-white);
}

.btn.chic:hover, .btn.chic:focus {
    background: var(--cc-white);
    border-color: var(--cc-white);
    color: var(--cc-primary-darkest); /* Text becomes primary on white hover */
}

/* Cards */
.filter-card { /* For filter UI */
    background-color: var(--cc-light-bg);
    border-radius: var(--cc-radius-bs-default);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* Service Cards */
.service-card {
    background-color: var(--cc-white);
    border-radius: var(--cc-radius-card);
    box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    border: none;
    display: flex;
    flex-direction: column;
    height: 100%; /* For equal height cards in a row */
}

.service-card:hover, .service-card:focus {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 12%) !important;
}

.service-card-image {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.service-card .card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-card .service-title {
    font-size: 1.1rem;
    font-weight: var(--cc-fw-semibold);
    margin-bottom: 0.5rem;
    color: var(--cc-dark); /* Heading color */
}

.service-card .service-description {
    font-size: 0.9rem;
    color: var(--cc-text-base);
    line-height: 1.5;
    margin-bottom: 1rem;
    min-height: 50px; /* Ensure some space for description */
    flex-grow: 1; /* Allows description to take available space */
}

.service-card .service-price {
    font-size: 1.1rem;
    font-weight: var(--cc-fw-bold);
    color: var(--cc-dark); /* Heading color */
    margin-bottom: 0.75rem;
}

/* Offer Cards */
.offer-card img, .offer-img { /* Combined selector */
    max-height: 200px;
    object-fit: cover;
    width: 100%;
    border-top-left-radius: var(--cc-radius-bs-default); /* Match card radius if applicable */
    border-top-right-radius: var(--cc-radius-bs-default);
}

.offer-card .card-title { /* Assuming .offer-card is a Bootstrap card */
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: var(--cc-fw-semibold);
    color: var(--cc-dark); /* Consistent heading color */
}

.offer-card .card-text {
    font-size: 0.95rem;
    color: var(--cc-text-base); /* Changed from #555 to theme variable */
}

/* Tables (Admin/Provider) */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border-radius: var(--cc-radius-bs-default); /* Optional: Rounded corners on wrapper */
    border: 1px solid var(--cc-border); /* Changed from --cc-dark for less emphasis */
}

.table { /* Assumes Bootstrap .table base */
    margin-bottom: 0; /* Handled by .table-responsive wrapper */
    font-size: 0.9rem;
}

.table th, .table td {
    vertical-align: middle;
    padding: 0.5rem;
}

.table > thead {
    vertical-align: bottom;
}

.table th.actions, .table td.actions { /* For action columns (edit, delete buttons) */
    width: 1%; /* Minimal width */
    white-space: nowrap;
    text-align: center;
}

.table td.actions .btn.btn-sm { /* Smaller buttons in action columns */
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
}

.table tr {
    cursor: pointer;
}

/* Forms (Admin/Provider) */
.form.content fieldset { /* Assuming .form.content is a wrapper */
    margin-bottom: 1.5rem;
    border: none;
    padding: 0;
}

.form.content legend {
    font-size: 1.25rem;
    font-weight: var(--cc-fw-medium);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cc-border); /* Lighter border */
}

.form.content .form-label {
    margin-bottom: 0.5rem;
    font-weight: var(--cc-fw-medium);
    font-size: 0.9rem;
}

.form.content .form-control,
.form.content .form-select {
    font-size: 0.9rem;
    margin-bottom: 1rem; /* Default spacing for form elements */
    border-radius: var(--cc-radius-sm);
}

/* Paginator (General) */
.paginator {
    margin-top: 1.5rem;
}

.paginator .pagination {
    margin-bottom: 0.5rem;
}

.paginator .page-link {
    color: var(--cc-primary-darker);
    padding: 0.375rem 0.75rem;
    position: relative;
    display: block;
    text-decoration: none;
    background-color: var(--cc-white);
    border: 1px solid var(--cc-border);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.paginator .page-link:hover, .paginator .page-link:focus {
    z-index: 2;
    color: var(--cc-primary-darker);
    background-color: #e9ecef; /* Standard hover color */
    border-color: var(--cc-border);
}

.paginator .page-item.active .page-link {
    background-color: var(--cc-primary-darker);
    border-color: var(--cc-primary-darker);
    color: var(--cc-white);
    z-index: 3;
}

.paginator .page-item.disabled .page-link {
    color: var(--cc-text-muted);
    pointer-events: none;
    background-color: var(--cc-white);
    border-color: var(--cc-border);
}

.paginator p { /* Counter text */
    margin-bottom: 0;
    font-size: var(--cc-fs-small);
}

/* Flash Messages / Alerts (Container, detailed styles in section 9) */
.flash-container {
    margin-bottom: 1rem;
}

.list-group-item.active {
    z-index: 2;
    color: var(--cc-white);
    background-color: var(--cc-primary-darker);
    border-color: var(--cc-primary-darker);
}

.list-group-item-action:not(.active):focus, .list-group-item-action:not(.active):hover {
    z-index: 1;
    color: var(--cc-white);
    text-decoration: none;
    background-color: var(--cc-primary-darker);
    border-color: var(--cc-primary-darker);
}

.list-group-item-primary,
.list-group-item-primary:hover,
.list-group-item-primary:focus {
    z-index: 2;
    color: var(--cc-white);
    background-color: var(--cc-primary-darker);
    border-color: var(--cc-primary-darker);
}

.list-group-item-action.list-group-item-success-custom:hover,
.list-group-item-action.list-group-item-success-custom:focus {
    background-color: var(--cc-success); /* Darker green */
    color: white;
    border-color: var(--cc-success-darker);
}

.list-group-item-action.list-group-item-warning-custom:hover,
.list-group-item-action.list-group-item-warning-custom:focus {
    background-color: var(--bs-warning); /* Darker yellow */
    color: black;
    border-color: var(--bs-warning);
}

.list-group-item-action.list-group-item-danger-custom:hover,
.list-group-item-action.list-group-item-danger-custom:focus {
    background-color: var(--bs-danger); /* Darker red */
    color: white;
    border-color: var(--bs-danger);
}

/* ---------------------------------------
   6. PAGE-SPECIFIC & UNIQUE COMPONENTS
   ----------------------------------------- */

/* Hero Section */
.hero-section {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 100px;
    min-height: 680px;
}

.hero-section .container {
    position: relative;
    z-index: 5;
}

.hero-section svg { /* Decorative SVG background element */
    position: absolute;
    bottom: -50px;
    right: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.1;
}

.hero-section video { /* Background video */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover;
    z-index: 1;
}

@media screen and (width >= 991px) { /* lg breakpoint */
    .hero-section-full-height {
        height: 85vh;
    }
}

/* Animated Headline */
.cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
}

.cd-words-wrapper b {
    color: var(--cc-highlight); /* Use theme highlight color */
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
}

.cd-words-wrapper b.is-visible {
    position: relative;
}

.no-js .cd-words-wrapper b { /* Fallback for no JS */
    opacity: 0;
}

.no-js .cd-words-wrapper b.is-visible {
    opacity: 1;
}

.cd-headline.rotate-1 .cd-words-wrapper {
    perspective: 300px;
    pointer-events: none; /* Prevent interaction during animation */
}

.cd-headline.rotate-1 b {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: rotateX(180deg);
}

.cd-headline.rotate-1 b.is-visible {
    opacity: 1;
    transform: rotateX(0deg);
    animation: cd-rotate-1-in 1.2s;
}

.cd-headline.rotate-1 b.is-hidden {
    transform: rotateX(180deg);
    animation: cd-rotate-1-out 1.2s;
}

@keyframes cd-rotate-1-in {
    0% { transform: rotateX(180deg);
        opacity: 0; }

    35% { transform: rotateX(120deg);
        opacity: 0; }
    65% { opacity: 0; } /* Hold invisible */
    100% { transform: rotateX(360deg);
        opacity: 1; } /* Appears with full rotation */
}

@keyframes cd-rotate-1-out {
    0% { transform: rotateX(0deg);
        opacity: 1; }

    35% { transform: rotateX(-40deg);
        opacity: 1; } /* Slight dip back */
    65% { opacity: 0; } /* Start fading/rotating out */
    100% { transform: rotateX(180deg);
        opacity: 0; } /* Fully rotated out */
}

/* Intro Section & Custom Block */
.intro-section {
    padding-top: 50px; /* Specific padding for this section */
}

.custom-block-wrap {
    position: relative;
}

.custom-block { /* Can be standalone or absolutely positioned */
    background-color: var(--cc-primary-darker);
    border-radius: var(--cc-radius-sm);
    padding: 1.5rem;
    box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 10%);
}

.custom-block-wrap .custom-block { /* Absolutely positioned variant */
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.custom-block .custom-icon,
.custom-block a,
.custom-block p { /* Shared white text color for elements inside */
    color: var(--cc-white);
}

.custom-block .custom-icon {
    font-size: 1.25rem;
}

.custom-block p {
    margin-bottom: 0.25rem;
}

/* Testimonial Section & Cards */
.testimonial-section {
    position: relative;
    background-color: var(--cc-body-bg); /* Specific background for this section */
}

.testimonial-section .section-overlay { /* Custom overlay for testimonials */
    opacity: 0.75;
    background-color: var(--cc-accent);
}

.testimonial-card {
    background-color: var(--cc-white);
    border-radius: var(--cc-radius-bs-default);
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.testimonial-card:hover, .testimonial-card:focus {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
}

.testimonial-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.testimonial-card .card-body p.fst-italic { /* Assuming quote text */
    flex-grow: 1;
    font-size: var(--cc-fs-p);
    margin-bottom: 1rem;
    min-height: 220px; /* Fixed height for quote text consistency */
    max-height: 220px;
    overflow-y: auto; /* In case text overflows */
}

.testimonial-card .avatar-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.testimonial-rating i.bi-star-fill { color: #ffc107; } /* Standard gold for filled stars */
.testimonial-rating i.bi-star { color: #e0e0e0; }    /* Light grey for empty stars */

/* Carousel Controls & Indicators (Themed for Testimonials but can be general) */
.carousel-control-prev,
.carousel-control-next {
    color: var(--cc-primary-darker);
    opacity: 1;
}
.carousel-control-prev { left: -7rem !important; /* Adjusted for better positioning */ }
.carousel-control-next { right: -7rem !important; /* Adjusted for better positioning */ }

.carousel-control-prev:hover,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-next:focus {
    color: var(--cc-primary-darker) !important; /* Use link hover color */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    transition: var(--cc-transition-base);
    background-color: var(--cc-accent); /* Slight background for visibility */
    border-radius: 45%;
    padding: 0.5rem; /* Make icons larger and easier to click */
}

.carousel-control-prev-icon:hover, .carousel-control-next-icon:hover,
.carousel-control-prev-icon:focus, .carousel-control-next-icon:focus {
    transform: scale(1.1); /* Slight scale on hover/focus */
    background-color: var(--cc-primary-darker);
}

/* .custom-carousel-btn class seems to duplicate Bootstrap's default positioning, can be removed if not used for further customization */

.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    background-color: var(--cc-accent);
    opacity: .5;
    border: none; /* Remove Bootstrap default border */
}

.carousel-indicators .active {
    background-color: #ff69b4; /* Brighter pink for active indicator */
    opacity: 1;
}

/* FAQ Styles (Using Bootstrap Accordion, themed) */
.faq-accordion,
.faq-accordion .accordion-button,
.faq-accordion .accordion-body {
    font-family: var(--cc-font-family-base), sans-serif; /* Use base font */
}

.faq-accordion { /* Container for the accordion */
    max-width: 800px;
    margin: 0 auto; /* Center it */
    background: var(--cc-white);
    box-shadow: 0 2px 48px 0 rgb(0 0 0 / 6%);
    border-radius: var(--cc-radius-bs-default);
}

/* Section title styling specific to FAQ section */
.faq-section .section-title {
    position: relative;
    margin-bottom: 45px;
    display: inline-block;
}

.faq-section .section-title::before { /* Underline for FAQ section title */
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--cc-primary-darker);
    bottom: -20px;
}

.faq-accordion .accordion-item {
    background-color: transparent; /* Ensure item itself is transparent */
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px dashed #CEE1F8; /* Separator from original */
}

.faq-accordion .accordion-item:last-child {
    border-bottom: none;
}

.faq-accordion .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: var(--cc-radius-bs-default); /* Match container */
    border-top-right-radius: var(--cc-radius-bs-default);
}

.faq-accordion .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: var(--cc-radius-bs-default);
    border-bottom-left-radius: var(--cc-radius-bs-default);
}

.faq-accordion .accordion-button {
    font-weight: var(--cc-fw-normal); /* Was 400 */
    font-size: 1rem;
    letter-spacing: 1px;
    color: #3B566E; /* Specific color from original */
    text-decoration: none !important;
    background-color: transparent;
    padding: 1.25rem 1.5rem;
    transition: background-color 0.3s ease;
    width: 100%; /* Ensure full width */
    text-align: left; /* Align text left */
    border: none; /* Remove default button border */
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: #3B566E; /* Keep color same when open */
    background-color: rgb(233 30 99 / 5%); /* Light pinkish active state */
    box-shadow: none; /* Remove Bootstrap's inset shadow for active */
}

.faq-accordion .accordion-button:hover {
    background-color: rgb(233 30 99 / 10%); /* Slightly darker hover */
    z-index: 0; /* Ensure hover bg doesn't cause issues with other elements */
}

.faq-accordion .accordion-button:focus {
    box-shadow: none; /* Remove focus ring */
    border-color: transparent; /* Hide any focus border */
    background-color: rgb(233 30 99 / 7%); /* Subtle focus background */
}

/* Styling for the ::after pseudo-element (Bootstrap's default arrow) */

/* .faq-accordion .accordion-button::after { */

/* Example: Change color of Bootstrap's default SVG arrow if needed */

/* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233B566E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); */

/* } */

.faq-accordion .faq-badge { /* Number badge */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 1;
    border-radius: 50%;
    text-align: center;
    background: var(--cc-primary-darker);
    color: var(--cc-white);
    font-size: 0.8rem;
    margin-right: 0.75rem; /* Spacing next to title text */
}

.faq-accordion .accordion-body {
    padding: 1.5rem 1.75rem 1rem;
    font-weight: var(--cc-fw-normal);
    font-size: 1rem;
    color: var(--cc-text-base); /* Specific color from original */
    line-height: 1.75;
    letter-spacing: 1px;
    border-top: 1px solid #F3F8FF; /* Original border top */
}

/* Search Box from FAQ page */
.faq-section .input-group .form-control { /* Ensure consistent radius with button */
    border-top-left-radius: var(--cc-radius-faq-input);
    border-bottom-left-radius: var(--cc-radius-faq-input);
}

.faq-section .input-group .btn { /* Ensure consistent radius with input */
    border-top-right-radius: var(--cc-radius-faq-input);
    border-bottom-right-radius: var(--cc-radius-faq-input);
}

/* ---Astral-Accessibility menu--- */

/* These styles override the third-party widget. `!important` is often necessary. */

/* 1. Main Trigger Button */
astral-accessibility button.astral-icon {
    background-color: transparent !important;
}

astral-accessibility .astral-close-icon svg { /* Close icon rotation */
    transform: rotate(-90deg);
    transition: transform 0.3s ease-in-out;
}

/* Style the SVG icon *inside* the trigger button */
astral-accessibility button.astral-icon svg {
    background-color: var(--cc-fab-svg) !important; /* FAB background */
    z-index: 9998; /* Ensure it's above most content */
    position: fixed; /* Fixed position FAB */
    bottom: 1.5rem;
    right: 1rem;
    height: 4rem !important;
    width: 4rem !important;
    border-radius: 9999px; /* Circular */
    box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0.75rem !important; /* Ensure icon is not too large within circle */
    box-sizing: border-box !important;
}

astral-accessibility button.astral-icon svg:hover,
astral-accessibility button.astral-icon svg:focus {
    background-color: var(--cc-fab-bg-hover) !important;
    transform: scale(1.1);
    box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
}

astral-accessibility button.astral-icon svg path {
    fill: var(--cc-fab-bg) !important; /* SVG paths color (the icon itself) */
}

astral-accessibility .astral-inverted-corner { /* Hide if visually clashing */
    display: none !important;
}

/* 2. Main Widget Modal/Panel */
astral-accessibility .astral-modal {
    background-color: var(--cc-white) !important;
    border: 1px solid var(--cc-border, #dee2e6) !important;
    border-radius: var(--cc-radius-md, 10px) !important;
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 15%) !important;
    color: var(--cc-text-base) !important;
    font-family: var(--cc-font-family-base), serif !important;
    width: 400px !important;
    margin-bottom: 3.3rem !important; /* Position above FAB */
    margin-right: 1.5rem !important;
    max-height: 600px !important;
    z-index: 1044 !important; /* Above dimmer, below critical modals if any */
    padding: 0 !important; /* Padding handled by inner elements */
    overflow-y: auto; /* Allow scrolling within modal if content overflows */
}

/* Main actions container within the modal */
astral-accessibility .astral-modal .actions {
    padding: 0.75rem !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

/* 3. Feature Buttons within the Modal */
astral-accessibility .astral-modal .action button {
    width: 100% !important;
    background-color: var(--cc-light-bg) !important;
    color: var(--cc-fab-bg) !important; /* Use FAB background color for text */
    border: 1px solid var(--cc-border) !important;
    padding: 0.5rem 0.75rem !important; /* Adjusted padding */
    border-radius: var(--cc-radius-sm) !important;
    text-align: left;
    display: flex !important;
    align-items: center !important;
    transition: var(--cc-transition-base) !important;
    cursor: pointer;
}

astral-accessibility .astral-modal .action button:hover,
astral-accessibility .astral-modal .action button:focus {
    background-color: #e9ecef !important; /* Slightly darker hover */
    border-color: #ced4da !important;
}

/* Active state for feature buttons (assuming .active class is added by widget) */
astral-accessibility .astral-modal .action button.active {
    background-color: var(--cc-primary-darker) !important;
    color: var(--cc-white) !important;
    border-color: var(--cc-primary-darker) !important;
}

astral-accessibility .astral-modal .action button.active .icon.action-icon svg path {
    fill: var(--cc-white) !important; /* Icon path color on active */
}

astral-accessibility .astral-modal .action button.active .title .state-dots-wrap span {
    color: var(--cc-white) !important; /* Text color on active */
}

/* 4. Icons & Text within Feature Buttons */
astral-accessibility .astral-modal .action button .icon.action-icon {
    margin-right: 0.75rem !important; /* Increased margin */
    display: inline-flex !important;
    align-items: center;
}

astral-accessibility .astral-modal .action button .icon.action-icon svg {
    width: 20px !important;
    height: 20px !important;
}

astral-accessibility .astral-modal .action button .title .state-dots-wrap span {
    font-weight: var(--cc-fw-medium);
    color: inherit !important; /* Inherit color from button state */
}

astral-accessibility .astral-modal .action button .state-dots-wrap .dots .dot {
    width: 6px !important;
    height: 6px !important;
    margin: 0 2px !important;
}

astral-accessibility .astral-modal .action button .state-dots-wrap .dots.inactive .dot {
    background-color: var(--cc-text-muted) !important;
}

astral-accessibility .astral-modal .action button.active .state-dots-wrap .dots.active .dot.active {
    background-color: var(--cc-accent) !important; /* Active state dot color */
}

/* 5. Checkmark (if used consistently and needs specific styling) */
astral-accessibility .action button .icon.active-check { /* Generic class for an active checkmark icon */
    background: var(--cc-success) !important; /* Example: if checkmark itself has a bg */
}

astral-accessibility .action button .icon.active-check svg path {
    fill: var(--cc-white) !important; /* Example: if checkmark is an SVG path */
}

/* ---BotPress Chatbot--- */
.bpFab { /* FAB button for BotPress */
    margin-right: 4.5rem !important; /* Position it to the left of Astral FAB */
    bottom: 1.5rem !important; /* Align vertically with Astral FAB */
}

/* ---------------------------------------
   7. SITE FOOTER
   ----------------------------------------- */
.site-footer {
    background-color: var(--cc-text-base); /* Darker neutral for footer */
    color: var(--cc-light-bg); /* Light text on dark background */
    margin-top: auto; /* For sticky footer with flexbox body */
}

.site-footer .logo {
    background-color: var(--cc-white);
    width: 60px;
    height: 60px;
    padding: 5px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem; /* Space below logo */
}

.site-footer-title {
    color: var(--cc-white);
    font-size: var(--cc-fs-h5);
    margin-bottom: 1rem;
}

.site-footer-link,
.site-footer p a, /* Links within paragraphs */
.site-footer-bottom a, /* Links in bottom bar */
.footer-menu-link { /* Footer menu links */
    color: var(--cc-accent);
    text-decoration: none;
    transition: var(--cc-transition-base);
}

.site-footer-link:hover,
.site-footer-link:focus,
.site-footer p a:hover,
.site-footer p a:focus,
.site-footer-bottom a:hover,
.site-footer-bottom a:focus,
.footer-menu-link:hover,
.footer-menu-link:focus {
    color: var(--cc-white);
    text-decoration: underline;
}

.site-footer p { /* General paragraphs in footer */
    color: var(--cc-light-bg);
    font-size: var(--cc-fs-small);
    margin-bottom: 0.75rem; /* Consistent paragraph margin */
}

.footer-menu {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem; /* Space below menu list */
}

.footer-menu-item {
    margin-bottom: 0.5rem;
}

/* .footer-menu-link already styled above */

.site-footer-bottom {
    border-top: 1px solid rgb(255 255 255 / 10%); /* Lighter border */
}

.copyright-text {
    color: var(--cc-light-bg);
    font-size: var(--cc-fs-small);
    margin-bottom: 0;
}

.site-footer .social-icon-link {
    background: rgb(255 255 255 / 10%);
    color: var(--cc-white);
    width: 35px;
    height: 35px;
    line-height: 35px; /* Vertically center icon if font icon */
    display: inline-flex; /* For better alignment if SVG */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
    margin-right: 0.5rem;
    font-size: var(--cc-fs-p); /* Icon size */
    transition: var(--cc-transition-base);
}

.site-footer .social-icon-link:last-child {
    margin-right: 0;
}

.site-footer .social-icon-link:hover,
.site-footer .social-icon-link:focus {
    background-color: var(--cc-accent);
    color: var(--cc-primary-darker);
}

/* ---------------------------------------
   8. UTILITIES & MISC
   ----------------------------------------- */
.gradient-text,
.gradient-text-2 { /* Common properties for gradient text */
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text {
    background-image: linear-gradient(to right, var(--cc-primary-darker), var(--cc-primary-lighter));
}

.gradient-text-2 {
    background-image: linear-gradient(to right, var(--cc-highlight), var(--cc-primary-lighter));
    background-blend-mode: multiply; /* If texture/image is also used */
}

.chic-title { color: var(--cc-primary-darker); }
.chic-paragraph { color: var(--cc-text-base); } /* Slightly darker than default p */

.auth-card { /* For authentication pages */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem; /* Or use Bootstrap spacing utilities */

    /* Consider adding padding, background, shadow if it's a card-like container */
}

.time-slot-list { /* For booking time slots */
    max-height: 450px;
    overflow-y: auto;
    border: 1px solid var(--cc-border); /* Add border for clarity */
    padding: 0.5rem;
    border-radius: var(--cc-radius-sm);
}

.time-slot {
    cursor: pointer;
    text-align: center;
    padding: 0.5rem;
    border-radius: var(--cc-radius-sm);
    margin-bottom: 0.25rem;
    border: 1px solid transparent; /* For consistent sizing with hover/selected */
}

.time-slot:hover, .time-slot:focus {
    background-color: var(--cc-success) !important;
    border-color: var(--cc-border) !important;
}

.time-slot.selected { /* Example class for selected slot */
    background-color: var(--cc-accent);
    color: var(--cc-primary-darker);
    border-color: var(--cc-primary-darker);
}

.slot-booked {
    cursor: not-allowed;
    opacity: 0.65;
    background-color: var(--cc-light-bg); /* Visual cue for booked slot */
    text-decoration: line-through;
}

.form-control[readonly] {
    background-color: var(--cc-light-bg) !important; /* Standard BS readonly is often too similar to disabled */
    opacity: 0.8; /* Slight opacity to differentiate */
}

/* ---------------------------------------
   9. FLASH MESSAGES / ALERTS
   ----------------------------------------- */
.alert {
    padding: 1rem 1.25rem;
    margin: 1.2rem 0;
    border: none; /* Remove Bootstrap default border */
    border-radius: var(--cc-radius-sm);
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 7.5%);
    display: flex;
    align-items: center;
    font-weight: var(--cc-fw-medium);
    transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    cursor: pointer; /* Indicate it's clickable to dismiss */
}

.alert.hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.alert i.bi { /* Icon styling */
    font-size: 1.5rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* Success Alert */
.alert.alert-success {
    background-color: #e6fffa; /* Lighter green */
    color: #006d5b;            /* Darker green text */
    border-left: 5px solid var(--cc-success); /* Accent border matching variable */
}

.alert.alert-success i.bi::before {
    content: "\f26a"; /* Bootstrap Icons: check-circle-fill */
    color: var(--cc-success); /* Icon color matches border */
}

/* Error/Danger Alert */
.alert.alert-danger,
.alert.alert-error { /* Catch both common class names */
    background-color: #fff0f1; /* Lighter red/pink */
    color: #a7001e;            /* Darker red text */
    border-left: 5px solid #e41f45; /* Specific red for error accent */
}

.alert.alert-danger i.bi::before,
.alert.alert-error i.bi::before {
    content: "\f336"; /* Bootstrap Icons: exclaimation-octagon-fill */
    color: #e41f45;
}

/* Warning Alert */
.alert.alert-warning {
    background-color: #fff8e1; /* Lighter yellow */
    color: #795500;            /* Darker yellow/brown text */
    border-left: 5px solid #ffc107; /* Standard warning yellow */
}

.alert.alert-warning i.bi::before {
    content: "\f33b"; /* Bootstrap Icons: exclaimation-triangle-fill */
    color: #ffc107;
}

/* Info Alert */
.alert.alert-info {
    background-color: #e7f3ff; /* Lighter blue */
    color: #004085;            /* Darker blue text */
    border-left: 5px solid #007bff; /* Standard info blue */
}

.alert.alert-info i.bi::before {
    content: "\f431"; /* Bootstrap Icons: info-circle-fill */
    color: #007bff;
}

/* ---------------------------------------
   10. RESPONSIVE STYLES
   ----------------------------------------- */

/* Breakpoint: <= 991.98px (Bootstrap's lg breakpoint for navbar collapse) */
@media screen and (width <= 991.98px) {
    /* --- Universal Mobile Fixed Navbar Base --- */
    .navbar.fixed-top {
        position: fixed !important; /* Ensure it stays fixed */
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1030;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        transition: background-color 0.3s ease-in-out;
    }

    /* --- Public Navbar Specifics for Mobile (when fixed) --- */
    .navbar-public.fixed-top {
        background-color: var(--cc-accent) !important; /* Always solid on mobile when fixed */
        border-bottom: 1px solid var(--cc-border);
    }

    .navbar-public.fixed-top .navbar-brand,
    .navbar-public.fixed-top .navbar-nav .nav-link {
        color: var(--cc-text-base) !important; /* Readable text on light background */
    }

    .navbar-public.fixed-top .navbar-nav .nav-link:hover,
    .navbar-public.fixed-top .navbar-nav .nav-link:focus,
    .navbar-public.fixed-top .navbar-nav .nav-link.active {
        color: var(--cc-primary-darker) !important;
        background-color: rgb(0 0 0 / 3%) !important; /* Subtle hover for dropdown items */
    }

    .navbar-public.fixed-top .navbar-toggler {
        border-color: rgb(0 0 0 / 10%) !important;
    }

    .navbar-public.fixed-top .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .navbar-public.fixed-top .navbar-nav .dropdown-item { /* Dropdown items in public mobile nav */
        color: var(--cc-text-muted) !important;
    }

    .navbar-public.fixed-top .navbar-nav .dropdown-item:hover,
    .navbar-public.fixed-top .navbar-nav .dropdown-item:focus {
        color: var(--cc-primary-darker) !important;
        background-color: rgb(0 0 0 / 5%) !important;
    }


    /* --- Admin/Provider Navbar Specifics for Mobile (already dark, remains dark) --- */
    .navbar-admin-provider.fixed-top {
        background-color: var(--cc-dark) !important; /* Consistent dark background */
    }

    /* Link colors for admin/provider are already white via desktop rules and !important, so they persist */

    /* Hover/active colors also persist */

    /* Toggler and icon also persist from desktop rules */


    /* --- Styling the Collapsed Menu Container (.navbar-collapse) --- */
    .navbar-collapse.collapse.show,
    .navbar-collapse.collapsing {
        position: absolute;
        top: 100%; /* Below the navbar */
        left: 0;
        width: 100%;
        padding: 0.5rem 0;
        z-index: 1029; /* Below navbar but above content */
        box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 10%);
    }

    /* Theme-specific background for collapsed menu */
    .navbar-public .navbar-collapse.collapse.show,
    .navbar-public .navbar-collapse.collapsing {
        background-color: var(--cc-body-bg);
        border-top: 1px solid var(--cc-border);
    }

    .navbar-admin-provider .navbar-collapse.collapse.show,
    .navbar-admin-provider .navbar-collapse.collapsing {
        background-color: var(--cc-dark);
        border-top: 1px solid rgb(255 255 255 / 10%);
    }

    /* --- Styling Navbar Items (ul) in Collapsed Menu --- */
    .navbar-nav {
        width: 100%;
    }

    .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }

    /* --- Styling Nav Links (a) in Collapsed Menu --- */
    .navbar-nav .nav-link {
        padding: 0.75rem 1.5rem !important; /* Generous padding for touch */
        display: block;
        width: 100%;
        text-align: left;
        border-radius: 0; /* Full width links */
        font-weight: var(--cc-fw-medium);

        /* Base color/hover is set by .navbar-public or .navbar-admin-provider specific rules */
    }

    /* --- Styling Sub-Dropdowns within Collapsed Menu --- */
    .navbar-nav .dropdown-menu {
        position: static !important; /* Override Bootstrap's absolute positioning */
        float: none !important;
        width: auto !important;
        margin-top: 0 !important;
        background-color: transparent !important; /* Blend with parent menu */
        border: 0 !important;
        box-shadow: none !important;
        padding: 0.25rem 0 0.5rem 2.5rem; /* Indent sub-items further, adjust top padding */
    }

    .navbar-nav .dropdown-menu::before {
        display: none !important; /* Hide desktop arrow */
    }

    .navbar-nav .dropdown-item {
        padding: 0.6rem 1rem !important; /* Touch-friendly padding */
        border-radius: var(--cc-radius-sm);

        /* Color and hover are inherited or set by theme-specific .navbar-public / .navbar-admin-provider rules */
    }

    /* Ensure hover on dropdown items in collapsed menu is distinct */
    .navbar-public .navbar-nav .dropdown-item:hover,
    .navbar-public .navbar-nav .dropdown-item:focus {
        background-color: rgb(0 0 0 / 5%) !important; /* Slightly darker than nav-link hover */
    }

    .navbar-admin-provider .navbar-nav .dropdown-item:hover,
    .navbar-admin-provider .navbar-nav .dropdown-item:focus {
        background-color: rgb(255 255 255 / 10%) !important; /* Light hover on dark bg */
    }


    /* --- Other Responsive Adjustments --- */
    .section-padding { /* Use clamp for fluid padding */
        padding-top: clamp(2rem, 1.5714rem + 2.1429vw, 3rem);
        padding-bottom: clamp(2rem, 1.5714rem + 2.1429vw, 3rem);
    }

    .site-footer-bottom {
        text-align: center; /* Center copyright and menu */
    }

    .site-footer-bottom .footer-menu { /* Stack menu items */
        margin-top: 1rem;
        margin-bottom: 1rem;

        /* column-count: 1; /* Ensure single column if it was multi */
    }
}

/* Mobile (Bootstrap's md breakpoint and below) */
@media screen and (width <= 767.98px) {
    .btn,
    .btn-secondary,
    .btn-success {
        font-size: var(--cc-fs-small); /* Smaller font size for buttons on mobile */
        padding: 0.4rem 0.8rem; /* Adjust padding for smaller buttons */
    }

    .auth-card .img-fluid { /* Hide image in auth card on smaller screens */
        display: none;
    }

    .navbar-admin-provider .navbar-text { /* Hide extra text in admin nav */
        display: none;
    }
    h1, .h1 { font-size: calc(var(--cc-fs-h1) * 0.8); } /* Scale down headings */
    h2, .h2 { font-size: calc(var(--cc-fs-h2) * 0.8); }
    h3, .h3 { font-size: calc(var(--cc-fs-h3) * 0.85); }
}

/* Small Mobile (Bootstrap's sm breakpoint and below) */
@media screen and (width <= 575.98px) {
    .hero-section {
        padding-top: 80px;
        padding-bottom: 80px;
        min-height: auto; /* Allow hero to shrink */
    }

    .testimonial-card .card-body p.fst-italic {
        min-height: 150px; /* Reduce fixed height for testimonial text */
        max-height: 150px;
    }

    .site-footer .social-icon-link {
        width: 30px; height: 30px; line-height: 30px; font-size: calc(var(--cc-fs-p) * 0.9);
    }

    .carousel-control-prev {
        left: 0 !important;
    } /* Closer to edge */
    .carousel-control-next {
        right: 0 !important;
    } /* Closer to edge */
}