/* 
    Stinglers - Modern Design System
    Colors:
    - Primary Teal: #62D2C3
    - Secondary Purple: #A88BEB (from logo gradient)
    - Dark: #111111
    - Light: #F8F9FA
    - Cyan Bg: #E0F7F5
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
    --black: #000;
    --white: #fff;
    --primary-teal: #62D2C3;
    --secondary-purple: #A88BEB;
    --dark-bg: #111111;
    --light-bg: #F8F9FA;
    --cyan-bg: #E0F7F5;
    --text-main: #333333;
    --transition: all 0.3s ease;
    --font-stack: "Stack Sans Headline", "Stack Sans", "Inter", sans-serif;
}

body {
    font-family: var(--font-stack);
    color: var(--text-main);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

/* Global Container Constraints */
.container-fluid {
    max-width: 1660px;
    margin-left: auto;
    margin-right: auto;
}

.text-teal {
    color: var(--primary-teal);
}

.bg-teal {
    background-color: var(--primary-teal);
}

.bg-dark-custom {
    background-color: var(--dark-bg);
}

.bg-cyan-custom {
    background-color: var(--cyan-bg);
}

/* Navbar */
.navbar {
    padding: 1.5rem 5rem;
    /* Large side padding as per Figma fluid layout */
    transition: var(--transition);
    background: #000000 !important;
}

.navbar.scrolled {
    padding: 1rem 5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.navbar-brand img {
    height: 58px;
}

/* Animated Hamburger */
.hamburger-icon {
    width: 30px;
    height: 20px;
    /* Reduced height for better proportions */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Animation to X */
.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.navbar-toggler:not(.collapsed) .hamburger-icon span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.nav-link {
    font-weight: 400;
    color: #ffffff !important;
    font-size: 1.11111rem;
    padding: 0.5rem 1rem !important;
    transition: var(--transition);
    position: relative;
    text-transform: none !important;
    /* Force Title Case */
    letter-spacing: 0.2px;
}

.nav-link:hover {
    color: var(--primary-teal) !important;
}

.nav-link.active {
    color: var(--primary-teal) !important;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -12px;
    /* Move slightly lower to match figma spacing */
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-teal);
    border-radius: 2px;
}

.login-link {
    font-weight: 400;
    border: none !important;
    padding: 0 !important;
    margin-right: 35px !important;
    /* Increased spacing to Login */
    font-size: 1.16669rem;
    color: #fff !important;
    text-decoration: none !important;
    /* Removed underline */
}

.cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -12px;
    background: #FF0000;
    color: #fff;
    font-size: 0.83331rem;
    /* Updated as per Figma spec */
    font-weight: 700;
    width: 20px;
    /* Increased to 20px */
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero Section */
.hero-section {
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: #000;
}

.hero-slide {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    visibility: hidden;
    /* Hide inactive slides to prevent stacking */
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero-slide.slick-active {
    visibility: visible;
    opacity: 1;
    z-index: 10;
}

.hero-carousel,
.hero-carousel .slick-list,
.hero-carousel .slick-track {
    height: 100%;
}

.hero-content {
    max-width: 810px;
    text-align: left;
    padding-left: 15px;
}

.hero-content h1 {
    font-family: "Stack Sans Headline", var(--font-stack);
    font-size: 3.33331rem;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 25px;
    color: #fff;
}

.hero-content p {
    font-family: "Stack Sans Headline", var(--font-stack);
    font-size: 1.2rem;
    line-height: 1.7;
    max-width: 810px;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.9);
}

.btn-teal {
    background-color: var(--primary-teal);
    color: #000;
    /* Black text as per some Figma button styles, or white? I'll check. */
    padding: 18px 45px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    transition: var(--transition);
    display: inline-block;
    text-decoration: none;
}

.btn-teal:hover {
    background-color: #55c1b3;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(98, 210, 195, 0.4);
    color: #000;
}

/* Force CKEditor links in hero to look like the teal button */
.hero-content a {
    background-color: var(--primary-teal);
    color: #000 !important;
    padding: 14px 40px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    transition: var(--transition);
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
}

.hero-content a:hover {
    background-color: #55c1b3;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(98, 210, 195, 0.4);
    color: #000 !important;
}

/* Ensure CKEditor headings look right even if user picks H2 or H3 */
.hero-content h2, .hero-content h3 {
    font-family: "Stack Sans Headline", var(--font-stack);
    font-size: 3rem;
    font-weight: 600;
    line-height: 140%;
    margin-bottom: 20px;
    color: #fff;
}

/* Custom Hero Controls Styles */
.hero-controls {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    z-index: 100;
}

.hero-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.hero-dots .slick-dots {
    position: static;
    display: flex !important;
    padding: 0;
    margin: 0;
    list-style: none;
    align-items: center;
}

.hero-dots .slick-dots li {
    margin: 0 10px;
    width: auto !important;
    /* Prevent overlapping by allowing li to expand */
    height: 10px !important;
    display: flex;
    align-items: center;
}

.hero-dots .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    font-size: 0;
    line-height: 0;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    /* Smooth animation */
    border-radius: 50px;
    /* For capsule look on active */
    outline: none;
    cursor: pointer;
    position: relative;
}

/* Remove default black dot from slick theme */
.hero-dots .slick-dots li button:before {
    display: none !important;
}

.hero-dots .slick-dots li.slick-active button {
    background: var(--primary-teal);
    width: 80px;
    /* 80px width for active dot */
    height: 10px;
}

.hero-arrows div {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: var(--transition);
    font-size: 1rem;
}

.hero-next {
    border-color: var(--primary-teal) !important;
}

.hero-arrows div:hover {
    background: var(--primary-teal);
    border-color: var(--primary-teal);
    color: #000;
}

/* Hide default slick controls */
.hero-carousel .slick-prev,
.hero-carousel .slick-next,
.hero-carousel .slick-dots {
    display: none !important;
}

.hero-carousel .slick-prev:hover,
.hero-carousel .slick-next:hover {
    background: var(--primary-teal);
    border-color: var(--primary-teal);
}

/* Promo Bar */
.promo-bar {
    background: linear-gradient(90deg, var(--primary-teal), var(--secondary-purple));
    color: #fff;
    padding: 15px 0;
    text-align: center;
    font-weight: 600;
}

/* About Section */
.about-section {
    background-color: #fff;
}

.about-title {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
}

.about-content p {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1.2rem;
}

.about-img-wrapper img {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
}

/* Collections Section */
.collections-section {
    background-color: #F6F6F6;
    /* Light grey background from Figma */
}

.collection-page-title {
    font-family: "Stack Sans Headline", var(--font-stack);
    font-size: 2.625rem;
    /* Adjusted based on screenshot */
    font-weight: 500;
    color: #000;
    margin-bottom: 0;
}

.breadcrumb-divider {
    margin-bottom: 60px !important;
}

