/* Main stylesheet for Remerkable Theme */

/* ==========================================================================
   CSS Variables & Base Styles
   ========================================================================== */

   :root {
    /* Brand Colors - Ventel */
    --primary-color: #02624c;
    --secondary-color: #034a3a;
    --accent-color: #00df82;
    --accent-hover: #00c973;
    --link-color: #00df82;
    --dark-color: #343a40;
    --light-color: #f8f9fa;
    --success-color: #28a745;
    --error-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #02624c;
    
    /* Extended Color Palette - Neutrals */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f3f5;
    --color-gray-200: #e9ecef;
    --color-gray-250: #e5e7eb;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-650: #666666;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-850: #333333;
    --color-gray-900: #212529;
    
    /* Semantic Text Colors */
    --text-primary: var(--dark-color);
    --text-secondary: var(--secondary-color);
    --text-muted: var(--color-gray-600);
    --text-disabled: var(--color-gray-500);
    --text-inverse: var(--color-white);
    
    /* Semantic Background Colors */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--light-color);
    --bg-tertiary: var(--color-gray-100);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-overlay-light: rgba(0, 0, 0, 0.3);
    
    /* Button Colors - Consolidated */
    --btn-primary-bg: var(--accent-color);
    --btn-success-bg: #4CAF50;
    --btn-info-bg: #2196F3;
    --btn-warning-bg: #FF9800;
    --btn-danger-bg: var(--error-color);
    --btn-secondary-bg: #f8f9fa;
    
    /* Button Properties - Consolidated */
    --btn-padding: 12px 30px;
    --btn-padding-sm: 10px 20px;
    --btn-padding-lg: 15px 30px;
    --btn-radius: var(--border-radius-md);
    --btn-font-weight: 600;
    --btn-transition: background-color 0.3s ease;
    --btn-border: none;
    --btn-cursor: pointer;
    
    /* Form Input Properties - Consolidated */
    --input-padding: 12px;
    --input-border: 1px solid var(--color-gray-200);
    --input-border-focus: var(--accent-color);
    --input-border-error: var(--error-color);
    --input-radius: var(--border-radius-md);
    --input-font-size: 16px;
    --input-transition: border-color 0.3s ease;
    --input-bg: #ffffff;
    
    /* Card Component Properties - Consolidated */
    --card-bg: #ffffff;
    --card-border: 1px solid var(--color-gray-200);
    --card-shadow: var(--shadow-sm);
    --card-radius: var(--border-radius-md);
    --card-padding: 20px;
    --card-transition: all var(--transition-base);
    --card-hover-shadow: var(--shadow-md);
    
    /* Modal/Dialog Properties - Consolidated */
    --modal-bg: rgba(0, 0, 0, 0.5);
    --modal-content-bg: #ffffff;
    --modal-content-radius: var(--border-radius-lg);
    --modal-content-shadow: var(--shadow-lg);
    --modal-content-padding: 20px;
    --modal-z-index: var(--z-dropdown)0;
    
    /* Status Indicator Properties - Consolidated */
    --status-success-bg: #d4edda;
    --status-success-border: #c3e6cb;
    --status-success-color: #155724;
    --status-error-bg: #f8d7da;
    --status-error-border: #f5c6cb;
    --status-error-color: #721c24;
    --status-warning-bg: #fff3cd;
    --status-warning-border: #ffeeba;
    --status-warning-color: #856404;
    --status-info-bg: #d1ecf1;
    --status-info-border: #bee5eb;
    --status-info-color: #0c5460;
    
    /* Typography */
    --font-size-base: 16px;
    --line-height-base: 1.6;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Extended Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.75rem;
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;
    --text-6xl: 6rem;
    
    /* Spacing System */
    --spacing-0: 0;
    --spacing-xxs: 0.125rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
    --spacing-4xl: 4rem;
    
    /* Container */
    --container-max-width: 1200px;
    --container-padding: 15px;
    
    /* Breakpoints */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    
    /* Border Radius System */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 50%;
    --radius-pill: 9999px;
    
    /* Aliases for backwards compatibility */
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    
    /* Z-Index System */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 1000;
    --z-modal: 1001;
    --z-popover: 1100;
    --z-tooltip: 1200;
    --z-notification: 9000;
    --z-alert: 9999;
    
    /* Component Specific Widths */
    --width-sidebar: 250px;
    --width-chat-list: 350px;
    --width-product-thumbnail: 60px;
    --width-product-thumbnail-lg: 80px;
    --width-product-image: 200px;
    --width-product-detail: 300px;
    --width-alert: 300px;
    --width-dialog-sm: 600px;
    --width-dialog-md: 900px;
    --width-dialog-lg: 1400px;
    
    /* Component Specific Heights */
    --height-header-logo: 40px;
    --height-header-logo-sm: 35px;
    --height-input: 50px;
    --height-button: 44px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Opacity */
    --opacity-0: 0;
    --opacity-disabled: 0.5;
    --opacity-hover: 0.8;
    --opacity-muted: 0.6;
    --opacity-full: 1;
    
    /* SVG Icons as Data URLs - Cross-browser compatible */
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    --icon-shipping: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300df82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
    --icon-package: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300df82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 9.4 7.55 4.24'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' x2='12' y1='22.08' y2='12'/%3E%3C/svg%3E");
    --icon-payment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300df82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E");
    --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300df82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    --icon-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300df82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300df82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --icon-lightning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
    
    /* Focus State System - Accessibility */
    --focus-ring-color: var(--accent-color);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-style: solid;
    --focus-outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    --focus-shadow: 0 0 0 3px rgba(0, 223, 130, 0.2);
    --focus-bg-highlight: rgba(0, 223, 130, 0.05);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

body {
    font-family: var(--font-family);
    color: var(--dark-color);
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* ==========================================================================
   Layout Structure
   ========================================================================== */

#page {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#primary {
    flex: 1;
    width: 100%;
}

.site-main {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    min-height: calc(100vh - 300px);
}

/* Full width for account pages */
.woocommerce-account .site-main {
    max-width: var(--container-max-width);
    padding: var(--spacing-lg) var(--container-padding);
}

.woocommerce-account .content-area {
    max-width: 100%;
    padding: 0;
}

.woocommerce-account article {
    width: 100%;
    max-width: 100%;
}

/* Ensure WooCommerce account wrapper uses full width */
.woocommerce-account .woocommerce {
    width: 100%;
    max-width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
    max-width: 100%;
}

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.content-area {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-primary {
    color: var(--accent-color) !important;
}

.btn-header {
    background-color: var(--accent-color) !important;
}

/* ==========================================================================
   WooCommerce Customizations
   ========================================================================== */

/* WooCommerce Base Structure */

/* Account Layout */
.woocommerce-account #primary {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.woocommerce-account .woocommerce {
    width: 100%;
    max-width: var(--container-max-width);
    padding: 0 var(--container-padding);
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
    margin-bottom: var(--spacing-lg);
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    background-color: transparent;
    padding: 25px;
}

/* Basic Navigation Structure */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.woocommerce-MyAccount-navigation li {
    margin: 0;
}

/* Basic Content Structure */
.woocommerce-MyAccount-content > * {
    margin-bottom: var(--spacing-lg);
}

.woocommerce-MyAccount-content > *:last-child {
    margin-bottom: 0;
}

/* Basic Table Structure */
.woocommerce-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-table th,
.woocommerce-table td {
    padding: var(--spacing-sm);
}

/* Basic Form Structure */
.woocommerce form {
    width: 100%;
}

.woocommerce form .form-row {
    padding: 0;
    margin: 0 0 var(--spacing-md);
}

/* Basic Button Structure */
.woocommerce .button {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
}

.woocommerce-Price-amount {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
}

.my-account-dashboard {
    background: var(--bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
}

.my-account-dashboard h2 {
    font-size: var(--text-2xl);
    color: var(--color-gray-850);
}

.my-account-dashboard ul {
    list-style-type: none;
    padding: 0;
}

.my-account-dashboard ul li {
    margin-bottom: var(--spacing-sm);
}

.my-account-dashboard ul li a {
    color: var(--info-color);
    text-decoration: none;
}

.my-account-dashboard ul li a:hover {
    text-decoration: underline;
}

/* Hide unnecessary WooCommerce elements */
p.wc-block-components-totals-footer-item-tax,
small.shipped_via,
small.includes_tax {
    display: none;
}

label.checkbox.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox.line-height-privacy {
    line-height: 1;
}

/* ==========================================================================
   Header Styles
   ========================================================================== */

.site-header {
    background-color: var(--primary-color);
    padding: var(--container-padding) 0;
    position: relative;
    z-index: var(--z-modal-backdrop);
    border-bottom: 1px solid var(--color-gray-200);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.site-branding {
    flex-shrink: 0;
    padding-right: var(--spacing-lg);
}

.site-logo {
    display: block;
    text-decoration: none;
}

.header-logo {
    height: var(--height-header-logo);
    width: auto;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

.primary-menu,
.account-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-2xl);
}

.primary-menu li,
.account-menu li {
    margin: 0;
}

.primary-menu a,
.account-menu a {
    color: var(--text-inverse);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--spacing-sm) 0;
    transition: var(--transition-base);
}

