/* Base Styling */
body {
    background: #f8f4ed;
    color: #8b6f47;
    font-family: 'Lato', sans-serif;
}

h1, h2 {
    font-family: 'Playfair Display', serif;
    color: #bfa34e;
}

/* Form Container */
form {
    width: 80%;
    margin: 1% auto;
    background: white;
    padding: 1%;
    border: 2px solid #d4af37;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(191, 163, 78, 0.2);
}

/* Form Layout Table */
table {
    width: 96%;
    border-collapse: collapse; /* Ensures borders between cells are merged */
}

td {
    vertical-align: top; /* Aligning cell content to the top */
    padding: 0.5%; /* Reduced padding for less vertical space usage */
    border: 1px solid #ccc; /* Optional: adds a subtle border for better cell definition */
}

th {
    background-color: #f4f4f4; /* Light grey background for header */
    color: #333; /* Darker text color for contrast */
    padding: 0.2%; /* Slightly more padding for headers */
    border: 1px solid #ccc; /* Matching border style with cells */
}


/* Labels */
label {
    font-size: 16px;
    font-weight: 500;
    color: #8b6f47;
    font-family: 'Lato', sans-serif;
}

/* Inputs, Selects, Textareas */
.form-input,
input,
select,
textarea {
    width: 100%;
    padding: 16px 18px;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #fafafa;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #bfa34e;
    box-shadow: 0 0 4px rgba(191, 163, 78, 0.4);
}

textarea.form-input {
    min-height: 120px;
    resize: vertical;
}

.form-select {
    width: 50%;
    font-size: 20px;
    padding: 16px 18px;
    font-family: 'Lato', sans-serif;
    background-color: #fafafa;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    appearance: none; /* Optional: remove OS styling */
}


.status-dot {
    height: 60px;  /* Increased size */
    width: 60px;   /* Increased size */
    border-radius: 50%;
    display: block;  /* Changed from inline-block to block for centering */
    margin: 10px auto 0; /* Centers the dot horizontally and adds space above */
    vertical-align: middle;
}

/* Maintain the same color classes for consistency */
.pending { background-color: #cccccc; } /* Orange */
.in-production { background-color: #FFD700; } /* Gold */
.shipped { background-color: #00BFFF; } /* Deep Sky Blue */
.delivered { background-color: #008000; } /* Green */
.cancelled { background-color: #FF0000; } /* Red */




/* Update Status Column Adjustments */
.update-status-container {
    text-align: center;
    font-size: 16px;
    padding: 4px; /* Reduced padding inside the container */
    margin-bottom: 4px; /* Reduced space below the container */
}

/* Adjusting Form Elements within Status Column */
form.update-status-form {
    margin-top: 2px; /* Reduced space above the form */
    margin-bottom: 2px; /* Reduced space below the form */
}

/* Select and Button Adjustments */
select, button.update {
    margin-top: 2px; /* Reducing top margin for tighter layout */
    margin-bottom: 2px; /* Reducing bottom margin for tighter layout */
}

/* Styling for the submit and update buttons */
button.submit, button.update {
    background: #bfa34e;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s;
}

button.submit:hover, button.update:hover {
    background: #a98c3a;
}

button.update {
    width: 80%;            /* Set width to 80% of its container */
    margin-top: 8px;       /* Add a small top margin */
    margin-left: auto;     /* Center align the button */
    margin-right: auto;    /* Center align the button */
    display: block;        /* Makes the button a block element */
    padding: 10px 20px;    /* Slightly smaller padding */
    font-size: 16px;       /* Smaller font size */
    border-radius: 20px;   /* Smaller border radius */
    background: #bfa34e;   /* Background color */
    color: white;          /* Text color */
    border: none;          /* No border */
    cursor: pointer;       /* Pointer cursor on hover */
    transition: background 0.3s; /* Smooth transition for hover effect */
}

button.update:hover {
    background: #a98c3a;  /* Darker shade on hover */
}

.acknowledgment {
  background: #eef9f1;
  padding: 1.5em;
  border: 1px solid #c2dfc9;
  margin-top: 2em;
}
.acknowledgment .label {
  font-weight: bold;
  color: #2d662d;
  margin-right: 0.5em;
}