.breadcrumb-divider .divider-line {
    height: 1px;
    background-color: #e5e5e5;
    /* Lighter, thinner line */
}

.breadcrumb-divider .divider-diamond {
    color: #d1d1d1;
    /* Lighter diamond */
    font-size: 8px;
    /* Much smaller diamond */
}

.breadcrumb-divider h5 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.5px;
}

.collection-item.large .collection-img-box {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #f8f8f8;
    border-radius: 12px;
    /* Added border radius from screenshot */
    margin-bottom: 20px;
}

.collection-item.large .collection-item-title {
    font-size: 1.5rem;
    /* Adjusted based on screenshot */
    font-weight: 400;
    color: #000;
    line-height: 150%;
}

.collection-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

.collection-item {
    transition: var(--transition);
}

.collection-img-box {
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    border: 3px solid #F6F6F6;
    /* Matches section background to remain invisible */
}

.collection-img-box img {
    transition: transform 0.5s ease;
}

.collection-item:hover .collection-img-box {
    border-color: #62D2C3;
    /* High-visibility teal border on hover */
}

.collection-item:hover .collection-img-box img {
    transform: scale(1.05);
}

.collection-item-title {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 1.5rem;
    /* Updated to Figma spec */
    font-weight: 400;
    color: #000;
    line-height: 150%;
}

/* Trust Section */
.trust-title {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 2.2.625rem;
    font-weight: 500;
    color: #000;
}

.trust-box {
    background-color: #F1FDFC;
    /* Light mint/cyan background from Figma */
    padding: 2.125rem;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: var(--transition);
}

.trust-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(98, 210, 195, 0.15);
}

.trust-box h4 {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 150%;
    color: rgba(1, 1, 1, 0.80);
}

.trust-box p {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    max-width: 260px;
}

.trust-box-number {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 4rem;
    font-weight: 800;
    color: rgba(98, 210, 195, 0.2);
    /* Faded teal number */
    pointer-events: none;
}

.trust-img-box img {
    border-radius: 12px;
}

/* Testimonials Section */
.section-divider {
    width: 100%;
}

.divider-line {
    height: 1px;
    background-color: #e0e0e0;
}

.divider-dot {
    width: 6px;
    height: 6px;
    background-color: #62D2C3;
    border-radius: 50%;
}

.testimonials-title {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 2.66669rem;
    font-weight: 700;
    color: #000;
}

.testimonial-slider .slick-track {
    display: flex !important;
    align-items: stretch;
    padding: 30px 0;
    /* Space for scaling */
}

.testimonial-slider .slick-slide {
    height: auto !important;
    display: flex !important;
    justify-content: center;
}

.testimonial-slider .slick-slide>div {
    width: 100%;
}

.testimonial-card {
    background: #fff;
    padding: 2.5rem;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    margin: 0 10px;
}

.is-center {
    transform: scale(1.1);
    /* Increased height and width for center card */
    border-color: #62D2C3 !important;
    box-shadow: 0 15px 45px rgba(98, 210, 195, 0.1) !important;
    z-index: 5;
}

.quote-icon {
    line-height: 0;
}

.stars i {
    font-size: 0.9rem;
    margin: 0 1px;
}

.avatar-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-controls .testi-prev,
.testimonial-controls .testi-next {
    width: 50px;
    height: 50px;
    border: 1px solid #62D2C3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    color: #62D2C3;
    /* Teal icons as per request */
}

.testimonial-controls .testi-prev.disabled,
.testimonial-controls .testi-next.disabled {
    opacity: 0.95;
    cursor: not-allowed;
    border-color: #e0e0e0;
    color: #e0e0e0;
}

.testimonial-controls .testi-prev:not(.disabled):hover,
.testimonial-controls .testi-next:not(.disabled):hover {
    background-color: #62D2C3;
    color: #fff;
}

.testimonial-dots .slick-dots {
    position: static;
    display: flex !important;
    justify-content: center;
    align-items: center;
    /* Center dots vertically */
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.testimonial-dots .slick-dots li {
    margin: 0 4px;
    /* Tight spacing as per screenshot */
    display: flex;
    align-items: center;
    transition: all 0.4s ease;
}

.testimonial-dots .slick-dots li button {
    width: 10px;
    height: 10px;
    background: #D9D9D9;
    border: none;
    border-radius: 50%;
    font-size: 0;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    position: relative;
}

.testimonial-dots .slick-dots li button:before {
    display: none !important;
    /* Hide Slick default dots/numbers */
}

.testimonial-dots .slick-dots li.slick-active {
    width: 80px;
}

.testimonial-dots .slick-dots li.slick-active button {
    background: #62D2C3;
    width: 80px;
    height: 10px;
    border-radius: 10px;
}

/* Contact Section */
.contact-section {
    background-color: #F6F6F6;
    margin-top: 80px;
}

.contact-form .form-control {
    background-color: #efefef;
    border: none;
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 1rem;
    color: #333;
}

.contact-form .form-control::placeholder {
    color: #a0a0a0;
}

.contact-info h2 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--black);
    font-size: 2.625rem;
    margin-bottom: 40px;
}

.info-block p {
    margin-bottom: 5px;
    font-size: 1.375rem;
    font-weight: 300;
    line-height: normal;
}

.info-block p a {
    color: #000;
    text-decoration: none;
    transition: all 0.3s ease-in;
}

.info-block p a:hover {
    color: var(--primary-teal);
}

.info-block .divider-line-small {
    width: 20px;
    height: 3px;
    background-color: #000;
    margin-bottom: 15px;
}

.btn-submit-message {
    background-color: var(--primary-teal);
    color: #000;
    border: none;
    padding: 18px 60px;
    /* Adjusted padding for better proportions */
    border-radius: 12px;
    /* Adjusted radius from screenshot */
    font-weight: 600;
    font-size: 1.25rem;
    box-shadow: 0 4px 0 #4db39e;
    /* Subtle bottom shadow for 3D effect */
    transition: var(--transition);
}

.btn-submit-message:hover {
    background-color: #4db39e;
    transform: translateY(-2px);
}

/* Footer */
footer {
    background-color: var(--black);
    color: #fff;
    padding: 80px 0 30px;
}

.footer-logo {
    font-family: 'Pacifico', cursive;
    font-size: 2rem;
    color: var(--primary-teal);
    margin-bottom: 20px;
    display: block;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #aaa;
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--primary-teal) !important;
}

.social-links a {
    color: #fff;
    font-size: 1.5rem;
    margin-right: 20px;
    transition: var(--transition);
}

.social-links a:hover {
    color: var(--primary-teal);
}

/* Shop All Page Styles */
.shop-all-header .breadcrumb-divider h5 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.5px;
}

.shop-sidebar {
    padding-right: 2rem;
}

.filter-title {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
}

.clear-all-link {
    color: #135CE7;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
}

