/* Universal Styles */
* {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Color Variables (updated with your company colors) */
:root {
    --card: #ffffff;
    --bg-light: #f4f4f4;
    --bg-dark: #dfdfdf;
    --stroke: #a9a9a9;
    --primary: #fb1101; /* Your new red for primary actions/accents */
    --hover: #e00b00; /* Slightly darker red for hover states */
    --head: #000000; /* Your new black for headings/strong text */
    --maintext: #595454; /* Keeping a dark grey for general text for readability */
    --accent: #fed511; /* Your new yellow/gold for accents and active states */
    --secondary-button: #a9a9a9; /* A neutral grey for secondary buttons */
    --secondary-button-hover: #7f8c8d; /* Darker grey for secondary button hover */
    --success: #2ecc71; /* Keeping green for success messages */
    --danger: #fb1101; /* Using your red for danger/remove actions */
    --danger-hover: #e00b00; /* Darker red for danger hover */
    --info-light: #f0f7ff; /* Light blue for info backgrounds, can be adjusted */
    --info-dark: #2980b9; /* Darker blue for info text, can be adjusted */
}

/* Body and Global Typography */
body {
    margin: 0;
    line-height: 1.6;
    background-color: var(--bg-light); /* Giving the body a light background */
}

h1, h2, h3 {
    color: var(--head); /* Headings use your new black */
    margin-top: 0;
}

/* Container */
.containeres {
    max-width: 1000px; /* Reduced max-width slightly for a more compact feel, adjust as needed */
    margin: 50px auto; /* Added top/bottom margin for spacing */
    background: var(--card);
    padding: 50px; /* Slightly increased padding */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

h1 {
    text-align: center;
    margin-bottom: 30px; /* Increased margin for better separation */
    font-weight: 700; /* Made heading bolder */
    font-size: 2em; /* Slightly larger font size */
    color: var(--head);
}

/* Page Transitions */
.page {
    display: none;
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.page.active {
    display: block;
}

/* Form Elements */
.form-group {
    margin-bottom: 25px; /* Increased margin for better spacing */
}

label {
    display: block;
    margin-bottom: 10px; /* Increased margin for labels */
    font-weight: 600;
    color: var(--head); /* Labels use your new black for good contrast */
    font-size: 1.05em; /* Slightly larger label font */
}

input, select, button, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--stroke); /* Using stroke variable for borders */
    border-radius: 8px; /* Slightly more rounded corners */
    font-size: 16px;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    color: var(--maintext); /* Text in inputs */
}



input[type="checkbox"], input[type="radio"] {
    width: auto;
    margin-right: 10px; /* Adjusted margin */
}

/* Buttons */
button {
    background-color: var(--primary); /* Primary button uses your red */
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 14px 25px; /* Slightly more padding for buttons */
    border-radius: 8px; /* Consistent border-radius */
    transition: all 0.3s ease;
    font-size: 1.05em;
}

button:hover {
    background-color: var(--hover); /* Darker red on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

button:disabled {
    background-color: var(--bg-dark); /* Grey for disabled buttons */
    color: var(--stroke);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

button.secondary {
    background-color: var(--secondary-button); /* Secondary button uses a neutral grey */
    color: white;
}
button.secondary:hover {
    background-color: var(--secondary-button-hover); /* Darker grey on hover */
}

button.danger {
    background-color: var(--danger); /* Danger button uses your red */
}
button.danger:hover {
    background-color: var(--danger-hover); /* Darker red on hover */
}

/* Navigation Buttons (Next/Back) */
.navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px; /* More top margin */
    border-top: 1px solid var(--bg-dark); /* Lighter border */
}

/* Warehouse Section */
.warehouse {
    border: 1px solid var(--bg-dark); /* Lighter border */
    padding: 25px; /* Increased padding */
    margin-bottom: 30px; /* Increased margin */
    border-radius: 10px; /* Consistent border-radius */
    background-color: var(--bg-light); /* Lighter background for warehouse sections */
    transition: all 0.3s ease;
}
.warehouse:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* More subtle shadow */
}

.warehouse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* Increased margin */
}
.warehouse-header h3 {
    margin: 0;
    color: var(--head); /* Heading in warehouse section uses black */
    font-size: 1.3em;
}
.remove-warehouse {
    background-color: var(--danger); /* Using your red for remove button */
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 15px; /* Adjusted padding */
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
}
.remove-warehouse:hover {
    background-color: var(--danger-hover);
}

