/* ── Restoran Aqiza — Complete Style ── */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #1a1a1a;
    background: #faf8f5;
    line-height: 1.6;
    padding-top: 68px;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Variables ── */
:root {
    --orange: #d4631e;
    --orange-light: #fdf0e9;
    --orange-dark: #a84d13;
    --cream: #fdf6f0;
    --brown: #3d2b1f;
    --brown-light: #6b4f3a;
    --gold: #e8b84b;
    --green: #2d6a4f;
    --red: #dc3545;
    --white: #ffffff;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-500: #adb5bd;
    --gray-700: #495057;
    --shadow: 0 4px 24px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 48px rgba(0,0,0,.12);
    --radius: 12px;
    --radius-sm: 8px;
    --transition: .2s ease;
}

/* ── Container ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 20px; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border: none; border-radius: var(--radius-sm);
    font-size: .95rem; font-weight: 600; cursor: pointer;
    transition: all var(--transition); font-family: inherit;
}
.btn-primary {
    background: var(--orange); color: var(--white);
}
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
.btn-secondary {
    background: var(--white); color: var(--brown);
    border: 2px solid var(--gray-300);
}
.btn-secondary:hover { border-color: var(--orange); color: var(--orange); }
.btn-success {
    background: var(--green); color: var(--white);
}
.btn-success:hover { opacity: .9; transform: translateY(-1px); }
.btn-danger {
    background: var(--red); color: var(--white);
}
.btn-sm { padding: 8px 16px; font-size: .85rem; }
.btn-lg { padding: 14px 32px; font-size: 1.1rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Navbar ── */
nav {
    position: fixed; top: 0; left: 0; right: 0;
    background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
    z-index: 1000; box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
nav .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 68px;
}
.logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem; font-weight: 700; color: var(--orange);
}
.logo span { color: var(--brown); }
.nav-links { display: flex; align-items: center; gap: 24px; font-weight: 500; font-size: .9rem; }
.nav-links a { color: var(--brown); transition: color var(--transition); }
.nav-links a:hover, .nav-links a.active { color: var(--orange); }

/* ── Cart Badge ── */
.cart-badge {
    position: relative;
}
.cart-count {
    position: absolute; top: -8px; right: -10px;
    background: var(--orange); color: white;
    font-size: .7rem; font-weight: 700;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    display: none;
}
.cart-count.show { display: flex; }

/* ── Mobile Nav ── */
.mobile-menu-btn {
    display: none; background: none; border: none;
    font-size: 1.5rem; cursor: pointer; color: var(--brown);
}
@media (max-width: 768px) {
    .mobile-menu-btn { display: block; }
    .nav-links {
        position: fixed; top: 68px; left: 0; right: 0;
        background: var(--white); flex-direction: column;
        padding: 20px; gap: 16px;
        box-shadow: var(--shadow); display: none;
    }
    .nav-links.open { display: flex; }
}

/* ── Hero ── */
.hero {
    min-height: 80vh;
    background: linear-gradient(135deg, var(--brown) 0%, #5a3d2e 100%);
    display: flex; align-items: center; text-align: center;
    position: relative; overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,.03)" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,208C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"/></svg>') no-repeat bottom;
    background-size: cover;
}
.hero-content { position: relative; z-index: 1; width: 100%; padding: 40px 20px; }
.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 6vw, 4rem);
    color: var(--gold); margin-bottom: 16px;
}
.hero p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,.85);
    max-width: 500px; margin: 0 auto 32px;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── Section ── */
section { padding: 60px 0; }
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--brown);
    margin-bottom: 12px;
    text-align: center;
}
.section-sub {
    text-align: center;
    color: var(--brown-light);
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto 48px;
}
.divider {
    width: 60px; height: 3px; background: var(--orange);
    margin: 0 auto 16px; border-radius: 2px;
}

/* ─── Cards ─── */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card-body { padding: 20px; }
.card-title { font-size: 1.15rem; font-weight: 700; color: var(--brown); margin-bottom: 8px; }
.card-text { color: var(--brown-light); font-size: .9rem; }

/* ─── Menu Grid ─── */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.menu-category { margin-bottom: 48px; }
.menu-category h3 {
    font-size: 1.4rem; font-weight: 700; color: var(--brown);
    margin-bottom: 20px; padding-bottom: 8px;
    border-bottom: 2px solid var(--orange-light);
}
.menu-card {
    display: flex; flex-direction: column;
}
.menu-card .card-body { flex: 1; display: flex; flex-direction: column; }
.menu-card .price {
    font-size: 1.3rem; font-weight: 800; color: var(--orange);
    margin: 8px 0;
}
.menu-card .btn { margin-top: auto; }