.clear-all-link:hover {
    text-decoration: underline;
}

.filter-subtitle {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
}

/* Custom Radio Buttons */
.custom-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    color: #000;
    position: relative;
}

.custom-radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 50%;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.custom-radio-label input[type="radio"]:checked~.custom-radio {
    border-color: #62D2C3;
}

.custom-radio-label input[type="radio"]:checked~.custom-radio::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #62D2C3;
    border-radius: 50%;
}

.radio-text {
    font-size: 1rem;
    font-weight: 500;
}

/* Sort Dropdown */
.shop-grid-title {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: #000;
}

.custom-sort-select {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px 40px 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
    box-shadow: none;
    cursor: pointer;
    background-color: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000' class='bi bi-sort-down' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding-left: 35px;
}

.custom-sort-select:focus {
    border-color: #62D2C3;
    box-shadow: none;
}

/* Product Cards */
.product-card {
    transition: var(--transition);
    height: 100%;
}

.product-img-box {
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f8f8;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.product-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-img-box img {
    transform: scale(1.05);
}

.product-title {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.product-price {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
}

/* Navbar Dropdowns */
.navbar .custom-dropdown {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.navbar .custom-dropdown .dropdown-item {
    color: #000;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar .custom-dropdown .dropdown-item:hover,
.navbar .custom-dropdown .dropdown-item:focus {
    background-color: var(--primary-teal);
    color: #fff;
}

/* Hide default Bootstrap dropdown arrows */
.navbar .dropdown-toggle::after {
    display: none !important;
}

/* Enable sub-menu display on hover for desktops */
@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover .custom-dropdown {
        display: block;
        margin-top: 0;
    }
}

/* Responsive Adjustments */
@media (max-width: 1400px) {

    .navbar,
    .navbar.scrolled {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .container-fluid {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 1199px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }

    .about-title {
        font-size: 3rem;
    }
}

@media (max-width: 991px) {

    .navbar,
    .navbar.scrolled {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    #navbarNav {
        background-color: rgba(0, 0, 0, 0.95);
        padding: 1rem;
        border-radius: 8px;
        margin-top: 10px;
    }

    .shop-sidebar {
        margin-bottom: 2rem;
    }

    .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-brand img {
        height: 40px;
    }

    .cart-icon {
        flex-shrink: 0;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .cart-icon svg {
        width: 28px;
        height: 28px;
    }

    .nav-link {
        margin: 10px 0;
        text-align: center;
        font-size: 1.1rem;
    }

    .nav-link.active::after {
        display: none;
    }

    .hero-section {
        height: 100vh;
        min-height: 600px;
        padding: 0;
    }

    .hero-slide {
        height: 100vh;
        min-height: 600px;
    }

    .hero-content {
        text-align: center;
        padding-left: 0;
        margin: 0 auto;
        padding-top: 60px;
        /* Space for navbar */
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .hero-content p {
        font-size: 1rem;
        margin: 0 auto 30px;
    }

    .hero-controls {
        bottom: 30px;
    }

    .hero-dots .slick-dots li.slick-active button {
        width: 40px;
        /* Smaller active dot for mobile */
    }

    .about-title {
        font-size: 2.5rem;
        text-align: center;
    }

    .about-content {
        text-align: center;
    }

    .about-section .btn-teal {
        display: block;
        width: fit-content;
        margin: 20px auto 0;
    }

    .trust-title {
        font-size: 2rem;
        text-align: center;
    }

    .trust-img-box {
        height: 300px !important;
        margin-top: 2rem;
    }

    .testimonials-title {
        font-size: 2rem;
        text-align: center;
    }

    .testimonial-card {
        padding: 1.5rem;
    }

    .is-center {
        transform: scale(1.05);
        /* Less dramatic scaling on mobile */
    }
}

@media (max-width: 767px) {

    .navbar,
    .navbar.scrolled {
        padding-left: 0;
        padding-right: 0;
    }

    .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .product-gallery .main-image-container img {
        max-height: 350px !important;
    }

    .shop-details-main {
        padding-top: 100px !important;
    }

    .shop-details-main h1.product-title {
        font-size: 2rem;
    }

    .shop-grid-title {
        font-size: 2rem;
        text-align: center;
    }

    .shop-content .row.align-items-center>.col-md-6.d-flex {
        justify-content: center !important;
    }

    .hero-arrows {
        display: none !important;
    }

    .hero-content h1 {
        font-size: 1.6rem;
    }

    .promo-bar {
        font-size: 0.9rem;
        padding: 10px 15px;
    }

    .collections-title {
        font-size: 2rem;
        text-align: center;
    }

    .trust-box {
        padding: 1.5rem;
    }

    .trust-box-number {
        font-size: 3rem;
    }

    .section-divider h5 {
        font-size: 0.9rem;
        margin: 0 10px !important;
    }

    .testimonial-dots .slick-dots li.slick-active {
        width: 40px;
    }

    .testimonial-dots .slick-dots li.slick-active button {
        width: 40px;
    }

    .testimonial-arrows {
        display: none !important;
    }

    .testimonial-dots .slick-dots li.slick-active {
        width: 40px;
    }

    .site-footer {
        text-align: center;
    }

    .social-links {
        justify-content: center;
        display: flex;
    }
}

@media (max-width: 575px) {
    .hero-content h1 {
        font-size: 1.4rem;
        line-height: 1.3;
    }

    .hero-content p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .btn-teal {
        padding: 12px 25px;
        font-size: 0.9rem;
    }

    .custom-input {
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
    }

    .contact-form {
        padding: 0 10px;
    }

    .cart-sidebar-body,
    .cart-sidebar-header,
    .cart-sidebar-footer {
        padding: 1rem !important;
    }

    .cart-sidebar {
        max-width: 100%;
    }
}

/* ==========================================
   Shop Details Page Styles
   ========================================== */
.shop-details-page .custom-breadcrumb .breadcrumb-item a {
    transition: opacity 0.3s ease;
}

.shop-details-page .custom-breadcrumb .breadcrumb-item a:hover {
    opacity: 0.7;
}

.shop-details-page .custom-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "›";
    /* Minimal arrow separator */
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.1;
    vertical-align: text-bottom;
}

.product-gallery .main-image-container {
    background-color: #fff;
    border-color: #eee !important;
}

.product-gallery .thumbnail {
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    border-color: #eee !important;
}

.product-gallery .thumbnail:hover {
    opacity: 0.9;
}

.product-gallery .thumbnail.active {
    opacity: 1;
    border-color: var(--primary-teal) !important;
    border-width: 2px !important;
}

.quantity-selector .quantity-btn {
    transition: color 0.3s ease;
}

.quantity-selector .quantity-btn:hover {
    color: var(--primary-teal) !important;
}

.shop-details-main .product-description {
    opacity: 0.85;
}

/* ==========================================
   Shopping Cart Sidebar
   ========================================== */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cart-overlay.open {
    opacity: 1;
    visibility: visible;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 450px;
    height: 100vh;
    background-color: #fff;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.cart-sidebar.open {
    transform: translateX(0);
}

.cart-sidebar-body::-webkit-scrollbar {
    width: 6px;
}

.cart-sidebar-body::-webkit-scrollbar-track {
    background: transparent;
}

.cart-sidebar-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.promo-group input:focus {
    box-shadow: none;
}

/* ==========================================
   Event Booking History Page Styles
   ========================================== */
.booking-history-page {
    background-color: #fafafa;
    min-height: 100vh;
}

.booking-header {
    padding-top: 140px;
    padding-bottom: 60px;
}

.booking-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 15px;
    color: #000;
}

.booking-breadcrumb {
    font-size: 0.95rem;
    color: #888;
}

.booking-breadcrumb a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.booking-breadcrumb a:hover {
    color: var(--primary-teal);
}

.booking-breadcrumb .active-crumb {
    color: #888;
    font-weight: 500;
}

.booking-card {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015);
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.booking-card-meta {
    font-size: 0.8rem;
    color: #999;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.booking-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1.25rem;
}

.booking-card-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.status-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.status-badge.confirmed {
    background-color: #e2fbf4;
    color: #12b76a;
}

.status-badge.pending {
    background-color: #fef0c7;
    color: #b5832a;
}

.booking-reference {
    font-size: 0.8rem;
    color: #888;
}

.booking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 1.25rem;
    column-gap: 1rem;
    margin-bottom: 2rem;
}

.booking-grid-item {
    display: flex;
    flex-direction: column;
}

.booking-label {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 0.25rem;
}

.booking-val {
    font-size: 0.95rem;
    font-weight: 600;
    color: #000;
}

.booking-val.price {
    color: var(--primary-teal);
}

.booking-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: auto;
}

.btn-download-ticket {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    color: #333;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem 0.5rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
}

.btn-download-ticket:hover {
    background-color: #f9f9f9;
    border-color: #b0b0b0;
    color: #333;
}

.btn-cancel-booking {
    background-color: #fff3f3;
    border: 1px solid #fed3d3;
    color: #f04438;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem 0.5rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
}

.btn-cancel-booking:hover {
    background-color: #fee4e4;
    border-color: #f04438;
    color: #f04438;
}

@media (max-width: 991px) {
    .booking-header {
        padding-top: 100px;
    }
}

@media (max-width: 575px) {
    .booking-header h1 {
        font-size: 2rem;
    }

    .booking-card {
        padding: 1.25rem;
    }

    .booking-actions {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Events Overview Page Styles
   ========================================== */
.event-card {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015);
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.event-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.event-card-img-wrapper {
    position: relative;
    border-radius: 8px;
    height: 200px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.event-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.event-card:hover .event-card-img {
    transform: scale(1.04);
}

.event-spots-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background-color: #12b76a;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(18, 183, 106, 0.2);
}

.event-fully-booked-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #333;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 14px;
    border-radius: 8px;
    width: calc(100% - 24px);
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    z-index: 3;
}

.event-fully-booked-banner i {
    color: #555;
    font-size: 0.9rem;
    margin-top: 2px;
}

.event-card-meta {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 0.5rem;
}

.event-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.event-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 1.25rem;
    column-gap: 1rem;
    margin-bottom: 2rem;
}

.event-details-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.event-details-item i {
    color: #888;
    font-size: 0.95rem;
    margin-top: 3px;
    width: 14px;
    text-align: center;
}

.event-details-content {
    display: flex;
    flex-direction: column;
}

.event-details-label {
    font-size: 0.78rem;
    color: #999;
    margin-bottom: 2px;
}

.event-details-val {
    font-size: 0.88rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.btn-reserve-spot {
    background-color: #fff;
    border: 1px solid #eaeaea;
    color: #000;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    text-decoration: none;
    width: 100%;
    margin-top: auto;
}

.btn-reserve-spot:hover {
    background-color: #fcfcfc;
    border-color: #000;
    color: #000;
}

.btn-join-waitlist {
    background-color: #fff;
    border: 1px solid #eaeaea;
    color: #000;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    text-decoration: none;
    width: 100%;
    margin-top: auto;
}

.btn-join-waitlist:hover {
    background-color: #fcfcfc;
    border-color: #000;
    color: #000;
}

@media (max-width: 575px) {
    .event-card {
        padding: 1.25rem;
    }
}

/* ==========================================
   Reserve Your Spot Modal Styles
   ========================================== */
.modal-input {
    background-color: #F8F9FA !important;
    border: none !important;
    height: 54px;
    border-radius: 8px !important;
    font-size: 0.95rem;
    color: #000 !important;
    padding: 0.75rem 1.25rem !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease !important;
}

.modal-input::placeholder {
    color: #999;
}

.modal-input:focus {
    background-color: #F1F3F5 !important;
}

.form-select.modal-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
}

.select-dropdown-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #000;
    font-size: 0.9rem;
    z-index: 5;
}

.booking-summary-box {
    background-color: #F6F6F6;
    border-radius: 8px;
}

.btn-teal-action {
    background-color: var(--primary-teal) !important;
    color: #000 !important;
    border-radius: 8px !important;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.25s ease !important;
}

.btn-teal-action:hover {
    background-color: #4ec2b3 !important;
    color: #000 !important;
    transform: translateY(-1px);
}

.btn-teal-action:active {
    transform: translateY(0);
}

.btn-outline-cancel {
    background-color: #fff !important;
    border: 1px solid #eaeaea !important;
    color: #000 !important;
    border-radius: 8px !important;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.25s ease !important;
}

.btn-outline-cancel:hover {
    background-color: #F8F9FA !important;
    border-color: #b5b5b5 !important;
}

.waitlist-people-banner {
    background-color: #FFF0E6 !important;
    font-size: 0.95rem;
    padding: 0.85rem 1.25rem !important;
}

.waitlist-people-banner i {
    color: #FF7A00 !important;
}

.waitlist-people-banner span {
    color: #000 !important;
}

.waitlist-people-banner strong {
    color: #FF7A00 !important;
}

.waitlist-notification-box {
    background-color: #F6F6F6 !important;
    color: #000 !important;
    font-size: 0.95rem;
    padding: 1rem 1.25rem !important;
}

.waitlist-notification-box i {
    color: #000 !important;
}

/* ==========================================
   Cancel Booking Modal Styles
   ========================================== */
.cancel-booking-modal-wrapper .modal-content {
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

.cancel-booking-modal-wrapper .modal-title {
    font-size: 2rem;
    font-weight: 700;
    color: #101828;
    letter-spacing: -0.02em;
}

.cancel-booking-modal-wrapper .modal-subtitle {
    font-size: 1rem;
    color: #667085;
    line-height: 1.5;
}

.cancel-modal-details {
    background-color: #F8F9FA;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #F2F4F7;
}

.cancel-modal-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.cancel-modal-detail-row:not(:last-child) {
    margin-bottom: 8px;
}

.cancel-modal-detail-row .detail-label {
    font-size: 1rem;
    color: #475467;
    font-weight: 400;
}

.cancel-modal-detail-row .detail-val {
    font-size: 1rem;
    color: #101828;
    font-weight: 600;
}

.cancel-modal-alert {
    background-color: #F8F9FA;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #F2F4F7;
}

.cancel-modal-alert .alert-icon-wrapper {
    color: #475467;
    font-size: 1.25rem;
    margin-top: 1px;
    line-height: 1;
}

.cancel-modal-alert .alert-message {
    font-size: 0.95rem;
    color: #475467;
    line-height: 1.5;
    font-weight: 400;
}

.cancel-modal-actions {
    display: flex;
    gap: 16px;
}

.btn-modal-cancel {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #FECDCA;
    color: #F04438;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-modal-cancel:hover {
    background-color: #FEF3F2;
    border-color: #FDA29B;
    color: #B42318;
}

.btn-modal-keep {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #D0D5DD;
    color: #344054;
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-align: center;
}

.btn-modal-keep:hover {
    background-color: #F9FAFB;
    border-color: #98A2B3;
    color: #101828;
}

@media (max-width: 575px) {
    .cancel-booking-modal-wrapper .modal-body {
        padding: 1.5rem !important;
    }

    .cancel-booking-modal-wrapper .modal-title {
        font-size: 1.6rem;
    }

    .cancel-modal-actions {
        flex-direction: column;
        gap: 12px;
    }

    .btn-modal-cancel,
    .btn-modal-keep {
        width: 100%;
        padding: 12px 16px;
    }
}

/* ==========================================
   Our Communities Page Custom Styles
   ========================================== */
.communities-page {
    background-color: #fafafa;
    min-height: 100vh;
}

.community-tabs-container {
    display: flex;
    gap: 32px;
    border-bottom: 1.5px solid #EAECF0;
    padding-bottom: 0;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.community-tab-btn {
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: #98A2B3 !important;
    padding: 0 0 12px 0 !important;
    border-radius: 0 !important;
    font-weight: 600;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: none !important;
    margin-bottom: -1.5px;
}

.community-tab-btn:hover {
    color: #101828 !important;
}

.community-tab-btn.active {
    color: #101828 !important;
    border-bottom-color: #62D2C3 !important;
    /* Stinglers brand light teal */
    box-shadow: none !important;
}

.community-pane {
    display: none;
}

.community-pane.active {
    display: block;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Available Communities Cards - Two-Tone Layout */
.community-card {
    background-color: #ffffff;
    border: 1.5px solid #EAECF0;
    border-radius: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
}

.community-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    border-color: #62D2C3;
}

.community-card-header {
    padding: 2.25rem 2rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
}

.community-card-header.style-popular {
    background-color: #EAFBFA;
    /* Very soft teal background */
}

.community-card-header.style-favorite {
    background-color: #FEFBE8;
    /* Very soft yellow background */
}

.community-card-header.style-friendly {
    background-color: #EDF6FF;
    /* Very soft blue background */
}

.community-card-body {
    padding: 2rem;
    background-color: #ffffff;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.badge-tag {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    display: inline-block;
    background-color: #FEF0C7;
    /* Pale gold/yellow badge tag */
    color: #101828;
}

.badge-type {
    font-size: 0.78rem;
    font-weight: 500;
    color: #98A2B3;
}

.community-card-title {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #101828;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.community-card-subtitle {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #667085;
    min-height: 42px;
}

.price-box {
    display: flex;
    align-items: baseline;
}

.price-val {
    font-family: "Stack Sans Headline", sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    color: #101828;
}

.price-label {
    margin-left: 4px;
    color: #98A2B3;
    font-size: 0.95rem;
}

.members-box {
    margin-bottom: 1.5rem;
}

.members-count {
    color: #101828;
    font-size: 0.92rem;
}

/* Bullet Checklist Style */
.community-features {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 2rem !important;
}

.community-features li {
    font-size: 0.95rem;
    color: #475467;
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 1.25rem;
}

.community-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: -1px;
    color: #475467;
    font-size: 1.2rem;
}

.btn-subscribe-group {
    background-color: #ffffff !important;
    border: 1px solid #101828 !important;
    color: #101828 !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 20px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-subscribe-group:hover {
    background-color: #101828 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Active Manage Group Cards */
.manage-card {
    background-color: #ffffff;
    border: 1.5px solid #EAECF0;
    border-radius: 16px;
    padding: 2.25rem 2rem 1.25rem 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.manage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    border-color: #62D2C3;
}

.manage-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #101828;
    max-width: 70%;
    line-height: 1.3;
}

.badge-status-active {
    background-color: #E6FBF4;
    /* Very soft light mint background */
    color: #027A48;
    /* Solid brand green text */
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    /* Rounded corners matching Figma & screenshot */
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-status-cancelled {
    background-color: #FEF3F2;
    color: #F04438;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.manage-card-billing {
    background-color: #F8F9FA;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #F2F4F7;
}

.billing-row {
    font-size: 0.95rem;
}

.btn-update-payment {
    border-radius: 8px !important;
    border: 1px solid #D0D5DD !important;
    color: #344054 !important;
}

.btn-update-payment:hover {
    background-color: #F9FAFB !important;
    color: #101828 !important;
}

.btn-cancel-subscription {
    border-radius: 8px !important;
    background-color: #FEF3F2 !important;
    /* Soft pastel pink background */
    border: 1px solid #F97066 !important;
    /* Solid thin red border */
    color: #D92D20 !important;
    /* Brand solid red text */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-cancel-subscription:hover {
    background-color: #D92D20 !important;
    /* Fills solid red on hover */
    border-color: #D92D20 !important;
    color: #ffffff !important;
}

.manage-card-actions .btn {
    font-size: 0.85rem !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap;
}

/* Success Modal Details */
.success-icon-wrapper {
    box-shadow: 0 8px 24px rgba(98, 210, 195, 0.3);
}

.step-num {
    box-shadow: 0 2px 6px rgba(98, 210, 195, 0.2);
}

@media (max-width: 991px) {
    .community-tab-btn {
        padding: 0 0 10px 0 !important;
        font-size: 1.05rem;
    }
}

@media (max-width: 575px) {
    .community-tabs-container {
        gap: 20px;
    }

    .community-tab-btn {
        width: auto;
        text-align: left;
    }
}

/* Auth Modals Design System */
.auth-modal-wrapper .modal-dialog {
    max-width: 520px;
}

.auth-modal-content {
    border-radius: 28px !important;
    padding: 10px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15) !important;
    position: relative;
    overflow: visible;
}

.btn-close-auth {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #101828;
    background-color: #ffffff;
    color: #101828;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.btn-close-auth i {
    font-size: 0.9rem;
    font-weight: 700;
}

.btn-close-auth:hover {
    background-color: #101828;
    color: #ffffff;
}

.auth-modal-title {
    font-size: 1.85rem;
    font-weight: 700 !important;
    color: #101828;
    letter-spacing: -0.5px;
}

.auth-modal-subtitle {
    font-size: 1.05rem;
    font-weight: 500 !important;
    color: #101828;
    line-height: 1.4;
}

.auth-input {
    background-color: #F8F9FA !important;
    border: 1px solid #EAECF0 !important;
    border-radius: 12px !important;
    height: 52px !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    color: #101828 !important;
    transition: all 0.2s ease !important;
}

.auth-input::placeholder {
    color: #98A2B3 !important;
}

.auth-input:focus {
    background-color: #ffffff !important;
    border-color: #62D2C3 !important;
    box-shadow: 0 0 0 4px rgba(98, 210, 195, 0.15) !important;
}

.btn-auth-teal {
    background-color: #62D2C3 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    height: 52px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-auth-teal:hover {
    background-color: #4ebfae !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.auth-link-blue {
    color: #3B82F6 !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

.auth-link-blue:hover {
    color: #1D4ED8 !important;
    text-decoration: underline !important;
}

.auth-footer-text {
    font-size: 0.95rem;
    color: #475467;
}

.auth-legal-text {
    font-size: 0.8rem;
    color: #667085;
    line-height: 1.4;
}

/* ==========================================================================
   Personal Profile details styles
   ========================================================================== */
.profile-badge-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.profile-badge-divider .badge-dot-line {
    display: inline-block;
    width: 100px;
    height: 1.5px;
    background-color: #EAECF0;
    position: relative;
}

.profile-badge-divider .badge-dot-line::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    background-color: #EAECF0;
    border-radius: 50%;
}

.profile-badge-divider .badge-dot-line:first-child::after {
    right: 0;
}

.profile-badge-divider .badge-dot-line:last-child::after {
    left: 0;
}

.profile-badge-divider .badge-text {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #62D2C3;
    padding: 0 16px;
}

.btn-logout {
    border-radius: 8px !important;
    background-color: #FEF3F2 !important;
    /* Soft light-red background */
    border: 1px solid #F97066 !important;
    /* Soft red outline border */
    color: #D92D20 !important;
    /* Brand strong red text */
    font-size: 0.9rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-logout:hover {
    background-color: #D92D20 !important;
    border-color: #D92D20 !important;
    color: #ffffff !important;
}

.profile-info-card {
    border-color: #EAECF0 !important;
    transition: all 0.3s ease;
}

.profile-info-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
}

.btn-edit-profile {
    border-radius: 8px !important;
    border: 1px solid #D0D5DD !important;
    background-color: #ffffff !important;
    color: #344054 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
}

.btn-edit-profile:hover {
    background-color: #F9FAFB !important;
    color: #101828 !important;
}

.profile-page .field-label {
    font-size: 0.85rem;
    color: #667085;
    font-weight: 500;
}

.profile-page .field-val {
    font-size: 1.15rem;
    font-weight: 600;
    color: #101828;
    display: block;
    word-break: break-all;
}

/* User navigation avatar indicator */
.profile-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-right: 30px;
    color: #ffffff !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.profile-nav-link:hover {
    opacity: 0.85;
}

.profile-nav-link img {
    border: 1px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 767px) {
    .profile-badge-divider .badge-dot-line {
        width: 50px;
    }
}

/* ==========================================
   BOOKING PAGE SPECIFIC STYLES
   ========================================== */
.booking-page {
    background-color: var(--light-bg);
}

.booking-header {
    margin-bottom: 3.5rem;
}

.booking-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 1.5rem;
    font-family: var(--font-stack);
}

/* Service Selection Cards */
.service-card {
    background: #ffffff;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.service-card:hover {
    border-color: var(--primary-teal);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.service-card.selected {
    border-color: var(--primary-teal);
    background-color: rgba(98, 210, 195, 0.03);
    box-shadow: 0 10px 25px rgba(98, 210, 195, 0.08);
}

.service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.service-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 0;
    line-height: 1.4;
    padding-right: 25px; /* prevent text overlap with radio */
}

/* Custom Radio Circle */
.custom-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #D1D1D1;
    border-radius: 50%;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card:hover .custom-radio {
    border-color: var(--primary-teal);
}

.service-card.selected .custom-radio {
    border-color: var(--primary-teal);
    background-color: var(--primary-teal);
}

.service-card.selected .custom-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
}

