/* Rock 30 Games - Buy List Platform Styles */
/* Matching rock30games.com branding */

/* ============ CSS VARIABLES ============ */
:root {
    /* Rock 30 Brand Colors - from rock30games.com */
    --r30-primary: #1a1a2e;
    --r30-secondary: #16213e;
    --r30-accent: #0f3460;
    --r30-highlight: #e94560;
    --r30-teal: #00d9ff;
    --r30-white: #ffffff;
    --r30-light: #f8f9fa;
    --r30-gray: #6c757d;
    --r30-dark-text: #333333;
    
    --success: #28a745;
    --success-light: #d4edda;
    --warning: #ffc107;
    --warning-light: #fff3cd;
    --danger: #dc3545;
    --info: #17a2b8;
    
    --status-submitted: #6c757d;
    --status-shipped: #17a2b8;
    --status-received: #007bff;
    --status-pending: #ffc107;
    --status-completed: #28a745;
    --status-cancelled: #dc3545;
    
    --font-main: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
}

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

body {
    font-family: var(--font-main);
    background: var(--r30-light);
    min-height: 100vh;
    color: var(--r30-dark-text);
    line-height: 1.5;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: var(--r30-white);
    min-height: 100vh;
    box-shadow: var(--shadow-lg);
}

/* ============ HEADER ============ */
header {
    background: var(--r30-primary);
    color: white;
    padding: var(--spacing-lg);
}

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

.logo { display: flex; align-items: center; gap: var(--spacing-md); }
.logo-img { height: 50px; width: auto; display: block; }
.logo-text { font-size: 1.8em; font-weight: 700; color: var(--r30-white); margin: 0; }
.department-banner { display: none; }

.header-actions { display: flex; align-items: center; gap: var(--spacing-lg); }
.user-info { display: flex; align-items: center; gap: var(--spacing-md); }
.user-info p { margin: 0; color: white; font-size: 0.9em; }

.logout-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    font-size: 0.85em;
}
.logout-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }

.cart-icon-wrapper { position: relative; cursor: pointer; padding: var(--spacing-sm); transition: transform 0.2s; }
.cart-icon-wrapper:hover { transform: scale(1.1); }
.cart-icon { font-size: 1.5em; color: white; }
.cart-badge {
    position: absolute; top: 0; right: 0;
    background: var(--r30-highlight); color: white;
    border-radius: 50%; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7em; font-weight: bold; opacity: 0; transition: all 0.3s;
}
.cart-badge.active { opacity: 1; }

