/* Marketplace Standardized CSS File
   This file contains all shared styles for marketplace pages */

/* ===== COLOR CUSTOMIZATION SECTION =====
   Edit these CSS variables to customize marketplace colors easily
   These variables are used throughout the stylesheet for consistency */
:root {
    /* Main brand colors */
    --marketplace-primary: #6c7ae0;
    --marketplace-primary-hover: #5563c1;
    --marketplace-primary-light: #b8daff;
    
    /* Text colors */
    --marketplace-text-primary: #000;
    --marketplace-text-secondary: #333;
    --marketplace-text-muted: #666;
    --marketplace-text-light: #888;
    
    /* Special text colors */
    --marketplace-price-color: #0000FF;
    --marketplace-seller-color: #008080;
    --marketplace-link-color: #1e88e5;
    
    /* Background colors */
    --marketplace-bg-primary: #fff;
    --marketplace-bg-secondary: #f9f9f9;
    --marketplace-bg-muted: #f5f5f5;
    --marketplace-bg-light: #f8f9fa;
    
    /* Alert colors */
    --marketplace-alert-info-text: #31708f;
    --marketplace-alert-info-bg: #d9edf7;
    --marketplace-alert-info-border: #bce8f1;
    
    /* Currency panel colors */
    --marketplace-currency-bg: #e8f4fc;
    --marketplace-currency-border: #bedcf0;
    --marketplace-currency-text: #2c3e50;
    --marketplace-currency-value: #3498db;
    --marketplace-currency-btn: #f39c12;
    --marketplace-currency-btn-hover: #e67e22;
    
    /* Notification and status colors */
    --marketplace-error-bg: #ffebee;
    --marketplace-error-border: #ffcdd2;
    --marketplace-error-text: #c62828;
    --marketplace-success-bg: #e8f5e9;
    --marketplace-success-border: #c8e6c9;
    --marketplace-success-text: #2e7d32;
    --marketplace-warning-bg: #fff3e0;
    --marketplace-warning-border: #ffcc02;
    --marketplace-warning-text: #ef6c00;
    
    /* Admin section colors */
    --marketplace-admin-bg: #f8f9fa;
    --marketplace-admin-border: #e9ecef;
    --marketplace-help-bg: #f8f9fa;
    --marketplace-help-border: #dee2e6;
    --marketplace-help-text: #495057;
    
    /* Border and shadow colors */
    --marketplace-border-color: #eee;
    --marketplace-border-active: #3498db;
    --marketplace-shadow-light: rgba(0,0,0,0.1);
    --marketplace-shadow-medium: rgba(0,0,0,0.15);
    --marketplace-shadow-dark: rgba(0,0,0,0.2);
}

/* ===== THEME OVERRIDE PROTECTION =====
   These selectors have high specificity to prevent theme conflicts
   and ensure text remains readable on backgrounds */
.marketplace-container *,
.item-card *,
.item-hover-popup *,
.alert.alert-info *,
.filter-panel *,
.currency-panel * {
    /* Prevent theme overrides that could cause white-on-white text */
    text-shadow: none !important;
}

