/* ==========================================================================
   THEME VARIABLES
   ========================================================================== */
:root {
    --color-accent: #40E0D0;
    /* Turquoise (primary accent) */
    --color-accent-dark: #2a9d8f;
    /* Teal (complementary hover/accent) */
    --color-heading: #2c3e50;
    /* Heading / title text */
    --color-text: #333;
    /* Default text */
    --color-text-muted: #555;
    /* Secondary text */
    --color-text-light: #666;
    /* Tertiary text */
    --color-border: #ccc;
    /* Form borders / dividers */
    --color-divider: #eee;
    /* Section dividers */
    --color-bg-light: #f5f5f5;
    /* Light background (tags, badges) */
    --color-bg-lighter: #fafafa;
    /* Hover backgrounds */
    --color-bg-dark: #222;
    /* Footer background */
    --color-footer-text: #ddd;
    /* Footer links */
    --color-link: #0078D4;
    /* A-Z filter active */
    --color-link-hover: #005a9e;
    /* A-Z filter hover */
    --color-shadow-light: rgba(0, 0, 0, 0.08);
    /* Light shadow */
    --color-shadow-medium: rgba(0, 0, 0, 0.12);
    --color-shadow-dark: rgba(0, 0, 0, 0.15);
    --color-shadow-darker: rgba(0, 0, 0, 0.2);
    --color-white: #fff;
    /* Pure white */
}


/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */

.is-hidden {
    display: none;
}

/* Navbar Logo */
.navbar-logo {
    width: auto;
    max-height: 100%;
}

.hbc-sticky-header {
    position: relative;
    /* or static */
    top: auto;
    /*position: sticky;top: 0; z-index: 101*/
}

.w3l-inner-banner-main .meet-the-team {
    background: url(../images/the-team.webp) no-repeat center;
}

.hbc-book-salon-btn {
    font-weight: 600;
    /* Bootstrap uses 500–700 for emphasis */
    color: #fff;
    background: linear-gradient(#599bb3, #408c99);
    box-shadow: 0 0.625rem 1.1875rem -0.375rem rgba(0, 0, 0, 0.3);
    /* Converted px to rem */
}

.hbc-book-salon-btn:hover {
    background: linear-gradient(#408c99, #599bb3);
    text-decoration: none;
    /* Prevent underline on hover */
}

/* Normalize carousel image heights */
.hbc-home-categories-carousel .carousel-item img {
    height: 450px;
    /* adjust to taste */
    object-fit: cover;
    width: 100%;
    border-radius: 0.5rem;
}

@media (max-width: 768px) {
    .hbc-home-categories-carousel .carousel-item img {
        height: 300px;
    }
}

/* Overlay title styling */
.hbc-home-categories-caption h5 {
    background-color: rgba(0, 0, 0, 0.65);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}


/* ==========================================================================
   CATEGORY HEADER & LAYOUT
   ========================================================================== */

.hbc-category-header {
    padding: 50px 0 40px 0;
    margin-bottom: 40px;
}

.hbc-category-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hbc-category-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* ==========================================================================
   CATEGORY IMAGE
   ========================================================================== */

.hbc-category-image-col {
    width: 300px;
    /* fixed width */
    height: 400px;
    /* fixed height */
    flex-shrink: 0;
    /* prevent flex shrinking */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 0 transparent;
    transition: box-shadow 0.3s ease;
    animation-fill-mode: both;
    /* keep size after animation */
}


.hbc-category-image-col:hover {
    box-shadow: 0 12px 30px var(--color-shadow-darker);
}

.hbc-category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    outline: 2px dashed lime;
}

/* ✅ hover now applies through the container */
.hbc-category-image-col:hover .hbc-category-img {
    transform: scale(1.05);
}


/* ==========================================================================
   CATEGORY TEXT
   ========================================================================== */

.hbc-category-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.hbc-category-description {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--color-text-light);
    max-width: 800px;
}

.hbc-category-overview {
    padding: 25px 0;
    margin-top: 25px;
    border-top: 1px solid var(--color-divider);
}

.hbc-overview-text {
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
}


/* ==========================================================================
   META INFO (Service Count, Tags, Etc.)
   ========================================================================== */

