/* --- Multi-Step Logic --- */
.form-step {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s;
    max-height: 0;
    overflow: hidden;
}

.form-step.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    max-height: 100%;
}

.form-step .options-list-wrapper {
    overflow-y: auto;
}

.options-list.padding-xl:not(has(svg)) .option-content {
    padding: var(--space-md) var(--space-xl) !important;
}

/* Hide both conditional groups by default */
#residential-options,
#commercial-options {
    display: none;
}

.neighborhood-list {
    display: none;
}

.custom-map-marker-svg {
    /* Set the size of your SVG icon */
    width: auto;
    height: 32px;
}

/* --- Gallery Uploader Styles --- */

/* Hide the real file input */
#property-photos-input {
    display: none;
}

#photo-preview-grid {
    display: contents;
}

.photo-uploader-container {
    /* This creates the scrollable grid from your image */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    padding: 1rem;
    max-height: 400px;
    /* Max height before scrolling */
    overflow-y: auto;
    border-radius: 10px;
    background: #f9f9f9;
    /* Light background for the dropzone */
    border: 1px solid #eee;
}

/* Style for the "Add" button */
.photo-add-button {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 140px;
    background: #fff;
    border: 2px dashed #ddd;
    border-radius: 10px;
    cursor: pointer;

    font-size: 48px;
    color: #aaa;
    transition: all 0.2s ease;
}

.photo-add-button:hover {
    border-color: var(--border-brand, #A064D5);
    /* Use your brand color */
    color: var(--border-brand, #A064D5);
}

/* Style for each preview thumbnail */
.photo-preview-item {
    position: relative;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid var(--border-primary);
    cursor: pointer;
}

/* The image inside the thumbnail */
.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* This crops the image nicely */
}

/* The "delete" button on each thumbnail */
.photo-delete-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: auto;
    padding: 8px;
    background: var(--bg-primary);
    border: none;
    border-radius: 8px;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    /* Make sure it's on top */
}

/* Style for the "cover image" */
.photo-preview-item.is-cover {
    /* This is the purple border */
    position: relative;
    border-color: var(--border-brand-solid);
}


/* 2. Create the "Cover Image" tag using the ::after pseudo-element */
#photo-preview-grid .photo-preview-item.is-cover::after {
    content: "Cover";
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 100%);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 6px;
    z-index: 10;
    pointer-events: none;
}


/* --- Blueprint Uploader Styles --- */
/* Hide the real file input */
#blueprint-input {
    display: none;
}

.blueprint-uploader-container {
    width: 100%;
    position: relative;
}

/* The dropzone <label> */
#blueprint-dropzone {
    display: flex;
    /* This is important for the hide/show logic */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 250px;
    border: 2px dashed #ddd;
    border-radius: 10px;
    background: #f9f9f9;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2rem;
}


/* Text and icon inside the dropzone */
.dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #aaa;
}

.dropzone-icon {
    font-size: 48px;
    line-height: 1;
    color: #ccc;
}

.dropzone-text {
    font-size: 16px;
    color: #999;
}

.dropzone-text strong {
    color: var(--border-brand, #A064D5);
    /* Use brand color */
    font-weight: 600;
}

.dropzone-subtext {
    font-size: 14px;
    color: #aaa;
    margin-top: 0.5rem;
}

/* Highlight state when dragging a file over */
#blueprint-dropzone.is-dragover {
    border-color: var(--border-brand, #A064D5);
    background: #f0e6f9;
}

/* The container for the file preview */
#blueprint-preview-container {
    width: 100%;
    /* Your buttons can be in here, hidden by default */
    position: relative;
}

/* Style for the preview item (Updated for large preview) */
.blueprint-preview-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    min-height: 250px;
}

/* Preview for images */
.blueprint-preview-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Fallback icon for PDFs */
.blueprint-preview-item .file-icon.pdf-preview {
    font-size: 80px;
    width: auto;
    text-align: center;
    margin: 2rem 0 1rem 0;
    color: #D33A2C;
    /* PDF red */
}

.blueprint-preview-item .file-name-preview {
    font-weight: 600;
    color: #333;
    font-size: 16px;
    padding: 0 1rem 1rem 1rem;
    text-align: center;
}

/* --- Step 12/13: Property Details Styles --- */

.form-step[data-step="13"] .detail-input-wrapper,
.form-step[data-step="14"] .detail-input-wrapper {
    width: 500px;
}

.details-section {
    width: 100%;
    gap: var(--space-lg);
    margin-bottom: var(--space-4xl);
    /* Space between sections */
}

