#checkin-warning {
    display: none;
}

#other-tickets-warning {
    display: none;
}

#ticket-dropzone {
    min-height: 78px;
    padding: 10px;
    text-align: left !important;
    cursor: pointer;
}

#ticket-dropzone .dz-message {
    margin: 1em 0;
    text-align: center;
}

#ticket-dropzone .dz-message i {
    margin-right: 6px;
}

#ticket-dropzone .dz-preview.dz-image-preview {
    background: transparent;
}

#ticket-dropzone .dz-small-preview {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    width: 60px;
    text-align: center;
}

#ticket-dropzone .dz-small-preview .dz-image {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}

#ticket-dropzone .dz-small-preview .dz-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#ticket-dropzone .dz-small-preview .dz-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    font-size: 10px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    z-index: 10;
}

#ticket-dropzone .dz-small-preview .dz-remove:hover {
    background: red;
    color: white;
    text-decoration: none;
}

#ticket-dropzone .dz-small-preview .dz-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    margin: 0;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.1);
    opacity: 1;
    z-index: 5;
}

#ticket-dropzone .dz-small-preview .dz-upload {
    display: block;
    height: 100%;
    width: 0;
    background: #28a745;
    transition: width 0.3s ease;
}

#ticket-dropzone .dz-small-preview.dz-complete .dz-progress,
#ticket-dropzone .dz-small-preview.dz-error .dz-progress,
#ticket-dropzone .dz-small-preview .dz-error-message,
#ticket-dropzone .dz-small-preview .dz-success-mark,
#ticket-dropzone .dz-small-preview .dz-error-mark {
    display: none;
}

/* Stacked create-ticket form: constrain width for readability on large screens. */
.support-create-form {
    max-width: 820px;
}

/* Formatted multi-line example placeholder shown inside the details editor while empty.
   NB: the .tox prefix is required. The TinyMCE oxide skin has
   `.tox :not(svg):not(rect){font-size:inherit;color:inherit;font-family:inherit}`
   at specificity (0,1,2), which beats a bare .details-placeholder-overlay (0,1,0)
   and forces the overlay to inherit the editor's size/colour. `.tox .details-...`
   is (0,2,0) and wins. */
.tox .details-placeholder-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    color: #888;
    font-size: 1rem;
    z-index: 1;
}
.tox .details-placeholder-overlay .details-placeholder-lead {
    margin-bottom: 0.25rem;
}

/* Hide TinyMCE statusbar clutter (element path + word count); keep the resize handle. */
.support-create-form .tox-statusbar__path,
.support-create-form .tox-statusbar__wordcount {
    display: none;
}

/* Keep the form actions reachable on phones.
   Details is a fixed 300px TinyMCE editor, which on a short phone screen is most
   of the viewport, so the buttons sit below the fold - and dragging inside the
   editor scrolls its iframe rather than the page, which makes them awkward to
   get back to at all. Sticking the row to the bottom of the viewport keeps
   Submit on screen at any scroll position; it returns to normal flow once its
   own position comes into view.
   Must sit on a direct child of .support-create-form: a sticky element can only
   travel within its containing block, so nesting it in the button row's own
   wrapper would give it almost nowhere to move. BUG-58. */
@media (max-width: 767.98px) {
    .support-create-form .support-create-actions {
        position: -webkit-sticky; /* older WebKit, incl. BlackBerry's browser */
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin-bottom: 0; /* bottom:0 aligns the margin box - a margin here shows page content beneath */
        padding-bottom: 0.75rem;
        background: var(--bs-body-bg, #fff);
        box-shadow: 0 -0.5rem 0.75rem -0.5rem rgba(0, 0, 0, 0.25);
    }
}

/* Extra Details toggle chevron flips when the section is open. */
.support-create-form [data-bs-toggle="collapse"] .fa-chevron-down {
    transition: transform 0.2s ease;
}
.support-create-form [data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}