.hbc-category-meta {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.hbc-service-count {
    background: var(--color-bg-light);
    padding: 8px 15px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
}

.hbc-service-count i {
    margin-right: 8px;
    color: var(--color-accent);
}


/* ==========================================================================
   SERVICE ELEMENTS
   ========================================================================== */

.hbc-divider {
    border-top: 2px solid var(--color-accent);
    margin: 15px 0;
}

.hbc-service-title {
    color: var(--color-heading);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.hbc-service-slogan {
    color: var(--color-accent);
    font-style: italic;
    font-weight: 500;
    margin-bottom: 10px;
}

.hbc-service-info {
    color: var(--color-text-muted);
    margin-bottom: 10px;
    line-height: 1.6;
}

.hbc-service-duration {
    color: #7f8c8d;
    /* could make variable if reused */
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.hbc-service-duration i {
    margin-right: 8px;
}

.hbc-service-price {
    color: var(--color-accent-dark);
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 15px;
}

.hbc-no-services {
    text-align: center;
    padding: 40px;
    background: var(--color-white);
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--color-shadow-light);
    margin: 20px 0;
}


/* ==========================================================================
   SERVICE CARD (Hover Effects)
   ========================================================================== */

.propClone {
    transition: all 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid transparent;
}

.propClone:hover {
    box-shadow: 0 8px 20px var(--color-shadow-medium);
    border: 1px solid var(--color-divider);
    background: rgba(255, 255, 255, 0.95);
}

.propClone:hover .about-grids {
    background-color: var(--color-bg-lighter);
}

.propClone:hover .hbc-divider {
    border-color: var(--color-accent-dark);
    transition: border-color 0.3s ease;
}

.propClone:hover .hbc-service-title {
    color: var(--color-accent-dark);
}

.propClone:hover .hbc-service-slogan {
    color: var(--color-accent-dark);
    filter: brightness(1.1);
    transition: filter 0.3s ease;
}

.propClone:hover .hbc-service-price {
    color: var(--color-accent-dark);
    text-shadow: 0 0 4px rgba(42, 157, 143, 0.2);
    transition: text-shadow 0.3s ease;
}

/* Make all service cards equal height */
.cards .about-grids {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Pin price/book section to the bottom of the card */
.cards .hbc-price-booking {
    margin-top: auto;
}

/* Optional: add some spacing for the offers section */
.cards .hbc-course-grid {
    margin-top: 1rem;
}

/* ==========================================================================
   CTA BUTTON
   ========================================================================== */

.hbc-service-cta {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    background: var(--color-accent);
    color: var(--color-white);
    padding: 8px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.propClone:hover .hbc-service-cta {
    opacity: 1;
}


/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */

.hbc-fieldset {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.hbc-form-group {
    padding-top: 10px;
}

.hbc-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='%2340E0D0' d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center;
    background-size: 12px;
    padding-right: 30px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
}


/* ==========================================================================
   BANNER
   ========================================================================== */

.hbc-banner-box {
    display: inline-block;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px 30px;
    border-radius: 8px;
    max-width: 700px;
    margin: 0 auto;
}

.hbc-banner-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.hbc-banner-subtitle {
    font-size: 1.1rem;
    color: var(--color-white);
    margin: 0;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.hbc-credit {
    text-align: center;
    font-size: 12px;
    color: var(--color-footer-text);
    background-color: var(--color-bg-dark);
    padding: 10px 0;
    margin: 0;
}

.hbc-footer-link {
    color: var(--color-footer-text);
    text-decoration: none;
}

.hbc-footer-link:hover {
    text-decoration: underline;
    color: var(--color-white);
}


/* ==========================================================================
   A-Z FILTER
   ========================================================================== */

.hbc-az-filter {
    margin-bottom: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.az-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.5rem;
    white-space: nowrap;
}

.hbc-az-link {
    display: inline-block;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    background: #f5f5f5;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
}

.hbc-az-link.hbc-active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* ========================================================================== 
   COURSE OPTIONS
   ========================================================================== */

.hbc-course-grid {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding: 12px 16px;
    margin-top: 14px;
    border-radius: 4px;
    font-size: 0.95em;
}

.hbc-course-heading {
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.hbc-course-heading i {
    margin-right: 6px;
    color: #666;
}

.hbc-course-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 👈 This aligns the price to the top */
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.hbc-course-row:last-child {
    border-bottom: none;
}

.hbc-course-details {
    flex: 1;
    color: #444;
    line-height: 1.4;
}

.hbc-course-price {
    font-weight: bold;
    color: #222;
    white-space: nowrap;
    padding-left: 12px;
}

/* Cloudflare Turnstile */

/* Small top margin */
.hbc-mt-sm {
    margin-top: 0.5rem;
    /* 8px */
}

/* Medium top margin */
.hbc-mt-md {
    margin-top: 1rem;
    /* 16px */
}

/* Large top margin */
.hbc-mt-lg {
    margin-top: 2rem;
    /* 32px */
}


.hbc-alert-box {
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.hbc-alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.hbc-alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.hbc-alert-icon {
    margin-right: 15px;
    font-size: 24px;
}

.hbc-opening-hours {
    margin-top: 1rem;
}

.hbc-opening-hours ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hbc-opening-hours li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.hbc-day {
    font-weight: 500;
}

.hbc-dots {
    flex: 1;
    border-bottom: 1px dotted #ccc;
    margin: 0 8px;
}

.hbc-time {
    font-style: italic;
}

.hbc-open-now {
    color: green;
    font-weight: bold;
}

.hbc-closed-now {
    color: red;
    font-weight: bold;
}

.hbc-opening-hours .hbc-today {
    font-weight: bold;
    color: var(--primary-color);
    /* matches your theme */
}

.hbc-opening-hours .hbc-today .hbc-time {
    color: var(--heading-color, #333);
}

.hbc-opening-hours li.hbc-today {
    background-color: #fff59d;
    /* soft yellow */
    border-radius: 4px;
    padding: 4px 8px;
}

.hbc-opening-hours li.hbc-today .hbc-day,
.hbc-opening-hours li.hbc-today .hbc-time {
    font-weight: bold;
    color: #000;
    /* black text for contrast */
}

.hbc-opening-hours li.hbc-today .hbc-dots {
    border-bottom: 1px dotted #000;
    /* or match text color */
}

/* Required field asterisk */
.hbc-required {
    color: #dc3545;
    /* Bootstrap danger red */
    font-size: 0.65em;
    vertical-align: super;
}

/* Readonly lock icon */
.hbc-readonly {
    color: #6c757d;
    /* Bootstrap muted gray */
    font-size: 0.65em;
    vertical-align: super;
}

.hbc-policy-section {
    line-height: 200%;
    margin-bottom: 1.5rem;
}

.hbc-policy-section ul,
.hbc-policy-section ol {
    list-style-type: disc !important;
    /* restore bullets */
    list-style-position: outside !important;
    margin: 0 0 1rem 1.5rem !important;
    /* add left indent */
    padding-left: 1.5rem !important;
    /* required for bullets */
}

.hbc-policy-section ol {
    list-style-type: decimal !important;
    /* numbered list */
}

.hbc-policy-section li {
    display: list-item !important;
    /* reset block to list-item */
    margin-bottom: 0.5rem;
    /* spacing between items */
}

header.w-100.absolute-top.scrolled {
    padding: 0;
}

header.w-100.absolute-top.scrolled .navbar-logo {
    width: 50%;
}

.compact-navbar {
    position: fixed;
    top: 0;
    z-index: 1050;
    transition: transform 0.6s ease, opacity 0.6s ease;
    background-color: #5acae3;
    width: 100%;

}

.compact-navbar.d-none {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.compact-navbar.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.compact-logo {
    height: 32px;
}

.hbc-summernote-output ul,
.hbc-summernote-output ol {
    list-style-type: disc !important;
    /* restore bullets */
    list-style-position: outside !important;
    margin: 0 0 1rem 1.5rem !important;
    /* add left indent */
    padding-left: 1.5rem !important;
    /* required for bullets */
}

.hbc-summernote-output ol {
    list-style-type: decimal !important;
    /* numbered list */
}

.hbc-summernote-output li {
    display: list-item !important;
    /* reset block to list-item */
    margin-bottom: 0.5rem;
    /* spacing between items */
}

.hbc-aspect-box {
    width: 100%;
    aspect-ratio: 3 / 4;
    /* or 4 / 3, 1 / 1, etc. */
    overflow: hidden;
    display: block;
    position: relative;
}

.hbc-aspect-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    /* optional */
}

/* ========================================================================== 
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 992px) {
    .hbc-category-image-col {
        width: 250px;
        height: 330px;
    }
}

@media (max-width: 768px) {
    .hbc-category-image-col {
        width: 180px;
        height: 240px;
    }

    .hbc-category-title {
        font-size: 2rem;
    }

    .hbc-category-description {
        font-size: 1.1rem;
    }

    .hbc-category-overview {
        padding: 15px 0;
    }

    .hbc-category-header {
        padding: 40px 0 30px 0;
    }
}

@media (max-width: 576px) {
    .hbc-category-image-col {
        width: 140px;
        height: 180px;
    }

    .hbc-course-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .hbc-course-price {
        margin-top: 4px;
        padding-left: 0;
    }

}