/* 2x2 Grid for the text inputs */
.details-input-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 equal columns */
    gap: 1rem;
}

/* Style for each white input box */
.detail-input-wrapper {
    display: flex;
    /* Use flex to control 'none' in JS */
    flex-direction: row;
    background: var(--bg-primary);
    border: 1px solid var(--fg-white);
    border-radius: 10px;
    padding: var(--space-xl) var(--space-md) var(--space-xl) var(--space-xl);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    gap: 12px;
}

.detail-input-wrapper label {
    display: flex;
    margin-bottom: 0;
}

.detail-input-wrapper label svg {
    width: 20px;
    height: 20px;
}

.detail-input-wrapper label path {
    fill: var(--fg-quarterary);
}

.detail-input-wrapper input[type="number"],
.detail-input-wrapper input[type="text"],
.detail-input-wrapper textarea {
    border: none;
    background: none;
    padding: 0;
    font-size: var(--text-m);
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-primary);
    width: 100%;
}

.detail-input-wrapper textarea {
    min-height: 150px;
    /* Set a default height */
    resize: vertical;
    /* Allow user to resize vertically */
}

.detail-input-wrapper input[type="number"]::placeholder,
.detail-input-wrapper input[type="text"]::placeholder,
.detail-input-wrapper textarea::placeholder {
    color: var(--text-placeholder);
}

.detail-input-wrapper input[type="number"]:focus,
.detail-input-wrapper input[type="number"]:active,
.detail-input-wrapper input[type="text"]:focus,
.detail-input-wrapper input[type="text"]:active,
.detail-input-wrapper textarea:focus,
.detail-input-wrapper textarea:active {
    outline: none;
    box-shadow: none;
}

/* Hide number input spinners (for aesthetics) */
.detail-input-wrapper input[type=number] {
    -moz-appearance: textfield;
}

.detail-input-wrapper input::-webkit-outer-spin-button,
.detail-input-wrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide conditional fields by default */
.conditional-detail {
    display: none;
}

/* ============================================================
   SURFACE AREA UNIT (m²) STYLES
   ============================================================ */

/* Target the wrapper that contains the surface inputs */
.detail-input-wrapper:has(input[name="property_surface_built"]),
.detail-input-wrapper:has(input[name="property_surface_plot"]),
.detail-input-wrapper:has(input[name="property_price"]) {
    position: relative;
    /* Needed for absolute positioning of suffix */
}

/* The suffix element configuration */
.detail-input-wrapper:has(input[name="property_surface_built"])::after,
.detail-input-wrapper:has(input[name="property_surface_plot"])::after,
.detail-input-wrapper:has(input[name="property_price"])::after {
    /* content: "m²"; */
    position: absolute;
    right: 6px;
    display: none;
    /* Hidden by default */
    align-items: center;
    color: var(--text-quarterary);
    font-size: var(--text-m);
    font-weight: 500;
    pointer-events: none;
    /* Clicks pass through to input */
    padding-left: 8px;
    background: transparent;
}

.detail-input-wrapper:has(input[name="property_surface_built"])::after,
.detail-input-wrapper:has(input[name="property_surface_plot"])::after {
    content: "m²";
}

.detail-input-wrapper:has(input[name="property_price"])::after {
    content: "MAD";
}

/* Show the unit when input is focused OR has a value */
.detail-input-wrapper:has(input[name="property_surface_built"]:focus)::after,
.detail-input-wrapper:has(input[name="property_surface_built"]:not(:placeholder-shown))::after,
.detail-input-wrapper:has(input[name="property_surface_plot"]:focus)::after,
.detail-input-wrapper:has(input[name="property_surface_plot"]:not(:placeholder-shown))::after,
.detail-input-wrapper:has(input[name="property_price"]:focus)::after,
.detail-input-wrapper:has(input[name="property_price"]:not(:placeholder-shown))::after {
    display: flex;
}

/* ============================================================
  Toast Container STYLES
   ============================================================ */

#form-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Toast Notification */
.form-toast {
    background: #333;
    color: #fff;
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease-out;
    max-width: 300px;
    font-family: sans-serif;
    font-size: 14px;
}

.form-toast.error {
    background: #e74c3c;
}

.form-toast.success {
    background: #2ecc71;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Input Error State */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #dc3545 !important;
}

.error-message-item {
    color: #dc3545;
    font-size: 0.85em;
    margin-top: 5px;
    font-weight: 500;
    display: flex;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Photo Upload Specific Error */
#photo-upload-error {
    color: #dc3545;
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
}