/* Make pagination buttons smaller */
.pagination {
    --pagination-padding-x: 0.65rem;
    --pagination-padding-y: 0.2rem;
}

@keyframes lookLeftRight {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    75% {
        transform: translateX(2px);
    }
}

.blink-look {
    animation: lookLeftRight 2s infinite ease-in-out;
    display: inline-block;
}

/* INVALID styling for Select2 */
.select2-container--default .select2-selection--single.is-invalid {
    border-color: #ef4444 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23EF4444'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23EF4444' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.75rem center;
    background-size: 0.9rem 0.9rem;
    padding-right: 2.5rem !important;
    /* Push text left so it doesn't overlap with icon */
}

/* VALID styling for Select2 */
.select2-container--default .select2-selection--single.is-valid {
    border-color: #059669 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23059669' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.75rem center;
    background-size: 0.8rem 0.8rem;
    padding-right: 2.5rem !important;
}

.search-wrapper .form-control.is-invalid,
.was-validated .form-control:invalid {
    --form-validation-border-color: #ef4444;
    --form-validation-focus-box-shadow: 0 0 0 0.125rem rgba(239, 68, 68, 0.25);
    border-color: var(--form-validation-border-color);
    padding-right: calc(var(--input-line-height)*1em + var(--input-padding-y)*2);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23EF4444'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23EF4444' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--input-line-height)*0.25em + var(--input-padding-y)*0.5) center;
    background-size: .998rem .998rem;
    /* Adjust size to be slightly smaller */
}

.search-wrapper .form-control.is-valid,
.was-validated .form-control:valid {
    --form-validation-border-color: #059669;
    --form-validation-focus-box-shadow: 0 0 0 0.125rem rgba(5, 150, 105, 0.25);
    border-color: var(--form-validation-border-color);
    padding-right: calc(var(--input-line-height)*1em + var(--input-padding-y)*2);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23059669' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(var(--input-line-height)*0.25em + var(--input-padding-y)*0.5) center;
    background-size: 0.875rem 0.875rem;
    /* Adjust size to be slightly smaller */
}

table.dataTable>tbody>tr.child ul.dtr-details {
    width: 100%;
}

table.dataTable>tbody>tr.child span.dtr-title {
    min-width: 50%;
}

table.dataTable>tbody>tr.child ul.dtr-details>li:first-child {
    padding-top: 0.5em !important;
    border-top: 1px solid #ddd;
}

table.dataTable>tbody>tr.child ul.dtr-details>li {
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 0.5em !important;
}

table.dataTable>tbody>tr.child ul.dtr-details>li:last-child {
    padding-top: 0.5em !important;
    border-bottom: 1px solid #ddd;
}

.dataTable tr.child .dtr-title {
    padding: 0.5rem;
    border-right: 1px solid #ddd;
    text-align: left !important;
    vertical-align: middle;
}

.dataTable tr.child td.child {
    padding: 0.5rem;
}

.dataTable tr.child .dtr-data {
    padding: 0.5rem;
    text-align: left !important;
}

/* Make space for the icon in multiple search */
.select2-container--default .select2-selection--multiple {
    padding-right: 3rem;
    /* give space for icon */
}

/* Ensure the feedback icon is aligned vertically */
.search-wrapper .form-control-feedback-icon {
    right: 2rem;
    /* adjust horizontal position */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* don't block clicks */
}

/* Ensure placeholder shifts when icon present */
.select2-container--default.select2-container--focus .select2-selection--multiple .select2-search__field,
.select2-container--default .select2-selection--multiple .select2-search__field {
    padding-left: 0;
    /* keeps placeholder aligned */
}

.search-wrapper .passanger-wrapper .class-wrapper {
    position: relative;
}

.search-wrapper .form-control {
    min-height: 63px;
    /* enough height for 2 lines */
    padding: 12px 20px 12px 45px;
    cursor: default;
    white-space: normal;
    /* allow wrapping/multi-line */
    line-height: 1.4;
    /* adjust line spacing */
    overflow-y: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.passanger-wrapper,
.class-wrapper {
    min-height: 63px;
    cursor: default;
    white-space: normal;
    /* allow wrapping/multi-line */
    line-height: 1.4;
    /* adjust line spacing */
    overflow-y: auto;
}

.search-wrapper .form-control>div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    /* ensure it takes full container width */
    display: block;
}

.search-wrapper .form-control.empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
    display: block;
    user-select: none;
}

.search-wrapper button.btn-sm {
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
}

.search-wrapper .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1050;
}

.search-wrapper .dropdown-toggle::after {
    display: none;
}

.search-wrapper .dropdown-menu .dropdown-item {
    display: block !important;
    white-space: normal !important;
    line-height: 1.4;
    padding: 8px 12px;
    cursor: pointer;
}

.search-wrapper .dropdown-menu .dropdown-item>div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    /* ensure it takes full container width */
    display: block;
    /* keep block to stack properly */
}

.search-wrapper .passanger-dropdown,
.class-dropdown {
    line-height: 2.854rem;
}

/* Make the contenteditable show red border if linked input is invalid */
[contenteditable].is-invalid {
    border: 1px solid #ef4444;
    box-shadow: 0 0 0 0.125rem rgba(239, 68, 68, 0.25);
}

[contenteditable].is-valid {
    border: 1px solid #059669;
    box-shadow: 0 0 0 0.125rem rgba(5, 150, 105, 0.25);
}

#bookingAccordion .accordion-button::after {
    display: none !important;
}


@keyframes blink {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 12px 4px rgba(255, 255, 0, 0.9);
    }

    50% {
        opacity: 0;
        box-shadow: none;
    }
}

.blinking-badge {
    animation: blink 1s infinite;
}

.group-header {
    cursor: pointer;
    background: #f8f9fa;
}

.group-header:hover {
    background: #e9ecef;
}

.group-header .toggle-icon {
    font-size: 16px;
}

.cursor-no-drop {
  cursor: no-drop;
}

.wizard>.actions {
    position: relative;
    text-align: right;
    padding: var(--spacer);
    padding-top: 22px;
    margin-top: 20px;
    --bg-opacity: 1;
    background-color: rgba(var(--light-rgb), var(--bg-opacity)) !important;
    border-top: var(--card-border-width) solid var(--card-border-color);
}

.h-30px {
    height: 1.75rem !important;
}

.idle-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}
mark {
    padding: 1px 5px;
    border-radius: 5px;
}

.bell-animate {
    display: inline-block;
    transform-origin: top center;
    animation: bellRing 0.8s ease-in-out infinite;
}

@keyframes bellRing {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(15deg); }
    40%  { transform: rotate(-12deg); }
    60%  { transform: rotate(10deg); }
    80%  { transform: rotate(-6deg); }
    100% { transform: rotate(0deg); }
}