.primary-menu a:hover,
.account-menu a:hover,
.primary-menu a.current-menu-item,
.account-menu a.current-menu-item {
    color: var(--link-color);
    text-decoration: underline;
}

.primary-menu a:focus,
.account-menu a:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    color: var(--link-color);
    border-radius: var(--radius-sm);
}

.header-actions {
    flex-shrink: 0;
}

.support-button {
    background-color: var(--accent-color);
    color: var(--text-inverse);
    text-decoration: none;
    padding: var(--btn-padding-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: var(--transition-base);
}

.support-button:hover {
    background-color: var(--accent-hover);
    color: var(--text-inverse);
}

.support-button:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    background-color: var(--accent-hover);
    box-shadow: var(--focus-shadow);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-inverse);
    font-size: var(--text-2xl);
    cursor: pointer;
    padding: var(--spacing-xs);
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

.site-footer {
    background-color: var(--bg-primary);
    padding: var(--spacing-4xl) 0 var(--spacing-2xl);
    border-top: 1px solid var(--color-gray-200);
}

.footer-top {
    margin-bottom: var(--spacing-3xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--spacing-3xl);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-logo-text {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.5px;
}

.footer-description {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0;
    max-width: var(--width-product-detail);
}

.footer-heading {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--dark-color);
    margin: 0 0 var(--spacing-lg) 0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--spacing-md);
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: var(--transition-base);
}

.footer-links a:hover {
    color: var(--accent-color);
}

.footer-links a:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    color: var(--accent-color);
    border-radius: var(--radius-sm);
}

.footer-bottom {
    border-top: 1px solid var(--color-gray-200);
    padding-top: var(--spacing-2xl);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.footer-copyright {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}

.footer-copyright span {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.footer-legal-links {
    display: flex;
    gap: var(--spacing-lg);
}

.footer-legal-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: var(--transition-base);
}

.footer-legal-links a:hover {
    color: var(--accent-color);
}

.footer-legal-links a:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    color: var(--accent-color);
    border-radius: var(--radius-sm);
}

.footer-social {
    display: flex;
    gap: var(--spacing-md);
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--height-header-logo);
    height: var(--height-header-logo);
    background-color: var(--text-muted);
    color: var(--text-inverse);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-size: var(--text-base);
    font-weight: 600;
    transition: var(--transition-base);
}

.social-icon:hover {
    background-color: var(--accent-color);
}

.social-icon:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    background-color: var(--accent-color);
    box-shadow: var(--focus-shadow);
}

.social-icon.linkedin { font-size: 14px; }
.social-icon.facebook { font-size: 16px; }
.social-icon.twitter { font-size: 16px; }
.social-icon.instagram { font-size: 18px; }
.social-icon.youtube { font-size: 14px; }

/* ==========================================================================
   WooCommerce Product Page Styles
   ========================================================================== */

.product-page-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 20px 20px;
}

.product-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

/* Product Gallery Styles */
.product-gallery-column {
    position: relative;
}

.woocommerce-product-gallery {
    position: relative;
    margin-bottom: 0;
}

.woocommerce-product-gallery__wrapper {
    margin: 0;
    padding: 0;
}

.woocommerce-product-gallery__image {
    border-radius: var(--border-radius-md);
    overflow: hidden;
    position: relative;
}

/* Hide the default zoom icon */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Custom zoom icon */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child:after {
    content: '';
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.9) var(--icon-search) no-repeat center;
    background-size: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
    z-index: 10;
}

.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child:hover:after {
    background: rgba(255, 255, 255, 1) var(--icon-search) no-repeat center;
    background-size: 20px;
}

.woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
}

.flex-control-nav {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.flex-control-thumbs li {
    width: var(--width-product-thumbnail-lg);
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.flex-control-thumbs img {
    width: 100%;
    height: auto;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.flex-control-thumbs img:hover,
.flex-control-thumbs img.flex-active {
    opacity: 1;
}

/* Product Summary Styles */
.product-summary-column {
    padding: 20px 0;
}

.product_title {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--dark-color);
}

.woocommerce-product-details__short-description {
    margin-bottom: 30px;
    color: var(--secondary-color);
}

.price {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 20px;
}

.cart {
    margin-bottom: 30px;
}

.quantity {
    margin-bottom: 20px;
}

.quantity input {
    width: var(--width-product-thumbnail-lg);
    padding: 8px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-sm);
}

.single_add_to_cart_button {
    background: var(--btn-primary-bg) !important;
    color: #ffffff !important;
    padding: var(--btn-padding) !important;
    border-radius: var(--btn-radius) !important;
    font-weight: var(--btn-font-weight) !important;
    font-size: var(--text-base) !important;
    transition: var(--btn-transition) !important;
    border: none !important;
    margin-bottom: var(--spacing-lg) !important;
    margin-top: var(--spacing-lg) !important;
    width: 100% !important;
}

.single_add_to_cart_button:hover {
    background: var(--primary-color) !important;
}

/* ==========================================================================
   Checkout Styles
   ========================================================================== */

.checkout-columns-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 40px 0;
}

.checkout-details-column {
    padding-right: 20px;
}

.checkout-order-column {
    background: var(--light-color);
    padding: 30px;
    border-radius: var(--border-radius-lg);
}

.order-review-wrapper {
    position: sticky;
    top: 40px;
}

#order_review_heading {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--dark-color);
}

.customer-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
    background: var(--bg-primary)fff;
    padding: 30px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--dark-color);
}

.woocommerce-checkout .form-row {
    margin-bottom: 20px;
}

.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-color);
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-md);
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: var(--focus-shadow);
}

.woocommerce-checkout-review-order-table {
    width: 100%;
    margin-bottom: 30px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 15px 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.woocommerce-checkout-review-order-table thead th {
    font-weight: 600;
    color: var(--dark-color);
}

.woocommerce-checkout-review-order-table .product-name {
    color: var(--dark-color);
}

.woocommerce-checkout-review-order-table .product-total {
    text-align: right;
    color: var(--dark-color);
}

.woocommerce-checkout-review-order-table tfoot th {
    font-weight: 500;
    color: var(--secondary-color);
}

.woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
    font-weight: 600;
    color: var(--dark-color);
}

.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td {
    font-size: 1.2em;
    padding-top: 20px;
    border-bottom: none;
}

#place_order {
    width: 100%;
    padding: var(--btn-padding-lg);
    background: var(--btn-primary-bg);
    color: #ffffff;
    border: var(--btn-border);
    border-radius: var(--btn-radius);
    font-size: 16px;
    font-weight: var(--btn-font-weight);
    cursor: var(--btn-cursor);
    transition: var(--btn-transition);
}

#place_order:hover {
    background: var(--primary-color);
}

/* Payment Methods */
.wc_payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.wc_payment_method {
    margin-bottom: 15px;
    padding: 15px;
    background: var(--bg-primary)fff;
    border-radius: var(--border-radius-md);
}

.wc_payment_method label {
    font-weight: 500;
    color: var(--dark-color);
    margin-left: 10px;
}

.payment_box {
    margin-top: 10px;
    padding: 15px;
    background: var(--light-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--secondary-color);
}

/* ==========================================================================
   404 Page Styles
   ========================================================================== */

.error-404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.error-404-container {
    max-width: var(--width-dialog-sm);
    width: 100%;
    text-align: center;
    padding: 40px;
}

