/* Zeus Mobile - Custom Styles */
/* Hide scrollbar utility */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Icon Colors based on FontAwesome class names */
.icon-folder { color: #f59e0b; }
.icon-folder:hover { color: #d97706; }

.icon-hamburger { color: #f97316; }
.icon-hamburger:hover { color: #ea580c; }

.icon-clipboard { color: #3b82f6; }
.icon-clipboard:hover { color: #2563eb; }

.icon-fire { color: #ef4444; }
.icon-fire:hover { color: #dc2626; }

.icon-users { color: #22c55e; }
.icon-users:hover { color: #16a34a; }

.icon-cog { color: #6b7280 !important; }
.icon-cog:hover { color: #4b5563 !important; }

.icon-chart { color: #a855f7; }
.icon-chart:hover { color: #9333ea; }

.icon-cart { color: #ec4899; }
.icon-cart:hover { color: #db2777; }

.icon-box { color: #d97706; }
.icon-box:hover { color: #b45309; }

.icon-truck { color: #6366f1; }
.icon-truck:hover { color: #4f46e5; }

.icon-warehouse { color: #14b8a6; }
.icon-warehouse:hover { color: #0d9488; }

.icon-cash { color: #10b981; }
.icon-cash:hover { color: #059669; }

.icon-receipt { color: #f59e0b; }
.icon-receipt:hover { color: #d97706; }

.icon-calendar { color: #84cc16; }
.icon-calendar:hover { color: #65a30d; }

.icon-clock { color: #64748b; }
.icon-clock:hover { color: #475569; }

.icon-bell { color: #8b5cf6; }
.icon-bell:hover { color: #7c3aed; }

.icon-envelope { color: #0ea5e9; }
.icon-envelope:hover { color: #0284c7; }

.icon-file { color: #78716c; }
.icon-file:hover { color: #57534e; }

.icon-image { color: #d946ef; }
.icon-image:hover { color: #c026d3; }

.icon-video { color: #dc2626; }
.icon-video:hover { color: #b91c1c; }

.icon-music { color: #db2777; }
.icon-music:hover { color: #be185d; }

.icon-microphone { color: #ea580c; }
.icon-microphone:hover { color: #c2410c; }

.icon-camera { color: #2563eb; }
.icon-camera:hover { color: #1d4ed8; }

.icon-map { color: #16a34a; }
.icon-map:hover { color: #15803d; }

.icon-location { color: #dc2626; }
.icon-location:hover { color: #b91c1c; }

.icon-phone { color: #059669; }
.icon-phone:hover { color: #047857; }

.icon-globe { color: #3b82f6; }
.icon-globe:hover { color: #2563eb; }

.icon-wifi { color: #06b6d4; }
.icon-wifi:hover { color: #0891b2; }

.icon-bluetooth { color: #60a5fa; }
.icon-bluetooth:hover { color: #3b82f6; }

.icon-battery { color: #22c55e; }
.icon-battery:hover { color: #16a34a; }

.icon-signal { color: #eab308; }
.icon-signal:hover { color: #ca8a04; }

.icon-home { color: #3b82f6; }
.icon-home:hover { color: #2563eb; }

.icon-building { color: #4b5563 !important; }
.icon-building:hover { color: #374151 !important; }

.icon-store { color: #a855f7; }
.icon-store:hover { color: #9333ea; }

.icon-utensils { color: #f97316; }
.icon-utensils:hover { color: #ea580c; }

.icon-coffee { color: #b45309; }
.icon-coffee:hover { color: #92400e; }

.icon-pizza { color: #ef4444; }
.icon-pizza:hover { color: #dc2626; }

.icon-ice-cream { color: #f472b6; }
.icon-ice-cream:hover { color: #ec4899; }

.icon-wine { color: #9333ea; }
.icon-wine:hover { color: #7c3aed; }

.icon-beer { color: #ca8a04; }
.icon-beer:hover { color: #a16207; }

.icon-water { color: #60a5fa; }
.icon-water:hover { color: #3b82f6; }

.icon-apple { color: #ef4444; }
.icon-apple:hover { color: #dc2626; }

.icon-carrot { color: #f97316; }
.icon-carrot:hover { color: #ea580c; }

.icon-leaf { color: #22c55e; }
.icon-leaf:hover { color: #16a34a; }

.icon-seedling { color: #84cc16; }
.icon-seedling:hover { color: #65a30d; }

.icon-tree { color: #15803d; }
.icon-tree:hover { color: #166534; }

.icon-sun { color: #eab308; }
.icon-sun:hover { color: #ca8a04; }

.icon-moon { color: #818cf8; }
.icon-moon:hover { color: #6366f1; }

.icon-cloud { color: #9ca3af; }
.icon-cloud:hover { color: #6b7280; }

.icon-rain { color: #60a5fa; }
.icon-rain:hover { color: #3b82f6; }

.icon-snowflake { color: #67e8f9; }
.icon-snowflake:hover { color: #22d3ee; }

.icon-bolt { color: #facc15; }
.icon-bolt:hover { color: #eab308; }

.icon-star { color: #facc15; }
.icon-star:hover { color: #eab308; }

.icon-heart { color: #ef4444; }
.icon-heart:hover { color: #dc2626; }

.icon-thumbs { color: #3b82f6; }
.icon-thumbs:hover { color: #2563eb; }

.icon-smile { color: #facc15; }
.icon-smile:hover { color: #eab308; }

.icon-face { color: #facc15; }
.icon-face:hover { color: #eab308; }

.icon-gift { color: #ec4899; }
.icon-gift:hover { color: #db2777; }

.icon-crown { color: #eab308; }
.icon-crown:hover { color: #ca8a04; }

.icon-trophy { color: #ca8a04; }
.icon-trophy:hover { color: #a16207; }

.icon-medal { color: #f59e0b; }
.icon-medal:hover { color: #d97706; }

.icon-award { color: #f97316; }
.icon-award:hover { color: #ea580c; }

.icon-certificate { color: #3b82f6; }
.icon-certificate:hover { color: #2563eb; }

.icon-id-card { color: #6b7280; }
.icon-id-card:hover { color: #4b5563; }

.icon-passport { color: #2563eb; }
.icon-passport:hover { color: #1d4ed8; }

.icon-key { color: #ca8a04; }
.icon-key:hover { color: #a16207; }

.icon-lock { color: #4b5563; }
.icon-lock:hover { color: #374151; }

.icon-unlock { color: #22c55e; }
.icon-unlock:hover { color: #16a34a; }

.icon-shield { color: #3b82f6; }
.icon-shield:hover { color: #2563eb; }

.icon-fingerprint { color: #ec4899; }
.icon-fingerprint:hover { color: #db2777; }

.icon-eye { color: #60a5fa; }
.icon-eye:hover { color: #3b82f6; }

.icon-search { color: #6b7280; }
.icon-search:hover { color: #4b5563; }

.icon-filter { color: #a855f7; }
.icon-filter:hover { color: #9333ea; }

.icon-sort { color: #6b7280; }
.icon-sort:hover { color: #4b5563; }

.icon-download { color: #3b82f6; }
.icon-download:hover { color: #2563eb; }

.icon-upload { color: #22c55e; }
.icon-upload:hover { color: #16a34a; }

.icon-share { color: #60a5fa; }
.icon-share:hover { color: #3b82f6; }

.icon-link { color: #3b82f6; }
.icon-link:hover { color: #2563eb; }

.icon-copy { color: #6b7280; }
.icon-copy:hover { color: #4b5563; }

.icon-cut { color: #ef4444; }
.icon-cut:hover { color: #dc2626; }

.icon-paste { color: #22c55e; }
.icon-paste:hover { color: #16a34a; }

.icon-eraser { color: #ec4899; }
.icon-eraser:hover { color: #db2777; }

.icon-pen { color: #3b82f6; }
.icon-pen:hover { color: #2563eb; }

.icon-pencil { color: #6b7280; }
.icon-pencil:hover { color: #4b5563; }

.icon-highlighter { color: #facc15; }
.icon-highlighter:hover { color: #eab308; }

.icon-print { color: #4b5563; }
.icon-print:hover { color: #374151; }

.icon-save { color: #22c55e; }
.icon-save:hover { color: #16a34a; }

.icon-floppy { color: #3b82f6; }
.icon-floppy:hover { color: #2563eb; }

.icon-trash { color: #ef4444; }
.icon-trash:hover { color: #dc2626; }

.icon-recycle { color: #22c55e; }
.icon-recycle:hover { color: #16a34a; }

.icon-rotate { color: #3b82f6; }
.icon-rotate:hover { color: #2563eb; }

.icon-undo { color: #f97316; }
.icon-undo:hover { color: #ea580c; }

.icon-redo { color: #22c55e; }
.icon-redo:hover { color: #16a34a; }

.icon-sync { color: #60a5fa; }
.icon-sync:hover { color: #3b82f6; }

.icon-play { color: #22c55e; }
.icon-play:hover { color: #16a34a; }

.icon-pause { color: #eab308; }
.icon-pause:hover { color: #ca8a04; }

.icon-stop { color: #ef4444; }
.icon-stop:hover { color: #dc2626; }

.icon-forward { color: #3b82f6; }
.icon-forward:hover { color: #2563eb; }

.icon-backward { color: #3b82f6; }
.icon-backward:hover { color: #2563eb; }

.icon-eject { color: #6b7280; }
.icon-eject:hover { color: #4b5563; }

.icon-random { color: #a855f7; }
.icon-random:hover { color: #9333ea; }

.icon-shuffle { color: #ec4899; }
.icon-shuffle:hover { color: #db2777; }

.icon-repeat { color: #3b82f6; }
.icon-repeat:hover { color: #2563eb; }

.icon-volume { color: #22c55e; }
.icon-volume:hover { color: #16a34a; }

.icon-expand { color: #3b82f6; }
.icon-expand:hover { color: #2563eb; }

.icon-compress { color: #a855f7; }
.icon-compress:hover { color: #9333ea; }

.icon-maximize { color: #22c55e; }
.icon-maximize:hover { color: #16a34a; }

.icon-minimize { color: #f97316; }
.icon-minimize:hover { color: #ea580c; }

.icon-arrow { color: #22c55e; }
.icon-arrow:hover { color: #16a34a; }

.icon-chevron { color: #22c55e; }
.icon-chevron:hover { color: #16a34a; }

.icon-angle { color: #4ade80; }
.icon-angle:hover { color: #22c55e; }

.icon-caret { color: #86efac; }
.icon-caret:hover { color: #4ade80; }

.icon-hand { color: #3b82f6; }
.icon-hand:hover { color: #2563eb; }

.icon-plus { color: #22c55e; }
.icon-plus:hover { color: #16a34a; }

.icon-minus { color: #ef4444; }
.icon-minus:hover { color: #dc2626; }

.icon-times { color: #ef4444; }
.icon-times:hover { color: #dc2626; }

.icon-divide { color: #3b82f6; }
.icon-divide:hover { color: #2563eb; }

.icon-equals { color: #6b7280; }
.icon-equals:hover { color: #4b5563; }

.icon-percentage { color: #a855f7; }
.icon-percentage:hover { color: #9333ea; }

.icon-hashtag { color: #60a5fa; }
.icon-hashtag:hover { color: #3b82f6; }

.icon-asterisk { color: #eab308; }
.icon-asterisk:hover { color: #ca8a04; }

.icon-dollar { color: #22c55e; }
.icon-dollar:hover { color: #16a34a; }

.icon-euro { color: #3b82f6; }
.icon-euro:hover { color: #2563eb; }

.icon-pound { color: #a855f7; }
.icon-pound:hover { color: #9333ea; }

.icon-yen { color: #ef4444; }
.icon-yen:hover { color: #dc2626; }

.icon-coins { color: #eab308; }
.icon-coins:hover { color: #ca8a04; }

.icon-wallet { color: #b45309; }
.icon-wallet:hover { color: #92400e; }

.icon-credit { color: #3b82f6; }
.icon-credit:hover { color: #2563eb; }

.icon-landmark { color: #6b7280; }
.icon-landmark:hover { color: #4b5563; }

.icon-building-columns { color: #4b5563; }
.icon-building-columns:hover { color: #374151; }

.icon-piggy { color: #f472b6; }
.icon-piggy:hover { color: #ec4899; }

.icon-sack { color: #22c55e; }
.icon-sack:hover { color: #16a34a; }

.icon-money { color: #16a34a; }
.icon-money:hover { color: #15803d; }

/* Default icon color */
.icon-default { color: #2563eb; }
.icon-default:hover { color: #1d4ed8; }

/* =====================================================
   BRANCH/ROLE SELECTION STYLES
===================================================== */

.selection-page {
    /*width: 100%;*/
    min-height: 100vh;
    padding: 20px;
    overflow-x: hidden;
}

.selection-header {
    max-width: 1200px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.selection-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.selection-brand-logo {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--login-navy);
    border-radius: 50%;
}

.selection-brand-logo-inner {
    font-size: 27px;
}

.selection-brand-text {
    display: flex;
    flex-direction: column;
}

.selection-brand-text strong {
    color: var(--login-navy);
    font-size: 27px;
    letter-spacing: 1.5px;
}

.selection-brand-text span {
    margin-top: 1px;
    color: var(--login-gold-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.selection-help-button {
    height: 48px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--login-border);
    border-radius: 12px;
    background: var(--login-white);
    color: var(--login-text);
    font-size: 15px;
    cursor: pointer;
}

.selection-help-button:hover {
    border-color: var(--login-gold);
}

.selection-help-icon {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--login-navy);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

.selection-intro {
    max-width: 900px;
    margin: 20px auto 25px;
    text-align: center;
}

.selection-intro h1 {
    color: var(--login-navy);
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.3;
    letter-spacing: -0.5px;
    font-weight: 600;
}

.selection-intro p {
    margin-top: 10px;
    color: var(--login-muted);
    font-size: 15px;
}

.selection-container {
    max-width: 1200px;
    margin: 0 auto;
}

.selection-section {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #e6e9ee;
}

.selection-section-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}

.selection-section-title h2 {
    color: var(--login-navy);
    font-size: 20px;
    font-weight: 650;
}

.selection-step-number {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--login-navy);
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.selection-cards {
    display: grid;
    gap: 18px;
}

.selection-cards.business-cards {
    grid-template-columns: repeat(3, 1fr);
}

.selection-cards.branch-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 280px));
}

.selection-cards.role-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 280px));
}

.selection-card {
    position: relative;
    min-height: 110px;
    padding: 1px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--login-white);
    border: 1px solid var(--login-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.selection-card:hover {
    border-color: #cbd2dc;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 25, 54, 0.06);
}

.selection-card.selected {
    border: 1.5px solid var(--login-gold);
    box-shadow: 0 6px 25px rgba(217, 154, 40, 0.10);
}

.selection-card.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.selection-card.disabled:hover {
    transform: none;
    box-shadow: none;
}

.selection-card-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f4f7;
    font-size: 22px;
}

.selection-card-icon.dark {
    background: var(--login-navy);
    color: white;
}

.selection-card-content {
    min-width: 0;
    flex: 1;
}

.selection-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.selection-card-heading h3 {
    color: var(--login-navy);
    font-size: 17px;
    line-height: 1.3;
}

.selection-card-content p {
    margin-top: 7px;
    color: var(--login-muted);
    font-size: 14px;
    line-height: 1.5;
}

.selection-card-content small {
    display: block;
    margin-top: 9px;
    color: #68758a;
    font-size: 13px;
}

.selection-business-main {
    display: block;
    margin-top: 7px;
    color: var(--login-gold-dark);
    font-size: 13px;
    font-weight: 600;
}

.selection-check {
    width: 23px;
    height: 23px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--login-gold);
    color: white;
    font-size: 13px;
    font-weight: 700;
}

.selection-radio {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 2px solid #aeb6c1;
    border-radius: 50%;
}

.selection-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    font-size: 13px;
    font-weight: 500;
}

.selection-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.selection-status.open {
    color: #16a34a;
}

.selection-status.open i {
    background: #16a34a;
}

.selection-status.opening {
    color: #d97706;
}

.selection-status.opening i {
    background: #d97706;
}

.selection-status.closed {
    color: #dc2626;
}

.selection-status.closed i {
    background: #dc2626;
}

.selection-address {
    margin-top: 14px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.selection-role-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
}

.selection-role-icon.manager {
    background: #f0f4fa;
}

.selection-role-icon.waiter {
    background: #fff4df;
}

.selection-role-icon.kitchen {
    background: #eaf7ee;
}

.selection-role-type {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
}

.selection-role-type.manager-text {
    color: var(--login-gold-dark);
}

.selection-role-type.waiter-text {
    color: #d97706;
}

.selection-role-type.kitchen-text {
    color: #16a34a;
}

.selection-summary {
    /*min-height: 100px;*/
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid #dce5f0;
    border-radius: 13px;
    background: #fbfdff;
    /*max-width: 800px;*/
    margin: 0 auto;
}

.selection-summary-icon {
    width: 53px;
    height: 53px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e9f2ff;
    font-size: 23px;
}

.selection-summary-content {
    flex: 1;
}

.selection-summary-content h3 {
    color: var(--login-navy);
    font-size: 15px;
    font-weight: 650;
}

.selection-summary-values {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 8px;
}

.selection-summary-values span {
    padding: 5px 11px;
    border: 1px solid #dce2eb;
    border-radius: 8px;
    background: white;
    color: #5f6d81;
    font-size: 13px;
}

.selection-summary-values b {
    color: #8a96a7;
    font-size: 12px;
}

.selection-continue-button {
    width: 100%;
    height: 62px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    border: none;
    border-radius: 11px;
    background: var(--login-navy);
    color: white;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.selection-continue-button strong {
    color: var(--login-gold-light);
    font-size: 28px;
    line-height: 1;
}

.selection-continue-button:hover {
    background: var(--login-navy-light);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(6, 25, 54, 0.16);
}

.selection-security-message {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 23px;
    color: #778397;
    text-align: center;
}

.selection-security-message span {
    font-size: 15px;
}

.selection-security-message p {
    font-size: 13px;
}

/* Tablet */
@media (max-width: 1100px) {
    .selection-page {
        padding: 20px;
    }

    .selection-header {
        max-width: 100%;
    }

    .selection-container {
        max-width: 100%;
    }

    .selection-cards.branch-cards {
        grid-template-columns: repeat(auto-fill, minmax(250px, 250px));
    }

    .selection-cards.role-cards {
        grid-template-columns: repeat(auto-fill, minmax(250px, 250px));
    }
}

/* Mobile */
@media (max-width: 700px) {
    .selection-page {
        padding: 15px;
    }

    .selection-header {
        max-width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: white;
        padding: 12px 15px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
    }

    .selection-brand-logo {
        width: 45px;
        height: 45px;
    }

    .selection-brand-logo-inner {
        font-size: 18px;
    }

    .selection-brand-text strong {
        font-size: 20px;
    }

    .selection-brand-text span {
        font-size: 8px;
    }

    .selection-help-button {
        width: auto;
        height: auto;
        padding: 8px 15px;
        font-size: 14px;
    }

    .selection-help-icon {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .selection-intro {
        margin: 15px auto 20px;
    }

    .selection-intro h1 {
        font-size: 24px;
        letter-spacing: -0.5px;
    }

    .selection-intro p {
        font-size: 14px;
    }

    .selection-container {
        max-width: 100%;
    }

    .selection-section {
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .selection-section-title {
        margin-bottom: 15px;
    }

    .selection-section-title h2 {
        font-size: 16px;
    }

    .selection-step-number {
        width: 26px;
        height: 26px;
        font-size: 13px;
    }

    .selection-cards.branch-cards,
    .selection-cards.role-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .selection-card {
        min-height: 100px;
        padding: 15px;
        gap: 12px;
    }

    .selection-card-icon,
    .selection-role-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .selection-card-heading h3 {
        font-size: 14px;
    }

    .selection-card-content p {
        font-size: 12px;
    }

    .selection-summary {
        max-width: 100%;
        padding: 15px;
        align-items: flex-start;
    }

    .selection-summary-values {
        align-items: flex-start;
        flex-direction: column;
    }

    .selection-summary-values b {
        display: none;
    }

    .selection-continue-button {
        height: 54px;
        font-size: 14px;
    }

    .selection-security-message {
        align-items: flex-start;
    }

    .selection-security-message p {
        font-size: 12px;
        line-height: 1.4;
    }
}

/* Small Mobile */
@media (max-width: 390px) {
    .selection-brand-text span {
        display: none;
    }

    .selection-intro h1 {
        font-size: 22px;
    }
}

/* =====================================================
   WELCOME INTRO STYLES
===================================================== */

.welcome-intro {
    margin-bottom: 20px;
}

.welcome-intro h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    /*margin: 0 0 8px 0;*/
    letter-spacing: -0.5px;
}

.welcome-intro p {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .welcome-intro h1 {
        font-size: 24px;
    }

    .welcome-intro p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .welcome-intro h1 {
        font-size: 22px;
    }

    .welcome-intro p {
        font-size: 13px;
    }
}

/* =====================================================
   TABLES & ORDERS STYLES (Dashboard Component)
===================================================== */

.tables-orders-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    min-height: 400px;
}

.tables-column,
.orders-column {
    display: flex;
    flex-direction: column;
}

.tables-card,
.orders-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #eef0f4;
    flex: 1;
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 20px 0;
}

/* Area Tabs */
.area-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.area-tab {
    padding: 8px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.area-tab:hover {
    background: #f3f4f6;
    color: #374151;
}

.area-tab.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* Tables Grid */
.tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

/*.table-card {
    border-radius: 12px;
    padding: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}*/

.table-card {
    background-color: color-mix(
        in srgb,
        var(--table-color) 15%,
        white
    );

    /*border: 1px solid color-mix(
        in srgb,
        var(--table-color) 30%,
        white
    );*/

    color: var(--table-color);
    border-radius: 12px;
    padding: 1px;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    min-height: 70px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* color: white; */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.table-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/*.table-number {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
}

.table-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.table-area {
    font-weight: 500;
}

.table-capacity {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.9;
}*/

.table-number {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.table-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.table-area {
    font-size: 14px;
    font-weight: 600;
}

.table-capacity {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Orders Table */
.orders-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    align-items: center;
    transition: background 0.2s ease;
}

.order-row:hover {
    background: #f3f4f6;
}

.order-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-chair {
    display: flex;
    /* flex-direction: column; */
    flex-direction: row !important;
    gap: 4px;
}

/* Order Table Column */
.order-table {
    display: flex;
    align-items: center;
    flex-direction: row !important;
    gap: 16px;
}

.table-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff0f0;
    color: #d62828;

    flex-shrink: 0;
}

.table-icon i {
    font-size: 24px;
}

.table-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.table-name {
    font-size: 18px;
    font-weight: 600;
    color: #d62828;
}

.table-area-name {
    font-size: 16px;
    color: #6b7280;
}

/* Order Info Column */
.order-info {
    text-align: left;
}

.order-number {
    font-weight: 700;
    color: #1f2937;
    font-size: 16px;
}

.order-time {
    font-size: 13px;
    color: #6b7280;
}

/* Order Total Column */
.order-total {
    text-align: right;
}

.product-count {
    font-size: 13px;
    color: #6b7280;
}

.order-price {
    font-weight: 700;
    color: #059669;
    font-size: 14px;
}

/* No Orders State */
.no-orders {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #9ca3af;
}

.no-orders i {
    font-size: 48px;
    margin-bottom: 12px;
}

.no-orders p {
    font-size: 14px;
    margin: 0;
}

/* Tablet */
@media (max-width: 1024px) {
    .tables-orders-container {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .tables-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 10px;
    }

    .order-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .order-table,
    .order-info,
    .order-total {
        text-align: left;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .tables-orders-container {
        grid-template-columns: 1fr;
    }

    .tables-column,
    .orders-column {
        width: 100%;
    }

    .tables-card,
    .orders-card {
        padding: 18px;
    }

    .card-title {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .area-tab {
        padding: 6px 12px;
        font-size: 13px;
    }

    .tables-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }

    .table-card {
        padding: 12px;
        min-height: 90px;
    }

    .table-number {
        font-size: 20px;
    }

    .table-info {
        font-size: 11px;
    }

    .order-row {
        padding: 12px;
    }

    .table-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .table-name {
        font-size: 13px;
    }

    .table-area-name {
        font-size: 11px;
    }

    .order-number,
    .order-price {
        font-size: 14px;
    }

    .order-time,
    .product-count {
        font-size: 12px;
    }
}

/* =========================================================
   Tokens de color compartidos por TODA la app. Cualquier CSS nuevo
   (table.css, y a futuro cualquier otro) puede usar estas variables
   en vez de redefinir su propia copia de la paleta azul pastel.
   ========================================================= */

:root {
  --zeus-blue: var(--zeus-navy, #13213F);
  --zeus-blue-tint: var(--zeus-navy-tint, #E8EBF3);
  --zeus-cta: var(--zeus-accent, #3157D5);
  --zeus-cta-hover: var(--zeus-accent-hover, #2647B8);
  --zeus-cta-tint: var(--zeus-accent-tint, #E9EEFC);
  --zeus-green: #2E8B57;
  --zeus-green-tint: #E7F4EC;
  --zeus-purple: #7C5CBF;
  --zeus-purple-tint: #F1EBFB;
  --zeus-amber: #B8860B;
  --zeus-amber-tint: #FBF3E1;
  --zeus-warn: #C0392B;
  --zeus-warn-tint: #FBEAE8;
  --zeus-ink: #1F2A37;
  --zeus-ink-soft: #5B6B7C;
  --zeus-border: #E1E7ED;
  --zeus-bg: #F4F7FA;
  --zeus-white: #FFFFFF;
  --zeus-radius: 12px;
}

/* =========================================================
   Combo buscable (comboSelect, ver public/js/combo-select.js) —
   componente global compartido por TODA la app. Vivía duplicado por
   página (products.css, table.css); se centraliza acá para que
   cualquier vista nueva (o ya existente) lo use tal cual, sin
   redefinir su propia copia con otro look.
   Uso: x-data="comboSelect(@js($items->map(fn($i) => ['id'=>$i->id,'name'=>$i->name])->values()), '{{ old('campo') }}')"
   ========================================================= */

.crear-combo, .editar-combo { position: relative; }
.crear-combo-input, .editar-combo-input {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  width: 100%; padding: 9px 12px; border: 1px solid var(--zeus-border); border-radius: 8px;
  background: var(--zeus-white); font-size: 14px; min-height: 38px;
}
.crear-combo-input.is-open, .editar-combo-input.is-open { border-color: var(--zeus-cta); box-shadow: 0 0 0 3px var(--zeus-cta-tint); }
.crear-combo-input .crear-placeholder, .editar-combo-input .editar-placeholder { color: #A6B1BD; }
/* Combo dependiente sin la opción de la que depende elegida todavía (ej.
   ciudad antes de elegir provincia): bloqueado, no mezcla datos de otro
   país/provincia — ver combo-field.blade.php ($dependsLocked). */
.crear-combo-input.is-locked, .editar-combo-input.is-locked { cursor: not-allowed; background: var(--zeus-bg); opacity: .7; }
.crear-chev, .editar-chev { color: var(--zeus-ink-soft); font-size: 11px; margin-left: 8px; flex-shrink: 0; }
.crear-combo-panel, .editar-combo-panel {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--zeus-white); border: 1px solid var(--zeus-border);
  border-radius: 8px; box-shadow: 0 10px 28px rgba(20, 40, 60, 0.16); z-index: 30; overflow: hidden;
}
.crear-combo-search, .editar-combo-search { padding: 8px; border-bottom: 1px solid var(--zeus-border); }
.crear-combo-search input, .editar-combo-search input {
  width: 100%; border: 1px solid var(--zeus-border); border-radius: 6px; padding: 7px 10px; font-size: 13.5px;
}
.crear-combo-search input:focus, .editar-combo-search input:focus { outline: none; border-color: var(--zeus-cta); }
.crear-combo-list, .editar-combo-list { max-height: 220px; overflow-y: auto; }
.crear-combo-option, .editar-combo-option {
  padding: 9px 12px; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.crear-combo-option:hover, .editar-combo-option:hover { background: var(--zeus-cta-tint); }
.crear-combo-empty, .editar-combo-empty { padding: 14px 12px; font-size: 13px; color: var(--zeus-ink-soft); text-align: center; }
/* Botón fijo para salir de "Pantalla completa" (Reservas y Comandas). En el
   celular no hay tecla Esc y en iPhone el modo es simulado (sin Fullscreen
   API): este botón queda siempre a mano, arriba a la derecha, por encima de
   la vista fijada (1055) y debajo de las alertas de Swal (1060). */
.zeus-full-exit {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  z-index: 1056;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--zeus-navy);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(19, 33, 63, .28);
  cursor: pointer;
}
.zeus-full-exit:hover { background: var(--zeus-accent); }
@media (max-width: 760px) {
  .zeus-full-exit { width: 40px; padding: 0; justify-content: center; }
  .zeus-full-exit span { display: none; }
}

/* Stepper estándar: número con − y + (el input sigue siendo el numérico
   estándar, data-numeric). Asistente, adicionales del plan, etc. */
.onw-stepper {
  display: flex; align-items: center; height: 46px; border: 1px solid var(--zeus-line);
  border-radius: 12px; overflow: hidden; background: var(--zeus-surface); width: 100%; max-width: 170px;
}
.onw-stepper button {
  width: 44px; height: 100%; border: 0; background: var(--zeus-surface-2); color: var(--zeus-ink);
  font-size: 20px; cursor: pointer; flex: none;
}
.onw-stepper button:hover { background: var(--zeus-accent-tint); color: var(--zeus-accent); }
.onw-stepper input {
  flex: 1; min-width: 0; height: 100%; border: 0; text-align: center; font: inherit;
  font-size: 17px; font-weight: 700; color: var(--zeus-ink); background: transparent;
}
.onw-stepper input:focus { outline: none; }
.onw-stepper:focus-within { border-color: var(--zeus-accent); box-shadow: 0 0 0 3px var(--zeus-accent-tint); }