/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  NEW ADVERT EDITOR — RESPONSIVE OVERRIDES                              ║
   ║  Author: Alex & Nick Paterson                                          ║
   ║  Loaded last so all rules win without !important hacks where possible. ║
   ║  Breakpoints: base = 375 (iPhone), 640 (tablet), 1024 (desktop).       ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */


/* ── Accordion container ────────────────────────────────────────────────── */
#accordion-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

/* ── Accordion headers ──────────────────────────────────────────────────── */
.accordion-header {
    font-size: 0.95rem;
    padding: 0.5rem 0.6rem;
    word-break: break-word;
    gap: 0.4rem;
}

/* ── All form controls — full-width, no overflow ────────────────────────── */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 1rem; /* Prevents iOS auto-zoom (must be ≥ 16 px / 1 rem) */
}

/* ── Fieldset ───────────────────────────────────────────────────────────── */
fieldset {
    max-width: 100%;
    overflow: hidden;
    padding: 0.5rem;
    border: 1px solid #ccc;
    margin: 0;
}
legend {
    font-size: 0.9rem;
    padding: 0 0.25rem;
}

/* ── Fix: smartForm.css hard-codes .existing-file-thumb-container img at
   800 px — forces horizontal scroll on every phone.
   ──────────────────────────────────────────────────────────────────────── */
.existing-file-thumb-container img,
.existing-file-thumb-container video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

/* ── Touch-friendly buttons (iOS HIG: ≥ 44 × 44 px targets) ────────────── */
.btn,
button,
input[type="submit"],
input[type="button"],
.form-btn,
.cta-button {
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
    touch-action: manipulation;
}

/* CTA rows stack vertically on mobile */
.cta-container,
.form-cta,
.glitch-action {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

/* ── Labels ─────────────────────────────────────────────────────────────── */
label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0;
    margin-top: 0.5rem;
    margin-block-start: 0;
}

/* ── Accordion summary message ──────────────────────────────────────────── */
.summary-message {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    word-break: break-word;
}

/* ── Tooltip — hide on touch (no hover) and cap width on desktop ────────── */
#tooltip {
    display: none !important;
}
.data-title-wrapper:hover::after {
    display: none !important;
}

/* ── Overflow safety net ────────────────────────────────────────────────── */
.accordion-content,
.accordion-content > *,
.maintainListing {
    max-width: 100%;
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
}


/* ══════════════════════════════════════════════════════════════════════════
   MEDIA PANEL — card grid
   Both #current-files (uploaded) and #file-preview-container (pending) use
   the same CSS grid so existing and new files look identical.
   ══════════════════════════════════════════════════════════════════════════ */

#current-files > h2 {
    grid-column: 1 / -1;
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

#current-files,
#file-preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
    /* Top + right padding gives the overhanging X button (top:-9px, right:-9px)
       room inside the grid's own bounds, clear of parent overflow-x:hidden */
    padding: 14px 14px 6px 4px;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.media-card {
    position: relative;
    border-radius: 12px;
    background: #e8e8e8;
    border: none;
    overflow: visible;   /* X button overhangs the corner */
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    transition: box-shadow 0.2s, transform 0.15s;
    padding: 0;
}
.media-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

/* ── Thumbnail — square, fills card ────────────────────────────────────── */
.media-card-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: #d0d0d0;
    display: flex;
    align-items: center;
    transition: border-radius 0.2s;
}
.media-card.expanded .media-card-thumb {
    border-radius: 12px 12px 0 0;
}
.media-card-thumb img,
.media-card-thumb video {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.media-card-thumb .fa-file-pdf {
    font-size: 2.2rem;
    color: rgba(255,255,255,0.75);
}

/* ── X corner remove button ─────────────────────────────────────────────── */
.media-card-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    /* Override the global btn width:100% / min-height:44px rules */
    width: 26px !important;
    min-height: 26px !important;
    min-width: unset !important;
    height: 26px;
    padding: 0;
    border: none;
    background: #fff;       /* white circle backing — visible against any image */
    color: #c0392b;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    touch-action: manipulation;
    transition: color 0.15s, transform 0.15s;
}
.media-card-remove:hover,
.media-card-remove:focus {
    color: #e74c3c;
    transform: scale(1.15);
    outline: none;
}

/* ── Too-large warning badge ────────────────────────────────────────────── */
.media-card-warning {
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    background: rgba(200,38,20,0.92);
    text-align: center;
    padding: 0.3rem 0.2rem;
    border-radius: 0 0 11px 11px;
    line-height: 1.3;
}
.media-card.too-large .media-card-thumb {
    opacity: 0.35;
    cursor: not-allowed;
    border-radius: 12px 12px 0 0;
}
.media-card.too-large {
    box-shadow: 0 0 0 2px rgba(200,38,20,0.5);
    cursor: default;
}

