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

body {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    background: 
        /* Main technical grid */
        linear-gradient(90deg, rgba(71, 85, 105, 0.15) 1px, transparent 1px),
        linear-gradient(0deg, rgba(71, 85, 105, 0.15) 1px, transparent 1px),
        /* Blueprint-style diagonal lines */
        linear-gradient(45deg, transparent 48%, rgba(59, 130, 246, 0.1) 48%, rgba(59, 130, 246, 0.1) 52%, transparent 52%),
        /* Accent grid */
        linear-gradient(90deg, rgba(100, 116, 139, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(100, 116, 139, 0.08) 1px, transparent 1px),
        #f1f5f9;
    background-size: 
        25px 25px,
        25px 25px,
        100px 100px,
        5px 5px,
        5px 5px;
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;
    color: #334155;
    line-height: 1.4;
    min-height: 100vh;
    font-size: 16px;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: 
        /* Registration marks */
        radial-gradient(circle at 80px 80px, transparent 2px, rgba(71, 85, 105, 0.12) 2px, rgba(71, 85, 105, 0.12) 2.5px, transparent 2.5px, transparent 3px, rgba(71, 85, 105, 0.12) 3px, rgba(71, 85, 105, 0.12) 3.5px, transparent 3.5px),
        /* Technical diagonal cross-hatch */
        linear-gradient(45deg, transparent 49%, rgba(100, 116, 139, 0.1) 49%, rgba(100, 116, 139, 0.1) 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(71, 85, 105, 0.08) 49%, rgba(71, 85, 105, 0.08) 51%, transparent 51%),
        /* Secondary diagonal grid */
        linear-gradient(30deg, transparent 49.5%, rgba(59, 130, 246, 0.06) 49.5%, rgba(59, 130, 246, 0.06) 50.5%, transparent 50.5%),
        linear-gradient(-30deg, transparent 49.5%, rgba(59, 130, 246, 0.06) 49.5%, rgba(59, 130, 246, 0.06) 50.5%, transparent 50.5%),
        /* Fine alignment grid */
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0.5px, transparent 0.5px),
        linear-gradient(0deg, rgba(148, 163, 184, 0.08) 0.5px, transparent 0.5px),
        rgba(252, 252, 253, 0.98);
    background-size: 
        160px 160px,
        25px 25px,
        25px 25px,
        50px 50px,
        50px 50px,
        15px 15px,
        15px 15px;
    background-position: 
        40px 40px,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 50px rgba(100, 116, 139, 0.05);
}

/* Beta Warning Banner */
.beta-warning-banner {
    background: #7f1d1d;
    border-left: 4px solid #6b1e1e;
    margin: 0 0 20px 0;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(127, 29, 29, 0.15);
}

.warning-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
}