.error-404-title {
    margin: 0 0 20px;
    font-size: 2rem;
    color: var(--dark-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.error-code {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.error-404-description {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.error-404-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-404-actions .button {
    padding: 12px 25px;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
}

.error-404-actions .button-primary {
    background: var(--accent-color);
    color: #ffffff;
}

.error-404-actions .button-primary:hover {
    background: var(--primary-color);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Header Responsive */
@media (max-width: 768px) {
    .site-header .container {
        flex-wrap: wrap;
    }
    
    .main-navigation {
        order: 3;
        width: 100%;
        margin-top: 15px;
    }
    
    .primary-menu,
    .account-menu {
        flex-direction: column;
        gap: 15px;
        display: none;
    }
    
    .primary-menu.active,
    .account-menu.active {
        display: flex;
    }
    
    .menu-toggle {
        display: block;
        order: 2;
    }
    
    .header-actions {
        order: 1;
    }
}

@media (max-width: 480px) {
    .site-header {
        padding: var(--spacing-sm) 0;
    }
    
    .header-logo {
        height: var(--height-header-logo-sm);
    }
    
    .support-button {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--text-xs);
    }
}

/* Footer Responsive */
/* WooCommerce Responsive Structure */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
    }
    
    .woocommerce-account .woocommerce-MyAccount-navigation li {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--spacing-2xl);
    }
    
    .footer-logo {
        grid-column: 1 / -1;
        margin-bottom: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2xl);
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .footer-copyright {
        flex-direction: column;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .footer-legal-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .site-footer {
        padding: 40px 0 20px;
    }
    
    .footer-legal-links {
        flex-direction: column;
        gap: 10px;
    }
}

/* Product Page Responsive */
@media (max-width: 768px) {
    .product-content-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-gallery-column {
        order: -1;
    }

    .flex-control-thumbs li {
        width: var(--width-product-thumbnail);
    }

    .wc-tabs {
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 5px;
    }
}

/* Checkout Responsive */
@media (max-width: 991px) {
    .checkout-columns-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .checkout-details-column {
        padding-right: 0;
    }

    .order-review-wrapper {
        position: static;
    }
}

@media (max-width: 768px) {
    .woocommerce-billing-fields,
    .woocommerce-shipping-fields,
    .woocommerce-additional-fields {
        padding: 20px;
    }

    .checkout-order-column {
        padding: 20px;
    }
}

/* 404 Page Responsive */
@media (max-width: 480px) {
    .error-404-container {
        padding: 30px 20px;
    }

    .error-code {
        font-size: 4rem;
    }

    .error-404-title {
        font-size: var(--text-2xl);
    }

    .error-404-description {
        font-size: 1rem;
    }

    .error-404-actions {
        flex-direction: column;
    }

    .error-404-actions .button {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .fieldsets-side-by-side {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    fieldset {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
    }
    
    legend {
        font-size: var(--text-sm);
        padding: 0 var(--spacing-sm);
        margin-bottom: var(--text-sm);
    }
}

@media (max-width: 360px) {
    fieldset {
        padding: var(--spacing-md);
        border-width: 1px;
    }
    
    legend {
        font-size: var(--text-sm);
        padding: 0 var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    fieldset.compact {
        padding: var(--input-padding);
        margin-bottom: var(--spacing-md);
    }
    
    fieldset.compact legend {
        font-size: var(--text-xs);
        padding: 0 var(--spacing-xs);
        margin-bottom: var(--spacing-sm);
    }
}

/* General Responsive */
@media (max-width: 991px) {
    :root {
        --font-size-base: var(--text-sm);
    }

    .container {
        max-width: var(--breakpoint-md);
    }
}

@media (max-width: 767px) {
    .container {
        max-width: var(--breakpoint-sm);
    }
}

@media (max-width: 575px) {
    :root {
        --font-size-base: var(--text-sm);
        --container-padding: var(--spacing-sm);
    }

    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    h4 { font-size: var(--text-xl); }
    h5 { font-size: var(--text-lg); }
    h6 { font-size: var(--text-base); }

    .site-title {
        font-size: var(--text-3xl);
    }

    .entry-title {
        font-size: var(--text-2xl);
    }
}

/* ==========================================================================
   Form Elements - Input Fields Styling
   ========================================================================== */

/* Base Input Styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="range"],
input[type="color"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: var(--input-padding) 16px;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--input-radius);
    font-size: var(--input-font-size);
    font-family: var(--font-family);
    line-height: 1.5;
    background-color: var(--input-bg);
    color: var(--dark-color);
    transition: var(--input-transition);
    margin: 0;
    box-sizing: border-box;
}

/* Input Focus States */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="range"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-shadow);
    background-color: var(--bg-primary);
}

/* Input Hover States */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
input[type="range"]:hover,
input[type="color"]:hover,
textarea:hover,
select:hover {
    border-color: #ced4da;
}

/* Placeholder Styling */
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
    font-style: italic;
}

input:focus::placeholder,
textarea:focus::placeholder {
    color: #adb5bd;
    opacity: 0.7;
}

/* Textarea Specific */
textarea {
    resize: vertical;
    min-height: 100px;
    font-family: var(--font-family);
}

/* Select Dropdown Styling */
select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 40px;
    appearance: none;
    cursor: pointer;
}

/* Remove default dropdown arrow in IE */
select::-ms-expand {
    display: none;
}

/* File Input Styling */
input[type="file"] {
    padding: 8px 16px;
    cursor: pointer;
    border: 2px dashed #e9ecef;
    background-color: #f8f9fa;
}

input[type="file"]:hover {
    border-color: var(--accent-color);
    background-color: rgba(var(--primary-color), 0.05);
}

input[type="file"]:focus {
    border-color: var(--accent-color);
    border-style: solid;
    background-color: var(--bg-primary)fff;
}

/* Number Input Spinner Styling */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    opacity: 1;
    height: 100%;
    cursor: pointer;
}

/* Range Input Styling */
input[type="range"] {
    padding: 0;
    height: 8px;
    background: var(--color-gray-200);
    outline: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

input[type="range"]:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-shadow);
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
}

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

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    border: none;
    transition: all var(--transition-base);
}

/* Checkbox and Radio Button Styling */
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    cursor: pointer;
    appearance: none;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary)fff;
    position: relative;
    flex-shrink: 0;
}

input[type="radio"] {
    border-radius: var(--radius-full);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
}

input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: var(--bg-primary)fff;
    border-radius: var(--radius-full);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 223, 130, 0.1);
}

/* Label Styling */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-color);
    font-size: 14px;
}

label.checkbox-label,
label.radio-label {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: 400;
}

label span {
    font-weight: 500;
}

/* Required Field Indicator */
.required {
    color: var(--error-color);
    margin-left: 2px;
}

/* Error States */
.form-error input,
.form-error select,
.form-error textarea {
    border-color: var(--error-color);
}

.form-error input:focus,
.form-error select:focus,
.form-error textarea:focus {
    border-color: var(--error-color);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.error-message {
    color: var(--error-color);
    font-size: 14px;
    margin-top: 4px;
    display: block;
}

/* Success States */
.form-success input,
.form-success select,
.form-success textarea {
    border-color: var(--success-color);
}

.form-success input:focus,
.form-success select:focus,
.form-success textarea:focus {
    border-color: var(--success-color);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

/* Field Group Styling */
.form-group:last-child {
    margin-bottom: 0;
}

.form-row {
    margin-bottom: 20px;
}

.form-row:last-child {
    margin-bottom: 0;
}

/* Inline Form Layout */
.form-inline {
    display: flex;
    gap: 16px;
    align-items: end;
    flex-wrap: wrap;
}

.form-inline .form-group {
    flex: 1;
    min-width: var(--width-product-image);
}

.form-inline label {
    margin-bottom: 8px;
}

/* Form Section Styling */
.form-section {
    background: var(--bg-primary)fff;
    padding: 24px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-gray-200);
    margin-bottom: 24px;
}

.form-section:last-child {
    margin-bottom: 0;
}

.form-section h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-color);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-gray-200);
}

/* Auto-suggest Dropdown Styling */
.ui-autocomplete {
    background: var(--bg-primary)fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    max-height: var(--width-product-image);
    overflow-y: auto;
    z-index: var(--z-dropdown)0;
}

.ui-menu-item {
    list-style: none;
    padding: 0;
}

.ui-menu-item a {
    display: block;
    padding: 12px 16px;
    color: var(--dark-color);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.ui-menu-item a:hover,
.ui-menu-item a.ui-state-focus {
    background-color: var(--light-color);
    color: var(--primary-color);
}

.ui-menu-item.ui-state-disabled a {
    color: var(--text-muted);
    cursor: default;
}

/* Fieldset and Legend Styling */
fieldset {
    border: 2px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    margin: 0 0 24px 0;
    background: var(--bg-primary)fff;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

fieldset:hover {
    border-color: #ced4da;
    box-shadow: var(--shadow-md);
}

fieldset:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 223, 130, 0.1);
}

fieldset:last-child {
    margin-bottom: 0;
}

legend {
    padding: 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-color);
    background: var(--bg-primary)fff;
    border: none;
    margin-bottom: 16px;
    position: relative;
    line-height: 1.4;
}

legend::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: var(--accent-color);
    border-radius: 2px;
}

legend::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-color) 0%, transparent 100%);
}

/* Multiple Fieldsets Layout */
.fieldsets-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fieldsets-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Fieldset with Icons */
fieldset.has-icon legend::before {
    display: none;
}

fieldset.has-icon legend {
    display: flex;
    align-items: center;
    gap: 8px;
}

fieldset.has-icon legend::before {
    content: '';
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--radius-sm);
    position: static;
    transform: none;
    flex-shrink: 0;
}

/* Icon variants - Using SVG icons for cross-browser consistency */
legend.icon-shipping::before {
    content: '';
    background: var(--icon-shipping) no-repeat center;
    background-size: contain;
}

legend.icon-delivery::before {
    content: '';
    background: var(--icon-package) no-repeat center;
    background-size: contain;
}

legend.icon-payment::before {
    content: '';
    background: var(--icon-payment) no-repeat center;
    background-size: contain;
}

legend.icon-user::before {
    content: '';
    background: var(--icon-user) no-repeat center;
    background-size: contain;
}

legend.icon-location::before {
    content: '';
    background: var(--icon-location) no-repeat center;
    background-size: contain;
}

legend.icon-settings::before {
    content: '';
    background: var(--icon-settings) no-repeat center;
    background-size: contain;
}

/* Compact Fieldset */
fieldset.compact {
    padding: 16px;
    margin-bottom: 16px;
}

fieldset.compact legend {
    font-size: 14px;
    margin-bottom: 12px;
    padding: 0 8px;
}

/* Highlighted Fieldset */
fieldset.highlight {
    border-color: var(--accent-color);
    background: rgba(0, 223, 130, 0.02);
}

fieldset.highlight legend {
    color: var(--primary-color);
}

fieldset.highlight legend::before {
    width: 6px;
    height: 24px;
    background: var(--primary-color);
}

fieldset.highlight:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(2, 98, 76, 0.1);
}

/* Custom Form Element Examples */
.search-input {
    position: relative;
}

.search-input input[type="search"] {
    padding-left: 40px;
}

