/* ============================================================
   Flip & rotate tool. Shares the dropzone / panel / chip styles
   defined in crop.css; only the batch grid is new here.
   ============================================================ */

.flip-section { padding: 40px 0 56px; background: var(--c-bg); }

.flip-editor { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; }
@media (max-width: 991px) { .flip-editor { grid-template-columns: minmax(0, 1fr); } }

.flip-stage {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    min-height: 380px;
}

/* Toolbar above the grid */
.flip-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid var(--c-border);
}
.flip-toolbar__label {
    font-family: var(--font-head); font-size: .74rem; font-weight: 700;
    letter-spacing: 1.1px; text-transform: uppercase; color: var(--c-text-muted);
}
.flip-toolbar__count { margin-left: auto; font-size: .8rem; color: var(--c-text-muted); }

/* Thumbnail grid */
.flip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.flip-card {
    position: relative;
    background: var(--c-bg2);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: 10px 10px 8px;
    transition: var(--transition);
}
.flip-card.is-selected { border-color: var(--c-primary); background: var(--c-surface); }
.flip-card__check { position: absolute; top: 8px; left: 8px; z-index: 2; cursor: pointer; }
.flip-card__check input { width: 17px; height: 17px; accent-color: var(--c-primary); cursor: pointer; }
.flip-card__canvas {
    height: 130px; display: flex; align-items: center; justify-content: center;
    /* Checkerboard keeps transparent corners readable after a free-angle turn */
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eee 25%, transparent 25%),
        linear-gradient(-45deg, #eee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eee 75%),
        linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.flip-card__canvas canvas { max-width: 100%; max-height: 130px; display: block; }
.flip-card__meta { margin-top: 8px; font-size: .74rem; line-height: 1.4; }
.flip-card__name {
    display: block; color: var(--c-text-2); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flip-card__dims { color: var(--c-text-muted); }
.flip-card__actions { display: flex; gap: 4px; margin-top: 8px; }
.flip-card__actions button {
    flex: 1; border: 1px solid var(--c-border); background: var(--c-surface);
    border-radius: 8px; padding: 5px 0; cursor: pointer;
    color: var(--c-text-2); font-size: .82rem; transition: var(--transition);
}
.flip-card__actions button:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* Corner-fill swatches */
.flip-bg { display: flex; gap: 6px; }
.flip-bg button {
    flex: 1; height: 32px; border: 2px solid var(--c-border);
    border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
    font-size: .72rem; font-weight: 600; color: var(--c-text-2);
}
.flip-bg button.is-active { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(240,114,38,.12); }
.flip-bg button[data-bg="transparent"] {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #ddd 25%, transparent 25%),
        linear-gradient(-45deg, #ddd 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ddd 75%),
        linear-gradient(-45deg, transparent 75%, #ddd 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.flip-bg button[data-bg="#ffffff"] { background: #fff; }
.flip-bg button[data-bg="#000000"] { background: #000; color: #fff; }

/* Transform buttons: five across, so they need their own grid */
.flip-transform { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.flip-transform button {
    border: 1.5px solid var(--c-border); background: var(--c-surface);
    border-radius: var(--radius-sm); padding: 9px 0; cursor: pointer;
    color: var(--c-text-2); font-size: 1.02rem; transition: var(--transition);
}
.flip-transform button:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-bg2); }

.crop-btn-primary:disabled { opacity: .55; cursor: progress; transform: none; }