/* High specificity text color protection against theme overrides */
.marketplace-email-settings p,
.marketplace-email-test p,
.help-section p,
.email-config p,
.debug-help p,
.settings-form p,
.email-test-form p,
.help-section li,
.debug-help li,
.help-section ul,
.debug-help ul,
.form-note,
.help-section .form-note,
.email-config .form-note,
.debug-help .form-note,
.marketplace-email-settings label,
.marketplace-email-test label,
.settings-form label,
.email-test-form label,
.vertical-table label {
    color: var(--marketplace-text-secondary, #333) !important;
}

/* Protect against .section-pages p override specifically */
.section-pages .marketplace-email-settings p,
.section-pages .marketplace-email-test p,
.section-pages .help-section p,
.section-pages .email-config p,
.section-pages .debug-help p,
.section-pages .settings-form p,
.section-pages .email-test-form p,
.section-pages .help-section li,
.section-pages .debug-help li,
.section-pages .help-section ul,
.section-pages .debug-help ul,
.section-pages .marketplace-email-settings label,
.section-pages .marketplace-email-test label,
.section-pages .settings-form label,
.section-pages .email-test-form label,
.section-pages .vertical-table label {
    color: var(--marketplace-text-secondary, #333) !important;
}

/* Ensure marketplace content always has readable contrast */
.marketplace-container,
.item-card,
.item-hover-popup,
.alert.alert-info,
.filter-panel,
.currency-panel {
    /* Force readable text on light backgrounds */
    color: var(--marketplace-text-secondary) !important;
}

/* Specific protection for white text on white backgrounds */
.item-card .item-image,
.item-card .item-details,
.item-hover-popup .popup-content,
.filter-panel,
.currency-panel,
.character-selection,
.inventory-section,
.character-offline-notice,
.no-items,
.no-items-message,
.help-section,
.email-config,
.debug-help,
.admin-header,
.settings-form,
.email-test-form {
    background-color: var(--marketplace-bg-primary) !important;
    color: var(--marketplace-text-secondary) !important;
}

/* ===== END CUSTOMIZATION SECTION ===== */

/* Alert boxes */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-info {
    color: var(--marketplace-alert-info-text) !important;
    background-color: var(--marketplace-alert-info-bg) !important;
    border-color: var(--marketplace-alert-info-border) !important;
}
.alert-info h4 {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Item Grid container */
.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    gap: 20px;
    justify-content: start;
    margin-bottom: 20px;
}

/* Basic Item Card - STANDARDIZED */
.item-card {
    width: 280px !important;
    background: var(--marketplace-bg-primary) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px var(--marketplace-shadow-light) !important;
    border: 2px solid transparent !important;
    overflow: hidden !important;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
    margin-bottom: 20px !important;
    color: var(--marketplace-text-secondary) !important;
}

.item-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 15px var(--marketplace-shadow-medium) !important;
    border: 2px solid var(--marketplace-border-active) !important;
    cursor: pointer !important;
}

/* Item Card Image Section - STANDARDIZED */
.item-image {
    position: relative;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: flex-start;
    padding: 23px 31px;
    box-sizing: border-box;
    background-color: var(--marketplace-bg-secondary) !important;
    border: 1px solid var(--marketplace-border-color) !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: var(--marketplace-text-secondary) !important;
}

.item-image img {
    width: 80px;
    height: 80px;
    margin-left: -20px;
    margin-top: -5px;
    object-fit: contain;
}

/* Scrollable Info Container - STANDARDIZED */
.item-image .image-info-scroll,
.inventory-item .image-info-scroll,
.view-info-scroll {
    position: absolute;
    top: 30px;
    left: 90px;
    right: 10px;
    bottom: 10px;
    overflow-y: auto;
    padding-right: 5px;
    line-height: 1.2;
}

/* Item Title - STANDARDIZED */
.item-image .item-name.image-title,
.inventory-item .item-name.image-title {
    position: absolute;
    top: 10px;
    left: 90px;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
    color: var(--marketplace-text-primary) !important;
    font-weight: bold !important;
    z-index: 1;
}

/* Common Element Styles - STANDARDIZED */
.item-image .image-id,
.item-image .image-amount,
.item-image .image-price,
.item-image .image-seller,
.item-image .item-subinfo,
.item-image .image-cards,
.item-image .image-options,
.item-image .image-type,
.item-image .image-slots,
.item-image .image-purchased,
.item-image .image-character,
.inventory-item .image-id,
.inventory-item .image-amount,
.inventory-item .image-price,
.inventory-item .image-seller,
.inventory-item .item-subinfo,
.inventory-item .image-cards,
.inventory-item .image-options,
.inventory-item .image-type,
.inventory-item .image-slots,
.inventory-item .image-purchased,
.inventory-item .image-character,
.view-id,
.view-amount,
.view-price,
.view-seller,
.view-type {
    position: static;
    margin: 0 0 3px 0;
    color: #333 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Element-specific styling - STANDARDIZED SPECIAL COLORS */
.item-image .image-price,
.inventory-item .image-price,
.view-price,
.popup-content .image-price {
    color: var(--marketplace-price-color) !important;
    font-weight: normal !important;
}

.item-image .image-seller .seller-name,
.inventory-item .image-seller .seller-name,
.view-seller .seller-name,
.popup-content .seller-name {
    color: var(--marketplace-seller-color) !important; /* Teal color for seller names */
    font-weight: normal !important;
}

/* Bold text elements - STANDARDIZED */
.item-image .image-id strong,
.item-image .image-amount strong,
.item-image .image-price strong,
.item-image .image-seller strong,
.item-image .item-subinfo strong,
.item-image .image-cards strong,
.item-image .image-options strong,
.item-image .image-type strong,
.item-image .image-slots strong,
.item-image .image-purchased strong,
.item-image .image-character strong,
.inventory-item .image-id strong,
.inventory-item .image-amount strong,
.inventory-item .image-price strong,
.inventory-item .image-seller strong,
.inventory-item .item-subinfo strong,
.inventory-item .image-cards strong,
.inventory-item .image-options strong,
.inventory-item .image-type strong,
.inventory-item .image-slots strong,
.inventory-item .image-purchased strong,
.inventory-item .image-character strong,
.view-price strong,
.view-seller strong,
.view-type strong,
.popup-content .image-id strong,
.popup-content .image-amount strong,
.popup-content .image-price strong,
.popup-content .image-seller strong,
.popup-content .image-type strong,
.popup-content .image-slots strong,
.popup-content .image-cards strong,
.popup-content .image-options strong {
    font-weight: bold !important;
    color: #000 !important;
}

/* Card and Options Lists - STANDARDIZED */
.item-image .image-cards ul,
.item-image .image-options ul,
.inventory-item .image-cards ul,
.inventory-item .image-options ul,
.image-card-list,
.image-option-list {
    list-style-type: disc !important;
    list-style-position: inside !important;
    margin: 3px 0 8px 15px !important;
    padding: 0 !important;
    color: #333 !important;
}

.item-cards,
.item-options {
    margin-bottom: 10px;
    font-size: 0.85em;
    color: #333 !important;
}

.item-cards strong,
.item-options strong {
    display: block;
    margin-bottom: 2px;
    color: #000 !important;
    font-weight: bold !important;
}

/* Card List Elements - STANDARDIZED */
.card-list,
.option-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #333 !important;
}

.card-list li,
.option-list li {
    padding: 0;
    border-bottom: 1px dotted #eee;
    color: #333 !important;
}

.card-list li:last-child,
.option-list li:last-child {
    border-bottom: none;
}

/* Item Details Section */
.item-details {
    padding: 10px 15px;
    margin-top: -20px;
}

.item-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9em;
    color: #666;
}

/* Item Name Styles */
.item-name {
    margin: 0 0 10px 0;
    font-size: 1em;
    line-height: 1.3;
}

.item-name a {
    color: #333;
    text-decoration: none;
}