.search-input::before {
    content: '';
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: var(--icon-search) no-repeat center;
    background-size: contain;
    z-index: 1;
}

.password-toggle {
    position: relative;
}

.password-toggle input[type="password"] {
    padding-right: 50px;
}

.password-toggle-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle-toggle:hover {
    color: var(--dark-color);
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--grid-gap, 1.5rem);
}

.grid--cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.grid--orders {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.grid--list {
    grid-template-columns: 1fr;
}

/* Card System */
.card {
    background: var(--bg-primary);
    border-radius: var(--card-radius, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-gray-250);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card:focus,
.card:focus-within {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-shadow);
}

.card--interactive {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.card--interactive:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-shadow);
}

.card__media {
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: var(--card-radius, 8px) var(--card-radius, 8px) 0 0;
}

.card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
}

.card__content h2 {
    min-height: 2.5em;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__details {
    display: grid;
    gap: 1rem;
}

.card__details h2 {
    margin: 0;
    font-size: var(--text-2xl);
}

.card__details p {
    margin: 0;
    color: var(--color-gray-650);
    line-height: 1.5;
}

.card__message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.card__message p {
    margin: 0;
    flex: 1;
}

.card__actions {
    margin-top: 0.5rem;
}

.card--hover:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Status Badge System - Unified for all order status displays */
.badge, 
.order__status,
.order-status .value {
    display: inline-block;
    padding: 0.35em 0.85em;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: max-content;
}

/* Status Variants - Unified across badge and order-status systems */
/* Pending/Review/On-Hold statuses */
.badge--review,
.badge--pending,
.badge--on-hold,
.status--pending,
.status--on-hold,
.order-status .status-pending,
.order-status .status-on-hold { 
    background: var(--status-warning-bg);
    color: var(--status-warning-color);
}

/* Completed/Approved/Sold statuses */
.badge--approved,
.badge--completed,
.badge--sold,
.status--completed,
.order-status .status-completed { 
    background: var(--status-success-bg);
    color: var(--status-success-color);
}

/* Processing status */
.badge--processing,
.status--processing,
.order-status .status-processing { 
    background: var(--status-info-bg);
    color: var(--status-info-color);
}

/* Cancelled/Rejected/Failed statuses */
.badge--rejected,
.badge--cancelled,
.badge--failed,
.status--cancelled,
.order-status .status-cancelled,
.order-status .status-failed { 
    background: var(--status-error-bg);
    color: var(--status-error-color);
}

/* Refunded status */
.badge--refunded,
.status--refunded,
.order-status .status-refunded { 
    background: var(--status-info-bg);
    color: var(--status-info-color);
}

/* Concept status */
.badge--concept {
    background: var(--color-neutral-light, #e2e3e5);
    color: var(--color-neutral, #383d41);
}

/* Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    cursor: pointer;
    min-width: 120px;
}

.btn--primary {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.btn--primary:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn--primary:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-shadow);
}

.btn--secondary {
    background: var(--bg-primary);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn--secondary:hover {
    background: var(--bg-secondary);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn--secondary:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-shadow);
}

.btn--link {
    background: transparent;
    color: var(--primary-color);
    padding: 0;
    min-width: auto;
    text-decoration: underline;
}

.btn--link:hover {
    color: var(--primary-color);
    transform: none;
    box-shadow: none;
}

.btn--link:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    color: var(--primary-color);
    border-radius: var(--radius-sm);
}

/* Price */
.price {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--color-primary);
    margin: 0.5rem 0;
}

/* Orders Overview */
.orders-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

/* Order Card */
.order-card {
    background: var(--bg-primary);
    border: 1px solid var(--color-gray-250);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

.order-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.order-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.order-number,
.order-date,
.order-status,
.order-total {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.order-info-grid .label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.order-info-grid .value {
    font-weight: 500;
    color: var(--text-primary);
}

.order-actions {
    grid-column: 1 / -1;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-250);
}

.order-actions .show-details {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-base);
}

.order-actions .show-details:hover {
    color: var(--accent-color);
    gap: var(--spacing-sm);
}

.order-actions .show-details:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
}

.order-actions .arrow {
    transition: transform var(--transition-base);
}

.order-actions .show-details:hover .arrow {
    transform: translateX(4px);
}

/* Status Badges for Orders - Now unified with badge system above */
/* The .order-status .value styling is now handled by the unified badge system */

/* No Orders Message */
.no-orders-message {
    text-align: center;
    padding: var(--spacing-4xl) var(--spacing-xl);
    color: var(--text-muted);
}

.no-orders-message h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

/* Responsive Orders Grid */
@media (max-width: 768px) {
    .orders-overview {
        grid-template-columns: 1fr;
    }
    
    .order-info-grid {
        grid-template-columns: 1fr;
    }
}

/* Legacy Order Class (voor backwards compatibility) */
.order {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.order__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.order__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-gray-650);
}

.order__value {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gray-850);
}

.order__actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-gray-250);
}


/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state__title {
    font-size: var(--text-2xl);
    margin-bottom: 1rem;
}

.empty-state__message {
    color: var(--color-gray-650);
    margin-bottom: 2rem;
}

/* Settings Layout */
.settings-container {
    display: grid;
    grid-template-columns: var(--width-sidebar) 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.settings-menu {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 2rem);
    height: fit-content;
    background: var(--bg-primary);
    border-radius: var(--card-radius, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-gray-250);
    overflow: hidden;
}

.settings-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.settings-menu li {
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-gray-250);
    transition: all var(--transition-fast);
}

.settings-menu li:last-child {
    border-bottom: none;
}

.settings-menu li:hover {
    background: var(--bg-secondary);
}

.settings-menu li:focus {
    outline: none;
    background: var(--focus-bg-highlight);
    box-shadow: inset 3px 0 0 var(--accent-color);
}

.settings-menu li.active {
    background: #e3f2fd;
    color: var(--primary-color);
    border-left: 4px solid var(--primary-color);
    font-weight: 500;
}

.settings-menu li.active:focus {
    outline: none;
    box-shadow: inset 4px 0 0 var(--primary-color), var(--focus-shadow);
}

.settings-content {
    background: var(--bg-primary);
    border-radius: var(--card-radius, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-gray-250);
    padding: 2rem;
}

.settings-section {
    display: none;
}

.settings-section.active {
    display: block;
}

@media (max-width: 768px) {
    .settings-container {
        grid-template-columns: 1fr;
    }

    .settings-menu {
        position: relative;
        top: 0;
        margin-bottom: 1.5rem;
    }
}

/* Form Elements */
.form-group {
    display: grid;
    grid-template-columns: minmax(200px, auto) 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.form-group label {
    font-weight: 500;
    padding-top: 0.5rem;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--color-gray-250);
    border-radius: var(--radius-sm);
    background-color: var(--bg-primary);
}

.form-group input[type="color"] {
    padding: 0;
    width: 50px;
    height: 30px;
}

.form-group fieldset {
    grid-column: 1 / -1;
    border: none;
    padding: 0;
    margin: 0;
}

.form-group fieldset legend {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group .description {
    grid-column: 1 / -1;
    color: var(--color-gray-650);
    font-size: var(--text-sm);
}

.form-group .checkbox-group {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.form-group .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-group .checkbox-item label {
    font-weight: normal;
    padding-top: 0;
}

.form-group .logo-upload-container {
    grid-column: 2;
}

.form-group .current-logo {
    margin-bottom: 1rem;
}

/* Layout Components */
/* .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
} */

.flex {
    display: flex;
    gap: var(--spacing-md, 1rem);
}

.flex--between {
    justify-content: space-between;
    align-items: center;
}

.flex--column {
    flex-direction: column;
}

/* Section */
.section {
    margin-top: 2rem;
}

.section__title {
    font-size: var(--text-2xl);
    margin-bottom: 1rem;
}

/* Meta Data */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--color-gray-250);
    padding-top: 1.5rem;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.meta-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-gray-650);
}

.meta-value {
    font-weight: 500;
}

/* Action Groups */
.actions {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--color-gray-250);
}

.actions--end {
    justify-content: flex-end;
}

.actions--start {
    justify-content: flex-start;
}

.actions--between {
    justify-content: space-between;
}

/* Back Link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.back-link:hover {
    color: var(--color-primary);
}

.back-link:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
}

.back-link__icon {
    font-size: var(--text-xl);
}

/* Product Detail Layout */
.product-detail {
    background: var(--bg-primary);
    border-radius: var(--card-radius, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-gray-250);
    padding: 1.5rem;
}

.product-detail__grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.product-detail__media {
    width: 100%;
    border-radius: var(--card-radius);
    overflow: visible;
}

.product-detail__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Gallery Listing Styles */
.product-gallery-listing {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
}

.product-gallery-listing__main {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    background: var(--bg-secondary);
}

.product-gallery-listing__main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.product-gallery-listing__main-image:hover {
    transform: scale(1.02);
}

.product-gallery-listing__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.product-gallery-listing__thumb {
    width: calc((100% - 1.5rem) / 4);
    aspect-ratio: 1;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.product-gallery-listing__thumb:hover {
    opacity: 1;
    border-color: var(--color-gray-300);
}

.product-gallery-listing__thumb.active {
    opacity: 1;
    border-color: var(--accent-color, var(--color-primary));
}

.product-gallery-listing__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .product-gallery-listing__thumbs {
        gap: 0.375rem;
    }
    
    .product-gallery-listing__thumb {
        width: calc((100% - 1.125rem) / 4);
    }
}