/* ─── Cart Sidebar ─── */
.cart-sidebar {
    position: fixed; top: 68px; right: -400px;
    width: 380px; max-width: 100vw;
    height: calc(100vh - 68px);
    background: var(--white);
    box-shadow: -4px 0 24px rgba(0,0,0,.1);
    z-index: 999;
    display: flex; flex-direction: column;
    transition: right var(--transition);
}
.cart-sidebar.open { right: 0; }
.cart-header {
    padding: 20px; border-bottom: 1px solid var(--gray-200);
    display: flex; justify-content: space-between; align-items: center;
}
.cart-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--brown); }
.cart-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--gray-500); }
.cart-items {
    flex: 1; overflow-y: auto; padding: 16px 20px;
}
.cart-item {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--gray-100);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-info { flex: 1; }
.cart-item-name { font-weight: 600; font-size: .9rem; color: var(--brown); }
.cart-item-price { font-size: .85rem; color: var(--orange); font-weight: 600; }
.cart-item-qty {
    display: flex; align-items: center; gap: 8px;
}
.qty-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--gray-300); background: var(--white);
    font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.qty-btn:hover { border-color: var(--orange); color: var(--orange); }
.qty-num { font-weight: 600; min-width: 24px; text-align: center; }
.cart-item-remove {
    color: var(--red); background: none; border: none;
    cursor: pointer; font-size: .8rem;
}
.cart-footer {
    padding: 20px;
    border-top: 1px solid var(--gray-200);
}
.cart-total {
    display: flex; justify-content: space-between;
    font-size: 1.1rem; font-weight: 700; color: var(--brown);
    margin-bottom: 12px;
}
.cart-empty {
    text-align: center; padding: 40px 20px; color: var(--gray-500);
}
.cart-empty-icon { font-size: 3rem; margin-bottom: 12px; }

/* ─── Overlay ─── */
.overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    z-index: 998; opacity: 0; pointer-events: none;
    transition: opacity var(--transition);
}
.overlay.show { opacity: 1; pointer-events: auto; }

/* ─── Checkout Page ─── */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}
.checkout-form { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.checkout-summary { background: var(--white); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); position: sticky; top: 88px; }
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; font-weight: 600; font-size: .9rem;
    color: var(--brown); margin-bottom: 6px;
}
.form-control {
    width: 100%; padding: 12px 16px; border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm); font-size: .95rem;
    font-family: inherit; transition: border-color var(--transition);
}
.form-control:focus { outline: none; border-color: var(--orange); }
textarea.form-control { min-height: 80px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.payment-methods {
    display: flex; flex-direction: column; gap: 12px; margin: 20px 0;
}
.payment-option {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm); cursor: pointer;
    transition: all var(--transition);
}
.payment-option:hover { border-color: var(--orange); }
.payment-option.selected { border-color: var(--orange); background: var(--orange-light); }
.payment-option input[type="radio"] { accent-color: var(--orange); width: 18px; height: 18px; }
.payment-option-icon { font-size: 1.5rem; }
.payment-option-label { font-weight: 600; }
.payment-option-desc { font-size: .8rem; color: var(--gray-500); }

/* ─── Order Summary Items ─── */
.summary-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: .9rem;
}
.summary-item-name { flex: 1; }
.summary-item-qty { color: var(--gray-500); margin: 0 8px; }
.summary-item-price { font-weight: 600; }
.summary-divider { border: none; border-top: 1px solid var(--gray-200); margin: 12px 0; }
.summary-total {
    display: flex; justify-content: space-between;
    font-size: 1.2rem; font-weight: 800; color: var(--brown);
}

/* ─── Dashboard ─── */
.dashboard-header {
    background: var(--brown); color: var(--white);
    padding: 20px 0;
}
.dashboard-header .container {
    display: flex; justify-content: space-between; align-items: center;
}
.dashboard-title { font-size: 1.3rem; font-weight: 700; }
.dashboard-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px; margin: 24px 0;
}
.stat-card {
    background: var(--white); border-radius: var(--radius);
    padding: 20px; text-align: center; box-shadow: var(--shadow);
}
.stat-number { font-size: 2rem; font-weight: 800; color: var(--orange); }
.stat-label { font-size: .85rem; color: var(--gray-500); margin-top: 4px; }