.item-name a:hover {
    color: #6c7ae0;
}

.item-id {
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
    margin-left: 100px;
    display: block;
}

/* Item Slots Display - STANDARDIZED */
.item-slots {
    display: inline-block;
    color: #0000FF !important;
    font-weight: bold !important;
    margin-left: 4px;
}

.popup-title .item-slots {
    color: #0000FF !important;
    font-weight: bold !important;
    margin-left: 4px;
}

/* Cards and Options styling - STANDARDIZED */
.image-cards strong,
.image-options strong {
    font-weight: bold !important;
    color: #000 !important;
    display: inline;
}

/* Forge Info styling - comprehensive fix for all contexts */
/* Target forge info elements everywhere - high specificity override */
body .item-card .image-forge-info strong,
body .item-card li strong[data-forge="level"],
body .item-card li strong[data-forge="element"],
body .item-card li strong[data-forge="creator"],
body .item-card .item-image .image-forge-info strong,
body .item-card .inventory-item .image-forge-info strong,
body .item-card .popup-content .image-forge-info strong,
body .item-hover-popup .popup-content .image-forge-info strong,
body .item-card strong:contains("Forge Level:"),
body .item-card strong:contains("Element:"),
body .item-card strong:contains("Creator:"),
body .item-card .image-card-list li strong:contains("Forge Level"),
body .item-card .image-card-list li strong:contains("Element"),
body .item-card .image-card-list li strong:contains("Creator") {
    font-weight: normal !important;
    color: #333 !important;
    font-family: Arial, sans-serif !important;
}

/* Target all forge info content in all contexts */
.image-forge-info,
.item-image .image-forge-info,
.inventory-item .image-forge-info,
.popup-content .image-forge-info,
.item-hover-popup .popup-content .image-forge-info {
    color: #333 !important;
    font-weight: normal !important;
}

/* Direct text content targets */
.image-forge-info li,
.item-image .image-forge-info li,
.inventory-item .image-forge-info li,
.popup-content .image-forge-info li,
.item-hover-popup .popup-content .image-forge-info li {
    color: #333 !important;
    font-weight: normal !important;
}

/* Hover popup specifics for forge info */
.item-hover-popup .popup-content .image-forge-info {
    font-weight: normal !important;
    color: #333 !important;
}

.item-hover-popup .popup-content .image-forge-info strong {
    font-weight: normal !important;
    color: #333 !important;
    display: inline;
}

/* Target image-card-list specifically for forge info */
.image-card-list li:contains("Forge Level:"),
.image-card-list li:contains("Element:"),
.image-card-list li:contains("Creator:") {
    font-weight: normal !important;
    color: #333 !important;
}

/* Override for standard popup hover styling */
.item-hover-popup .popup-content .image-forge-info strong,
.item-hover-popup .popup-content strong:contains("Forge Level:"),
.item-hover-popup .popup-content strong:contains("Element:"),
.item-hover-popup .popup-content strong:contains("Creator:") {
    font-weight: normal !important;
    color: #333 !important;
}

.card-list {
    list-style-type: disc !important;
    list-style-position: inside !important;
    margin: 3px 0 8px 15px !important;
    padding: 0 !important;
}

.item-cards {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: #333 !important;
}

.item-options {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    color: #333 !important;
}

.item-price {
    font-size: 1.1em;
    font-weight: 700;
    color: #0000FF !important;
}

/* Hover Popup Standardization */
.item-hover-popup .popup-content .image-id,
.item-hover-popup .popup-content .image-amount,
.item-hover-popup .popup-content .image-price,
.item-hover-popup .popup-content .image-seller,
.item-hover-popup .popup-content .image-type,
.item-hover-popup .popup-content .image-slots,
.item-hover-popup .popup-content .image-cards,
.item-hover-popup .popup-content .image-options {
    position: static;
    margin: 0 0 5px 0;
    color: #333 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Ensure price is blue in popup */
.item-hover-popup .popup-content .image-price {
    color: #0000FF !important;
    font-weight: normal !important;
}

.popup-content .image-price {
    color: #0000FF !important;
    font-weight: normal !important;
    font-size: 12px !important;
}

/* Ensure seller name is teal in popup */
.item-hover-popup .popup-content .image-seller .seller-name {
    color: #008080 !important;
    font-weight: normal !important;
}

.popup-content .seller-name,
.seller-name {
    color: #008080 !important;
    font-weight: normal !important;
    font-size: 12px !important;
}

/* Popup Title Standardization */
.item-hover-popup .popup-title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #000 !important;
    margin-bottom: 10px !important;
}

/* Admin Item Cards Standardization */
.admin-item-info .image-cards strong,
.admin-item-info .image-options strong,
.admin-item-info .item-name,
.admin-item-info .item-id-type strong {
    font-weight: bold !important;
    color: #000 !important;
}

/* Action Buttons */
.item-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.view-button,
.buy-button {
    flex: 1;
    display: inline-block;
    padding: 6px 0;
    text-align: center;
    border-radius: 3px;
    font-weight: normal;
    text-decoration: none;
    font-size: 12px;
    transition: background 0.2s;
}

.view-button {
    background: #f5f5f5;
    color: #000;
}

.buy-button {
    background: #6c7ae0;
    color: white;
}

.view-button:hover {
    background: #e5e5e5;
}

.buy-button:hover {
    background: #5563c1;
}

/* For sell.php specific styles - Inventory Item Cards */
.inventory-item.item-card {
    width: 280px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 20px;
}