/* Gallery Lightbox Styles */
.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.gallery-lightbox__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.gallery-lightbox__container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.gallery-lightbox__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gallery-lightbox__counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    backdrop-filter: blur(8px);
}

.gallery-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(8px);
}

.gallery-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(8px);
}

.gallery-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.gallery-lightbox__nav--prev {
    left: 1rem;
}

.gallery-lightbox__nav--next {
    right: 1rem;
}

.gallery-lightbox__nav svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .gallery-lightbox__container {
        width: 95%;
        height: 95vh;
    }
    
    .gallery-lightbox__nav {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .gallery-lightbox__nav--prev {
        left: 0.5rem;
    }
    
    .gallery-lightbox__nav--next {
        right: 0.5rem;
    }
    
    .gallery-lightbox__close {
        top: 0.5rem;
        right: 0.5rem;
        width: 2rem;
        height: 2rem;
    }
    
    .gallery-lightbox__counter {
        bottom: 1rem;
        padding: 0.375rem 0.75rem;
        font-size: var(--text-xs);
    }
}

.product-detail__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-detail__title {
    font-size: var(--text-2xl);
    font-weight: 500;
    margin: 0;
}

.product-detail__description {
    color: var(--color-gray-650);
    line-height: 1.6;
}

.product-detail__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-gray-250);
}

.product-detail__actions {
    display: flex;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-250);
}

@media (max-width: 768px) {
    .product-detail__grid {
        grid-template-columns: 1fr;
    }
    
    .product-detail__media {
        max-width: var(--width-product-detail);
        margin: 0 auto;
    }
    
    .product-detail__actions {
        flex-direction: column;
    }
    
    .product-detail__actions .btn {
        width: 100%;
    }
}

/* Listing Review Section */
.listing-review-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--bg-secondary);
    border-radius: var(--card-radius);
    border: 1px solid var(--color-gray-250);
}

.listing-review-section h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: var(--text-xl);
    color: var(--dark-color);
}

.listing-review-section .listing-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Adjust Listing Form */
.adjust-listing-container {
    margin-top: 1rem;
    padding: 1.5rem;
    background-color: var(--bg-primary);
    border-radius: var(--card-radius);
    border: 1px solid var(--color-gray-250);
}

.adjust-listing-container.hidden {
    display: none;
}

.adjust-listing-form label {
    display: block;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    font-weight: 500;
    color: var(--dark-color);
}

.adjust-listing-form label:first-child {
    margin-top: 0;
}

.adjust-listing-form select,
.adjust-listing-form input[type="text"] {
    width: 100%;
    padding: var(--input-padding);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--input-radius);
    font-family: var(--font-family);
    font-size: var(--input-font-size);
    background-color: var(--input-bg);
    transition: var(--input-transition);
    margin-bottom: 1rem;
}

.adjust-listing-form select:focus,
.adjust-listing-form input[type="text"]:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-shadow);
}

.adjust-listing-form select:hover,
.adjust-listing-form input[type="text"]:hover {
    border-color: var(--color-gray-400);
}

.meta-value-containers {
    margin-top: 1rem;
}

.meta-value-container {
    margin-bottom: 1rem;
}

.meta-value-container.hidden {
    display: none;
}

/* Reject Form */
.listing-reject-form-container {
    margin-top: 1rem;
    padding: 1.5rem;
    background-color: var(--bg-primary);
    border-radius: var(--card-radius);
    border: 1px solid var(--color-gray-250);
}

.listing-reject-form-container.hidden {
    display: none;
}

.listing-reject-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--dark-color);
}

.listing-reject-form textarea {
    width: 100%;
    padding: var(--input-padding);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--input-radius);
    font-family: var(--font-family);
    font-size: var(--input-font-size);
    background-color: var(--input-bg);
    transition: var(--input-transition);
    resize: vertical;
    margin-bottom: 1rem;
    min-height: 100px;
}

.listing-reject-form textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-shadow);
}

.listing-reject-form textarea:hover {
    border-color: var(--color-gray-400);
}

.listing-reject-form .form-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.approve-listing-btn,
.edit-listing-meta-btn,
.reject-listing-btn {
    flex: 1;
    min-width: 120px;
}

.save-meta-btn {
    margin-top: 0.5rem;
    width: 100%;
}

/* Listing Information Section (Combined Proof of Buying & History) */
.listing-information-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: var(--bg-primary);
    border-radius: var(--card-radius);
    border: 1px solid var(--color-gray-250);
}

.listing-information-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.listing-information-buttons .view-pob-btn,
.listing-information-buttons .view-history-btn {
    flex: 1;
    min-width: 200px;
}

.proof-of-buying,
.listing-history {
    margin-top: 1rem;
    padding: 1.5rem;
    background-color: var(--bg-secondary);
    border-radius: var(--card-radius);
    border: 1px solid var(--color-gray-250);
}

.proof-of-buying.hidden,
.listing-history.hidden {
    display: none;
}

.proof-of-buying h3,
.listing-history h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: var(--text-xl);
    color: var(--dark-color);
}

.proof-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.proof-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: var(--card-radius);
    border: 1px solid var(--color-gray-250);
}

.proof-container embed {
    border-radius: var(--card-radius);
    border: 1px solid var(--color-gray-250);
}

/* History Section Styles */
.history-section {
    margin-bottom: 1.5rem;
}

.history-section:last-child {
    margin-bottom: 0;
}

.history-section h4 {
    font-size: var(--text-lg);
    color: var(--dark-color);
    margin-bottom: 1rem;
}

.status-history,
.product-changes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background-color: var(--bg-primary);
    border-radius: var(--card-radius);
    border: 1px solid var(--color-gray-250);
}

.history-date {
    font-size: var(--text-sm);
    color: var(--color-gray-650);
}

.history-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
}

.history-status[data-status="approved"] {
    background-color: var(--status-success-bg);
    color: var(--status-success-color);
}

.history-status[data-status="rejected"] {
    background-color: var(--status-error-bg);
    color: var(--status-error-color);
}

.history-status[data-status="review"] {
    background-color: var(--status-warning-bg);
    color: var(--status-warning-color);
}

.history-remarks {
    font-size: var(--text-sm);
    color: var(--color-gray-650);
    font-style: italic;
}

/* Product Changes Styles */
.change-group {
    padding: 1rem;
    background-color: var(--bg-primary);
    border-radius: var(--card-radius);
    border: 1px solid var(--color-gray-250);
}

.change-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-gray-250);
}

.change-date {
    font-size: var(--text-sm);
    color: var(--color-gray-650);
}

.change-user {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--primary-color);
}

.change-item {
    margin-bottom: 0.5rem;
}

.change-item:last-child {
    margin-bottom: 0;
}

.change-description {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: var(--text-sm);
}

.change-field {
    font-weight: 500;
    color: var(--dark-color);
}

.change-old-value {
    padding: 0.25rem 0.5rem;
    background-color: #fee2e2;
    color: #991b1b;
    border-radius: var(--radius-sm);
    text-decoration: line-through;
}

.change-arrow {
    color: var(--color-gray-650);
}

.change-new-value {
    padding: 0.25rem 0.5rem;
    background-color: #dcfce7;
    color: #166534;
    border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
    .listing-review-section {
        padding: 1rem;
    }
    
    .listing-review-section .listing-actions {
        flex-direction: column;
    }
    
    .approve-listing-btn,
    .edit-listing-meta-btn,
    .reject-listing-btn {
        width: 100%;
    }
    
    .listing-reject-form .form-actions {
        flex-direction: column;
    }
    
    .listing-reject-form .form-actions .btn {
        width: 100%;
    }
    
    .listing-information-section {
        padding: 1rem;
    }
    
    .listing-information-buttons {
        flex-direction: column;
    }
    
    .listing-information-buttons .view-pob-btn,
    .listing-information-buttons .view-history-btn {
        width: 100%;
    }
    
    .proof-of-buying,
    .listing-history {
        padding: 1rem;
    }
    
    .change-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Product Header */
.product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.product-header__title {
    margin: 0;
}

.product-media {
    width: var(--width-product-image);
    height: var(--width-product-image);
    border-radius: var(--card-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.product-media__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-media__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--color-gray-650);
}

/* Notice Box */
.notice {
    padding: 1rem;
    border-radius: var(--card-radius);
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    border: 1px solid transparent;
    transition: all var(--transition-base);
}

.notice.hidden {
    display: none;
}

.notice--success {
    background: var(--status-success-bg);
    color: var(--status-success-color);
    border-color: var(--status-success-border);
}

.notice--warning {
    background: var(--status-warning-bg);
    color: var(--status-warning-color);
    border-color: var(--status-warning-border);
}

.notice--error {
    background: var(--status-error-bg);
    color: var(--status-error-color);
    border-color: var(--status-error-border);
}

.notice--info {
    background: var(--status-info-bg);
    color: var(--status-info-color);
    border-color: var(--status-info-border);
}

.notice__title {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.notice__content {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Offer Section */
.offer {
    padding: 1.5rem;
    border: 1px solid var(--color-gray-250);
    border-radius: var(--card-radius);
    margin: 1.5rem 0;
}

.offer__amount {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.offer__actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Shipping Info */
.shipping-info {
    margin: 1rem 0;
}

.shipping-info__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.shipping-info__label {
    font-weight: 500;
}

.shipping-info__value {
    color: var(--color-success);
}

.shipping-info__value--paid {
    color: var(--color-warning);
}

/* Buyback Forms and Sections */
.rmrkbl-form-section {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    margin-bottom: var(--spacing-lg);
}

.rmrkbl-form-section h3 {
    color: var(--dark-color);
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-md);
}

.rmrkbl-form-description {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-lg);
}

.rmrkbl-action-choice {
    margin-bottom: var(--spacing-lg);
}

.action-buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

/* Questions Form */
.questions-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.question-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.question-input-wrapper label {
    min-width: 100px;
    margin: 0;
}

.question-input-wrapper input[type="text"] {
    flex-grow: 1;
}

.remove-question {
    background: none;
    border: none;
    color: var(--error-color);
    font-size: var(--text-2xl);
    cursor: pointer;
    padding: 0 var(--spacing-sm);
    transition: color 0.2s ease;
}

.remove-question:hover {
    color: var(--dark-color);
}

.add-question-button {
    color: var(--accent-color);
    background: none;
    border: 2px dashed var(--accent-color);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: all var(--transition-fast);
    margin-top: var(--spacing-sm);
}

.add-question-button:hover {
    background: var(--accent-color);
    color: white;
}

/* Photos Request Section */
.photos-request {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: var(--card-border);
}

.photos-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-weight: 500;
}

.photos-details {
    margin-top: var(--spacing-md);
}

.photos-details textarea {
    min-height: 100px;
    margin-top: var(--spacing-sm);
}

/* Shipping Options */
.shipping-options,
.seller-shipping-methods {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: var(--card-border);
}

.shipping-description {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-md);
}

