/* Teroppu Plugin Styles - v1.1.0 (Top Preview) */

:root {
    --teroppu-bg: #1e1e1e;
    --teroppu-panel-bg: #252525;
    --teroppu-card-bg: #2a2a2a;
    --teroppu-text: #e0e0e0;
    --teroppu-text-muted: #aaaaaa;
    --teroppu-accent: #ff0055;
    --teroppu-accent-hover: #ff3377;
    --teroppu-border: #333333;
    --teroppu-radius: 12px;
    --teroppu-radius-sm: 8px;
    --teroppu-spacing: 20px;
}

/* Main Wrapper */
.teroppu-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--teroppu-bg);
    color: var(--teroppu-text);
    border-radius: var(--teroppu-radius);
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* Allow sticky elements to work */
}

/* Top: Sticky Preview */
.teroppu-preview-area {
    /* Default state: static or relative */
    position: relative;
    background: #111;
    border-bottom: 1px solid var(--teroppu-border);
    width: 100%;
    z-index: 1000;
}

.teroppu-preview-area.is-fixed {
    position: fixed;
    top: 32px;
    /* WP Admin Bar */
    left: 50%;
    transform: translateX(-50%);
    max-width: 1000px;
    /* Match wrapper max-width */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* Adjust for mobile admin bar if needed, or smaller screens */
@media screen and (max-width: 782px) {
    .teroppu-preview-area.is-fixed {
        top: 46px;
        /* WP Admin bar is taller on mobile */
    }
}

.teroppu-canvas-container {
    background: repeating-conic-gradient(#222 0% 25%, #1a1a1a 0% 50%) 50% / 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    min-height: 250px;
    /* Large preview */
    position: relative;
}

#teroppu-canvas {
    max-width: 100%;
    height: auto;
    max-height: 40vh;
    /* Limit height on small screens */
    /* box-shadow removed */
}

.teroppu-loading {
    position: absolute;
    color: white;
    background: rgba(0, 0, 0, 0.8);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    display: none;
}

/* Main Content Area */
.teroppu-main-content {
    padding: var(--teroppu-spacing);
    background: var(--teroppu-panel-bg);
}

/* Text Input Section */
.teroppu-input-section {
    margin-bottom: 20px;
}

.teroppu-editor-box {
    width: 100%;
    padding: 15px;
    background: var(--teroppu-card-bg);
    border: 1px solid var(--teroppu-border);
    border-radius: var(--teroppu-radius-sm);
    color: white;
    font-size: 1.5rem;
    /* Larger text for input */
    font-weight: 700;
    line-height: 1.5;
    min-height: 80px;
    outline: none;
    transition: border-color 0.2s;
}

.teroppu-editor-box:focus {
    border-color: var(--teroppu-accent);
}

/* 2-Column Grid Layout */
.teroppu-grid-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    /* Presets take space, Settings fixed width */
    gap: 20px;
    align-items: start;
    /* Important for sticky column */
}

/* Left Column: Presets */
.teroppu-col-presets {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.teroppu-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.teroppu-section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--teroppu-text);
}

/* Category Tabs */
.teroppu-category-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.teroppu-tab {
    background: var(--teroppu-card-bg);
    color: var(--teroppu-text-muted);
    border: 1px solid var(--teroppu-border);
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
}

.teroppu-tab:hover {
    border-color: #555;
    color: white;
}

.teroppu-tab.active {
    background: var(--teroppu-accent);
    border-color: var(--teroppu-accent);
    color: white;
}

/* Style Grid */
.teroppu-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.teroppu-style-item {
    background: var(--teroppu-card-bg);
    border: 2px solid transparent;
    border-radius: var(--teroppu-radius-sm);
    cursor: pointer;
    overflow: hidden;
    /* aspect-ratio: 16/9; Removed to allow text below */
    transition: all 0.2s;
    position: relative;
    padding-bottom: 6px;
    /* Add space for text */
    display: flex;
    flex-direction: column;
}

