/* Builder Wrapper */
.giveasap-builder-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f0f0f0;
}

/* Header */
.giveasap-builder-header {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.giveasap-builder-header__title h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* Main Layout */
.giveasap-builder-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sections Container */
.giveasap-builder-sections {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Individual Section */
.giveasap-builder-section {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    overflow: hidden;
}

.giveasap-section-header {
    background: #f9f9f9;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.giveasap-section-header:hover {
    background: #f0f0f0;
}

.giveasap-section-header-content {
    flex: 1;
}

.giveasap-builder-section.is-collapsed .giveasap-section-header {
    border-bottom: none;
}

.giveasap-section-header h2 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e1e1e;
}

.giveasap-section-header p.giveasap-section-description {
    margin: 0;
    font-size: 13px;
    color: #757575;
}

.giveasap-section-content {
    padding: 20px;
    min-height: 150px;
}

/* Prizes Section */
.giveasap-prizes-content .components-panel {
    border: none;
}

.giveasap-prizes-content .components-panel__body {
    border: none;
}

.giveasap-prize-preview img {
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

/* Section with Sidebar Layout */
.giveasap-section-with-sidebar {
    display: flex;
}

.giveasap-section-with-sidebar .giveasap-section-content {
    flex: 1;
    padding: 20px;
    min-height: 150px;
}

.giveasap-section-sidebar {
    width: 280px;
    background: #f9f9f9;
    border-left: 1px solid #e0e0e0;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Input Preview */
.giveasap-input-preview {
    margin-bottom: 15px;
}

.giveasap-input-preview label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.giveasap-input-preview input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
}

/* Metaboxes Section */
.giveasap-metaboxes-content {
    padding: 20px;
}

.giveasap-metaboxes-content .giveasap-metabox {
    margin-bottom: 20px;
}

.giveasap-metaboxes-content .sg-metaboxes {
    display: flex;
    gap: 20px;
}

.giveasap-metaboxes-content .sg-metaboxes > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 200px;
    background: #f9f9f9;
    border-radius: 4px;
}

.giveasap-metaboxes-content .sg-metaboxes > ul li {
    margin: 0;
}

.giveasap-metaboxes-content .sg-metaboxes > ul li a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #1e1e1e;
    border-left: 3px solid transparent;
}

.giveasap-metaboxes-content .sg-metaboxes > ul li.active a,
.giveasap-metaboxes-content .sg-metaboxes > ul li a:hover {
    background: #fff;
    border-left-color: #007cba;
}

.giveasap-metaboxes-content .sg-metaboxes-fields {
    flex: 1;
}

.giveasap-metaboxes-content .sg-metabox-fields {
    display: none;
}

.giveasap-metaboxes-content .sg-metabox-fields:not(.hidden) {
    display: block;
}

/* Legacy interface skeleton styles */
.interface-interface-skeleton {
    height: 100vh;
}

.interface-interface-skeleton__content {
    background-color: #f0f0f0;
}

/* ============================================
   PREVIEW TAB STYLES
   ============================================ */

/* Builder Tabs Navigation */
.giveasap-builder-tabs {
    display: flex;
    gap: 5px;
    margin-right: 20px;
}

.giveasap-tab-button {
    padding: 6px 16px;
    border-radius: 4px;
}

.giveasap-tab-button.is-pressed {
    background: #007cba;
    color: #fff;
}

/* Preview Section */
.giveasap-preview-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f0f0f0;
}

/* Preview Toolbar */
.giveasap-preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.giveasap-preview-devices {
    display: flex;
    gap: 5px;
}

.giveasap-device-button {
    padding: 6px 10px;
    min-width: 40px;
}

.giveasap-device-button.is-pressed {
    background: #007cba;
    color: #fff;
}

/* Preview Container */
.giveasap-preview-container {
    flex: 1;
    overflow: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #e0e0e0;
}

/* Device-specific widths */
.giveasap-preview-desktop .giveasap-preview-content {
    width: 100%;
    max-width: 1200px;
}

.giveasap-preview-tablet .giveasap-preview-content {
    width: 768px;
    max-width: 100%;
}

.giveasap-preview-mobile .giveasap-preview-content {
    width: 375px;
    max-width: 100%;
}

/* Preview Content Wrapper */
.giveasap-preview-content {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    overflow: hidden;
    min-height: 400px;
    transition: width 0.3s ease;
}

/* Preview Loading State */
.giveasap-preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: #757575;
}

.giveasap-preview-loading p {
    margin-top: 15px;
    font-size: 14px;
}

/* Preview Error State */
.giveasap-preview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: #d63638;
    text-align: center;
}

.giveasap-preview-error p {
    margin-bottom: 15px;
}

/* Ensure giveaway styles are applied in preview */
.giveasap-preview-content .giveasap-box {
    margin: 0;
    max-width: none;
}

.giveasap-preview-content .sg-shortcode {
    padding: 20px;
}