/**
 * ============================================================================
 * Specifikit Configuration Generator CSS
 * Location: /assets/css/specifikitgenerator.css
 * Version: 3.10 (Multi-Angle View UI)
 * Author: specifikit.com
 * Description: This stylesheet provides the custom styles for the Specifikit
 *              product builder tool, ensuring a premium, intuitive UI.
 * ============================================================================
 */

/* ==========================================================================
   1. ROOT VARIABLES & GLOBAL STYLES
   ========================================================================== */
:root {
  --sk-primary: #4f46e5;         /* Indigo 600 */
  --sk-primary-dark: #4338ca;    /* Indigo 700 */
  --sk-primary-light: #eef2ff;   /* Indigo 50 */
  
  --sk-secondary: #374151;       /* Gray 700 */
  --sk-text-muted: #6b7280;      /* Gray 500 */
  
  --sk-danger: #ef4444;          /* Red 500 */
  --sk-danger-light: #fef2f2;    /* Red 50 */
  --sk-danger-dark: #b91c1c;     /* Red 800 */

  --sk-success: #10b981;         /* Emerald 500 */
  --sk-success-light: #ecfdf5;   /* Emerald 50 */
  
  --sk-bg-main: #f9fafb;         /* Gray 50 */
  --sk-bg-card: #ffffff;
  --sk-bg-subtle: #f3f4f6;       /* Gray 100 */
  
  --sk-border-color: #e5e7eb;    /* Gray 200 */
  --sk-border-focus: var(--sk-primary);
  
  --sk-radius: 0.5rem;          /* 8px */
  --sk-radius-lg: 0.75rem;       /* 12px */
  
  --sk-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sk-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sk-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html { 
    font-family: 'Inter', sans-serif; 
}

body#specifikit-generator-tool {
    background-color: var(--sk-bg-main);
}

[x-cloak] { 
    display: none !important; 
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #e5e7eb; }
::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* ==========================================================================
   2. LAYOUT & CARD STYLES
   ========================================================================== */
.sk-card {
  background-color: var(--sk-bg-card);
  border-radius: var(--sk-radius-lg);
  border: 1px solid var(--sk-border-color);
  box-shadow: var(--sk-shadow);
  transition: var(--sk-transition);
}

.sk-card__header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--sk-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sk-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sk-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sk-card__body {
  padding: 1.5rem;
}

.sk-card__footer {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--sk-border-color);
  background-color: var(--sk-bg-subtle);
}

/* Section Descriptions */
.section-description {
    padding: 0.75rem 1.5rem 0.5rem;
    font-size: 0.875rem;
    color: var(--sk-text-muted);
    border-bottom: 1px solid var(--sk-border-color);
}

/* Collapsible Sections */
details.sk-card { padding: 0; }
details.sk-card > summary {
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
details.sk-card > summary::-webkit-details-marker { display: none; }
details.sk-card > summary::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  transition: transform var(--sk-transition);
  color: var(--sk-text-muted);
  margin-left: auto;
}
details[open].sk-card > summary::after { transform: rotate(180deg); }
details[open].sk-card > summary { border-bottom: 1px solid var(--sk-border-color); }
details.sk-card[open] > .section-description { border-top: 1px solid var(--sk-border-color); }


/* ==========================================================================
   3. FORM CONTROLS
   ========================================================================== */
.form-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sk-secondary);
  margin-bottom: 0.25rem;
}

.form-input, .form-select, .form-textarea {
  display: block;
  width: 100%;
  border-radius: var(--sk-radius);
  border: 1px solid #d1d5db; /* gray-300 */
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: var(--sk-transition);
  background-color: white;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--sk-border-focus);
  box-shadow: 0 0 0 2px var(--sk-primary-light);
}
.form-input.is-invalid, .form-select.is-invalid {
  border-color: var(--sk-danger);
}
.form-input.is-invalid:focus, .form-select.is-invalid:focus {
  border-color: var(--sk-danger);
  box-shadow: 0 0 0 2px var(--sk-danger-light);
}
.form-help { font-size: 0.75rem; color: var(--sk-text-muted); margin-top: 0.5rem; }