.service-duration {
    font-size: 0.9rem;
    color: #777777;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.service-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-teal);
    margin-bottom: 0;
}

/* Calendar & Slots Split Columns */
.calendar-card {
    background: #ffffff;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.calendar-title-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

.calendar-year {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111111;
}

.calendar-month {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111111;
}

.calendar-nav-btn {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #111111;
    transition: var(--transition);
}

.calendar-nav-btn:hover {
    background-color: #F0F2F5;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
}

.calendar-header-cell {
    font-size: 0.85rem;
    font-weight: 600;
    color: #9E9E9E;
    padding: 8px 0;
}

.calendar-day-cell {
    font-size: 1rem;
    font-weight: 600;
    color: #111111;
    padding: 10px 0;
    cursor: pointer;
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.calendar-day-cell:hover:not(.empty):not(.disabled) {
    background-color: rgba(98, 210, 195, 0.1);
    color: #111111;
}

.calendar-day-cell.empty {
    cursor: default;
    color: #CCCCCC;
}

.calendar-day-cell.disabled {
    cursor: not-allowed;
    color: #CCCCCC;
}

.calendar-day-cell.selected {
    background-color: var(--primary-teal) !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* Time Slots Side */
.slots-container {
    padding-left: 1.5rem;
}

.availability-note {
    font-size: 0.95rem;
    color: #444444;
    margin-bottom: 1.25rem;
}

.buffer-alert {
    background-color: #F5F5F5;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.875rem;
    color: #666666;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.buffer-alert i {
    color: #666666;
    font-size: 1rem;
}

/* Time Slots Grid */
.slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
    margin-bottom: 3rem;
}

.time-slot-btn {
    background-color: #ffffff;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 12px 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111111;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.time-slot-btn:hover:not(.disabled) {
    border-color: var(--primary-teal);
    background-color: rgba(98, 210, 195, 0.05);
    transform: translateY(-2px);
}

.time-slot-btn.disabled {
    background-color: #EAEAEA;
    color: #A0A0A0;
    border-color: #E5E5E5;
    text-decoration: line-through;
    cursor: not-allowed;
}

.time-slot-btn.selected {
    background-color: var(--primary-teal) !important;
    border-color: var(--primary-teal) !important;
    color: #ffffff !important;
    transform: translateY(0);
}

/* Bottom Action */
.booking-action-wrapper {
    margin-top: 2rem;
}

.btn-booking-continue {
    background-color: var(--primary-teal);
    color: #111111;
    padding: 14px 45px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 1.1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    display: inline-block;
    cursor: pointer;
}

.btn-booking-continue:hover {
    background-color: #55c1b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(98, 210, 195, 0.2);
    color: #111111;
}

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

/* Responsiveness adjustments */
@media (max-width: 991px) {
    .slots-container {
        padding-left: 0;
        margin-top: 3rem;
    }
}

/* ==========================================
   CHECKOUT PAGE SPECIFIC STYLES
   ========================================== */
.checkout-page {
    background-color: var(--light-bg);
}

.checkout-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 2rem;
    font-family: var(--font-stack);
}

.checkout-subtitle {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 0.25rem;
    font-family: var(--font-stack);
}

.checkout-subtitle-muted {
    font-size: 0.95rem;
    color: #777777;
    margin-bottom: 2rem;
}

.checkout-section-heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    font-family: var(--font-stack);
}

