/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbars for all browsers */
* {
    /* Firefox */
    scrollbar-width: none;
    /* IE and Edge */
    -ms-overflow-style: none;
}

/* Webkit browsers (Chrome, Safari, newer Edge) */
*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    overflow: hidden;
}

html {
    /* Prevent pull-to-refresh bounce on iOS */
    overscroll-behavior-y: contain;
    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    overflow: hidden;
}

body {
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    overflow: hidden;
}

:root {
    --body-background-color: #212121;
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #e22929;
    --text-color: #333;
    --bg-color: #f7f7f7;
    --white: #FFFFFF;
    --white-text: #c9c9c9;
    --spacing: 1rem;
    --default-font-size-value: 16;
    --list-option-background: #f7f7f7;
    --orange: #ff6439;
    --review-star-color: #ffbf1d;
    --review-idle-star-color:#4d4d4d;
    --green-auth-color: #0cc60ccc;
    --shared-bg: url("");

    /* Order Status Colors */
    --order-status-pending-background: #e8b84b;
    --order-status-accepted-background: #4b9fe8;
    --order-status-preparing-background: #a78bfa;
    --order-status-ready-background: #34d399;
    --order-status-in_transit-background: #fb923c;
    --order-status-delivered-background: #6b7280;
    --order-status-cancelled-background: #ef4444;
    --order-status-no_show-background: #ec4899;

    --order-status-pending-color: #333;
    --order-status-accepted-color: #333;
    --order-status-preparing-color: #333;
    --order-status-ready-color: #333;
    --order-status-in_transit-color: #333;
    --order-status-delivered-color: #fff;
    --order-status-cancelled-color: #fff;
    --order-status-no_show-color: #fff;

    /* Payment Status Colors */
    --payment-status-pending-background: #facc15;   /* amber-400 */
    --payment-status-paid-background: #22c55e;      /* green-500 */
    --payment-status-refunded-background: #6366f1;  /* indigo-500 */
    --payment-status-cancelled-background: #ef4444; /* red-500 */

    --payment-status-pending-color: #333;
    --payment-status-paid-color: #fff;
    --payment-status-refunded-color: #fff;
    --payment-status-cancelled-color: #fff;

    /* Payment Method Colors */
    /* Card (Stripe) → digital / tech */
    --payment-method-card-background: #0ea5e9;   /* sky-100 */
    --payment-method-card-border: #0ea5e9;       /* sky-500 */
    --payment-method-card-color: #FFF;

    /* Cash → physical / manual */
    --payment-method-cash-background: var(--green-auth-color);   /* neutral-100 */
    --payment-method-cash-border: var(--green-auth-color);       /* neutral-400 */
    --payment-method-cash-color: #FFF;

    /* Points → loyalty / rewards */
    --payment-method-points-background: #f59e0b; /* amber-100 */
    --payment-method-points-border: #f59e0b;     /* amber-500 */
    --payment-method-points-color: #FFF;

    /* Icons */
    --address-selector-icon-color: #e22929;
    --cart-icon-color: #FFFFFF;

    /* Brand colors */
    --whatsapp-background-color: #25D366;
    --whatsapp-text-color: #FFFFFF;
}

body {
    font-family: 'SF-Pro-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.3;
    background-color: var(--body-background-color);
    /* Prevent text selection on mobile */
    -webkit-user-select: none;
    user-select: none;
    /* Safe area for notched devices */
    padding-bottom: var(--safe-area-bottom, 0);
    /* Font smoothing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    max-width: 100%;
    margin: 0 auto;
}

/* Header Styles */
header {
    background: linear-gradient(to left, var(--orange), var(--accent-color));
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 2;
    top: 0;
    opacity: 0;
    transition: 0.5s cubic-bezier(0.64, 0, 0.4, 1);
    padding: 0 1rem;
}

main {
    transition: 0.5s cubic-bezier(0.64, 0, 0.4, 1);
    opacity: 0;
    position: relative;
    margin-top: calc(var(--safe-area-top, 0px) + 30px);
    padding-bottom: var(--safe-area-bottom, 0);
}

.fade-in {
    transition: 0.5s cubic-bezier(0.64, 0, 0.4, 1);
}

header.fade-in,
main.fade-in,
footer.fade-in {
    opacity: 1;
}

.login-logo {
    width: 200px;
    height: auto;
    object-fit: contain;
}

.password-toggle-btn {
    top: 14px;
    right: 1rem;
    font-size: 12px;
    color: gray;
}

.auth-container {
    max-width: 400px;
    position: relative;
    margin: 0 auto;
    padding: 0 2.6rem;
}

.auth-container input[type="password"],
.auth-container input[type="text"],
.auth-container input[type="tel"],
.auth-container input[type="number"],
.auth-container input[type="email"] {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--white);
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-color);
    background-color: var(--white);
    margin-bottom: 0.5rem;
}

.auth-container input[type="email"] {
    text-transform: lowercase;
}

.auth-container input[type="password"] {
    padding-right: 60px;
}