.form-input--sm {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

.form-checkbox, .form-radio {
  border-radius: 0.25rem;
  border-color: #d1d5db;
  color: var(--sk-primary);
}
.form-checkbox:focus, .form-radio:focus {
  --tw-ring-color: var(--sk-primary-light);
  border-color: var(--sk-primary);
}
.form-radio {
  border-radius: 9999px;
}


/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch__slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; transition: var(--sk-transition); border-radius: 24px; }
.toggle-switch__slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: var(--sk-transition); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-switch__slider { background-color: var(--sk-primary); }
.toggle-switch input:checked + .toggle-switch__slider:before { transform: translateX(20px); }

/* Tag Input */
.tag-input__tag { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--sk-primary-light); color: var(--sk-primary-dark); font-size: 0.875rem; font-weight: 500; padding: 0.25rem 0.5rem 0.25rem 0.75rem; border-radius: 999px; }
.tag-input__remove-btn { background: none; border: none; cursor: pointer; padding: 0; color: var(--sk-primary); line-height: 1; opacity: 0.7; transition: var(--sk-transition); font-size: 1.25em; font-weight: bold; }
.tag-input__remove-btn:hover { opacity: 1; color: var(--sk-primary-dark); }


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.sk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--sk-radius); font-weight: 600; padding: 0.625rem 1rem; font-size: 0.875rem; transition: var(--sk-transition); cursor: pointer; border: 1px solid transparent; user-select: none; }
.sk-btn--primary { background-color: var(--sk-primary); color: white; }
.sk-btn--primary:hover { background-color: var(--sk-primary-dark); }
.sk-btn--secondary { background-color: white; color: var(--sk-secondary); border-color: #d1d5db; box-shadow: var(--sk-shadow); }
.sk-btn--secondary:hover { background-color: var(--sk-bg-main); border-color: #9ca3af; }
.sk-btn--danger { background-color: var(--sk-danger-light); color: var(--sk-danger); }
.sk-btn--danger:hover { background-color: #fee2e2; color: var(--sk-danger-dark); }
.sk-btn--icon { padding: 0.5rem; }
.sk-btn--sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; }
.sk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sk-btn--secondary:disabled:hover { background-color: white; border-color: #d1d5db; }


/* ==========================================================================
   5. COMPONENT BUILDER & DYNAMIC LISTS
   ========================================================================== */
.component-card { background: var(--sk-bg-subtle); border: 1px solid var(--sk-border-color); border-radius: var(--sk-radius); }
.component-card__header { padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.75rem; background-color: white; border-bottom: 1px solid var(--sk-border-color); }
.component-card__handle, .option-row__handle { cursor: grab; color: var(--sk-text-muted); transition: var(--sk-transition); }
.component-card__handle:hover, .option-row__handle:hover { color: var(--sk-secondary); }
.component-card__label { flex-grow: 1; font-weight: 600; }
.component-card__body { padding: 1rem; }

/* New Options Table (Flexbox) */
.options-table__header, .options-table__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.options-table__header {
    padding: 0 0.5rem 0.25rem;
    font-size: 0.75rem;
    color: var(--sk-text-muted);
    font-weight: 500;
    text-transform: uppercase;
}
.options-table__row {
    background: var(--sk-bg-card);
    border-radius: var(--sk-radius);
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    transition: var(--sk-transition);
}
.options-table__row:hover { border-color: var(--sk-border-color); }
.options-table__body {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.options-table__cell--handle-placeholder { width: 1.25rem; flex-shrink: 0; text-align: center; }
.options-table__cell--delete-placeholder { width: 2rem; flex-shrink: 0; }
.options-table__cell--label  { flex: 2 1 0%; min-width: 120px; }
.options-table__cell--handle { flex: 2 1 0%; min-width: 120px; }
.options-table__cell--price  { flex: 1.5 1 0%; min-width: 100px; }
.options-table__cell--swatch { flex: 3 1 0%; min-width: 150px; }

.key-value-editor__row, .condition-row, .action-row { display: flex; align-items: center; gap: 0.75rem; }
.empty-state { text-align: center; padding: 2rem; border: 2px dashed var(--sk-border-color); border-radius: var(--sk-radius-lg); }

/* Drag & Drop Sorting */
.sortable-ghost { background-color: var(--sk-primary-light); opacity: 0.7; }

/* ==========================================================================
   6. RULE BUILDER & ADVANCED FEATURES
   ========================================================================== */
.section-subtitle { font-size: 1rem; font-weight: 600; padding-bottom: 0.5rem; border-bottom: 1px solid var(--sk-border-color); margin-bottom: 1rem; }
.rule-card { border: 1px solid var(--sk-border-color); border-radius: var(--sk-radius); background: white; }
.rule-card__body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.rule-card__footer { padding: 0.5rem; background: var(--sk-bg-subtle); border-top: 1px solid var(--sk-border-color); }
.rule-section { padding-left: 1rem; border-left: 3px solid #c7d2fe; }
.rule-section__title { font-weight: 700; color: var(--sk-primary-dark); }
.condition-row { display: grid; grid-template-columns: 1fr 80px 1fr auto; gap: 0.5rem; }
.action-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; }

.advanced-feature-card { background-color: white; border-radius: var(--sk-radius); border: 1px solid var(--sk-border-color); transition: var(--sk-transition); }
.advanced-feature-card.is-active { border-color: var(--sk-primary); box-shadow: 0 0 0 2px var(--sk-primary-light); }
.advanced-feature-card__header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; cursor: pointer; }
.advanced-feature-card__body { padding: 0 1rem 1rem; }

/* Default Selections Styling */
.default-selection-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 2fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--sk-border-color);
    border-radius: var(--sk-radius);
    background-color: white;
}
.default-selection-row > label {
    font-weight: 500;
    color: var(--sk-secondary);
    padding-left: 0.25rem;
    margin-bottom: 0;
}
.default-selection-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}
.default-selection-checkboxes label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    cursor: pointer;
}

