/* === Thumbnail Generator — Tool Styles === */

@font-face {
    font-family: 'Impact';
    src: url('../../fonts/Impact-subset.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

.thumbnail-generator {
    --tg-shadow:       5px 5px 0 var(--wp--preset--color--contrast);
    --tg-shadow-hover: 7px 7px 0 var(--wp--preset--color--contrast);
    --tg-shadow-active:2px 2px 0 var(--wp--preset--color--contrast);
    --tg-radius:       4px;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 48px;
}

.thumbnail-generator *, .thumbnail-generator *::before, .thumbnail-generator *::after {
    box-sizing: border-box;
}

/* === Format Selector === */
.thumbnail-generator .format-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 800px;
    justify-content: center;
}
.thumbnail-generator .format-btn {
    font-family: 'Righteous', Impact, 'Arial Black', system-ui;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 8px 20px;
    border: 2px solid var(--wp--preset--color--contrast);
    border-radius: var(--tg-radius);
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--contrast);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}
.thumbnail-generator .format-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
}
.thumbnail-generator .format-btn.active {
    background: var(--wp--preset--color--primary);
    box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
    transform: translate(-1px, -1px);
}

/* === Slide Bar === */
.thumbnail-generator .slide-bar {
    width: 100%;
    max-width: 800px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.thumbnail-generator .slide-track-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 64px;
}
.thumbnail-generator .slide-track {
    display: flex;
    gap: 8px;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    height: 100%;
    align-items: center;
}
.thumbnail-generator .slide-thumb {
    width: 80px;
    height: 56px;
    border: 2px solid var(--wp--preset--color--contrast);
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.2s, transform 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
    background: #000;
}
.thumbnail-generator .slide-thumb canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.thumbnail-generator .slide-thumb.active {
    opacity: 1;
    border-color: var(--wp--preset--color--primary);
    transform: scale(1.08);
    box-shadow: 2px 2px 0 var(--wp--preset--color--contrast);
}
.thumbnail-generator .slide-thumb .slide-delete {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 16px;
    height: 16px;
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    border: none;
    border-radius: 2px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 5;
    padding: 0;
}
.thumbnail-generator .slide-thumb:hover .slide-delete { opacity: 0.8; }
.thumbnail-generator .slide-nav,
.thumbnail-generator .slide-add {
    width: 32px;
    height: 32px;
    border: 2px solid var(--wp--preset--color--contrast);
    border-radius: var(--tg-radius);
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--contrast);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.1s;
    padding: 0;
    font-family: system-ui, sans-serif;
}
.thumbnail-generator .slide-nav:hover,
.thumbnail-generator .slide-add:hover {
    background: var(--wp--preset--color--surface-alt);
}
.thumbnail-generator .slide-add {
    background: var(--wp--preset--color--primary);
    font-weight: 700;
}

/* === Preview Wrapper === */
.thumbnail-generator .preview-wrapper {
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: center;
}

/* === Preview Area === */
.thumbnail-generator #preview-area {
    background: #000000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 0 4px #1A1A1A;
    overflow: hidden;
}

.thumbnail-generator .border-active::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 2px solid white;
    pointer-events: none;
    z-index: 10;
}
.thumbnail-generator .border-active.light-bg::after {
    border-color: var(--wp--preset--color--contrast);
}

/* === Draggable Layers === */
.thumbnail-generator .drag-layer {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: grab;
    user-select: none;
    touch-action: none;
    border: 2px dashed transparent;
    padding: 4px 8px;
    transition: border-color 0.15s;
}
.thumbnail-generator .drag-layer:hover {
    border-color: rgba(232, 195, 42, 0.4);
}
.thumbnail-generator .drag-layer.dragging {
    cursor: grabbing;
    border-color: var(--wp--preset--color--primary);
    border-style: solid;
}
.thumbnail-generator .drag-layer.selected {
    border-color: rgba(232, 195, 42, 0.6);
}
.thumbnail-generator .drag-layer.editing {
    cursor: text;
    border-color: var(--wp--preset--color--primary);
    border-style: solid;
    outline: none;
}
.thumbnail-generator .drag-layer.empty { display: none; }