.shipping-option {
    margin-bottom: var(--spacing-md);
}

/* Common styles for shipping option items */
.shipping-option-label,
.shipping-option-item,
.shipping-method-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: white;
    border: var(--card-border);
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: var(--spacing-sm);
}

.shipping-option-label:hover,
.shipping-option-item:hover,
.shipping-method-item:hover {
    border-color: var(--accent-color);
    background: var(--light-color);
    box-shadow: var(--shadow-sm);
}

/* Common styles for shipping text content */
.shipping-option-text,
.shipping-option-info,
.shipping-method-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.shipping-option-text strong,
.shipping-option-name,
.shipping-method-name {
    color: var(--dark-color);
    font-weight: 500;
}

.shipping-option-text small,
.shipping-option-carrier,
.shipping-method-carrier {
    color: var(--secondary-color);
    font-size: var(--text-sm);
}

/* Common styles for shipping option containers */
.shipping-options-list,
#shipping-methods-list {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--light-color);
    border-radius: var(--card-radius);
}

/* Common styles for shipping details layout */
.shipping-option-details,
.shipping-method-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

/* Common styles for shipping prices */
.shipping-option-price,
.shipping-method-price {
    font-weight: 600;
    color: var(--accent-color);
}

/* Shipping method specific styles */
.shipping-method-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
}

/* Radio button styling */
.shipping-option-item input[type="radio"],
.shipping-method-item input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: var(--card-border);
}

.rmrkbl-submit-button {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-weight: var(--btn-font-weight);
    cursor: pointer;
    transition: var(--btn-transition);
}

.rmrkbl-submit-button:hover {
    background: var(--accent-hover);
}

.rmrkbl-submit-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Loading States */
.shipping-loading {
    text-align: center;
    padding: var(--spacing-md);
    color: var(--secondary-color);
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(var(--accent-color-rgb), 0.3);
    border-radius: var(--radius-full);
    border-top-color: var(--accent-color);
    animation: spin 1s linear infinite;
    margin: 0 auto;
    margin-bottom: var(--spacing-sm);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.flex--center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
}

/* Action Section */
.action-section {
    background: var(--light-color);
    border: 2px solid var(--accent-color);
    border-radius: var(--card-radius);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.action-section::before {
    content: '';
    position: absolute;
    top: -10px;
    left: var(--spacing-lg);
    width: 18px;
    height: 30px;
    background: var(--accent-color) var(--icon-lightning) no-repeat center;
    background-size: 14px;
    padding: 0 var(--spacing-md);
    border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
}

.action-section::after {
    content: 'Action Required';
    position: absolute;
    top: -10px;
    left: 55px;
    background: var(--accent-color);
    color: var(--text-inverse);
    padding: var(--spacing-xs) var(--spacing-lg);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.action-section h3 {
    color: var(--dark-color);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Store Credit */
.store-credit {
    padding: 1.5rem;
    border: 1px solid var(--color-gray-250);
    border-radius: var(--card-radius);
    margin: 1.5rem 0;
}

.store-credit__code {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--card-radius);
    margin: 1rem 0;
}

.store-credit__value {
    font-family: monospace;
    font-size: var(--text-xl);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .flex--column-mobile {
        flex-direction: column;
    }

    .actions--stack-mobile {
        flex-direction: column;
    }

    .meta-grid {
        grid-template-columns: 1fr;
    }

    .offer__actions {
        flex-direction: column;
    }

    .shipping-info__item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Chat System */
.chat {
    display: grid;
    grid-template-columns: var(--width-chat-list) 1fr;
    gap: 1.5rem;
    min-height: 600px;
    background: var(--bg-primary);
    border-radius: var(--card-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-gray-250);
    overflow: hidden;
}

/* Desktop: Always show both panels */
@media (min-width: 769px) {
    .chat__list {
        display: flex !important; /* Override any JS display changes */
    }
    
    .chat__window {
        display: flex !important; /* Override any JS display changes */
        flex-direction: column;
    }
    
    /* Hide back button on desktop */
    .chat__back-button {
        display: none !important;
    }
    
    /* Show welcome message when no chat selected */
    .chat__window:not(.chat__window--active) {
        justify-content: center;
        align-items: center;
        background: var(--bg-secondary);
    }
    
    .chat__window:not(.chat__window--active) .chat__window-header,
    .chat__window:not(.chat__window--active) .chat__messages,
    .chat__window:not(.chat__window--active) .chat__input {
        display: none;
    }
    
    .chat__window:not(.chat__window--active)::before {
        content: attr(data-empty-text);
        color: var(--color-gray-650);
        font-size: var(--text-sm);
    }
}

/* Chat List */
.chat__list {
    border-right: 1px solid var(--color-gray-250);
    display: flex;
    flex-direction: column;
}

.chat__list-header {
    padding: 1rem;
    border-bottom: 1px solid var(--color-gray-250);
}

.chat__list-header h2 {
    margin: 0;
    font-size: var(--text-xl);
}

.chat__list-content {
    flex: 1;
    overflow-y: auto;
}

.chat__item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-gray-250);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.chat__item:hover {
    background-color: var(--bg-secondary);
}

.chat__item:focus {
    outline: none;
    background-color: var(--focus-bg-highlight);
    box-shadow: inset 3px 0 0 var(--accent-color);
}

.chat__item--active {
    background-color: #e3f2fd;
    border-left: 4px solid var(--primary-color);
}

.chat__item--active:hover {
    background-color: #e3f2fd;
}

.chat__item--active:focus {
    outline: none;
    box-shadow: inset 4px 0 0 var(--primary-color), var(--focus-shadow);
}

.chat__item-media {
    width: var(--width-product-thumbnail);
    height: var(--width-product-thumbnail);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.chat__item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat__item-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.chat__item-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat__item-message {
    color: var(--color-gray-650);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat__item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    font-size: var(--text-xs);
    color: var(--color-gray-650);
}

/* Chat Window */
.chat__window {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat__window-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-gray-250);
}

.chat__back-button {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text);
}

.chat__back-button:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
}

.chat__window-title {
    font-weight: 500;
    font-size: var(--text-lg);
}

.chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat__message {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    position: relative;
}

.chat__message--received {
    align-self: flex-start;
    background: var(--bg-secondary);
}

.chat__message--sent {
    align-self: flex-end;
    background: #e3f2fd;
    color: #0066cc;
}

.chat__message-time {
    font-size: var(--text-xs);
    color: var(--color-gray-650);
    margin-top: 0.25rem;
    text-align: right;
}

.chat__system-message {
    align-self: center;
    color: var(--color-gray-650);
    font-size: var(--text-sm);
    background: var(--bg-secondary);
    padding: 0.5rem 1rem;
    border-radius: 16px;
    margin: 0.5rem 0;
}

.chat__input {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--color-gray-250);
}

.chat__input-field {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-gray-250);
    border-radius: 24px;
    font-size: var(--text-sm);
}

.chat__input-field:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-shadow);
}

.chat__send-button {
    min-width: auto !important;
    border-radius: var(--radius-3xl) !important;
}

