/* Shared visual language for the explicitly opted-in Guest views.
   No Bootstrap state classes, display flags or theme variables are redefined. */
body:has(.guest-ui) {
    --guest-surface: #ffffff;
    --guest-background: #f4f6f3;
    --guest-ink: #243b36;
    --guest-muted: #687972;
    --guest-line: #e0e7e1;
    --guest-brand: #245449;
    --guest-soft: #edf4ef;
    --guest-radius: 20px;
    --guest-shadow: 0 6px 24px rgb(24 51 40 / 5%);
    background-color: var(--guest-background);
}
body.theme-dark:has(.guest-ui) {
    --guest-surface: #202b28;
    --guest-background: #17211e;
    --guest-ink: #edf4ef;
    --guest-muted: #acbbb2;
    --guest-line: #35463d;
    --guest-brand: #326757;
    --guest-soft: #283c32;
    --guest-shadow: 0 6px 24px rgb(0 0 0 / 12%);
}
.guest-ui {
    color: var(--guest-ink);
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.guest-ui.page-content,
.guest-ui.content-body {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    background-color: var(--guest-background);
}
.guest-ui > .container {
    max-width: 960px;
    padding-top: 24px;
    padding-left: 20px;
    padding-right: 20px;
}
.guest-ui :is(h2, h3, h5, h6, .title, .sub-title) {
    line-height: 1.4;
    letter-spacing: -.02em;
}
.guest-ui :is(h2, h3) { font-size: clamp(21px, 4.5vw, 28px); }
.guest-ui :is(.card-title, .title-bar h5) { font-size: 19px; font-weight: 600; }
.guest-ui :is(.text-soft, .text-muted) { color: var(--guest-muted) !important; }
.guest-ui :is(.card, .accordion-item) {
    background-color: var(--guest-surface);
    border: 1px solid var(--guest-line);
    border-radius: var(--guest-radius);
    box-shadow: var(--guest-shadow);
}
.guest-ui .card { margin-bottom: 20px; }
.guest-ui .card-header {
    background: transparent;
    border-bottom: 1px solid var(--guest-line);
    padding: 20px;
    border-radius: var(--guest-radius) var(--guest-radius) 0 0;
}
.guest-ui .card-header .card-title { margin-bottom: 0; color: var(--guest-ink); }
.guest-ui .card-body { padding: 20px; }
.guest-ui :is(.btn, .delivery-btn) {
    min-height: 48px;
    border-radius: 14px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
    touch-action: manipulation;
    transition: box-shadow .18s ease, background-color .18s ease;
}
.guest-ui .btn-primary {
    background: var(--guest-brand);
    border-color: var(--guest-brand);
    color: #fff;
    box-shadow: 0 4px 12px rgb(24 65 45 / 12%);
}
.guest-ui .btn-primary:hover { background: #193f35; border-color: #193f35; }
.guest-ui .btn-primary:disabled { opacity: .5; box-shadow: none; }
.guest-ui .btn-secondary {
    background: var(--guest-soft);
    border-color: var(--guest-line);
    color: var(--guest-ink);
}
.guest-ui .btn-warning { background: #faf0d8; border-color: #ebd9ad; color: #705014; }
.guest-ui :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--primary, #6aa987);
    outline-offset: 3px;
}
.guest-ui :is(.form-control, .form-select, .dz-form-select) {
    min-height: 52px;
    border: 1px solid var(--guest-line);
    border-radius: 14px;
    background-color: var(--guest-surface);
    color: var(--guest-ink);
    font-size: 16px;
    line-height: 1.5;
    padding: 13px 16px;
}
.guest-ui .form-select { padding-right: 38px; }
.guest-ui textarea.form-control { min-height: 124px; resize: vertical; }
.guest-ui .form-control::placeholder { color: var(--guest-muted); opacity: 1; }
.guest-ui :is(.form-control, .form-select):focus {
    border-color: #789e87;
    box-shadow: 0 0 0 3px rgb(74 117 86 / 12%);
}
.guest-ui .input-group-icon .input-group-text {
    background-color: var(--guest-soft);
    border-color: var(--guest-line);
    color: var(--guest-muted);
    border-radius: 14px;
    min-width: 44px;
    justify-content: center;
}
.guest-ui .input-group-icon .form-control { min-width: 0; }
.guest-ui .input-group-icon > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.guest-ui .input-group-icon > .input-group-text:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.guest-ui .input-group-icon > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.guest-ui .input-group-icon > .input-group-text:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.guest-ui :is(.form-check-label, .text-notify) { font-size: 15px; line-height: 1.5; }
.guest-ui .form-check-input { accent-color: var(--guest-brand); cursor: pointer; }
.guest-ui .form-check-input:checked { background-color: var(--guest-brand); border-color: var(--guest-brand); }
.guest-ui .alert { border-radius: 16px; padding: 16px 18px; line-height: 1.65; }
.guest-ui .alert-warning { background: #fff5df; border-color: #ecdeb8; color: #795814; }
.guest-ui .alert-info { background: #eaf3f8; border-color: #cddfe9; color: #2d5e76; }
.guest-ui .accordion { margin-bottom: 16px; }
.guest-ui .accordion-item { margin-bottom: 12px; }
.guest-ui .accordion-button {
    min-height: 64px;
    border-radius: 18px;
    padding: 18px;
    color: var(--guest-ink);
    background-color: var(--guest-surface);
    gap: 12px;
}
.guest-ui .accordion-button:not(.collapsed) { background-color: var(--guest-soft); box-shadow: none; }
.guest-ui .accordion-button > .d-flex { min-width: 0; }
.guest-ui .accordion-body { padding: 18px; }
.guest-ui .icon-box { flex-shrink: 0; border-radius: 14px; }
.guest-ui .summery-list > li { gap: 12px; padding: 14px; border-bottom: 1px solid var(--guest-line); }
.guest-ui .summery-list .order-name { margin: 0; }
.guest-ui .dz-list .item-link { min-height: 64px; padding: 18px 36px 18px 16px; }
.guest-ui .dz-list .item-link .title { font-size: 15px; color: var(--guest-ink); }
.guest-ui .dz-list li + li { border-top: 1px solid var(--guest-line); }
.guest-ui .footer.fixed {
    border-top: 1px solid var(--guest-line);
    box-shadow: 0 -6px 24px rgb(24 51 40 / 5%);
}
.guest-ui .footer.fixed > .container { max-width: 960px; padding-top: 12px; }
.guest-ui .footer-btn { gap: 12px; }
.guest-ui .footer-btn > :is(.btn, a) { min-width: 0; }
.guest-ui .modal-content {
    border: 1px solid var(--guest-line);
    border-radius: 24px;
    background: var(--guest-surface);
    color: var(--guest-ink);
    box-shadow: 0 20px 70px rgb(18 36 28 / 20%);
}
.guest-ui :is(.modal-header, .modal-body, .modal-footer) { padding: 20px; border-color: var(--guest-line); }
.guest-ui .modal-body img { max-width: 100%; height: auto; border-radius: 14px; }
.guest-ui .btn-close { min-width: 44px; min-height: 44px; padding: 8px; box-sizing: border-box; }
.guest-ui .modal-dialog { margin: 20px auto; width: calc(100% - 32px); }

/* Shared layout is untouched; these rules activate only on opted-in views. */
body:has(.guest-ui) .page-wraper > .header {
    background-color: var(--guest-surface);
    border-bottom-color: var(--guest-line);
}
body:has(.guest-ui) .header .main-bar {
    background-color: var(--guest-surface);
    box-shadow: 0 3px 18px rgb(24 51 40 / 4%);
}
body:has(.guest-ui) .header .title { color: var(--guest-ink); font-size: 15px; }
body:has(.guest-ui) .menubar-area {
    background-color: var(--guest-surface);
    border-top-color: var(--guest-line) !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgb(24 51 40 / 5%);
}
body:has(.guest-ui) .menubar-area .nav-link { min-height: 48px; border-radius: 14px; }
body:has(.guest-ui) .menubar-area .nav-link:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
body:has(.guest-ui) .offcanvas { background-color: var(--guest-surface); color: var(--guest-ink); }
body:has(.guest-ui) .flatpickr-calendar { border-radius: 16px; box-shadow: 0 14px 44px rgb(24 51 40 / 18%); }
@media (min-width: 768px) {
    .guest-ui > .container { padding-top: 32px; padding-left: 28px; padding-right: 28px; }
    .guest-ui .card-body { padding: 26px; }
}
@media (max-width: 359px) {
    .guest-ui > .container { padding-left: 12px; padding-right: 12px; }
    .guest-ui :is(.card-body, .card-header, .accordion-button) { padding: 14px; }
    .guest-ui .footer-btn { gap: 8px; }
    .guest-ui .btn { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .guest-ui :is(.btn, .delivery-btn) { transition: none; }
}

/* Neutralize the vendor accordion's negative margins on narrow screens. */
.guest-ui .accordion.style-3 .accordion-item { margin: 0 0 14px; padding: 0; border: 1px solid var(--guest-line); border-radius: 18px; }
.guest-ui .accordion.style-3 .accordion-item .accordion-header .accordion-button { padding: 16px; border-radius: 18px; color: var(--guest-ink); background-color: var(--guest-surface); }
.guest-ui .accordion.style-3 .accordion-item .accordion-body { padding: 16px; background-color: var(--guest-surface); }
/* These legacy controls explicitly keep a white inline background. */
.guest-ui textarea.form-control,
.guest-ui .dz-form-select { color: #243b36; background-color: #fff; }