* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: none;
    list-style: none;
    text-decoration: none;
}
.logo h1{
    font-size: 1.5rem;
}

span{
    color: orange;
}

nav {
    width: 100%;
    height: 72px;
    background: linear-gradient(90deg, #3b2725 0%, #7b4f39 50%, #d7a86e 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28px;
    color: white;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: saturate(120%) blur(6px);
}

.logo-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.site-logo{width:48px;height:48px;object-fit:cover;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.15)}
.logo h1{font-size:1.25rem;margin:0}
.logo h1 span{color:#ffd8a8}

.nav-links a{
    color: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    position: relative;
    transition: transform .18s ease, color .18s ease, background .18s ease;
}

.nav-links a::after{
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 3px;
    background: linear-gradient(90deg,#ffd8a8,#ffb085);
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s cubic-bezier(.2,.9,.2,1);
    opacity: 0.95;
}

.nav-links a:hover{
    background: rgba(255,255,255,0.06);
    transform: translateY(-2px);
    color: #fff;
}

.nav-links a:hover::after{transform: scaleX(1)}

@media (max-width:900px){
    nav{padding:12px}
    .site-logo{width:40px;height:40px}
}

ul {
    display: flex;
    gap: 20px;
}

li {
    padding: 6px;
    background: transparent;
    border-radius: 6px;
    transition: background .2s ease, transform .18s ease;
}

li:hover {
    background-color: rgba(255,255,255,0.04);
    transform: translateY(-2px);
}

A {
    color: white;
}

body,
html {
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
}

/* Main Gradient Background */
.main {
    min-height: 100vh;
    background-image: linear-gradient(135deg, rgba(75,46,46,0.55), rgba(215,168,110,0.25)), url('https://images.unsplash.com/photo-1509042239860-f550ce710b93?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    color: #fff;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Heading */
header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

header p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* Buttons */
.buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.btn {
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    background-color: #fff;
    color: #4b2e2e;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #d7a86e;
    color: #fff;
}

.btn.secondary {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn.secondary:hover {
    background-color: #fff;
    color: #4b2e2e;
}

/* Features Section */
.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    width: 250px;
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease;
}

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

.card h2 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.card p {
    font-size: 1rem;
}

/* Hero Section */
.hero {
    background: #f3e5d8;
    /* light latte background */
    text-align: center;
    padding: 80px 20px;
    color: #3e2c2c;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.2rem;
    color: #5a4034;
}

/* About Section */
.about {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 60px 20px;
    gap: 30px;
}

.about-text {
    flex: 1;
}

.about-text h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #3e2c2c;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #5a4034;
}

.about-image {
    flex: 1;
}

.about-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Values Section */
.values {
    background: linear-gradient(135deg, #f7efe6 0%, #efe3d6 50%, #f8f3ee 100%);
    padding: 60px 20px;
    text-align: center;
    border-top: 4px solid rgba(139,94,60,0.06);
}

.values h2 {
    font-size: 2rem;
    margin-bottom: 40px;
    color: #3e2c2c;
}

.value-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.value-cards .card {
    background: linear-gradient(180deg,#fffdf9,#fff6f0);
    padding: 22px;
    border-radius: 12px;
    width: 250px;
    box-shadow: 0 6px 18px rgba(75,46,46,0.06);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    border-left: 6px solid rgba(215,168,110,0.9);
}

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

.value-cards h3 {
    margin-bottom: 10px;
    color: #4b2e2e;
    font-size: 1.3rem;
}

.value-cards p {
    font-size: 1rem;
    color: #5a4034;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #d7a86e, #8b5e3c);
    text-align: center;
    padding: 80px 20px;
    color: #fff;
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 10px;
}

.hero p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Menu Grid */
.menu {
    padding: 60px 20px;
    background: #fdfdfc;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Menu Cards */
.menu-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.2s ease;
    position: relative;
}

.product-remove-btn{
    position:absolute;
    top:8px;
    right:8px;
    background:rgba(255,100,100,0.9);
    border:none;
    width:26px;
    height:26px;
    border-radius:50%;
    color:#fff;
    cursor:pointer;
    font-weight:700;
    transition:background .2s,transform .15s;
    z-index:10;
}

.product-remove-btn:hover{
    background:rgba(200,50,50,0.95);
    transform:scale(1.1);
}

/* subtle entrance animation for menu items */
.menu-card{
    opacity:0;
    transform:translateY(10px);
    animation: fadeUp .42s ease forwards;
    animation-delay: var(--delay, 0ms);
}

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

/* Menu page background and modal styles */
.menu {
    padding: 50px 20px;
    background: linear-gradient(135deg, #f2e8e0 0%, #efe3d6 40%, #fff8f4 100%);
}

.menu-page .hero, .menu .hero{
    margin-bottom: 18px;
}

.menu-card{cursor:pointer}

.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:1400;display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.45)}
.product-modal{position:relative;background:linear-gradient(180deg,#fff,#fff8f2);width:min(900px,96%);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,0.35);padding:18px;z-index:10}
.product-modal .modal-close{position:absolute;right:12px;top:12px;border:none;background:transparent;font-size:20px;cursor:pointer;color:#4b2e2e}
.product-modal-body{display:flex;gap:18px;align-items:flex-start}
.product-modal .modal-img{width:320px;height:220px;object-fit:cover;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,0.12)}
.product-modal .modal-info{flex:1}
.product-modal .modal-title{margin:0 0 8px;color:#4b2e2e}
.product-modal .modal-desc{color:#5a4034;margin-bottom:12px}
.product-modal .modal-price{font-weight:800;color:#7b4f39;background:linear-gradient(90deg,#fff3e6,#fff1e0);display:inline-block;padding:8px 14px;border-radius:999px}

@media (max-width:900px){
    .product-modal-body{flex-direction:column}
    .product-modal .modal-img{width:100%;height:200px}
}

/* Cart success message */
.cart-success-msg{display:inline-block;margin-top:8px;color:#1b7a3b;font-weight:700;opacity:0;transition:opacity .3s}
.cart-success-msg.show{opacity:1}

.menu-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.menu-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 15px;
}

.menu-card h3 {
    font-size: 1.4rem;
    color: #4b2e2e;
    margin-bottom: 8px;
}

.menu-card p {
    font-size: 0.95rem;
    color: #5a4034;
    margin-bottom: 12px;
}

.menu-card .price {
    display: inline-block;
    font-weight: bold;
    color: #8b5e3c;
    font-size: 1.1rem;
    background: #f3e5d8;
    padding: 6px 14px;
    border-radius: 20px;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #8b5e3c, #d7a86e);
    text-align: center;
    padding: 70px 20px;
    color: #fff;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.hero p {
    font-size: 1.1rem;
    opacity: 0.95;
}

/* Social Links Section */
.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 50px 20px;
    background: linear-gradient(90deg, rgba(139,94,60,0.06), rgba(215,168,110,0.04));
    border-top: 1px solid rgba(139,94,60,0.06);
}

.social-btn {
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Different colors for each platform */
.facebook {
    background: #3b5998;
}

.instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.twitter {
    background: #1da1f2;
}

/* .tiktok {
    background: #000;
} */

/* Hover effect */
.social-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.footer {
    background: #3e2c2c;
    /* deep coffee brown */
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 40px 60px;
    gap: 30px;
}

.footer-left,
.footer-center,
.footer-right {

    min-width: 200px;
}

.footer-left .logo {
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: #d7a86e;
}

.footer-left p {
    margin: 6px 0;
    font-size: 0.95rem;
}

/* Center Products */
.footer-center h3,
.footer-right h3 {
    margin-bottom: 12px;
    color: #d7a86e;
}

.footer-center ul,
.footer-right ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.footer-center li,
.footer-right li {

    font-size: 0.95rem;
}

/* Right Links */
.footer-right a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s;
}

.footer-right a:hover {
    color: #d7a86e;
}

/* Cart styles (responsive + qty controls) */
.cart-open-btn{
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: linear-gradient(90deg,#7b4f39,#d7a86e);
    color: #fff;
    border: none;
    padding: 12px 16px;
    border-radius: 24px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 1200;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cart-open-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.26);
}

.cart {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    z-index: 1150;
}
.cart.hidden{display:none}
.cart-backdrop{background:rgba(0,0,0,0.45)}
.cart-panel{width:360px;background:linear-gradient(180deg,#fff,#fffaf5);color:#333;padding:16px;box-shadow:-8px 0 24px rgba(0,0,0,0.12)}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid #eee}
.close-btn{background:transparent;border:none;font-size:20px;cursor:pointer;color:#4b2e2e}
.cart-items{list-style:none;padding:0;margin:12px 0;max-height:50vh;overflow:auto}
.cart-item{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #eee}
.cart-item .qty{background:#f3e5d8;padding:4px 8px;border-radius:6px}
.cart-footer{border-top:1px solid #eee;padding-top:12px}
.cart-total{font-weight:bold;margin-bottom:8px;color:#4b2e2e}
.cart-actions .btn{width:100%}

.qty-controls{display:flex;gap:6px;align-items:center;justify-content:center}
.qty-controls button{padding:6px 8px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
.qty-controls .qty-value{min-width:26px;text-align:center;font-weight:600}

@media (max-width:900px){
    nav{padding:0 12px;height:auto;flex-direction:column;gap:8px;align-items:flex-start}
    .nav-links{flex-wrap:wrap;gap:8px;padding-left:8px}
    header h1{font-size:2rem}
    .main{height:auto;padding:40px 16px}
    .menu-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
}

@media (max-width:600px){
    .buttons{flex-direction:column;align-items:center}
    .btn{width:100%;max-width:320px}
    .menu-card img{height:160px}
    .menu-card{padding:14px}
    .footer{padding:30px 20px}
    .logo h1{font-size:1.2rem}
    .cart-panel{width:100%}
}

/* Contact Section */
.contact{
    padding:80px 20px;
    background: linear-gradient(180deg,#f7efe9 0%, #fff 100%);
    color:#3e2c2c;
}
.contact-container{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:start;
}
.contact-info{
    min-width:260px;
    background: linear-gradient(180deg,#fff,#f3e5d8);
    padding:28px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(75,46,46,0.08);
    border:1px solid rgba(139,94,60,0.06);
}
.contact-info h2{font-size:2rem;margin-bottom:12px;color:#4b2e2e}
.contact-info p{margin:10px 0;color:#5a4034;display:flex;align-items:center;gap:10px}
.contact-info .icon{font-size:1.15rem}
.contact-info a{color:#8b5e3c;text-decoration:none}
.contact-form{
    min-width:260px;
    background:#fff;
    padding:28px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    gap:12px;
    border:1px solid #f0e6df;
}
.contact-form label{font-weight:700;color:#4b2e2e;font-size:0.95rem}
.contact-form input,.contact-form textarea{
    padding:12px;border-radius:10px;border:1px solid #e6ddd8;font-family:inherit;font-size:0.95rem;
    transition:box-shadow .15s ease,border-color .15s ease,transform .08s ease;
}
.contact-form input:focus,.contact-form textarea:focus{
    outline:none;border-color:#c99a6a;box-shadow:0 4px 18px rgba(201,154,106,0.12);transform:translateY(-1px);
}
.contact-form .btn{
    align-self:flex-start;padding:10px 20px;border-radius:10px;background:linear-gradient(90deg,#8b5e3c,#d7a86e);color:#fff;border:none;cursor:pointer;
    box-shadow:0 8px 20px rgba(139,94,60,0.18);transition:transform .15s ease,box-shadow .15s ease,opacity .15s;
}
.contact-form .btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(139,94,60,0.22);opacity:0.98}

.contact-feedback{margin-top:8px;font-weight:700}
.contact-feedback.success{color:#1b7a3b}
.contact-feedback.error{color:#a33}

@media (max-width:900px){
    .contact-container{grid-template-columns:1fr;gap:24px}
}

/* Login page styling */
.login-link{font-weight:700;color:#ffd8a8}

.login-page{min-height:100vh;background:linear-gradient(135deg,#efe0d4 0%, #f6e6da 40%, #efe1d1 100%);padding:20px}

.login-hero{text-align:center;padding:40px 20px;background:linear-gradient(135deg,#7b4f39,#d7a86e);color:#fff;border-radius:12px;margin-bottom:40px}
.login-hero h1{font-size:2.5rem;margin-bottom:8px}
.login-hero p{font-size:1.1rem;opacity:0.95}

.login-container{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

.login-form-wrapper{background:#fff;padding:28px;border-radius:12px;box-shadow:0 10px 30px rgba(75,46,46,0.08);border:1px solid rgba(139,94,60,0.06)}
.login-form{margin-bottom:20px}
.login-form h2{color:#4b2e2e;margin-bottom:18px;font-size:1.8rem}
.login-form .form-group{margin-bottom:16px}
.login-form label{display:block;font-weight:700;color:#4b2e2e;margin-bottom:6px;font-size:0.95rem}
.login-form input{width:100%;padding:12px;border-radius:10px;border:1px solid #e6ddd8;font-family:inherit;font-size:0.95rem;transition:border-color .2s,box-shadow .2s}
.login-form input:focus{outline:none;border-color:#c99a6a;box-shadow:0 4px 18px rgba(201,154,106,0.12)}
.form-errors{color:#a33;background:rgba(255,230,230,0.9);padding:8px;border-radius:8px;margin-bottom:8px;display:none}
.login-success-msg{display:inline-block;margin-top:8px;color:#1b7a3b;font-weight:700;opacity:0;transition:opacity .3s}
.login-success-msg.show{opacity:1}

.premium-benefits{background:linear-gradient(180deg,#fffdf9,#fff6f0);padding:24px;border-radius:12px;border-left:8px solid rgba(215,168,110,0.95);box-shadow:0 8px 24px rgba(75,46,46,0.06)}
.premium-benefits h3{color:#7b4f39;margin-bottom:14px;font-size:1.3rem}
.premium-benefits ul{list-style:none;padding:0}
.premium-benefits li{padding:8px 0;color:#5a4034;border-bottom:1px dashed rgba(75,46,46,0.06)}
.premium-benefits strong{color:#4b2e2e}

@media (max-width:900px){
    .login-container{grid-template-columns:1fr;gap:24px}
    .login-form-wrapper{order:-1}
}

/* Checkout page styling */
.checkout-page{min-height:100vh;background:linear-gradient(135deg,#efe0d4 0%, #f6e6da 40%, #efe1d1 100%);padding:20px}

.checkout-hero{text-align:center;padding:40px 20px;background:linear-gradient(135deg,#7b4f39,#d7a86e);color:#fff;border-radius:12px;margin-bottom:40px}
.checkout-hero h1{font-size:2.2rem;margin-bottom:8px}
.checkout-hero p{font-size:1rem;opacity:0.95}

.checkout-container{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

.order-summary{background:#fff;padding:24px;border-radius:12px;box-shadow:0 10px 30px rgba(75,46,46,0.08);border:1px solid rgba(139,94,60,0.06)}
.order-summary h2{color:#4b2e2e;margin-bottom:18px;font-size:1.6rem}

.checkout-items{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #eee}
.checkout-item{display:flex;justify-content:space-between;padding:8px 0;color:#5a4034;font-size:0.95rem}
.checkout-item .qty{color:#4b2e2e;font-weight:600}

.checkout-line{display:flex;justify-content:space-between;padding:8px 0;color:#4b2e2e;font-weight:600}
.checkout-line.total-line{padding:12px 0;border-top:2px solid #eee;font-size:1.2rem;color:#7b4f39}
.checkout-line.discount-line{color:#1b7a3b}

.checkout-form-wrapper{background:linear-gradient(180deg,#fffdf9,#fff6f0);padding:24px;border-radius:12px;border:1px solid rgba(139,94,60,0.06)}
.checkout-form-wrapper h2{color:#4b2e2e;margin-bottom:18px;font-size:1.6rem}
.checkout-form .form-group{margin-bottom:14px}
.checkout-form label{display:block;font-weight:700;color:#4b2e2e;margin-bottom:6px;font-size:0.95rem}
.checkout-form input,.checkout-form textarea,.checkout-form select{width:100%;padding:12px;border-radius:10px;border:1px solid #e6ddd8;font-family:inherit;font-size:0.95rem;transition:border-color .2s,box-shadow .2s}
.checkout-form input:focus,.checkout-form textarea:focus,.checkout-form select:focus{outline:none;border-color:#c99a6a;box-shadow:0 4px 18px rgba(201,154,106,0.12)}
.checkout-form textarea{resize:vertical}

.form-errors{color:#a33;background:rgba(255,230,230,0.9);padding:8px;border-radius:8px;margin-bottom:8px;display:none}
.checkout-success-msg{display:inline-block;margin-top:8px;color:#1b7a3b;font-weight:700;opacity:0;transition:opacity .3s}
.checkout-success-msg.show{opacity:1}

@media (max-width:900px){
    .checkout-container{grid-template-columns:1fr;gap:24px}
    .order-summary{order:-1}
}

/* Profile page styling */
.profile-page{min-height:100vh;background:linear-gradient(135deg,#efe0d4 0%, #f6e6da 40%, #efe1d1 100%);padding:20px}

.profile-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:280px 1fr;gap:24px}

.profile-sidebar{position:sticky;top:20px;height:fit-content}
.profile-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 10px 30px rgba(75,46,46,0.08);text-align:center}
.profile-avatar{font-size:3rem;margin-bottom:12px}
.profile-card h2{color:#4b2e2e;margin:8px 0}
.profile-card p{color:#5a4034;margin:0 0 12px}
.badge{display:inline-block;padding:6px 12px;border-radius:999px;font-size:0.85rem;font-weight:700}
.badge.premium{background:linear-gradient(90deg,#ffd8a8,#ffb085);color:#4b2e2e}

.profile-content{background:#fff;padding:28px;border-radius:12px;box-shadow:0 10px 30px rgba(75,46,46,0.08)}
.profile-section{display:none}
.profile-section.active{display:block}

.profile-section h2{color:#4b2e2e;margin-bottom:20px;font-size:1.6rem}

.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.info-item{border:1px solid #e6ddd8;padding:14px;border-radius:10px;background:#f9f8f6}
.info-item label{display:block;font-weight:700;color:#4b2e2e;font-size:0.85rem;margin-bottom:4px}
.info-item p{color:#5a4034;margin:0}

.rewards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.reward-card{background:linear-gradient(180deg,#fffdf9,#fff6f0);padding:18px;border-radius:12px;border:1px solid rgba(215,168,110,0.3);text-align:center}
.reward-icon{font-size:2rem;margin-bottom:8px}
.reward-card h3{color:#4b2e2e;margin:8px 0}
.reward-value{font-size:1.8rem;font-weight:700;color:#7b4f39;margin:8px 0}
.reward-card small{color:#5a4034}

.orders-list{display:flex;flex-direction:column;gap:14px}
.order-item{border:1px solid #e6ddd8;padding:14px;border-radius:10px;background:#f9f8f6}
.order-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.order-id{font-weight:700;color:#4b2e2e}
.order-date{color:#5a4034;font-size:0.9rem}
.order-items{color:#5a4034;margin:8px 0;font-size:0.9rem}
.order-total{color:#7b4f39;font-weight:700;margin-top:8px}

.addresses-list{display:flex;flex-direction:column;gap:14px}
.address-item{border:1px solid #e6ddd8;padding:14px;border-radius:10px;background:#f9f8f6}
.address-item strong{color:#4b2e2e;display:block;margin-bottom:6px}
.address-item p{color:#5a4034;margin:0;font-size:0.95rem;line-height:1.5}

.preferences-form .preference-item{margin-bottom:12px}
.preference-item label{display:flex;align-items:center;gap:8px;font-weight:600;color:#4b2e2e;cursor:pointer}
.preference-item input{cursor:pointer}
.prefs-success-msg{display:inline-block;margin-top:8px;color:#1b7a3b;font-weight:700;opacity:0;transition:opacity .3s}
.prefs-success-msg.show{opacity:1}

.profile-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid #e6ddd8}
.tab-btn{background:transparent;border:1px solid #e6ddd8;padding:8px 16px;border-radius:8px;color:#4b2e2e;cursor:pointer;transition:all .2s}
.tab-btn.active{background:#7b4f39;color:#fff}
.tab-btn:hover{border-color:#7b4f39;color:#7b4f39}

@media (max-width:768px){
    .profile-container{grid-template-columns:1fr}
    .profile-sidebar{position:static}
    .info-grid{grid-template-columns:1fr}
}

/* About page specific styling to evoke a coffee shop feel */
.hero-about{
    background-image: linear-gradient(135deg, rgba(139,94,60,0.9), rgba(215,168,110,0.6)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3');
    background-size: cover;
    background-position: center;
    padding: 80px 20px;
    color: #fff;
    display:flex;
    gap:40px;
    align-items:center;
}

.about-page .about-text{flex:1;max-width:720px}
.about-page .about-text h2{font-size:2rem;margin-bottom:12px;color:#fff}
.about-page .about-text p{color:#fff9f6;line-height:1.7;margin-bottom:12px}
.about-page .about-image img{width:100%;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,0.3)}

.expanded-values{background:linear-gradient(180deg,#f6efe6 0%,#fff8f2 100%);padding:50px 20px}
.expanded-values h2{color:#3e2c2c;margin-bottom:20px}
.expanded-values .value-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:1100px;margin:0 auto}
.expanded-values .card{background:#fff8f3;color:#3e2c2c;padding:18px;border-radius:12px;box-shadow:0 6px 20px rgba(75,46,46,0.06)}

.feedback{padding:50px 20px;background:linear-gradient(135deg,#efe0d4 0%, #f6e6da 40%, #efe1d1 100%);color:#3e2c2c}
.feedback h2{margin-bottom:18px;color:#4b2e2e}
.feedback-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:1100px;margin:0 auto 20px}
.feedback-item{background:linear-gradient(180deg,#fffaf5,#fff3ec);padding:16px;border-radius:12px;box-shadow:0 8px 24px rgba(75,46,46,0.06);display:flex;flex-direction:column;align-items:center;text-align:center;border-left:6px solid rgba(215,168,110,0.9)}
.feedback-item img{width:84px;height:84px;border-radius:50%;object-fit:cover;margin-bottom:12px;border:3px solid rgba(215,168,110,0.12)}
.feedback-item blockquote{font-style:italic;color:#5a4034;margin:0 0 8px}
.feedback-item cite{font-weight:700;color:#4b2e2e}

/* Feedback form button styling */
.feedback-form .btn{background:linear-gradient(90deg,#7b4f39 0%, #d7a86e 100%);color:#fff;border:none;box-shadow:0 8px 20px rgba(139,94,60,0.18);transition:transform .15s ease,box-shadow .15s ease,opacity .15s}
.feedback-form .btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(139,94,60,0.26);opacity:0.98}

/* Small accent for rating if added later */
.rating-pill{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,#ffd8a8,#ffb085);color:#4b2e2e;font-weight:700;margin-top:8px}

.improvement-quote{max-width:900px;margin:0 auto;padding:12px 18px;background:linear-gradient(90deg,#fff,#fffdf9);border-radius:10px;border:1px solid rgba(139,94,60,0.06)}
.improvement-quote h3{margin-bottom:8px;color:#4b2e2e}
.improvement-quote ul{list-style:disc;padding-left:20px;color:#5a4034}

@media (max-width:900px){
    .hero-about{flex-direction:column;padding:40px 16px}
    .about-page .about-image{order:-1}
}

/* Feedback form styles */
.feedback-form{max-width:900px;margin:20px auto 40px;padding:18px;border-radius:12px;background:linear-gradient(180deg,#fff,#fff7f0);box-shadow:0 8px 24px rgba(75,46,46,0.06);border:1px solid rgba(139,94,60,0.06)}
.feedback-form h3{margin:0 0 12px;color:#4b2e2e}
.feedback-form .form-row{display:flex;gap:12px;margin-bottom:12px}
.feedback-form .form-row.actions{align-items:center}
.feedback-form input[type="text"],.feedback-form input[type="email"],.feedback-form select,.feedback-form textarea{flex:1;padding:10px;border-radius:10px;border:1px solid #ebded5;font-family:inherit;font-size:0.95rem}
.feedback-form textarea{resize:vertical}
.feedback-form .rating-label{display:flex;align-items:center;gap:8px}
.form-errors{color:#a33;background:rgba(255,230,230,0.9);padding:8px;border-radius:8px;margin-bottom:8px;display:none}
.form-errors div{margin-bottom:6px}
.form-success{color:#1b7a3b;margin-left:12px;opacity:0;transition:opacity .2s}

@media (max-width:700px){
    .feedback-form .form-row{flex-direction:column}
    .feedback-form .form-row.actions{align-items:flex-start}
}

/* Initially hide menu until user clicks "View Menu" */
.menu.hidden{display:none}

/* ==================== Payment Options Styles ==================== */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.payment-category {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-category h4 {
    margin: 0;
    color: #4b2e2e;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.payment-option {
    position: relative;
    cursor: pointer;
}

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

.payment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: #fff;
    border: 2px solid #e8ddd0;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-align: center;
    cursor: pointer;
}

.payment-option input[type="radio"]:checked + .payment-card {
    background: linear-gradient(135deg, #fef3e8 0%, #ffe8d1 100%);
    border-color: #d7a86e;
    box-shadow: 0 8px 20px rgba(215, 168, 110, 0.25);
    transform: translateY(-2px);
}

.payment-card:hover {
    border-color: #d7a86e;
    background: linear-gradient(135deg, #fffbf7 0%, #fff4ea 100%);
}

.payment-icon {
    font-size: 2rem;
    display: block;
}

.payment-name {
    font-weight: 600;
    color: #4b2e2e;
    font-size: 0.9rem;
}

.payment-card small {
    color: #999;
    font-size: 0.75rem;
    line-height: 1.2;
}

.payment-details {
    background: linear-gradient(135deg, #fef3e8 0%, #fff7f0 100%);
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #e8ddd0;
}

.payment-detail-form {
    display: none;
}

.payment-detail-form.active {
    display: block;
    animation: slideDown 0.25s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.payment-detail-form h4 {
    margin: 0 0 12px;
    color: #4b2e2e;
    font-size: 0.95rem;
}

.payment-detail-form input,
.payment-detail-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0d3ca;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fff;
    color: #333;
}

.payment-detail-form input:focus,
.payment-detail-form select:focus {
    outline: none;
    border-color: #d7a86e;
    box-shadow: 0 0 0 3px rgba(215, 168, 110, 0.1);
}

.payment-detail-form p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

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