/* Box Dimensions */
.box-dimensions {
    display: flex;
    gap: 20px; /* Increased gap */
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.box-dimensions input, .box-dimensions select {
    flex: 1;
    min-width: 100px; /* Adjusted min-width for better responsiveness */
}
.size-type-select {
    min-width: 150px; /* Adjusted min-width */
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px; /* Increased margin */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Lighter shadow */
    border-radius: 8px; /* Add border-radius to the table for consistent look */
    overflow: hidden; /* Ensures border-radius is applied */
}
th, td {
    border: 1px solid var(--bg-dark); /* Lighter border for table cells */
    padding: 14px; /* Increased padding */
    text-align: left;
}
th {
    background-color: var(--primary); /* Table header background is your red */
    color: white;
    font-weight: 600;
    font-size: 1.05em;
}
tr:nth-child(even) {
    background-color: var(--bg-light); /* Light background for even rows */
}
tr:hover {
    background-color: #fce8e8; /* Light red hover for table rows */
}

/* Additional Services */
.additional-services {
    margin-top: 35px;
    padding: 25px;
    background-color: var(--bg-light); /* Light background */
    border-radius: 10px;
}
.service-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.2s;
    border: 1px solid transparent; /* Added transparent border for hover effect */
}
.service-item:hover {
    background-color: #ffe0e0; /* Light red hover for service items */
    border-color: var(--primary); /* Red border on hover */
}
.service-item input[type="number"] {
    max-width: 80px; /* Constrain width of number input */
    margin-left: 15px;
    text-align: center;
}

/* Address Fields (for self-pickup) */
.address-fields {
    display: none;
    margin-top: 20px;
    padding: 25px;
    background-color: var(--info-light); /* Light blue background for info sections */
    border-radius: 10px;
    animation: slideDown 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05); /* subtle border */
}
@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 500px; }
}

/* Summary Section (if applicable) */
.summary-item {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--bg-dark);
}
.summary-title {
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--head); /* Summary titles in black */
    font-size: 1.4em;
}

/* Progress Bar */
.progress-bar {
    display: flex;
    margin-bottom: 40px; /* Increased margin for progress bar */
    position: relative;
    z-index: 1;
    border-radius: 10px; /* Rounded corners for the entire bar */
    overflow: hidden; /* Ensures rounded corners are applied */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Added subtle shadow */
}
.progress-step {
    flex: 1;
    text-align: center;
    padding: 18px 15px; /* Increased padding */
    background-color: var(--bg-dark); /* Inactive steps use dark background */
    position: relative;
    font-weight: 700; /* Bolder text */
    color: var(--maintext); /* Text color for inactive steps */
    transition: all 0.3s ease;
    font-size: 1.05em;
}
.progress-step.active {
    background-color: var(--accent); /* Active step uses your yellow/gold */
    color: var(--head); /* Active step text is black */
}
.progress-step.completed {
    background-color: var(--primary); /* Completed steps use your red */
    color: white; /* Completed step text is white */
}
.progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px; /* Adjusted to overlap slightly for a more seamless look */
    width: 0;
    height: 0;
    border-top: 18px solid transparent; /* Adjusted size */
    border-bottom: 18px solid transparent; /* Adjusted size */
    border-left: 18px solid var(--bg-dark); /* Color of the arrow matches the inactive step */
    transform: translateY(-50%);
    z-index: 1;
    transition: all 0.3s ease;
}
.progress-step.active:not(:last-child)::after {
    border-left-color: var(--accent); /* Arrow color matches active step */
}
.progress-step.completed:not(:last-child)::after {
    border-left-color: var(--primary); /* Arrow color matches completed step */
}
/* Ensure the current step's arrow is correct, and previous steps are completed */
.progress-step.active:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -15px; /* For the previous step's arrow */
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 18px solid var(--primary); /* Should be the color of the completed step */
    transform: translateY(-50%);
    z-index: 2; /* Ensure it's above the current step's background */
}

/* Totals */
.total-sum {
    font-size: 2.2em; /* Larger total sum */
    font-weight: 700;
    padding-top: 20px;
    color: var(--primary); /* Total sum in your red */
    text-align: right;
    margin-top: 20px;
    border-top: 1px dashed var(--bg-dark); /* Dashed line for separation */
}
.total-discount, .total-before-discount {
    color: var(--maintext);
    text-align: right;
    font-size: 1.1em;
    margin-bottom: 5px;
}
.total-discount {
    color: var(--success); /* Green for discount */
    font-weight: 600;
}
.total-before-discount {
    text-decoration: line-through; /* Strikethrough for original price */
    opacity: 0.7;
}

/* Selectors */
.warehouse-name-select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--stroke);
    border-radius: 8px;
}
.marketplace-select {
    margin-bottom: 20px;
}
.delivery-date-input {
    margin-top: 20px;
}

/* Shipping Method (Radio Buttons) */
.shipping-method {
    margin: 25px 0;
    padding: 20px;
    background-color: var(--bg-light);
    border-radius: 10px;
}
.shipping-method label {
    display: inline-flex;
    align-items: center;
    margin-right: 30px; /* Increased spacing */
    cursor: pointer;
    font-weight: normal;
    color: var(--maintext);
}
.shipping-method input[type="radio"] {
    margin-right: 33px;
    transform: scale(1.2); /* Slightly larger radio buttons */
    accent-color: var(--primary); /* Modern way to color radio/checkbox */
     width: 0;
}

