:root {
    --primary-color: #4A90E2;
    --secondary-color: #F8F9FA;
    --accent-color: #F5A623;
    --text-color: #333333;
    --bg-color: #FFF8F0;
    --footer-bg: #438E44;
    --gradient-start: #9C27B0;
    --gradient-end: #E91E63;
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    overflow-x: hidden;
}

/* Typography & Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
}

.font-outfit {
    font-family: 'Outfit', sans-serif;
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

.ls-2 {
    letter-spacing: 2px;
}

.text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.section-title {
    font-size: 2.5rem;
    color: #333;
}

/* Navbar Customization */
.navbar {
    backdrop-filter: blur(10px);
    background-color: rgba(68, 105, 223, 0.95) !important;
    /* Matches original blue #4469DF but with opacity */
    transition: background-color 0.3s;
}

.navbar-brand img {
    transition: transform 0.3s;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.nav-link {
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link.active {
    font-weight: 700;
}


/* Hero Section */
.hero {
    height: 100vh;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    /* No negative margin needed with fixed-top navbar if we handle body padding or let it overlay */
    padding-top: 76px;
    /* Space for fixed navbar if content shouldn't hide */
    margin-top: -76px;
    /* Pull it back up to be behind the transparent navbar if desired */
}

/* Fix for content being too high due to pull up */
.hero .container {
    padding-top: 80px;
}

.hero-overlay {
    background: rgba(0, 0, 0, 0.2);
}

/* Feature Cards */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Promo Section */
.promo-banner {
    /* Retain the gradient split look or fallback */
    background: linear-gradient(90deg, #537CEC 35%, #FAD961 35%);
}

@media (max-width: 768px) {
    .promo-banner {
        background: linear-gradient(180deg, #537CEC 40%, #FAD961 40%);
        flex-direction: column;
    }
}

/* Product Cards */
.product-card {
    transition: transform 0.3s ease;
    background-color: #f8f9fa;
    /* slightly off-white */
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

/* Testimonials */
.testimonial-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
}

.testimonial-scroll::-webkit-scrollbar {
    display: none;
}

/* Newsletter */
.newsletter-box {
    background: linear-gradient(135deg, #CE93D8, #F48FB1);
}

/* Footer */
footer {
    background-color: var(--footer-bg);
}

footer a:hover {
    text-decoration: underline !important;
    opacity: 1 !important;
}

/* Icons */
.social-icons a {
    transition: transform 0.3s;
}

.social-icons a:hover {
    transform: translateY(-3px);
}

/* Shop Page Styles */
.shop-hero {
    background-color: #438E44;
    /* Match footer green */
    border-radius: 50px 200px 50px 50px;
    /* Custom shape */
    padding: 4rem;
    color: white;
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}

.shop-hero h1,
.shop-hero h2,
.shop-hero h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

/* Product Card Colors */
.bg-pale-green {
    background-color: #C5E1C5;
}

.bg-pale-purple {
    background-color: #E1C5E1;
}

.bg-pale-blue {
    background-color: #DAE8FC;
}

.bg-pale-yellow {
    background-color: #FFF2CC;
}

.bg-pale-navy {
    background-color: #B0C4DE;
}

.bg-pale-pink {
    background-color: #F8CECC;
}

.shop-product-card {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.shop-product-card:hover {
    transform: translateY(-5px);
}

.shop-product-card .card-body {
    padding: 1rem;
}

.shop-product-card .card-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.shop-product-card .card-price {
    font-weight: 700;
    color: #333;
    font-size: 1rem;
}

/* Limited Edition */
.limited-card {
    border-radius: 20px;
    background: white;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.badge-limited {
    background-color: #4A90E2;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0 0 20px 0;
    margin-bottom: 2rem;
}

/* About Page Styles */
.about-hero {
    background: url('../images/a4.jpg') center/cover no-repeat;
    border-radius: 0 0 50px 50px;
    padding: 8rem 2rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 4rem;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    /* Light overlay */
    backdrop-filter: blur(5px);
}

.value-card {
    background-color: #FCE4EC;
    /* Pinkish */
    border-radius: 20px;
    border: none;
    overflow: hidden;
    transition: transform 0.3s;
}

.value-card:hover {
    transform: translateY(-5px);
}

.value-card img.main-img {
    height: 100%;
    object-fit: cover;
    min-height: 200px;
}

.community-section {
    background: linear-gradient(180deg, #FFF8F0 0%, #E8F5E9 100%);
    /* Beige to Green gradient */
    border-radius: 50px 50px 0 0;
    padding: 5rem 0 10rem 0;
    /* Extra padding bottom for overlap if needed */
    margin-top: 5rem;
}

.community-card {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Cart Page Styles */
.cart-wave-container {
    background-color: #FDD835;
    /* Yellow */
    border-radius: 50px 50px 30px 30px;
    /* Approximate wave/rounded shape top */
    padding: 3rem;
    position: relative;
    /* To create a true wave use SVG or multiple border radius trick, simple rounded for now as base */
    border-top-left-radius: 50px 30px;
    border-top-right-radius: 50px 30px;
    /* Use mask or clip-path for complex wave if needed, sticking to simple rounded for speed unless SVG provided */
}

/* Wavy top effect approximation using border-radius on pseudo elements or simpler approach for now: */
.cart-wave-bg {
    background-color: #FDD835;
    border-radius: 60px;
    /* Big rounded corners matching mock */
    padding: 4rem;
    margin-top: 2rem;
}

.cart-item-card {
    background: transparent;
    /* Mock shows image on card? No, looks like card with image inside. */
    /* Wait, the mockup shows the Items in Your Cart section is inside the yellow area. 
       The PRODUCT itself looks like a card with an image and details below it. */
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.3);
    /* Semi transparent or distinct color? Mock shows solid colors for bottom part */
}

.cart-item-image {
    position: relative;
    height: 250px;
}

.cart-check {
    position: absolute;
    top: 10px;
    right: 10px;
    background: white;
    border-radius: 5px;
    padding: 5px;
    color: #43A047;
    /* Green check */
}

.cart-item-details {
    padding: 1rem;
    /* The mock shows specific background colors for the text area? 
       Left card: Purple image bg? No, image is p4? Text bg is brownish/tan. 
       Right card: Green image bg? Text bg is greenish/tan.
       Actually looks like the product card style from shop page but slightly different.
       Let's use specific classes for the mock items. 
    */
    background-color: rgba(0, 0, 0, 0.1);
    /* Fallback */
}

.btn-continue-shop {
    border: 2px solid #F48FB1;
    color: #F48FB1;
    background: white;
    font-weight: 600;
}

.btn-checkout {
    background-color: #F48FB1;
    color: white;
    font-weight: 600;
    border: none;
}

.btn-remove-all {
    background-color: #000;
    color: white;
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.summary-section {
    color: #333;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-weight: 500;
}

.btn-payment {
    background-color: #43A047;
    /* Green */
    color: white;
    width: 100%;
    font-weight: 600;
    padding: 12px;
    border-radius: 10px;
}

/* Checkout Page Styles */
.checkout-container {
    background-color: #FDD835;
    /* Yellow matching cart/mock */
    border-radius: 30px;
    padding: 3rem;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.checkout-form .form-control {
    background-color: white;
    border: none;
    border-radius: 15px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.checkout-form .form-control::placeholder {
    color: #333;
}

.payment-method-select {
    background-color: white;
    border-radius: 15px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}

.btn-checkout-now {
    background-color: #43A047;
    /* Green */
    color: white;
    font-weight: 600;
    padding: 0.8rem 2rem;
    border-radius: 30px;
    border: none;
    font-size: 1.1rem;
    float: right;
    /* As per mock placement */
}

.btn-checkout-now:hover {
    background-color: #2E7D32;
    color: white;
}

/* Profile Page Styles */
.profile-header-card {
    background-color: #FF80AB;
    /* Pink */
    border-radius: 50px;
    /* Big rounded corners */
    padding: 3rem;
    color: #333;
}

.profile-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid white;
}

.badge-member {
    background-color: #E0E0E0;
    /* Light gray/silver */
    color: #333;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

.btn-logout {
    background-color: black;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 30px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-logout:hover {
    background-color: #333;
    color: white;
}

.btn-edit-profile {
    background-color: #448AFF;
    /* Blue */
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 30px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-edit-profile:hover {
    background-color: #2979FF;
    color: white;
}

.activity-card {
    background-color: #FDD835;
    /* Yellow */
    border-radius: 30px;
    padding: 3rem 1rem;
    text-align: center;
    height: 100%;
    transition: transform 0.3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.activity-card:hover {
    transform: translateY(-5px);
}

.activity-icon {
    background-color: white;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: black;
    margin-bottom: 1.5rem;
}

.activity-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #333;
}

/* Order History Page Styles */
.status-nav-container {
    padding: 2rem 0;
}

.status-nav-btn {
    flex: 1;
    border: 1px solid #FF80AB;
    background: transparent;
    color: #FF80AB;
    font-weight: 500;
    padding: 10px;
    border-radius: 10px;
    transition: 0.3s;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0 5px;
}

.status-nav-btn:hover {
    background-color: #FFF0F5;
    color: #FF80AB;
}

.status-nav-btn.active {
    background-color: white;
    color: #FF80AB;
    border-color: #FF80AB;
    /* Wait, active tab in mock is white with pink text? 
       Actually, "Sent" is active in mock. 
       "Not Yet Paid" is pink bg white text. 
       "Under Packaging" pink bg white text. 
       "Sent" is white bg, pink border, pink text?
       Or... wait.
       The mock shows: 
       Not Yet Paid (Pink filled)
       Under Packaging (Pink filled)
       Sent (White with pink border?) NO. 
       Actually, look at the uploaded image 1765314777646.png
       "Sent" is text pink. The button itself... 
       "Finish" is pink filled.
       "Sent" looks like white background with pink border.
       "Not yet paid" etc are pink.
       Let's assume the active one is white/bordered and inactive are pink? 
       OR maybe the user clicked "Sent" so it highlighted differently?
       Let's stick to a tab system.
       Let's make inactive tabs Filled Pink, Active tab White with Border.
    */
}

.status-nav-btn {
    background-color: #FF80AB;
    color: white;
    border: 1px solid #FF80AB;
}

.status-nav-btn:hover {
    background-color: #F48FB1;
    color: white;
}

.status-nav-btn.active {
    background-color: white;
    color: #FF80AB;
    border: 1px solid #FF80AB;
}


.order-status-header {
    border-bottom: 1px solid #43A047;
    /* Green line */
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.status-label {
    font-weight: 600;
    text-transform: uppercase;
}

.status-label.sent {
    color: #FF80AB;
    /* Pink "SENT" */
}

.delivery-info {
    color: #43A047;
    /* Green "Order in delivery process" */
    font-weight: 500;
}

.order-item-img {
    background-color: #FFCDD2;
    /* Light pink placeholder matching mock */
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
}

.order-total-price {
    color: #43A047;
    /* Green price */
    font-weight: 600;
    font-size: 1.1rem;
}

.btn-order-action {
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}

.btn-completed {
    background-color: #F8BBD0;
    /* Light pink/disabled look */
    color: white;
    border: none;
    cursor: default;
}

.btn-contact-seller {
    background-color: #FF80AB;
    color: white;
    border: none;
    transition: 0.3s;
}

.btn-contact-seller:hover {
    background-color: #F50057;
    color: white;
}

/* Modal Styles */
#productModal .modal-content {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

#productModal .quantity-selector {
    border-color: #333 !important;
}

#productModal .quantity-selector button:hover {
    color: #448AFF !important;
}

/* Cart Page Styles */
.cart-yellow-container {
    background-color: #FDD835;
    /* Yellow matching mockup */
    border-radius: 50px;
    padding: 3rem;
    position: relative;
    margin-top: 50px;
}

/* Wavy Top Effect */
.cart-yellow-container::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 50px;
    background: radial-gradient(circle at 10px 0, transparent 10px, #FDD835 11px) repeat-x;
    background-size: 40px 50px;
    /* Adjust for wave frequency */
    /* This is a simple approximation. For "exact", a mask is better but complex. 
       Let's try a simpler rounded top scallop pattern or just big rounded corners with decoration. 
       The mockup wave is quite large. A mask-image approach is best but might be flaky.
       Simple approach: just rounded corners for now, maybe add a specific wave SVG if needed. 
       Actually, the prompt "sama persis" suggests high fidelity.
       Let's use a mask-image or radial gradient trick. */
    background:
        radial-gradient(circle at 25px -15px, transparent 25px, #FDD835 26px);
    background-size: 50px 50px;
    display: none;
    /* Disabling pseudo-element wave for now to focus on main shape matched by border-radius and svg if possible, or just the main container shape */
}

/* Using a background image for wave if possible, or just huge border radius */
.cart-wavy-bg {
    background-color: #FDD835;
    border-radius: 40px;
    /* To simulate the wave top, we can use an SVG separator in HTML */
}

.cart-item-card {
    border: none;
    border-radius: 0;
    transition: transform 0.2s;
}

.cart-item-image {
    position: relative;
    height: 250px;
}

.cart-check {
    position: absolute;
    top: 15px;
    right: 15px;
    background: white;
    color: #4CAF50;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border-radius: 4px;
    /* Slightly rounded */
}

.cart-item-details {
    background-color: #E0C9A6;
    /* Tan color */
    padding: 1rem;
    min-height: 100px;
}

.btn-remove-all {
    background-color: #000;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
    font-weight: 600;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-weight: 500;
}

.btn-payment {
    background-color: #438E44;
    /* Green */
    color: white;
    width: 100%;
    padding: 1rem;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    font-size: 1.1rem;
}

.btn-payment:hover {
    background-color: #388E3C;
    color: white;
}

.bg-voez-header {
    background-color: #4A90E2;
    /* Same as shop header */
}