/* ============================================
   SAYEMA'S KITCHEN - MAIN STYLESHEET
   ============================================ */

/* ============================================
   BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: 
        radial-gradient(circle at 20% 50%, rgba(251, 146, 60, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(234, 88, 12, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(251, 191, 36, 0.08) 0%, transparent 40%),
        linear-gradient(135deg, #fff9f5 0%, #fff1e6 50%, #ffe8d1 100%);
    background-attachment: fixed;
    min-height: 100vh;
    padding: 20px;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Chef hat - top left */
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ff6b35' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.18'%3E%3Cpath d='M30 48 Q29 45 30 42 Q31 39 33 37 Q35 36 37 36 Q38 33 40 31 Q43 30 45 30 Q46 29 48 28 Q52 28 55 30 Q56 28 58 28 Q62 28 64 30 Q65 28 68 28 Q70 28 72 29 Q75 30 76 33 Q79 32 81 34 Q84 35 85 37 Q87 39 88 42 Q89 45 88 48 L88 57 Q88 60 85 61 L35 61 Q32 60 32 57 Z'/%3E%3Cpath d='M35 57 L85 57 L84 69 Q84 71 82 71 L38 71 Q36 71 36 69 Z'/%3E%3C/g%3E%3C/svg%3E"),
        /* Spoon - left upper */
        url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fb923c' stroke-width='2.5' fill='none' stroke-linecap='round' opacity='0.16'%3E%3Cellipse cx='45' cy='30' rx='9' ry='12' /%3E%3Cpath d='M45 42 Q44 50 45 58 Q46 66 45 73' /%3E%3C/g%3E%3C/svg%3E"),
        /* Fork - top right */
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ff8c42' stroke-width='2.2' fill='none' stroke-linecap='round' opacity='0.15'%3E%3Cpath d='M39 25 L38 50' /%3E%3Cpath d='M45 25 L44 50' /%3E%3Cpath d='M51 25 L50 50' /%3E%3Cpath d='M57 25 L58 50' /%3E%3Cpath d='M36 50 Q42 53 48 50 Q54 53 60 50 L59 72 Q59 75 56 75 L40 75 Q37 75 37 72 Z' /%3E%3C/g%3E%3C/svg%3E"),
        /* Pot - center right */
        url("data:image/svg+xml,%3Csvg width='110' height='110' viewBox='0 0 110 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ff6b35' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.17'%3E%3Crect x='35' y='45' width='40' height='30' rx='4' /%3E%3Cpath d='M32 45 L78 45' /%3E%3Cpath d='M30 42 Q30 40 32 40 L68 40 Q70 40 70 42' /%3E%3Cpath d='M42 52 Q45 55 48 52 Q50 55 53 52 Q55 55 58 52' /%3E%3C/g%3E%3C/svg%3E"),
        /* Heart - middle */
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ff8c42' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.14'%3E%3Cpath d='M40 52 Q35 47 35 42 Q35 37 38 35 Q41 34 43 37 Q45 34 48 35 Q51 37 51 42 Q51 47 46 52 L40 57 L34 52 Q29 47 29 42 Q29 37 32 35 Q35 34 37 37' /%3E%3C/g%3E%3C/svg%3E"),
        /* Whisk - left lower */
        url("data:image/svg+xml,%3Csvg width='95' height='95' viewBox='0 0 95 95' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ff8c42' stroke-width='2.2' fill='none' stroke-linecap='round' opacity='0.15'%3E%3Cpath d='M48 25 L47 45' /%3E%3Cpath d='M43 28 Q41 35 43 43' /%3E%3Cpath d='M53 28 Q55 35 53 43' /%3E%3Cpath d='M39 30 Q37 36 39 41' /%3E%3Cpath d='M57 30 Q59 36 57 41' /%3E%3Cpath d='M48 45 L48 70' stroke-width='3' /%3E%3C/g%3E%3C/svg%3E"),
        /* Pan - bottom right */
        url("data:image/svg+xml,%3Csvg width='105' height='105' viewBox='0 0 105 105' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fb923c' stroke-width='2.5' fill='none' stroke-linecap='round' opacity='0.16'%3E%3Cellipse cx='45' cy='50' rx='18' ry='15' /%3E%3Cpath d='M61 48 Q70 47 78 48' /%3E%3Cpath d='M61 53 Q70 54 78 53' /%3E%3C/g%3E%3C/svg%3E"),
        /* Knife - right lower */
        url("data:image/svg+xml,%3Csvg width='85' height='85' viewBox='0 0 85 85' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ff6b35' stroke-width='2.5' fill='none' stroke-linecap='round' opacity='0.15'%3E%3Cpath d='M30 25 L50 45' /%3E%3Crect x='49' y='44' width='18' height='4' rx='1' transform='rotate(45 58 46)' /%3E%3C/g%3E%3C/svg%3E"),
        /* Rolling Pin - bottom center */
        url("data:image/svg+xml,%3Csvg width='95' height='95' viewBox='0 0 95 95' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ff8c42' stroke-width='2.5' fill='none' stroke-linecap='round' opacity='0.14'%3E%3Cline x1='25' y1='50' x2='70' y2='50' /%3E%3Ccircle cx='22' cy='50' r='3' /%3E%3Ccircle cx='73' cy='50' r='3' /%3E%3C/g%3E%3C/svg%3E"),
        /* Cake - top center */
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ff6b35' stroke-width='2.2' fill='none' stroke-linecap='round' opacity='0.16'%3E%3Crect x='35' y='50' width='30' height='20' rx='2' /%3E%3Cpath d='M32 50 L68 50 L65 45 L35 45 Z' /%3E%3Cpath d='M50 45 L50 38' /%3E%3Cellipse cx='50' cy='36' rx='2' ry='3' /%3E%3C/g%3E%3C/svg%3E"),
        /* Bowl - left middle */
        url("data:image/svg+xml,%3Csvg width='95' height='95' viewBox='0 0 95 95' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fb923c' stroke-width='2.5' fill='none' stroke-linecap='round' opacity='0.15'%3E%3Cpath d='M30 45 Q30 60 47 60 Q65 60 65 45' /%3E%3Cline x1='28' y1='45' x2='67' y2='45' /%3E%3C/g%3E%3C/svg%3E"),
        /* Ramen bowl - right middle */
        url("data:image/svg+xml,%3Csvg width='105' height='105' viewBox='0 0 105 105' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ff8c42' stroke-width='2.2' fill='none' stroke-linecap='round' opacity='0.16'%3E%3Cpath d='M30 50 Q30 65 52 65 Q75 65 75 50' /%3E%3Cline x1='28' y1='50' x2='77' y2='50' /%3E%3Cpath d='M40 42 Q42 38 45 42 Q47 38 50 42 Q52 38 55 42' /%3E%3Cline x1='45' y1='42' x2='45' y2='50' /%3E%3Cline x1='50' y1='42' x2='50' y2='50' /%3E%3C/g%3E%3C/svg%3E"),
        /* Noodles - bottom left */
        url("data:image/svg+xml,%3Csvg width='90' height='90' viewBox='0 0 90 90' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23fb923c' stroke-width='2.2' fill='none' stroke-linecap='round' opacity='0.15'%3E%3Cpath d='M30 45 Q35 35 40 45 Q45 55 50 45 Q55 35 60 45' /%3E%3Cpath d='M30 52 Q35 42 40 52 Q45 62 50 52 Q55 42 60 52' /%3E%3Cpath d='M30 59 Q35 49 40 59 Q45 69 50 59 Q55 49 60 59' /%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px, 90px 90px, 100px 100px, 110px 110px, 80px 80px, 95px 95px, 105px 105px, 85px 85px, 95px 95px, 100px 100px, 95px 95px, 105px 105px, 90px 90px;
    background-position: 
        8% 10%,      /* chef hat - top left */
        3% 35%,      /* spoon - left upper */
        85% 8%,      /* fork - top right */
        90% 45%,     /* pot - center right */
        45% 50%,     /* heart - middle */
        12% 75%,     /* whisk - left lower */
        82% 88%,     /* pan - bottom right */
        92% 65%,     /* knife - right lower */
        48% 92%,     /* rolling pin - bottom center */
        50% 12%,     /* cake - top center */
        6% 52%,      /* bowl - left middle */
        88% 25%,     /* ramen - right middle */
        18% 88%;     /* noodles - bottom left */
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

#app {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
}