.chat__send-button:focus {
    outline: var(--focus-outline) !important;
    outline-offset: var(--focus-ring-offset) !important;
    box-shadow: var(--focus-shadow) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chat {
        grid-template-columns: 1fr;
    }

    .chat__list {
        display: flex;
        width: 100%;
    }

.chat__window {
    display: none;
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .chat__window {
        /* Account for mobile header height */
        top: 60px;
    }
    
    /* Ensure the chat window is above other content but below the header */
    .chat__window {
        z-index: var(--z-dropdown);
    }
}

.chat__window-header {
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 2;
    border-bottom: 1px solid var(--color-gray-250);
    padding: 1rem;
}

.chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.chat__input {
    position: sticky;
    bottom: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--color-gray-250);
    padding: 1rem;
    z-index: 2;
}

    .chat__window--active {
        display: flex !important;
        flex-direction: column;
    }

.chat__window-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.chat__back-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text);
    margin: -0.5rem 0;
}

.chat__window-title {
    font-weight: 500;
    font-size: var(--text-lg);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Hide list when chat is active */
    .chat--has-active-chat .chat__list {
        display: none;
    }
}

/* History Dialog */
.history-dialog {
    max-width: var(--width-dialog-sm) !important;
}

.history-dialog .dialog__body {
    padding: 1.5rem !important;
}

.history-item {
    position: relative;
    padding: 1rem 0 1rem 2rem;
    border-left: 2px solid #e5e7eb;
}

.history-item:last-child {
    border-left: 2px solid transparent;
}

.history-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 1.5rem;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    border: 2px solid var(--primary-color);
}

.history-item__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.history-item__date {
    font-size: var(--text-sm);
    color: var(--color-gray-650);
}

.history-item__user {
    font-weight: 500;
    color: #02624c;
}

.history-item__field {
    font-weight: 500;
    color: var(--color-gray-850);
    margin-bottom: 0.25rem;
}

.history-item__change {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    color: var(--color-gray-650);
}

.history-item__change-arrow {
    color: #999;
}

.history-item__value {
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-family: monospace;
}

.history-item__value--old {
    background: #fee2e2;
    text-decoration: line-through;
    color: #991b1b;
}

.history-item__value--new {
    background: #dcfce7;
    color: #166534;
}

/* Dialog */
.dialog {
    padding: 0;
    border: none;
    border-radius: var(--card-radius, 8px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 10px 15px rgba(0, 0, 0, 0.1);
    max-width: 90vw;
    max-height: 90vh;
    width: var(--width-dialog-md);
    background: var(--bg-primary);
    z-index: var(--z-alert);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dialog[open] {
    display: block;
}

.dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal-backdrop);
}

.dialog__content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dialog__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    border: none;
    background: var(--bg-primary);
    color: var(--color-gray-650);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all var(--transition-fast);
}

.dialog__close:hover {
    background: var(--bg-secondary);
    color: var(--color-gray-850);
    transform: scale(1.1);
}

