/* css/operator-reg-search-filter.css */

/* Search form styling */
.operator-reg-search-form-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px; /* More rounded corners */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* More prominent shadow */
    margin-bottom: 30px;
    font-family: 'Inter', sans-serif;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #f0f0f0; /* Light border */
}
.operator-reg-search-form h3 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    font-size: 1.8em;
    font-weight: 600;
}
.operator-reg-search-form .form-field {
    margin-bottom: 20px;
}
.operator-reg-search-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #444;
    font-size: 1em;
}
.operator-reg-search-form input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.operator-reg-search-form input[type="text"]:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2);
    outline: none;
}
.operator-reg-search-form button {
    /*background-color: #0073aa;*/
	background-color: var(--theme-palette-color-2);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    display: block;
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 2px 5px rgba(0,115,170,0.2);
}
.operator-reg-search-form button:hover {
   /* background-color: #005680;*/
	background-color: var(--theme-palette-color-1);
    transform: translateY(-0px);
}
.operator-reg-search-form button:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
#search-loading {
    text-align: center;
    margin-top: 15px;
    color: #777;
    font-style: italic;
}
#search-results {
    margin-top: 25px;
    border-top: 1px dashed #eee;
    padding-top: 25px;
}
#search-results p.error-message {
    color: #D32F2F; /* Red for errors */
    background-color: #FFEBEE; /* Light red background */
    border: 1px solid #EF9A9A;
    padding: 12px;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
}

/* New styling for search results table layout */
.operator-reg-result-container {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.operator-reg-header-info {
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #ddd;
}

.operator-reg-logo {
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.operator-reg-header-info h3 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 1.5em;
    font-weight: 700;
}

.operator-reg-header-info p {
    margin: 5px 0;
    color: #333;
    font-weight: 600;
    font-size: 0.95em;
}

.operator-reg-result-container h4 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    color: #555;
    font-size: 1.1em;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.operator-reg-result-details {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
}

.operator-reg-result-details tr {
    border-bottom: 1px dashed #eee; /* Separator between rows */
}

.operator-reg-result-details tr:last-child {
    border-bottom: none; /* No border for the last row */
}

.operator-reg-result-details th,
.operator-reg-result-details td {
    padding: 10px 15px;
    text-align: right; /* Align text to the right for RTL */
    vertical-align: top; /* Align content to the top */
}

.operator-reg-result-details th {
    width: 40%; /* Adjust as needed for label width */
    font-weight: bold;
    color: #555;
    background-color: #fcfcfc; /* Slightly different background for labels */
}

.operator-reg-result-details td {
    width: 60%; /* Take remaining width */
    color: #333;
    word-break: break-word; /* Allow long words to break */
}

.operator-reg-result-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.operator-reg-result-actions button,
.operator-btn-download-jpg,
.operator-btn-download-pdf {
    background-color: var(--theme-palette-color-2);
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 2px 5px rgba(0,115,170,0.2);
    white-space: nowrap;
}

.operator-reg-result-actions button:hover,
.operator-btn-download-jpg:hover,
.operator-btn-download-pdf:hover {
    background-color: var(--theme-palette-color-1);
    transform: translateY(-2px);
}

.operator-reg-result-actions button:active,
.operator-btn-download-jpg:active,
.operator-btn-download-pdf:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Responsive adjustments for download buttons */
@media (max-width: 480px) {
    .operator-reg-result-actions {
        flex-direction: row;
        gap: 6px;
    }

    .operator-reg-result-actions button {
        flex: 1;
        padding: 6px 10px;
        font-size: 0.8em;
    }
}
@media (max-width: 768px) {
    .operator-reg-search-form-container {
        padding: 20px;
    }
    .operator-reg-search-form h3 {
        font-size: 1.5em;
    }
    .operator-reg-search-form button {
        padding: 10px 15px;
        font-size: 1em;
    }
    .operator-reg-result-container {
        padding: 15px;
    }

    /* Stack columns on small screens */
    .operator-reg-result-details th,
    .operator-reg-result-details td {
        display: block; /* Make cells take full width of row */
        width: 100%; /* Ensure full width */
        text-align: right; /* Maintain right align for RTL */
        padding-top: 5px; /* Adjust vertical spacing */
        padding-bottom: 5px;
    }

    .operator-reg-result-details th {
        font-size: 1.1em; /* Slightly larger label for readability */
        padding-bottom: 0; /* Reduce space after label */
        background-color: transparent; /* Remove background on small screens */
    }

    .operator-reg-result-details td {
        font-size: 0.9em; /* Adjust value font size */
        padding-top: 0; /* Reduce space before value */
        padding-bottom: 10px; /* Add more space after value for separation */
    }

    .operator-reg-result-details tr {
        border-bottom: 2px solid #ddd; /* More prominent separator between field groups */
        margin-bottom: 15px; /* Space between each field group */
        display: block; /* Make row a block to respect margin */
        padding-bottom: 10px; /* Padding for the block */
    }
    .operator-reg-result-details tr:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 480px) {
    .operator-reg-search-form-container {
        margin: 0 10px; /* Add some side margin for very small screens */
    }
}