/* Checkout Form Controls */
.checkout-form-group {
    margin-bottom: 1.25rem;
}

.checkout-form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #777777;
    margin-bottom: 8px;
    display: block;
}

.checkout-input {
    background-color: #F8F9FA;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 12px 16px;
    width: 100%;
    font-size: 0.95rem;
    color: #111111;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkout-input:focus {
    background-color: #ffffff;
    border-color: var(--primary-teal);
    outline: none;
    box-shadow: 0 0 0 3px rgba(98, 210, 195, 0.1);
}

/* Custom Styled Selector Dropdown */
.checkout-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

/* Circular Custom Checkbox */
.custom-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    user-select: none;
}

.custom-checkbox-circle {
    width: 20px;
    height: 20px;
    border: 2px solid #D1D1D1;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-checkbox-wrap:hover .custom-checkbox-circle {
    border-color: var(--primary-teal);
}

.custom-checkbox-wrap.checked .custom-checkbox-circle {
    border-color: var(--primary-teal);
    background-color: var(--primary-teal);
}

.custom-checkbox-wrap.checked .custom-checkbox-circle::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
}

.custom-checkbox-label {
    font-size: 0.95rem;
    color: #111111;
    font-weight: 500;
}

/* Grey Summary Card (Figma Parity) */
.checkout-summary-card {
    background-color: #F4F5F7;
    border: 1px solid #EAEAEA;
    border-radius: 16px;
    padding: 2rem;
    margin-top: 1rem;
}