.auth-container input[type="password"]:focus,
.auth-container input[type="text"]:focus,
.auth-container input[type="tel"]:focus,
.auth-container input[type="number"]:focus,
.auth-container input[type="email"]:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 10px -5px var(--primary-color);
}

.auth-container .profile-form-phone-prefix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 120px;
    border: 2px solid var(--white);
    background-color: var(--white);
    height: 46px;
}

.button-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 2px solid #ebebeb;
    background-color: #ebebeb;
    height: 46px;
}
.button-select-btn[disabled] {
    border-color: #b8b8b8 !important;
    background-color: #b8b8b8 !important;
    color: #858585 !important;
    cursor: not-allowed;
    pointer-events: none
}

.button-select-btn[disabled] span,
.button-select-btn[disabled] i {
    opacity: 0.5;
}

.button-select-btn i {
    font-size: 18px;
    transition: 0.15s cubic-bezier(0.64, 0, 0.4, 1);
}

.button-select-btn i.active {
    transform: scaleY(-1);
}

.auth-container .profile-form-phone-prefix-btn i {
    font-size: 18px;
    transition: 0.15s cubic-bezier(0.64, 0, 0.4, 1);
}

.auth-container .profile-form-phone-prefix-btn i.active {
    transform: scaleY(-1);
}

.auth-container input[name="phone_number"] {
    width: calc(100% - 134px);
    display: inline !important;
    margin-left: 10px;
}

.auth-container input[name="birthday"] {
    text-transform: none;
}

.auth-container input[disabled] {
    background-color: #f3f3f3;
    color: #555555;
    cursor: not-allowed;
}

.phone-prefix-dropdown {
    position: absolute;
    width: 240px;
    background-color: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    list-style: none;
    max-height: 0px;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    transition: 0.15s cubic-bezier(0.64, 0, 0.4, 1);
}

.button-select-dropdown {
    position: absolute;
    width: 100%;
    background-color: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    list-style: none;
    max-height: 0px;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    transition: 0.15s cubic-bezier(0.64, 0, 0.4, 1);
}

.assign-driver-dropdown-wrapper .button-select-dropdown {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.phone-prefix-dropdown.active,
.button-select-dropdown.active {
    max-height: 200px;
    overflow-y:auto;
    opacity: 1;
    pointer-events: all;
}

.phone-prefix-dropdown li,
.button-select-dropdown li {
    padding: 0.6rem 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0 8px;
    color: var(--text-color);
    border-bottom: 1px solid #f3f3f3;
}

.phone-prefix-dropdown li:hover,
.button-select-dropdown li:hover {
    background-color: #f3f3f3;
}

.auth-container button[type="submit"] {
    background: linear-gradient(to bottom, rgb(255, 162, 91), rgb(176, 38, 0));
    color: var(--white);
    width: 100%;
}

.legal-documentation-content {
    font-size: 13px;
}

.legal-documentation-content h1 {
    font-family: 'SF-Pro-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text-color);
    margin-bottom: 1rem;
    margin-top: 0;
    font-size: 1.25rem;
}

.legal-documentation-content h2 {
    font-family: 'SF-Pro-SemiBold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
    font-size: 1.15rem;
}

.legal-documentation-content h3 {
    font-family: 'SF-Pro-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    margin-top: 1.25rem;
    font-size: 0.95rem;
}

.legal-documentation-content p {
    color: var(--text-color);
    margin-bottom: 0.75rem;
}

.legal-documentation-content li {
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.legal-documentation-content p,
.legal-documentation-content li {
    text-align: left;
}

.legal-documentation-content ul,
.legal-documentation-content ol {
    color: var(--text-color);
    margin-left: 1rem;
    margin-bottom: 0.75rem;
}

.legal-documentation-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    margin-top: 1rem;
    border: 1px solid #ebebeb;
}

.legal-documentation-content table th,
.legal-documentation-content table td {
    border: 1px solid #ebebeb;
    padding: 0.5rem;
    text-align: left;
}

.legal-documentation-content table th {
    background-color: #f3f3f3;
}

/* --------------------- *
    ORDERS LIST
*----------------------- */
.kitchen-orders-list {
    display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.kitchen-order-item {

}

.bottom-popup-window.dragging {
    transition: none;
    user-select: none;
}

/* 
==================================
    CUSTOM CONFIRM POPUP
==================================
*/
.custom-confirm-popup-overlay,
.custom-alert-overlay {
    position: fixed;
    z-index: 39;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: 0.15s ease-in-out;
}

.assign-driver-overlay {
    position: fixed;
    z-index: 37;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: 0.15s ease-in-out;
}

.custom-confirm-popup-overlay.active,
.custom-alert-overlay.active,
.assign-driver-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.custom-confirm-popup-wrapper,
.custom-alert-wrapper {
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;    
    padding: 1.3rem;
}

.assign-driver-wrapper {
    position: fixed;
    z-index: 38;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;    
    padding: 1.3rem;
}

.custom-confirm-popup-wrapper.active,
.custom-alert-wrapper.active,
.assign-driver-wrapper.active {
    pointer-events: auto;
}

.custom-confirm-popup-content,
.custom-alert-content,
.assign-driver-content {
    position: relative;
    display: block;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding: 1.3rem;
    background-color: white;
    border-radius: 12px;
    opacity: 0;
    transform: scale(0.9) translateY(5px);
    transition: all 0.15s cubic-bezier(0.42, 0, 0.51, 2);
}

.custom-confirm-popup-content.active,
.custom-alert-content.active,
.assign-driver-content.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.custom-confirm-popup-header {
    padding: 0 0 0.5rem 0;
    margin: 0 0 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.custom-alert-header,
.assign-driver-header {
    display: flex;
    align-items: center;
    gap: 0 10px;
    padding: 0 0 0.5rem 0;
    margin: 0 0 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
}

#custom-alert-icon {
    font-size: 1.6rem;
}

.custom-confirm-popup-buttons,
.custom-alert-buttons,
.assign-driver-popup-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0 10px;
    margin-top: 1rem;
}

.custom-confirm-popup-buttons button,
.custom-alert-buttons button,
.assign-driver-popup-buttons button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 6px;
    width: 100%;
    cursor: pointer;
    white-space: nowrap;
}