.inventory-item.item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.inventory-item.item-card .item-image {
    position: relative;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: flex-start;
    padding: 23px 31px;
    box-sizing: border-box;
    background: #f9f9f9;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid #eee;
}

.inventory-item.item-card .item-image img {
    width: 80px;
    height: 80px;
    margin-left: -20px;
    margin-top: -5px;
    object-fit: contain;
}

.inventory-item.item-card .image-info-scroll {
    position: absolute;
    top: 30px;
    left: 90px;
    right: 10px;
    bottom: 10px;
    overflow-y: auto;
    padding-right: 5px;
    line-height: 1.2;
}

.inventory-item.item-card .item-name.image-title {
    position: absolute;
    top: 10px;
    left: 90px;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
    color: #000;
    font-weight: bold;
    z-index: 1;
}

/* Item contents styling */
.inventory-item.item-card .image-id,
.inventory-item.item-card .image-amount,
.inventory-item.item-card .image-price,
.inventory-item.item-card .image-type,
.inventory-item.item-card .image-slots,
.inventory-item.item-card .image-seller,
.inventory-item.item-card .item-subinfo,
.inventory-item.item-card .image-cards,
.inventory-item.item-card .image-options {
    position: static;
    margin: 0 0 3px 0;
    color: #333;
    font-size: 12px;
    line-height: 1.4;
}

/* Hide original preview sections */
.inventory-item.item-card .item-header,
.inventory-item.item-card .item-preview,
.inventory-item.item-card .item-info,
.inventory-item.item-card .item-name:not(.image-title) {
    display: none;
}

/* Action button styling */
.inventory-item.item-card .item-actions {
    display: flex;
    gap: 10px;
    margin: 10px 15px;
    justify-content: center;
}

.inventory-item.item-card .item-actions .sell-button {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.2s;
    background: #6c7ae0;
    color: white;
}

.inventory-item.item-card .item-actions .sell-button:hover {
    background: #5563c1;
}

/* Specific styling for modal preview */
.inventory-item.item-card.modal-preview .item-image .image-cards,
.inventory-item.item-card.modal-preview .item-image .image-options {
    margin-top: 5px;
}

.inventory-item.item-card.modal-preview .image-card-list,
.inventory-item.item-card.modal-preview .image-option-list {
    margin: 3px 0 8px 15px !important;
    padding: 0 !important;
    list-style-type: disc;
    list-style-position: inside;
}

.inventory-item.item-card .item-subinfo {
    margin-top: 2px;
}

.inventory-item.item-card.modal-preview .item-image .image-info-scroll {
    padding-right: 10px;
}

/* Marketplace Container Styles */
.marketplace-container {
    margin-bottom: 30px;
}

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

.marketplace-actions {
    display: flex;
    gap: 10px;
}

.sell-button,
.my-listings-button,
.purchases-button {
    display: inline-block;
    padding: 8px 16px;
    background: #6c7ae0;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.2s;
    font-size: 12px !important;
}

.sell-button:hover,
.my-listings-button:hover,
.purchases-button:hover {
    background: #5563c1;
}

.login-notice {
    padding: 8px 16px;
    background: #f8f9fa;
    border-radius: 4px;
}

.login-notice a {
    color: #6c7ae0;
    font-weight: 600;
    text-decoration: none;
}

.login-notice a:hover {
    text-decoration: underline;
}

/* Marketplace Stats */
.marketplace-stats {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #b8daff;
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.2em;
    font-weight: 700;
    color: #6c7ae0;
}

.stat-label {
    font-size: 0.9em;
    color: #666;
}

/* Marketplace Content Layout */
.marketplace-content {
    display: flex;
    gap: 30px;
}

.marketplace-sidebar {
    flex: 0 0 250px;
}

.marketplace-items {
    flex: 1;
    min-height: 500px; /* Prevent page jump */
}

/* Filter Panel */
.filter-panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.filter-panel h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #444;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-actions {
    display: flex;
    gap: 10px;
}

.filter-button,
.reset-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 12px !important;
}

.filter-button {
    background: #6c7ae0;
    color: white;
}

.reset-button {
    background: #f1f1f1;
    color: #444;
}

.filter-button:hover {
    background: #5563c1;
}

.reset-button:hover {
    background: #e5e5e5;
}

/* Items Header */
.items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.items-count {
    color: #666;
}

.pagination-info {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.9em;
    color: #888;
    font-style: italic;
}

/* Pagination Styles */
.pagination-bottom {
    margin-top: 20px;
    text-align: center;
}

.pagination-info-bottom {
    margin-bottom: 10px;
    font-size: 0.9em;
    color: #888;
    font-style: italic;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 10px 0;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #6c7ae0;
    background: white;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
}

/* Empty Item Display */
.no-items {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 30px;
    text-align: center;
    color: #666;
}

.no-items p {
    margin: 0 0 15px 0;
}

.no-items a {
    color: #6c7ae0;
    font-weight: 600;
    text-decoration: none;
}