.thumbnail-generator #headline-layer {
    font-family: 'Righteous', Impact, 'Arial Black', system-ui;
    font-weight: 400;
    color: #E5E7EB;
    z-index: 3;
    text-align: center;
    white-space: pre;
    line-height: 1.15;
}

.thumbnail-generator #subtitle-layer {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    color: #E5E7EB;
    z-index: 3;
    text-align: center;
    white-space: pre;
    line-height: 1.15;
}

.thumbnail-generator #image-layer {
    z-index: 1;
    max-width: none;
    padding: 0;
}
.thumbnail-generator #image-layer.empty { display: none; }

/* === Resize Handles === */
.thumbnail-generator .resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--wp--preset--color--primary);
    border: 2px solid var(--wp--preset--color--contrast);
    z-index: 15;
    cursor: nwse-resize;
    touch-action: none;
    display: none;
}
.thumbnail-generator .resize-handle.visible { display: block; }
.thumbnail-generator .resize-handle.tl { cursor: nwse-resize; }
.thumbnail-generator .resize-handle.tr { cursor: nesw-resize; }
.thumbnail-generator .resize-handle.bl { cursor: nesw-resize; }
.thumbnail-generator .resize-handle.br { cursor: nwse-resize; }

/* === Text Width Handles === */
.thumbnail-generator .text-width-handle {
    position: absolute;
    width: 6px;
    height: 28px;
    background: var(--wp--preset--color--primary);
    border: 2px solid var(--wp--preset--color--contrast);
    border-radius: 2px;
    cursor: ew-resize;
    z-index: 25;
    display: none;
    touch-action: none;
    transform: translateY(-50%);
}
.thumbnail-generator .text-width-handle.visible { display: block; }

/* === Snap Guides === */
.thumbnail-generator .snap-guide {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    display: none;
}
.thumbnail-generator .snap-guide.vertical {
    width: 1px;
    top: 0;
    bottom: 0;
    background: rgba(232, 195, 42, 0.6);
}
.thumbnail-generator .snap-guide.horizontal {
    height: 1px;
    left: 0;
    right: 0;
    background: rgba(232, 195, 42, 0.6);
}
.thumbnail-generator .snap-guide.third {
    background: rgba(232, 195, 42, 0.3);
}

.thumbnail-generator .preview-logo {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    opacity: 0.85;
    z-index: 4;
    transition: opacity 0.2s;
}
.thumbnail-generator .preview-logo.hidden {
    opacity: 0;
    pointer-events: none;
}

/* === Controls === */
.thumbnail-generator .controls {
    width: 100%;
    max-width: 800px;
    background: var(--wp--preset--color--surface);
    border: 2px solid var(--wp--preset--color--contrast);
    box-shadow: var(--tg-shadow);
    border-radius: var(--tg-radius);
    padding: 24px;
    margin-top: 20px;
}

.thumbnail-generator .section-label {
    display: block;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--wp--preset--color--contrast);
    margin-bottom: 8px;
    margin-top: 20px;
}
.thumbnail-generator .section-label:first-child { margin-top: 0; }
.thumbnail-generator .section-label .font-hint {
    font-weight: 400;
    opacity: 0.5;
    text-transform: none;
    letter-spacing: 0;
}

/* === Textarea === */
.thumbnail-generator textarea {
    width: 100%;
    background: var(--wp--preset--color--surface-alt);
    color: var(--wp--preset--color--contrast);
    border: 2px solid var(--wp--preset--color--contrast);
    padding: 12px 14px;
    border-radius: var(--tg-radius);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    resize: none;
    transition: box-shadow 0.15s;
}
.thumbnail-generator textarea:focus {
    outline: none;
    box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
}

/* === Font Size Row === */
.thumbnail-generator .font-size-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}
.thumbnail-generator .font-size-row input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 0;
    background: var(--wp--preset--color--contrast);
    outline: none;
    cursor: pointer;
}
.thumbnail-generator .font-size-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 0;
    border: 2px solid var(--wp--preset--color--contrast);
    background: var(--wp--preset--color--primary);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--wp--preset--color--contrast);
}
.thumbnail-generator .font-size-row input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 0;
    border: 2px solid var(--wp--preset--color--contrast);
    background: var(--wp--preset--color--primary);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--wp--preset--color--contrast);
}
.thumbnail-generator .font-size-value {
    font-weight: 700;
    font-size: 0.85rem;
    min-width: 48px;
    text-align: right;
}

