/* ================================== */
/*          CSS Variables             */
/* ================================== */
:root {
    /* Colors */
    --primary-color: #3498db;
    --primary-color-dark: #2980b9;
    --primary-color-rgb: 52, 152, 219;
    --body-bg-color: #f4f7f6;
    --container-bg-color: #ffffff;
    --text-color: #333333;
    --text-color-lighter: #dfdfdf;
    --heading-color: #2c3e50;
    --label-color: #34495e;
    --placeholder-color: #aaaaaa;

    /* Border colors */
    --border-color: #e2e8f0;
    --border-focus-color: #0026ab;

    --focus-ring-color: var(--primary-color);
    --focus-shadow-color: rgba(var(--primary-color-rgb), 0.2);
    --disabled-bg-color: #e9ecef;
    --disabled-opacity: 0.7;
    --success-bg-color: #d1e7dd;
    --success-text-color: #0f5132;
    --success-border-color: #badbcc;
    --error-bg-color: #f8d7da;
    --error-text-color: #bf111f;
    --error-text-color-rgb: 191,17,31;
    --error-border-color: #f5c2c7;
    /* Add or reuse error color for input borders */
    --error-input-border-color: var(--error-text-color, #dc3545); /* Default red if error text color not set */
    --error-input-shadow-color: rgba(var(--error-text-color-rgb, 220, 53, 69), 0.25); /* Assuming you might define --error-text-color-rgb */

    /* Typography */
    --base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --rtl-font-family: 'Tahoma', 'Vazirmatn', var(--base-font-family); /* Add preferred RTL fonts */
    --base-font-size: 1rem;
    --label-font-size: 0.95rem;
    --button-font-size: 1.1rem;

    /* Spacing & Layout */
    --container-padding: 35px 40px;
    --form-group-margin-bottom: 20px;
    --grid-gap: 20px;
    --input-padding-block: 12px;
    --input-padding-inline: 15px;
    --button-padding: 14px 20px;

    /* Borders & Shadows */
    --base-border-radius: 5px;
    --container-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --input-border: 1px solid var(--border-color);
    --focus-shadow: 0 0 0 3px var(--focus-shadow-color);

    /* Transitions */
    --transition-speed: 0.3s;
}

/* ================================== */
/*   Container & Lookup Section     */
/* ================================== */
.complaint-form-container,
.tracking-section-container {
    max-width: 800px;
    margin-inline: auto; /* Logical centering */
    margin-block: 40px; /* Logical vertical margin */
    padding: var(--container-padding);
    background-color: var(--container-bg-color);
    border-radius: var(--base-border-radius);
    box-shadow: var(--container-shadow);
    border-top: 4px solid var(--primary-color);
}

.tracking-section-container {
    margin-block-start: 60px;
    border-top: 4px solid var(--primary-color);
}

/* ================================== */
/*      Headings & Paragraphs       */
/* ================================== */
form h2,
.tracking-section-container h2 {
    color: var(--heading-color);
    text-align: center;
    margin-block-end: 10px;
    font-weight: 600;
}

form p,
.tracking-section-container p {
    text-align: center;
    color: var(--text-color);
    opacity: 0.8;
    margin-block-end: 35px;
}

.tracking-section-container p.tracking-number {
    text-align: right;
    margin-block-end: 0;
    opacity: 0.6;
    font-size: 12px;
}
.tracking-section-container p.tracking-number::before {
    content:"*";
    color: var(--error-text-color);
    margin-left:3px ;
}

form .invalid-feedback p{
    text-align: right;
    color: var(--error-text-color);
    font-size: 13px;
    margin-bottom: 0;
    margin-block-end: 0;
}

/* ================================== */
/*          Grid Layout               */
/* ================================== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--grid-gap);
}

/* ================================== */
/*          Form Group & Labels       */
/* ================================== */
.form-group,
.tracking-form .form-group {
    margin-block-end: var(--form-group-margin-bottom);
}

.form-group label,
.tracking-form label {
    display: block;
    font-weight: 600;
    margin-block-end: 8px;
    color: var(--label-color);
    font-size: var(--label-font-size);
    text-align: start; /* Logical alignment */
}

/* ================================== */
/*     Inputs, Textarea, Select       */
/* ================================== */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select,
.tracking-form input[type="text"] {
    width: 100%;
    border: var(--input-border);
    border-radius: var(--base-border-radius);
    font-size: var(--base-font-size);
    color: var(--text-color);
    background-color: var(--container-bg-color);
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: start; /* Align input text based on direction */
}

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

/* --- Select Dropdown Arrow --- */
.form-group select {
    /* Default LTR Arrow (SVG URL encoded for CSS) - Blue */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233498db'%3E%3Cpath d='M8 11.414l-4.707-4.707a1 1 0 0 1 1.414-1.414L8 8.586l3.293-3.293a1 1 0 1 1 1.414 1.414L8 11.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--input-padding-inline) center; /* LTR default */
    background-size: 1em 1em;
    /* Adjust padding based on arrow side */
    padding-right: calc(var(--input-padding-inline) + 1em + 10px); /* LTR padding */
    padding-left: var(--input-padding-inline);
}