/* Item Hover Popup Styles */
.item-hover-popup {
    position: absolute;
    display: none;
    width: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 2px solid #3498db;
    z-index: 1000;
    overflow: visible;
    animation: fadeIn 0.2s ease-in-out;
    max-height: 600px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.item-hover-popup .popup-layout {
    display: flex;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.item-hover-popup .popup-image {
    flex: 0 0 120px;
    display: flex;
    align-items: flex-start;
    padding: 15px;
    box-sizing: border-box;
    background: #f8f9fa;
    position: relative;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.item-hover-popup .popup-image img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.item-hover-popup .popup-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #000;
    font-weight: bold;
}

.item-hover-popup .popup-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    line-height: 1.4;
    max-height: 580px;
}

/* Trend Container Styles */
.trend-container {
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

.trend-info {
    margin-top: 8px;
    padding: 6px 8px;
    background: #f8f9fa;
    border-radius: 3px;
    font-size: 0.75em;
    line-height: 1.3;
}

.trend-info strong {
    color: #000;
    font-weight: bold;
    font-size: 0.95em;
}

.trend-chart-container {
    margin-top: 6px;
    height: 120px;
    background: white;
    border-radius: 3px;
    padding: 3px;
}

.item-hover-popup .popup-content div {
    margin-bottom: 5px;
}

.popup-content .image-price {
    color: #6c7ae0;
    font-weight: normal;
    font-size: 12px;
}

.popup-content .image-card-list,
.popup-content .image-option-list,
.image-card-list,
.image-option-list {
    margin: 3px 0 8px 15px !important;
    padding: 0 !important;
    list-style-type: disc;
    list-style-position: inside;
    line-height: 1.4;
}

.popup-content .seller-name,
.seller-name {
    color: #31708f;
    font-weight: normal;
    font-size: 12px;
}

/* Add a subtle highlight to the card that's active */
.item-card.popup-active {
    box-shadow: 0 0 0 2px #6c7ae0, 0 5px 15px rgba(0,0,0,0.15);
}

/* Responsive styles */
@media (max-width: 768px) {
    .marketplace-content {
        flex-direction: column;
    }
    
    .marketplace-sidebar {
        flex: none;
        width: 100%;
    }
}

/* Admin item styling for standardization */
.admin-item-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.admin-item-image {
    flex: none;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    border-radius: 4px;
    padding: 2px;
    overflow: hidden;
}

.admin-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    margin: 0;
}

.admin-item-info {
    flex: 1;
}

.admin-item-info .item-name {
    font-size: 14px;
    margin-bottom: 2px;
}

.admin-item-info .item-id-type {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
    margin-left: 0;
}

.admin-item-info .item-id-type strong {
    font-weight: bold;
    color: #444;
}

.admin-item-info .item-details {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.admin-item-info .image-cards strong,
.admin-item-info .image-options strong,
.admin-item-info .image-forge-info strong {
    display: block;
    margin-bottom: 0;
    color: #444;
    font-size: 12px;
    font-weight: bold;
}

.admin-item-info .image-cards,
.admin-item-info .image-options,
.admin-item-info .image-forge-info {
    margin-top: 0;
    font-size: 12px;
    line-height: 1.4;
}

.admin-item-info .image-card-list,
.admin-item-info .image-option-list {
    list-style-type: disc;
    list-style-position: inside;
    margin: 3px 0 8px 15px;
    padding: 0;
    font-size: 12px;
    color: #333;
}

/* Standard popup hover styling for all pages */
.item-hover-popup .popup-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #000;
    font-weight: bold;
}

.item-hover-popup .popup-content div {
    margin-bottom: 5px;
    font-size: 12px;
}

.item-hover-popup .popup-content .image-id,
.item-hover-popup .popup-content .image-amount,
.item-hover-popup .popup-content .image-price,
.item-hover-popup .popup-content .image-seller,
.item-hover-popup .popup-content .item-subinfo,
.item-hover-popup .popup-content .image-cards,
.item-hover-popup .popup-content .image-options,
.item-hover-popup .popup-content .image-forge-info {
    font-size: 12px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 3px;
}

.item-hover-popup .popup-content .image-cards strong,
.item-hover-popup .popup-content .image-options strong,
.item-hover-popup .popup-content .image-forge-info strong {
    font-weight: bold;
    color: #000;
    display: inline;
    font-size: 12px;
}

/* End of admin and popup standardization */

/* Additional targeted fixes for index.php forge info */
/* Target the specific structure seen in the screenshot */
.item-card .image-info-scroll li strong,
.item-image .image-info-scroll li strong,
.item-hover-popup .popup-content li strong,
.image-card-list li strong,
.image-info-scroll .image-forge-info + ul li strong,
.image-info-scroll ul li strong:contains("Forge Level"),
.image-info-scroll ul li strong:contains("Element"),
.image-info-scroll ul li strong:contains("Creator") {
    font-weight: normal !important;
    color: #333 !important;
}

/* Target every list in forge info context by relative position */
.image-forge-info + ul li,
.image-forge-info + ul li strong,
div:contains("Forge Info:") + ul li strong,
div:contains("Forge Info:") + ul li {
    font-weight: normal !important;
    color: #333 !important;
}

/* Direct override for any list items appearing after "Forge Info:" header */
.image-info-scroll ul li,
.popup-content ul li {
    font-weight: normal !important;
    color: #333 !important;
}

/* Highest specificity target for index.php */
body .item-image .image-info-scroll ul li strong, 
body .item-card .image-info-scroll ul li strong,
body .item-hover-popup .popup-content ul li strong {
    font-weight: normal !important;
    color: #333 !important;
}

/* Target the bullets specifically */
.image-info-scroll ul li::before,
.popup-content ul li::before {
    color: #333 !important;
}

/* !important override for all list items in the image card */
.item-card li,
.item-card li strong,
.item-card ul,
.item-card ul li,
.item-card ul li strong {
    font-weight: normal !important;
    color: #333 !important;
}

/* Item Card Content - STANDARDIZED FONT - Apply to all pages */
.item-card,
.item-card *,
.inventory-item.item-card,
.inventory-item.item-card *,
.item-hover-popup .popup-content,
.item-hover-popup .popup-content *,
.marketplace-mylistings .item-card,
.marketplace-mylistings .item-card *,
.marketplace-purchases .item-card, 
.marketplace-purchases .item-card * {
    font-family: Arial, sans-serif !important;
}

/* Apply consistent styling specifically to mylistings.php and purchases.php */
.marketplace-mylistings .item-card,
.marketplace-purchases .item-card {
    width: 280px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 20px;
}

.marketplace-mylistings .item-card:hover,
.marketplace-purchases .item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.marketplace-mylistings .item-image,
.marketplace-purchases .item-image {
    position: relative;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: flex-start;
    padding: 23px 31px;
    box-sizing: border-box;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.marketplace-mylistings .item-image img,
.marketplace-purchases .item-image img {
    width: 80px;
    height: 80px;
    margin-left: -20px;
    margin-top: -5px;
    object-fit: contain;
}

.marketplace-mylistings .image-info-scroll,
.marketplace-purchases .image-info-scroll {
    position: absolute;
    top: 30px;
    left: 90px;
    right: 10px;
    bottom: 10px;
    overflow-y: auto;
    padding-right: 5px;
    line-height: 1.2;
}

.marketplace-mylistings .item-name.image-title,
.marketplace-purchases .item-name.image-title {
    position: absolute;
    top: 10px;
    left: 90px;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
    color: #000 !important;
    font-weight: bold !important;
    z-index: 1;
}

/* Fix text color in mylistings.php and purchases.php */
.marketplace-mylistings .image-id,
.marketplace-mylistings .image-amount,
.marketplace-mylistings .image-seller,
.marketplace-mylistings .item-subinfo,
.marketplace-mylistings .image-cards,
.marketplace-mylistings .image-options,
.marketplace-mylistings .image-forge-info,
.marketplace-purchases .image-id,
.marketplace-purchases .image-amount,
.marketplace-purchases .image-seller,
.marketplace-purchases .item-subinfo,
.marketplace-purchases .image-cards,
.marketplace-purchases .image-options,
.marketplace-purchases .image-forge-info {
    color: #333 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Apply standardized special styling for price and seller */
.marketplace-mylistings .image-price,
.marketplace-purchases .image-price {
    color: #0000FF !important;
    font-weight: normal !important;
    font-size: 12px !important;
}

.marketplace-mylistings .image-seller .seller-name,
.marketplace-purchases .image-seller .seller-name {
    color: #008080 !important;
    font-weight: normal !important;
}

/* Pagination styles */
.pagination a:hover {
    background: #f0f2ff;
    border-color: #6c7ae0;
}

.pagination span.current {
    background: #6c7ae0;
    color: white;
    border-color: #6c7ae0;
}

.pagination span.disabled {
    color: #999;
    cursor: not-allowed;
}

.no-items a:hover {
    color: #1e88e5;
}

/* View button styling fix */
.view-button {
    background: #f5f5f5;
    color: #000;
    font-size: 12px;
    font-weight: normal;
}

.admin-item-info .image-forge-info strong {
    display: block;
    margin-bottom: 0;
    color: #000 !important;
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.admin-item-info .image-forge-info {
    margin-top: 0;
    font-size: 12px;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.admin-item-info .image-forge-info ul li {
    color: #333 !important;
    font-weight: normal !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
}

/* Special styling for specific elements in forge info */
.admin-item-info .image-forge-info ul li:contains("Level:"),
.admin-item-info .image-forge-info ul li:contains("Element:"),
.admin-item-info .image-forge-info ul li:contains("Creator:") {
    color: #333 !important;
    font-weight: normal !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
}

/* Target the specific HTML structure in admin.php */
.admin-item-info .image-forge-info ul.image-card-list li {
    color: #333 !important;
    font-weight: normal !important;
    font-size: 12px !important;
    font-family: Arial, sans-serif !important;
}

/* Fix the specific format used in admin.php for the forge info */
.admin-item-info li:contains("Level:"),
.admin-item-info li:contains("Element:"),
.admin-item-info li:contains("Creator:"),
.admin-item-info li:contains("Creator ID:") {
    color: #333 !important;
    font-weight: normal !important;
    font-family: Arial, sans-serif !important;
}

/* Extremely specific targeting for forge info labels */
.admin-item-info .image-forge-info ul.image-card-list li:first-child + li,
.admin-item-info .image-forge-info ul.image-card-list li:first-child + li + li,
.admin-item-info .image-forge-info ul.image-card-list li:first-child + li + li + li {
    color: #333 !important;
    font-weight: normal !important;
    font-family: Arial, sans-serif !important;
}

/* Fix hover popup styling in mylistings.php and purchases.php */
.marketplace-mylistings .item-hover-popup,
.marketplace-purchases .item-hover-popup {
    position: absolute;
    display: none;
    width: 380px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    overflow: visible;
    animation: fadeIn 0.2s ease-in-out;
}

.marketplace-mylistings .item-hover-popup .popup-content,
.marketplace-purchases .item-hover-popup .popup-content {
    flex: 1;
    overflow: visible;
    padding: 15px;
    line-height: 1.4;
}

.marketplace-mylistings .item-hover-popup .popup-title,
.marketplace-purchases .item-hover-popup .popup-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-size: 14px !important;
    color: #000 !important;
    font-weight: bold !important;
}

.marketplace-mylistings .item-hover-popup .popup-content .image-id,
.marketplace-mylistings .item-hover-popup .popup-content .image-amount,
.marketplace-mylistings .item-hover-popup .popup-content .image-price,
.marketplace-mylistings .item-hover-popup .popup-content .image-seller,
.marketplace-mylistings .item-hover-popup .popup-content .image-type,
.marketplace-mylistings .item-hover-popup .popup-content .image-slots,
.marketplace-mylistings .item-hover-popup .popup-content .image-cards,
.marketplace-mylistings .item-hover-popup .popup-content .image-options,
.marketplace-mylistings .item-hover-popup .popup-content .image-forge-info,
.marketplace-purchases .item-hover-popup .popup-content .image-id,
.marketplace-purchases .item-hover-popup .popup-content .image-amount,
.marketplace-purchases .item-hover-popup .popup-content .image-price,
.marketplace-purchases .item-hover-popup .popup-content .image-seller,
.marketplace-purchases .item-hover-popup .popup-content .image-type,
.marketplace-purchases .item-hover-popup .popup-content .image-slots,
.marketplace-purchases .item-hover-popup .popup-content .image-cards,
.marketplace-purchases .item-hover-popup .popup-content .image-options,
.marketplace-purchases .item-hover-popup .popup-content .image-forge-info {
    position: static;
    margin: 0 0 5px 0;
    color: #333 !important;
    font-size: 12px !important;
    font-family: Arial, sans-serif !important;
    line-height: 1.4 !important;
}

.marketplace-mylistings .item-hover-popup .popup-content .image-price,
.marketplace-purchases .item-hover-popup .popup-content .image-price {
    color: #0000FF !important;
    font-weight: normal !important;
}

.marketplace-mylistings .item-hover-popup .popup-content .image-seller .seller-name,
.marketplace-purchases .item-hover-popup .popup-content .image-seller .seller-name {
    color: #008080 !important;
    font-weight: normal !important;
}

/* Fix forge info text in mylistings.php and purchases.php */
.marketplace-mylistings .image-forge-info ul.image-card-list li,
.marketplace-purchases .image-forge-info ul.image-card-list li {
    color: #333 !important;
    font-weight: normal !important;
    font-size: 12px !important;
    font-family: Arial, sans-serif !important;
}

.marketplace-mylistings .image-forge-info ul.image-card-list li:contains("Forge Level:"),
.marketplace-mylistings .image-forge-info ul.image-card-list li:contains("Element:"),
.marketplace-mylistings .image-forge-info ul.image-card-list li:contains("Creator:"),
.marketplace-mylistings .image-forge-info ul.image-card-list li:contains("Creator ID:"),
.marketplace-purchases .image-forge-info ul.image-card-list li:contains("Forge Level:"),
.marketplace-purchases .image-forge-info ul.image-card-list li:contains("Element:"),
.marketplace-purchases .image-forge-info ul.image-card-list li:contains("Creator:"),
.marketplace-purchases .image-forge-info ul.image-card-list li:contains("Creator ID:") {
    color: #333 !important;
    font-weight: normal !important;
    font-family: Arial, sans-serif !important;
}

/* Currency panel */
.currency-panel {
    background-color: var(--marketplace-currency-bg) !important;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--marketplace-currency-border) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: var(--marketplace-text-secondary) !important;
}

.current-points {
    font-size: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.current-points strong {
    color: var(--marketplace-currency-text) !important;
}

.current-points span {
    font-weight: bold;
    color: var(--marketplace-currency-value) !important;
    font-size: 16px;
}

.buy-currency-btn {
    display: block;
    width: 100%;
    background-color: var(--marketplace-currency-btn) !important;
    color: white !important;
    text-align: center;
    padding: 8px 0;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.buy-currency-btn:hover {
    background-color: var(--marketplace-currency-btn-hover) !important;
}

/* ===== CUSTOMIZATION GUIDE =====
   To customize marketplace colors:
   
   1. Easy Method - Edit CSS Variables:
      Change the color values in the :root section at the top of this file.
      Example: --marketplace-primary: #ff6b6b; (changes the main brand color)
   
   2. Advanced Method - Override Specific Elements:
      Create your own CSS file and include it after marketplace.css
      Use high specificity selectors like: .marketplace-container .item-card { color: red !important; }
   
   3. Theme Compatibility:
      The theme override protection section prevents common conflicts.
      If you still experience issues, increase specificity with body prefix:
      body .marketplace-container * { color: your-color !important; }
   
   Key Variables to Customize:
   - --marketplace-primary: Main brand color (buttons, links)
   - --marketplace-price-color: Price text color
   - --marketplace-seller-color: Seller name color
   - --marketplace-text-primary: Main text color (titles)
   - --marketplace-text-secondary: Secondary text color (descriptions)
   - --marketplace-bg-primary: Main background color (cards)
   - --marketplace-bg-secondary: Secondary background color (card headers)
   
   For questions or issues, refer to the marketplace addon documentation.
===== END CUSTOMIZATION GUIDE ===== */

/* ===== SPECIFIC SECTION STYLING WITH CSS VARIABLES ===== */

/* Character Selection and Offline Notice - sell.php */
.character-selection,
.inventory-section {
    margin-bottom: 30px;
    background: var(--marketplace-bg-primary) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--marketplace-shadow-light);
    padding: 20px;
    color: var(--marketplace-text-secondary) !important;
}

.character-selection h3,
.inventory-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--marketplace-text-primary) !important;
}

.character-offline-notice {
    padding: 30px;
    text-align: center;
    background: var(--marketplace-warning-bg) !important;
    border: 1px solid var(--marketplace-warning-border) !important;
    border-radius: 8px;
    color: var(--marketplace-warning-text) !important;
}

.note {
    color: var(--marketplace-text-muted) !important;
    font-style: italic;
    margin-bottom: 15px;
}

.note.important {
    color: var(--marketplace-error-text) !important;
    font-weight: bold;
}

/* No Items Message - purchases.php and other pages */
.no-items {
    background: var(--marketplace-bg-primary) !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--marketplace-shadow-light);
    padding: 30px;
    text-align: center;
    color: var(--marketplace-text-muted) !important;
}

.no-items p {
    margin: 0 0 15px 0;
    color: var(--marketplace-text-muted) !important;
}

.no-items a {
    color: var(--marketplace-primary) !important;
    font-weight: 600;
    text-decoration: none;
}

.no-items a:hover {
    color: var(--marketplace-primary-hover) !important;
    text-decoration: underline;
}

.no-items-message {
    padding: 20px;
    background: var(--marketplace-bg-secondary) !important;
    border: 1px solid var(--marketplace-border-color) !important;
    border-radius: 8px;
    text-align: center;
    color: var(--marketplace-text-muted) !important;
}

.no-items-message p,
.no-items-message ul,
.no-items-message li {
    color: var(--marketplace-text-muted) !important;
}

/* Help Section - email_settings.php */
.help-section {
    background: var(--marketplace-help-bg) !important;
    border: 1px solid var(--marketplace-help-border) !important;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    color: var(--marketplace-help-text) !important;
}

.help-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--marketplace-text-primary) !important;
}