.checkout-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.checkout-summary-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111111;
    margin: 0;
    font-family: var(--font-stack);
}

.checkout-summary-edit {
    font-size: 0.9rem;
    font-weight: 600;
    color: #007BFF;
    text-decoration: none;
    transition: var(--transition);
}

.checkout-summary-edit:hover {
    color: #0056b3;
    text-decoration: underline;
}

.checkout-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.checkout-summary-label {
    font-size: 0.95rem;
    color: #555555;
    font-weight: 500;
}

.checkout-summary-val {
    font-size: 0.95rem;
    color: #111111;
    font-weight: 700;
    text-align: right;
}

.checkout-summary-divider {
    border: 0;
    border-top: 1px solid #E0E0E0;
    margin: 1.25rem 0;
}

.checkout-summary-total-label {
    font-size: 1rem;
    font-weight: 700;
    color: #111111;
}

.checkout-summary-total-val {
    font-size: 1.25rem;
    font-weight: 700;
    color: #52BDB3; /* Figma teal price color */
}

/* Checkout Button Row */
.checkout-actions-row {
    display: flex;
    gap: 15px;
    margin-top: 2rem;
}

.btn-checkout-cancel {
    background-color: #ffffff;
    color: #333333;
    padding: 14px 45px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 1.1rem;
    border: 1px solid #DCDCDC;
    transition: var(--transition);
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

.btn-checkout-cancel:hover {
    background-color: #F8F9FA;
    border-color: #CCCCCC;
    color: #111111;
}

.btn-checkout-cancel:active {
    background-color: #EAEAEA;
}

@media (max-width: 575px) {
    .checkout-actions-row {
        flex-direction: column;
    }
    .btn-booking-continue,
    .btn-checkout-cancel {
        width: 100%;
    }
}

/* ==========================================
   Global Mobile Responsiveness Safeguards
   ========================================== */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Prevent horizontal scrollbars induced by AOS entry animations */
html.aos-initialized [data-aos] {
    overflow: hidden !important;
}

/* Section vertical padding scaling under 768px for compact header layouts */
@media (max-width: 767px) {
    main,
    header,
    .shop-all-header,
    .booking-page main,
    .checkout-page main {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
    }
    
    .site-footer {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ==========================================================================
   Extracted Classes (replacing all inline styles)
   ========================================================================== */

/* Navbar dropdown chevron icon */
.nav-dropdown-icon {
    font-size: 0.8rem;
    padding-top: 2px;
}

/* Hero slides background */
.hero-bg-default {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/hero-bg.png');
}

/* Page main padding (booking, checkout etc.) */
.main-padding-150-80 {
    padding-top: 150px !important;
    padding-bottom: 80px !important;
}

/* Page heading sizes */
.title-2-5rem {
    font-size: 2.5rem;
}

.title-2-5rem-lh-1-2 {
    font-size: 2.5rem;
    line-height: 1.2;
}

/* Modal border radii */
.modal-radius-16 {
    border-radius: 16px;
}

.modal-radius-20-white {
    border-radius: 20px;
    background: #ffffff;
}

/* 4rem icon / large font */
.fs-4rem {
    font-size: 4rem;
}

/* Footer logo */
.footer-logo-img {
    max-height: 45px;
}

/* Footer about paragraph */
.footer-about-text {
    font-size: 0.95rem;
}

/* Generic text sizes */
.text-0-95rem {
    font-size: 0.95rem;
}

.text-1-2rem {
    font-size: 1.2rem;
}

.text-1-3rem {
    font-size: 1.3rem;
}

/* Dark plain links (contact info) */
.link-dark-plain {
    color: #000;
    text-decoration: none;
}

.link-dark-plain:hover {
    color: var(--primary-teal);
}

/* ── Cart Sidebar ── */
.cart-item-img-container {
    width: 70px;
    height: 70px;
}

.cart-item-img-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-name {
    font-size: 0.95rem;
}

.cart-qty-icon {
    font-size: 0.7rem;
}

.cart-qty-val-text {
    font-size: 0.9rem;
}

.cart-summary-text {
    font-size: 0.95rem;
}

.promo-tag-icon {
    transform: scaleX(-1);
}

.promo-input-text {
    font-size: 0.9rem;
}

/* ── Checkout success modal ── */
.success-icon-wrap {
    width: 80px;
    height: 80px;
    background-color: rgba(98, 210, 195, 0.15);
}

.icon-primary-teal {
    color: var(--primary-teal);
}

/* ── Communities page ── */
.community-intro-text {
    max-width: 750px;
    font-size: 1.15rem;
    line-height: 1.6;
}

.group-avatar-img {
    width: 80px;
    height: 80px;
}

.step-badge {
    width: 24px;
    height: 24px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ── Events page ── */
.filter-brightness-95 {
    filter: brightness(0.95);
}

/* ── Profile page ── */
.profile-page-title {
    font-size: 2.8rem;
    letter-spacing: -0.5px;
}

.profile-avatar-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.profile-section-heading {
    font-size: 1.35rem;
}

.form-label-sm {
    font-size: 0.85rem;
}

.btn-cancel-profile {
    font-size: 0.95rem;
    font-weight: 500;
}

/* ── Shop Details page ── */
.shop-details-main {
    padding-top: 150px;
    padding-bottom: 50px;
}

.main-product-img {
    max-height: 500px;
    object-fit: contain;
}

.product-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: contain;
    cursor: pointer;
}

.qty-selector-wrap {
    width: fit-content;
    padding: 0.25rem;
}

.qty-btn-clean {
    border: none;
    background: transparent;
}

.qty-btn-icon {
    font-size: 0.8rem;
}

.product-desc-text {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 550px;
}

/* ── Aliases to reconcile HTML class names ── */

/* Profile page */
.profile-section-title {
    font-size: 1.35rem;
}

.btn-cancel-form {
    font-size: 0.95rem;
    font-weight: 500;
}

/* Shop details page */
.main-padding-150-50 {
    padding-top: 150px;
    padding-bottom: 50px;
}

.product-main-img {
    max-height: 500px;
    object-fit: contain;
}

.product-thumbnail-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    cursor: pointer;
}

.qty-selector-fit {
    width: fit-content;
    padding: 0.25rem;
}

.qty-icon {
    font-size: 0.8rem;
}

/* quantity-btn clean style */
.quantity-btn {
    border: none;
    background: transparent;
}

/* =========================================
   Booking History Page Styles 
   ========================================= */

.booking-history-page {
    background-color: #F4F6F8;
    padding-top: 150px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.bh-breadcrumb {
    font-size: 14px;
    margin-bottom: 24px;
    color: #777E90;
}

.bh-breadcrumb .active-crumb {
    color: #B1B5C3;
}

.bh-breadcrumb .inactive-crumb {
    color: #353945;
    text-decoration: none;
}

.bh-page-title {
    font-size: 34px;
    font-weight: 700;
    color: #1A1D1F;
    margin-bottom: 40px;
}

.bh-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 991px) {
    .bh-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .bh-grid {
        grid-template-columns: 1fr;
    }
}

.bh-card {
    background-color: #FFFFFF;
    border: 1px solid #E6E8EC;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    max-width: 532px;
    width: 100%;
    margin: 0 auto;
}

.bh-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bh-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #1A1D1F;
    margin: 0;
}

.bh-btn-cancel {
    background-color: #FFF1F0;
    border: 1px solid #FF4D4F;
    color: #FF4D4F;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 6px 12px;
    transition: all 0.3s ease;
}

.bh-btn-cancel:hover {
    background-color: #ffe1e0;
}

.bh-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.bh-status-badge {
    border-radius: 50px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bh-status-badge.confirmed {
    background-color: #EBF9F4;
    color: #10B981;
}

.bh-status-badge.pending {
    background-color: #FEF3C7;
    color: #D97706;
}

.bh-booked-on {
    font-size: 12px;
    color: #777E90;
    font-weight: 500;
}

.bh-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    margin-bottom: 24px;
}

.bh-detail-item {
    display: flex;
    flex-direction: column;
}

.bh-detail-label {
    color: #777E90;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 4px;
}

.bh-detail-value {
    color: #1A1D1F;
    font-size: 14px;
    font-weight: 700;
}

.bh-detail-value.amount {
    color: #10B981;
}

.bh-card-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.bh-btn-action {
    background-color: #FFFFFF;
    border: 1px solid #23262F;
    color: #23262F;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    padding: 10px 16px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.bh-btn-action:hover {
    background-color: #F4F6F8;
    color: #23262F;
}

/* =========================================
   Category Detail Pages
   ========================================= */

.category-detail-page {
    background-color: #FFFFFF;
}

.cd-main-container {
    padding-top: 40px;
    padding-bottom: 80px;
}

.cd-breadcrumb {
    font-size: 14px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #6C757D;
    margin-bottom: 24px;
}

.cd-breadcrumb a {
    color: #1C1C1C;
    text-decoration: none;
    font-weight: 500;
}

.cd-breadcrumb .cd-separator {
    margin: 0 8px;
    color: #6C757D;
}

.cd-page-title {
    font-size: 36px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    color: #1C1C1C;
    margin-bottom: 12px;
}

.cd-subtitle {
    font-size: 16px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    color: #6C757D;
    line-height: 1.5;
    margin-bottom: 48px;
}

.cd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 20px;
}