[dir="rtl"] .form-group select {
    background-position: left var(--input-padding-inline) center; /* RTL override */
    /* Flip padding for RTL */
    padding-left: calc(var(--input-padding-inline) + 1em + 10px);
    padding-right: var(--input-padding-inline);
}


/* --- Focus State --- */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.tracking-form input:focus {
    outline: none;
    border-color: var(--focus-ring-color);
    box-shadow: var(--focus-shadow);
}
/* --- Input Validation Error Styling --- */
.form-group .is-invalid {
    border-color: var(--error-input-border-color) !important; /* Use !important cautiously, ensure specificity is right */
}

/* Keep error indication on focus */
.form-group .is-invalid:focus {
    /* Keep red border */
    border-color: var(--error-input-border-color) !important;
    /* Optional: Add red shadow instead of blue */
    box-shadow: 0 0 0 3px var(--error-input-shadow-color) !important;
}

/* --- Disabled Select --- */
.form-group select:disabled {
    background-color: var(--disabled-bg-color);
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
    background-image: none;
}
.loading {
    display: none;
    align-items: center;
    margin-top: 10px;
    color: var(--text-color-lighter);
    font-size: 14px;
}

.loading .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(10, 47, 149, 0.3);
    border-radius: 50%;
    border-top-color: var(--border-focus-color);
    animation: spinner_spin 1s linear infinite;
    margin: 5px;
}
@keyframes spinner_spin {
    to { transform: rotate(360deg); }
}
/* --- Placeholder --- */
::placeholder { color: var(--placeholder-color); opacity: 1; }
:-ms-input-placeholder { color: var(--placeholder-color); }
::-ms-input-placeholder { color: var(--placeholder-color); }

/* --- Utility Class --- */
.hidden { display: none; }

/* ================================== */
/*          Submit Button             */
/* ================================== */
.submit-btn {
    display: block;
    width: 100%;
    padding: var(--button-padding);
    background-color: var(--primary-color);
    color: var(--container-bg-color);
    border: none;
    border-radius: var(--base-border-radius);
    font-size: var(--button-font-size);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    margin-block-start: 10px;
    position: relative; /* Still useful, though not strictly for absolute positioning now */
    transition: background-color var(--transition-speed) ease,
    color var(--transition-speed) ease,
    opacity var(--transition-speed) ease, /* Add opacity for disabled state */
    transform 0.1s ease;
    /* Ensure minimum height */
    min-height: calc(var(--button-padding) * 2 + var(--button-font-size) * 1.2);
    /* Prevent text wrapping during transition */
    white-space: nowrap;

}
.submit-btn:hover {
    background-color: var(--primary-color-dark);
    color: var(--container-bg-color);
}
.submit-btn:active { transform: scale(0.99); }

