:root{--brand-blue:#1a56db;--brand-blue-light:#e8f0fe;--brand-blue-mid:#93b4f8;--brand-dark:#0f172a;--brand-slate:#334155;--brand-muted:#64748b;--brand-border:#e2e8f0;--brand-bg:#f8faff;--brand-card:#ffffff;--brand-success:#059669;--shadow-card:0 1px 3px rgba(15,23,42,.06),0 4px 16px rgba(26,86,219,.06);--shadow-hover:0 4px 24px rgba(26,86,219,.14);--radius-card:16px;--radius-btn:10px;--transition:all .2s cubic-bezier(.4,0,.2,1)}
*,*::before,*::after{box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background-color:var(--brand-bg);color:var(--brand-dark);margin:0;-webkit-font-smoothing:antialiased}

/* Header */
.order-page-header{background:#fff;border-bottom:1px solid var(--brand-border);padding:20px 0;position:sticky;top:0;z-index:100}
.order-page-header .brand-name{font-size:1.5rem;font-weight:600;color:var(--brand-blue);letter-spacing:-.02em;text-decoration:none}
.order-page-header .brand-name span{color:var(--brand-dark)}
.header-tagline{font-size:.8rem;color:var(--brand-muted);font-weight:400;letter-spacing:.04em;text-transform:uppercase}

/* Hero */
.order-hero{ background: linear-gradient(135deg, #0DAFE8 0%, #0DAFE8 50%, #1A6FE8 100%);padding:100px 0 52px;position:relative;overflow:hidden}
.order-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.order-hero-title{font-size:2.4rem;font-weight:600;color:#fff;letter-spacing:-.03em;margin-bottom:8px;line-height:1.2}
.order-hero-title em{font-style:italic;font-weight:300;color:#dbdbdb;}
.order-hero-sub{color:rgba(255,255,255,.72);font-size:1rem;font-weight:400;margin-bottom:0}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.78rem;font-weight:500;padding:6px 12px;border-radius:100px;letter-spacing:.02em}

/* Layout */
.order-layout{padding:36px 0 80px}

/* Section label */
.section-label{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.section-label-text{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-muted)}
.section-label-line{flex:1;height:1px;background:var(--brand-border)}

/* Cards */
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.service-card{background:var(--brand-card);border:1.5px solid var(--brand-border);border-radius:var(--radius-card);padding:22px 20px 20px;display:flex;flex-direction:column;gap:14px;transition:var(--transition);position:relative;overflow:hidden}
.service-card::after{content:'';position:absolute;inset:0;border-radius:var(--radius-card);border:2px solid var(--brand-blue);opacity:0;transition:var(--transition);pointer-events:none}
.service-card:hover,.service-card.is-active{border-color:transparent;box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.service-card:hover::after,.service-card.is-active::after{opacity:1}
.service-card-icon{width:48px;height:48px;background:var(--brand-blue-light);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.service-card-body{flex:1}
.service-card-name{font-weight:600;font-size:.98rem;color:var(--brand-dark);margin-bottom:4px}
.service-card-price{font-size:.85rem;color:var(--brand-muted)}
.service-card-price strong{color:var(--brand-blue);font-weight:700;font-size:1rem}

/* Qty */
.qty-controls{display:flex;align-items:center;background:var(--brand-bg);border:1.5px solid var(--brand-border);border-radius:8px;overflow:hidden;width:fit-content}
.qty-btn{border:none;background:transparent;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--brand-slate);font-size:1.1rem;font-weight:600;transition:var(--transition);flex-shrink:0;line-height:1}
.qty-btn:hover{background:var(--brand-blue-light);color:var(--brand-blue)}
.qty-btn:disabled{color:#cbd5e1;cursor:not-allowed;background:transparent}
.qty-input{border:none;background:transparent;width:40px;height:34px;text-align:center;font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:600;color:var(--brand-dark);outline:none;-moz-appearance:textfield}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.service-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--brand-border)}
.item-subtotal{font-size:.88rem;font-weight:600;color:var(--brand-slate)}
.item-subtotal .subtotal-amount{color:var(--brand-success);font-weight:700;font-size:.95rem}
.item-subtotal.is-zero .subtotal-amount{color:var(--brand-muted)}

/* Sidebar */
.sidebar-wrapper{position:sticky;top:84px}
.order-summary-card{background:var(--brand-card);border:1.5px solid var(--brand-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card)}
.summary-header{background:linear-gradient(135deg,#1a56db,#1e40af);padding:18px 22px;display:flex;align-items:center;gap:10px}
.summary-header-title{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;color:#fff;margin:0;letter-spacing:-.01em}
.summary-body{padding:20px 22px}
.summary-empty{text-align:center;padding:24px 0;color:var(--brand-muted);font-size:.88rem}
.summary-empty-icon{font-size:2.4rem;margin-bottom:8px;opacity:.5;display:block}
.summary-items-list{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:10px}
.summary-item{display:flex;align-items:flex-start;gap:10px;animation:fadeSlideIn .2s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.summary-item-dot{width:8px;height:8px;background:var(--brand-blue);border-radius:50%;margin-top:6px;flex-shrink:0}
.summary-item-info{flex:1;min-width:0}
.summary-item-name{font-size:.88rem;font-weight:500;color:var(--brand-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.summary-item-meta{font-size:.78rem;color:var(--brand-muted);margin-top:1px}
.summary-item-price{font-size:.88rem;font-weight:700;color:var(--brand-slate);flex-shrink:0}
.summary-divider{border:none;border-top:1px dashed var(--brand-border);margin:14px 0}
.summary-row{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;color:var(--brand-muted);margin-bottom:8px}
.summary-total-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0 0;border-top:2px solid var(--brand-dark);margin-top:6px}
.summary-total-label{font-weight:700;font-size:.95rem;color:var(--brand-dark)}
.summary-total-amount{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:600;color:var(--brand-blue);letter-spacing:-.02em}
.btn-book-pickup{display:flex;width:100%;background:linear-gradient(135deg,#1a56db,#1e40af);color:#fff;border:none;border-radius:var(--radius-btn);padding:14px 20px;font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:var(--transition);align-items:center;justify-content:center;gap:8px;margin-top:18px;text-decoration:none;position:relative;overflow:hidden}
.btn-book-pickup::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:var(--transition)}
.btn-book-pickup:hover::before{background:rgba(255,255,255,.1)}
.btn-book-pickup:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(26,86,219,.35);color:#fff}
.btn-book-pickup:disabled{background:#cbd5e1;cursor:not-allowed;transform:none;box-shadow:none}
.summary-note{text-align:center;font-size:.75rem;color:var(--brand-muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:5px}

/* Mobile bar */
.mobile-summary-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--brand-card);border-top:1px solid var(--brand-border);padding:12px 16px;z-index:200;box-shadow:0 -4px 20px rgba(15,23,42,.1);align-items:center;gap:12px}
.mobile-summary-info{flex:1}
.mobile-summary-label{font-size:.78rem;color:var(--brand-muted)}
.mobile-summary-total{font-size:1.1rem;font-weight:700;color:var(--brand-dark)}
.btn-mobile-book{background:var(--brand-blue);color:#fff;border:none;border-radius:var(--radius-btn);padding:12px 20px;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:var(--transition)}
.btn-mobile-book:disabled{background:#cbd5e1;cursor:not-allowed}

/* Utils */
.text-blue{color:var(--brand-blue)}
.fw-600{font-weight:600}

/* ── Category Filter Bar ─────────────────────────────────── */
.category-filter-wrap{margin-bottom:22px;position:relative}
.category-filter-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.category-filter-scroll::-webkit-scrollbar{display:none}

/* Fade edges on desktop to hint scrollability */
.category-filter-wrap::after{content:'';position:absolute;right:0;top:0;bottom:4px;width:48px;background:linear-gradient(to left,var(--brand-bg),transparent);pointer-events:none;border-radius:0 8px 8px 0}

.cat-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1.5px solid var(--brand-border);background:#fff;color:var(--brand-slate);font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:500;padding:7px 14px;border-radius:100px;cursor:pointer;transition:var(--transition);flex-shrink:0;line-height:1}
.cat-btn:hover{border-color:var(--brand-blue-mid);color:var(--brand-blue);background:var(--brand-blue-light)}
.cat-btn.is-active{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;box-shadow:0 2px 10px rgba(26,86,219,.3)}
.cat-btn .cat-icon{font-size:.95rem;line-height:1}
.cat-btn .cat-count{background:rgba(0,0,0,.08);border-radius:100px;font-size:.68rem;font-weight:700;padding:1px 6px;min-width:18px;text-align:center;transition:var(--transition)}
.cat-btn.is-active .cat-count{background:rgba(255,255,255,.25)}

/* Favorites heart badge on card */
.card-fav-badge{position:absolute;top:12px;right:12px;width:26px;height:26px;background:rgba(239,68,68,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;opacity:0;transition:var(--transition);cursor:pointer;border:none;z-index:2}
.card-fav-badge.is-fav{opacity:1;background:rgba(239,68,68,.15)}
.service-card:hover .card-fav-badge{opacity:1}
.card-fav-badge:hover{background:rgba(239,68,68,.25) !important;transform:scale(1.15)}

/* Category tag shown on each card */
.card-cat-tag{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-muted);background:var(--brand-bg);border:1px solid var(--brand-border);border-radius:4px;padding:2px 7px;margin-bottom:2px}

/* Card hide/show animation */
.service-card{transition:opacity .22s ease,transform .22s ease,border-color .2s,box-shadow .2s}
.service-card.cat-hidden{opacity:0;transform:scale(.95);pointer-events:none;position:absolute;visibility:hidden}

/* Empty filter state */
.filter-empty-state{display:none;grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--brand-muted);font-size:.9rem}
.filter-empty-state.is-visible{display:block}
.filter-empty-icon{font-size:2.2rem;display:block;margin-bottom:10px;opacity:.5}

/* Responsive */
@media(max-width:991.98px){.sidebar-col{display:none}.mobile-summary-bar{display:flex}.order-layout{padding-bottom:100px}.order-hero-title{font-size:1.8rem}}
@media(max-width:575.98px){.services-grid{grid-template-columns:repeat(2,1fr);gap:12px}.service-card{padding:16px 14px}.service-card-icon{width:40px;height:40px;font-size:1.2rem}.order-hero{padding:32px 0 36px}}
@media(max-width:359px){.services-grid{grid-template-columns:1fr}}