@media (max-width: 991px) {
    .cd-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .cd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .cd-grid {
        grid-template-columns: 1fr;
    }
}

.cd-card {
    text-decoration: none;
    display: block;
    cursor: pointer;
    background: transparent;
    transition: transform 0.3s ease;
}

.cd-card:hover {
    transform: translateY(-4px);
}

.cd-img-box {
    aspect-ratio: 1 / 1;
    background-color: #F4F4F4;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 16px;
}

.cd-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.cd-card-title {
    font-size: 16px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    color: #1C1C1C;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.cd-card-price {
    font-size: 18px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    color: #1C1C1C;
    margin: 0;
}

/* Custom Checkout Buttons matching Figma */
.checkout-btns-wrapper {
    display: flex;
    gap: 12px;
    margin-top: 2rem;
    align-items: stretch;
}

.btn-checkout-proceed {
    background-color: #5bd3c7; /* Matching Figma Teal */
    color: #111111;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-checkout-proceed:hover {
    background-color: #4ac2b0;
}

.btn-checkout-secondary {
    background-color: #FFFFFF;
    color: #111111;
    border: 1px solid #DCDCDC;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-checkout-secondary:hover {
    background-color: #F8F9FA;
    color: #111111;
}

/* Custom Checkbox/Radio Button Styles for Bootstrap form-check */
.form-check-input:checked {
    background-color: var(--primary-teal) !important;
    border-color: var(--primary-teal) !important;
}
.form-check-input:focus {
    border-color: var(--primary-teal) !important;
    box-shadow: 0 0 0 0.25rem rgba(98, 210, 195, 0.25) !important;
}