/* When submitting */
.submit-btn.submitting {
    /* Use flex to align spinner and text */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em; /* Space between spinner and text */
}

/* Style the text span - mostly the same */
.button-text {
    display: inline-block; /* Allows vertical alignment */
    line-height: 1; /* Ensure consistent alignment */
}
/* Hide the ::after spinner if it existed before */
/* .submit-btn.submitting::after { display: none; } */

/* Use ::before for the spinner */
.submit-btn.submitting::before {
    content: "";
    /* Use smaller dimensions relative to font-size */
    width: 1em;
    height: 1em;
    /* No absolute positioning needed with flex */
    border: 2px solid rgba(255, 255, 255, 0.4); /* Slightly thicker relative border */
    border-top-color: var(--container-bg-color); /* Spinner color */
    border-radius: 50%;
    animation: button-spinner 0.8s linear infinite;
    box-sizing: border-box;
    /* Adjust margin if needed, but gap property is often enough */
    /* margin-right: 0.5em; */
}

/* Spinner Animation (remains the same) */
@keyframes button-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Disabled state styling */
.submit-btn:disabled {
    opacity: 0.7; /* Visually indicate disabled state */
    cursor: not-allowed;
}

/* Prevent hover/active effects interfering */
.submit-btn.submitting:hover {
    background-color: var(--primary-color);
    color: var(--container-bg-color);
}
.submit-btn.submitting:active {
    transform: none;
}


/* ================================== */
/*       Form Status Messages         */
/* ================================== */
.form-status {
    margin-block-start: var(--form-group-margin-bottom);
    padding-block: var(--input-padding-block);
    padding-inline: var(--input-padding-inline);
    border-radius: var(--base-border-radius);
    text-align: center;
    font-weight: 500;
    display: none;
    border: 1px solid transparent;
}
.form-status.success {
    background-color: var(--success-bg-color);
    color: var(--success-text-color);
    border-color: var(--success-border-color);
    display: block;
}
.form-status.error {
    background-color: var(--error-bg-color);
    color: var(--error-text-color);
    border-color: var(--error-border-color);
    display: block;
}
.form-status.info { /* For 'sending...' */
    background-color: #e2e3e5;
    color: #383d41;
    border-color: #d6d8db;
    display: block;
}
.form-status p{
    margin-block-end: 0;
}
.form-status p.tracking-number{
    margin-top: 10px;
}
.form-status .copy-number {
    position: relative;
    cursor: pointer;
    padding-right: 5px;
    padding-left: 10px;
    display: inline-block;
}
@media (max-width: 520px){
    .form-status .copy-number {
        display: block;
    }
    .form-status .copy-number::after {
        left: 20% !important;
    }
    .form-status .copy-tooltip {
        top: 70% !important;
        left: 50% !important;
    }
}
.form-status .copy-number::after {
    content: "📋"; /* Unicode clipboard icon or use FontAwesome icon class */
    position: absolute;
    left: -20px;
    top: 0;
    font-size: 1em;
    padding-left: 0px;
    color: #555;
    transition: color 0.3s;
}

.form-status .copy-number:hover::after {
    color: #000;
}

.form-status .copy-number.copied::after {
    content: "✅";
    color: green;
}

.form-status .copy-tooltip {
    position: absolute;
    top: -10%;
    left: -50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 2px 10px;
    font-size: 13px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.form-status .copy-number.show-tooltip .copy-tooltip {
    opacity: 1;
}

/* ================================== */
/*      Lookup Section Results        */
/* ================================== */
.tracking-results-content {
    margin-block-start: 30px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--base-border-radius);
    background-color: var(--body-bg-color);
}