.dialog__body {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.dialog__body--padding {
    padding: 2rem;
}

/* Product Details */
.product-details {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 600px;
}

.product-details iframe {
    width: 100%;
    height: 100%;
    flex: 1;
    border: none;
    min-height: 600px;
}

/* Product Dialog Specific */
.productdialog {
    height: 95vh !important;
    width: 95vw !important;
    max-width: var(--width-dialog-lg) !important;
    padding: 0;
}

.productdialog .dialog__content {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.productdialog .product {
    height: 100%;
    width: 100%;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.productdialog iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
}

/* ==========================================================================
   Edit Product Page Styles
   ========================================================================== */

.edit-product-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.edit-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.back-to-overview {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-base);
}

.back-to-overview:hover {
    color: var(--accent-color);
}

.back-arrow {
    font-size: var(--text-xl);
}

/* Product Overview */
.product-container {
    background: var(--bg-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.product-overview {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.product-thumbnail {
    width: var(--width-product-thumbnail-lg);
    height: var(--width-product-thumbnail-lg);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.meta-item {
    display: flex;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.meta-item strong {
    color: var(--text-primary);
    margin-right: var(--spacing-xs);
}

/* Progress Steps */
.form-progress {
    margin-bottom: var(--spacing-xl);
}

.progress-bar {
    height: 4px;
    background: var(--color-gray-200);
    border-radius: var(--radius-pill);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent-color);
    transition: width var(--transition-base);
}

.step-indicators {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.step-indicator {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    text-align: center;
    position: relative;
    color: var(--text-muted);
}

.step-indicator.active {
    color: var(--accent-color);
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all var(--transition-base);
}

.step-indicator.active .step-number {
    background: var(--accent-color);
    color: var(--text-inverse);
}

.step-title {
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Mobile Progress */
.mobile-progress-container {
    display: none;
    margin-bottom: var(--spacing-xl);
}

.mobile-progress-scroll {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-md);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mobile-progress-scroll::-webkit-scrollbar {
    display: none;
}

.mobile-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 100px;
    color: var(--text-muted);
}

.mobile-step.active {
    color: var(--accent-color);
}

.mobile-step-number {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-sm);
    transition: all var(--transition-base);
}

.mobile-step.active .mobile-step-number {
    background: var(--accent-color);
    color: var(--text-inverse);
}

.mobile-step-title {
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
}

.mobile-progress-indicators {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.mobile-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-gray-200);
    transition: background var(--transition-base);
}

.mobile-progress-dot.active {
    background: var(--accent-color);
}

/* Form Steps */
.form-step {
    display: none;
    background: var(--bg-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    padding: var(--spacing-xl);
}

/* QR Code Section */
.qr-code-section {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--card-radius);
    border: 1px solid var(--color-gray-200);
}

.qr-code-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);
}

.qr-code-container h4 {
    color: var(--text-primary);
    font-size: var(--text-xl);
    margin: 0;
}

.qr-code-container p {
    color: var(--text-secondary);
    max-width: 400px;
    margin: 0;
}

.qr-code-display {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.qr-code-display img {
    display: block;
    width: 200px;
    height: 200px;
}

@media (max-width: 768px) {
    .qr-code-section {
        display: none;
    }
}

.form-step.active {
    display: block;
}

.step-header {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.step-header h3 {
    color: var(--text-primary);
    font-size: var(--text-2xl);
    margin-bottom: var(--spacing-sm);
}

.step-header p {
    color: var(--text-secondary);
    font-size: var(--text-base);
}

/* Form Groups */
.form-group {
    margin-bottom: var(--spacing-lg);
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    padding-top: var(--spacing-xs);
    font-weight: 500;
    color: var(--text-primary);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

/* Full width form groups */
.form-group.full-width {
    grid-template-columns: 1fr;
}

@media (max-width: 768px) {
    .form-group {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .form-group label {
        padding-top: 0;
    }
}

/* Radio Cards */
.compact-radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.compact-card {
    position: relative;
}

.compact-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.compact-card-label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: all var(--transition-base);
}

.compact-card input[type="radio"]:checked + .compact-card-label {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

.card-title {
    font-weight: 600;
    color: var(--text-primary);
}

.card-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Segmented Control */
.segmented-control {
    display: inline-flex;
    background: var(--bg-secondary);
    border-radius: var(--radius-pill);
    padding: var(--spacing-xs);
}

.segmented-control input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.segment {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition-base);
    font-weight: 500;
}

.segmented-control input[type="radio"]:checked + .segment {
    background: var(--accent-color);
    color: var(--text-inverse);
}

/* Navigation Buttons */
.step-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
}

.btn-prev,
.btn-next {
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-weight: var(--btn-font-weight);
    transition: all var(--transition-base);
    min-width: 120px;
    text-align: center;
}

.btn-prev {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--color-gray-200);
}

.btn-next {
    background: var(--accent-color);
    color: var(--text-inverse);
    border: none;
}

.btn-prev:hover {
    background: var(--color-gray-200);
}

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

/* Listing Type Section */
.listing-type-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.listing-type-option {
    position: relative;
    height: 100%;
}

.listing-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.listing-type-label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: all var(--transition-base);
    height: 100%;
    background: var(--bg-primary);
    position: relative;
}

.listing-type-option input[type="radio"]:checked + .listing-type-label {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

.listing-type-option input[type="radio"]:checked + .listing-type-label::before {
    content: '✓';
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 24px;
    height: 24px;
    background: var(--accent-color);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: bold;
}

.listing-type-label:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.option-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.option-description {
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.option-info {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

/* Price Input with Currency */
.price-wrapper {
    width: 100%;
}

.price-input-container {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 200px;
}

.currency-indicator {
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: 40px;
    background: var(--color-gray-100);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-weight: 500;
    pointer-events: none;
}

.price-input-container input[type="number"] {
    padding-left: 50px;
    width: 100%;
}

.price-input-container input[type="number"]:focus {
    border-color: var(--accent-color);
}

.price-input-container input[type="number"]:focus + .currency-indicator {
    border-right-color: var(--accent-color);
    background: var(--bg-secondary);
    color: var(--accent-color);
}

#payout_display {
    margin-top: var(--spacing-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

#payout_display:not(.hidden) {
    display: block;
    padding: var(--spacing-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

/* Shipping Type Options */
.shipping-type-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.shipping-type-option {
    position: relative;
    height: 100%;
}

.shipping-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.shipping-type-label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: all var(--transition-base);
    height: 100%;
    background: var(--bg-primary);
    position: relative;
}

.shipping-type-option input[type="radio"]:checked + .shipping-type-label {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

.shipping-type-option input[type="radio"]:checked + .shipping-type-label::before {
    content: '✓';
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 24px;
    height: 24px;
    background: var(--accent-color);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: bold;
}

.shipping-type-label:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.shipping-type-label .option-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.shipping-type-label .option-description {
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.shipping-type-label .option-info {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

@media (max-width: 768px) {
    .shipping-type-options {
        grid-template-columns: 1fr;
    }
}

/* Trade-in Offer Section */
.buyback-offer-section {
    background: var(--bg-secondary);
    border-radius: var(--card-radius);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.buyback-offer-section.hide {
    display: none;
}

.offer-container {
    background: var(--bg-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    padding: var(--spacing-lg);
}

.offer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-200);
}

.offer-header h4 {
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0;
}

.offer-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--accent-color);
    color: var(--text-inverse);
    border-radius: var(--radius-pill);
    font-weight: 500;
}

.status-icon {
    font-size: var(--text-xl);
}

.offer-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.offer-amount {
    text-align: center;
}

.offer-amount .currency {
    font-size: var(--text-2xl);
    color: var(--text-primary);
    margin-right: var(--spacing-xs);
}

.offer-amount .amount {
    font-size: var(--text-6xl);
    font-weight: 700;
    color: var(--accent-color);
}

.offer-details {
    background: var(--bg-secondary);
    border-radius: var(--card-radius);
    padding: var(--spacing-lg);
}

.offer-description {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.offer-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.breakdown-item:last-child {
    border-bottom: none;
}

.breakdown-item .label {
    color: var(--text-secondary);
}

.breakdown-item .value {
    font-weight: 500;
    color: var(--text-primary);
}

.offer-info-message {
    background: var(--color-info-light);
    color: var(--color-info);
    padding: var(--spacing-md);
    border-radius: var(--card-radius);
    margin-top: var(--spacing-md);
}

/* Manual Review Content */
.manual-review {
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--card-radius);
}

.manual-review.hide {
    display: none;
}

.review-status {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.review-status h5 {
    color: var(--text-primary);
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-sm);
}

.review-description {
    color: var(--text-secondary);
}

.review-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.detail-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--bg-primary);
    border-radius: var(--card-radius);
}

.detail-icon {
    font-size: var(--text-xl);
}

.detail-text {
    color: var(--text-secondary);
}

/* Payout Options */
.payout-section {
    margin-top: var(--spacing-xl);
}

.payout-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.payout-option {
    position: relative;
    height: 100%;
}

.payout-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}

.payout-option-label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: all var(--transition-base);
    height: 100%;
    background: var(--bg-primary);
    position: relative;
}

.payout-option input[type="radio"]:checked + .payout-option-label {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

.payout-option input[type="radio"]:checked + .payout-option-label::before {
    content: '✓';
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 24px;
    height: 24px;
    background: var(--accent-color);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: bold;
}

.payout-option-label:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.payout-option-label .option-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.payout-option-label .option-description {
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.payout-option-label .option-info {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

@media (max-width: 768px) {
    .payout-options {
        grid-template-columns: 1fr;
    }
}

/* Transport Method Display */
.transport-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    background: var(--bg-primary);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.transport-info::before {
    content: '✓';
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 24px;
    height: 24px;
    background: var(--accent-color);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: bold;
}

.transport-icon {
    font-size: var(--text-2xl);
    color: var(--accent-color);
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.transport-details {
    flex: 1;
}

.transport-details h4 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs);
}

.transport-description {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-sm);
}

.transport-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

.status-label {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.status-value {
    font-weight: 500;
    color: var(--accent-color);
}

.status-value.courier {
    color: var(--warning-color);
}

/* Package Dimensions */
.package-dimensions-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.package-dimensions-group .form-group {
    margin: 0;
}

@media (max-width: 768px) {
    .package-dimensions-group {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* Error Message Styling */
.error-message {
    color: var(--error-color);
    font-size: var(--text-sm);
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.error-message::before {
    content: '⚠️';
}

/* Responsive Styles */
@media (max-width: 768px) {
    .edit-product-container {
        padding: var(--spacing-md);
    }

    .product-overview {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .step-indicators {
        display: none;
    }

    .mobile-progress-container {
        display: block;
    }

    .form-step {
        padding: var(--spacing-lg);
    }

    .compact-radio-cards {
        grid-template-columns: 1fr;
    }

    .listing-type-options {
        grid-template-columns: 1fr;
    }

    .step-navigation {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .btn-prev,
    .btn-next {
        width: 100%;
    }

    /* Trade-in Offer Responsive */
    .offer-header {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .offer-amount .amount {
        font-size: calc(var(--text-6xl) * 0.8);
    }

    .offer-breakdown {
        font-size: var(--text-sm);
    }

    /* Manual Review Responsive */
    .detail-item {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-md);
    }

    /* Payout Options Responsive */
    .payout-options {
        grid-template-columns: 1fr;
    }

    /* Transport Info Responsive */
    .transport-info {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .transport-status {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .offer-amount .amount {
        font-size: calc(var(--text-6xl) * 0.6);
    }

    .offer-details {
        padding: var(--spacing-md);
    }

    .breakdown-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-xs);
    }

    .payout-option-label {
        padding: var(--spacing-md);
    }
}

/* ==========================================================================
   Alert Styles
   ========================================================================== */

   #rmrkbl-alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    width: var(--width-product-detail);
    z-index: var(--z-alert);
}

.rmrkbl-alert {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.rmrkbl-alert.success {
    background: #28a745;
}

/* Groen */
.rmrkbl-alert.error {
    background: #dc3545;
}

/* Rood */
.rmrkbl-alert.warning {
    background: var(--warning-color);
}

/* Geel */
.rmrkbl-alert.info {
    background: #17a2b8;
}

/* Blauw */

.rmrkbl-alert.fade-out {
    opacity: 0;
}

#rmrkbl-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    /* Donkere overlay */
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-alert);
}

.rmrkbl-loader {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: var(--radius-full);
    animation: rmrkbl-spin 1s linear infinite;
}

@keyframes rmrkbl-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Support Page Styles
   ========================================================================== */

.support-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.support-header {
    margin-bottom: var(--spacing-xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.support-header h2 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.support-header p {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-md);
}

.new-question-btn {
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: 600;
    transition: all var(--transition-base);
}

.new-question-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.support-questions-section {
    margin-bottom: var(--spacing-2xl);
}

/* Button Loader */
.button-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.button-loader__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    border-top-color: var(--color-white);
    animation: button-spin 1s linear infinite;
}

@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Support Form Section */
.support-form-section {
    background: var(--bg-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.support-form-section h3 {
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Questions List Section */
.support-questions-section {
    background: var(--bg-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    padding: var(--spacing-xl);
}

.support-questions-section h3 {
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.support-questions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.no-questions {
    text-align: center;
    color: var(--text-muted);
    padding: var(--spacing-xl);
}

/* Question Item */
.question-item {
    background: var(--bg-secondary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    padding: var(--spacing-lg);
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.question-subject {
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0;
}

.question-status {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
    text-transform: uppercase;
}

.status--open {
    background: var(--status-warning-bg);
    color: var(--status-warning-color);
}

.status--answered {
    background: var(--status-info-bg);
    color: var(--status-info-color);
}

.status--closed {
    background: var(--status-success-bg);
    color: var(--status-success-color);
}

.question-meta {
    display: flex;
    gap: var(--spacing-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-lg);
}

/* Messages */
.question-messages {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.message-item {
    background: var(--bg-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--card-radius);
    padding: var(--spacing-md);
}

.message-item.shop-reply {
    background: var(--bg-secondary);
    border-color: var(--accent-color);
    margin-left: var(--spacing-xl);
}

.message-item.user-reply {
    margin-right: var(--spacing-xl);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    font-size: var(--text-sm);
}

.message-author {
    font-weight: 500;
    color: var(--text-primary);
}

.message-date {
    color: var(--text-muted);
}

.message-content {
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Reply Form */
.question-reply {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
}

.reply-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.reply-form textarea {
    min-height: 100px;
    resize: vertical;
}

/* Loading State */
.loading-spinner {
    display: flex;
    justify-content: center;
    padding: var(--spacing-xl);
}

.loading-spinner::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-gray-200);
    border-top-color: var(--accent-color);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .support-container {
        padding: var(--spacing-md);
    }

    .support-form-section,
    .support-questions-section {
        padding: var(--spacing-lg);
    }

    .question-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .message-item.shop-reply,
    .message-item.user-reply {
        margin-left: 0;
        margin-right: 0;
    }

    .message-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Screen reader text - Verborgen tenzij gefocust (tab navigatie) */
/* Hoge specificity om WooCommerce styles te overrulen */
.screen-reader-text,
body .screen-reader-text,
body * .screen-reader-text,
.dialog .screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
}

/* Alleen zichtbaar wanneer element focus krijgt (tab navigatie) */
.screen-reader-text:focus,
body .screen-reader-text:focus,
body * .screen-reader-text:focus,
.dialog .screen-reader-text:focus {
    background-color: #f1f1f1 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 2px 2px var(--primary-color) !important;
    clip: auto !important;
    clip-path: none !important;
    color: #21759b !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: bold !important;
    height: auto !important;
    left: 5px !important;
    line-height: normal !important;
    margin: 0 !important;
    padding: 15px 23px 14px !important;
    text-decoration: none !important;
    top: 5px !important;
    width: auto !important;
    z-index: var(--z-dropdown)000 !important;
}