/* NEW: View Editor Card */
.view-editor-card {
    background-color: var(--sk-bg-card);
    border: 1px solid var(--sk-border-color);
    border-radius: var(--sk-radius);
    padding: 1rem;
    transition: var(--sk-transition);
}
.view-editor-card:hover {
    border-color: #9ca3af;
}

/* ==========================================================================
   7. OUTPUT PANEL (UPDATED FOR WORLD-CLASS UX)
   ========================================================================== */
.output-card { 
    background-color: var(--sk-bg-card); 
    border-radius: var(--sk-radius); 
    border: 1px solid var(--sk-border-color); 
    overflow: hidden; 
}

.output-card__header { 
    padding: 0.75rem 1rem; 
    background-color: var(--sk-bg-subtle); 
    display: flex; 
    align-items: flex-start; /* Align to the top */
    justify-content: space-between;
    gap: 1rem; 
}

.output-card__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem; /* Space between title and badge */
    min-width: 0; /* Prevents long text from pushing button */
}

.output-card__title { 
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; 
    font-size: 0.8125rem; 
    font-weight: 600; 
    color: var(--sk-secondary);
    word-break: break-all; /* Allows long keys to wrap */
}

.output-card textarea { 
    display: block; 
    width: 100%; 
    border: none; 
    background-color: #1f2937; 
    color: #d1d5db; 
    font-family: 'SFMono-Regular', Consolas, Menlo, monospace; 
    font-size: 13px; 
    padding: 1rem; 
    line-height: 1.6; 
    resize: vertical; 
    min-height: 120px; 
}
.output-card textarea:focus { 
    outline: none; 
}

/* ==========================================================================
   8. MODALS, NOTIFICATIONS & TOOLTIPS
   ========================================================================== */