/* Refresh Prices Button */
.refresh-prices-btn {
    background: transparent;
    border: 1px solid var(--r30-teal);
    color: var(--r30-teal);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9em;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.refresh-prices-btn:hover {
    background: var(--r30-teal);
    color: var(--r30-primary);
}

.refresh-prices-btn i {
    transition: transform 0.3s;
}

.refresh-prices-btn:hover i {
    transform: rotate(180deg);
}

/* Shipping Type Toggle */
.shipping-type-toggle {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.shipping-type-option {
    flex: 1;
    cursor: pointer;
}

.shipping-type-option input {
    display: none;
}

.shipping-type-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: all 0.2s;
    text-align: center;
}

.shipping-type-label i {
    font-size: 1.5em;
    margin-bottom: 8px;
    color: var(--r30-gray);
}

.shipping-type-label strong {
    display: block;
    margin-bottom: 4px;
    color: var(--r30-primary);
}

.shipping-type-label small {
    font-size: 0.8em;
    color: var(--r30-gray);
}

.shipping-type-option input:checked + .shipping-type-label {
    border-color: var(--r30-teal);
    background: rgba(0, 217, 255, 0.05);
}

.shipping-type-option input:checked + .shipping-type-label i {
    color: var(--r30-teal);
}

/* Package Dimension Fields */
.shipping-fields {
    margin-top: 15px;
}

.box-detail-row,
.pallet-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.box-label,
.pallet-label {
    font-weight: 600;
    color: var(--r30-primary);
    min-width: 60px;
}

.dimension-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.dimension-inputs input {
    width: 55px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9em;
}

.dimension-inputs input:focus {
    outline: none;
    border-color: var(--r30-teal);
}

.dimension-inputs span {
    color: var(--r30-gray);
    font-size: 0.85em;
}

.field-hint {
    font-size: 0.85em;
    color: var(--r30-gray);
    margin-top: 10px;
}

.field-hint i {
    color: var(--r30-teal);
}

.section-note {
    font-size: 0.9em;
    color: var(--r30-gray);
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .refresh-prices-btn {
        width: 100%;
        justify-content: center;
    }
    
    .shipping-type-toggle {
        flex-direction: column;
    }
    
    .box-detail-row,
    .pallet-detail-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dimension-inputs {
        width: 100%;
        justify-content: flex-start;
    }
}

nav { display: flex; gap: 5px; flex-wrap: wrap; }
.nav-btn {
    background: transparent; border: none;
    color: rgba(255,255,255,0.7);
    padding: 10px 18px; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 0.9em; font-weight: 500;
    transition: all 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.nav-btn i { font-size: 0.85em; }
.nav-btn:hover { color: white; background: rgba(255,255,255,0.1); }
.nav-btn.active { background: var(--r30-teal); color: var(--r30-primary); font-weight: 600; }

/* ============ ANNOUNCEMENT BANNER ============ */
.announcement-banner {
    background: var(--r30-secondary);
    color: white;
    padding: var(--spacing-sm) var(--spacing-lg);
    display: flex; align-items: center; justify-content: center;
    gap: var(--spacing-sm); font-size: 0.9em;
}
.announcement-banner i { color: var(--r30-teal); }
.announcement-banner p { margin: 0; }

/* ============ VIEWS ============ */
.view { display: none; padding: var(--spacing-xl); }
.view.active { display: block; }
.view.content-locked { filter: blur(5px); pointer-events: none; }

.page-header { margin-bottom: var(--spacing-xl); }
.page-header h2 {
    font-size: 1.5em; font-weight: 600; color: var(--r30-primary);
    display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs);
}
.page-header h2 i { color: var(--r30-teal); }
.page-header p { color: var(--r30-gray); font-size: 0.95em; }

/* ============ SEARCH SECTION ============ */
.search-section {
    background: var(--r30-light); padding: var(--spacing-lg);
    border-radius: var(--radius-md); margin-bottom: var(--spacing-lg); border: 1px solid #e0e0e0;
}
.search-box { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.search-box input {
    flex: 1; padding: 12px 15px; border: 1px solid #ddd;
    border-radius: var(--radius-md); font-size: 1em; transition: border-color 0.3s, box-shadow 0.3s;
}
.search-box input:focus { outline: none; border-color: var(--r30-teal); box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1); }
.search-box button {
    background: var(--r30-primary); color: white; border: none;
    padding: 12px 24px; border-radius: var(--radius-md);
    cursor: pointer; font-size: 0.95em; font-weight: 500; transition: all 0.2s;
    display: flex; align-items: center; gap: 8px;
}
.search-box button:hover { background: var(--r30-secondary); }

.filters { display: flex; gap: var(--spacing-md); align-items: center; flex-wrap: wrap; }
.filters select {
    padding: 10px 15px; border: 1px solid #ddd; border-radius: var(--radius-md);
    font-size: 0.95em; background: white; cursor: pointer; min-width: 180px;
}
.filters select:focus { outline: none; border-color: var(--r30-teal); }

.condition-guide-btn {
    background: transparent; border: 1px solid var(--r30-primary);
    color: var(--r30-primary); padding: 10px 16px; border-radius: var(--radius-md);
    cursor: pointer; font-weight: 500; font-size: 0.9em; transition: all 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.condition-guide-btn:hover { background: var(--r30-primary); color: white; }

/* ============ RESULTS ============ */
.results-section { background: white; border-radius: var(--radius-md); border: 1px solid #e0e0e0; overflow: hidden; }
.results-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--spacing-md) var(--spacing-lg); background: var(--r30-light); border-bottom: 1px solid #e0e0e0;
}
#results-count { font-weight: 500; color: var(--r30-gray); font-size: 0.9em; }
.add-all-visible-btn {
    background: var(--success); color: white; border: none;
    padding: 8px 16px; border-radius: var(--radius-md);
    cursor: pointer; font-weight: 500; font-size: 0.85em;
    display: flex; align-items: center; gap: 6px; transition: all 0.2s;
}
.add-all-visible-btn:hover { background: #218838; }
.results-grid { padding: var(--spacing-lg); }

.empty-state { text-align: center; padding: 50px 20px; color: var(--r30-gray); }
.empty-state h3 { margin-bottom: var(--spacing-sm); font-size: 1.2em; font-weight: 600; }
.loading { text-align: center; padding: 50px 20px; }
.loading-spinner {
    width: 40px; height: 40px; border: 3px solid #e0e0e0; border-top-color: var(--r30-teal);
    border-radius: 50%; margin: 0 auto var(--spacing-md); animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.item-row-compact {
    background: white; border: 1px solid #e0e0e0; border-radius: var(--radius-md);
    padding: var(--spacing-lg); margin-bottom: var(--spacing-md); transition: all 0.2s;
}
.item-row-compact:hover { border-color: var(--r30-teal); box-shadow: var(--shadow-sm); }
.item-row-header { margin-bottom: var(--spacing-md); }
.item-row-info h3 { color: var(--r30-primary); margin-bottom: 4px; font-size: 1.1em; font-weight: 600; }
.item-row-info .item-console { color: var(--r30-teal); font-weight: 500; font-size: 0.9em; }
.item-row-info .item-notes { font-size: 0.85em; color: var(--r30-gray); margin-top: 4px; }

.conditions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--spacing-sm); }
.condition-card {
    background: var(--r30-light); border: 1px solid #e0e0e0;
    border-radius: var(--radius-sm); padding: var(--spacing-md); transition: all 0.2s;
}
.condition-card:hover { border-color: var(--r30-teal); }
.condition-card.has-qty { border-color: var(--success); background: var(--success-light); }
.condition-header { margin-bottom: var(--spacing-xs); }
.condition-name { font-weight: 600; color: var(--r30-primary); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.3px; }
.condition-price { font-size: 1.4em; font-weight: 700; color: var(--success); margin-bottom: var(--spacing-sm); }
.condition-actions { display: flex; gap: var(--spacing-xs); align-items: flex-end; }
.qty-input-wrapper { display: flex; flex-direction: column; gap: 3px; }
.qty-input-wrapper label { font-size: 0.65em; color: var(--r30-gray); font-weight: 600; text-transform: uppercase; }
.condition-qty-input { width: 55px; padding: 6px; border: 1px solid #ddd; border-radius: var(--radius-sm); text-align: center; font-size: 0.95em; font-weight: 500; }
.condition-qty-input:focus { outline: none; border-color: var(--r30-teal); }
.add-btn {
    flex: 1; background: var(--r30-primary); color: white; border: none;
    padding: 8px 10px; border-radius: var(--radius-sm);
    cursor: pointer; font-weight: 500; font-size: 0.8em; transition: all 0.2s;
}
.add-btn:hover:not(:disabled) { background: var(--r30-secondary); }
.add-btn:disabled { background: #ccc; cursor: not-allowed; }
.add-btn.added { background: var(--success) !important; }

.row-total {
    display: flex; justify-content: flex-end; align-items: center; gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md); background: var(--r30-light);
    margin-top: var(--spacing-md); border-radius: var(--radius-sm);
}
.row-total-label { font-weight: 500; color: var(--r30-gray); font-size: 0.9em; }
.row-total-amount { font-size: 1.1em; font-weight: 700; color: var(--success); }
.add-row-btn {
    background: var(--r30-primary); color: white; border: none;
    padding: 8px 16px; border-radius: var(--radius-sm);
    cursor: pointer; font-weight: 500; font-size: 0.85em;
    display: flex; align-items: center; gap: 6px; transition: all 0.2s;
    margin-right: auto;
}
.add-row-btn:hover { background: var(--r30-teal); color: var(--r30-primary); }

/* ============ CART SIDEBAR ============ */
.cart-sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 998; opacity: 0; visibility: hidden; transition: all 0.3s; }
.cart-sidebar-overlay.active { opacity: 1; visibility: visible; }
.cart-sidebar-sliding { position: fixed; top: 0; right: -420px; width: 420px; max-width: 100vw; height: 100vh; background: white; z-index: 999; display: flex; flex-direction: column; box-shadow: -4px 0 20px rgba(0,0,0,0.2); transition: right 0.3s ease; }
.cart-sidebar-sliding.active { right: 0; }
.cart-sidebar-header { background: var(--r30-primary); color: white; padding: var(--spacing-lg); display: flex; justify-content: space-between; align-items: center; }
.cart-sidebar-header h3 { font-size: 1.1em; font-weight: 600; display: flex; align-items: center; gap: var(--spacing-sm); }
.cart-close-btn { background: none; border: none; color: white; font-size: 1.8em; cursor: pointer; padding: 0; line-height: 1; }
.cart-sidebar-content { flex: 1; overflow-y: auto; padding: var(--spacing-md); }
.cart-item { background: var(--r30-light); border: 1px solid #e0e0e0; border-radius: var(--radius-md); padding: var(--spacing-md); margin-bottom: var(--spacing-sm); }
.cart-item-info h4 { color: var(--r30-primary); margin-bottom: 4px; font-size: 0.95em; font-weight: 600; }
.cart-item-info p { color: var(--r30-gray); font-size: 0.85em; margin-bottom: 4px; }
.cart-item-info .item-price { color: var(--success); font-weight: 600; }
.cart-item-controls { display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-sm); padding-top: var(--spacing-sm); border-top: 1px solid #e0e0e0; }
.qty-control { display: flex; align-items: center; gap: var(--spacing-xs); }
.qty-btn { background: #e0e0e0; border: none; width: 28px; height: 28px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1em; font-weight: 600; transition: all 0.2s; }
.qty-btn:hover { background: var(--r30-teal); color: white; }
.remove-btn { background: transparent; border: none; color: var(--danger); cursor: pointer; font-size: 0.8em; font-weight: 500; }
.remove-btn:hover { text-decoration: underline; }
.cart-sidebar-footer { background: var(--r30-light); padding: var(--spacing-md); border-top: 1px solid #e0e0e0; }
.cart-total-display { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); }
.total-label { font-weight: 500; color: var(--r30-gray); }
.total-amount { font-size: 1.5em; font-weight: 700; color: var(--success); }
.cart-buttons { display: flex; gap: var(--spacing-sm); }
.cart-buttons button { flex: 1; padding: 10px; border-radius: var(--radius-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.9em; transition: all 0.2s; }

/* ============ BUTTONS ============ */
.submit-btn { background: var(--r30-teal); color: var(--r30-primary); border: none; padding: 10px 20px; border-radius: var(--radius-md); cursor: pointer; font-weight: 600; transition: all 0.2s; }
.submit-btn:hover:not(:disabled) { background: #00c4e6; }
.submit-btn:disabled { background: #ccc; color: #666; cursor: not-allowed; }
.secondary-btn { background: white; color: var(--r30-primary); border: 1px solid #ddd; padding: 10px 20px; border-radius: var(--radius-md); cursor: pointer; font-weight: 500; transition: all 0.2s; }
.secondary-btn:hover:not(:disabled) { border-color: var(--r30-primary); }
.secondary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============ MODALS ============ */
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; padding: var(--spacing-lg); }
.modal.active { display: flex; }
.modal-content { background: white; border-radius: var(--radius-lg); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative; padding: var(--spacing-xl); box-shadow: var(--shadow-lg); }
.modal-content.checkout-modal { max-width: 550px; }
.modal-content.condition-modal { max-width: 800px; }
.modal-content.terms-modal { max-width: 650px; }
.modal-content.small-modal { max-width: 380px; }
.modal-content .close { position: absolute; top: var(--spacing-md); right: var(--spacing-md); font-size: 1.5em; cursor: pointer; color: var(--r30-gray); transition: color 0.2s; line-height: 1; }
.modal-content .close:hover { color: var(--r30-primary); }
.modal-content h2 { font-size: 1.3em; margin-bottom: var(--spacing-sm); color: var(--r30-primary); }
.modal-subtitle { color: var(--r30-gray); font-size: 0.9em; margin-bottom: var(--spacing-lg); }

.auth-modal { text-align: center; }
.auth-header { margin-bottom: var(--spacing-xl); }
.auth-logo { height: 60px; margin-bottom: var(--spacing-md); }
.auth-header h2 { font-size: 1.4em; color: var(--r30-primary); margin-bottom: var(--spacing-xs); }
.auth-subtitle { color: var(--r30-gray); font-size: 0.9em; }
.auth-switch { margin-top: var(--spacing-lg); color: var(--r30-gray); font-size: 0.9em; }
.auth-switch a { color: var(--r30-teal); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.terms-checkbox { margin: var(--spacing-md) 0; text-align: left; }

.checkout-section { background: var(--r30-light); padding: var(--spacing-lg); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); }
.checkout-section h3 { font-size: 1em; display: flex; align-items: center; gap: 6px; color: var(--r30-primary); margin-bottom: var(--spacing-md); }
.checkout-section h3 i { color: var(--r30-teal); }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); }
.section-header h3 { margin-bottom: 0; }
.use-saved-btn { background: transparent; border: 1px solid #ddd; color: var(--r30-gray); padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8em; display: flex; align-items: center; gap: 4px; }
.use-saved-btn:hover { border-color: var(--r30-teal); color: var(--r30-teal); }

/* Checkout form grid */
.checkout-section .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.checkout-section .form-grid input,
.checkout-section .form-grid select,
.checkout-section .form-grid textarea { 
    width: 100%; 
    padding: 12px 14px; 
    border: 1px solid #ddd; 
    border-radius: var(--radius-md); 
    font-size: 0.95em;
    font-family: var(--font-main);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.checkout-section .form-grid input:focus,
.checkout-section .form-grid select:focus,
.checkout-section .form-grid textarea:focus { 
    outline: none; 
    border-color: var(--r30-teal); 
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1); 
}
.checkout-section .form-grid .full-width { grid-column: 1 / -1; }
.checkout-section textarea { width: 100%; padding: 12px 14px; border: 1px solid #ddd; border-radius: var(--radius-md); font-size: 0.95em; font-family: var(--font-main); resize: vertical; }
.checkout-section textarea:focus { outline: none; border-color: var(--r30-teal); box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1); }

.checkout-summary { background: var(--r30-primary); color: white; padding: var(--spacing-lg); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); }
.summary-row { display: flex; justify-content: space-between; padding: var(--spacing-xs) 0; font-size: 0.95em; }
.summary-row.total { border-top: 1px solid rgba(255,255,255,0.2); margin-top: var(--spacing-sm); padding-top: var(--spacing-sm); font-size: 1.2em; font-weight: 600; }
.summary-row.total span:last-child { color: var(--r30-teal); }

.condition-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.condition-guide-card { background: var(--r30-light); border-radius: var(--radius-md); padding: var(--spacing-md); text-align: center; border: 2px solid transparent; transition: all 0.2s; }
.condition-guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.condition-guide-card.working-good { border-color: var(--success); }
.condition-guide-card.working-wear { border-color: var(--info); }
.condition-guide-card.non-working { border-color: var(--warning); }
.condition-guide-card.non-working-wear { border-color: var(--r30-gray); }
.condition-icon { font-size: 1.8em; margin-bottom: var(--spacing-sm); }
.condition-guide-card.working-good .condition-icon { color: var(--success); }
.condition-guide-card.working-wear .condition-icon { color: var(--info); }
.condition-guide-card.non-working .condition-icon { color: var(--warning); }
.condition-guide-card.non-working-wear .condition-icon { color: var(--r30-gray); }
.condition-guide-card h3 { font-size: 0.95em; margin-bottom: var(--spacing-xs); color: var(--r30-primary); }
.condition-guide-card p { font-size: 0.8em; color: var(--r30-gray); margin-bottom: var(--spacing-sm); }
.condition-guide-card ul { text-align: left; font-size: 0.75em; color: var(--r30-gray); padding-left: var(--spacing-md); }
.condition-guide-card li { margin-bottom: 2px; }
.condition-tip { background: var(--warning-light); border: 1px solid var(--warning); border-radius: var(--radius-md); padding: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); }
.condition-tip i { font-size: 1.3em; color: #856404; }
.condition-tip p { margin: 0; font-size: 0.85em; color: #856404; }

.terms-content { text-align: left; max-height: 55vh; overflow-y: auto; padding: var(--spacing-md); background: var(--r30-light); border-radius: var(--radius-md); margin-bottom: var(--spacing-lg); font-size: 0.9em; }
.terms-content h3 { color: var(--r30-primary); margin-top: var(--spacing-md); margin-bottom: var(--spacing-xs); font-size: 1em; }
.terms-content h3:first-child { margin-top: 0; }
.terms-content p, .terms-content ul { color: var(--r30-gray); margin-bottom: var(--spacing-sm); }
.terms-content ul { padding-left: var(--spacing-lg); }

/* ============ FORMS ============ */
.form-group { margin-bottom: var(--spacing-md); }
.form-group label { display: block; margin-bottom: 4px; font-weight: 500; color: var(--r30-primary); font-size: 0.85em; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: var(--radius-md); font-size: 0.95em; font-family: var(--font-main); transition: border-color 0.2s, box-shadow 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--r30-teal); box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); }
.form-grid .full-width { grid-column: 1 / -1; }
.form-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.form-row-3 > div { display: flex; flex-direction: column; }
.form-row-3 label { margin-bottom: 4px; }
.form-row-3 input { width: 100%; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85em; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--r30-teal); }
.form-actions { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.full-width { width: 100%; }

.form-section { margin-bottom: var(--spacing-md); }
.form-section label { display: block; margin-bottom: 4px; margin-top: var(--spacing-md); font-weight: 500; color: var(--r30-primary); font-size: 0.85em; }
.form-section label:first-child { margin-top: 0; }
.form-section input, .form-section select, .form-section textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: var(--radius-md); font-size: 0.95em; font-family: var(--font-main); }
.form-section input:focus, .form-section select:focus, .form-section textarea:focus { outline: none; border-color: var(--r30-teal); box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1); }

/* ============ ACCOUNT SECTION ============ */
.account-section { display: grid; gap: var(--spacing-lg); max-width: 700px; }
.account-info-card, .account-form-card { background: white; border: 1px solid #e0e0e0; border-radius: var(--radius-md); padding: var(--spacing-lg); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid #e0e0e0; }
.card-header h3 { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 1.1em; color: var(--r30-primary); }
.card-header h3 i { color: var(--r30-teal); }
.account-form-card h3 { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); font-size: 1.1em; color: var(--r30-primary); }
.account-form-card h3 i { color: var(--r30-teal); }
.optional-tag { font-size: 0.75em; font-weight: normal; color: var(--r30-gray); }
.card-description { color: var(--r30-gray); margin-bottom: var(--spacing-lg); font-size: 0.9em; }
.edit-btn { background: transparent; border: 1px solid var(--r30-teal); color: var(--r30-teal); padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8em; display: flex; align-items: center; gap: 4px; transition: all 0.2s; }
.edit-btn:hover { background: var(--r30-teal); color: var(--r30-primary); }
.info-row { display: flex; padding: var(--spacing-sm) 0; border-bottom: 1px solid #f0f0f0; font-size: 0.95em; }
.info-row:last-child { border-bottom: none; }
.info-label { font-weight: 500; color: var(--r30-gray); width: 80px; }
.info-value { color: var(--r30-primary); }

/* ============ ORDERS SECTION ============ */
.orders-user-section { max-width: 800px; }
.order-filters { margin-bottom: var(--spacing-lg); }
.order-filters select { padding: 10px 15px; border: 1px solid #ddd; border-radius: var(--radius-md); font-size: 0.95em; min-width: 180px; }
.order-card { background: white; border: 1px solid #e0e0e0; border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-md); transition: all 0.2s; }
.order-card:hover { border-color: var(--r30-teal); box-shadow: var(--shadow-sm); }
.order-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-md); }
.order-header h4 { font-size: 1.1em; color: var(--r30-primary); }
.order-header p { color: var(--r30-gray); font-size: 0.85em; }
.order-status { padding: 4px 10px; border-radius: 20px; font-size: 0.75em; font-weight: 600; text-transform: uppercase; }
.order-status.submitted { background: var(--status-submitted); color: white; }
.order-status.shipped { background: var(--status-shipped); color: white; }
.order-status.received { background: var(--status-received); color: white; }
.order-status.pending, .order-status.pending-payment { background: var(--status-pending); color: #856404; }
.order-status.completed { background: var(--status-completed); color: white; }
.order-status.cancelled { background: var(--status-cancelled); color: white; }
.order-summary { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; margin-bottom: var(--spacing-md); }
.order-total { font-size: 1.2em; font-weight: 700; color: var(--success); }
.order-tracking { background: var(--success-light); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); color: #155724; margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); font-size: 0.9em; }
.order-adjustments-note { background: var(--warning-light); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); color: #856404; margin-bottom: var(--spacing-md); font-size: 0.85em; }
.order-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.tracking-btn { background: var(--info); color: white; border: none; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; font-size: 0.85em; display: flex; align-items: center; gap: 4px; }
.tracking-btn:hover { background: #138496; }

/* ============ FAQ SECTION ============ */
.faq-section { max-width: 700px; }
.faq-category { margin-bottom: var(--spacing-xl); }
.faq-category h3 { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 1.1em; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--r30-teal); color: var(--r30-primary); }
.faq-category h3 i { color: var(--r30-teal); }
.faq-item { background: white; border: 1px solid #e0e0e0; border-radius: var(--radius-sm); margin-bottom: var(--spacing-sm); overflow: hidden; }
.faq-question { width: 100%; padding: var(--spacing-md); background: var(--r30-light); border: none; text-align: left; font-size: 0.95em; font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; color: var(--r30-primary); }
.faq-question:hover { background: #e9ecef; }
.faq-question.active { background: var(--r30-primary); color: white; }
.faq-question i { transition: transform 0.2s; font-size: 0.9em; }
.faq-question.active i { transform: rotate(180deg); }
.faq-answer { display: none; padding: var(--spacing-md); font-size: 0.9em; color: var(--r30-dark-text); }
.faq-answer.active { display: block; }
.faq-answer p { margin-bottom: var(--spacing-sm); }
.faq-answer ul, .faq-answer ol { padding-left: var(--spacing-lg); margin-bottom: var(--spacing-sm); }
.faq-answer li { margin-bottom: 4px; }
.faq-answer a { color: var(--r30-teal); }

/* ============ CONTACT SECTION ============ */
.contact-section { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-xl); max-width: 900px; }
.contact-form-card, .contact-info-card { background: white; border: 1px solid #e0e0e0; border-radius: var(--radius-md); padding: var(--spacing-lg); }
.contact-form-card h3, .contact-info-card h3 { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--r30-teal); font-size: 1.1em; color: var(--r30-primary); }
.contact-form-card h3 i, .contact-info-card h3 i { color: var(--r30-teal); }
.contact-method { display: flex; gap: var(--spacing-md); padding: var(--spacing-md) 0; border-bottom: 1px solid #e0e0e0; }
.contact-method:last-child { border-bottom: none; }
.contact-method i { font-size: 1.2em; color: var(--r30-teal); width: 25px; text-align: center; }
.contact-method h4 { font-size: 0.9em; margin-bottom: 2px; color: var(--r30-primary); }
.contact-method p { font-size: 0.85em; color: var(--r30-gray); }
.contact-method a { color: var(--r30-teal); text-decoration: none; }
.contact-method a:hover { text-decoration: underline; }

/* ============ ADMIN SECTION ============ */
.admin-section { max-width: 1100px; }
.admin-tabs { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); border-bottom: 1px solid #e0e0e0; }
.admin-tab, .admin-tab-btn { padding: var(--spacing-sm) var(--spacing-lg); border: none; background: transparent; font-size: 0.95em; font-weight: 500; cursor: pointer; color: var(--r30-gray); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s; }
.admin-tab:hover, .admin-tab-btn:hover { color: var(--r30-teal); }
.admin-tab.active, .admin-tab-btn.active { color: var(--r30-teal); border-bottom-color: var(--r30-teal); }
.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }
.admin-filters { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); flex-wrap: wrap; align-items: center; }
.admin-filters select, .admin-filters input { padding: 10px 15px; border: 1px solid #ddd; border-radius: var(--radius-md); font-size: 0.95em; }
.admin-filters input { min-width: 220px; }
.refresh-btn { background: var(--r30-primary); color: white; border: none; padding: 10px 18px; border-radius: var(--radius-md); cursor: pointer; font-weight: 500; display: flex; align-items: center; gap: 6px; font-size: 0.9em; }
.refresh-btn:hover { background: var(--r30-secondary); }

/* Admin Order Table */
.admin-order-table { width: 100%; border-collapse: collapse; margin: var(--spacing-md) 0; font-size: 0.9em; }
.admin-order-table th { background: var(--r30-light); padding: 10px 8px; text-align: left; font-weight: 600; border-bottom: 2px solid #ddd; font-size: 0.85em; color: var(--r30-primary); }
.admin-order-table td { padding: 10px 8px; border-bottom: 1px solid #eee; vertical-align: middle; }
.admin-order-table tr:hover { background: #f8f9fa; }
.admin-order-table .item-cell { max-width: 200px; }
.admin-order-table .item-cell small { display: block; color: var(--r30-gray); font-size: 0.85em; }
.admin-order-table select, .admin-order-table input[type="number"] { padding: 6px 8px; border: 1px solid #ddd; border-radius: var(--radius-sm); font-size: 0.9em; }
.admin-order-table select { min-width: 140px; }
.admin-order-table input[type="number"] { width: 70px; text-align: center; }
.admin-order-table .total-price-cell { font-weight: 600; color: var(--success); }
.order-subtotal-row { background: var(--r30-light); font-weight: 600; }
.remove-item-btn { background: transparent; border: 1px solid var(--danger); color: var(--danger); padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8em; transition: all 0.2s; }
.remove-item-btn:hover { background: var(--danger); color: white; }

/* Adjustments Section */
.adjustments-section { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid #eee; }
.adjustments-table { width: 100%; border-collapse: collapse; margin: var(--spacing-sm) 0; font-size: 0.9em; }
.adjustments-table th { background: var(--r30-light); padding: 8px; text-align: left; font-weight: 600; font-size: 0.85em; }
.adjustments-table td { padding: 8px; border-bottom: 1px solid #eee; }
.positive-amount { color: var(--success); font-weight: 600; }
.negative-amount { color: var(--danger); font-weight: 600; }
.add-adjustment-form { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; align-items: center; margin-top: var(--spacing-md); padding: var(--spacing-md); background: var(--r30-light); border-radius: var(--radius-md); }
.add-adjustment-form input, .add-adjustment-form select { padding: 8px 10px; border: 1px solid #ddd; border-radius: var(--radius-sm); font-size: 0.9em; }
.adj-input { flex: 1; min-width: 100px; }
.adj-select { min-width: 120px; }

/* Order Grand Total */
.order-grand-total { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); background: var(--r30-primary); color: white; border-radius: var(--radius-md); margin-top: var(--spacing-md); font-size: 1.1em; font-weight: 600; }
.grand-total-amount { color: var(--r30-teal); font-size: 1.3em; }

/* Collapsible Order Cards */
.collapsible-order { background: white; border: 1px solid #e0e0e0; border-radius: var(--radius-md); margin-bottom: var(--spacing-md); overflow: hidden; }
.collapsible-order.expanded { border-color: var(--r30-teal); }
.order-card-header { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--spacing-lg); cursor: pointer; transition: background 0.2s; }
.order-card-header:hover { background: var(--r30-light); }
.order-header-left { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.order-header-right { text-align: right; }
.collapse-icon { color: var(--r30-gray); font-size: 1.2em; }
.order-card-body { padding: 0 var(--spacing-lg) var(--spacing-lg); border-top: 1px solid #eee; }
.order-notes { background: var(--r30-light); padding: var(--spacing-md); border-radius: var(--radius-sm); font-size: 0.9em; }
.order-tracking-info { background: var(--success-light); border: 1px solid var(--success); }

/* User Cards */
.user-card, .collapsible-user { background: white; border: 1px solid #e0e0e0; border-radius: var(--radius-md); margin-bottom: var(--spacing-md); overflow: hidden; }
.user-card-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-lg); cursor: pointer; transition: background 0.2s; }
.user-card-header:hover { background: var(--r30-light); }
.user-card-body { padding: var(--spacing-lg); border-top: 1px solid #eee; display: none; }
.user-card-stats { display: flex; gap: var(--spacing-lg); margin-bottom: var(--spacing-md); }
.user-stat { text-align: center; }
.stat-label { display: block; font-size: 0.8em; color: var(--r30-gray); margin-bottom: 4px; }
.stat-value { font-size: 1.3em; font-weight: 700; color: var(--r30-primary); }
.admin-badge { background: var(--r30-teal); color: var(--r30-primary); padding: 2px 8px; border-radius: 10px; font-size: 0.7em; font-weight: 600; margin-left: 8px; }

/* ============ PRINT STYLES ============ */
.print-table { width: 100%; border-collapse: collapse; margin: var(--spacing-md) 0; }
.print-table th { background: var(--r30-light); padding: var(--spacing-sm); text-align: left; font-weight: 600; border-bottom: 2px solid #e0e0e0; font-size: 0.85em; }
.print-table td { padding: var(--spacing-sm); border-bottom: 1px solid #e0e0e0; font-size: 0.85em; }
.print-section { margin-bottom: var(--spacing-md); }
.print-section h3 { font-size: 1em; margin-bottom: var(--spacing-sm); color: var(--r30-primary); }

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
    .header-content { flex-direction: column; text-align: center; gap: var(--spacing-md); }
    nav { justify-content: center; }
    .nav-btn { padding: 8px 12px; font-size: 0.85em; }
    .search-box { flex-direction: column; }
    .filters { flex-direction: column; align-items: stretch; }
    .conditions-grid { grid-template-columns: 1fr 1fr; }
    .cart-sidebar-sliding { width: 100%; }
    .contact-section { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr; }
    .condition-guide-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .conditions-grid { grid-template-columns: 1fr; }
    .condition-guide-grid { grid-template-columns: 1fr; }
}
@media print {
    body { background: white; }
    .container { box-shadow: none; }
    header, nav, .announcement-banner, .modal, .cart-sidebar-overlay, .cart-sidebar-sliding { display: none !important; }
}