.tracking-results-content h3 {
    color: var(--heading-color);
    margin-block-end: 15px;
    padding-block-end: 5px;
    border-block-end: 1px solid var(--border-color);
    text-align: start;
}
.result-item {
    margin-block-end: 12px;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: start;
}
.result-label {
    font-weight: 600;
    color: var(--label-color);
    margin-inline-end: 8px; /* Space between label and value */
    flex-basis: 150px;
    flex-shrink: 0;
}
.result-value {
    color: var(--text-color);
    flex-grow: 1;
    word-break: break-word;
}
.admin-response-section {
    margin-block-start: 25px;
    padding-block-start: 15px;
    border-block-start: 1px dashed var(--border-color);
}
.admin-response-section .result-value {
    background-color: #fff;
    padding: 10px;
    border-radius: var(--base-border-radius);
    border: 1px solid var(--border-color);
    white-space: pre-wrap;
    text-align: start;
}
.admin-response-section .result-label {
    margin-block-end: 5px;
    flex-basis: 100%;
}

/* Flex container for h5 and toggle button */
.tracking-results-content .header-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 20px;
}
.tracking-results-content .header-title{
    margin-bottom: 10px;
}
.tracking-results-content .header-toggle .header-title{
    margin-bottom: 0;
}
.tracking-results-content .header-desc{
    margin-top: 10px;
    margin-block-end: 0;
}

/* Toggle button styling */
.tracking-results-content .toggle-button {
    background: var(--primary-color);
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: unset;
}

.tracking-results-content .toggle-button:hover {
    /*color: var(--primary-color-dark);*/
    background: var(--primary-color-dark);
}

.tracking-results-content .toggle-button svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    transition: transform 0.3s ease;
}

.tracking-results-content .toggle-button.collapsed svg {
    transform: rotate(180deg);
}

/* Collapsible section */
.tracking-results-content .collapsible-section {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

.tracking-results-content .collapsible-section.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

.tracking-results-content .collapsible-section:not(.collapsed) {
    max-height: 1000px; /* Adjust based on content */
    opacity: 1;
    padding: 10px 0;
}

/* ================================== */
/*       Responsive Design            */
/* ================================== */
@media (max-width: 768px) {
    .complaint-form-container,
    .tracking-section-container {
        margin-inline: auto;
        margin-block: 20px;
        padding: 30px 25px;
        margin: 20px;
    }
    .form-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-block-end: 0;
    }
    form h2, .tracking-section-container h2 { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    .complaint-form-container,
    .tracking-section-container {
        margin-inline: auto;
        margin-block: 10px;
        padding: 20px 15px;
        margin: 20px;
    }
    :root {
        /* Smaller base values for mobile */
        --base-font-size-mobile: 0.95rem;
        --input-padding-block-mobile: 10px;
        --input-padding-inline-mobile: 12px;
        --button-padding-mobile: 12px 15px;
    }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea,
    .form-group select,
    .tracking-form input[type="text"] {
        font-size: var(--base-font-size-mobile);
        padding-block: var(--input-padding-block-mobile);
        padding-inline: var(--input-padding-inline-mobile);
    }
    .submit-btn {
        font-size: 1rem;
        padding: var(--button-padding-mobile);
    }
    .form-group select {
        /* LTR Mobile padding */
        padding-right: calc(var(--input-padding-inline-mobile) + 1em + 8px);
        background-position: right var(--input-padding-inline-mobile) center;
        padding-left: var(--input-padding-inline-mobile);
    }
    [dir="rtl"] .form-group select {
        /* RTL Mobile padding */
        padding-left: calc(var(--input-padding-inline-mobile) + 1em + 8px);
        background-position: left var(--input-padding-inline-mobile) center;
        padding-right: var(--input-padding-inline-mobile);
    }
    .result-label {
        flex-basis: 100%;
        margin-block-end: 3px;
        margin-inline-end: 0;
    }
    .result-item {
        flex-direction: column;
    }
    .admin-response-section .result-label { margin-block-end: 8px; }
    form h2, .tracking-section-container h2 { font-size: 1.4rem; }
    form p, .tracking-section-container p { margin-block-end: 25px; }
}