:root { --header-h:  65px; }
.text-justify {
  text-align: justify !important;
}
body { padding-top: var(--header-h);   font-family: sans-serif; }
.icon-btn { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #eee; background: #fff; }
.item-card { background: #fff; margin: 10px; padding: 12px; border-radius: 12px; border: 1px solid #eee; position: relative; overflow: hidden; cursor: pointer; }
.item-progress { position: absolute; bottom: 0; left: 0; height: 4px; background: #007bff; transition: width 0.3s; }
.item-card.selected { border: 2px solid #007bff !important; background: #f0f7ff; }
.item-card.disabled { opacity: 0.4; background: #f8f9fa; }
.dot-row { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.dot { width: 15px; height: 15px; border-radius: 50%; }
#bubble-container { display: flex; overflow-x: auto; padding: 10px 0; gap: 10px; }
.friend-bubble { flex: 0 0 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; position: relative; font-size: 13px; box-shadow: 0 3px 6px rgba(0,0,0,0.1); user-select: none; -webkit-user-select: none; }
.split-bubble { flex: 0 0 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; position: relative; font-size: 13px; box-shadow: 0 3px 6px rgba(0,0,0,0.1); user-select: none; -webkit-user-select: none; }
.total-badge { 
    position: absolute; 
    bottom: -5px; 
    left: 50%;
    transform: translateX(-50%);
    background: #000; 
    color: #0f0; 
    font-size: 9px; 
    padding: 2px 6px; 
    border-radius: 10px; 
    white-space: nowrap;
}

.action-badge { 
    position: absolute; 
    top: -5px; 
    left: 50%;
    transform: translateX(-50%);
    background: #000; 
    color: #0f0; 
    font-size: 9px; 
    padding: 2px 6px; 
    border-radius: 10px; 
    font-weight: bold;
    white-space: nowrap;
}
.split-badge { 
    position: absolute; 
    top: -5px; 
    left: 50%;
    transform: translateX(-50%);
    background: #000; 
    color: #0f0; 
    font-size: 9px; 
    padding: 2px 6px; 
    border-radius: 10px; 
    font-weight: bold;
    white-space: nowrap;
}

.help-badge {
    display: inline-block;
    background: #000; 
    color: #0f0; 
    font-size: 9px; 
    padding: 2px 6px; 
    border-radius: 10px; 
    font-weight: bold;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}
.pulse-white { 
    animation: pulse-white-frame 0.8s infinite; 
}

@keyframes pulse-white-frame { 
    0% { 
        box-shadow: 0 0 0 0 #ffffff;
        transform: scale(1);
    } 
    50% { 
        /* The 2px spread makes it a solid ring, not a blur */
        box-shadow: 0 0 0 2px #ffffff;
        transform: scale(1.05);
    } 
    100% { 
        box-shadow: 0 0 0 0 #ffffff00;
        transform: scale(1);
    } 
}
/* Purple Pulse - Corrected Keyframe Name */
.pulse-purple { 
    animation: pulse-purple-anim 0.8s infinite; 
}

@keyframes pulse-purple-anim { 
    0% { 
        box-shadow: 0 0 0 0 #ffffff; 
    } 
    70% { 
        box-shadow: 0 0 0 10px #ffffff00; 
    } 
    100% { 
        box-shadow: 0 0 0 0 #ffffff00; 
    }
}

/* Blue Pulse - Corrected to match the Keyframe name below */
.pulse-primary { 
    animation: pulse-blue 0.8s infinite; 
}

@keyframes pulse-blue { 
        0% { box-shadow: 0 0 0 0 rgba(147, 0, 255, 0.9); } 
    70% { box-shadow: 0 0 0 10px rgba(147, 0, 255, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(147, 0, 255, 0); } 
}
.modal-friend-row { cursor: pointer; padding: 10px; border-radius: 8px; margin-bottom: 5px; transition: 0.2s; border: 1px solid transparent; }
.modal-friend-row.active { background: #e7f1ff; border-color: #007bff; }
.option-row { padding: 20px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; align-items: center; gap: 15px; font-size: 18px; }
.zoom-wrap { overflow: auto; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center; background: #222; }
.zoom-img { max-width: 100%; transition: transform 0.2s; cursor: zoom-in; }
.zoom-img.zoomed { max-width: none; transform: scale(2); cursor: zoom-out; }




.assign-mode .friend-bubble { 
    border: 3px solid #0d6efd; 
   
}

@keyframes pulse-border { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); } 
}


#instruction-bar { transition: all 0.3s ease; font-size: 0.9rem; letter-spacing: 0.5px; }
.btn-label { font-size: 10px; font-weight: bold; margin-top: 2px; }
:root {
    /* Updates the base variable used by most components */
    --bs-danger: #B22222;
    --bs-danger-rgb: 178, 34, 34;
}
#tip-slider::-webkit-slider-runnable-track {
    background-color: #198754;
}

#tip-slider::-moz-range-track {
    background-color: #198754;
}

#tip-slider::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
    margin-top: -10px;
    background-color: #198754;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#tip-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background-color: #198754;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#tip-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
/* 1. Force Text Color */
.text-danger {
    color: #B22222 !important;
}

/* 2. Force Button Background, Border, and Hover States */
.btn-danger {
    background-color: #B22222 !important;
    border-color: #B22222 !important;
    color: #fff !important; /* Ensures text stays white on the dark red */
}

.btn-danger:hover, 
.btn-danger:focus, 
.btn-danger:active {
    background-color: #8b1a1a !important; /* A slightly darker shade for interaction */
    border-color: #8b1a1a !important;
    box-shadow: 0 0 0 0.25rem rgba(178, 34, 34, 0.5) !important;
}

/* 3. Fix Button Outline Version (if you use it) */
.btn-outline-danger {
    color: #B22222 !important;
    border-color: #B22222 !important;
}

.btn-outline-danger:hover {
    background-color: #B22222 !important;
    color: #fff !important;
}


.menu-bubble {
    display: inline-grid;
    place-content: center;
    width: 76px;
    height: 76px;
    margin: 5px;
    border-radius: 50%;
    vertical-align: top;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: none;
    transition: transform 0.1s;
    text-decoration: none;
}

.menu-bubble:active {
    transform: scale(0.92);
}

.ptr { cursor: pointer; }
.max-500 { 
    max-width: 500px !important; 
    width: 100%; 
    margin-left: auto !important; 
    margin-right: auto !important; 
}

.fixed-header2 {
    position: fixed;
    top: var(--bs-navbar-height, 56px); /* Bootstrap navbar height */
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 10px; 
}
.fixed-header { 
    position: fixed; 
    top: 0; 
    width: 100%;
    height: var(--header-h); 
    z-index: 1000; 
    background: #fff; 
    border-bottom: 1px solid #ddd;
    padding: 10px; 
}

/* optional: make stats-grid scrollable on small screens if needed */
.stats-grid {
    display: flex;
    justify-content: center; /* keeps them centered */
    gap: 8px;               /* space between boxes */
    flex-wrap: nowrap;       /* prevent wrapping */
    
    flex: 1;                  /* all boxes equal width */
    min-width: 70px;          /* optional: prevent them from shrinking too small */
    text-align: center;       /* center the content inside */
    padding: 2px 0;           /* vertical padding */
}
.stat-box {
    background: #f1f3f5;
    padding: 5px; 
    border-radius: 8px; 
    text-align: center;
    font-size: 10px; 
    color: #666; 
}
.stat-box b { 
    display: block; 
    font-size: 12px; 
    color: #000; 
}


.thumb-container { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; transition: 0.2s; margin-bottom: 20px; position: relative; }
.thumb-container:hover { border-color: #007bff; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.img-click { cursor: pointer; display: block; }
.img-preview { width: 100%; height: 250px; object-fit: cover; }
.meta { padding: 10px; font-size: 14px; font-weight: bold; background: #f8f9fa; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.actions { display: flex; gap: 10px; }
.btn-icon { border: none; background: none; padding: 0; color: #666; transition: 0.2s; text-decoration: none; }
.btn-icon:hover { color: #007bff; }
.btn-delete:hover { color: #dc3545; }
/* Style for missing JSON */
.json-missing { color: #dc3545 !important; }


/* ====================== DIRECTIONAL SLIDE ANIMATIONS ====================== */

.modal.slide-right .modal-dialog,
.modal.slide-left .modal-dialog,
.modal.slide-top .modal-dialog,
.modal.slide-bottom .modal-dialog {
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

/* Slide from RIGHT */
.modal.slide-right .modal-dialog {
    transform: translateX(100%);
}
.modal.slide-right.show .modal-dialog {
    transform: translateX(0);
}

/* Slide from LEFT */
.modal.slide-left .modal-dialog {
    transform: translateX(-100%);
}
.modal.slide-left.show .modal-dialog {
    transform: translateX(0);
}

/* Slide from TOP */
.modal.slide-top .modal-dialog {
    transform: translateY(-100%);
}
.modal.slide-top.show .modal-dialog {
    transform: translateY(0);
}

/* Slide from BOTTOM */
.modal.slide-bottom .modal-dialog {
    transform: translateY(100%);
}
.modal.slide-bottom.show .modal-dialog {
    transform: translateY(0);
}

/* Disable Bootstrap default fade to prevent conflict */
.modal.slide-right,
.modal.slide-left,
.modal.slide-top,
.modal.slide-bottom {
    --bs-modal-fade-transform: none;
}

.slide_waiter,.slide_guests{display:none}
.active{display:block}

.dots_nav{
text-align:center;
margin-bottom:10px;
}

.dots_nav span{
display:inline-block;
width:8px;
height:8px;
margin:0 4px;
border-radius:50%;
background:#bbb;
opacity:.5;
}

.dots_nav span.active{
background:#b22222;
opacity:1;
}