/* ── Expanded fields — revealed when thumbnail is clicked ───────────────── */
.media-card-fields {
    display: none;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    border-radius: 0 0 11px 11px;
}
.media-card.expanded .media-card-fields {
    display: flex;
}

/* Dark text on light background for easy reading */
.media-card-fields label {
    font-size: 0.78rem;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0;
}
.media-card-fields input[type="text"],
.media-card-fields textarea {
    font-size: 0.82rem !important;
    background: #fff !important;
    color: #222 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    padding: 0.3rem 0.4rem;
    width: 100%;
    min-height: unset !important;
}
.media-card-fields input[type="text"]::placeholder,
.media-card-fields textarea::placeholder {
    color: #aaa;
}
.media-card-fields input[type="text"]:focus,
.media-card-fields textarea:focus {
    border-color: #888 !important;
    outline: none;
}

/* Save button inside card */
.media-card-fields .save-changes-btn {
    width: 100% !important;
    min-height: 36px;
    margin-top: 0.15rem;
    font-size: 0.82rem;
}

/* ── Per-file progress bar ──────────────────────────────────────────────── */
.file-progress-bar-wrap {
    height: 4px;
    background: #ddd;
    border-radius: 0 0 11px 11px;
    overflow: hidden;
}
.file-progress-bar {
    height: 100%;
    width: 0%;
    background: #4caf50;
    transition: width 0.2s ease;
}

/* ── Upload button bar ──────────────────────────────────────────────────── */
.fileupload-buttonbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.custom-file-upload {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}
.custom-file-upload .smallerText {
    font-size: 0.8rem;
    color: rgba(30, 29, 29, 0.65);
    margin: 0;
}
#upload-button {
    flex: 1;
}


/* ══════════════════════════════════════════════════════════════════════════
   TABLET ≥ 640 px
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {

    .editor-h1 { font-size: 1.6rem; }

    #editor-head {
        padding: 1.5rem;
        margin-bottom: 1.25rem;
    }
    #editor-head p { font-size: 1rem; }

    #accordion-container { padding: 0 1rem; }

    .accordion-header {
        font-size: 1.1rem;
        padding: 0.6rem 1rem;
    }

    fieldset {
        padding: 0.75rem;
        border: 2px groove #ccc;
    }

    /* Re-enable tooltips on non-touch screens */
    #tooltip {
        display: block !important;
        max-width: min(350px, 90vw);
        word-wrap: break-word;
    }
    .data-title-wrapper:hover::after {
        display: block !important;
        width: min(400px, 90vw);
    }

    /* Buttons return to natural width */
    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    .form-btn,
    .cta-button {
        width: auto;
        min-width: 160px;
        flex: 1;
    }

    #fileupload .fileupload-buttonbar button {
        width: auto;
    }

    /* X button must stay small regardless of the btn width:auto rule above */
    .media-card-remove {
        width: 26px !important;
        min-width: unset !important;
        min-height: 26px !important;
    }

    /* CTA rows flow horizontally */
    .cta-container,
    .form-cta,
    .glitch-action {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Upload bar flows horizontally */
    .fileupload-buttonbar {
        flex-direction: column;
        flex-wrap: wrap;
    }

    /* Larger card grid */
    #current-files,
    #file-preview-container {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        gap: 0.75rem;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP ≥ 1024 px
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .editor-h1 { font-size: 1.8rem; }

    #editor-head {
        padding: 30px;
        margin-bottom: 25px;
    }

    #accordion-container { padding: 0; }

    .accordion-header {
        font-size: 1.4rem;
        padding: 0.5rem 1rem;
    }

    fieldset { padding: 1rem; }

    legend { font-size: 1rem; }

    /* Largest card grid */
    #current-files,
    #file-preview-container {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        padding: 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Image reordering
   ══════════════════════════════════════════════════════════════════════════ */
/* The card being dragged — ghost-out the original */
.existing-file-card.dragging {
    opacity: 0.35;
    outline: 2px dashed var(--color-primary, #0d6efd);
}

/* The placeholder slot that shows where the card will land */
.reorder-placeholder {
    background: color-mix(in srgb, var(--color-primary, #0d6efd) 12%, transparent);
    border: 2px dashed var(--color-primary, #0d6efd);
    border-radius: inherit;   /* matches your card's border-radius */
    pointer-events: none;
}

/* Grab cursor to signal draggability */
.existing-file-card[draggable="true"] {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.existing-file-card[draggable="true"]:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.drag-clone {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transition: none !important;  /* no transitions while dragging */
}

.notification {
    display: flex;
    padding: 1rem;
}

.notification p {
    padding: .25rem 1rem;
    border-radius: 45px;
}

.notification p.success { background: #addcb4; }
.notification p.error   { background: #e3a9a9; }