.custom-confirm-popup-buttons button i,
.custom-alert-buttons button i,
.assign-driver-popup-buttons button i {
    line-height: 1;
    font-size: 1.2rem;
}

.custom-confirm-popup-confirm-btn,
.custom-alert-confirm-btn,
.assign-driver-popup-confirm-btn {
    background-color: var(--accent-color);
    color: var(--white);
}

.custom-confirm-textarea-wrapper label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-family: 'SF-Pro-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.custom-confirm-textarea-wrapper textarea {
    width: 100%;
    padding: 1rem 1rem;
    border: 1px solid var(--white-text);
    border-radius: 8px;
    outline: none;
    background-color: var(--white);
    color: var(--text-color);
    font-family: 'SF-Pro-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 1rem;
    resize: none !important;
}

/*
===============================================
    LOADING ANIMATIONS
===============================================
*/
.loading-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    line-height: 1;
}

.loading-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bounce 0.5s infinite alternate;
    line-height: 1;
}

/* Stagger each dot with a delay */
.loading-dot:nth-child(2) { animation-delay: 0.25s; }
.loading-dot:nth-child(3) { animation-delay: 0.5s; }

@keyframes bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-4px); }
}

/*
===============================================
    FONT FAMILIES, SIZES AND TEXT SETTINGS
===============================================
*/
 .sf-pro-light {
 	font-family: 'SF-Pro-Light', sans-serif;
 }

 .sf-pro-regular {
 	font-family: 'SF-Pro-Regular', sans-serif;
 }

 .sf-pro-medium {
 	font-family: 'SF-Pro-Medium', sans-serif;
 }

 .sf-pro-semibold {
 	font-family: 'SF-Pro-Semibold', sans-serif;
 }

 .sf-pro-bold {
 	font-family: 'SF-Pro-Bold', sans-serif;
 }

 .sf-pro-heavy {
 	font-family: 'SF-Pro-Heavy', sans-serif;
 }

 .sf-pro-black {
 	font-family: 'SF-Pro-Black', sans-serif;
 }

 .sf-pro-small-italic {
    font-family: 'SF-Pro-Regular', sans-serif;
    font-size: 0.8rem;
    font-style: italic;
 }

 .lekton-regular {
    font-family: 'Lekton-Regular', monospace, 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 }

 .lekton-bold {
    font-family: 'Lekton-Bold', monospace, 'SF Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 }

 .fs-5 {
 	font-size: calc(5 / var(--default-font-size-value) * 1rem);
 }

 .fs-8 {
 	font-size: calc(8 / var(--default-font-size-value) * 1rem);
 }

 .fs-10 {
 	font-size: calc(10 / var(--default-font-size-value) * 1rem);
 }

 .fs-11 {
 	font-size: calc(11 / var(--default-font-size-value) * 1rem);
 }

 .fs-12 {
 	font-size: calc(12 / var(--default-font-size-value) * 1rem);
 }

 .fs-13 {
 	font-size: calc(13 / var(--default-font-size-value) * 1rem);
 }

 .fs-14 {
 	font-size: calc(14 / var(--default-font-size-value) * 1rem);
 }

 .fs-15 {
 	font-size: calc(15 / var(--default-font-size-value) * 1rem);
 }

 .fs-16 {
 	font-size: calc(16 / var(--default-font-size-value) * 1rem);
 }

 .fs-18 {
 	font-size: calc(18 / var(--default-font-size-value) * 1rem);
 }

 .fs-20 {
 	font-size: calc(20 / var(--default-font-size-value) * 1rem);
 }

 .fs-22 {
 	font-size: calc(22 / var(--default-font-size-value) * 1rem);
 }

 .fs-24 {
 	font-size: calc(24 / var(--default-font-size-value) * 1rem);
 }

 .fs-25 {
 	font-size: calc(25 / var(--default-font-size-value) * 1rem);
 }

 .fs-26 {
 	font-size: calc(26 / var(--default-font-size-value) * 1rem);
 }

 .fs-28 {
 	font-size: calc(28 / var(--default-font-size-value) * 1rem);
 }

 .fs-30 {
 	font-size: calc(30 / var(--default-font-size-value) * 1rem);
 }

 .small-text {
    line-height: 1.3 !important;
 }

.bm-text-center {
    display: block;
    text-align: center;
}

.bm-text-left {
    display: block;
    text-align: left;
}

.bm-text-right {
    display: block;
    text-align: right;
}

.capitalize {
    text-transform: capitalize;
}

.uppercase {
    text-transform: uppercase;
}

.text-underline {
    text-decoration: underline;
}

.cursor-pointer {
    cursor: pointer;
}

/*
==================================
    TEXT COLORS
==================================
*/
.text-color-black {
    color: var(--text-color);
}

.text-color-white {
    color: var(--white);
}

.text-color-white-text {
    color: var(--white-text);
}

.text-color-orange {
    color: var(--orange);
}

/*
==================================
    LINE HEIGHTS
==================================
*/
 .line-height-0 {
 	line-height: 1;
 }

 .line-height-1 {
 	line-height: 1.25;
 }

 .line-height-2 {
 	line-height: 1.5;
 }

 .line-height-3 {
 	line-height: 1.75;
 }

 .line-height-4 {
 	line-height: 2;
 }

 /*
==================================
    CURSORS
==================================
*/
 .cursor-pointer {
 	cursor: pointer;
 }
 .cursor-default {
 	cursor: default;
 }
 .cursor-not-allowed {
 	cursor: not-allowed;
 }
/*
==================================
    FIXED LAYOUTS
==================================
*/
.fixed-layout {
	position: fixed;
}

.w-full {
	width: 100%;
}

.h-full {
	height: 100%;
}

.fixed-layout-content {
	position: fixed;
}

.overflow-y-auto {
	overflow-y: auto;
}

/*
==================================
    FLEX LAYOUTS
==================================
*/
.flex {
	display: flex;
	height: 100%;
}

.vertical-top {
	align-items: flex-start;
}

.vertical-center {
	align-items: center;
}

.vertical-bottom {
	align-items: flex-end;
}

.horizontal-left {
	justify-content: flex-start;
}

.horizontal-center {
	justify-content: center;
}

.horizontal-right {
	justify-content: flex-end;
}

.horizontal-space-between {
	justify-content: space-between;
}

.flex-column {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.flex-no-shrink {
	flex-shrink: 0;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.gap-0 {
	gap: 0;
}

.gap-5 {
	gap: 5px;
}

.gap-10 {
	gap: 10px;
}

.gap-15 {
	gap: 15px;
}

.gap-20 {
	gap: 20px;
}

.gap-0-5 {
    gap: 0 5px;
}

.gap-0-10 {
    gap: 0 10px;
}

/* 
==================================
	ABSOLUTE LAYOUTS
==================================
 */
.absolute {
	position: absolute;
}

.absolute-top {
	top: 0;
	left: 0;
}

.absolute-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.absolute-top-left {
	top: 0;
	left: 0;
}

.absolute-top-right {
	top: 0;
	right: 0;
}

.absolute-bottom-left {
	bottom: 0;
	left: 0;
}

.absolute-bottom-right {
	bottom: 0;
	right: 0;
}

/*
==================================
    STICKY LAYOUTS
==================================
*/
.sticky-top {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 5;
}

/*
==================================
    MARGINS
==================================
*/
.mt-safe-area {
	margin-top: var(--safe-area-top, var(--default-padding));
}

.mt-0 {
	margin-top: 0;
}

.mt-5 {
	margin-top: 0.3125rem;
}

.mt-10 {
	margin-top: 0.625rem;
}

.mt-15 {
	margin-top: 0.9375rem;
}

.mt-20 {
	margin-top: 1.25rem;
}

.mt-25 {
	margin-top: 1.5625rem;
}

.mt-30 {
	margin-top: 1.875rem;
}

.mt-05rem {
    margin-top: 0.5rem;
}

.mt-1rem {
    margin-top: 1rem;
}

.mt-2rem {
    margin-top: 2rem;
}

.mb-safe-area {
	margin-bottom: var(--safe-area-top, var(--default-padding));
}

.mb-0 {
	margin-bottom: 0;
}

.mb-5 {
	margin-bottom: 0.3125rem;
}

.mb-10 {
	margin-bottom: 0.625rem;
}

.mb-15 {
	margin-bottom: 0.9375rem;
}

.mb-20 {
	margin-bottom: 1.25rem;
}

.mb-25 {
	margin-bottom: 1.5625rem;
}

.mb-30 {
	margin-bottom: 1.875rem;
}

.mb-05rem {
    margin-bottom: 0.5rem;
}

.mb-1rem {
    margin-bottom: 1rem;
}

.ml-0 {
	margin-left: 0;
}

.ml-3 {
    margin-left: 0.1875rem;
}

.ml-5 {
	margin-left: 0.3125rem;
}

.ml-10 {
	margin-left: 0.625rem;
}

.ml-15 {
	margin-left: 0.9375rem;
}

.ml-20 {
	margin-left: 1.25rem;
}

.mr-0 {
	margin-right: 0;
}

.mr-5 {
	margin-right: 0.3125rem;
}

.mr-10 {
	margin-right: 0.625rem;
}

.mr-15 {
	margin-right: 0.9375rem;
}

.mr-20 {
	margin-right: 1.25rem;
}

/*
==================================
    PADDINGS
==================================
*/
.pt-safe-area {
	padding-top: var(--safe-area-top, var(--default-padding));
}

.pt-0 {
	padding-top: 0;
}

.pt-5 {
	padding-top: 0.3125rem;
}

.pt-10 {
	padding-top: 0.625rem;
}

.pt-15 {
	padding-top: 0.9375rem;
}

.pt-20 {
	padding-top: 1.25rem;
}

.pt-1rem {
    padding-top: 1rem;
}

.pb-safe-area {
	padding-bottom: var(--safe-area-top, var(--default-padding));
}

.pb-0 {
	padding-bottom: 0;
}

.pb-5 {
	padding-bottom: 0.3125rem;
}

.pb-10 {
	padding-bottom: 0.625rem;
}

.pb-15 {
	padding-bottom: 0.9375rem;
}

.pb-20 {
	padding-bottom: 1.25rem;
}

.pb-1rem {
    padding-bottom: 1rem;
}

.pl-0 {
	padding-left: 0;
}

.pl-5 {
	padding-left: 0.3125rem;
}

.pl-10 {
	padding-left: 0.625rem;
}

.pl-15 {
	padding-left: 0.9375rem;
}

.pl-20 {
	padding-left: 1.25rem;
}

.pl-30 {
	padding-left: 2.75rem;
}

.pl-40 {
	padding-left: 3.75rem;
}

.pl-50 {
	padding-left: 4.75rem;
}

.pl-1rem {
    padding-left: 1.3rem;
}

.pr-0 {
	padding-right: 0;
}

.pr-5 {
	padding-right: 0.3125rem;
}

.pr-10 {
	padding-right: 0.625rem;
}

.pr-15 {
	padding-right: 0.9375rem;
}

.pr-20 {
	padding-right: 1.25rem;
}

.pr-30 {
	padding-right: 1.875rem;
}

.pr-40 {
	padding-right: 2.5rem;
}

.pr-50 {
	padding-right: 3.25rem;
}

.pr-1rem {
    padding-right: 1.3rem;
}

/*
==================================
    ELEMENTS
==================================
*/
.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.inline {
	display: inline;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.fixed {
	position: fixed;
}

.fixed-top {
	top: 0;
	left: 0;
	width: 100%;
}

/* 
==================================
	T,B,L,R POSITIONS
==================================
 */
.top-0 {
	top: 0;
}
.top-1 {
	top: calc(1 / var(--default-font-size-value) * 1rem);
}
.top-2 {
	top: calc(2 / var(--default-font-size-value) * 1rem);
}
.top-3 {
	top: calc(3 / var(--default-font-size-value) * 1rem);
}
.top-4 {
	top: calc(4 / var(--default-font-size-value) * 1rem);
}
.top-5 {
	top: calc(5 / var(--default-font-size-value) * 1rem);
}
.top-6 {
	top: calc(6 / var(--default-font-size-value) * 1rem);
}
.top-7 {
	top: calc(7 / var(--default-font-size-value) * 1rem);
}
.top-8 {
	top: calc(8 / var(--default-font-size-value) * 1rem);
}
.top-9 {
	top: calc(9 / var(--default-font-size-value) * 1rem);
}
.top-10 {
	top: calc(10 / var(--default-font-size-value) * 1rem);
}
.top-50p {
	top: 50%;
}
.left-0 {
	left: 0;
}
.left-1 {
	left: calc(1 / var(--default-font-size-value) * 1rem);
}
.left-2 {
	left: calc(2 / var(--default-font-size-value) * 1rem);
}
.left-3 {
	left: calc(3 / var(--default-font-size-value) * 1rem);
}
.left-4 {
	left: calc(4 / var(--default-font-size-value) * 1rem);
}
.left-5 {
	left: calc(5 / var(--default-font-size-value) * 1rem);
}
.left-6 {
	left: calc(6 / var(--default-font-size-value) * 1rem);
}
.left-7 {
	left: calc(7 / var(--default-font-size-value) * 1rem);
}
.left-8 {
	left: calc(8 / var(--default-font-size-value) * 1rem);
}
.left-9 {
	left: calc(9 / var(--default-font-size-value) * 1rem);
}
.left-10 {
	left: calc(10 / var(--default-font-size-value) * 1rem);
}
.left-15 {
	left: calc(15 / var(--default-font-size-value) * 1rem);
}
.left-50p {
	left: 50%;
}

/* 
==================================
	HEIGHTS
==================================
 */
.h-10 {
	height: calc(10 / var(--default-font-size-value) * 1rem);
}
.h-15 {
	height: calc(15 / var(--default-font-size-value) * 1rem);
}
.h-20 {
	height: calc(20 / var(--default-font-size-value) * 1rem);
}
.h-25 {
	height: calc(25 / var(--default-font-size-value) * 1rem);
}
.h-30 {
	height: calc(30 / var(--default-font-size-value) * 1rem);
}
.h-35 {
	height: calc(35 / var(--default-font-size-value) * 1rem);
}
.h-40 {
	height: calc(40 / var(--default-font-size-value) * 1rem);
}
.h-45 {
	height: calc(45 / var(--default-font-size-value) * 1rem);
}
.h-50 {
	height: calc(50 / var(--default-font-size-value) * 1rem);
}

/* 
==================================
	TRANSFORMATIONS
==================================
 */
.transform-center-y {
	top: 50%;
	transform: translateY(-50%);
}

/* 
==================================
	BORDER RADIUS
==================================
 */
.border-radius-default {
	border-radius: var(--default-border-radius);
}

/* 
==================================
	BOX SIZING
==================================
 */
.border-box {
	box-sizing: border-box;
}

/* 
==================================
	BORDERS
==================================
 */
.border-none {
	border: none;
}

/* 
==================================
	INPUTS
==================================
 */
.focus-none:focus {
	outline: none;
	box-shadow: none;
}
.active-none:active {
	outline: none;
	box-shadow: none;
}
.visited-none:visited {
	outline: none;
	box-shadow: none;
}

.input-error {
    border-color: var(--accent-color) !important;
}

/* Touch-friendly buttons and interactive elements */
button,
input,
select,
textarea {
    -webkit-user-select: text;
    user-select: text;
    min-height: 44px; /* iOS minimum tap target */
    cursor: pointer;
}

button,
a.btn {
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    transition: transform 0.1s cubic-bezier(0.64, 0, 0.4, 1), background-color 0.2s cubic-bezier(0.64, 0, 0.4, 1);
    touch-action: manipulation;
    color: var(--text-color);
}

button:active,
a.btn:active {
    transform: scale(0.97);
}

/* ============================================
   Loading Spinner (iOS-style)
   ============================================ */

/* Overlay that covers the entire screen */
.loading-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(33, 33, 33, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    /* backdrop-filter: blur(0px); */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-spinner-overlay.active {
    opacity: 1;
    visibility: visible;
    /* backdrop-filter: blur(10px); */
}

/* Semi-transparent square container */
.loading-spinner-container {
    background-color: rgba(40, 40, 40, 0.9);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

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

/* iOS-style spinner with 12 bars */
.loading-spinner {
    width: 50px;
    height: 50px;
    position: relative;
    animation: rotate 1s linear infinite;
}

/* Create 12 bars in a circle */
.loading-spinner::before,
.loading-spinner::after,
.loading-spinner .bar {
    content: '';
    position: absolute;
    width: 4px;
    height: 14px;
    background: #ffffff;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform-origin: 0 -18px;
}

/* Generate 12 bars with different rotations and opacities */
.loading-spinner::before {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
}

.loading-spinner::after {
    transform: translate(-50%, -50%) rotate(30deg);
    opacity: 0.9;
}

/* We'll use JavaScript to create the remaining 10 bars */

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Alternative: Simple circular spinner if bars are too complex */
.loading-spinner-simple {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Loading text (optional) */
.loading-spinner-text {
    color: #ffffff;
    font-family: 'SF-Pro-Medium', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    margin-top: 16px;
    opacity: 0.9;
}

/* ============================================
    FONT FAMILIES
   ============================================ */

@font-face {
    font-family: 'SF-Pro-Light';
    src: url('fonts/SF-Pro/SF-Pro-Display-Light.otf') format('opentype');
}

@font-face {
    font-family: 'SF-Pro-Regular';
    src: url('fonts/SF-Pro/SF-Pro-Display-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'SF-Pro-Medium';
    src: url('fonts/SF-Pro/SF-Pro-Display-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'SF-Pro-Semibold';
    src: url('fonts/SF-Pro/SF-Pro-Display-Semibold.otf') format('opentype');
}

@font-face {
    font-family: 'SF-Pro-Bold';
    src: url('fonts/SF-Pro/SF-Pro-Display-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'SF-Pro-Heavy';
    src: url('fonts/SF-Pro/SF-Pro-Display-Heavy.otf') format('opentype');
}

@font-face {
    font-family: 'SF-Pro-Black';
    src: url('fonts/SF-Pro/SF-Pro-Display-Black.otf') format('opentype');
}

@font-face {
    font-family: 'Lekton-Regular';
    src: url('fonts/Lekton/Lekton-Regular.ttf') format('opentype');
}

@font-face {
    font-family: 'Lekton-Bold';
    src: url('fonts/Lekton/Lekton-Bold.ttf') format('opentype');
}

/* ============================================
    HEADER
   ============================================ */
.main-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: var(--safe-area-top);
}

.main-header-content #logoutBtn {
    padding: 5px 10px;
    background-color: transparent;
    color: var(--white);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    min-height: 30px;
}

/* ============================================
    ORDERS ELEMENTS
   ============================================ */
.order-status-wrapper {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    height: calc(33.333vh - 10px);
}

.order-status-columns {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid var(--white-text);
    /* border-bottom: none; */
    margin-right: -1px;
    margin-bottom: -1px;
}

.order-status-column-title {
    color: var(--white-text);
    padding: 0.5rem 0;
    margin-bottom: 0;
    text-align: center;
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--white-text);
    font-family: 'SF-Pro-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.order-status-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    list-style: none;
    height: calc(100% - 45px);
    overflow-y: auto;
}

.order-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--white);
    color: var(--text-color);
    font-size: 14px;
    font-family: 'SF-Pro-Semibold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    cursor: pointer;
}

.order-status-columns-pending .order-status-item {
    background-color: var(--order-status-pending-background);
    color: var(--order-status-pending-color);
}

.order-status-columns-accepted .order-status-item {
    background-color: var(--order-status-accepted-background);
    color: var(--order-status-accepted-color);
}

.order-status-columns-preparing .order-status-item {
    background-color: var(--order-status-preparing-background);
    color: var(--order-status-preparing-color);
}

.order-status-columns-ready .order-status-item {
    background-color: var(--order-status-ready-background);
    color: var(--order-status-ready-color);
}

.order-status-columns-in_transit .order-status-item {
    background-color: var(--order-status-in_transit-background);
    color: var(--order-status-in_transit-color);
}

.order-status-columns-delivered .order-status-item {
    background-color: var(--order-status-delivered-background);
    color: var(--order-status-delivered-color);
}

.order-status-columns-cancelled .order-status-item {
    background-color: var(--order-status-cancelled-background);
    color: var(--order-status-cancelled-color);
}

.order-status-columns-no_show .order-status-item {
    background-color: var(--order-status-no_show-background);
    color: var(--order-status-no_show-color);
}

.new-order-highlight {
    animation: highlightNewOrder 1s forwards infinite;
}

@keyframes highlightNewOrder {
    0% {
        background-color: var(--order-status-pending-background);
    }
    50% {
        background-color: var(--order-status-pending-background);
    }
    50.1% {
        background-color: #fee19f;
    }
    99.9% {
        background-color: #fee19f;
    }
    100% {
        background-color: var(--order-status-pending-background);
    }
}

/* ============================================
    ORDERS ELEMENTS
   ============================================ */
.right-popup-overlay {
    position: fixed;
    z-index: 19;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /* backdrop-filter: blur(4px); */
    opacity: 0;
    pointer-events: none;
    transition: 0.15s ease-in-out;
}

.right-popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.right-popup-wrapper {
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background-color: var(--white);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.right-popup-wrapper.dragging {
    transition: none;
    user-select: none;
}

.right-popup-wrapper.active {
    transform: translateX(0);
}

.right-popup-header {
    display: flex;
    align-items: center;
    gap: 0 15px;
    width: 100%;
    padding: var(--safe-area-top, 1rem) 1.3rem 1rem 1.3rem;
}

.right-popup-header i {
    font-size: 1.2rem;
    cursor: pointer;
}

.right-popup-body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.right-popup-header-pending {
    background-color: var(--order-status-pending-background);
    color: var(--order-status-pending-color);
    animation: highlightNewOrder 1s forwards infinite;
}

.right-popup-header-accepted {
    background-color: var(--order-status-accepted-background);
    color: var(--order-status-accepted-color);
}

.right-popup-header-preparing {
    background-color: var(--order-status-preparing-background);
    color: var(--order-status-preparing-color);
}

.right-popup-header-ready {
    background-color: var(--order-status-ready-background);
    color: var(--order-status-ready-color);
}

.right-popup-header-in_transit {
    background-color: var(--order-status-in_transit-background);
    color: var(--order-status-in_transit-color);
}

.right-popup-header-delivered {
    background-color: var(--order-status-delivered-background);
    color: var(--order-status-delivered-color);
}

.right-popup-header-cancelled {
    background-color: var(--order-status-cancelled-background);
    color: var(--order-status-cancelled-color);
}

.right-popup-header-no_show {
    background-color: var(--order-status-no_show-background);
    color: var(--order-status-no_show-color);
}

.right-popup-order-type-payment-status {
    display: block;
    padding: 0 1rem 1rem 1rem;
}

.right-popup-order-type-payment-status > * {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0.25rem 1.3rem;
}

.right-popup-order-type-payment-status-pending {
    background-color: var(--order-status-pending-background);
    color: var(--order-status-pending-color);
    animation: highlightNewOrder 1s forwards infinite;
}

.right-popup-order-type-payment-status-accepted {
    background-color: var(--order-status-accepted-background);
    color: var(--order-status-accepted-color);
}

.right-popup-order-type-payment-status-preparing {
    background-color: var(--order-status-preparing-background);
    color: var(--order-status-preparing-color);
}

.right-popup-order-type-payment-status-ready {
    background-color: var(--order-status-ready-background);
    color: var(--order-status-ready-color);
}

.right-popup-order-type-payment-status-in_transit {
    background-color: var(--order-status-in_transit-background);
    color: var(--order-status-in_transit-color);
}

.right-popup-order-type-payment-status-delivered {
    background-color: var(--order-status-delivered-background);
    color: var(--order-status-delivered-color);
}

.right-popup-order-type-payment-status-cancelled {
    background-color: var(--order-status-cancelled-background);
    color: var(--order-status-cancelled-color);
}

.right-popup-order-type-payment-status-no_show {
    background-color: var(--order-status-no_show-background);
    color: var(--order-status-no_show-color);
}

.right-popup-order-details {
    display: block;
    padding: 1.3rem 1.3rem 17.3rem 1.3rem;
    position: relative;
    width: 100%;
    height: calc(100vh - 156px);
    overflow-y: auto;
}

.right-popup-order-items-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

.right-popup-order-items-table th,
.right-popup-order-items-table td {
    padding: 0px 5px;
    text-align: left;
    border: none;
    vertical-align: top;
}

.right-popup-order-items-table th:first-child,
.right-popup-order-items-table td:first-child {
    width: 10px;
}

.right-popup-order-items-table ul {
    padding: 0.2rem 0 0.2rem 0rem;
    margin: 0;
    list-style: none;
}

.right-popup-order-items-table thead th {
    padding-bottom: 5px;
    border-bottom: 1px solid var(--white-text);
}

.right-popup-order-items-table tbody tr:first-child td {
    padding-top: 5px;
}

.right-popup-order-items-table tbody tr:last-child td {
    padding-bottom: 5px;
}

.right-popup-order-items-table tfoot tr:first-child td {
    padding-top: 5px;
    border-top: 1px solid var(--white-text);
}

.rows-totals td {
    padding-bottom: 5px;
}

.rows-after-totals td {
    padding-top: 5px;
    border-top: 1px solid var(--white-text);
}

.right-popup-order-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    z-index: 5;
}

.right-popup-order-buttons button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    width: 100%;
    padding: 1rem 0;
    border: none;
    border-radius: 0;
    font-size: 18px;
    font-family: 'SF-Pro-Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    cursor: pointer;
}

.right-popup-order-buttons button i {
    font-size: 20px;
}

.right-popup-order-buttons button.assigning-driver-btn {
    background-color: var(--order-status-accepted-background);
    color: var(--order-status-accepted-color);
}

.right-popup-order-buttons button.send-whatsapp-btn {
    background-color: var(--whatsapp-background-color);
    color: var(--whatsapp-text-color);
}

.right-popup-order-buttons button#print-order-btn {
    background-color: var(--white-text);
    color: var(--text-color);
}

.right-popup-order-buttons button.change-status-btn-preparing {
    background-color: var(--order-status-preparing-background);
    color: var(--order-status-preparing-color);
}

.right-popup-order-buttons button.change-status-btn-ready {
    background-color: var(--order-status-ready-background);
    color: var(--order-status-ready-color);
}

.right-popup-order-buttons button.change-status-btn-in_transit {
    background-color: var(--order-status-in_transit-background);
    color: var(--order-status-in_transit-color);
}

.right-popup-order-buttons button.change-status-btn-delivered {
    background-color: var(--order-status-delivered-background);
    color: var(--order-status-delivered-color);
}

#cancel-order-btn {
    padding: 1rem 0;
    background-color: var(--accent-color);
    color: var(--white);
}

.right-popup-order-buttons button:last-child {
    padding-bottom: var(--safe-area-bottom, 1rem);
}

/* ============================================
    MEDIA QUERIES
   ============================================ */

@media only screen and (min-width:320px) {

}
@media only screen and (min-width:480px) {

}
@media only screen and (min-width:768px) {
    .order-status-wrapper {
        height: calc(33.333vh - 10px);
    }
    .order-status-columns {
        width: 50%;
    }
}
@media only screen and (min-width:1024px) {
    .order-status-wrapper {
        height: calc(33.333vh - 10px);
    }
    .order-status-columns {
        width: 50%;
    }
}
@media only screen and (min-width:1140px) {
    .order-status-wrapper {
        height: calc(33.333vh - 10px);
    }
    .order-status-columns {
        width: 33.333%;
    }
}
@media only screen and (min-width:1280px) {
    .order-status-wrapper {
        height: calc(50vh - 15px);
    }
    .order-status-columns {
        width: 25%;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}