.help-section p,
.help-section ul,
.help-section li {
    color: var(--marketplace-help-text) !important;
}

.help-section code {
    background: var(--marketplace-bg-secondary) !important;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
    color: var(--marketplace-text-primary) !important;
}

/* Email Config and Debug Help - test_email.php */
.email-config,
.debug-help {
    background: var(--marketplace-bg-primary) !important;
    border: 1px solid var(--marketplace-border-color) !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    color: var(--marketplace-text-secondary) !important;
}

.email-config h3,
.debug-help h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--marketplace-text-primary) !important;
}

.email-config p,
.debug-help p,
.debug-help ul,
.debug-help li {
    color: var(--marketplace-text-secondary) !important;
}

.debug-help code {
    background: var(--marketplace-bg-secondary) !important;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
    color: var(--marketplace-text-primary) !important;
}

/* Admin Header - email_settings.php and test_email.php */
.admin-header {
    margin-bottom: 20px;
    background: var(--marketplace-admin-bg) !important;
    border: 1px solid var(--marketplace-admin-border) !important;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px var(--marketplace-shadow-light);
}

.back-button {
    color: var(--marketplace-primary) !important;
    text-decoration: none;
    font-weight: 600;
}

.back-button:hover {
    color: var(--marketplace-primary-hover) !important;
    text-decoration: underline;
}