/* ============================================
   HEADER
   ============================================ */
header {
    text-align: center;
    margin-bottom: 30px;
}

header h1 {
    color: #78350f;
    font-size: 2.5rem;
    margin-bottom: 8px;
}

header p {
    color: #a16207;
    font-size: 1rem;
}

/* ============================================
   STATUS BAR
   ============================================ */
.status-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #dcfce7;
    color: #166534;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
}

.status-badge .dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.refresh-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: transform 0.2s, box-shadow 0.2s;
}

.refresh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.fb-link-btn {
    background: linear-gradient(135deg, #1877f2, #0d65d9);
    color: white;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fb-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4);
}

/* ============================================
   WARNINGS & ALERTS
   ============================================ */
.cart-warning-top {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 12px 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.refresh-warning {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.refresh-warning .icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.refresh-warning p {
    font-size: 0.8rem;
    color: #991b1b;
    line-height: 1.4;
}

.delivery-note {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.delivery-note .icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.delivery-note p {
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.5;
}

/* ============================================
   LAYOUT
   ============================================ */
.main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 1024px) {
    .main-grid {
        grid-template-columns: 3fr 2fr;
    }
}

/* ============================================
   MENU SECTION
   ============================================ */
.menu-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.category-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.category-header {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    padding: 16px 24px;
}

.category-header h2 {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
}

.category-items {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: #f9fafb;
    border: 2px solid transparent;
}

.menu-item:hover {
    background: #fef3c7;
    border-color: #fcd34d;
}

.menu-item.selected {
    background: #fef3c7;
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.item-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: white;
    flex-shrink: 0;
}

.menu-item.selected .checkbox {
    background: #f59e0b;
    border-color: #f59e0b;
}

.checkbox svg {
    width: 14px;
    height: 14px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
}

.menu-item.selected .checkbox svg {
    opacity: 1;
}

.item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name {
    font-weight: 500;
    color: #374151;
}

.menu-item.selected .item-name {
    color: #78350f;
}

.item-box-size {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e0f2fe;
    color: #0369a1;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.menu-item.selected .item-box-size {
    background: #fef3c7;
    color: #b45309;
}

.item-price-section {
    text-align: right;
    flex-shrink: 0;
}

.item-price {
    font-weight: 700;
    font-size: 1.1rem;
    color: #9ca3af;
}

.menu-item.selected .item-price {
    color: #d97706;
}

.price-per {
    font-size: 0.7rem;
    color: #9ca3af;
}

/* ============================================
   ORDER PANEL
   ============================================ */
.order-panel {
    align-self: start;
}

@media (min-width: 1024px) {
    .order-panel {
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
}

.order-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.order-header {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    padding: 20px 24px;
}

.order-header h2 {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-header p {
    color: #a7f3d0;
    font-size: 0.9rem;
    margin-top: 4px;
}

.order-content {
    padding: 24px;
}

.empty-order {
    text-align: center;
    padding: 48px 20px;
    color: #9ca3af;
}

.empty-order .icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.order-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-item {
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    border-radius: 12px;
    padding: 16px;
}

.order-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.order-item-name {
    font-weight: 600;
    color: #1f2937;
}

.order-item-box {
    font-size: 0.8rem;
    color: #0369a1;
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
    display: inline-block;
}

.remove-btn {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.remove-btn:hover {
    color: #dc2626;
}

.order-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-label {
    font-size: 0.85rem;
    color: #6b7280;
}

.qty-wrapper {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: #6b7280;
    transition: background 0.2s;
}

.qty-btn:hover {
    background: #f3f4f6;
}

.qty-value {
    width: 40px;
    text-align: center;
    font-weight: 600;
    color: #1f2937;
}

.item-subtotal {
    text-align: right;
}

.item-subtotal .each {
    font-size: 0.8rem;
    color: #6b7280;
}

.item-subtotal .total {
    font-weight: 700;
    color: #059669;
    font-size: 1.1rem;
}

.item-subtotal .total-units {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Order Summary */
.order-summary {
    margin-top: 16px;
    background: #f0f9ff;
    border-radius: 12px;
    padding: 16px;
}

.order-summary h4 {
    font-size: 0.85rem;
    color: #0369a1;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #374151;
    padding: 4px 0;
}

.summary-item span:first-child {
    color: #6b7280;
}

/* Totals */
.order-totals {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px dashed #e5e7eb;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.total-row .label {
    color: #6b7280;
    font-weight: 500;
}

.total-row .value {
    color: #1f2937;
    font-weight: 600;
}

.grand-total {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.grand-total .label {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
}

.grand-total .value {
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
}

.place-order-btn {
    width: 100%;
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.place-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.place-order-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   DELIVERY FORM
   ============================================ */
.delivery-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px dashed #e5e7eb;
}

.delivery-form h4 {
    font-size: 1rem;
    color: #059669;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: #374151;
    font-weight: 500;
    margin-bottom: 6px;
}

.form-group label .required {
    color: #dc2626;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.form-group input.error,
.form-group textarea.error,
.form-group select.error {
    border-color: #dc2626;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group select {
    cursor: pointer;
    background: white;
}

.phone-input-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.phone-input-wrapper:focus-within {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.phone-input-wrapper .country-code {
    background: #f3f4f6;
    padding: 12px 14px;
    font-weight: 600;
    color: #374151;
    border-right: 2px solid #e5e7eb;
}

.phone-input-wrapper input {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.phone-input-wrapper input:focus {
    box-shadow: none !important;
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: white;
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    animation: slideUp 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    padding: 16px 24px;
    text-align: center;
}

.modal-header .success-icon {
    font-size: 2rem;
    margin-bottom: 6px;
}

.modal-header h3 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.modal-header p {
    color: #a7f3d0;
    font-size: 0.85rem;
}

.modal-body {
    padding: 24px;
}

.order-id-section {
    background: linear-gradient(135deg, #f0fdfa, #ecfdf5);
    border: 2px dashed #10b981;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.order-id-label {
    font-size: 0.85rem;
    color: #059669;
    font-weight: 600;
    margin-bottom: 10px;
}

.order-id-value {
    font-size: 2rem;
    font-weight: 700;
    color: #047857;
    letter-spacing: 3px;
    font-family: 'Courier New', monospace;
    background: white;
    padding: 12px 20px;
    border-radius: 8px;
    display: block;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 12px;
    user-select: all;
}

@media (max-width: 480px) {
    .order-id-value {
        font-size: 1.5rem;
        letter-spacing: 2px;
        padding: 12px 16px;
    }
}

.copy-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.copy-btn.copied {
    background: linear-gradient(135deg, #059669, #047857);
}

.messenger-instructions {
    background: #eff6ff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.messenger-instructions h4 {
    font-size: 0.95rem;
    color: #1e40af;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.messenger-instructions ol {
    font-size: 0.9rem;
    color: #1e3a8a;
    padding-left: 20px;
    line-height: 1.8;
}

.messenger-btn {
    width: 100%;
    background: linear-gradient(135deg, #0084ff, #0066cc);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.messenger-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 132, 255, 0.4);
}

.close-modal-btn {
    width: 100%;
    background: #f3f4f6;
    color: #6b7280;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.close-modal-btn:hover {
    background: #e5e7eb;
}

.order-details-summary {
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
    font-size: 0.85rem;
}

.order-details-summary .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
}

.order-details-summary .detail-row:last-child {
    border-bottom: none;
}

.order-details-summary .detail-label {
    color: #6b7280;
}

.detail-value-clickable {
    cursor: pointer;
    color: #10b981 !important;
    font-weight: 600;
    user-select: none;
}

.detail-value-clickable:hover {
    text-decoration: underline;
}

.dropdown-arrow {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.8rem;
}

.items-details-hidden {
    display: none;
}

.items-details-visible {
    display: block;
    background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
    border-radius: 10px;
    padding: 12px;
    margin: 12px 0;
    border-left: 4px solid #10b981;
}

.items-details-visible .order-item {
    background: white;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.items-details-visible .order-item:last-child {
    margin-bottom: 0;
}

/* Success Animation */
.success-celebration {
    text-align: center;
    padding: 60px 20px;
    animation: fadeIn 0.5s ease;
}

.success-celebration .checkmark {
    font-size: 5rem;
    animation: scaleIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes scaleIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.success-celebration h2 {
    color: #059669;
    font-size: 1.8rem;
    margin: 20px 0 10px 0;
}

.success-celebration p {
    color: #6b7280;
    font-size: 1.1rem;
    margin: 10px 0;
}

.success-celebration .heart {
    font-size: 2rem;
    margin-top: 10px;
    animation: heartBeat 1s infinite;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #fcd34d;
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading p {
    color: #78350f;
    font-weight: 500;
}

/* ============================================
   SETUP GUIDE
   ============================================ */
.setup-guide {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.setup-guide h3 {
    color: #1e40af;
    font-size: 1rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.setup-guide ol {
    color: #1e3a8a;
    font-size: 0.9rem;
    padding-left: 20px;
}

.setup-guide li {
    margin-bottom: 6px;
}

.setup-guide .sheet-example {
    margin-top: 16px;
    overflow-x: auto;
}

.setup-guide table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.setup-guide th {
    background: #dbeafe;
    color: #1e40af;
    padding: 10px;
    text-align: left;
    border: 1px solid #bfdbfe;
}

.setup-guide td {
    padding: 10px;
    border: 1px solid #bfdbfe;
    background: white;
}

/* ============================================
   SCROLLBAR STYLES
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    color: #9ca3af;
    font-size: 0.85rem;
}

/* ============================================
   SEARCH BAR
   ============================================ */
.search-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    /* background: #fff9f5;
    padding: 0 0 16px 0;
    margin-bottom: 8px; */
}

.search-bar input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.2s;
    background: white;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
}

.search-bar input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: none;
}

.search-bar input::placeholder {
    color: #9ca3af;
}

/* ============================================
   MOBILE NAVIGATION BUTTONS
   ============================================ */
.mobile-nav-buttons {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    gap: 12px;
    z-index: 100;
}

.mobile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
    padding: 8px;
}

.mobile-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

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

.mobile-btn span {
    font-size: 0.7rem;
    font-weight: 600;
}

.mobile-btn svg {
    width: 20px;
    height: 20px;
}

/* Show only on mobile/tablet screens */
@media (max-width: 1023px) {
    .mobile-nav-buttons {
        display: flex;
        flex-direction: column;
    }
}