/* Pallet Information */
.pallet-info {
    display: none;
    background-color: #fff3f3; /* Light red background for pallet info */
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    animation: fadeIn 0.5s ease;
    border: 1px solid rgba(0,0,0,0.05); /* subtle border */
}
.pallet-calculation {
    font-weight: 700;
    margin-top: 10px;
    color: var(--primary); /* Pallet calculation text in red */
    font-size: 1.1em;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly less transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.loading-overlay.active {
    opacity: 1;
    pointer-events: all;
}
.spinner {
    width: 60px; /* Larger spinner */
    height: 60px;
    border: 6px solid var(--bg-dark);
    border-top: 6px solid var(--primary); /* Spinner color is your red */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error and Success Messages */
.error-message {
    color: var(--danger); /* Error messages in your red */
    font-size: 0.9em;
    margin-top: 8px; /* Adjusted margin */
    display: none;
    font-weight: 500;
}
.input-error {
    border-color: var(--danger); /* Input error border in your red */
}
.input-error:focus {
    box-shadow: 0 0 0 3px rgba(251, 17, 1, 0.2);
}
.success-message {
    background-color: var(--success);
    color: white;
    padding: 18px;
    border-radius: 10px;
    margin-bottom: 25px;
    text-align: center;
    display: none;
    font-size: 1.1em;
    font-weight: 600;
}

/* Mobile Optimization */
.mobile-optimized-table {
    overflow-x: auto;
}
.branch-selector {
    margin-bottom: 20px;
    background-color: var(--bg-light); /* Consistent light background */
    border-radius: 10px;
}
.loading-branches {
    padding: 15px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    color: var(--maintext);
    font-style: italic;
    font-size: 0.95em;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	    .loading-branches {
        font-size: 14px; /* Уменьшаем размер шрифта */
        padding: 8px 16px; /* Уменьшаем внутренние отступы */
    }
    .containeres {
        margin: 20px auto; /* Reduced margin for smaller screens */
        padding: 20px;
    }
    h1 {
        font-size: 1.8em;
    }
    label {
        font-size: 1em;
    }
    input, select, button, textarea {
        padding: 10px;
        font-size: 15px;
    }
    button {
        padding: 12px 20px;
        font-size: 1em;
    }
    .box-dimensions {
        flex-direction: column;
        gap: 10px;
    }
    .progress-bar {
        flex-direction: column;
        border-radius: 5px; /* Smaller radius for mobile */
    }
    .progress-step {
        margin-bottom: 5px;
        border-radius: 5px;
        padding: 12px 10px;
        font-size: 0.95em;
    }
    .progress-step:not(:last-child)::after {
        display: none; /* Hide arrows on mobile for stacked steps */
    }
    .warehouse-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px; /* Space between title and button */
    }
    .warehouse-header button {
        width: 100%; /* Make button full width */
        margin-top: 0; /* Remove extra top margin */
    }
    .shipping-method label {
        display: block;
        margin-bottom: 10px;
        margin-right: 0; /* Remove right margin for stacked labels */
    }
    th, td {
        padding: 10px;
        font-size: 0.9em;
    }
    .total-sum {
        font-size: 1.8em;
    }
    .total-discount, .total-before-discount {
        font-size: 1em;
    }
}

/* Further Refinements for smaller screens, if needed */
@media (max-width: 480px) {
	
    .loading-branches {
        font-size: 12px; /* Ещё больше уменьшаем размер шрифта */
        padding: 6px 12px; /* Минимальные внутренние отступы */
        white-space: nowrap; /* Запрещаем перенос текста */
    }	
    .containeres {
        padding: 15px;
    }
    h1 {
        font-size: 1.5em;
    }
    .warehouse, .additional-services, .address-fields, .shipping-method, .pallet-info {
        padding: 15px;
    }
}
 #global-loading {
 position: fixed;
top: 0;
 left: 0;
 width: 100%;
 height: 100%;
   background: rgba(0,0,0,0.5);
  color: white;
   display: flex;
   justify-content: center;
   align-items: center;
    z-index: 1000;
 }
.loading-branches {
    position: fixed; /* Фиксированное позиционирование */
    top: 50%; /* Центрирование по вертикали */
    left: 50%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Корректировка центра */
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный фон */
    color: white; /* Цвет текста */
    padding: 10px 20px; /* Внутренние отступы */
    border-radius: 5px; /* Скругление углов */
    z-index: 9999; /* Убедитесь, что он выше всех элементов */
    font-size: 16px; /* Размер шрифта */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень для лучшего визуального эффекта */
}