.warning-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.warning-text {
    color: white;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

.warning-text strong {
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .beta-warning-banner {
        margin: 0 0 15px 0;
        padding: 10px 15px;
    }
    
    .warning-text {
        font-size: 13px;
    }
}

header {
    background: 
        linear-gradient(to right, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.85) 25%, rgba(51, 65, 85, 0.6) 50%, rgba(0, 0, 0, 0.3) 100%),
        url('packwire_matrix_header.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 2px solid #3b82f6;
    padding: 20px 25px;
    margin: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.packwire-logo {
    height: 80px;
    width: auto;
    margin-right: 20px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.pricing-matrix-text {
    background: #3b82f6;
    color: white;
    padding: 6px 14px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.version-number {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px rgba(59,130,246,0.3);
    align-self: flex-start;
}

.header-actions {
    display: flex;
    gap: 8px;
}

.header-actions .tool-btn {
    white-space: nowrap;
    width: auto;
    min-width: auto;
    padding: 12px 16px;
    justify-content: center;
}



.pricing-grid {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #cbd5e1;
    margin: 20px;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-weight: 500;
    position: relative;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.1);
    backdrop-filter: blur(10px);
}

.grid-header {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr 0.8fr 0.8fr 0.8fr 1fr 1.3fr 1fr 1fr 0.8fr;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #f1f5f9;
    font-weight: 600;
    font-size: 16px;
    position: static;
    height: 50px !important;
    max-height: 50px;
    min-height: 50px;
    border-bottom: 1px solid #475569;
    border-left: 3px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-cell {
    padding: 15px 10px;
    text-align: center;
    border-right: 1px solid #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #f1f5f9;
    position: relative;
    height: 50px !important;
    max-height: 50px;
    min-height: 50px;
    box-sizing: border-box;
    letter-spacing: 0.025em;
}

.header-cell:last-child {
    border-right: none;
}


.pricing-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr 0.8fr 0.8fr 0.8fr 1fr 1.3fr 1fr 1fr 0.8fr;
    border-bottom: 1px solid #e2e8f0;
    border-left: 3px solid transparent;
    background-color: #ffffff;
    height: 60px;
    position: relative;
    transition: all 0.2s ease;
}

.pricing-row.loading {
    background-color: #f8f9ff;
    border-left-color: #0082ff;
}

.pricing-row.success {
    background-color: #f0f9ff;
    border-left-color: #10b981;
}

.pricing-row.error {
    background-color: #fef2f2;
    border-left-color: #ef4444;
}

.row-status-indicator {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font-size: 12px;
    z-index: 5;
    pointer-events: none;
}

.pricing-row:nth-child(even) {
    background-color: #f8fafc;
}

.pricing-row:nth-child(odd) {
    background-color: #ffffff;
}

.pricing-row:hover {
    background-color: #e0f2fe;
    border-left-color: #3b82f6;
}

/* Ensure consistent borders on all cells */
.pricing-row .cell {
    border-bottom: inherit;
    border-right: 1px solid #c0c0c0;
}

.pricing-row .cell:last-child {
    border-right: none;
}

.cell {
    padding: 0;
    border-right: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
}

.cell:last-child {
    border-right: none;
}

.cell:first-child {
    border-left: none;
}

/* Ensure action cell (with delete button) has proper alignment */
.cell:nth-child(11) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}


.cell input, .cell select {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 16px;
    padding: 0 8px;
    outline: none;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-weight: 500;
    margin: 0;
    min-width: 0;
    box-sizing: border-box;
}

.cell input:focus, .cell select:focus {
    background: white;
    border: 2px solid #3b82f6;
    outline: none;
    z-index: 1;
    position: relative;
}

.cell input[type="number"] {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-weight: 500;
    text-align: right;
    padding-right: 15px;
    font-variant-numeric: tabular-nums;
}

.cell input[type="number"]::-webkit-outer-spin-button,
.cell input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cell input[type="number"] {
    -moz-appearance: textfield;
}

/* Add custom number input styling */
.cell input[type="number"]:hover {
    background: #f8f8f8;
}

.cell input[type="number"]:focus {
    background: white;
    padding-right: 12px;
}

.cell input[type="checkbox"] {
    width: auto;
    height: auto;
}

.cell select {
    cursor: pointer;
    padding-right: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23666" d="M6 8L2 4h8z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 10px;
    appearance: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.dimension-span-3 {
    grid-column: span 3;
}

.dimension-display {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 14px;
    background-color: rgba(249, 250, 251, 0.8);
}

.price-cell {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-weight: 600;
    color: #1e40af;
    background-color: rgba(239, 246, 255, 0.6);
    font-size: 16px;
    border-right: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0;
    position: relative;
    font-variant-numeric: tabular-nums;
}

.price-cell:nth-child(10) {
    border-right: 1px solid #c0c0c0;
}

.delete-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    height: auto;
}

.delete-btn:hover {
    background-color: #c82333;
}

.add-row-btn {
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
    padding: 12px 24px;
    margin: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.add-row-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 2px 4px rgba(59,130,246,0.2);
}

.summary {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    margin: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    border-top: 2px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.1);
}

.sticky-summary {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    border-top: 2px solid #3b82f6;
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    gap: 40px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.sticky-summary.visible {
    transform: translateY(0);
}

.sticky-summary .summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sticky-summary .summary-item label {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
    font-weight: 600;
    text-transform: uppercase;
}

.sticky-summary .summary-item span {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1e40af;
    font-variant-numeric: tabular-nums;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-item label {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
}

.summary-item span {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1e40af;
    font-variant-numeric: tabular-nums;
}

.toolbar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    margin: 0;
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.05);
    flex: 0 0 280px;
    gap: 12px;
    max-width: 280px;
}

.toolbar-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

h3.toolbar-label,
.toolbar-label {
    font-weight: 600;
    color: #64748b;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

.toolbar-description {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 10px 0;
    font-style: italic;
    line-height: 1.3;
}

.tool-btn {
    padding: 14px 16px;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: #475569;
    font-family: inherit;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
    min-height: 44px;
}

.tool-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #334155;
}

.tool-btn.secondary {
    background: #64748b;
    color: white;
    border: 1px solid #64748b;
}

.tool-btn.danger {
    background: #dc3545;
    color: white;
    border: 1px solid #dc3545;
}

.tool-btn.success {
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.tool-btn.secondary:hover {
    background: #475569;
    border-color: #374151;
}

.tool-btn.danger:hover {
    background: #c82333;
}

.tool-btn.success:hover {
    background: #2563eb;
    border-color: #1d4ed8;
}

.tool-btn.login-btn {
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(59,130,246,0.2);
}

.tool-btn.login-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 2px 6px rgba(59,130,246,0.3);
}

.tool-btn.quote {
    background: #f59e0b;
    color: white;
    border: 1px solid #f59e0b;
    font-weight: 600;
}

.tool-btn.quote:hover {
    background: #d97706;
    border-color: #d97706;
}

.tool-btn.info {
    background: 
        linear-gradient(to right, rgba(59, 130, 246, 0.85) 0%, rgba(37, 99, 235, 0.75) 25%, rgba(29, 78, 216, 0.6) 50%, rgba(30, 64, 175, 0.4) 100%),
        url('packwire_matrix_header.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    border: 1px solid #1d4ed8;
    font-weight: 600;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.8);
    position: relative;
    overflow: hidden;
}

.tool-btn.info:hover {
    background: 
        linear-gradient(to right, rgba(59, 130, 246, 0.7) 0%, rgba(37, 99, 235, 0.6) 25%, rgba(29, 78, 216, 0.45) 50%, rgba(30, 64, 175, 0.3) 100%),
        url('packwire_matrix_header.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-color: #2563eb;
}

/* Progress Indicator */
.progress-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(59, 130, 246, 0.2);
    z-index: 1000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.progress-indicator.active {
    transform: scaleX(1);
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

/* Bulk Actions */
.bulk-actions {
    display: inline-block;
    position: relative;
}

.bulk-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #c0c0c0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 10;
}

.bulk-dropdown.show {
    display: block;
}

.bulk-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 15px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}

.bulk-dropdown-item:hover {
    background: #f0f0f0;
}

.bulk-dropdown-item.danger:hover {
    background: #fef2f2;
    color: #dc3545;
}

/* Auto-save indicator */
.auto-save-indicator {
    position: fixed;
    top: 20px;
    left: 20px;
    padding: 8px 12px;
    background: rgba(16, 185, 129, 0.9);
    color: white;
    font-size: 12px;
    font-weight: 600;
    z-index: 1000;
    transform: translateX(-100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.auto-save-indicator.visible {
    transform: translateX(0);
    opacity: 1;
}

.auto-save-indicator.saving {
    background: rgba(59, 130, 246, 0.9);
}

/* Responsive Design */
@media (max-width: 1300px) {
    .pricing-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .grid-header,
    .pricing-row {
        width: 1200px;
        min-width: 1200px;
    }
    
    .grid-header {
        height: 50px !important;
        max-height: 50px;
        min-height: 50px;
    }
    
    .header-cell {
        height: 50px;
        max-height: 50px;
        min-height: 50px;
        padding: 15px 10px;
        box-sizing: border-box;
    }
}

@media (max-width: 1250px) {
    .pricing-grid {
        margin: 10px;
    }
    
    .container {
        padding: 0;
    }
    
    .grid-header {
        height: 50px !important;
        max-height: 50px;
        min-height: 50px;
    }
    
    .header-cell {
        height: 50px !important;
        max-height: 50px;
        min-height: 50px;
    }
}

@media (max-width: 900px) {
    .pricing-grid {
        margin: 5px;
    }
    
    .header-content {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    .header-actions {
        width: 100%;
        justify-content: center;
    }
    
    .grid-header {
        height: 50px !important;
        max-height: 50px;
        min-height: 50px;
    }
    
    .header-cell {
        height: 50px !important;
        max-height: 50px;
        min-height: 50px;
    }
}

/* Large tablet responsiveness */
@media (max-width: 950px) {
    .header-content {
        gap: 12px;
    }
    
    .header-actions {
        gap: 6px;
    }
    
    .header-actions .tool-btn {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .pricing-grid {
        margin: 15px;
    }
    
    .summary {
        margin: 15px;
        padding: 14px 18px;
        gap: 30px;
    }
    
    .summary-item {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    
    .pricing-grid {
        margin: 10px;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
    
    .grid-header {
        height: 50px !important;
        max-height: 50px;
        min-height: 50px;
    }
    
    .header-cell {
        height: 50px !important;
        max-height: 50px;
        min-height: 50px;
    }
    
    .add-row-btn {
        margin: 25px 10px;
        width: calc(100% - 20px);
    }
    
    .summary {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        margin: 10px;
    }
    
    .toolbar {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    
    .toolbar-section {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: rgba(255, 255, 255, 0.98);
    margin: 10% auto;
    padding: 0;
    border: 2px solid #cbd5e1;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    font-family: inherit;
    backdrop-filter: blur(10px);
}

.modal-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #334155;
    padding: 12px 16px;
    border-bottom: 1px solid #cbd5e1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2,
.modal-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.modal-close {
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    color: #666;
}

.modal-close:hover {
    color: #000;
}

.modal-body {
    padding: 16px;
}

.modal-body p {
    margin: 0 0 12px 0;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
}

.modal-actions {
    display: flex;
    gap: 8px;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 16px;
}

.modal-btn {
    padding: 6px 16px;
    border: 1px solid #c0c0c0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: inherit;
}

.modal-btn.primary {
    background: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.modal-btn.primary:hover {
    background: #2563eb;
}

.modal-btn.secondary {
    background: white;
    color: #333;
    border: 1px solid #c0c0c0;
}

.modal-btn.secondary:hover {
    background: #f0f0f0;
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
    
    .modal-actions {
        gap: 12px;
    }
}

/* Terminal-style Status Messages */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 16px;
    border-radius: 0;
    border: 1px solid #475569;
    background: #1e293b;
    color: #e2e8f0;
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
    font-weight: 400;
    font-size: 0.85em;
    z-index: 1001;
    animation: terminalSlideIn 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    max-width: 400px;
    word-wrap: break-word;
    border-left: 4px solid #64748b;
}

@keyframes terminalSlideIn {
    from {
        transform: translateX(100%) translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}

@keyframes terminalSlideOut {
    from {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%) translateY(-10px);
        opacity: 0;
    }
}

.notification.success {
    border-left-color: #22c55e;
    background: #1e293b;
    color: #dcfce7;
}

.notification.success::before {
    content: "[OK] ";
    color: #22c55e;
}

.notification.error {
    border-left-color: #ef4444;
    background: #1e293b;
    color: #fecaca;
}

.notification.error::before {
    content: "[ERR] ";
    color: #ef4444;
}

.notification.info {
    border-left-color: #3b82f6;
    background: #1e293b;
    color: #dbeafe;
}

.notification.info::before {
    content: "[INFO] ";
    color: #3b82f6;
}

.notification.warning {
    border-left-color: #f59e0b;
    background: #1e293b;
    color: #fef3c7;
}

.notification.warning::before {
    content: "[WARN] ";
    color: #f59e0b;
}

/* Form Styles for Modals */
.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    font-size: 12px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #c0c0c0;
    font-size: 12px;
    font-family: inherit;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border: 2px solid #3b82f6;
}

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

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
}

/* Legal Footer */
.legal-footer {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #cbd5e1;
    padding: 20px 0;
    margin-top: auto;
    font-size: 12px;
    color: #64748b;
    box-shadow: 0 -2px 8px rgba(100, 116, 139, 0.05);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.footer-links a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #2563eb;
    text-decoration: underline;
}

.footer-separator {
    color: #dee2e6;
    margin: 0 4px;
}

.footer-legal {
    text-align: center;
    line-height: 1.4;
}

.copyright {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #495057;
}

.disclaimer {
    margin: 0;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
    color: #6c757d;
}

@media (max-width: 768px) {
    .footer-links {
        flex-direction: column;
        gap: 4px;
    }
    
    .footer-separator {
        display: none;
    }
    
    .legal-footer {
        font-size: 11px;
    }
    
    .disclaimer {
        font-size: 10px;
    }
}

/* Shipping Calculator Styles */
/* Container for shipping and toolbar side-by-side */
.shipping-toolbar-container {
    display: flex;
    gap: 20px;
    margin: 20px;
    align-items: stretch;
}

.shipping-calculator-section {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #cbd5e1;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-weight: 500;
    position: relative;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.1);
    backdrop-filter: blur(10px);
    padding: 0;
    flex: 2;
    min-width: 600px;
}

.shipping-header {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #f1f5f9;
    font-weight: 600;
    font-size: 16px;
    position: static;
    padding: 15px 25px;
    margin: 0;
    border-bottom: 1px solid #cbd5e1;
}

.shipping-header h2,
.shipping-header h3 {
    color: #f1f5f9;
    font-size: 1.1em;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.shipping-header p {
    color: rgba(241, 245, 249, 0.8);
    font-size: 0.9em;
    margin: 0;
}

.shipping-form {
    padding: 25px 25px 0 25px;
    margin: 0;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.shipping-addresses {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 25px;
    padding: 0;
}

.address-section {
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid #e2e8f0;
    padding: 40px;
    max-width: 1000px;
    width: 100%;
    min-width: 600px;
}

.address-section h3,
.address-section h4 {
    color: #334155;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
}

.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.address-grid .form-group:last-child {
    grid-column: 1 / -1;
}

/* Shipping form inputs - make them cell-like */
.address-section .form-group input,
.address-section .form-group select {
    height: 45px;
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    font-weight: 500;
    box-sizing: border-box;
    background: white;
}

.address-section .form-group input:focus,
.address-section .form-group select:focus {
    outline: none;
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}


.shipping-results {
    background: #ffffff;
    margin: 0;
    padding: 0;
}

.shipping-results h3,
.shipping-results h4 {
    color: #334155;
    font-size: 1.1em;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding: 15px 25px 0 25px;
}

.shipping-grid {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #cbd5e1;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.1);
    backdrop-filter: blur(10px);
}

.shipping-grid .grid-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #f1f5f9;
    font-weight: 600;
    font-size: 16px;
    height: 50px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.shipping-grid .header-cell {
    padding: 15px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.shipping-grid .header-cell:last-child {
    border-right: none;
}

.shipping-rate-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
    border-bottom: 1px solid #e2e8f0;
    border-left: 3px solid transparent;
    background-color: #ffffff;
    height: 60px;
    transition: all 0.2s ease;
    position: relative;
}

.shipping-rate-row.selectable {
    cursor: pointer;
}

.shipping-rate-row:nth-child(even) {
    background-color: #f8fafc;
}

.shipping-rate-row:nth-child(odd) {
    background-color: #ffffff;
}

.shipping-rate-row:hover {
    background-color: #e0f2fe;
    border-left-color: #3b82f6;
}

.shipping-rate-row.selectable:hover {
    background-color: #f8fafc;
}

.shipping-rate-row.selected {
    background-color: #dbeafe;
    border-left-color: #3b82f6;
}

.shipping-cell {
    padding: 15px 10px; /* Match header cell padding */
    border-right: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    font-size: 14px;
}

.shipping-cell:last-child {
    border-right: none;
}


.shipping-rate-row:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

.shipping-rate-row:last-child {
    border-bottom: none;
}

.shipping-cell {
    padding: 12px 15px;
    border-right: 1px solid #e2e8f0;
    text-align: center;
    font-size: 0.9em;
}

.shipping-cell:last-child {
    border-right: none;
    font-weight: 600;
    color: #059669;
}

/* Unified shipping grid - all cells resize together */
.unified-shipping-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
    min-width: 800px;
    border: 1px solid #cbd5e1;
    border-radius: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.1);
    backdrop-filter: blur(10px);
}

.shipping-grid-cell {
    padding: 15px 10px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.shipping-grid-cell:nth-child(4n) {
    border-right: none; /* Remove right border on last column */
}

.shipping-grid-cell.header-cell {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #f1f5f9;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    height: 50px;
}

.shipping-grid-cell.data-cell {
    background-color: #ffffff;
    height: 60px;
    cursor: pointer;
}

.shipping-grid-cell.data-cell:nth-child(4n+1):hover,
.shipping-grid-cell.data-cell:nth-child(4n+2):hover,
.shipping-grid-cell.data-cell:nth-child(4n+3):hover,
.shipping-grid-cell.data-cell:nth-child(4n):hover {
    background-color: #f8fafc;
}

/* Row selection styles for unified grid */
.shipping-grid-cell.data-cell.selected {
    background-color: #dcfdf7;
}

/* Green line only on first cell of selected row */
.shipping-grid-cell.data-cell.selected:nth-child(4n+1) {
    border-left: 3px solid #10b981;
}

.shipping-grid-cell.rate-cell {
    font-weight: 600;
    color: #059669;
}

/* TBD placeholder styling */
.tbd-placeholder {
    background-color: #f1f5f9;
    color: #475569;
    padding: 4px 8px;
    border: 1px solid #cbd5e1;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    margin-left: 8px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
}

.shipping-service {
    font-weight: 600;
    color: #334155;
}

.shipping-carrier {
    color: #64748b;
    font-size: 0.85em;
}

.shipping-transit {
    color: #64748b;
}

.shipping-rate {
    color: #059669;
    font-weight: 700;
}

.shipping-loading {
    text-align: center;
    padding: 20px;
    color: #64748b;
    font-style: italic;
}

.shipping-error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    padding: 15px;
    text-align: center;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Tablet and smaller - stack toolbar below shipping calculator */
@media (max-width: 950px) {
    .shipping-toolbar-container {
        flex-direction: column;
        gap: 15px;
        margin: 15px;
    }
    
    .shipping-calculator-section {
        min-width: auto;
        width: 100%;
        flex: none;
    }
    
    .toolbar {
        flex: none;
        max-width: none;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 16px 20px;
        gap: 20px;
    }
    
    .toolbar-section {
        flex: 1;
        min-width: 200px;
        flex-direction: column;
        align-items: stretch;
    }
    
    .toolbar .tool-btn {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px;
    }
    
    .toolbar-description {
        font-size: 12px;
        margin-bottom: 8px;
    }
}



/* Mobile responsiveness for shipping calculator */
@media (max-width: 768px) {

    .shipping-toolbar-container {
        margin: 10px;
        gap: 10px;
    }
    
    .toolbar {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    
    .toolbar-section {
        flex: none;
        min-width: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .toolbar .tool-btn {
        padding: 14px 16px;
        font-size: 14px;
        min-height: 48px;
    }
    
    .toolbar-description {
        font-size: 13px;
        margin-bottom: 8px;
    }
    
    .shipping-addresses {
        padding: 0 15px;
    }
    
    .address-section {
        max-width: 100%;
        min-width: auto;
        margin: 0;
        padding: 25px;
    }
    
    .address-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .address-grid .form-group:last-child {
        grid-column: 1;
    }
    
    /* Mobile shipping - horizontal scroll like pricing grid */
    .shipping-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px; /* Negative margin to allow full width scroll */
    }
    
    .shipping-rate-row,
    .shipping-grid .grid-header {
        min-width: 800px; /* Ensure minimum width for horizontal scroll - increased for 4 columns */
    }
    
    /* Mobile adjustments for unified shipping grid */
    .unified-shipping-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
    }
    
    
}

/* Accessibility helper class */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Form help text */
.form-help {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.3;
}

/* Focus indicators */
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Button loading states */
.btn-loading {
    display: none;
}

button.loading .btn-text {
    display: none;
}

button.loading .btn-loading {
    display: inline;
}

/* Disabled button states */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

button:disabled:hover {
    transform: none;
}

/* Form validation styles */
.form-group.error input,
.form-group.error select {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.form-group.error .form-help {
    color: #ef4444;
}

.form-group.success input,
.form-group.success select {
    border-color: #22c55e;
    background-color: #f0fdf4;
}

.validation-message {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    padding: 4px 8px;
}

.validation-message.error {
    color: #dc2626;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
}

.validation-message.success {
    color: #16a34a;
    background-color: #dcfce7;
    border: 1px solid #bbf7d0;
}

/* Success notification */
.success-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #22c55e;
    color: white;
    padding: 16px 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    max-width: 300px;
    display: none;
}

.success-notification.show {
    display: block;
    transform: translateX(0);
}

/* Package information styling */
.package-info-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 25px;
    margin-bottom: 20px;
}

.shipping-results .package-info-container > h4 {
    margin: 0 0 8px 0;
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
    text-align: left !important;
    padding: 0 !important;
}

.shipping-results .package-info-section {
    margin-bottom: 4px;
    padding: 0 !important;
    margin-left: 0 !important;
}

.shipping-results .package-info-section h4 {
    margin: 0 0 4px 0;
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
    text-align: left !important;
    padding: 0 !important;
    margin-left: 0 !important;
}

.shipping-results .package-info-section p {
    margin: 4px 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.4;
    text-align: left !important;
    padding: 0 !important;
    margin-left: 0 !important;
}

.shipping-results .package-info-section ul {
    margin: 4px 0;
    padding: 0 0 0 20px;
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
}

.shipping-results .package-info-section li {
    margin: 2px 0;
    font-size: 13px;
    color: #475569;
    font-weight: normal;
}

.package-info-section p strong {
    font-weight: 600;
    color: #334155;
}

.package-disclaimer {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    padding: 8px 12px;
    margin: 12px 0;
}

.package-disclaimer p {
    margin: 0;
    color: #92400e;
    font-size: 12px;
    font-weight: 500;
}

/* Mobile styles for notifications */
@media (max-width: 768px) {
    .success-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
        transform: translateY(-100%);
    }
    
    .success-notification.show {
        display: block;
        transform: translateY(0);
    }
    
    .package-info-container {
        margin: 10px;
        padding: 12px;
    }
    
    .package-info-section h4 {
        font-size: 13px;
    }
    
    .package-info-section p {
        font-size: 12px;
    }
}