/* --- START: Form Layout Styles for Mail-in Repair --- */

/* Styles for forms using the two-column grid layout */
.repair-form {
    display: grid;
    grid-template-columns: auto 1fr; /* Label width auto, input takes remaining space */
    gap: 15px 10px; /* Row gap, Column gap */
    align-items: center; /* Vertically align items in the center */
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Target form groups within the grid layout forms */
.repair-form .form-group {
    grid-column: 1 / -1; /* Span both columns by default */
    display: contents; /* Allow children to participate in the parent grid */
}

/* Target labels within the grid layout forms */
.repair-form label {
    text-align: right;
    padding-right: 10px;
    grid-column: 1 / 2; /* Place label in the first column */
    font-weight: bold;
    color: var(--text-color);
}

/* Target inputs/textareas within the grid layout forms */
.repair-form input[type="text"],
.repair-form input[type="email"],
.repair-form input[type="tel"],
.repair-form textarea {
    grid-column: 2 / 3; /* Place input/textarea in the second column */
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: var(--body-font);
    font-size: 1em;
}

.repair-form textarea {
    resize: vertical;
}

/* Style for elements that should span the full width within the grid */
.repair-form .form-group.full-width {
    grid-column: 1 / -1; /* Make this group span all columns */
    display: block; /* Override display: contents */
}

.repair-form .form-group.full-width label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    grid-column: 1 / -1; /* Ensure label spans full width */
}

.repair-form .form-group.full-width textarea,
.repair-form .form-group.full-width input[type="submit"] {
    width: 100%;
    grid-column: 1 / -1; /* Ensure element spans full width */
}

/* Target submit buttons within the grid layout forms */
.repair-form input[type="submit"] {
    padding: 10px 20px;
    background-color: #25D366;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.repair-form input[type="submit"]:hover {
    background-color: #1e7e34;
}

address {
  padding: 10px 0px;
  display: block;
  font-style: italic;
  color: var(--primary-color);
  font-weight: bold;
}

/* Responsive adjustments for grid layout forms */
@media (max-width: 600px) {
    .repair-form {
        grid-template-columns: 1fr; /* Stack label and input */
        gap: 10px 0;
    }

    .repair-form label {
        grid-column: 1 / -1;
        text-align: left;
        margin-bottom: 5px;
    }

    .repair-form input[type="text"],
    .repair-form input[type="email"],
    .repair-form input[type="tel"],
    .repair-form textarea {
        grid-column: 1 / -1;
    }
}