/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v83/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Orbitron';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/orbitron/v17/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
html,body{font-family:Roboto, sans-serif;display:flex;min-height:100vh;flex-direction:column;}
#aboutus{min-height:200px;background:rgba(250,250,250,0.5);padding:30px 20px;border:1px solid #aaa;margin:30px 10px;width:calc(100% - 20px);border-radius:5px;text-align:center;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;font-size:1.2em;text-shadow:0px 1px 2px #fff;}
#aboutus hr{width:calc(100% - 100px);margin:10px 50px;border-top:1px solid red;border-bottom:none;}
#aboutus h2{width:100%}
#aboutus h5{width:100%}
@media only screen and (max-width:600px){
#aboutus{min-height:200px;background:rgba(250,250,250,0.5);padding:30px 20px;border:1px solid #aaa;margin:30px 10px;width:calc(100% - 20px);border-radius:5px;text-align:center;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;font-size:1.2em;text-shadow:0px 1px 2px #fff;}
#aboutus hr{width:calc(100% - 100px);margin:10px 50px;border-top:1px solid red;border-bottom:none;}
#aboutus h2{width:100%}
#aboutus h5{width:100%}
}
#d3a{display:none}
#d3y{display:none}
#d3m{display:none}
#qrTD{display:block;margin:10px auto;padding-top:30px;font-family:Orbitron;font-size:3em;}
#pro.bad::placeholder{color:#98a2b3;opacity:1;font-weight:normal} /* invalid code: the warning text below is enough — keep the placeholder neutral */
#pro.good::placeholder{color:black;opacity:1;font-weight:normal}
#lang,#lang2{cursor:pointer;}
#lang{background:rgba(0,0,0,0.7);padding:10px 20px 0px 20px;border:1px solid #fff;border-radius:3px;}
/* selected delivery address: soft card matching the order-type pills */
#caddress{position:relative;width:224px;margin:10px auto 16px;padding:10px 14px 12px 40px;background:#f7f7f8;border:1px solid #e2e2e6;border-radius:14px;font-size:.85em;text-align:left;color:#333;line-height:1.45;height:auto;white-space:normal;overflow:hidden;box-sizing:border-box;display:none;cursor:pointer;transition:border-color .15s;}
#caddress:hover{border-color:#c22c27;}
#caddress:before{content:'place';font-family:'Material Icons';position:absolute;left:10px;top:12px;font-size:20px;color:#c22c27;}
#caddress b{display:block;font-size:.85em;color:#888;font-weight:600;margin-bottom:2px;}
#curbside{position:relative;font-size:1.2em;text-align:center;color:#c22c27;display:none;}
#curbside:before{content:'check_box_outline_blank';font-family:Material Icons;vertical-align:middle;font-size:1.3em;}
#curbside.yes:before{content:'check_box';font-family:Material Icons;vertical-align:middle;font-size:1.3em;}
#emptycart{color:#c22c27;cursor:pointer;display:none;float:right;margin:4px 0 2px;text-align:center;border:1px solid rgba(194,44,39,.4);border-radius:10px;padding:7px 14px;font-size:.82em;font-weight:600;transition:background-color .15s;}
#emptycart:hover{background:#fdf3f2;}
#emptycart i{vertical-align:middle;font-size:16px;margin-right:4px;}
#dfee{display:none}
#main{margin-top:130px;flex:1 0 auto;align-content:start;}
/* desktop: fix the header height so #category's top always lands exactly on the 487.5px #topbg
bottom regardless of how the store-info text wraps (486.5 head + 1px redeem-rules divider) */
@media only screen and (min-width:993px){
.row.head{height:486.5px;}
#main{margin-top:0;padding-top:0;}
}
#mobnav{position:fixed;top:0;left:0;padding:33px 10px;background:#000;z-index:999;vertical-align:middle;}
#navlogo{height:45px;width:45px;background-color:transparent; background-size:contain; background-image: url(/img/logo.png);background-repeat:no-repeat;background-position:center center;cursor:pointer;}
#mobcart{background:#c22c27;height:28px;line-height:28px;width:70px;padding:0 0 0 10px;margin:0;color:#fff;border-radius:5px;position:absolute;right:55px;top:50%;transform:translateY(-50%);}
#mobcart:after{position:absolute;right:10px;content:attr(v)}
#mobcart i{vertical-align:middle;}
#moblang{background:#333;height:28px;line-height:28px;width:70px;padding:0 0 0 10px;margin:0 15px;color:#fff;position:relative;text-align:center;position:absolute;top:16px;}
#moblang:after{position:absolute;right:10px;content:attr(v)}
#address{position:relative;padding-left:26px;margin-bottom:16px;}
#address i:hover{color:#c22c27}
#phone{position:relative;padding-left:26px;color:#fff;}
#address i, #phone i, #hoursbar .hoursbar-clock{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:18px;font-size:18px;text-align:center;color:#fff;cursor:pointer;}
/*#hour{position:absolute;top:320px;left:15%;width:200px;height:200px;text-align:center;line-height:1.1;}*/
#hour{display:none;}
/*#hour b{cursor:pointer;text-decoration:underline;}*/
#hour2{padding:20px 0 20px 0;line-height:1.3;text-align:center;}
/* nav: sliding active-page indicator — one bar (#navline, injected by the
header script in map.inc) follows hover and rests on the .on link */
#nav{position:relative;}
#navline{position:absolute;bottom:-2px;height:3px;border-radius:3px;background:#c22c27;opacity:0;pointer-events:none;transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1),opacity .18s ease;}
.redkp{background:#c22c27;color:#fff;border-radius:8px;padding:10px 20px;width:130px}
.reverseredkp{background:#fff;color:#c22c27;border-radius:8px;padding:10px 20px;border:1px solid #c22c27;width:130px}
.emptyno{border-radius:50px;background-color: white;
border: 1px solid #c22c27;
color: #c22c27;}
.mobitem{display:none}
#item li.item b.n2 {
position: absolute;
left: 13px;
top: 10px;
font-size:0.95em;
text-overflow: ellipsis;
overflow:hidden;
width: 53%;
white-space:nowrap;
}
#item h5{font-weight:bolder;}
#item li.item b.n {
position: absolute;
left: 13px;
top: 10px;
font-size:0.95em;
text-overflow: ellipsis;
overflow:hidden;
width: 53%;
white-space:nowrap;
}
#itemlist{padding-top:60px;}
#itemlist li.item.img img{position:absolute;right:0;top:0;width:150px;height:150px;background-color:#c8c8c8;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:none;}
#itemlist p{
padding: 0px 0px 45px 20px;
}
#itemlist ul{padding:0;margin:0;display:block;}
#itemlist li p{display:block;position: absolute;left: 8px;line-height: 1;top: 23px;padding: 0;height: 55px;overflow-x: hidden;overflow-y: hidden;text-overflow: ellipsis;width: 60%;font-family: Open Sans;color: #626464;}
#itemlist h5{padding: 15px 0px 30px 20px;margin:0px auto;font-size:1.75em;width:100%;font-weight:bolder;}
#itemlist li.item{position: relative;
display: block;
width: 90%;
height: 150px;
margin: 18px auto;
cursor: pointer;
border: none;
border-radius: 10px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
transition: box-shadow 0.2s ease, transform 0.2s ease;}
#itemlist li.item:hover{box-shadow: 0 6px 20px rgba(0,0,0,0.14), 0 3px 6px rgba(0,0,0,0.08); transform: translateY(-1px);}
/* #itemlist li.item b.n2 {
position: absolute;
left: 8px;
right: 90px;
top: 10px;
font-size:1.1em;
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width: 60%;
} */
/* #itemlist li.item b.n {
position: absolute;
left: 8px;
right: 90px;
top: 10px;
font-size:1.1em;
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap;
width:60%;
} */
#itemlist li.item .n, #itemlist li.item b.n2 {
position: absolute;
left: 8px;
right: 158px;
top: 10px;
font-size:1.1em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/* Fallback for browsers that don't support line-clamp */
line-height: 1.2em;
max-height: 2.4em; /* 2 lines */
word-wrap: break-word;
}
/* For even better browser support */
@supports not (-webkit-line-clamp: 2) {
#itemlist li.item .n, #itemlist li.item b.n2 {
position: relative;
}
#itemlist li.item .n::after, #itemlist li.item b.n2::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: white;
padding-left: 20px;
background: linear-gradient(to right, transparent, white 50%);
}
}
#itemlist li.item b.p {
position: absolute;
left: 8px;
bottom: 6px;
color: #626464;
font-size: 1rem;
}
#itemlist li.item b.n{
font-size: 1rem;
}
#itemlist li.item p {
position: absolute;
left: 0px;
line-height: 1;
top: 40px;
padding: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
width: calc(100% - 200px);
font-family: Open Sans;
font-size: .75rem;
}
/* no image on the card — let the description use the full width */
#itemlist li.item:not(.img) p{ width: calc(100% - 16px); }
/* ---- sidenav: clean flat list ---- */
#slide-out.sidenav{width:290px;background:#fff;border-radius:16px 0 0 16px;box-shadow:-6px 0 24px rgba(0,0,0,.12);padding-bottom:14px;}
/* slim header: logo chip + store name + close chip in one row */
.sidenav .user-view{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:14px 14px 12px;border-bottom:1px solid #f0f0f1;}
.sidenav .background{display:none;}
.sidenav .user-view .circle{background-color:transparent;background-image:url(/img/logo.png);background-size:contain;background-position:center center;background-repeat:no-repeat;height:38px;width:38px;margin:0;border-radius:10px;flex:0 0 auto;}
.sidenav .user-view .name{color:#1a1a1a;font-weight:700;font-size:1.02rem;line-height:1.25;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#sdclose{flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#f2f2f4;border-radius:99px;color:#333;cursor:pointer;padding:0;transition:background-color .15s;}
#sdclose:hover{background:#e6e6e9;}
/* flat rows with rounded soft-red highlight */
#slide-out li>a{display:flex;align-items:center;gap:12px;height:46px;line-height:46px;margin:2px 10px;padding:0 12px;border-radius:10px;color:#333;font-size:.95rem;font-weight:500;transition:background-color .15s;}
#slide-out li>a:hover{background:#fdf3f2;}
#slide-out li>a>i.material-icons{float:none;margin:0;font-size:20px;color:#8a8a8f;height:auto;line-height:inherit;width:22px;text-align:center;}
#slide-out #signin2 svg{width:22px;height:22px;flex:0 0 auto;}
#slide-out .divider{margin:8px 16px;height:1px;background-color:#eee;}
pre{font-family:monospace, monospace;font-size:1em;}
/* hours as a soft card at the end of the list */
#sidehours{background:transparent;padding:0;margin:10px 14px 0;width:auto;}
#hour2{background:#f7f7f8;border-radius:12px;padding:12px 14px;line-height:1.3;text-align:left;}
#hour2 b{display:block;margin-bottom:6px;color:#B12C27;font-size:.8rem;}
#hour2 pre{margin:0;text-align:left;font-size:.8rem;line-height:1.6;color:#666;}
/* QR table mode entries (shown by menu.js when tbl != '') */
#sidetbl{line-height:20px;padding:12px 0;margin:8px 14px;border-radius:12px;}
#sidetbl i{vertical-align:bottom;}
/* #slide-out prefix keeps these above the li>a flex rule's specificity — QR-table-only rows */
#slide-out #sidetbl,#slide-out #tbldrink,#slide-out #tblhelp,#slide-out #tblthumb,#slide-out #tblorder,#slide-out #tblnew,#slide-out #tbldevice,#slide-out #tblmanage,#sidetbl,#tbldrink,#tblhelp,#tblthumb,#tblorder,#tblnew,#tbldevice,#tblmanage{display:none;}
#tblnew{position:relative;}
#tblnew:after{position:absolute;content:attr(v);right:22px;font-weight:bold;}
.tcenter{margin-bottom:60%;padding:30px 20px;}
.hotp{display:inline-block;width:16px;height:16px;background-image:url(hotp16.gif)}
.fancyclose{position:absolute;top:10px;right:10px;color:#000;}
.col{position:relative}
.modal{max-height:95% !important;max-width:750px;}
.chko{display:inline-block;padding:18px;width:98%;background:#c22c27;color:#fff;border-radius:3px;margin-top:30px;cursor:pointer;text-align:center;border-radius:50px;}
.chko.disabled{opacity:0.5;pointer-events:none;}
/* modern checkout action buttons (future theme) */
#pay .pay-actions{ display:flex; gap:12px; margin-top:8px; }
#pay .pay-actions .col{ flex:1; width:auto; float:none; padding:0; margin:0; }
#pay .pay-actions .chko{ width:100%; margin:0; border-radius:12px; padding:15px 12px; font-size:1rem; font-weight:600; letter-spacing:.01em; white-space:nowrap; box-shadow:none; transition:background .15s ease, box-shadow .15s ease, transform .05s ease; }
#pay .pay-actions #addmore.chko{ color:#fff !important; }
#pay .pay-actions #po2.chko{ background:#c22c27; color:#fff; border:1px solid #c22c27; box-shadow:0 3px 10px rgba(194,44,39,.28); }
#pay .pay-actions #po2:after{ content:"\00a0" attr(v); } /* space between "PLACE ORDER" and the total */
#pay .pay-actions .col:last-child{ flex:1.25; } /* give the "Place Order + total" button more room so it stays on one line */
#pay .pay-actions .chko:active{ transform:translateY(1px); }
/* mobile: pin the action buttons to the bottom as a sticky bar (.row.pay-actions beats #pay .row padding) */
@media (max-width:992px){
#pay .payact-divider{ display:none; }
#pay .pay{ padding-bottom:53px !important; } /* !important beats the later #pay .pay{padding:18px}; bottom gap above the bar matches the nav->store-card top gap */
#pay .row.pay-actions{ position:fixed; left:0; right:0; bottom:0; z-index:990; margin:0; gap:10px; background:#fff; border-top:1px solid #e4e7ec; padding:14px 14px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -4px 16px rgba(0,0,0,.08); } /* z below materialize sidenav (999) + overlay (997) */
/* Firefox Android: fixed bottom:0 anchors to the layout viewport, leaving a toolbar-height gap
until the URL bar collapses. Pin the bar's bottom edge to the dynamic viewport instead. */
@supports (height: 100dvh){
#pay .row.pay-actions{ bottom:auto; top:100dvh; transform:translateY(-100%); }
}
}
.container{max-width:1200px;margin:0 auto;padding-top:60px;width:95%;position:relative;}
.mont{/*font-family:Montserrat*/}
.head{/*font-family:Montserrat;*/color:#fff;}
.foot{/*font-family:Montserrat;*/color:#fff;background:#231F20;padding:10px 0 20px 0;}
.foot a{/*font-family:Montserrat;*/color:#fff;}
.page-footer{background:#231F20;margin-top:60px;padding-bottom:10px;}
#foot.foot-hidden{display:none !important;}
.flex { display: flex; flex-wrap: wrap; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-56 { font-size: 56px; }
#sitelogo{height:160px;background-color:rgba(0,0,0,0.3);border-radius:10px;margin-top:20px;background-size:contain;background-image:url(/img/logo.png);background-repeat:no-repeat;background-position:center center;cursor:pointer;}
@media only screen and (max-width:600px){
#itemlist li.item p{
left:8px;
-webkit-line-clamp:5;
line-height:1.2;
}
#sitelogo{margin-top:30px; margin-bottom:0;}
}
#topBG{position:absolute;top:0;left:0;width:100%;height:487.5px;background-image:url(/img/online.jpg);background-repeat:no-repeat;background-size:cover;z-index:-1;}
#topbg{position:absolute;top:0;left:0;width:100%;height:487.5px;background-image:url(/img/online.jpg);background-repeat:no-repeat;background-size:cover;z-index:-1;}
#topbg2{background:rgba(0,0,0,0.38);position:absolute;top:0;left:0;width:100%;height:100%;font-size:2em;color:#fff;}
#fname{margin-top:20px;padding-top:0;font-weight:bold;/*font-family:Montserrat;*/font-size:1.6em;}
#nav li{float:left;padding:2px 8px;font-size:1.3em;}
#nav li a{color:#fff}
#cart{background:#c22c27;width:70px;padding:0 0 0 10px;margin:0;color:#fff;position:relative;border-radius:12px;}
#cart:after{position:absolute;right:10px;content:attr(v)}
#cart i{vertical-align:middle;}
#links img{width:32px;height:32px;margin-top:15px;margin-right:10px;}
#links .soc{display:inline-block;margin:15px 10px 0 0;color:#fff;font-size:28px;line-height:1;text-decoration:none;}
#links .soc:hover{color:#c22c27;}
#search{position:absolute;left:0;bottom:-180px;height:43px;border-radius:99px;background:#fff;line-height:43px;display:none;}
#search i{vertical-align:middle;color:#000;}
#search input{border:none !important;padding:0;height:35px;width:70%;text-align:center;}
#category{background-color:white;border-radius:7px 7px 0 0;padding:0;overflow-x:auto;position:sticky;z-index:5;height:49px; border-bottom:solid 1px #eee;box-shadow:none;overflow-y:hidden;overflow-x:scroll;top:0px;margin:auto;}
#category::-webkit-scrollbar {display: none; /* Chrome, Safari, and Edge */}
@media only screen and (min-width:601px) and (max-width: 993px){
#category{margin:auto;top:51px;height:52px;border-bottom:solid 1px #eee;box-shadow:none;overflow-y:hidden;overflow-x:scroll;margin-top:10px;}
}
#category::-webkit-scrollbar{display:none;}
#category ul{padding:0;margin:0;display:flex;width:max-content;min-width:100%;}
@media only screen and (max-width:600px){
#category{top:113px;border-radius:0px;border-bottom:solid 1px #eee;} /* flush under the stuck searchbar (top 51 + 62 tall) */
#category ul{padding:0;margin:0;display:flex;}
}
/* chevrons live inside the scrolling bar, pinned next to the hamburger / right edge */
#slideLeft,#slideRight{position:sticky;z-index:7;flex:0 0 auto;align-self:stretch;width:40px;background:#fff;border:none;color:#222;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;font-size:30px;}
#slideLeft{left:48px;}
#slideRight{right:0;}
@media only screen and (max-width:993px){
#caddress{text-align:left;}
}
/* hamburger category browser: pinned to the left of the scrolling bar */
#catham{position:sticky;left:0;z-index:7;flex:0 0 auto;align-self:stretch;display:flex;align-items:center;justify-content:center;width:48px;cursor:pointer;background:#fff;color:#222;}
#catham i{color:#222;}
#catham svg{width:24px;height:24px;}
/* edge fades: white gradient overlays pinned inside the bar (the bar itself stays solid) */
.catfadeL,.catfadeR{position:sticky;z-index:6;flex:0 0 0px;width:0;align-self:stretch;pointer-events:none;opacity:0;transition:opacity .25s;}
.catfadeL{left:88px;}
.catfadeR{right:40px;}
.catfadeL:before{content:'';position:absolute;left:0;top:0;height:100%;width:44px;background:linear-gradient(to right,#fff,rgba(255,255,255,0));}
.catfadeR:before{content:'';position:absolute;right:0;top:0;height:100%;width:44px;background:linear-gradient(to left,#fff,rgba(255,255,255,0));}
#category.fadeL .catfadeL{opacity:1;}
#category.fadeR .catfadeR{opacity:1;}
@media only screen and (max-width:600px){
.catfadeL{left:48px;}
.catfadeR{right:0;}
}
/* dropdown panel listing all categories */
#catmenu{position:fixed;display:none;z-index:1002;background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.18);width:260px;max-width:calc(100vw - 16px);max-height:50vh;overflow-y:auto;padding:2px 0 6px;}
#catmenu.open{display:block;}
#catmenu .cm-head{display:flex;align-items:center;justify-content:space-between;font-weight:bold;font-size:1.1em;padding:10px 16px 6px;}
#catmenu .cm-head a{cursor:pointer;color:#222;display:flex;background:#f2f2f2;border-radius:99px;padding:4px;}
#catmenu .cm-head a i{font-size:18px;}
#catmenu .cm-item{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;cursor:pointer;font-size:.95em;}
#catmenu .cm-item:hover{background:#f6f6f6;}
#catmenu .cm-item.on{color:#c22c27;font-weight:bold;}
#catmenu .cm-item .cnt{color:#888;font-size:.9em;margin-left:12px;}
#category li.cat{height:50px;line-height:1.2;padding:0 20px 0 20px;font-weight:bold;margin:0;cursor:pointer;display:flex;align-items:center;background-color: white !important;text-align:center;white-space:nowrap;position:relative;}
#category li.cat:before{position:absolute;right:10px;font-family:material icons;color:#c22c27;font-size:1.3em;}
@media only screen and (min-width:601px){
#category li.cat{border-radius:7px;}
#category li.cat.on{color: #c22c27;background-color: white !important;}
#category li.cat.on::after{content:'';position:absolute;bottom:0;left:10%;width:80%;height:5px;background-color:#c22c27;border-radius:50% 50% 0 0 / 60% 60% 0 0;}
}
@media only screen and (max-width: 600px){
#category li.cat{height:48px;line-height:1.2;padding:0 16px 0 16px;font-weight:bold;margin:0;cursor:pointer;display:flex;align-items:center;background-color: white !important;position:relative;}
#category li.cat:before{position:absolute;right:10px;font-family:material icons;content: '';color:#c22c27;font-size:1.3em;}
#category li.cat.on{color: #c22c27;background-color: white !important;}
#category li.cat.on::after{content:'';position:absolute;bottom:0;left:10%;width:80%;height:5px;background-color:#c22c27;border-radius:50% 50% 0 0 / 60% 60% 0 0;}
}
#category li.cat:hover{background:#fff;}
#category li.cat.on:before{color:#c22c27;}
#category li.item{position:relative;display:block;width:90%;height:77px;margin:5px auto;cursor:pointer;border:1px solid #ccc;border-radius:3px;overflow:hidden;}
#category li.soldout:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.55);z-index:1;border-radius:3px;}
#category li.soldout:after{content:'SOLD OUT';position:absolute;top:8px;right:8px;
background:#e53935;
color:#fff;
padding:5px 12px;
border-radius:999px;
letter-spacing:1.2px;
font:600 10px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
white-space:nowrap;
box-shadow:0 2px 6px rgba(229,57,53,0.35);
z-index:2;
}
.itemlist li.soldout:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.55);z-index:1;border-radius:10px;}
.itemlist li.soldout:after{content:'SOLD OUT';position:absolute;top:12px;right:12px;
background:#e53935;
color:#fff;
padding:6px 16px;
border-radius:999px;
letter-spacing:1.5px;
font:600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
white-space:nowrap;
box-shadow:0 2px 8px rgba(229,57,53,0.4);
z-index:2;
}
.modsoldout{background-color:#E0E0E0;pointer-events:none;}
.modsoldout:after{content:'Sold Out';position:absolute;top:17px;right:0px;width:100%;padding:0.3em;
background-color: #A00;
color: #fff;
display: block;
position:absolute;
text-align: center;
text-decoration: none;
letter-spacing: .09em;
background-color: #989898;
text-shadow: 0 0 0.75em #444;
box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
font: bold 16px/1.2em Arial, Sans-Serif;
-webkit-text-shadow: 0 0 0.75em #444;
-webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.5);
-webkit-transform: scale(1,1) rotate(-35deg);
z-index:1;
};
#category .mobitem h5{display:block;}
#category li.item:hover{background:#fff;}
#category li.item.noimg img{position:absolute;left:0;top:0;width:85px;height:75px;}
#category li.item.img img{position:absolute;right:0;top:0;width:85px;height:75px;background-color:#c8c8c8;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:8px;}
#category li.item b.n{position:absolute;left:90px;right:90px;top:0px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
#category li.item b.n2{position:absolute;left:90px;right:90px;top:0px;}
#category li.item p{position:absolute;left:90px;line-height:1;top:5px;padding:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:calc(100% - 100px);font-family:Open Sans}
#category li.item b.p{position:absolute;right:10px;top:0px;}
#item{padding:0 18px;}
#item .item{background-color:transparent;padding:0px 20px;margin:0px;height:100%;}
#item li.item{position:relative;display:block;width:100%;height:144px;margin:20px 0;cursor:pointer;border:none;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.10),0 2px 4px rgba(0,0,0,0.06);transition:box-shadow 0.2s ease,transform 0.2s ease;}
#item li.item:hover{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,0.14),0 3px 6px rgba(0,0,0,0.08);transform:translateY(-1px);}
.hh-badge{position:absolute;bottom:10px;right:50px;background:#e65100;color:#fff;font-size:0.75em;padding:2px 8px;border-radius:3px;z-index:2;font-family:Montserrat;pointer-events:none;}
#category .hh-badge{bottom:0px;right:10px;font-size:0.65em;padding:1px 5px;}
#item li.item:not(.soldout):after{content:'+';position:absolute;bottom:8px;right:8px;width:28px;height:28px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:normal;color:#333;box-shadow:0 2px 6px rgba(0,0,0,0.15);}
@media only screen and (min-width: 992px){
#item li.item{width:46%;display:inline-block;margin:12px;}
}
#item li.soldout:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.55);z-index:1;border-radius:10px;}
#item li.soldout:after{content:'SOLD OUT';position:absolute;top:12px;right:12px;
background:#e53935;
color:#fff;
padding:6px 16px;
border-radius:999px;
letter-spacing:1.5px;
font:600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
white-space:nowrap;
box-shadow:0 2px 8px rgba(229,57,53,0.4);
z-index:2;
}
#item li.noimg img{position:absolute;right:0;top:0;width:176px;height:142px;}
#item li.img img{position:absolute;right:0px;top:0;width:176px;height:144px;background-color:#c8c8c8;background-size:cover;background-repeat:no-repeat;background-position:center center;}
#item li p{position:absolute;left:14px;top:20px;padding:0;height:63px;overflow:hidden;text-overflow:ellipsis;width:calc(100% - 250px);font-family:Roboto, sans-serif;color: #626464;}
#item li b.p{position:absolute;left:14px;bottom:10px;}
#item li b.n{position:absolute;left:20px;top:10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
#custom{padding-left:28px;margin-bottom:24px;}
@media only screen and (min-width:992px){
#item li.img img{width:40%;}
#item li p{width:54%;}
#custom{border-left: 1px solid #eee;}
}
#custom h5{text-align:center; font-weight:bolder;}
#dinein{width:224px;height:48px;border:1px solid #c22c27;position:relative;margin:20px auto 30px auto;text-align:center;line-height:48px;cursor:pointer;display:none;}
/* soft pill order-type buttons; flex keeps the label centered with or without the clock icon */
#pickup{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:224px;height:48px;border:1px solid rgba(194,44,39,.35);background:#fdf3f2;position:relative;margin:20px auto 30px auto;cursor:pointer;border-radius:14px;transition:background .15s,border-color .15s,box-shadow .15s;}
#pickup:hover{background:#fbe9e7;box-shadow:0 2px 8px rgba(194,44,39,.12);}
#pickup b{position:static;width:auto;height:auto;line-height:1;text-align:center;color:#c22c27;font-weight:700;letter-spacing:.02em;}
#pickup i{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;line-height:30px;border-radius:10px;background:#fff;border:1px solid rgba(194,44,39,.45);color:#c22c27;text-align:center;font-size:19px;box-sizing:border-box;}
/* order-type nudge: with items in the cart but no order type picked (body.needot, set in
menu.js) the greyed checkout stays tappable, and a tap pulses the unselected pills */
body.needot #checkout.disabled{pointer-events:auto;cursor:pointer;}
@keyframes otpulse{0%,100%{box-shadow:0 0 0 0 rgba(194,44,39,0);}40%{box-shadow:0 0 0 7px rgba(194,44,39,.35);}}
body.otnudge #pickup:not(.on),body.otnudge #delivery:not(.on){animation:otpulse .7s ease 2;}
#delivery{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:224px;height:48px;border:1px solid rgba(194,44,39,.35);background:#fdf3f2;position:relative;margin:20px auto 20px auto;cursor:pointer;border-radius:14px;transition:background .15s,border-color .15s,box-shadow .15s;}
#delivery:hover{background:#fbe9e7;box-shadow:0 2px 8px rgba(194,44,39,.12);}
#delivery b{position:static;width:auto;height:auto;line-height:1;text-align:center;color:#c22c27;font-weight:700;letter-spacing:.02em;}
#delivery i{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;line-height:30px;border-radius:10px;background:#fff;border:1px solid rgba(194,44,39,.45);color:#c22c27;text-align:center;font-size:19px;box-sizing:border-box;}
#list{padding-top:0;padding-bottom:0;margin-bottom:20px;}
#list li{padding:12px 0;border-top:1px solid #eee;}
#list li:first-child{border-top:none;}
#list li b{display:inline-block;font-weight:normal;}
#list li b.n{text-align:left;}
#list li .mainname{color:#1a1a1a;font-weight:600;}
#list li .modname{font-size:0.8em;color:#888;padding-left:2px;line-height:1.5;}
#list b.e{color:#c22c27;margin:10px 20px 0 0;display:inline-block;font-size:0.9em;font-family:Montserrat;cursor:pointer;}
/* Cart row layout: name on left (spans 2 rows), price top-right,
stepper [-] {q} [+] below price. Implemented with CSS Grid; the
existing .col classes are neutralized since grid takes precedence and
we explicitly override widths/padding. b.q stays a direct child of
so all the existing li.children('.q') / li.children('.p') JS
callsites keep matching. */
/* Fixed widths for the stepper columns so column 1 (1fr, the name) starts at
the same x across every — auto-sized stepper columns made shorter rows
shift horizontally because b.p (spanning cols 2-4) influenced the auto track
sizing inconsistently between rows with different price/name widths. */
#list li.cust{display:grid !important;grid-template-columns:1fr 27px 29px 27px;grid-template-rows:auto auto;column-gap:0;row-gap:8px;padding:12px 8px;align-items:start;}
#list li.cust > .n{grid-column:1;grid-row:1 / 3;align-self:start;justify-self:stretch;width:90%;padding:0 8px 0 0;height:auto;text-align:left;}
#list li.cust > .n > b.c,#list li.cust > .n > .c{display:block;width:100%;text-align:left;font-size:.72em;color:#999;font-weight:normal;}
#list li.cust > .n > .mainname{display:block;text-align:left;}
#list li.cust > b.p{grid-column:2 / 5;grid-row:1;text-align:right;font-weight:bold;padding:0;height:auto;width:auto;align-self:start;}
/* Prepend "$" to cart-row prices via a pseudo-element so the underlying text
stays a plain number — Number($(this).children('.p').text()) and similar
calls (menu.js:6268, 4970, 5006, etc.) keep parsing correctly. */
#list li.cust > b.p::before{content:"$";}
/* Cart quantity stepper: [−][q][+] rendered as one connected pill, right-aligned
on row 2 beside the bottom of the name/modifiers (name spans rows 1-2).
b.r and b.a keep full borders (rounded on the outside); b.q only has
top/bottom borders, so the neighbors' inner edges serve as the vertical
dividers between segments. */
#list li.cust > b.r,#list li.cust > b.q,#list li.cust > b.a{grid-row:2;height:28px;background:#fff;display:inline-flex !important;align-items:center;justify-content:center;box-sizing:border-box;align-self:center;padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;}
#list li.cust > b.r,#list li.cust > b.a{cursor:pointer;color:#333;font-size:15px;font-weight:600;line-height:1;border:1px solid #e3e3e3;transition:background-color .15s;}
#list li.cust > b.r{grid-column:2;border-radius:14px 0 0 14px;}
#list li.cust > b.q{grid-column:3;font-weight:600;color:#1a1a1a;min-width:29px;font-size:13px;}
#list li.cust > b.a{grid-column:4;border-radius:0 14px 14px 0;}
#list li.cust > b.r:hover,#list li.cust > b.a:hover{background:#ececec;}
/* Pay-mode override: when #checkout has class .po (added by the checkout-click
handler at menu.js:2872), restore a single-row [q] [name] [price] layout —
the user can no longer modify quantities once they've clicked Checkout, and
the +/- buttons are already hidden via $('#list b.a,#list b.r').hide() in JS. */
#custom:has(#checkout.po) #list li.cust{grid-template-columns:auto 1fr auto;grid-template-rows:auto;column-gap:8px;row-gap:0;padding:10px 8px;}
#custom:has(#checkout.po) #list li.cust > b.q{grid-column:1;grid-row:1;font-weight:600;color:#333;min-width:24px;text-align:left;padding-right:4px;border:none;background:transparent;height:auto;}
#custom:has(#checkout.po) #list li.cust > .n{grid-column:2;grid-row:1;}
#custom:has(#checkout.po) #list li.cust > b.p{grid-column:3;grid-row:1;text-align:right;font-weight:bold;}
#custom:has(#checkout.po) #list li.cust > b.r,#custom:has(#checkout.po) #list li.cust > b.a{display:none !important;}
#list b.c{opacity:.7;display:block;width:100%;text-transform:uppercase;font-size:0.9em;font-family:Montserrat}
#list b.cnote{opacity:.7;display:block;width:100%;font-size:0.9em;font-family:Montserrat}
#list b.hh-cart{display:block;width:100%;font-size:0.85em;color:#e65100;font-family:Montserrat}
#invmsg .modal-content{position:relative;height:100%}
#msg .modal-content{position:relative;height:100%}
#msg .mylist{margin-bottom:10px;}
#msg .mylist li{padding:9px 0;border-top:1px dashed #999;width:100%;font-size:0.9em;line-height:20px;margin-top:10px;}
#msg .mylist li b{display:inline-block;font-weight:normal;text-align:left;}
#msg .mylist li b.q{text-align:center;height:100%;padding-top:20px;font-weight:bold;}
#msg .mylist li b.p{text-align:right;padding-right:10px;height:100%;padding-top:20px;font-weight:bold;}
#msg .mylist li div.n{text-align:left;}
#msg .mylist li .mainname{color:#000;font-weight:bold;}
#msg .mylist li .modname{font-size:0.8em;opacity:0.6;font-family:Open Sans;}
#msg .mylist b.e{color:#c22c27;margin:10px 20px 0 0;display:inline-block;font-size:0.9em;font-family:Montserrat;cursor:pointer;}
#msg .mylist b.r{color:#c22c27;margin-top:10px;margin-right:10px;display:inline-block;font-size:0.9em;font-family:Montserrat;cursor:pointer;}
#msg .mylist b.r i{font-size:1.2em;margin:2px;}
#msg .mylist b.a{color:#c22c27;margin-top:10px;display:inline-block;font-size:0.9em;font-family:Montserrat;cursor:pointer;}
#msg .mylist b.a i{font-size:1.2em;margin:2px;}
#msg .mylist b.c{opacity:.7;display:block;width:100%;text-transform:uppercase;font-size:0.9em;font-family:Montserrat}
#msg .mylist b.cnote{opacity:.7;display:block;width:100%;font-size:0.9em;font-family:Montserrat}
#olist{padding-top:20px;padding-bottom:0;margin-bottom:60px;font-size:1.1em;}
#olist span{display:block;padding:9px 0;border-top:1px dashed #999;width:100%}
#olist span b{display:block;font-weight:normal;}
#olist span b.q{text-align:center;height:100%;padding-top:20px;font-weight:bold;}
#olist span b.p{text-align:right;padding-right:10px;height:100%;padding-top:20px;font-weight:bold;}
#olist span b.n{text-align:left;}
#olist span .mainname{color:#000;font-weight:bold;}
#olist span .modname{font-size:0.9em;opacity:0.6;font-family:Open Sans;}
#olist b.c{opacity:.7;display:block;width:100%;text-transform:uppercase;font-size:0.9em;font-family:Montserrat}
#olist b.cnote{opacity:.7;display:block;width:100%;font-size:0.9em;font-family:Montserrat}
#oadd{display:inline-block;padding:18px 38px;background:#333;color:#fff;border-radius:12px;margin-top:30px;font-family:Montserrat;width:100%;}
#oadd:hover{background:#c22c27}
/* the cart/receipt sits in its own card, visually separate from the order-type pills */
#cartcard{background:#fff;border:1px solid #ececec;border-radius:14px;padding:6px 14px 12px;margin:4px 0 16px;box-shadow:0 1px 4px rgba(0,0,0,.05);}
#cartcard:after{content:'';display:block;clear:both;} /* contain the floated EMPTY CART button */
#empty{text-align:center;font-weight:normal;color:#667085;font-size:.9rem;line-height:1.5;margin:26px 0 18px;}
#emptyicon{display:flex;width:72px;height:72px;margin:0 auto 14px;background:#f2f2f4;border-radius:99px;align-items:center;justify-content:center;color:#98a2b3;}
#emptyicon svg{width:32px;height:32px;}
#empty b{display:block;color:#1a1a1a;font-size:1.05rem;font-weight:700;margin-bottom:2px;}
#sum{display:none;margin-top:0px;}
#sum li{position:relative;height:48px;line-height:48px;border-top:1px solid #eee;white-space:nowrap;}
/* desktop: the receipt card is a narrow column — scale type and rows down to match */
@media only screen and (min-width:993px){
#cartcard{font-size:.85rem;}
#cartcard #sum li{height:38px;line-height:38px;}
}
#sum li b{position:absolute;left:0;right:100px;text-align:left;font-weight:normal;}
/* Prepend "$" to every summary value (subtotal, tax, discount, delivery fee,
tip, total, etc.). The numeric value lives in the `v` attribute on each
, not in text — so JS reads/writes ($('#sub').attr('v', ...)) are
unaffected. CSS just renders "$" + attr(v) visually. */
#sum li:after{position:absolute;content:"$" attr(v);right:0px;text-align:right;font-weight:normal;}
/* Only the Total row is bold — label and value. */
#sum li#total,#sum li#total:after,#sum li#total b{font-weight:bold;}
#tip{display:none}
#discount{display:none}
#checkout{background:#c22c27;color:#fff;font-weight:bold;height:48px;line-height:48px;position:relative;padding:0 20px;text-align:left;cursor:pointer;border-radius:14px;width:224px;max-width:none;box-sizing:border-box;margin:20px auto;}
#checkout.disabled{opacity:0.5;pointer-events:none;}
#checkout:after{content:attr(v);position:absolute;right:20px;}
#po2{position:relative;text-align:center;}
#po2:after{content:attr(v);}
#checkout img{width:40px;height:40px;margin-left:calc(50% - 20px);vertical-align:middle;}
#notice{text-align:center;background:#c22c27;color:#fff;width:224px;margin:14px auto;padding:10px 0;display:none;border-radius:14px;}
#msg{transform:translateY(-8%) !important;border-radius:10px;}
/* #msg .msgimg{margin:20px 0;width:calc(100% - 20px);height:350px;background-color:#f2f2f0;border:1px solid #000;border-radius:4px;background-size:cover;background-repeat:no-repeat;background-position:center center;} */
#msg .msgimg{margin:20px 0;/*width:calc(100% - 20px);*/height:350px;background-color:#f2f2f0;/*border:1px solid #000;*/border-radius:8px;background-size:cover;background-repeat:no-repeat;background-position:center center;}
#msg img.msgimg{width:300px;height:300px;background-color:#c8c8c8;background-size:cover;background-repeat:no-repeat;background-position:center center;
}
#msg a.btn{background-color:#f2f2f0;color:#000;}
#msg a.checked{background-color:#fad34f;color:#000;}
#msg .mainname{font-weight:normal;color:black;}
#msg .jcollapsible-body{margin:0;padding:0 0 5px 20px;border:none;display:block !important;}
/* #msg .collapsible-body{margin:0;padding:5px 0 5px 20px;border:none;display:block !important;} */
#msg .cnote{display:;}
#msg .cdesc{display:;}
#msg td{padding:5px 5px;vertical-align:top;}
#msg td.q{text-align:center;width:80px;}
#msg td.n{width:calc(100% - 170px);}
#msg td.p{text-align:right;padding-right:25px;width:90px;}
.desc{margin:0px;width:calc(100% - 20px);text-align:left;}
#msg .modal-content{position:relative;height:100%}
#msg .modal-footer{height:83px;padding:9px 5px;}
#msg a.check{margin:0 100px;}
#msg a.close{margin:0 100px;}
#msg a.timer{width:100%;text-align:center;display:none;}
#msg a.send{margin-top:-50px;margin-left:50px;height:80px;line-height:80px;}
#msg a.cancel{margin-top:-50px;margin-right:50px;height:80px;line-height:80px;}
#msg li:not(.collapsible li){display:block;float:left;margin-top:20px;font-size:20px;width:90px;line-height:60px;text-align:center;}
/* #finalmodlist{
margin-bottom: 5rem !important;
width:50%;
margin:auto;
}
#finalmodlist .modifier-header{
text-align: center;
}
#finalmodlist li{
width: 100% !important;
line-height: 10px !important;
margin: .25rem 0 !important;
font-weight: normal !important;
font-size: 1rem !important;
text-align: center !important;
} */
#finalmodlist::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #222, #222);
border-radius: 16px 16px 0 0;
}
.modifier-header {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #222;
display: flex;
align-items: center;
gap: 8px;
}
.modifier-header::before {
content: '🎯';
font-size: 16px;
}
.header-group{
width:100% !important;
}
.group-header{
text-align:left;
}
#finalmodlist {
background: linear-gradient(135deg, #fff 0%, #fff 100%);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 20px;
margin: 16px 0;
position: relative;
width: 100% !important; /* Ensure full width */
margin-bottom: 32px;
}
#finalmodlist ul {
list-style: none;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px;
width: 100% !important;
float: none !important;
margin-left: 0 !important;
}
#finalmodlist li {
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px !important;
color: #475569;
transition: all 0.2s ease;
cursor: nones;
position: relative;
line-height:18px !important;
/* Dynamic width adjustments */
flex: 0 0 auto; /* Don't grow or shrink, auto width */
min-width: fit-content; /* Minimum width based on content */
max-width: 100%; /* Don't exceed container width */
width: auto; /* Let content determine width */
/* Text handling */
white-space: nowrap; /* Keep text on one line */
overflow: hidden; /* Hide overflow if needed */
text-overflow: ellipsis; /* Add ... for very long text */
}
/* For very long text, allow wrapping within the card */
@media (max-width: 768px) {
#finalmodlist li {
white-space: normal; /* Allow text wrapping on small screens */
word-break: break-word; /* Break long words if needed */
min-width: 80px; /* Minimum width on mobile */
font-size: 10px !important;
}
#finalmodlist ul.group-items li {
white-space: normal; /* Allow text wrapping on small screens */
word-break: break-word; /* Break long words if needed */
min-width: 100px; /* Minimum width on mobile */
font-size: 12px !important;
font-weight:bold;
}
}
/* Empty state styling */
#finalmodlist:empty::after {
content: 'No modifiers selected';
color: #9ca3af;
font-style: italic;
font-size: 14px;
text-align: center;
display: block;
padding: 20px;
}
#msg a.subitem{display:block;float:left;margin:30px 10px;border:1px solid #999;min-height:150px;position:relative;color:#000;cursor:pointer;overflow:hidden;}
#msg a.subitem.soldout{background-color:#E0E0E0;}
#msg a.subitem.soldout:after{content:'Sold Out';position:absolute;top:30px;right:-40px;width:160px;padding:0.3em;
border:2px rgba(255,255,255,0.7) dashed;
background-color:#A00;
color:#fff;
display:block;
text-align:center;
text-decoration:none;
letter-spacing:.09em;
text-shadow:0 0 0.75em #444;
box-shadow:0 0 0.5em rgba(0,0,0,0.5);
font:bold 14px/1.2em Arial, Sans-Serif;
-webkit-transform:rotate(45deg) scale(0.85,1);
transform:rotate(45deg) scale(0.85,1);
z-index:1;}
#msg b.subname{position:absolute;top:5px;left:5px;}
#msg b.subprice{position:absolute;bottom:5px;left:5px;}
/* Center #msg modal vertically for subitem selection, item-add, and modifier flows only.
Scoped via :has() so other #msg uses (announcements, qrm, address, etc.) keep default position. */
#msg:has(.subitemrow),
#msg:has(#popA),
#msg:has(#fancyA){top:50% !important;transform:translateY(-50%) !important;}
/* Future-mode: subitem styled like #itemlist regular items, 2 columns */
#msg .subitemrow{padding-top:30px;}
#msg .fancyclose .material-icons{font-size:24px;}
#msg a.item.subitem{display:inline-block;float:left;vertical-align:top;width:calc(50% - 16px);min-height:120px;height:120px;margin:8px;padding:0;border:1px solid #ccc;border-radius:10px;background:#fff;color:#000;cursor:pointer;position:relative;overflow:hidden;box-sizing:border-box;}
#msg a.item.subitem:hover{background:#fff;}
#msg a.item.img.subitem img{position:absolute;right:0;top:0;bottom:0;width:120px;height:100%;background-color:#c8c8c8;background-size:cover;background-repeat:no-repeat;background-position:center center;}
#msg a.item.noimg.subitem img{display:none;}
#msg a.item.subitem b.n,#msg a.item.subitem b.n2{position:absolute;left:8px;right:128px;top:10px;font-size:1em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2em;max-height:2.4em;word-wrap:break-word;}
#msg a.item.noimg.subitem b.n,#msg a.item.noimg.subitem b.n2{right:8px;}
#msg a.item.subitem b.p{position:absolute;left:8px;bottom:6px;color:#626464;}
#msg a.item.subitem p{position:absolute;left:8px;top:40px;line-height:1.1;padding:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;width:calc(100% - 140px);font-family:Open Sans;color:#626464;margin:0;font-size:0.85em;}
#msg a.item.noimg.subitem p{width:calc(100% - 16px);}
#msg a.item.subitem.soldout:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.55);z-index:1;border-radius:10px;}
#msg a.item.subitem.soldout:after{content:'SOLD OUT';
position:absolute;
top:50%;
left:50%;
right:auto;
width:auto;
height:auto;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:#e53935;
color:#fff;
padding:7px 18px;
border:none;
border-radius:999px;
letter-spacing:1.5px;
font:600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
text-shadow:none;
box-shadow:0 2px 6px rgba(229,57,53,0.35);
white-space:nowrap;
z-index:2;}
@media only screen and (max-width:600px){
#msg a.item.subitem{width:calc(100% - 12px);margin:6px;min-height:90px;height:90px;float:none;display:block;}
#msg a.item.img.subitem img{width:90px;height:100%;}
#msg a.item.subitem b.n,#msg a.item.subitem b.n2{right:98px;font-size:0.9em;}
#msg a.item.subitem p{width:calc(100% - 110px);}
}
#popA.disabled{opacity:0.5;pointer-events:none;}
/* Raise this item modal (and its overlay) above third-party fixed widgets (e.g. UserWay accessibility menu)
so the bottom action bar isn't covered by them. Scoped to item-add and item-with-modifiers modals only.
Steps aside when #nestedmsg is open so the nested modifier modal can sit on top. */
body:not(:has(#nestedmsg.open)) #msg.open:has(#popA),
body:not(:has(#nestedmsg.open)) #msg.open:has(#fancyA){z-index:2147483647 !important;}
body:not(:has(#nestedmsg.open)):has(#msg.open #popA) .modal-overlay,
body:not(:has(#nestedmsg.open)):has(#msg.open #fancyA) .modal-overlay{z-index:2147483646 !important;}
/* When the nested modifier modal is open, lift it (and its overlay) above third-party widgets too. */
#nestedmsg.open{z-index:2147483647 !important;}
body:has(#nestedmsg.open) .modal-overlay{z-index:2147483646 !important;}
/* Compact, modern action bar (DoorDash-style): quantity stepper + add-to-cart button on one line with a top border.
Scoped via :has() to rows that contain #popA or #fancyA, so other rows are untouched. */
#msg .row:has(#popA),
#msg .row:has(#fancyA){display:flex !important;align-items:center;gap:12px;margin:1rem -24px 0 !important;padding:12px 24px;border-top:1px solid #e0e0e0;background:#fff;position:sticky;bottom:0;z-index:2;}
/* Remove modal-content's bottom padding for these modals so the sticky bar sits flush at the bottom (no whitespace gap below it when scrolled to the end). */
#msg:has(#popA) .modal-content,
#msg:has(#fancyA) .modal-content{padding-bottom:0;}
#msg .row:has(#popA) > .col,
#msg .row:has(#fancyA) > .col{padding:0;margin:0;float:none;width:auto;}
#msg .row:has(#popA) .edit-quantity,
#msg .row:has(#fancyA) .edit-quantity{flex:0 0 auto;margin-bottom:0;}
#msg .row:has(#popA) > .col.center,
#msg .row:has(#fancyA) > .col.center{flex:1 1 auto;min-width:0;}
/* Hide the
separator that immediately precedes the action bar (we use border-top now). */
#msg hr:has(+ .row:has(#popA)),
#msg hr:has(+ .row:has(#fancyA)){display:none;}
#fancyM,#popM,#fancyP,#popP{display:inline-flex;align-items:center;color:#000;user-select:none;cursor:pointer;padding:0;float:none;}
#fancyM .material-icons,#popM .material-icons,#fancyP .material-icons,#popP .material-icons{font-size:24px;}
#fancyq,#popq{display:inline-block;vertical-align:middle;margin:0 8px;font-size:1em;min-width:18px;text-align:center;cursor:default;float:none;}
#fancyA,#popA{display:block;width:100%;padding:11px 18px;text-align:center;background:#c22c27;color:#fff;border-radius:999px;font-size:0.95em;font-weight:600;cursor:pointer;box-sizing:border-box;}
#fancyA:hover,#popA:hover{background:#a82420;}
.row .col.s6{padding:0 10px 10px 0;}
.row .edit-quantity{justify-content:center;display:flex;margin-bottom:20px;}
#pop{height:100%}
#pop .indicator-item{background-color:rgba(10,10,10,0.5);}
#pop .indicator-item.active{background-color:rgba(0,0,0,1);}
#pop ul{bottom:100px;z-index:2;}
#pop ul li{height:20px;width:20px;float:none;display:inline-block;}
#pop ul.collapsible li{width:100%;height:100%;border-radius:10px}
#pop ul.collapsible li .option{text-align:left !important;font-size:.9em !important;}
#pop ul.collapsible li b{font-size: 14px;}
#pop ul.collapsible .group{margin:0}
@media (max-width: 768px) {
#pop ul.collapsible li .option{font-size:.75em !important;}
#pop ul.collapsible li b{font-size: 12px;}
}
#pop .popimg{margin:20px 0;/*width:calc(100% - 20px);*/height:350px;background-color:#f2f2f0;/*border:1px solid #000;*/border-radius:8px;background-size:cover;background-repeat:no-repeat;background-position:center center;}
#pop img.popimg{width:300px;height:300px;background-color:#c8c8c8;background-size:cover;background-repeat:no-repeat;background-position:center center;
}
/* sticky item title bar: spans the modal-content padding, X rides inside it */
#pop h5{position:sticky;top:-1px;z-index:40;background:#fff;margin:-24px -24px 10px;padding:16px 60px 12px 24px;border-bottom:1px solid #eee;}
#pop h5 .fancyclose{top:50%;transform:translateY(-50%);right:16px;}
#pop .group p{padding:0;margin:0;margin-top:2px;}
#pop .group{margin:10px 0;}
#pop .group b{font-weight:bold;}
#pop .group .row{margin:10px 0px;}
#pop .group .option{margin:2px;width:100%;min-height:60px;float:left;line-height:1;position:relative;font-size:0.9em;padding:5px 35px 3px 5px;border:1.5px solid #aaa;border-radius:10px;}
#pop .group .option.moption:after{position:absolute;right:9px;top:3px;font-size:24px;color:red;text-shadow:1px 1px #fff;line-height:1;text-align:center;content:attr(v);}
#pop .option u{position:absolute;right:20px;bottom:5px;background:#c62828;width:69px;height:30px;z-index:-1;color:#fff;display:none;text-decoration:none;line-height:30px;text-align:center;font-size:1.2em;border-radius:10px;}
#pop .option a.del{position:absolute;right:70px;bottom:5px;color:#fff;background:#b71c1c;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;display:none;}
#pop .option a.del:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e15b';color:#fff;text-align:center;width:100%;line-height:30px;}
#pop .option.checked{
background:#eee;
border: 2px solid #222;
}
#pop .option a.on{position:absolute;right:10px;bottom:5px;color:#fff;background:#222;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;}
#pop .option a.on:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e876';text-align:center;width:100%;line-height:30px;}
#pop .option a.off{position:absolute;right:10px;bottom:5px;color:#fff;background:#b71c1c;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;}
#pop .option a.off:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e145';color:#fff;text-align:center;width:100%;line-height:30px;}
#pop .option a.qty{position:absolute;right:10px;bottom:5px;color:#fff;background:#b71c1c;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;}
#pop .option a.qty:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e145';color:#fff;text-align:center;width:100%;line-height:30px;}
#pop .option a.off.disabled{background:#ffcdd2;pointer-events:none;}
#pop .option a.qty.disabled{background:#ffcdd2;pointer-events:none;}
#pop .option a.disabled{opacity:0.5;pointer-events:none;}
#pop .option b{position:absolute;top:5px;right:5px;font-size:0.8em;line-height:1;font-weight:normal;}
#pop .option img{display:block;width:calc(100% + 42px);height:110px;object-fit:cover;margin:-6px -36px 5px -6px;background-color:#f2f2f2;}
/* uniform modifier tiles in groups where some or all options have images */
#pop .group .row:has(.option img) .option{height:172px;overflow:hidden;}
#pop .group .row:has(.option img) .option:not(:has(img))::before{content:'restaurant';font-family:'Material Icons';display:block;height:110px;line-height:110px;text-align:center;font-size:40px;color:#ccc;background:#f5f5f5;margin:-6px -36px 5px -6px;}
#pop .group .row:has(.option img) .option b{top:4px;right:4px;background:rgba(255,255,255,.92);padding:3px 6px;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.2);}
#pop .group .row:has(.option img) .option.moption:after{left:6px;right:auto;top:4px;background:rgba(255,255,255,.92);border-radius:6px;padding:1px 6px;}
#pop a b{position:absolute;bottom:5px;right:5px;font-size:0.8em;line-height:1;font-weight:normal;}
#pop a img{max-height:100px;width:100%;}
#sp{display:block;height:80px;margin-bottom:30px;margin-top:30px;border:1px solid black; border-radius:10px;padding:10px}
#sp input{margin:0 10px;width:calc(100% - 20px);border:none;}
.thumblogo{height:200px;background-size:contain;background-color:#666;background-repeat:no-repeat;background-position:center center;margin:10px 0px;box-sizing:border-box;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .25s,box-shadow .25s;cursor:zoom-in;}
.thumbqr{height:200px;background-size:contain;background-color:#fefefe;background-repeat:no-repeat;background-position:center center;margin:10px 0px;box-sizing:border-box;border:1px solid #eee;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.08);transition:transform .25s,box-shadow .25s;cursor:zoom-in;}
.thumb{height:200px;background-size:cover;background-position:center center;margin:10px 0px;box-sizing:border-box;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .25s,box-shadow .25s;cursor:zoom-in;}
.thumb:hover:not(.active),.thumblogo:hover:not(.active),.thumbqr:hover:not(.active){transform:translateY(-4px) scale(1.02);box-shadow:0 10px 24px rgba(0,0,0,.18);}
.thumb.active,.thumblogo.active,.thumbqr.active{border-radius:0;box-shadow:none;cursor:zoom-out;}
#delivery.off{background:#f7f7f8;border:1px solid #e2e2e6;}
#delivery.off b{color:#9a9aa2;}
#delivery.off i{background:#fff;border-color:#d5d5da;color:#9a9aa2;}
/* selected schedule renders as a small second line inside the pill (flex column child) */
#pickup:after{content:attr(v);position:static;font-size:.72em;font-weight:600;color:#c22c27;line-height:1.1;text-align:center;}
#delivery:after{content:attr(v);position:static;font-size:.72em;font-weight:600;color:#c22c27;line-height:1.1;text-align:center;}
#pickup.off:after,#delivery.off:after{color:#9a9aa2;}
/* no schedule selected: drop the pseudo entirely so the flex gap doesn't nudge the label off-center */
#pickup:not([v]):after,#pickup[v='']:after,#delivery:not([v]):after,#delivery[v='']:after{display:none;}
#pickup.off{background:#f7f7f8;border:1px solid #e2e2e6;}
#pickup.off b{color:#9a9aa2;}
#pickup.off i{background:#fff;border-color:#d5d5da;color:#9a9aa2;}
/* delivery address chooser — mirrors the #time picker (overlay, card, header, close chip, scroll lock) */
#addr{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);display:none;z-index:1001;border-radius:0;}
#addr h6{padding:18px 20px 6px;font-weight:bold;font-size:1rem;color:#222;margin:0;background:transparent;height:auto;line-height:normal;border-radius:0;}
#alist{min-height:0;max-height:32vh;overflow-y:auto;padding:2px 20px 6px;}
#addr .addr{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:480px;max-width:calc(100% - 20px);max-height:85vh;background:#fff;border:none;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden auto;display:flex;flex-direction:column;}
#geo{display:flex;align-items:center;margin:6px 20px 20px;height:40px;padding-left:34px;border:1px solid #d5d9e0;position:relative;border-radius:10px;}
#geo i{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:#98a2b3;font-size:20px;}
#geo input{border:none !important;box-shadow:none !important;height:38px;width:100%;flex:1;margin:0;font-size:.95rem;}
#addr .addr .row{margin:0;text-align:left;}
#addr h6{text-align:left;}
/* google places autocomplete dropdown must float above the modal (z-index 1001) */
.pac-container{z-index:1003 !important;}
#faraddr{margin:10px 20px;display:none;color:#b71c1c;background:#fdf1f1;border-radius:10px;padding:2px 14px;font-size:.92em;}
#addaddr{margin:10px 20px 22px;display:none;}
#addaddr:after{content:'';display:block;clear:both;} /* contain the floated Cancel/Save so the bottom margin applies */
#apt{margin:10px auto;height:46px;}
#apt input{border:1px solid #d5d9e0;height:46px;padding:0 14px;box-sizing:border-box;border-radius:10px;margin:0;}
#addr i.close{position:absolute;top:12px;right:12px;z-index:1;cursor:pointer;color:#333;background:#f2f2f4;border-radius:99px;padding:5px;font-size:24px;}
#addr textarea{border:1px solid #d5d9e0;height:88px;padding:10px 14px;box-sizing:border-box;border-radius:10px;}
#cnote{margin:10px auto;height:99px;}
#addcancel{width:48%;text-align:center;background:#f2f2f4;font-weight:600;float:left;height:44px;line-height:44px;color:#333;border-radius:10px;cursor:pointer;}
#addsave{width:48%;text-align:center;font-weight:600;background:#c22c27;color:#fff;float:right;height:44px;line-height:44px;border-radius:10px;cursor:pointer;}
#alist li{min-height:44px;line-height:1.35;overflow:hidden;position:relative;padding:11px 12px 11px 44px;margin:6px 0;border:1px solid #e3e3e3;border-radius:10px;cursor:pointer;display:flex;align-items:center;transition:border-color .15s,background-color .15s;}
#alist li:hover{border-color:#c22c27;}
#alist li.on{border-color:#c22c27;background:#fdf3f2;}
#alist li.on:before{content:'adjust';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:material icons;font-size:1.5em;color:#c22c27;}
#alist li.off:before{content:'radio_button_unchecked';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:material icons;font-size:1.5em;color:#98a2b3;}
#alist li i{margin:0 4px 0 auto;color:#98a2b3;}
#time{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);display:none;z-index:1001;}
body.time-lock,html:has(> body.time-lock){overflow:hidden;} /* no background scrolling while the date/time picker is open */
#time h6{padding:18px 20px 6px;font-weight:bold;font-size:1rem;color:#222;margin:0;}
#dlist{padding:6px 20px 14px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;}
#dlist li{display:inline-block;width:56px;height:64px;border:1px solid #ddd;position:relative;margin:0 6px 0 0;border-radius:12px;cursor:pointer;transition:border-color .15s,background-color .15s;}
#dlist li:hover{border-color:#999;}
#dlist li.on{border-color:#c22c27;background:#c22c27;}
#dlist li.on:before{color:rgba(255,255,255,.85);}
#dlist li.on:after{color:#fff;}
#dlist li:before{position:absolute;top:9px;left:0;width:100%;content:attr(t);text-align:center;font-size:11px;color:#888;}
#dlist li:after{position:absolute;bottom:8px;left:0;width:100%;content:attr(n);text-align:center;font-size:1.25em;font-weight:bold;}
#time .time {
margin: 0 auto;
width: 480px;
/* fixed height: the modal must not resize as day/time selections change */
height: min(620px, 85vh);
min-height: 0;
max-height: 85vh;
background: #fff;
border: none;
box-shadow: 0 12px 40px rgba(0,0,0,.25);
position: relative;
flex: 0 1 auto;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
/* Hide scrollbar - Firefox */
scrollbar-width: none;
/* Hide scrollbar - IE/Edge */
-ms-overflow-style: none;
}
/* Hide scrollbar - Chrome/Safari/Opera */
#time .time::-webkit-scrollbar {
display: none;
}
#time i.close{position:absolute;top:12px;right:12px;z-index:1;cursor:pointer;color:#333;background:#f2f2f4;border-radius:99px;padding:5px;font-size:24px;}
#timedate{flex-shrink:0;}
#time .time > div:nth-of-type(2){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
#timeh2,#timetoggle,#closeMsg{flex-shrink:0;}
#timetoggle{display:flex;gap:8px;margin:10px 20px 0;}
#laters{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#asap,#later{flex:1;margin:0;width:auto;height:40px;line-height:40px;float:none;text-align:center;border-radius:99px;cursor:pointer;font-size:.95em;transition:background-color .2s,color .2s;}
#asap.disabled{opacity:0.45;pointer-events:none;}
#asap.on{background:#c22c27;color:#fff;}
#later.on{background:#c22c27;color:#fff;}
#asap.off{background:#f2f2f4;color:#333;border:none;}
#later.off{background:#f2f2f4;color:#333;border:none;}
#closeMsg{margin:12px 20px 0;display:none;background:#fdf1f1;color:#b71c1c;border-radius:10px;padding:2px 14px;font-size:.92em;}
#closeMsg p{margin:8px 0;}
#maxMsg{margin:10px 50px;display:none;font-weight:bold;}
#laters{margin:8px 16px 0;display:none;padding-bottom:16px;}
#laters li{border:1px solid #e3e3e3;text-align:center;cursor:pointer;height:40px;line-height:38px;float:left;width:calc(25% - 8px);margin:4px;border-radius:10px;font-size:.92em;transition:border-color .15s,color .15s,background-color .15s;}
#laters li:hover{border-color:#c22c27;color:#c22c27;}
#laters li.on{background:#c22c27;color:#fff;border-color:#c22c27;}
#laters li.disabled{display:none}
#pay{display:none;padding:0 18px;}
#pay .pay{padding:18px;border-radius:10px;margin-bottom:32px;}
#pay input{border:1px solid #999;background:#fff;border-radius:3px;padding:0 20px;box-sizing:border-box;border-radius:10px;}
#pay input.disabled{border:1px solid #999;background:#eee;}
/* --- modern subtle refresh for checkout input fields (future theme, all widths) --- */
#pay input[type=text], #pay input[type=tel], #pay input[type=email], #pay input[type=password]{
border:1px solid #d5d9e0;
border-radius:10px;
height:40px;
padding:0 12px;
font-size:16px;
color:#1a1a1a;
background:#fff;
box-shadow:none;
transition:border-color .15s ease, box-shadow .15s ease;
}
#pay input.disabled{ background:#f2f4f7; border-color:#e4e7ec; color:#98a2b3; }
#pay input::placeholder{ color:#98a2b3; }
#pay input:focus:not([readonly]){
border:1px solid #000 !important;
box-shadow:0 0 0 3px rgba(0,0,0,.12) !important;
}
#pay .input-container input[type=text]{ padding-right:60px; } /* keep room for the Apply button */
#pay label{ font-size:.8rem; font-weight:500; }
/* required-field asterisk + legend (future theme) */
#pay .req-star{ color:#c22c27; font-weight:700; }
#pay .req-legend{ color:#98a2b3; font-size:.8rem; text-align:right; margin:8px 2px 0; }
/* required-field errors show on the input border, not a red label (future theme) */
#pay .sc-contact label.error{ color:#475467 !important; font-weight:500 !important; }
#pay .sc-contact label.error + input{ border-color:#c22c27 !important; box-shadow:0 0 0 3px rgba(194,44,39,.12) !important; }
/* mobile: each contact field gets its own full-width row */
@media (max-width:600px){ #pay .sc-contact .col.s6{ width:100%; } }
/* checkout screen title — mobile/tablet only (future theme); desktop layout already reads as checkout */
#pay .checkout-title{ font-size:1.35rem; font-weight:700; color:#1a1a1a; margin:2px 0 16px; text-align:center; }
@media (min-width:993px){ #pay .checkout-title{ display:none; } }
/* store name + address card at the top of the mobile checkout */
#pay .sc-store{ padding:14px 22px; }
#pay .sc-store .store-name{ display:block; font-weight:700; font-size:1.3rem; color:#1a1a1a; }
#pay .sc-store .store-addr{ color:#667085; font-size:.9rem; margin-top:2px; }
@media (min-width:993px){ #pay .sc-store{ display:none; } }
/* The checkout title renders in-content (above the store card); the #mobnav copy stays hidden.
(The JS .checkout class toggle on #mobnav remains but has no visual effect.) */
#mobnav #mobcheckout{ display:none !important; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
color:#fff; font-size:1.15rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; pointer-events:none; }
#pay .row{padding:0 20px;min-height:60px;}
#pay .error{color:#f00 !important;font-weight:bold;}
[type="radio"]+span{font-weight:bold;color:#000}
[type="radio"]:checked+span{font-weight:bold;color:#c22c27}
[type="radio"].with-gap+span:after{ background-color: #c22c27 !important; }
[type="radio"].with-gap:checked+span:after { background-color: #c22c27 !important; }
[type="radio"].with-gap:checked+span:before,
[type="radio"].with-gap:checked+span:after { border: 2px solid #c22c27 !important; }
[type="checkbox"].filled-in:checked+span:not(.lever):after{border:2px solid #c22c27;background-color:#c22c27;}
#pay .tip{display:flex;align-items:center;justify-content:center;float:left;border:1px solid #999;border-radius:10px;margin:5px;height:40px;line-height:1;text-align:center;background:#fff;position:relative;color:#000;box-sizing:border-box;}
/* tip row: flex grid with per-% amount preview under the percentage (future theme) */
#pay #tiprow{display:flex;flex-wrap:wrap;gap:8px;padding:0;}
#pay #tiprow .tip{float:none;margin:0;width:auto;flex:0 0 calc(16.66% - 7px);flex-direction:column;gap:2px;height:auto;min-height:46px;padding:6px 4px;}
#pay #tiprow .tip .tipamt{font-weight:400;font-size:.78rem;color:#98a2b3;line-height:1.2;}
#pay #tiprow #ctip{width:auto;flex:0 0 calc(16.66% - 7px);min-width:0;margin:0;height:auto;min-height:46px;padding:0 12px;box-sizing:border-box;text-align:left;}
/* cash tip + custom amount get their own row below the percent tips */
#pay #tiprow:has(#ctip)::after{content:'';order:1;flex-basis:100%;height:0;}
#pay #tiprow .tpcash,#pay #tiprow #ctip{order:2;}
@media (max-width:600px){
#pay #tiprow .tip, #pay #tiprow #ctip{flex-basis:calc(25% - 6px);} /* max 4 per row on mobile */
}
#pay .tip.on:after{position:absolute;top:2px;right:5px;font-family:material icons;content:'check_circle';line-height:1;color:#c22c27;font-size:1.5em;}
#ctip{display:block;float:left;margin:5px;border:1px solid #999;border-radius:3px;height:48px;line-height:48px;text-align:left;}
label.on{color:#c22c27;}
#pay a.p{margin:0 10px;font-weight:bold;border:1px solid #444;background:#fff;color:#000;border-radius:10px;line-height:33px;}
#pay a.p.on:not(#pgoogle){background:#c22c27;color:#fff;border:1px solid #c22c27}
.apple-pay-button {
display: inline-block;
-webkit-appearance: -apple-pay-button;
-apple-pay-button-type: plain;
-apple-pay-button-style: white-outline;
height:36px; position:relative; top:14px; margin-right:10px
}
/* match Google Pay button corner radius to the other payment types */
#pay #gpay-button-online-api-id, #pay .gpay-button, #pay .gpay-card-info-container{ border-radius:10px !important; }
/* center the injected GPay button (its ~40px height overflows the 36px materialize btn-flat) */
#pay #pgoogle{ display:flex; align-items:center; justify-content:center; float:none; height:auto; min-height:44px; line-height:normal; padding:0; }
/* wallet buttons: uniform size, each on its own row (Apple Pay under Google Pay) */
#pay #paymenttypes .gpay-button{ width:240px !important; min-width:0 !important; }
#pay #paymenttypes #papple.apple-pay-button{ display:block; float:none; clear:both; width:240px; max-width:90%; height:40px; margin:0 auto 15px; top:0; border-radius:10px; }
/* breathing room under the Payment header (extra class beats the generic section-card h5 rule later in the file) */
#pay .section-card.sc-pay > h5:first-child{ margin-bottom:16px; }
/* payment-type buttons: sentence case ("By card", "Gift card", "At store") instead of materialize ALL CAPS */
#pay .sc-pay a.p.btn-flat:not(#pgoogle){ text-transform:lowercase; }
#pay .sc-pay a.p.btn-flat:not(#pgoogle)::first-letter{ text-transform:uppercase; }
#ccer{display:none;background:#f5f5f5;padding:0 36px;}
#done{display:none;background:#f5f5f5;padding:0 36px;cursor:pointer;}
#confirm{position:relative;padding:50px 0;}
#confirm:after{content:attr(v);font-weight:bold;font-size:3em;}
#cftotal{display:inline-block;font-weight:bold;margin-bottom:10px;}
#result{display:none}
#pickupaddress{text-align:center;font-weight:bold;color:#fff;background-color:#c22c27;}
#maddress .maddress{list-style:none;width:90%;position:relative;cursor:pointer;margin:10px auto;padding:10px 50px 10px 10px;border:1px solid #999;border-radius:3px;}
#maddress .maddress:after{position:absolute;right:20px;top:0;content:'check_box_outline_blank';font-family:material icons;font-size:30px;}
#maddress .maddress.checked:after{content:'check_box';color:#c22c27;}
@media only screen and ( max-width:992px ){
#topBG{height:320px;}
#topbg{height:320px;}
#main{margin-top:60px !important;padding-top:30px;align-content:start;}
#profile{margin:30px !important;padding:0px;}
#mobmenu{color:#fff;width:55px;height:100%;padding-right:10px;position:absolute;right:2px;top:0;display:flex;align-items:center;justify-content:flex-end;}
}
@media only screen and ( max-width:600px ){
#custom{margin-top:0;padding-left:12px;padding-right:12px;}
/* checkout stays pinned above the viewport bottom while the cart scrolls (it's #custom's last child);
the ::before is a full-bleed solid bar behind it so cart content doesn't show around the button */
#checkout{position:sticky;bottom:12px;z-index:8;}
/* fixed strip layered between the cart content (z auto) and the pinned button (z 8);
clicks on it hit body, so covered cart rows aren't tappable */
body.chkbar:after{content:'';position:fixed;left:0;bottom:0;width:100%;height:72px;background:#fff;z-index:7;box-shadow:0 -2px 10px rgba(0,0,0,.08);}
#item .item{margin: 20px 10px;border-radius:20px 20px 0 0;}
pre{font-family:monospace,monospace;text-align:end;margin:5px 70px 0 0;}
.container{width:100%;padding-bottom:12px;}
#storeinformation{padding-left:20px;padding-top:20px;}
#storeinformation .material-icons{padding-left:20px;}
#address{padding-left:26px;margin-bottom:16px;}
#phone{padding-left:26px;margin-bottom:16px;}
#hoursbar{padding-left:26px;margin-top:0;}
#links{padding-left:6px;margin-top:16px;}
#aboutus{min-height:200px;background:rgba(250,250,250,0.5);padding:20px;margin:20px 10px;width:calc(100% - 20px);font-size:1em;}
#aboutus hr{width:calc(100% - 20px);margin:10px 10px;}
#category ul>li.item:nth-child(odd){background-color:#fff;}
#category ul>li.item:nth-child(even){background-color:#eee;}
.modal{width:95%;margin-bottom:20px;}
#topBG{height:356px;}
#topbg{height:330px;}
#mobnav{padding: 26px 10px;}
#main{margin-top:0px !important;padding-top:0px;}
#profile{margin:0px !important;padding:0 !important;}
#alist{max-height:28vh;}
#addaddr{margin:10px 20px}
#time .time{margin:0 auto;width:calc(100% - 20px);height:calc(100% - 60px);max-height:calc(100% - 60px);min-height:0;overflow:hidden;border-radius:16px;}
#dlist{padding:6px 12px 12px;overflow-x:auto;}
#dlist li{width:52px;height:60px;}
#pay input{padding:0 10px;border-radius:10px;}
#pay{padding:0;margin-top:5px;}
#pay .row{padding:0}
#pay a.p{padding:0px 7px;border-radius:10px;}
#pay br{margin-bottom:20px;};
#pay .tip{padding:0;margin:3px;border-radius:10px;}
#pay .center{padding:0 0px;}
#mobmenu {width:55px;height:100%;color:#fff;padding-right:10px;position:absolute;right:2px;top:0;display:flex;align-items:center;justify-content:flex-end;}
#mobcart{position:absolute;right:55px;top:50%;transform:translateY(-50%);}
#mobmenu i{font-size:28px;}
#fname{font-size:1.6em;margin-top:30px;padding-left:3px;}
#item{padding:0}
#links img{width:22px;height:22px;margin-top:0;}#links .soc{font-size:22px;margin:0;}
#category li.cat.on:before{position:absolute;right:10px;font-family:material icons;content:'';color:#fff;font-size:1.3em;}
#addmore,#po2{font-size:13px;}
#po2:after{content:attr(v);font-size:13px;}
}
.sects{margin-top:0px;margin-bottom:24px;}
.sects h4{font-weight:bolder;}
#about-sec h5{color:#c22c27;}
#about-phone{padding:10px 0px 10px 35px;color:white;margin:20px 0 0 0;background:#c22c27;width:142px;border-radius:10px;cursor:pointer;}
#about-phone i{left:19px;position:absolute;}
#hours-sec h5{color:#c22c27;}
#location-sec h5{color:#c22c27;}
#gallery-sec h5{color:#c22c27;}
#abouthour{line-height:1.3;text-align:start;}
#abouthour pre{font-family:monospace,monospace;font-size:1em;float:left;};
.about-gmap{height:260px;background-size:cover;background-color:#fefefe;background-repeat:no-repeat;background-position:center center;margin:10px 0px;border:10px solid #fff;box-sizing:border-box;box-shadow:0px 0px 2px #000;}
@media only screen and (max-width:600px){
#sects{margin-top:48px;}
}
#displaytotal:after{position: relative;content: attr(v);right: 0px;text-align: right;font-weight: bold;}
/* bare icon chip, same family as the #time/#addr close chips */
#backtomenu{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;margin:12px 0;background:#f2f2f4;border-radius:99px;color:#333;cursor:pointer;transition:background-color .15s;}
#backtomenu:hover{background:#e6e6e9;}
#backtomenu svg{width:20px;height:20px;}
#backtomenu span{display:none;}
#pop .option a.nested{position: absolute;right: 10px;bottom: 5px;color: #fff;border-radius: 99px;width: 30px;height: 30px;}
#pop .option a.nested.off{position: absolute;
right: 10px;
bottom: 5px;
color: #fff;
background: #b71c1c;
border-radius: 99px;
width: 30px;
height: 30px;}
#pop .option a.nested i{top: 6px;position: absolute;left: 6px;font-size: 17px;font-weight:bold;color: #b71c1c;}
#pop .option a.nested.off:before{
position: absolute;
left: 0px;
bottom: 0px;
font-family: 'Material Icons';
content: '\e5c8';
color: #fff;
text-align: center;
width: 100%;
line-height: 30px;
}
#nestedmsg .modal-content{position:relative;height:100%;}
#nestedpop{height:100%;padding-bottom:60px;}
#nestedmsg{top:50% !important;transform:translateY(-50%) !important;border-radius:10px;}
#nestedpop h5{padding-bottom: 16px;}
#nestedpop .group p{padding:0;margin:0}
#nestedpop .group{margin:10px 0;}
#nestedpop .group b{font-weight:bold;}
#nestedpop .group .row{margin:10px 0px;}
#nestedpop .group .option{margin:2px;width:100%;min-height:60px;float:left;line-height:1;position:relative;font-size:0.9em;padding:5px 35px 3px 5px;border:1.5px solid #aaa;border-radius:10px;}
#nestedpop .group .option.moption:after{position:absolute;right:9px;top:3px;font-size:24px;color:red;text-shadow:1px 1px #fff;line-height:1;text-align:center;content:attr(v);}
#nestedpop .option a.off{right: 10px;position: absolute;bottom: 5px;width:30px;height:30px;border-radius:99px;font-size: 17px;color: #fff;background:#b71c1c;}
#nestedpop .option a.off:before {position: absolute;left: 0px;bottom: 0px;font-family: 'Material Icons';content: '\e145';color: #fff;text-align: center;width: 100%;line-height: 30px;}
#nestedpop .option b {position: absolute;top: 5px;right: 5px;font-size: 0.8em;line-height: 1;font-weight: normal;}
#nestedpop .option u{position:absolute;right:20px;bottom:5px;background:#c62828;width:69px;height:30px;z-index:-1;color:#fff;display:none;text-decoration:none;line-height:30px;text-align:center;font-size:1.2em;border-radius:10px;}
#nestedpop .option a.del{position:absolute;right:70px;bottom:5px;color:#fff;background:#b71c1c;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;display:none;}
#nestedpop .option a.del:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e15b';color:#fff;text-align:center;width:100%;line-height:30px;}
#nestedpop .option a.qty{position:absolute;right:10px;bottom:5px;color:#fff;background:#b71c1c;border-radius:99px;width:30px;height:30px;box-shadow:1px 1px solid #999;}
#nestedpop .option a.qty:before{position:absolute;left:0px;bottom:0px;font-family:'Material Icons';content:'\e145';color:#fff;text-align:center;width:100%;line-height:30px;}
#nestedpop .option a.on::before {
position: absolute;
left: 0px;
bottom: 0px;
font-family: 'Material Icons';
content: '\e876';
text-align: center;
width: 100%;
line-height: 30px;
}
#nestedpop .option a.disabled {
opacity: 0.5;
pointer-events: none;
}
#nestedpop .option a.on {
position: absolute;
right: 10px;
bottom: 5px;
color: #fff;
background: #222;
border-radius: 99px;
width: 30px;
height: 30px;
box-shadow: 1px 1px solid #999;
}
#nestedpopA.disabled {
opacity: 0.5;
pointer-events: none;
}
#nestedpopA {
color: #fff;
padding: 10px 20px;
text-align: center;
background: #b71c1c;
display: inline-block;
border-radius: 10px;
font-size: 1.2em;
margin: 0 auto;
cursor: pointer;
}
#nestedremove {
color: #fff !important;
padding: 10px 20px;
text-align: center;
background: #b71c1c;
display: inline-block;
border-radius: 99px;
font-size: 1.2em;
margin: 0 auto;
cursor: pointer;
margin-bottom:32px;
width:100%;
}
#nestedpop .group{border-top:solid #eee 1px;padding-top:8px;}
#nesteddesc{font-weight:lighter;font-size:0.75em;margin-top:2px;}
.loadingOverlay {position: absolute;left: 0;width: 100%;height: 100%;z-index: 5;animation-duration: 3s;animation-fill-mode: forwards;animation-iteration-count: infinite;animation-name: placeHolderShimmer;animation-timing-function: linear;background-color: white;background: linear-gradient(to right, #eeeeee 8%,#d0cfcf 18% , #eeeeee 33%);}
@keyframes placeHolderShimmer {
0% {
background-position: -800px 0
}
100% {
background-position: 800px 0
}
}
.spinner {border: 8px solid #f3f3f3;border-top: 8px solid grey;border-radius: 50%;width: 60px;height: 60px;animation: spin 2s linear infinite;}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-icon {width: 50px;height: 50px;}
@media only screen and (max-width: 992px) {
#loadingOverlay {top:319px;}
}
@media only screen and (max-width: 601px) {
#loadingOverlay {top:351px;}
}
.input-container {
position: relative;
display: flex;
}
.input-container button:focus{
background-color:#c22c27;
}
input[type="text"] {
flex: 1;
padding-right: 60px; /* Space for the button */
}
.apply-button {
position: absolute;
right: 10px; /* Position from the right */
top: 50%;
transform: translateY(-63%); /* Center vertically */
padding: 5px 10px;
background-color: #c22c27; /* Button color */
color: white; /* Text color */
border: none;
border-radius: 5px;
cursor: pointer;
}
.apply-button:hover {
background-color: #a82023; /* Darker shade on hover */
}
.loading-icon {
width: 16px;
height: 16px;
border: 2px solid #f3f3f3;
border-top: 2px solid #c22c27;
border-radius: 50%;
animation: spinicon 1s linear infinite;
position: absolute;
right: 82px;
top: 29%;
transform: translateY(-50%);
}
@keyframes spinicon {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#authnetpay{
display:none;
}
span.minmax{
color:#e53e3e;
}
.flex-center {
display: flex;
align-items: center;
justify-content: space-between;
}
.qty {
margin: 0 5px;
font-weight: bold;
}
.r, .a {
cursor: pointer;
}
.r i, .a i {
margin: 0;
}
#tecpay{
background:#b71c1c;
color:white;
border-radius:10px;
}
#searchbar {
position: sticky;
top: 51px;
text-align: center;
/* Above #category (z-index:5): at the bottom of the page the sticky
category bar unpins and rides up out of #main — keep it tucking behind
the searchbar's opaque background instead of overlapping on top of it. */
z-index: 6;
padding-top: 14px;
padding-bottom: 14px;
background: white;
}
.search-wrapper {
display: inline-block;
width: calc(100% - 32px); /* Width of search field */
position: relative;
}
#searchfield {
width: 100%;
background-color: #f2f2f4;
border-radius: 999px;
padding: 8px 40px 8px 44px; /* Left padding for search icon, right padding for clear icon */
color: #000;
border: 1px solid transparent !important;
outline: none;
box-sizing: border-box;
box-shadow: none !important;
font-size: 1rem;
height: auto;
margin: 0;
transition: background-color .2s, border-color .2s, box-shadow .2s;
}
#searchfield::placeholder {
color: #666;
}
#searchbar i.material-icons {
position: absolute;
top: 50%;
left: 14px; /* Fixed distance from left of input */
transform: translateY(-50%);
color: #333;
pointer-events: none;
font-size: 22px;
}
#searchfield:focus {
background-color: #fff;
border: 1px solid #c22c27 !important;
box-shadow: 0 0 0 3px rgba(194,44,39,.14) !important;
}
#searchbar #searchclear {
position: absolute;
top: 50%;
right: 14px;
left: auto;
transform: translateY(-50%);
color: #666;
font-size: 20px;
cursor: pointer;
pointer-events: auto;
user-select: none;
opacity: 1;
transition: opacity .15s;
}
#searchfield:placeholder-shown ~ #searchclear {
opacity: 0;
pointer-events: none;
}
#closedmsg.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
align-items: center;
justify-content: center;
max-height:100% !important;
max-width:100%;
}
#closedmsg .modal-content {
background-color: #ffffff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
max-width: 450px;
width: 90%;
text-align: left;
font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
animation: closedMsgSlideIn 0.3s ease-out;
}
@keyframes closedMsgSlideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#closedmsg .modal-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
#closedmsg .modal-icon {
background-color: #ffebee;
color: #f44336;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 24px;
}
#closedmsg .modal-title {
color: #212121;
font-size: 22px;
font-weight: 600;
margin: 0;
}
#closedmsg .modal-message {
color: #555;
line-height: 1.6;
margin-bottom: 30px;
}
#closedmsg .modal-footer {
display: flex;
background-color:transparent;
justify-content: flex-end;
}
#closedmsg .close-button {
background-color: #b71c1c;
color: white;
border: none;
padding: 12px 24px;
font-size: 15px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s;
}
#closedmsg .close-button:hover {
background-color: #e53935;
}
/* closed-warning rendered inside #msg (item/pickup/delivery clicked while closed) — mirrors #closedmsg */
#msg.modal:has(.cmwrap){max-width:450px;width:90%;border-radius:12px;top:50% !important;transform:translateY(-50%) !important;}
#msg .cmwrap{animation:closedMsgSlideIn .3s ease-out;}
#msg .cmwrap .ahead{display:block;width:100%;box-sizing:border-box;text-align:center;line-height:1.75;cursor:pointer;}
#msg .cmwrap .ahead:hover{font-weight:bold;}
#msg:has(.cmwrap) .modal-content{padding:32px 40px;text-align:left;font-family:'Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,sans-serif;}
#msg .cmwrap .modal-header{display:flex;align-items:center;margin-bottom:20px;}
#msg .cmwrap .modal-icon{background-color:#ffebee;color:#f44336;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:15px;flex:0 0 auto;}
#msg .cmwrap .modal-title{color:#212121;font-size:22px;font-weight:600;margin:0;line-height:1.3;}
#msg .cmwrap .modal-message{color:#555;line-height:1.6;margin-bottom:30px;}
#msg .cmwrap .modal-footer{display:flex;background-color:transparent;justify-content:flex-end;height:auto;padding:0;gap:10px;}
#msg .cmwrap .cancel-button{background:#f2f2f4;color:#333;border:none;padding:12px 24px;font-size:15px;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .2s;}
#msg .cmwrap .cancel-button:hover{background:#e6e6ea;}
#msg .cmwrap .close-button{background-color:#b71c1c;color:white;border:none;padding:12px 24px;font-size:15px;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .2s;}
#msg .cmwrap .close-button:hover{background-color:#e53935;}
.modal-buttons a {
padding: 12px 24px;
font-size: 1rem;
border-radius: 6px;
transition: background 0.3s ease;
}
.modal-buttons a:hover {
filter: brightness(90%);
}
@media (max-width: 603px) {
.modal-buttons {
flex-direction: column;
align-items: center;
}
.modal-buttons a {
width: 100%;
max-width: 220px;
}
}
#invmsg{
border-radius:10px;
}
.orderahead-pickup, .orderahead-delivery{
margin-right:10px;
line-height:1.75;
width:100%;
display:block;
text-align:center;
cursor:pointer;
}
.orderahead-pickup:hover, .orderahead-delivery:hover{
font-weight:bold;
}
.collapsible{
border-radius: 10px;
}
.collapsible-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
cursor: pointer;
border-radius:10px
}
.collapsible-body {
display: none; /* Start hidden */
overflow: hidden;
border-bottom: none;
}
/* Optional: Add subtle easing for the arrow */
.collapsible-arrow {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapsible li.active .collapsible-arrow {
transform: rotate(180deg);
}
#addpass{
margin-top: 0;
}
#refundpolicy{
margin: 2rem 0rem;
}
/* Rewards Section Styles */
.reward-item {
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
background: white;
}
.reward-item:hover:not(.disabled) {
border-color: #c22c22 !important;
box-shadow: 0 2px 8px rgba(194, 44, 34, 0.2);
transform: translateY(-2px);
}
.reward-item.selected {
border-color: #c22c22 !important;
background: #fff5f5 !important;
}
.reward-item.disabled {
opacity: 0.6;
cursor: not-allowed;
background: #f5f5f5;
}
#pay h5{
font-weight: 500;
}
/* Modern card-per-section checkout (mirrors profile.php section cards) */
#pay .section-card{
background:#fff;
border:1px solid #edeff2;
border-radius:14px;
padding:20px 22px;
margin-bottom:16px;
box-shadow:0 1px 4px rgba(17,24,39,.05);
}
#pay .section-card:last-of-type{ margin-bottom:0; }
#pay .section-card > h5:first-child{
margin:0 0 8px;
padding-bottom:0;
border-bottom:none;
font-size:1.2rem;
font-weight:600;
color:#1a1a1a;
}
/* align card content (labels/inputs) with the h5 left edge */
#pay .section-card .row{ padding:0; margin-left:0; margin-right:0; }
#pay .section-card .row .col{ padding-left:0; padding-right:12px; }
#pay #paymenttypes{ margin-bottom:0; }
@media (max-width:600px){ #pay #cardrow{ margin-top:14px; } }
/* card form: left-aligned labels (paymenttypes centers text); fields share one height via the iframe css param */
#pay #cardrow{ text-align:left; }
#pay #cardrow label{ display:block; text-align:left; text-transform:lowercase; }
#pay #cardrow label::first-letter{ text-transform:uppercase; }
#pay #cardrow #lcvv, #pay #cardrow label:has(+ #cvv){ text-transform:uppercase; } /* CVV is an acronym — keep all caps */
#pay #cardrow iframe#tokenframe{ display:block; }
/* gift card row: match the card-form styling; extra space below the payment-type buttons */
#pay #gcardrow{ text-align:left; margin-top:18px; }
#pay #gcardrow label{ display:block; text-align:left; text-transform:lowercase; }
#pay #gcardrow label::first-letter{ text-transform:uppercase; }
/* Authorize.net AcceptUI popup: its injected inline styles assume a desktop-width panel
(left:50% + large negative margin), which pushes it off-center on phones.
!important is required to beat the inline styles. */
@media (max-width:600px){
#AcceptUIContainer{
left:50% !important;
right:auto !important;
top:50% !important;
bottom:auto !important;
margin-left:0 !important;
margin-top:0 !important;
transform:translate(-50%,-50%) !important;
width:calc(100vw - 24px) !important;
max-width:400px !important;
border-radius:10px;
overflow:hidden;
}
#AcceptUIContainer iframe{ width:100% !important; border-radius:10px; }
}
/* order-summary card (mirrors #sum from the cart panel) */
#pay .sc-summary #sumInline{ margin:0; list-style:none; }
#pay .sc-summary #sumInline li{ position:relative; min-height:38px; line-height:38px; border-top:1px solid #f0f0f0; white-space:nowrap; }
#pay .sc-summary #sumInline li:first-child{ border-top:none; }
#pay .sc-summary #sumInline li b{ position:absolute; left:0; right:100px; text-align:left; font-weight:normal; }
#pay .sc-summary #sumInline li:after{ position:absolute; content:"$" attr(v); right:0; text-align:right; font-weight:normal; }
#pay .sc-summary #sumInline li:last-child{ font-weight:700; }
#pay .sc-summary #sumInline li:last-child:after{ font-weight:700; }
/* only show the inline summary when the persistent YOUR ORDER panel is hidden (mobile/tablet) */
@media (min-width:993px){ #pay .sc-summary{ display:none; } }
/* when the Order Summary card is showing (mobile/tablet), the Tip-card total is redundant — hide it
(!important overrides the inline display jQuery .show() sets during total updates) */
@media (max-width:992px){ #displaytotal{ display:none !important; } }
/* modern Promo Code / Redeem Rewards — flat sections inside the card (no boxed accordion) */
#pay .sc-promo .accordion-section{ border:none; background:transparent; border-radius:0; margin:0; }
#pay .sc-promo #rewardsSection{ margin-top:4px !important; border-top:1px solid #f0f0f0; }
#pay .sc-promo .accordion-header{ font-size:.95rem; font-weight:600; color:#1a1a1a; padding:12px 0; }
#pay .sc-promo .accordion-header:hover{ background:transparent; color:#c22c27; }
#pay .sc-promo .accordion-header i{ font-size:20px; color:#98a2b3; }
#pay .sc-promo .accordion-content{ padding:0 0 14px; }
#pay .sc-promo h5.dp{ font-size:.95rem; font-weight:600; margin:8px 0; }
#pay .sc-promo #promorow .dp > label{ display:none; } /* placeholder carries the hint; label is redundant */
#pay .sc-promo #promorow .dp{ margin-top:2px; }
#pay .sc-promo .apply-button{ border-radius:8px; padding:8px 16px; font-weight:600; font-size:.9rem; right:5px; top:20px; transform:translateY(-50%); } /* input is 40px; container is taller (input margin), so anchor to the input's half-height */
#pay .sc-promo #promorow [type=checkbox]+span{ font-size:.85rem; color:#98a2b3; line-height:1.4; }
#pay .sc-promo #pro{ font-size:14px; } /* smaller coupon input text; placeholder inherits */
/* create-account card */
#pay .sc-account .acct-sub{ margin:0 0 18px; color:#777; font-size:0.9rem; line-height:1.45; }
#pay .sc-account .acct-options{ display:flex; flex-direction:column; gap:12px; }
#pay .sc-account .acct-opt{ display:block; margin:0; }
#pay .sc-account .acct-pass{ width:100%; margin-top:16px; }
/* utensils / refund cards are plain containers (no leading title) */
#pay .sc-utensils .utensils-row{ margin:0; }
.reward-item input[type="radio"] {
margin: 0;
vertical-align: middle;
position: relative;
top: -2px;
}
/* Discount Accordion Styles */
.discount-accordion {
margin: 0;
}
.accordion-section {
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 10px;
background: white;
}
.accordion-header {
padding: 15px;
margin: 0;
font-weight: 600;
transition: background 0.3s ease;
}
.accordion-header:hover {
background: #f5f5f5;
}
.accordion-content {
padding: 0 15px 15px 15px;
overflow: hidden;
transition: all 0.3s ease;
}
/* Override Materialize input focus color to brand red */
.input-field input[type=text]:focus:not([readonly]),
.input-field input[type=password]:focus:not([readonly]),
.input-field input[type=email]:focus:not([readonly]),
.input-field input[type=url]:focus:not([readonly]),
.input-field input[type=time]:focus:not([readonly]),
.input-field input[type=date]:focus:not([readonly]),
.input-field input[type=datetime]:focus:not([readonly]),
.input-field input[type=datetime-local]:focus:not([readonly]),
.input-field input[type=tel]:focus:not([readonly]),
.input-field input[type=number]:focus:not([readonly]),
.input-field input[type=search]:focus:not([readonly]),
.input-field textarea.materialize-textarea:focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #b71c1c !important;
box-shadow: 0 1px 0 0 #b71c1c !important;
-webkit-box-shadow: 0 1px 0 0 #b71c1c !important;
}
/* Focus label color */
.input-field input[type=text]:focus:not([readonly]) + label,
.input-field input[type=password]:focus:not([readonly]) + label,
.input-field input[type=email]:focus:not([readonly]) + label,
.input-field input[type=url]:focus:not([readonly]) + label,
.input-field input[type=time]:focus:not([readonly]) + label,
.input-field input[type=date]:focus:not([readonly]) + label,
.input-field input[type=datetime]:focus:not([readonly]) + label,
.input-field input[type=datetime-local]:focus:not([readonly]) + label,
.input-field input[type=tel]:focus:not([readonly]) + label,
.input-field input[type=number]:focus:not([readonly]) + label,
.input-field input[type=search]:focus:not([readonly]) + label,
.input-field textarea.materialize-textarea:focus:not([readonly]) + label {
color: #b71c1c !important;
}
/* Icon prefix active color */
.input-field .prefix.active {
color: #b71c1c !important;
}
/* Reward Warning Modal - Modern Minimal Style */
#rewardWarningModal.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
max-height: 100% !important;
max-width: 100%;
backdrop-filter: blur(4px);
}
#rewardWarningModal .modal-content {
background-color: #ffffff;
padding: 32px;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
max-width: 380px;
width: 90%;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
animation: rwSlideIn 0.25s ease-out;
}
@keyframes rwSlideIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
#rewardWarningModal .rw-icon {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
#rewardWarningModal .rw-title {
color: #1a1a1a;
font-size: 20px;
font-weight: 600;
margin: 0 0 12px;
letter-spacing: -0.3px;
}
#rewardWarningModal .rw-message {
color: #666;
font-size: 15px;
line-height: 1.5;
margin: 0 0 24px;
}
#rewardWarningModal .rw-btn {
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
color: white;
border: none;
padding: 14px 32px;
font-size: 15px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}
#rewardWarningModal .rw-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}
#rewardWarningModal .rw-btn:active {
transform: translateY(0);
}
/* Rewards Loading Overlay */
#rewardsLoadingOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: 8px;
}
#rewardsLoadingOverlay .preloader-wrapper {
margin-bottom: 15px;
}
#rewardsLoadingOverlay p {
color: #333;
font-weight: 600;
margin: 0;
}
/* Rewards Container */
#rewardsContainer {
position: relative;
min-height: 100px;
}
/* Rewards Points Display */
#rewardsPointsDisplay {
background: linear-gradient(135deg, #f9f9f9 0%, #fff 100%);
border: 1px solid #e0e0e0;
}
#rewardsPointsDisplay b {
color: #c22c22;
font-size: 1.3em;
}
/* Confirm and Undo Reward Buttons */
#confirmRewardBtn,
#undoRewardBtn {
border: none;
padding: 12px 28px;
font-size: 15px;
font-weight: 600;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
margin: 10px 5px;
display: inline-block;
}
#confirmRewardBtn {
background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
color: white;
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
#confirmRewardBtn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}
#confirmRewardBtn:active {
transform: translateY(0);
}
#confirmRewardBtn:disabled,
#confirmRewardBtn.disabled {
background: #ccc;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
#undoRewardBtn {
background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
color: white;
box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}
#undoRewardBtn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4);
}
#undoRewardBtn:active {
transform: translateY(0);
}
/* Points Slider Input */
.points-input {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 4px;
outline: none;
transition: all 0.2s ease;
}
.points-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
background: linear-gradient(135deg, #c22c22 0%, #a02222 100%);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 6px rgba(194, 44, 34, 0.4);
transition: all 0.2s ease;
}
.points-input::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 4px 10px rgba(194, 44, 34, 0.5);
}
.points-input::-moz-range-thumb {
width: 22px;
height: 22px;
background: linear-gradient(135deg, #c22c22 0%, #a02222 100%);
border-radius: 50%;
cursor: pointer;
border: none;
box-shadow: 0 2px 6px rgba(194, 44, 34, 0.4);
transition: all 0.2s ease;
}
.points-input::-moz-range-thumb:hover {
transform: scale(1.1);
box-shadow: 0 4px 10px rgba(194, 44, 34, 0.5);
}
.points-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.points-input:disabled::-webkit-slider-thumb {
background: #999;
cursor: not-allowed;
box-shadow: none;
}
.points-input:disabled::-moz-range-thumb {
background: #999;
cursor: not-allowed;
box-shadow: none;
}
/* Points Input Row */
.points-input-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
padding: 10px;
background: #f9f9f9;
border-radius: 6px;
}
.points-input-row button {
flex-shrink: 0;
}
/* Reward Item Enhancements */
.reward-item.selected .reward-radio {
border-color: #c22c22;
}
.reward-item.confirmed {
border-color: #4CAF50 !important;
background: #f1f8e9 !important;
}
.reward-item.confirmed::after {
content: '\e86c';
font-family: 'Material Icons';
position: absolute;
top: 10px;
right: 10px;
color: #4CAF50;
font-size: 24px;
}
/* Join Loyalty Button */
.join-loyalty-btn {
background: linear-gradient(135deg, #c22c22 0%, #a02222 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(194, 44, 34, 0.3);
display: inline-flex;
align-items: center;
gap: 8px;
}
.join-loyalty-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(194, 44, 34, 0.4);
}
.join-loyalty-btn:active {
transform: translateY(0);
}
.join-loyalty-btn i {
font-size: 20px;
}
/* Accordion Section Improvements */
.accordion-section {
overflow: hidden;
}
.accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
}
.accordion-header i {
transition: transform 0.3s ease;
}
.accordion-header.open i {
transform: rotate(90deg);
}
/* Rewards unavailable message */
.reward-unavailable-msg {
color: #f44336;
font-size: 0.85em;
margin-top: 4px;
font-style: italic;
}
/* Searchbar Banner Wrapper for mobile */
#searchbar-banner-wrapper {
display: flex;
flex-direction: column;
}
/* Redeem Rules Banner */
#redeemrules-banner {
display: flex;
align-items: center;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
border-radius: 16px;
padding: 24px;
margin-bottom: 20px;
width: 100%;
}
.redeemrules-left {
display: flex;
gap: 12px;
flex-wrap: wrap;
flex: 1;
justify-content: center;
}
.redeemrule-card {
background: #fff;
color: #b13930;
width: 120px;
height: 120px;
border-radius: 8px;
border: 2px dashed #b13930;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
.redeemrule-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(177, 57, 48, 0.25);
}
.redeemrule-name {
background: #b13930;
color: #fff;
padding: 6px 4px;
text-align: center;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
min-height: 28px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.redeemrule-dollar {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 800;
color: #b13930;
}
.redeemrule-points {
background: #f5f5f5;
border-top: 1px dashed #ddd;
padding: 5px 0;
text-align: center;
font-size: 10px;
font-weight: 600;
color: #666;
}
.redeemrule-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.redeemrule-overlay i {
font-size: 32px;
color: #b13930;
opacity: 0.6;
}
.redeemrules-right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 16px;
flex: 1;
}
.redeemrules-message {
color: #333;
font-size: 20px;
font-weight: 600;
}
.redeemrules-btn {
background: #b13930;
border-radius: 25px;
padding: 0 32px;
font-weight: 500;
text-transform: none;
letter-spacing: 0.5px;
}
.redeemrules-btn:hover {
background: #c94a41;
}
.redeemrules-btn:focus,
.redeemrules-btn:active {
background: #b13930;
}
@media only screen and (max-width: 992px) {
.redeemrule-card {
width: 100px;
height: 100px;
}
.redeemrule-name {
font-size: 8px;
padding: 4px 3px;
min-height: 24px;
}
.redeemrule-dollar {
font-size: 18px;
}
.redeemrule-points {
font-size: 10px;
padding: 5px 0;
}
.redeemrule-overlay i {
font-size: 28px;
}
}
@media only screen and (max-width: 600px) {
#redeemrules-banner {
padding: 12px;
gap: 12px;
border-radius: 0;
margin-bottom: 0;
}
.redeemrules-left {
flex: 0 0 auto;
gap: 8px;
}
.redeemrule-card {
width: 70px;
height: 70px;
border-radius: 8px;
}
.redeemrule-name {
font-size: 6px;
padding: 3px 2px;
min-height: 18px;
}
.redeemrule-dollar {
font-size: 14px;
}
.redeemrule-points {
font-size: 7px;
padding: 3px 0;
}
.redeemrule-overlay i {
font-size: 20px;
}
.redeemrule-card:nth-child(n+3) {
display: none;
}
.redeemrules-right {
gap: 8px;
}
.redeemrules-message {
font-size: 12px;
}
.redeemrules-btn {
padding: 0 12px;
font-size: 10px;
height: 28px;
line-height: 28px;
}
}
.hideonday{
display: none !important;
}
@keyframes fadeInDisc {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* compact "today's hours" status line — aligned with #address/#phone, monochrome white */
#hoursbar{position:relative;padding-left:26px;margin-top:16px;color:#fff;cursor:pointer;}
#hoursbar #hoursStatus{color:#fff;vertical-align:middle;}
#hoursbar .hoursbar-chev{font-size:18px;margin-left:4px;color:#fff;opacity:.85;vertical-align:middle;transition:transform .2s ease;}
#hoursbar.show-week .hoursbar-chev{transform:rotate(180deg);}
/* weekly-hours modal (mirrors #closedmsg pattern, reuses closedMsgSlideIn) */
#hoursmodal.hours-modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);align-items:center;justify-content:center;}
#hoursmodal .hm-card{background:#fff;border-radius:14px;width:90%;max-width:420px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.15);animation:closedMsgSlideIn .3s ease-out;font-family:'Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,sans-serif;}
#hoursmodal .hm-header{display:flex;align-items:center;gap:12px;padding:22px 24px;background:linear-gradient(135deg,#b71c1c,#e53935);color:#fff;}
#hoursmodal .hm-header h2{margin:0;font-size:20px;font-weight:600;}
#hoursmodal .hm-list{list-style:none;margin:0;padding:8px 0;}
#hoursmodal .hm-list li{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 24px;font-size:15px;color:#555;}
#hoursmodal .hm-list li .hm-day{font-weight:500;color:#333;}
#hoursmodal .hm-list li .hm-time{text-align:right;line-height:1.5;}
#hoursmodal .hm-list li.today{background:#fff3f3;}
#hoursmodal .hm-list li.today .hm-day,#hoursmodal .hm-list li.today .hm-time{color:#b71c1c;font-weight:700;}
#hoursmodal .hm-footer{display:flex;justify-content:flex-end;padding:16px 24px;}
#hoursmodal .hm-close{background:#b71c1c;color:#fff;border:none;padding:10px 22px;border-radius:6px;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s;}
#hoursmodal .hm-close:hover{background:#e53935;}
/* TEConnect card modal: rounded, vertically centered, phone-safe width (was inline 500px) */
#tecdivo.modal{ width:min(500px, calc(100vw - 24px)) !important; border-radius:14px; top:50% !important; transform:translateY(-50%) !important; }
#tecdivo .modal-content{ border-radius:14px; }
#tecdivo .tec-close{ position:absolute; top:14px; right:14px; color:#98a2b3; cursor:pointer; font-size:24px; z-index:1; }
#tecdivo .tec-close:hover{ color:#1a1a1a; }
/* center the Card Declined (cw-*) dialog; #msg hosts many contents, so scope via :has */
#msg.modal:has(.cw-title){ top:50% !important; transform:translateY(-50%) !important; max-width:420px; border-radius:16px; overflow:hidden; }
#msg.modal:has(.cw-title) .modal-content{ padding:0; }