:root {
--background-color: #f7f7f7;
--primary-color: #c9386f;
--primary-hover: #b92a61;
--text-color: #323232;
--text-hover: #313131;
--secondary-text: #6b6b6b;
--button-bg: #c9386f;
--button-text-color: #ffffff;
--button-on-hover: #b92a61;
--header-bg: #ffffff;
--footer-bg: #ffffff;
--border-color: #f4f4f4;
}
.foodord-allergy-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
background: transparent;
color: #94a3b8;
margin-left: 6px;
cursor: pointer;
flex-shrink: 0;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
outline: none;
border-radius: 50%;
}
.foodord-allergy-trigger:hover {
color: #0f172a;
transform: scale(1.15);
background: #f1f5f9;
}
.foodord-allergy-trigger:focus-visible {
outline: 2px solid #0f172a;
outline-offset: 2px;
}
.foodord-allergy-trigger__icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.foodord-allergy-trigger__icon svg {
width: 20px;
height: 20px;
display: block;
}
.foodord-modal * {
box-sizing: border-box;
}
.foodord-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
display: none;
} .foodord-modal.visible {
display: block;
}
.foodord-modal-product-content.visible {
display: block;
}
.foodord-modal.hidden,
.foodord-modal-loading.hidden,
.foodord-modal-product-content.hidden {
display: none;
}
.foodord-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
overflow-x: hidden;
max-width: 100vw;
}
.foodord-modal-container {
position: relative;
width: 100%;
max-width: 540px;
pointer-events: auto;
}
.foodord-modal-content {
position: relative;
width: 100%;
max-height: 90vh;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
overflow: hidden;
overflow-x: hidden;
transform: translateY(30px);
opacity: 0;
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.foodord-modal[aria-hidden="false"] .foodord-modal-content {
transform: translateY(0);
opacity: 1;
} .foodord-modal-close {
position: absolute;
top: 14px;
right: 16px;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
outline: none;
}
.foodord-modal-close:hover {
background: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.foodord-modal-close svg {
width: 20px;
height: 20px;
color: #000000;
} .foodord-modal-body {
position: relative;
max-height: calc(90vh - 40px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
} .foodord-modal-loading {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 40px;
text-align: center;
}
.foodord-modal-loading.visible {
display: flex;
}
.foodord-loading-spinner {
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top: 3px solid #c9386f;
border-radius: 50%;
animation: foodord-spin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes foodord-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.foodord-modal-loading p {
margin: 0;
font-size: 14px;
font-weight: 400;
color: #323232;
} .foodord-modal-error {
padding: 40px;
text-align: center;
}
.foodord-modal-error p {
margin-bottom: 20px;
}
.foodord-modal-error .button {
background: #c9386f;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.foodord-modal-error .button:hover {
background: #b92a61;
} .foodord-modal-product-content {
display: none;
} .foodord-product-purchase .variations_form {
margin: 10px 0 0 0;
} .foodord-product-purchase .reset_variations,
.foodord-product-purchase .single_add_to_cart_button,
.foodord-product-modal-wrapper .reset_variations,
.foodord-modal-body .reset_variations,
.foodord-modal .reset_variations,
.variations_form .reset_variations,
.foodord-product-purchase .variations .reset_variations,
.foodord-product-purchase .variations .value .reset_variations {
display: none;
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
} .foodord-product-purchase .woocommerce-variation-add-to-cart.variations_button,
.foodord-product-purchase .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-enabled {
display: none;
} .foodord-product-purchase .variations {
display: block;
width: 100%;
margin-bottom: 10px;
border-collapse: initial;
}
.foodord-product-purchase .variations tbody {
display: block;
}
.foodord-product-purchase .variations tr {
display: block;
margin-bottom: 8px;
}
.foodord-product-purchase .variations th.label {
display: none;
}
.foodord-product-purchase .variations td.value {
display: block;
width: 100%;
padding: 0;
}
.foodord-product-purchase .variations td.value select {
display: none;
}
.foodord-original-select {
display: none;
}
.foodord-product-purchase .single_variation_wrap {
margin-top: 10px;
}
.foodord-product-purchase .single_add_to_cart_button {
width: 100%;
}
.foodord-attr-wrapper>select {
display: none;
}
.foodord-attr-wrapper {
border: none;
background: rgba(248, 249, 250, 0.6);
padding: 16px 16px 16px 16px;
}
.foodord-attr-radio {
display: block;
}
.foodord-attr-legend {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
gap: 8px;
margin-bottom: 8px;
padding: 0 16px;
position: relative;
box-sizing: border-box;
}
.foodord-attr-legend-title {
margin: 0;
display: block;
flex: 1;
order: -1;
font-size: 14px;
font-weight: 600;
}
.foodord-product-toppings {
margin: 10px 0 0 0;
}
.foodord-attr-legend .foodord-product-toppings__badge {
flex-shrink: 0;
order: 1;
}
.foodord-attr-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 0;
}
.foodord-attr-option {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
gap: 12px;
padding: 12px 14px;
cursor: pointer;
user-select: none;
transition: border-color 0.15s ease, background-color 0.15s ease;
border: 1px solid #e2e2e2;
border-radius: 8px;
background-color: #ffffff;
margin: 0;
}
.foodord-attr-option:hover {
border-color: var(--primary-color, #c9386f);
background-color: color-mix(in srgb, var(--primary-color, #c9386f), white 90%);
}
.foodord-attr-option.is-selected {
border-color: var(--primary-color, #c9386f);
background-color: color-mix(in srgb, var(--primary-color, #c9386f), white 90%);
}
.foodord-attr-option.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.foodord-attr-wrapper.has-variation-error {
background-color: rgba(201, 56, 111, 0.1);
border-color: rgba(201, 56, 111, 0.4);
animation: toppings-shake 0.5s ease-in-out;
}
.foodord-attr-wrapper.has-variation-error .foodord-attr-option {
border-color: rgba(201, 56, 111, 0.4);
} .foodord-attr-option-left {
display: flex;
align-items: center;
gap: 10px;
}
.foodord-attr-input {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid var(--primary-color, #c9386f);
border-radius: 50%;
position: relative;
flex-shrink: 0;
}
.foodord-attr-input:checked::after {
content: '';
position: absolute;
inset: 3px;
background: var(--primary-color, #c9386f);
border-radius: 50%;
}
.foodord-attr-input:focus-visible {
outline: 2px solid #c9386f;
outline-offset: 2px;
} .foodord-attr-price {
white-space: nowrap;
margin-left: auto;
}
.foodord-product-modal-wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
padding: 0;
} .foodord-product-modal-wrapper:not(:has(.foodord-product-images)) .foodord-product-details {
padding-top: 20px;
} @supports not (selector(:has(.foodord-product-images))) {
.foodord-product-modal-wrapper>.foodord-product-details:first-child {
padding-top: 20px;
}
}
.foodord-product-images {
position: relative;
width: 100%;
}
.foodord-product-main-image {
position: relative;
aspect-ratio: 16/9;
margin-bottom: 1rem;
overflow: hidden;
background: #f8f9fa;
width: 100%;
max-height: 300px;
}
.foodord-product-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.foodord-product-thumbnails {
display: flex;
gap: 12px;
margin-top: 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0 40px 4px 40px;
}
.foodord-product-thumbnail {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.2s ease;
}
.foodord-product-thumbnail:hover,
.foodord-product-thumbnail.active {
border-color: #c9386f;
}
.foodord-product-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.foodord-product-title-row {
display: flex;
align-items: center;
gap: 4px;
padding: 0 14px;
margin-bottom: 0.5rem;
position: sticky;
top: 0;
z-index: 5;
transition: padding 0.2s ease, margin 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.foodord-product-title {
font-size: 16px;
margin: 0;
flex: 0 1 auto;
min-width: 0;
}
.foodord-product-title-row.sticky-active {
background-color: #ffffff;
padding: 20px 1.2rem 20px 2.4rem;
margin: 10px -1.2rem 0 -1.2rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-bottom-color: #e5e5e5;
}
.foodord-product-price {
font-size: 16px;
font-weight: 600;
padding: 0 1rem;
margin-bottom: 0.5rem;
}
.foodord-product-description {
font-size: 14px;
border-bottom: 1px solid #ebebeb;
padding: 0 1rem;
padding-bottom: 20px;
}
.foodord-product-toppings__set {
border: none;
background: rgba(248, 249, 250, 0.6);
padding: 16px 16px 16px 16px;
margin: 0 0 8px 0;
}
.foodord-product-toppings__set-header {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
gap: 8px;
margin-bottom: 8px;
padding: 0 16px;
position: relative;
box-sizing: border-box;
}
.foodord-product-toppings__set-title {
font-size: 15px;
padding-bottom: 0;
margin: 0;
display: block;
flex: 1;
order: -1;
font-weight: 600;
} .foodord-product-toppings__badge {
display: inline-flex;
align-items: center;
padding: 2px 4px;
height: 20px;
border-radius: 5px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
border: 1.5px solid currentColor;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
line-height: 1;
font-variant-numeric: lining-nums;
justify-content: center;
position: relative;
gap: 0;
overflow: hidden;
backface-visibility: hidden;
transform-style: preserve-3d;
will-change: transform;
}
.foodord-product-toppings__badge::before {
content: '';
display: inline-flex;
width: 0;
height: 4px;
opacity: 0;
margin-right: 0;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg) translate(0, 0);
transform-origin: center;
flex-shrink: 0;
}
.foodord-product-toppings__badge--required {
color: #f43f5e;
background-color: rgba(244, 63, 94, 0.04);
}
.foodord-product-toppings__badge--optional {
color: #555555;
background-color: rgba(148, 163, 184, 0.04);
} .has-selection>.foodord-product-toppings__badge {
color: #059669;
background-color: #ecfdf5;
border-color: #059669;
padding-left: 8px;
}
.has-selection>.foodord-product-toppings__badge::before {
width: 8px;
opacity: 1;
margin-right: 8px;
transform: rotate(-45deg) translate(0, -1px);
} @keyframes badge-success {
0% {
transform: scale(1);
}
40% {
transform: scale(1.12);
}
70% {
transform: scale(0.94);
}
100% {
transform: scale(1);
}
}
.just-selected>.foodord-product-toppings__badge {
animation: badge-success 0.4s ease-out;
}
.foodord-product-toppings__description {
margin: 0 0 14px;
} .foodord-product-toppings__control,
.foodord-product-toppings__options {
margin: 0;
padding: 0;
} .foodord-product-toppings__select {
width: 100%;
padding: 14px;
border: 1.5px solid #dedede;
border-radius: 8px;
background: #ffffff;
transition: all 0.2s ease;
appearance: none;
font-size: 13px;
color: var(--text-color);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b6b6b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 40px;
}
.foodord-product-toppings__select:focus {
outline: none;
border-color: var(--primary-color, #c9386f);
box-shadow: 0 0 0 2px rgba(201, 56, 111, 0.12);
}
.foodord-product-toppings__select:hover {
border-color: #d0d0d0;
} .foodord-product-toppings__set.has-error {
background-color: rgba(225, 29, 72, 0.04);
border-color: rgba(225, 29, 72, 0.3);
animation: toppings-error-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.foodord-product-toppings__set.has-error .foodord-product-toppings__select {
border-color: rgba(225, 29, 72, 0.5);
}
.foodord-product-toppings__set.has-error .foodord-product-toppings__option {
border-color: rgba(225, 29, 72, 0.2);
}
@keyframes toppings-error-shake {
0%,
100% {
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
transform: translateX(-4px);
}
20%,
40%,
60%,
80% {
transform: translateX(4px);
}
} .foodord-product-toppings__options {
display: flex;
flex-direction: column;
gap: 10px;
}
.foodord-product-toppings__option.is-hidden-by-toggle {
display: none;
}
.foodord-product-toppings__option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border: 1px solid #e2e2e2;
border-radius: 8px;
background: #ffffff;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
margin: 0;
}
.foodord-modal .foodord-product-toppings__toggle,
.foodord-modal button.foodord-product-toppings__toggle,
.foodord-product-toppings .foodord-product-toppings__toggle,
.foodord-product-toppings button.foodord-product-toppings__toggle {
margin-top: 20px;
border: none;
background: none;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 0.4em;
cursor: pointer;
}
.foodord-modal .foodord-product-toppings__toggle .foodord-product-toppings__toggle-text,
.foodord-modal .foodord-product-toppings__toggle .foodord-product-toppings__toggle-icon,
.foodord-product-toppings .foodord-product-toppings__toggle .foodord-product-toppings__toggle-text,
.foodord-product-toppings .foodord-product-toppings__toggle .foodord-product-toppings__toggle-icon {
color: #3147ad;
font-size: 0.75rem;
font-weight: 400;
}
.foodord-modal .foodord-product-toppings__toggle:focus-visible,
.foodord-product-toppings .foodord-product-toppings__toggle:focus-visible {
outline: 2px solid color-mix(in srgb, var(--primary-color, #c9386f), white 60%);
outline-offset: 2px;
}
.foodord-modal .foodord-product-toppings__toggle:hover,
.foodord-product-toppings .foodord-product-toppings__toggle:hover {
color: var(--primary-hover, #b92a61);
text-decoration: underline;
text-decoration-color: #3147ad;
}
.foodord-product-toppings__toggle-icon {
width: 0.5em;
height: 0.5em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
display: inline-block;
transform: rotate(45deg) translateY(-0.2em);
transform-origin: center;
transition: transform 0.2s ease;
}
.foodord-product-toppings__toggle.is-expanded .foodord-product-toppings__toggle-icon {
transform: rotate(-135deg) translateY(-0.2em);
margin-left: 2px;
}
.foodord-product-toppings__option:hover {
border-color: var(--primary-color, #c9386f);
background-color: color-mix(in srgb, var(--primary-color, #c9386f), white 90%);
}
.foodord-product-toppings__option.is-checked {
border-color: var(--primary-color, #c9386f);
background-color: color-mix(in srgb, var(--primary-color, #c9386f), white 90%);
} .foodord-product-toppings__option-content {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.foodord-product-toppings__input {
position: relative;
width: 18px;
height: 18px;
border: 2px solid var(--primary-color, #c9386f);
background: #ffffff;
transition: all 0.2s ease;
cursor: pointer;
margin: 0;
flex-shrink: 0;
appearance: none;
}
.foodord-product-toppings__input[type="radio"] {
border-radius: 50%;
}
.foodord-product-toppings__input[type="checkbox"] {
border-radius: 4px;
}
.foodord-product-toppings__input[type="radio"]:checked::after {
content: '';
position: absolute;
inset: 3px;
background: var(--primary-color, #c9386f);
border-radius: 50%;
}
.foodord-product-toppings__input[type="checkbox"]:checked {
border-color: var(--primary-color, #c9386f);
background: var(--primary-color, #c9386f);
}
.foodord-product-toppings__input[type="checkbox"]::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 4px;
border: 2px solid #ffffff;
border-top: 0;
border-right: 0;
transform: translate(-50%, -60%) rotate(-45deg) scale(0.6);
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.foodord-product-toppings__input[type="checkbox"]:checked::after {
opacity: 1;
transform: translate(-50%, -60%) rotate(-45deg) scale(1);
}
.foodord-product-toppings__option-label {
font-size: 14px;
font-weight: 400;
cursor: pointer;
flex: 1;
}
.foodord-product-toppings__option-price {
font-size: 14px;
white-space: nowrap;
margin-left: 8px;
} .foodord-product-toppings__input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.foodord-product-toppings__option:has(.foodord-product-toppings__input:disabled) {
opacity: 0.6;
cursor: not-allowed;
}
.foodord-product-toppings__option:has(.foodord-product-toppings__input:disabled):hover {
border-color: #e2e2e2;
background: #ffffff;
}
.foodord-product-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.foodord-add-to-cart-btn {
background: var(--button-bg);
border: none;
padding: 16px 32px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.foodord-modal-footer .foodord-add-to-cart-btn {
flex: 1;
width: 100%;
min-width: 0;
height: 45px;
border-radius: 5px;
justify-content: space-between;
padding: 0 12px;
text-align: left;
} .foodord-modal-footer .foodord-add-to-cart-left {
display: inline-flex;
align-items: center;
gap: 8px;
}
.foodord-modal-footer .foodord-add-to-cart-count {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
width: 22px;
height: 22px;
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.6);
}
.foodord-modal-footer .foodord-add-to-cart-btn .foodord-add-to-cart-count {
color: #323232;
}
.foodord-modal-footer .foodord-add-to-cart-label {
color: #ffffff;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
}
.foodord-modal-footer .foodord-add-to-cart-total {
color: #ffffff;
display: inline-flex;
align-items: center;
margin-left: 8px;
font-size: 14px;
font-weight: 600;
}
.foodord-modal-footer .foodord-add-to-cart-btn .loading-text {
color: #ffffff;
}
.foodord-add-to-cart-btn:hover {
background: var(--button-on-hover);
box-shadow: 0 4px 12px rgba(201, 56, 111, 0.25);
}
.foodord-view-product-btn {
background: transparent;
border: 2px solid #c9386f;
padding: 14px 28px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.foodord-view-product-btn:hover {
background: #c9386f;
transform: translateY(-1px);
} .foodord-modal-footer {
position: sticky;
bottom: 0;
left: 0;
right: 0;
background: #ffffff;
border-top: 1px solid #e5e5e5;
padding: 10px 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
z-index: 10;
}
.foodord-modal-footer .foodord-product-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0 10px;
gap: 0.7rem;
} .foodord-quantity-controls {
display: flex;
align-items: center;
gap: 5px;
border-radius: 8px;
padding: 4px;
}
.foodord-quantity-btn {
position: relative;
width: 36px;
height: 36px;
color: #323232;
background: rgb(240, 240, 240);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0;
line-height: 1;
}
.foodord-quantity-btn::before,
.foodord-quantity-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background-color: currentColor;
transform: translate(-50%, -50%);
pointer-events: none;
}
.foodord-quantity-btn::before {
width: 14px;
height: 2px;
}
#foodord-quantity-plus::after {
width: 2px;
height: 14px;
}
#foodord-quantity-minus::after {
display: none;
}
.foodord-quantity-btn:hover {
background: var(--button-bg);
color: #ffffff;
}
.foodord-quantity-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.foodord-quantity-btn:disabled:hover {
background: #ffffff;
transform: none;
}
.foodord-quantity-input {
width: 40px;
height: 36px;
border: 1px solid #e5e7eb;
border-radius: 6px;
font-size: 13px;
text-align: center;
background: #ffffff;
margin: 0 4px;
appearance: textfield;
}
.foodord-quantity-input:focus {
outline: 2px solid #c9386f;
outline-offset: 1px;
}
.foodord-quantity-input::-webkit-outer-spin-button,
.foodord-quantity-input::-webkit-inner-spin-button {
appearance: none;
margin: 0;
} body.foodord-modal-open {
overflow: hidden;
}
body.foodord-allergy-info-open {
overflow: hidden;
} @media (max-width: 786px) {
.foodord-modal-overlay {
padding: 0;
}
.foodord-modal-container {
max-width: 100%;
height: 100%;
}
.foodord-modal-content {
height: 100%;
max-height: 100%;
border-radius: 0;
margin: 0;
width: 100%;
}
.foodord-modal-body {
max-height: 100%;
height: 100%;
padding: 0;
display: flex;
flex-direction: column;
}
.foodord-modal-product-content.visible {
display: flex;
flex-direction: column;
flex: 1;
min-height: 100%;
}
.foodord-product-modal-wrapper {
grid-template-columns: 1fr;
gap: 20px;
padding: 0;
}
.foodord-product-main-image {
max-height: 250px;
margin-bottom: 0.5rem;
}
.foodord-product-thumbnails {
padding: 0 16px 4px 16px;
gap: 8px;
margin-top: 12px;
}
.foodord-product-thumbnail {
width: 60px;
height: 60px;
}
.foodord-product-title-row {
padding: 0 14px;
margin-bottom: 0.3rem;
gap: 4px;
transition: padding 0.2s ease, margin 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.foodord-product-title-row.sticky-active {
padding: 20px 16px 20px 30px;
margin: 8px -16px 0 -16px;
}
.foodord-product-price {
padding: 0 16px;
margin-bottom: 0.3rem;
}
.foodord-product-description {
padding: 0 16px 16px 16px;
} .foodord-attr-wrapper {
padding: 12px 12px 12px 12px;
margin: 0 0 16px 0;
}
.foodord-attr-legend {
margin-bottom: 8px;
padding-bottom: 0;
}
.foodord-attr-option {
padding: 10px 12px;
} .foodord-product-toppings__set {
padding: 12px 12px 12px 12px;
margin: 0 0 16px 0;
}
.foodord-product-toppings__set-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
padding: 0 16px;
}
.foodord-product-toppings__option {
padding: 12px;
}
.foodord-product-toppings__option-content {
gap: 8px;
}
.foodord-product-toppings__select {
padding: 12px;
padding-right: 32px;
} .foodord-modal-footer {
padding: 12px 16px;
position: sticky;
bottom: 0;
margin-top: auto;
}
.foodord-modal-footer .foodord-product-actions {
flex-direction: row;
gap: 8px;
padding: 0;
align-items: center;
}
.foodord-modal-footer .foodord-add-to-cart-btn {
padding: 10px 12px;
height: 50px;
}
.foodord-quantity-controls {
gap: 3px;
padding: 2px;
}
.foodord-quantity-btn {
width: 36px;
height: 36px;
}
.foodord-quantity-input {
width: 36px;
height: 28px;
margin: 0 2px;
} .foodord-modal-close {
top: 15px;
right: 12px;
width: 28px;
height: 28px;
}
.foodord-modal-close svg {
width: 16px;
height: 16px;
}
} @media (max-width: 768px) {
.foodord-product-main-image {
max-height: 220px;
}
.foodord-product-thumbnails {
padding: 0 12px 4px 12px;
}
.foodord-product-toppings__set {
padding: 10px 10px 10px 10px;
margin: 0 0 16px 0;
}
.foodord-product-toppings__set-header {
padding: 0 10px;
margin-bottom: 8px;
}
} @media (max-width: 786px) {
.foodord-modal-container {
padding: 0;
max-width: 100vw;
height: 100%;
margin: 0;
}
.foodord-modal-container .foodord-modal-content {
height: 100%;
max-height: 100%;
border-radius: 0;
margin: 0;
width: 100%;
animation: foodord-modal-mobile-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.foodord-modal-body {
max-height: 100%;
height: 100%;
padding: 0;
}
.foodord-product-modal-wrapper {
grid-template-columns: 1fr;
gap: 16px;
padding: 0;
}
.foodord-product-main-image {
max-height: 200px;
margin-bottom: 0.25rem;
}
.foodord-product-thumbnails {
padding: 0 12px 4px 12px;
gap: 6px;
margin-top: 8px;
}
.foodord-product-thumbnail {
width: 50px;
height: 50px;
}
.foodord-product-title-row {
padding: 0 12px;
margin-bottom: 0.5rem;
gap: 4px;
transition: padding 0.2s ease, margin 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.foodord-product-title-row.sticky-active {
padding: 20px 10px 20px 22px;
margin: 6px -12px 0 -12px;
}
.foodord-product-price {
padding: 0 12px;
margin-bottom: 0.5rem;
}
.foodord-product-description {
padding: 0 12px 12px 12px;
} .foodord-attr-wrapper {
margin: 0 0 12px 0;
padding: 12px 12px 12px 12px;
}
.foodord-attr-legend {
margin-bottom: 8px;
padding-bottom: 0;
}
.foodord-attr-option {
padding: 8px 10px;
} .foodord-product-toppings__set {
margin: 0 0 12px 0;
padding: 12px 12px 12px 12px;
}
.foodord-product-toppings__set-header {
padding: 0 12px;
margin-bottom: 8px;
}
.foodord-product-toppings__badge {
min-width: 50px;
}
.foodord-product-toppings__select {
padding: 12px 10px;
padding-right: 30px;
} .foodord-modal-footer {
padding: 8px 12px;
position: sticky;
bottom: 0;
}
.foodord-modal-footer .foodord-product-actions {
flex-direction: row;
gap: 6px;
padding: 0;
align-items: center;
}
.foodord-modal-footer .foodord-add-to-cart-btn {
padding: 10px;
height: 50px;
}
.foodord-quantity-controls {
gap: 2px;
padding: 1px;
}
.foodord-quantity-btn {
width: 42px;
height: 42px;
}
.foodord-quantity-input {
width: 34px;
height: 34px;
margin: 0 5px;
} .foodord-modal-close {
top: 15px;
right: 10px;
width: 32px;
height: 32px;
}
.foodord-modal-close svg {
width: 24px;
height: 24px;
color: #000000;
} .foodord-modal-loading {
padding: 30px 15px;
}
.foodord-loading-spinner {
width: 28px;
height: 28px;
}
}
.foodord-allergy-info-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.foodord-allergy-info-modal.is-open {
display: flex;
}
.foodord-allergy-info-modal__backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
}
.foodord-allergy-info-modal__dialog {
position: relative;
background: #ffffff;
border-radius: 14px;
width: 100%;
max-width: 390px;
max-height: min(80vh, 560px);
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.18);
overflow: hidden;
display: flex;
flex-direction: column;
z-index: 1;
box-sizing: border-box;
margin: 0 auto;
align-self: center;
}
.foodord-allergy-info-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.foodord-allergy-info-modal__title {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #2b2b2b;
}
.foodord-allergy-info-modal__close {
position: relative;
background: none;
border: none;
width: auto;
height: auto;
min-width: 0;
min-height: 0;
border-radius: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: color 0.2s ease;
}
.foodord-allergy-info-modal__close:hover,
.foodord-allergy-info-modal__close:focus {
outline: none;
}
.foodord-allergy-info-modal__close::before {
content: '\00d7';
font-size: 28px;
font-weight: 400;
line-height: 1;
color: #555555;
transition: color 0.2s ease;
position: static;
}
.foodord-allergy-info-modal__close:hover::before,
.foodord-allergy-info-modal__close:focus-visible::before {
color: #c9386f;
}
.foodord-allergy-info-modal__content {
padding: 16px 24px 24px;
overflow-y: auto;
color: #4c4c4c;
font-size: 15px;
line-height: 1.6;
}
@media (max-width: 480px) {
.foodord-allergy-info-modal {
padding: 0;
align-items: center;
justify-content: center;
}
.foodord-allergy-info-modal__dialog {
width: 100%;
max-width: calc(100% - 32px);
margin: 0 auto;
border-radius: 12px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
align-self: center;
}
.foodord-allergy-info-modal__header {
padding: 16px 18px 8px;
}
.foodord-allergy-info-modal__content {
padding: 14px 18px 18px;
}
.foodord-allergy-info-modal__icon {
margin: 0 0 16px;
}
}
.foodord-allergy-info-modal__icon {
display: flex;
align-items: center;
justify-content: center;
margin: 4px 0 18px;
}
.foodord-allergy-info-modal__icon img {
display: block;
width: 64px;
height: auto;
}
.foodord-allergy-info-modal__content p {
margin: 0 0 12px;
}
.foodord-allergy-info-modal__content p:last-child {
margin-bottom: 0;
}
.foodord-allergens-item {
margin-bottom: 12px;
padding: 10px 14px;
border-radius: 6px;
background-color: var(--foodord-allergy-item-bg, #f8f8f8);
font-size: 14px;
line-height: 1.5;
}
.foodord-allergens-item strong {
display: block;
margin-bottom: 4px;
font-weight: 600;
color: var(--foodord-allergy-item-label, #333333);
}
.foodord-allergens-item--contains {
border-left: 3px solid var(--foodord-allergens-contains-color, #dc3545);
}
.foodord-allergens-item--not-contain {
border-left: 3px solid var(--foodord-allergens-not-contain-color, #28a745);
}
.foodord-allergens-item--may-contain {
border-left: 3px solid var(--foodord-allergens-may-contain-color, #ffc107);
}
.foodord-allergens-item:last-child {
margin-bottom: 0;
} @media (prefers-reduced-motion: no-preference) {
.foodord-modal-content {
animation: foodord-modal-enter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
}
@keyframes foodord-modal-enter {
0% {
transform: translateY(30px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes foodord-modal-mobile-slide-up {
0% {
transform: translateY(100%);
opacity: 1;
}
100% {
transform: translateY(0);
opacity: 1;
}
} @media (prefers-contrast: high) {
.foodord-modal-overlay {
background: rgba(0, 0, 0, 0.8);
}
.foodord-modal-content {
border: 2px solid #000000;
}
} .foodord-toast-container {
position: absolute;
bottom: 85px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 100;
pointer-events: none;
}
@media (max-width: 786px) {
.foodord-toast-container {
bottom: 75px;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
}
.foodord-toast {
min-width: 220px;
max-width: min(400px, 90vw);
padding: 10px 14px;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
background: #323232;
color: #ffffff;
font-size: 12px;
opacity: 1;
transform: translateY(0);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: auto;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.foodord-toast--error {
background: #323232;
}
.foodord-toast--success {
background: rgba(32, 148, 84, 0.95);
}
.foodord-toast--info {
background: rgba(51, 51, 51, 0.95);
}
.foodord-toast.is-hiding {
opacity: 0;
transform: translateY(-6px);
}
@keyframes toppings-shake {
0%,
100% {
transform: translateX(0);
}
15%,
45%,
75% {
transform: translateX(-4px);
}
30%,
60%,
90% {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.foodord-product-title-row {
transition: none;
}
}.foodord-order-page {
--foodord-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--foodord-sidebar-width: 360px;
}
.foodord-order-page .wr-card,
.foodord-order-page .foodord-scroll-nav,
.foodord-order-page .foodord-products-shortcode,
.foodord-order-page .foodord-order-toggle {
font-family: var(--foodord-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.foodord-pac-container {
transform: translateZ(0);
background: #ffffff;
border: none;
box-shadow: none;
border-radius: 14px;
padding: 4px 0;
overflow: hidden;
font-family: inherit;
transition: opacity 0.15s ease, transform 0.15s ease;
box-sizing: border-box;
}
.foodord-pac-container .pac-item {
padding: 10px 16px 10px 46px;
border: none;
line-height: 1.4;
font-size: 14px;
color: rgba(37, 40, 43, 0.86);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
position: relative;
}
.foodord-pac-container .pac-item a,
.foodord-pac-container .pac-item a:link,
.foodord-pac-container .pac-item a:visited,
.foodord-pac-container .pac-item a:hover,
.foodord-pac-container .pac-item a:focus,
.foodord-pac-container .pac-item a:active {
color: rgba(33, 35, 38, 0.94);
text-decoration: none;
}
.foodord-pac-container .pac-item+.pac-item {
border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.foodord-pac-container .pac-item:hover,
.foodord-pac-container .pac-item.pac-item-selected {
background-color: #f7f7f7;
color: rgba(33, 35, 38, 0.95);
}
.foodord-pac-container .pac-item::before {
content: '';
position: absolute;
left: 24px;
top: 50%;
width: 16px;
height: 16px;
transform: translate(-50%, -50%);
background-color: rgba(36, 38, 41, 0.78);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.25c-2.9 0-5.25 2.35-5.25 5.25 0 3.85 5.25 8.25 5.25 8.25s5.25-4.4 5.25-8.25c0-2.9-2.35-5.25-5.25-5.25zm0 7.5a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5z'/%3E%3Ccircle cx='8' cy='6.5' r='1'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: contain;
}
.foodord-pac-container .pac-item::after {
display: none;
}
.foodord-pac-container .pac-item .pac-icon {
display: none;
}
.foodord-pac-container .pac-item .pac-item-query {
font-weight: 600;
color: rgba(33, 35, 38, 0.94);
display: inline;
margin-right: 4px;
}
.foodord-pac-container .pac-item .pac-item-query+span {
font-size: 0.85rem;
color: rgba(95, 98, 102, 0.9);
display: inline;
margin-left: 2px;
}
.foodord-pac-container .pac-logo {
display: block;
width: 100%;
padding: 6px 16px 0;
opacity: 0.75;
position: relative;
background: none;
.foodord-sidebar {
width: 100%;
max-width: 420px;
margin: 40px auto;
padding: 0 1.25rem;
box-sizing: border-box;
}
.foodord-sidebar .wr-card {
position: static;
width: 100%;
}
@media (min-width: 1024px) {
.foodord-sidebar {
max-width: 360px;
margin: 40px auto 60px;
}
}
text-align: left;
} :root {
--background-color: #f7f7f7;
--primary-color: #c9386f;
--primary-hover: #b92a61;
--text-color: #323232;
--text-hover: #313131;
--secondary-text: #6b6b6b;
--button-bg: #c9386f;
--button-text-color: #ffffff;
--button-on-hover: #b92a61;
--border-color: #e3e3e3;
} .wr-checkout-highlight {
outline: 2px solid #ff6b6b;
transition: outline 0.3s ease;
} .foodord-scroll-nav {
margin-bottom: 1rem;
background: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
width: 100%;
transition: box-shadow 0.2s ease, background-color 0.2s ease;
} @media (min-width: 1025px) {
.has-foodord-sidebar .foodord-scroll-nav {
width: calc(100% - var(--foodord-sidebar-w, var(--foodord-sidebar-width, 360px)));
margin: 0;
}
}
.foodord-scroll-nav__inner {
margin: 0;
padding: 10px 52px 10px 104px;
position: relative;
display: flex;
align-items: center;
gap: 10px;
transition: none;
} .foodord-scroll-nav__menu-wrapper {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 60px;
background: #ffffff;
z-index: 10;
} .foodord-scroll-nav__menu-btn {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
padding: 0;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
z-index: 11;
}
.foodord-scroll-nav__menu-btn:hover {
background: #f9fafb;
border-color: #d1d5db;
transform: translateY(-50%) scale(1.02);
}
.foodord-scroll-nav__menu-btn:active {
background: #f3f4f6;
transform: translateY(-50%) scale(0.97);
}
.foodord-scroll-nav__menu-icon {
width: 18px;
height: 12px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.foodord-scroll-nav__menu-icon span {
display: block;
width: 100%;
height: 2px;
background: #374151;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} .foodord-scroll-nav__menu-btn:hover .foodord-scroll-nav__menu-icon span:nth-child(1) {
transform: translateY(-1px);
}
.foodord-scroll-nav__menu-btn:hover .foodord-scroll-nav__menu-icon span:nth-child(3) {
transform: translateY(1px);
}
.foodord-scroll-nav__menu-btn.is-active {
background: #1f2937;
border-color: #1f2937;
}
.foodord-scroll-nav__menu-btn.is-active .foodord-scroll-nav__menu-icon span {
background: #ffffff;
width: 100%;
}
.foodord-scroll-nav__menu-btn.is-active .foodord-scroll-nav__menu-icon span:nth-child(1) {
transform: translateY(5px) rotate(45deg);
}
.foodord-scroll-nav__menu-btn.is-active .foodord-scroll-nav__menu-icon span:nth-child(2) {
opacity: 0;
}
.foodord-scroll-nav__menu-btn.is-active .foodord-scroll-nav__menu-icon span:nth-child(3) {
transform: translateY(-5px) rotate(-45deg);
} .foodord-scroll-nav__dropdown {
position: absolute;
top: calc(100% + 8px);
left: 16px;
background: #ffffff;
border: 1px solid rgba(229, 229, 229, 0.8);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
min-width: 260px;
max-width: 320px;
z-index: 1000;
padding: 12px;
max-height: 420px;
overflow-y: auto;
animation: dropdownOpen 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dropdownOpen {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.foodord-scroll-nav__dropdown-list {
list-style: none;
margin: 0;
padding: 0;
}
.foodord-scroll-nav__dropdown-item {
margin: 0;
}
.foodord-scroll-nav__dropdown-link {
display: block;
padding: 12px 24px 12px 28px;
margin: 0 -12px;
width: calc(100% + 24px);
background: transparent;
border: none;
border-radius: 10px;
text-align: left;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
font-size: 15px;
} .foodord-scroll-nav__dropdown-link::after {
content: attr(data-text);
position: absolute;
left: 28px;
top: 12px;
pointer-events: none;
visibility: hidden;
width: auto;
height: auto;
}
.foodord-scroll-nav__dropdown-link:hover {
background: rgba(201, 56, 111, 0.08);
transform: translateX(2px);
} .foodord-scroll-nav__dropdown-item:first-child .foodord-scroll-nav__dropdown-link {
border-radius: 10px 10px 10px 10px;
}
.foodord-scroll-nav__dropdown-item:first-child .foodord-scroll-nav__dropdown-link.is-active::before {
border-radius: 10px 0 0 10px;
}
.foodord-scroll-nav__dropdown-item:last-child .foodord-scroll-nav__dropdown-link {
border-radius: 10px 10px 10px 10px;
}
.foodord-scroll-nav__dropdown-item:last-child .foodord-scroll-nav__dropdown-link.is-active::before {
border-radius: 0 10px 10px 0;
}
.foodord-scroll-nav__dropdown-link:active {
transform: scale(0.98);
} .foodord-scroll-nav__dropdown-link.is-active {
background: rgba(0, 0, 0, 0.05);
}
.foodord-scroll-nav__dropdown-link.is-active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
height: 100%;
background: #000;
border-radius: 0;
animation: slideIn 0.2s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-4px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.foodord-scroll-nav__list {
list-style: none;
margin: 0;
padding: 0 5px;
display: flex;
gap: 8px;
overflow-x: auto;
flex: 1;
max-width: min(660px, calc(100% - 310px));
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
position: relative;
z-index: 1;
scrollbar-width: none;
-ms-overflow-style: none;
mask-image: linear-gradient(90deg,
transparent 0%,
rgba(0, 0, 0, 1) 15px,
rgba(0, 0, 0, 1) calc(100% - 15px),
transparent 100%);
} .foodord-scroll-nav__list::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
}
.foodord-scroll-nav__item {
flex: 0 0 auto;
} .foodord-scroll-nav__arrow {
position: absolute;
top: 50%;
transform: translateY(-60%);
width: 36px;
height: 36px;
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
z-index: 11; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.foodord-scroll-nav__arrow svg {
width: 22px;
height: 22px;
transition: transform 0.2s ease;
}
.foodord-scroll-nav__arrow:hover {
background: #f7f7f7;
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.foodord-scroll-nav__arrow:hover svg {
transform: scale(1.1);
}
.foodord-scroll-nav__arrow:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.foodord-scroll-nav__arrow:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.foodord-scroll-nav__arrow--left {
left: 60px;
}
.foodord-scroll-nav__arrow--left:hover svg {
transform: translateX(-2px) scale(1.1);
}
.foodord-scroll-nav__arrow--right {
position: absolute;
}
.foodord-scroll-nav__arrow--right:hover svg {
transform: translateX(2px) scale(1.1);
}
.foodord-scroll-nav__link {
display: inline-block;
padding: 10px 12px 12px;
border-radius: 6px;
background: transparent;
text-decoration: none;
border: none;
position: relative; font-weight: 400; transition: color 0.2s ease, background-color 0.2s ease;
cursor: pointer;
appearance: none;
}
.foodord-scroll-nav__link:hover,
.foodord-scroll-nav__link:focus {
background-color: transparent; outline: none;
}
.foodord-scroll-nav__link.is-active {
background-color: transparent;
} .foodord-scroll-nav__label {
position: relative;
display: inline-block;
white-space: nowrap;
z-index: 1;
}
.foodord-scroll-nav__link .foodord-scroll-nav__text {
font-size: 14px;
font-weight: 600;
color: #323232;
transition: opacity 160ms ease;
}
.foodord-scroll-nav__link .foodord-scroll-nav__text--bold {
position: absolute;
left: 0; top: 50%;
font-size: 14px;
font-weight: 600;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
white-space: nowrap;
transition: opacity 160ms ease;
color: #323232;
}
.foodord-scroll-nav__link:hover .foodord-scroll-nav__text,
.foodord-scroll-nav__link.is-active .foodord-scroll-nav__text {
opacity: 0;
}
.foodord-scroll-nav__link:hover .foodord-scroll-nav__text--bold,
.foodord-scroll-nav__link.is-active .foodord-scroll-nav__text--bold {
opacity: 1;
} .foodord-scroll-nav__link.is-active .foodord-scroll-nav__text--bold {
left: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
.foodord-scroll-nav__dropdown {
display: none;
}
.foodord-scroll-nav__menu-wrapper {
pointer-events: auto;
}
.foodord-scroll-nav__menu-btn.is-active {
background: rgba(15, 23, 42, 0.06);
border-color: rgba(15, 23, 42, 0.12);
}
.foodord-sheet-backdrop {
position: fixed;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(15, 23, 42, 0.2);
backdrop-filter: blur(6px);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
z-index: 10000;
}
.foodord-sheet-backdrop.is-visible {
opacity: 1;
pointer-events: auto;
}
.foodord-sheet {
width: 100%;
max-width: 100%;
margin: 0;
background: #ffffff;
border-radius: 24px 24px 0 0;
box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
transform: translateY(30px);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
max-height: min(75vh, 560px);
overflow: hidden;
}
.foodord-sheet-backdrop.is-visible .foodord-sheet {
transform: translateY(0);
}
.foodord-sheet__handle {
width: 48px;
height: 4px;
background: rgba(15, 23, 42, 0.08);
border-radius: 2px;
margin: 12px auto 16px;
display: block;
}
.foodord-sheet__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px 14px;
border-bottom: 1px solid rgba(226, 232, 240, 0.75);
}
.foodord-sheet__title {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #0f172a;
}
.foodord-sheet__close {
border: none;
background: transparent;
color: #0f172a;
width: 36px;
height: 36px;
border-radius: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.2s ease;
position: relative;
}
.foodord-sheet__close::before,
.foodord-sheet__close::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 14px;
height: 2px;
background: currentColor;
border-radius: 1px;
transform-origin: center;
transition: opacity 0.2s ease;
}
.foodord-sheet__close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.foodord-sheet__close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.foodord-sheet__close:hover,
.foodord-sheet__close:focus-visible {
color: rgba(15, 23, 42, 0.6);
outline: none;
background: transparent;
}
.foodord-sheet__body {
overflow-y: auto;
padding: 12px 0 18px;
overscroll-behavior: contain;
}
.foodord-sheet__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.foodord-sheet__item {
margin: 0;
}
.foodord-sheet__link {
width: 100%;
position: relative;
text-align: left;
border: none;
background: transparent;
padding: 16px 24px 16px 16px;
border-radius: 0;
font-size: 16px;
color: #0f172a;
display: block;
transition: background 0.2s ease, color 0.2s ease;
}
.foodord-sheet__link::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-radius: 999px;
background: transparent;
transition: background 0.2s ease;
}
.foodord-sheet__link:hover,
.foodord-sheet__link:focus-visible {
background: rgba(15, 23, 42, 0.08);
color: #0f172a;
outline: none;
}
.foodord-sheet__link.is-active {
background: rgb(177 177 177 / 12%);
font-weight: 600;
}
.foodord-sheet__link.is-active::before {
background: #000;
}
body.foodord-sheet-open {
overflow: hidden;
touch-action: none;
}
} .foodord-scroll-nav__active-bg {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
border-radius: 0;
background: #f7f7f7;   transform: translateX(0);
transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, width;
pointer-events: none;
z-index: 0; } .foodord-scroll-nav__indicator {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 4px;
border-radius: 10px;
background: #000;
transform: translateX(0);
transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, width;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.foodord-scroll-nav__indicator {
transition: none;
}
.foodord-scroll-nav__link {
transition: none;
}
} @media (max-width: 1024px) {
.foodord-mode-toggle-mobile {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 16px 16px;
background: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
align-items: stretch;
}
.foodord-mode-toggle-mobile .wr-card__address-bar {
width: 100%;
padding: 0;
border: 0;
background: transparent;
}
.foodord-mode-toggle-mobile .wr-card__address-bar--mobile-slot {
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #ffffff;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 12px;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
transition: background-color 0.2s ease;
}
.foodord-mode-toggle-mobile .wr-card__address-bar--mobile-slot:active {
background-color: #f8fafc;
}
.foodord-mode-toggle-mobile .wr-card__address-bar--mobile-slot .wr-card__address-left {
gap: 10px;
flex: 1;
min-width: 0;
}
.foodord-mode-toggle-mobile .wr-card__address-bar--mobile-slot .wr-card__address-left svg {
width: 16px;
height: 16px;
color: #64748b;
flex-shrink: 0;
}
.foodord-mode-toggle-mobile .wr-card__address-bar--mobile-slot .wr-card__address-value {
font-weight: 500;
font-size: 13px;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.foodord-mode-toggle-mobile .wr-card__address-bar--mobile-slot .wr-card__address-change {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #475569;
font-size: 11px;
font-weight: 600;
height: 24px;
padding: 0 10px;
border-radius: 6px;
flex-shrink: 0;
transition: all 0.2s ease;
}
.foodord-mode-toggle-mobile .wr-card__address-bar--mobile-slot .wr-card__address-change:hover {
background: #e2e8f0;
}
.foodord-mode-toggle-mobile .wr-card__mode-toggle--mobile {
width: 100%;
margin: 0;
box-sizing: border-box;
}
.wr-card__address-bar--hidden-mobile {
display: none;
}
}
@media (min-width: 1025px) {
.wr-card__address-bar--hidden-mobile {
display: flex;
}
} @media (min-width: 1025px) {
.foodord-mode-toggle-mobile {
display: none;
}
} .foodord-scroll-nav__search {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-60%);
height: 36px;
width: 290px;
display: flex;
align-items: center;
gap: 6px;
background: #f7f7f7;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 20px;
padding: 0 10px 0 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
z-index: 11;
} .foodord-scroll-nav__search-overlay {
display: none;
}
.foodord-scroll-nav__search-input {
font-family: inherit;
font-size: 13px;
flex: 1;
height: 100%;
border: 0;
background: transparent;
outline: none;
}
.foodord-scroll-nav__search-btn,
.foodord-scroll-nav__clear-btn {
width: 26px;
height: 26px;
border-radius: 50%;
border: 0;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.foodord-scroll-nav__clear-btn {
position: relative;
font-size: 0;
color: #323232;
}
.foodord-scroll-nav__clear-btn::before,
.foodord-scroll-nav__clear-btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 1px;
border-radius: 999px;
background: currentColor;
transform-origin: center;
}
.foodord-scroll-nav__clear-btn::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.foodord-scroll-nav__clear-btn::after {
transform: translate(-50%, -50%) rotate(-45deg);
} .foodord-scroll-nav__clear-btn[hidden] {
display: none;
}
.foodord-scroll-nav__search:focus-within {
border-color: rgba(0, 0, 0, 0.18);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
background: #fff;
} @media (max-width: 1024px) {
.foodord-scroll-nav__search {
width: 290px;
}
.foodord-scroll-nav__list {
max-width: calc(100% - 310px);
}
}
@media (max-width: 768px) {
.foodord-scroll-nav__inner {
padding: 10px 52px 10px 58px;
}
.foodord-scroll-nav__list {
margin-right: 10px;
max-width: calc(100% - 60px);
mask-image: none;
}
.foodord-scroll-nav__search {
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
background: #f7f7f7;
border: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.foodord-scroll-nav__search-input,
.foodord-scroll-nav__clear-btn {
display: none;
}
.foodord-scroll-nav__search-btn {
position: static;
margin: 0;
padding: 0;
background: transparent;
color: #323232;
} .foodord-scroll-nav__arrow:hover {
background: #f7f7f7;
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
} .foodord-scroll-nav__search-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 1000;
display: none;
}
.foodord-scroll-nav__search-overlay.is-open,
.foodord-scroll-nav__search-overlay.is-closing {
display: flex;
align-items: center;
}
.foodord-scroll-nav__search-overlay-content {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
opacity: 0;
transform: translateX(24px) scale(0.94);
transform-origin: right center;
}
.foodord-scroll-nav__search-overlay.is-open .foodord-scroll-nav__search-overlay-content {
animation: searchOverlayIn 0.26s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.foodord-scroll-nav__search-overlay.is-closing .foodord-scroll-nav__search-overlay-content {
animation: searchOverlayOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.foodord-scroll-nav__search-overlay-header {
padding: 8px 16px;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 100%;
}
.foodord-scroll-nav__search-overlay-input {
font-size: 14px;
font-family: inherit;
flex: 1;
height: 32px;
border: 0;
background: transparent;
padding: 0 12px;
outline: none;
}
.foodord-scroll-nav__search-overlay-close {
width: 38px;
height: 38px;
border: 0;
background: transparent;
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
color: inherit;
}
.foodord-scroll-nav__search-overlay-close svg {
width: 20px;
height: 20px;
pointer-events: none;
}
.foodord-scroll-nav__search-overlay-clear {
border: 0;
background: transparent;
color: rgba(0, 0, 0, 0.7);
font-size: 13px;
font-family: inherit;
padding: 0;
cursor: pointer;
flex-shrink: 0;
margin-left: auto;
text-decoration: none;
}
.foodord-scroll-nav__search-overlay-clear:hover,
.foodord-scroll-nav__search-overlay-clear:focus {
color: rgba(0, 0, 0, 0.9);
text-decoration: underline;
} .foodord-scroll-nav__search-overlay-clear[hidden] {
display: none;
} .foodord-scroll-nav {
position: relative;
} .foodord-scroll-nav.search-width-small .foodord-scroll-nav__arrow--right {
right: 260px;
}
.foodord-scroll-nav.search-width-medium .foodord-scroll-nav__arrow--right {
right: 330px;
}
.foodord-scroll-nav.search-width-large .foodord-scroll-nav__arrow--right {
right: 400px;
}
@keyframes searchOverlayIn {
0% {
opacity: 0;
transform: translateX(30px) scale(0.88);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes searchOverlayOut {
0% {
opacity: 1;
transform: translateX(0) scale(1);
}
100% {
opacity: 0;
transform: translateX(24px) scale(0.9);
}
}
} .foodord-category-section {
scroll-margin-top: 90px;
}
@media (max-width: 768px) {
.foodord-scroll-nav__inner {
padding: 8px 42px 8px 78px;
gap: 6px;
}
.foodord-scroll-nav__list {
max-width: 100%;
}
.foodord-scroll-nav__search-overlay-close:hover,
.foodord-scroll-nav__search-overlay-close:focus,
.foodord-scroll-nav__search-overlay-close:focus-visible,
.foodord-scroll-nav__search-overlay-close:active {
background: transparent;
box-shadow: none;
}
.foodord-scroll-nav__link {
font-size: 13px;
padding: 8px 10px 10px;
}
.foodord-scroll-nav__arrow {
width: 30px;
height: 30px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.foodord-scroll-nav__arrow svg {
width: 26px;
height: 26px;
}
.foodord-scroll-nav__arrow--left {
left: 56px;
}
.foodord-scroll-nav__arrow--right {
left: auto;
right: 6px;
}
.foodord-scroll-nav__menu-btn {
width: 36px;
height: 36px;
left: 14px;
border-radius: 10px;
}
.foodord-scroll-nav__menu-icon {
width: 16px;
height: 12px;
}
.foodord-scroll-nav__dropdown {
left: 12px;
min-width: 200px;
max-width: calc(100vw - 40px);
}
.foodord-scroll-nav__dropdown-link {
padding: 8px 16px 8px 20px;
}
.foodord-scroll-nav__dropdown-link::after {
left: 20px;
top: 8px;
}
.foodord-scroll-nav__dropdown-link.is-active::before {
height: 100%;
width: 3px;
left: 0;
top: 0;
bottom: 0;
}
.foodord-category-section {
scroll-margin-top: 72px;
}
} .foodord-search-empty {
display: none;
min-height: 380px;
background: transparent;
align-items: center;
justify-content: center;
}
.foodord-search-empty__card {
background: #ffffff;
border: 1px solid #e2e8f0;
padding: 64px 32px;
text-align: center;
width: 100%;
max-width: 640px;
margin: 32px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 20px;
position: relative;
overflow: hidden;
}
.foodord-search-empty__icon {
width: 80px;
height: 80px;
background: #f8fafc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: #94a3b8;
position: relative;
}
.foodord-search-empty__icon::after {
content: '';
position: absolute;
inset: -8px;
border: 1px dashed #e2e8f0;
border-radius: 50%;
opacity: 0.5;
}
.foodord-search-empty__icon svg {
width: 36px;
height: 36px;
stroke-width: 1.5;
}
.foodord-search-empty__title {
font-size: 24px;
font-weight: 700;
color: #0f172a;
margin: 0 0 12px 0;
letter-spacing: -0.02em;
}
.foodord-search-empty__desc {
font-size: 16px;
color: #64748b;
margin: 0 0 32px 0;
line-height: 1.6;
max-width: 320px;
}
.foodord-search-empty__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 32px;
border-radius: 14px;
border: 1px solid #e2e8f0;
background: #f8fafc;
cursor: pointer;
font-size: 15px;
font-weight: 600;
color: #0f172a;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.foodord-search-empty__btn:hover {
background: #ffffff;
border-color: #cbd5e1;
transform: translateY(-2px);
color: var(--primary-color, #c9386f);
} .foodord-scroll-nav-spacer {
height: 0;
transition: none;
} .foodord-scroll-nav.is-sticky {
position: fixed;
top: var(--foodord-scroll-nav-top, 0);
left: 0;
right: 0;
width: 100%;
z-index: 9990;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background: #ffffff;
} @media (min-width: 1025px) {
.has-foodord-sidebar .foodord-scroll-nav.is-sticky {
width: 100%;
}
} .foodord-scroll-nav.is-sticky .foodord-scroll-nav__inner {
padding-top: inherit;
padding-bottom: inherit;
min-height: 56px;
}
.foodord-scroll-nav.is-sticky .foodord-scroll-nav__arrow--left {
left: 20px;
}
.foodord-scroll-nav.is-sticky .foodord-scroll-nav__arrow--right {
right: 20px;
left: auto;
} @media (min-width: 1025px) {
.wr-card__header {
transition: top 0.3s ease;
}
.foodord-scroll-nav.is-sticky~.site-main .wr-card__header,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card__header {
top: 60px;
}
}
@media (max-width: 782px) {
body.admin-bar .foodord-scroll-nav.is-sticky~* .wr-card__items {
padding-top: 106px; }
} .foodord-mode-toggle-mobile {
display: none;
}
.foodord-order-toggle {
display: none;
width: 100%;
max-width: 480px;
margin: 0 auto 16px;
padding: 0 1rem;
box-sizing: border-box;
}
@media (max-width: 1024px) {
.foodord-order-toggle {
display: block;
}
}
.foodord-order-toggle+.foodord-scroll-nav {
margin-top: 0;
}
.foodord-sidebar .foodord-mode-toggle-mobile {
margin: 0 0 16px;
}
@media (max-width: 1024px) {
.foodord-mode-toggle-mobile {
display: block;
padding: 0 1rem;
background: #ffffff;
}
.foodord-mode-toggle-mobile::after {
content: "";
display: table;
clear: both;
}
.foodord-mode-toggle-mobile .wr-card__mode-toggle {
position: static;
display: flex;
justify-content: flex-start;
width: 100%;
padding: 0;
background: transparent;
margin-bottom: 12px;
float: left;
}
.foodord-mode-toggle-mobile .wr-card__mode-group {
display: flex;
width: 100%;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 3px;
gap: 0;
position: relative;
z-index: 0;
isolation: isolate;
} .foodord-mode-toggle-mobile .wr-card__mode-slider {
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
width: calc(50% - 3px);
background: var(--button-bg, #c9386f);
border-radius: 9px;
z-index: 1;
pointer-events: none;
transform: translateX(0);
transform-origin: left center;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.foodord-mode-toggle-mobile .wr-card__mode-toggle.is-pickup-active .wr-card__mode-slider {
transform: translateX(100%);
}
.foodord-mode-toggle-mobile .wr-card__mode-toggle.is-delivery-active .wr-card__mode-slider {
transform: translateX(0);
}
.foodord-mode-toggle-mobile .wr-card__mode-btn {
flex: 1;
min-width: 0;
height: 36px;
padding: 0 12px;
border: 0;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background-color: transparent;
color: #64748b;
font-size: 13px;
font-weight: 600;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.foodord-mode-toggle-mobile .wr-card__mode-btn .pickup-icon,
.foodord-mode-toggle-mobile .wr-card__mode-btn .delivery-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
}
.foodord-mode-toggle-mobile .wr-card__mode-btn.is-active {
background: transparent;
color: #ffffff;
}
.foodord-mode-toggle-mobile .wr-card__mode-btn.is-active * {
color: #ffffff;
}
.foodord-mode-toggle-mobile .wr-card__mode-btn.is-closed,
.foodord-mode-toggle-mobile .wr-card__mode-btn[disabled] {
background: transparent;
color: var(--text-color);
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
text-decoration: line-through;
}
.foodord-mode-toggle-mobile .wr-card__mode-btn.is-closed *,
.foodord-mode-toggle-mobile .wr-card__mode-btn[disabled] * {
color: inherit;
} .foodord-mode-toggle-mobile .wr-card__address-bar {
width: 100%;
margin-bottom: 10px;
clear: both;
background: transparent;
justify-content: flex-end;
gap: 1rem;
}
.foodord-mode-toggle-mobile .wr-card__address-left {
gap: 6px;
}
.foodord-mode-toggle-mobile .wr-card__address-left svg {
width: 14px;
height: 14px;
color: var(--text-color);
}
.foodord-mode-toggle-mobile .wr-card__address-change {
height: 24px;
padding: 0 8px;
display: none;
}
} @media (min-width: 1025px) {
.wr-card.has-mode-toggle .wr-card__mode-toggle {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 16px;
border-bottom: 1px solid #f1f5f9;
background: #ffffff;
border-radius: 12px 12px 0 0;
z-index: 11;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: top 0.3s ease;
}
.wr-card.has-mode-toggle .wr-card__mode-group {
display: inline-flex;
align-items: center;
gap: 0;
background: #fbfbfb;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 4px;
position: relative;
z-index: 0;
isolation: isolate;
} .wr-card.has-mode-toggle .wr-card__mode-slider {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
width: calc(50% - 4px);
background: var(--button-bg, #c9386f);
border-radius: 8px;
z-index: 1;
pointer-events: none;
transform: translateX(0);
transform-origin: left center;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wr-card.has-mode-toggle .wr-card__mode-toggle.is-pickup-active .wr-card__mode-slider {
transform: translateX(100%);
}
.wr-card.has-mode-toggle .wr-card__mode-toggle.is-delivery-active .wr-card__mode-slider {
transform: translateX(0);
}
.wr-card.has-mode-toggle .wr-card__mode-btn {
flex: 1;
min-width: 140px;
height: 32px;
padding: 0 16px;
border: 0;
border-radius: 8px;
cursor: pointer;
background-color: transparent;
color: #64748b;
font-weight: 600;
font-size: 13px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
z-index: 2;
}
.wr-card.has-mode-toggle .wr-card__mode-btn .pickup-icon,
.wr-card.has-mode-toggle .wr-card__mode-btn .delivery-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
}
.wr-card.has-mode-toggle .wr-card__mode-btn.is-active {
background: transparent;
color: #ffffff;
transform: scale(1.05);
}
.wr-card.has-mode-toggle .wr-card__mode-btn.is-active * {
color: #ffffff;
}
.wr-card.has-mode-toggle .wr-card__mode-btn.is-closed,
.wr-card.has-mode-toggle .wr-card__mode-btn[disabled] {
background: transparent;
color: var(--text-color);
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
text-decoration: line-through;
}
.wr-card.has-mode-toggle .wr-card__mode-btn.is-closed *,
.wr-card.has-mode-toggle .wr-card__mode-btn[disabled] * {
color: inherit;
}
} @keyframes delivery-wheel-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes delivery-frame-ride {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-0.5px) rotate(-1deg);
}
50% {
transform: translateY(0.2px) rotate(0deg);
}
75% {
transform: translateY(-0.5px) rotate(1deg);
}
}
@keyframes pickup-head-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.8px);
}
}
@keyframes pickup-leg-stride {
0%,
100% {
transform: rotate(0deg) translateY(0);
}
25% {
transform: rotate(-15deg) translateY(-0.5px);
}
50% {
transform: rotate(0deg) translateY(0);
}
75% {
transform: rotate(15deg) translateY(-0.5px);
}
}
@keyframes motion-ground-slide {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 8;
}
} .delivery-icon,
.pickup-icon {
overflow: visible;
}
.delivery-wheel,
.delivery-frame,
.pickup-head,
.pickup-body,
.pickup-leg,
.motion-ground {
transform-origin: center;
transform-box: fill-box;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.motion-ground {
opacity: 0;
transition: opacity 0.3s ease;
} .delivery-icon.is-animating .delivery-wheel {
animation: delivery-wheel-spin 0.6s linear infinite;
}
.delivery-icon.is-animating .delivery-frame {
animation: delivery-frame-ride 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.delivery-icon.is-animating .motion-ground {
opacity: 0.6;
animation: motion-ground-slide 0.3s linear infinite;
} .pickup-icon.is-animating .pickup-head,
.pickup-icon.is-animating .pickup-body {
animation: pickup-head-bounce 0.4s ease-in-out infinite;
}
.pickup-icon.is-animating .pickup-leg-1 {
animation: pickup-leg-stride 0.8s ease-in-out infinite;
transform-origin: top center;
}
.pickup-icon.is-animating .pickup-leg-2 {
animation: pickup-leg-stride 0.8s ease-in-out infinite;
animation-delay: -0.4s;
transform-origin: top center;
}
.pickup-icon.is-animating .motion-ground {
opacity: 0.4;
animation: motion-ground-slide 0.6s linear infinite;
} body:not(.wp-admin) .wr-card.has-mode-toggle .wr-card__header {
top: 70px; } body:not(.wp-admin) .wr-card.has-mode-toggle .wr-card__body {
margin-top: calc(4rem + 16px);
} .wr-card.is-pickup .wr-card__delivery-fee {
display: none;
} @media (min-width: 1025px) {
.foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle .wr-card__header,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle .wr-card__header {
top: 126px; } .foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle .wr-card__mode-toggle,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle .wr-card__mode-toggle {
top: 56px;
}
} @media (min-width: 1025px) {
body:not(.wp-admin) .wr-card.has-mode-toggle.has-address-bar:not(.is-pickup) .wr-card__header {
top: 0;
} body:not(.wp-admin) .wr-card.has-mode-toggle .wr-card__address-bar {
margin-top: 70px; }
} body:not(.wp-admin) .wr-card.is-pickup .wr-card__address-bar {
display: none;
} @media (min-width: 1025px) { body:not(.wp-admin) .wr-card.has-mode-toggle.is-pickup .wr-card__header {
top: 70px; } body:not(.wp-admin) .wr-card.has-mode-toggle.is-pickup .wr-card__body {
margin-top: calc(4rem + 16px); } .foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle.is-pickup .wr-card__header,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle.is-pickup .wr-card__header {
top: 126px; } .foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle.is-pickup .wr-card__mode-toggle,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle.is-pickup .wr-card__mode-toggle {
top: 56px; }
} @media (min-width: 1025px) {
.foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle .wr-card__address-bar,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle .wr-card__address-bar {
margin-top: 126px; }
} @media (min-width: 1025px) {
.foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle.has-address-bar:not(.is-pickup) .wr-card__header,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle.has-address-bar:not(.is-pickup) .wr-card__header {
top: 0;
}
} @media (min-width: 1025px) {
body:not(.wp-admin) .wr-card.has-mode-toggle.has-address-bar:not(.is-pickup) .wr-card__body {
margin-top: 0; padding-top: 0; }
body:not(.wp-admin) .wr-card.has-mode-toggle.has-address-bar:not(.is-pickup) .wr-card__header {
margin-bottom: 0; }
.foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle.has-address-bar:not(.is-pickup) .wr-card__body,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.has-mode-toggle.has-address-bar:not(.is-pickup) .wr-card__body {
margin-top: 0;
padding-top: 0;
}
}
@media (min-width: 1025px) {
.wr-card.wr-card--stable .wr-card__top {
display: flex;
flex-direction: column;
transition: margin-top 0.24s ease;
}
.wr-card.wr-card--stable.has-mode-toggle .wr-card__mode-toggle {
position: static;
top: auto;
left: auto;
right: auto;
padding: 14px 16px;
border-bottom: 1px solid #f4f4f4;
background: #ffffff;
border-radius: 12px 12px 0 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
z-index: auto;
} body:not(.wp-admin) .wr-card.wr-card--stable.has-mode-toggle .wr-card__header {
top: 0;
}
body:not(.wp-admin) .wr-card.wr-card--stable.has-mode-toggle .wr-card__body {
margin-top: 0;
} .wr-card.wr-card--stable.is-pickup .wr-card__address-bar {
display: none;
height: 0;
margin: 0;
padding: 0;
border: 0;
} .foodord-scroll-nav.is-sticky~.site-main .wr-card.wr-card--stable.has-mode-toggle .wr-card__header,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.wr-card--stable.has-mode-toggle .wr-card__header {
top: 0;
}
.foodord-scroll-nav.is-sticky~.site-main .wr-card.wr-card--stable.has-mode-toggle .wr-card__body,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.wr-card--stable.has-mode-toggle .wr-card__body {
margin-top: 0;
} .foodord-scroll-nav.is-sticky~.site-main .wr-card.wr-card--stable.has-mode-toggle .wr-card__address-bar,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.wr-card--stable.has-mode-toggle .wr-card__address-bar {
margin-top: 0;
} .foodord-scroll-nav.is-sticky~.site-main .wr-card.wr-card--stable .wr-card__top,
body.woocommerce-cart .foodord-scroll-nav.is-sticky~.site-main .wr-card.wr-card--stable .wr-card__top {
margin-top: 56px;
} body:not(.wp-admin) .wr-card.wr-card--stable.has-mode-toggle .wr-card__address-bar {
margin-top: 0;
}
} .foodord-store-toast {
position: fixed;
top: 0;
left: 0;
right: 0;
transform: translateY(-120%);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
background: #e7f8ff;
padding: 0.9rem 1.25rem;
letter-spacing: 0.01em;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: transform 0.28s ease, opacity 0.28s ease;
box-sizing: border-box;
}
.foodord-store-toast.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.foodord-store-toast__message {
flex: 1;
font-size: 14px;
font-weight: 400;
}
.foodord-store-toast__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
}
.foodord-store-toast__icon svg {
width: 100%;
height: 100%;
display: block;
}
.foodord-store-toast__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.45rem;
height: 1.45rem;
border: 0;
background: rgba(255, 255, 255, 0.16);
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
flex-shrink: 0;
}
.admin-bar .foodord-store-toast {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .foodord-store-toast {
top: 46px;
}
} #foodord-location-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
z-index: 9999;
}
#foodord-location-modal.is-open {
display: flex;
}
#foodord-location-modal .foodord-modal__content {
width: 94%;
max-width: 580px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid rgba(226, 232, 240, 0.6);
border-radius: 16px;
overflow: hidden;
transform: translateY(12px) scale(0.96);
opacity: 0;
animation: wrcModalIn 240ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
backdrop-filter: blur(10px);
}
#foodord-location-modal .foodord-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid rgba(226, 232, 240, 0.4);
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
#foodord-location-modal .foodord-modal__title {
margin: 0;
font-weight: 600;
font-size: 18px;
color: #0f172a;
line-height: 1.4;
letter-spacing: -0.01em;
}
#foodord-location-modal .foodord-modal__close {
appearance: none;
background: transparent;
border: 0;
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#foodord-location-modal .foodord-modal__close:hover {
background: rgba(0, 0, 0, 0.08);
transform: scale(1.05);
}
#foodord-location-modal .foodord-modal__close:active {
transform: scale(0.95);
}
#foodord-location-modal .foodord-modal__close-icon {
position: relative;
width: 24px;
height: 24px;
color: #4b5563;
}
#foodord-location-modal .foodord-modal__close-icon::before,
#foodord-location-modal .foodord-modal__close-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
background: currentColor;
transform-origin: center;
}
#foodord-location-modal .foodord-modal__close-icon::before {
transform: translate(-50%, -50%) rotate(45deg);
}
#foodord-location-modal .foodord-modal__close-icon::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
#foodord-location-modal .foodord-modal__body {
padding: 22px 24px;
background: #ffffff;
}
#foodord-location-modal .foodord-modal__desc {
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: #64748b;
margin: 0 0 20px 0;
}
#foodord-location-modal .foodord-radius-hint {
margin: 0 0 12px 0;
font-size: 13px;
color: #64748b;
line-height: 1.5;
}
#foodord-radius-feedback {
margin-top: 8px;
}
#foodord-location-modal .foodord-form-row {
margin-bottom: 18px;
}
#foodord-location-modal .foodord-form-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
color: #374151;
line-height: 1.5;
}
#foodord-location-modal .foodord-input-with-clear {
position: relative;
}
#foodord-location-modal .foodord-input-with-clear .foodord-form-input {
padding-right: 48px;
}
#foodord-location-modal .foodord-input-clear {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 34px;
height: 34px;
border: none;
background: transparent;
color: #475569;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
}
#foodord-location-modal .foodord-input-clear span {
font-size: 22px;
font-weight: 300;
line-height: 1;
pointer-events: none;
}
#foodord-location-modal .foodord-input-clear.is-hidden {
display: none;
}
#foodord-location-modal .foodord-form-input {
font-size: 14px;
width: 100%;
height: 44px;
padding: 10px 14px;
border: 1px solid rgba(226, 232, 240, 0.6);
border-radius: 10px;
background: #ffffff;
color: #323232;
outline: none;
box-sizing: border-box;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
line-height: 1.5;
}
#foodord-location-choice.foodord-form-input {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23323333' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 14px 14px;
background-position: right 18px center;
padding-right: 46px;
appearance: none;
cursor: pointer;
}
#foodord-location-modal .foodord-form-feedback.is-success {
color: #059669;
}
#foodord-location-modal .foodord-form-feedback.is-error {
color: #dc2626;
font-size: 14px;
font-weight: 400;
}
#foodord-location-modal .foodord-modal__actions {
display: flex;
gap: 12px;
width: 100%;
padding: 18px 24px;
border-top: 1px solid rgba(226, 232, 240, 0.4);
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
box-sizing: border-box;
}
#foodord-location-modal .foodord-modal__button {
appearance: none;
border: 0;
border-radius: 10px;
height: 44px;
padding: 0 20px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: 0.01em;
flex: 1;
}
#foodord-location-modal .foodord-modal__button--cancel {
background: #f9fafb;
color: #374151;
border: 1px solid #e2e8f0;
}
#foodord-location-modal .foodord-modal__button--cancel:hover {
background: rgba(226, 232, 240, 0.9);
color: #475569;
transform: translateY(-1px);
}
#foodord-location-modal .foodord-modal__button--confirm {
background: linear-gradient(135deg, #c9386f 0%, #b92a61 100%);
color: #ffffff;
border: 1px solid rgba(201, 56, 111, 0.2);
}
#foodord-location-modal .foodord-modal__button--confirm:hover {
background: linear-gradient(135deg, #b92a61 0%, #a02756 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(201, 56, 111, 0.15);
}
@keyframes wrcModalIn {
from {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
} .foodord-locked-field label,
.foodord-locked-input,
.wc-block-components-address-form__city .foodord-locked-input,
.wc-block-components-address-form__postcode .foodord-locked-input {
opacity: 0.6;
cursor: not-allowed;
}
.foodord-locked-input {
background-color: #f5f5f5;
border-color: #e0e0e0;
pointer-events: none;
} .foodord-locked-container {
opacity: 0.6;
position: relative;
overflow: visible;
}
.woocommerce .form-row,
.woocommerce form .form-row,
.wc-block-components-address-form,
.wc-block-components-form,
.wc-block-checkout__form {
overflow: visible;
} .foodord-locked-container input[type="text"],
.foodord-locked-container input[type="tel"],
.foodord-locked-container input[type="search"],
.foodord-locked-container .wc-block-components-text-input input,
.foodord-locked-container .wc-block-components-address-form input {
padding-right: 2rem;
} .foodord-input-wrap {
position: relative;
overflow: visible;
}
.foodord-lock-shell {
display: block;
width: 100%;
} .foodord-input-wrap>.foodord-lockmark {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
z-index: 1000; } .foodord-input-wrap>.foodord-lockmark::after {
content: attr(data-tip);
position: absolute;
right: 0;
left: auto;
bottom: calc(100% + 8px);
top: auto;
font-size: 12px;
line-height: 1.4;
color: #ffffff;
background: #000000;
padding: 8px 10px;
border-radius: 4px;
display: block;
width: 260px;
max-width: min(90vw, 320px);
white-space: normal;
box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
opacity: 0;
pointer-events: none;
transition: opacity .15s ease-in-out;
z-index: 9999;
}
.foodord-input-wrap>.foodord-lockmark:hover::after,
.foodord-input-wrap>.foodord-lockmark:focus-visible::after {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 1024px) { body.woocommerce-checkout .wc-block-checkout__form .foodord-input-wrap>.foodord-lockmark {
cursor: default;
}
body.woocommerce-checkout .wc-block-checkout__form .foodord-input-wrap>.foodord-lockmark::after {
display: none;
}
}
body.foodord-pickup-mode #billing_address_1_field,
body.foodord-pickup-mode #billing_address_2_field,
body.foodord-pickup-mode #billing_city_field,
body.foodord-pickup-mode #billing_postcode_field,
body.foodord-pickup-mode #shipping_address_1_field,
body.foodord-pickup-mode #shipping_address_2_field,
body.foodord-pickup-mode #shipping_city_field,
body.foodord-pickup-mode #shipping_postcode_field,
body.foodord-pickup-mode .wc-block-components-address-form [data-field="address_1"],
body.foodord-pickup-mode .wc-block-components-address-form [data-field="address_2"],
body.foodord-pickup-mode .wc-block-components-address-form [data-field="city"],
body.foodord-pickup-mode .wc-block-components-address-form [data-field="postcode"] {
display: none;
}   body.woocommerce-checkout .wc-block-components-product-details [class*="description"],
body.woocommerce-checkout .wc-block-components-product-metadata [class*="description"],
body.woocommerce-cart .wc-block-components-product-details [class*="description"],
body.woocommerce-cart .wc-block-components-product-metadata [class*="description"],
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details [class*="description"],
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-metadata [class*="description"] {
display: none;
}  .woocommerce-checkout table.shop_table td.product-name>p:not(.wc-item-meta),
.woocommerce-cart table.shop_table td.product-name>p:not(.wc-item-meta) {
display: none;
} .foodord-confirm-status {
margin: 16px 0;
padding: 12px 16px;
background: #ffffff;
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 10px;
font-weight: 600;
color: var(--text-color, #111827);
line-height: 1.4;
} .foodord-ttd {
display: flex;
flex-direction: column;
gap: 12px;
margin: 1rem 0;
padding: 16px;
background: rgb(245 245 245 / 46%);
border: 1px solid rgb(226 226 226);
border-radius: 4px;
}
.foodord-ttd__label {
font-size: 14px;
font-weight: 600;
color: #0f172a;
margin-bottom: 4px;
display: block;
}
.foodord-ttd__label-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.foodord-ttd__select {
appearance: none;
width: 100%;
height: 48px;
padding: 0 16px 0 14px;
background-color: #ffffff;
color: #0f172a;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 14px center;
background-repeat: no-repeat;
background-size: 16px 16px;
transition: border-color 0.15s ease, background-color 0.15s ease;
cursor: pointer;
}
.foodord-ttd__select:hover {
border-color: #cbd5e1;
background-color: rgb(245 245 245);
}
.foodord-ttd__select:focus {
outline: none;
border-color: var(--primary-color, #c9386f);
background-color: #ffffff;
}
.foodord-ttd__select:disabled {
background-color: #f1f5f9;
color: #94a3b8;
cursor: not-allowed;
opacity: 0.7;
}
.foodord-ttd__date {
appearance: none;
width: 100%;
height: 48px;
padding: 0 16px 0 14px;
background-color: #ffffff;
color: #0f172a;
border: 1px solid #e0e0e0;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 14px center;
background-repeat: no-repeat;
background-size: 16px 16px;
transition: border-color 0.15s ease, background-color 0.15s ease;
cursor: pointer;
}
.foodord-ttd__date:hover {
border-color: #cbd5e1;
background-color: rgb(245 245 245);
}
.foodord-ttd__date:focus {
outline: none;
border-color: var(--primary-color, #c9386f);
background-color: #ffffff;
}
.foodord-ttd__date:disabled {
background-color: #f1f5f9;
color: #94a3b8;
cursor: not-allowed;
opacity: 0.7;
}
@media (min-width: 640px) {
.foodord-ttd {
flex-direction: row;
align-items: center;
gap: 16px;
padding: 18px 20px;
}
.foodord-ttd__label-group {
flex: 1;
min-width: 0;
}
} .foodord-lazy-image {
opacity: 0;
transform: scale(1.02);
transition: opacity 0.35s ease, transform 0.35s ease;
will-change: opacity, transform;
}
.foodord-lazy-image.foodord-lazy-loaded {
opacity: 1;
transform: none;
}
body .wr-card .wr-card__mode-group .wr-card__mode-btn:focus,
body .wr-card .wr-card__mode-group .wr-card__mode-btn:focus-visible,
body .wr-card .wr-card__mode-group .wr-card__mode-btn:active,
body .foodord-mode-toggle-mobile .wr-card__mode-group .wr-card__mode-btn:focus,
body .foodord-mode-toggle-mobile .wr-card__mode-group .wr-card__mode-btn:focus-visible,
body .foodord-mode-toggle-mobile .wr-card__mode-group .wr-card__mode-btn:active {
outline: none;
box-shadow: none;
}