.admin-link {
    display: inline-block;
    padding: 8px 12px;
    background-color: var(--marketplace-primary) !important;
    color: white !important;
    border-radius: 4px;
    font-size: 0.9em;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s;
}

.admin-link:hover {
    background-color: var(--marketplace-primary-hover) !important;
    text-decoration: none;
}

.admin-link.active {
    background-color: var(--marketplace-primary-hover) !important;
}

/* Error and Success Messages */
.error-message {
    padding: 15px;
    margin-bottom: 20px;
    background: var(--marketplace-error-bg) !important;
    border: 1px solid var(--marketplace-error-border) !important;
    border-radius: 8px;
    color: var(--marketplace-error-text) !important;
}

.success-message {
    padding: 15px;
    margin-bottom: 20px;
    background: var(--marketplace-success-bg) !important;
    border: 1px solid var(--marketplace-success-border) !important;
    border-radius: 8px;
    color: var(--marketplace-success-text) !important;
}

/* Form Elements */
.settings-form,
.email-test-form {
    background: var(--marketplace-bg-primary) !important;
    border: 1px solid var(--marketplace-border-color) !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    color: var(--marketplace-text-secondary) !important;
}

.settings-form h3,
.email-test-form h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--marketplace-text-primary) !important;
}

.vertical-table th {
    background: var(--marketplace-bg-secondary) !important;
    color: var(--marketplace-text-primary) !important;
    padding: 10px;
    text-align: left;
    border: 1px solid var(--marketplace-border-color) !important;
}

.vertical-table td {
    background: var(--marketplace-bg-primary) !important;
    color: var(--marketplace-text-secondary) !important;
    padding: 10px;
    border: 1px solid var(--marketplace-border-color) !important;
}

.form-note {
    margin-top: 8px;
    font-size: 0.85em;
    color: var(--marketplace-text-muted) !important;
}

/* Buttons */
.save-button,
.list-button {
    background: var(--marketplace-primary) !important;
    color: white !important;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.save-button:hover,
.list-button:hover {
    background: var(--marketplace-primary-hover) !important;
}

.cancel-button,
.reset-button {
    background: var(--marketplace-bg-muted) !important;
    color: var(--marketplace-text-secondary) !important;
    border: 1px solid var(--marketplace-border-color) !important;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}

.cancel-button:hover,
.reset-button:hover {
    background: #e5e5e5 !important;
    text-decoration: none;
}

/* ===== END SPECIFIC SECTION STYLING ===== */