.order-card {
    background: var(--white); border-radius: var(--radius);
    padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.order-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.order-id { font-weight: 700; color: var(--brown); }
.order-time { font-size: .8rem; color: var(--gray-500); }
.order-status {
    padding: 4px 12px; border-radius: 20px;
    font-size: .8rem; font-weight: 600;
}
.status-new { background: #e3f2fd; color: #1565c0; }
.status-preparing { background: #fff3e0; color: #e65100; }
.status-ready { background: #e8f5e9; color: #2e7d32; }
.status-delivered { background: #f3e5f5; color: #6a1b9a; }
.status-cancelled { background: #fbe9e7; color: #c62828; }

.order-details { font-size: .9rem; color: var(--brown-light); }
.order-items { margin: 8px 0; }
.order-item-line { display: flex; justify-content: space-between; padding: 4px 0; }
.order-total-price { font-weight: 700; color: var(--orange); font-size: 1.1rem; }
.order-customer { font-weight: 600; color: var(--brown); margin-top: 8px; }
.order-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ─── Success Page ─── */
.success-page {
    min-height: calc(100vh - 68px);
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 40px 20px;
}
.success-icon { font-size: 5rem; margin-bottom: 24px; }
.success-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem; color: var(--brown); margin-bottom: 12px;
}
.success-text { color: var(--brown-light); max-width: 400px; margin: 0 auto 24px; }

/* ─── Features ─── */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    padding: 40px 0;
}
.feature-card {
    text-align: center; padding: 32px 20px;
}
.feature-icon { font-size: 2.5rem; margin-bottom: 16px; }

/* ─── Stats ─── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    text-align: center; padding: 40px 0;
}
.stat-item .number {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem; font-weight: 700; color: var(--orange);
}
.stat-item .label { color: var(--brown-light); font-size: .9rem; }

/* ─── Catering Packages ─── */
.catering-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.package-card {
    display: flex; flex-direction: column;
}
.package-card .card-body { flex: 1; display: flex; flex-direction: column; }
.package-price {
    font-size: 2rem; font-weight: 800; color: var(--orange);
    text-align: center; padding: 16px 0;
}
.package-price span { font-size: .9rem; color: var(--gray-500); font-weight: 400; }
.package-features { list-style: none; padding: 0 0 20px; }
.package-features li {
    padding: 6px 0; font-size: .9rem; color: var(--brown-light);
}
.package-features li::before { content: '✓ '; color: var(--green); font-weight: 700; }
.package-card .btn { margin-top: auto; }

/* ─── Contact ─── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.contact-info { padding: 24px; }
.contact-item { display: flex; gap: 16px; margin-bottom: 24px; }
.contact-icon { font-size: 1.5rem; color: var(--orange); }
.contact-label { font-weight: 600; color: var(--brown); }
.contact-value { color: var(--brown-light); }

/* ─── Testimonials ─── */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.testimonial-card {
    text-align: center; padding: 32px;
}
.testimonial-stars { color: var(--gold); font-size: 1.2rem; margin-bottom: 12px; }
.testimonial-text {
    font-style: italic; color: var(--brown-light);
    margin-bottom: 16px; font-size: .95rem;
}
.testimonial-author { font-weight: 600; color: var(--brown); }
.testimonial-location { font-size: .8rem; color: var(--gray-500); }

/* ─── Footer ─── */
footer {
    background: var(--brown); color: rgba(255,255,255,.8);
    padding: 40px 0 24px;
}
footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer .logo { color: var(--gold); }
footer .logo span { color: var(--white); }

/* ─── Toast ─── */
.toast-container {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
}
.toast {
    background: var(--brown); color: var(--white);
    padding: 12px 20px; border-radius: var(--radius-sm);
    font-size: .9rem; box-shadow: var(--shadow-lg);
    animation: slideUp .3s ease;
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }
    .checkout-summary { position: static; }
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .cart-sidebar { width: 100%; }
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
    .hero { min-height: 60vh; }
}

/* ─── Loading ─── */
.loading { display: flex; align-items: center; justify-content: center; padding: 40px; }
.spinner {
    width: 40px; height: 40px;
    border: 4px solid var(--gray-200); border-top-color: var(--orange);
    border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Homepage Menu Preview ─── */
.menu-preview { padding: 60px 0; background: var(--white); }
.menu-preview .menu-grid { margin-bottom: 32px; }
.menu-preview .text-center { text-align: center; }

/* ─── Payment Page ─── */
.payment-redirect {
    text-align: center; padding: 60px 20px;
}
.payment-redirect .spinner { margin: 0 auto 24px; }
.payment-redirect h3 { font-size: 1.3rem; color: var(--brown); margin-bottom: 8px; }
.payment-redirect p { color: var(--brown-light); }