/* === Checkboxes === */
.thumbnail-generator .toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.thumbnail-generator .toggle-row input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--wp--preset--color--contrast);
    border-radius: 2px;
    background: var(--wp--preset--color--surface);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background 0.1s;
}
.thumbnail-generator .toggle-row input[type="checkbox"]:checked {
    background: var(--wp--preset--color--primary);
}
.thumbnail-generator .toggle-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 6px;
    height: 10px;
    border: 2px solid var(--wp--preset--color--contrast);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.thumbnail-generator .toggle-row.dimmed {
    opacity: 0.4;
    pointer-events: none;
}

/* === Swatches === */
.thumbnail-generator .swatch-group {
    display: flex;
    gap: 10px;
}
.thumbnail-generator .swatch {
    flex: 1;
    height: 48px;
    border-radius: var(--tg-radius);
    cursor: pointer;
    border: 2px solid var(--wp--preset--color--contrast);
    transition: box-shadow 0.1s, transform 0.1s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.thumbnail-generator .swatch:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
}
.thumbnail-generator .swatch.active {
    box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
    transform: translate(-1px, -1px);
    border-width: 3px;
}

/* === Alignment Row === */
.thumbnail-generator .align-row {
    display: flex;
    gap: 6px;
}
.thumbnail-generator .align-btn {
    width: 36px;
    height: 36px;
    border: 2px solid var(--wp--preset--color--contrast);
    border-radius: var(--tg-radius);
    background: var(--wp--preset--color--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    transition: background 0.1s, transform 0.1s, box-shadow 0.1s;
    padding: 0;
    color: var(--wp--preset--color--contrast);
    font-family: 'Inter', system-ui, sans-serif;
}
.thumbnail-generator .align-btn:hover {
    background: var(--wp--preset--color--surface-alt);
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 var(--wp--preset--color--contrast);
}
.thumbnail-generator .align-btn:active {
    transform: translate(1px, 1px);
    box-shadow: none;
}
.thumbnail-generator .align-btn svg {
    width: 16px;
    height: 16px;
}

/* === Image Controls === */
.thumbnail-generator .image-controls {
    display: flex;
    gap: 8px;
}

/* === Buttons === */
.thumbnail-generator .btn {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--contrast);
    border: 2px solid var(--wp--preset--color--contrast);
    box-shadow: var(--tg-shadow);
    padding: 16px;
    border-radius: var(--tg-radius);
    font-family: 'Righteous', Impact, 'Arial Black', system-ui;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}
.thumbnail-generator .btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--tg-shadow-hover);
}
.thumbnail-generator .btn:active {
    transform: translate(2px, 2px);
    box-shadow: var(--tg-shadow-active);
}
.thumbnail-generator .btn--secondary {
    background: var(--wp--preset--color--surface);
    font-size: 0.85rem;
    padding: 12px 16px;
    letter-spacing: 1px;
}
.thumbnail-generator .btn--danger {
    background: #e74c3c;
    color: white;
    font-size: 0.85rem;
    padding: 12px 16px;
    letter-spacing: 1px;
}

.thumbnail-generator .export-row {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.thumbnail-generator .export-row .btn { flex: 1; }

.thumbnail-generator .divider {
    border: none;
    border-top: 2px solid var(--wp--preset--color--surface-alt);
    margin: 20px 0 0;
}

/* === Font Picker === */
.thumbnail-generator .font-picker {
    display: flex;
    gap: 8px;
}
.thumbnail-generator .font-btn {
    font-family: 'Righteous', Impact, 'Arial Black', system-ui;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 8px 20px;
    border: 2px solid var(--wp--preset--color--contrast);
    border-radius: var(--tg-radius);
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--contrast);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
    flex: 1;
}
.thumbnail-generator .font-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
}
.thumbnail-generator .font-btn.active {
    background: var(--wp--preset--color--primary);
    box-shadow: 3px 3px 0 var(--wp--preset--color--contrast);
    transform: translate(-1px, -1px);
}