.teroppu-style-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.teroppu-style-item.active {
    border-color: #007cba;
    box-shadow: 0 0 0 2px #007cba;
}

.teroppu-style-preview {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

.teroppu-style-name {
    font-size: 11px;
    text-align: center;
    margin-top: 4px;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Right Column: Settings (Sticky) */
.teroppu-col-settings {
    position: sticky;
    top: 350px;
    /* Adjust based on preview height + margin */
    /* Note: JS might need to adjust this dynamically if preview height changes, 
       but a safe estimate usually works. Or use top: 80px if preview scrolls away 
       (but we made preview sticky).
       Wait, if preview is sticky, settings also need to be sticky UNDER it?
       Or if preview is sticky, it covers the top. 
       Actually, if preview is sticky, the settings column sticky top needs to account for preview height.
    */
    top: 300px;
}

.teroppu-settings-panel {
    background: var(--teroppu-card-bg);
    border: 1px solid var(--teroppu-border);
    border-radius: var(--teroppu-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.teroppu-settings-panel h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: var(--teroppu-text);
    border-bottom: 1px solid var(--teroppu-border);
    padding-bottom: 10px;
}

.teroppu-setting-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.teroppu-group-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--teroppu-text-muted);
}

.teroppu-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.teroppu-label-sm {
    font-size: 0.8rem;
    color: #ccc;
    min-width: 40px;
}

/* Layout Controls */
.teroppu-layout-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #222;
    padding: 10px;
    border-radius: 6px;
}

.teroppu-align-group {
    flex: 1;
    display: flex;
    background: #333;
    padding: 2px;
    border-radius: 4px;
}

.teroppu-align-group label {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 4px 0;
    border-radius: 2px;
    font-size: 0.75rem;
    color: #aaa;
    transition: background 0.2s;
}

.teroppu-align-group input {
    display: none;
}

.teroppu-align-group label:has(input:checked) {
    background: var(--teroppu-accent);
    color: white;
}



/* Inputs */
input[type="range"] {
    flex: 1;
    height: 4px;
    background: #444;
    border-radius: 2px;
    appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.teroppu-color-input {
    width: 24px;
    height: 24px;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
}

.teroppu-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.teroppu-color-input::-webkit-color-swatch {
    border: 2px solid #fff;
    border-radius: 50%;
}

/* Select Input */
.teroppu-select {
    flex: 1;
    background: #444;
    color: white;
    border: 1px solid #555;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
    outline: none;
}

.teroppu-select:focus {
    border-color: var(--teroppu-accent);
    outline: none;
}

.teroppu-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--teroppu-text);
    font-size: 14px;
}

.teroppu-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Download Button */
.teroppu-download-section {
    margin-top: 10px;
}

.teroppu-btn-primary {
    width: 100%;
    background: var(--teroppu-accent);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.teroppu-btn-primary:hover {
    background: var(--teroppu-accent-hover);
}

.teroppu-btn-primary:active {
    transform: scale(0.98);
}

.teroppu-btn-sm {
    background: #444;
    color: white;
    border: 1px solid #555;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.teroppu-btn-sm:hover {
    background: #555;
    border-color: #777;
}

.teroppu-btn-sm:active {
    transform: scale(0.95);
}

/* Responsive */
@media (max-width: 800px) {
    .teroppu-grid-layout {
        grid-template-columns: 1fr;
    }

    .teroppu-col-settings {
        position: static;
        /* No sticky on mobile stack */
        order: -1;
        /* Show settings above presets on mobile? Or below? 
                      User said "Customize is separate tab is hard", implying they want it close.
                      Let's keep it below presets or make it a sticky bottom bar?
                      Standard stacking (Presets -> Settings) might be annoying if list is long.
                      Let's put Settings ABOVE presets on mobile so they are accessible.
                   */
        order: 0;
    }

    .teroppu-col-presets {
        order: 1;
    }
}