.sk-modal-overlay { position: fixed; inset: 0; background-color: rgba(17, 24, 39, 0.8); backdrop-filter: blur(4px); z-index: 40; }
.sk-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-md); z-index: 50; width: 90%; max-width: 48rem; max-height: 90vh; display: flex; flex-direction: column; }
.sk-modal__header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--sk-border-color); display: flex; align-items: center; justify-content: space-between; }
.sk-modal__title { font-size: 1.25rem; font-weight: 600; }
.sk-modal__close-btn { background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--sk-text-muted); }
.sk-modal__close-btn:hover { color: var(--sk-secondary); }
.sk-modal__body { padding: 1.5rem; overflow-y: auto; flex-grow: 1; }
.sk-modal__body ul { list-style: none; padding: 0; margin: 0; }
.sk-modal__footer { padding: 1rem 1.5rem; border-top: 1px solid var(--sk-border-color); background-color: var(--sk-bg-subtle); display: flex; justify-content: flex-end; gap: 0.75rem; }

/* Example Loader Modal Styles */
.example-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}
.example-list__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--sk-border-color);
    border-radius: var(--sk-radius);
    cursor: pointer;
    transition: var(--sk-transition);
}
.example-list__item:hover {
    border-color: var(--sk-primary);
    background-color: var(--sk-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow);
}
.example-list__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sk-primary-light);
    border-radius: var(--sk-radius);
}
.example-list__title {
    font-weight: 600;
    color: var(--sk-secondary);
}
.example-list__description {
    font-size: 0.875rem;
    color: var(--sk-text-muted);
    margin-top: 0.25rem;
}

.notification-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; display: flex; align-items: center; gap: 0.75rem; background-color: var(--sk-secondary); color: white; padding: 0.75rem 1.25rem; border-radius: var(--sk-radius); box-shadow: var(--sk-shadow-md); font-weight: 500; }

.tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sk-text-muted);
    cursor: help;
    position: relative;
}
.tooltip-trigger[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%;
    left: 50%;
    background-color: var(--sk-secondary);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--sk-radius);
    width: 280px;
    max-width: 90vw;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
    transform: translateX(-50%) translateY(5px);
    transform-origin: bottom center;
}
.tooltip-trigger[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(150% - 5px);
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: var(--sk-secondary);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9;
    transform: translateX(-50%) rotate(45deg) translateY(5px);
}
.tooltip-trigger[data-tooltip]:hover::after,
.tooltip-trigger[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.tooltip-trigger[data-tooltip]:hover::before {
    transform: translateX(-50%) rotate(45deg) translateY(0);
}

/* ==========================================================================
   9. METAFIELD TYPE HINTS & INFO BOXES
   ========================================================================== */
.metafield-info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--sk-primary-light);
    border: 1px solid #c7d2fe; /* Indigo 200 */
    border-radius: var(--sk-radius);
    margin-bottom: 1.5rem;
}
.metafield-info-box i {
    color: var(--sk-primary);
    font-size: 1.25rem;
    margin-top: 0.25rem;
}
.metafield-info-box p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #3730a3; /* Indigo 800 */
}
.metafield-info-box p strong {
    font-weight: 600;
}

.metafield-type-badge {
    font-family: 'Inter', sans-serif;
    font-size: 0.625rem; /* 10px */
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid;
}

.metafield-type-badge--json {
    background-color: #e0e7ff; /* Indigo 100 */
    color: #3730a3; /* Indigo 800 */
    border-color: #c7d2fe; /* Indigo 200 */
}
.metafield-type-badge--text {
    background-color: #d1fae5; /* Green 100 */
    color: #047857; /* Green 700 */
    border-color: #a7f3d0; /* Green 200 */
}
.metafield-type-badge--multiline {
    background-color: #dbeafe; /* Blue 100 */
    color: #1d4ed8; /* Blue 700 */
    border-color: #bfdbfe; /* Blue 200 */
}
.metafield-type-badge--boolean {
    background-color: #fee2e2; /* Red 100 */
    color: #991b1b; /* Red 800 */
    border-color: #fecaca; /* Red 200 */
}
/**
 * ============================================================================
 * END Specifikit Configuration Generator CSS FILE
 * ============================================================================
 */