/* =========================
   DESIGN TOKENS (core)
========================= */

@font-face {
    font-family: 'Raleway';
    src: url('../../fonts/Raleway-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../../fonts/Raleway-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


:root {
    --font-primary: "Raleway", Arial, sans-serif !important;
    --font-secondary: Georgia, "Times New Roman", serif !important;

    --color-text: #262626;
    --color-text-light: #666;
    --color-border: #e5e5e5;
    --color-ui: #767676;
    --color-bg: #ffffff;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.15);

    --radius-sm: 4px;

    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    --container-max: 664px;
}

/* =========================
   BASE
========================= */

body, h1, h2, h3, h4 {
    font-family: 'Raleway', Arial, sans-serif !important; 
    color: var(--color-text);
}

/* =========================
   LAYOUT
========================= */

.valuation {
    padding: var(--space-lg) var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/** PAGINA DEL PROFILO DOPO AUTH */
.profile_page {
    padding: var(--space-lg) var(--space-md) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: var(--space-lg) !important;
    width: 50% !important;          /* mobile default */
    max-width: 50% !important;      /* mobile default */
    box-sizing: border-box;
    margin-left: auto !important;     /* centrare orizzontalmente */
    margin-right: auto !important;    /* centrare orizzontalmente */
}

/* Desktop: larghezza massima 50% */
@media (max-width: 992px) {
    .profile_page {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;     /* centrare orizzontalmente */
        margin-right: auto !important;
    }
}

.valuation__selector {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: var(--container-max);
    margin-bottom: var(--space-lg);
}

.valuation__divider {
    width: 100%;
    max-width: var(--container-max);
    height: 1px;
    background: var(--color-border);
    margin: var(--space-md) 0;
}

.valuation__info {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* =========================
   TYPOGRAPHY
========================= */

.valuation__overline {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

.valuation__title {
    font-family: var(--font-secondary);
    font-size: 26px !important;
    line-height: 1.3 !important;
    font-weight: 700;
}

/* =========================
   COMPONENTS
========================= */

/* Property card */
.property-card, .property-card-flat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);

    padding: var(--space-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-ui);
    border-radius: var(--radius-sm);

    box-shadow: var(--shadow-sm);
    cursor: pointer;

    transition: all 0.2s ease;
}

.property-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.property-card-flat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}


.property-card__label {
    font-size: 16px;
}

/* Icon button */
.icon-button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
}



#step-location, #step-house-details, .step-house, #step-assessment, #step-flat1, #step-flat2{ 
	margin-left:6px !important; 
	width:500px !important;
}

/* =========================
   RESPONSIVE (tablet+)
========================= */

@media (min-width: 640px) {

    .valuation__title {
        font-size: 25px !important;
    }

    .valuation__selector {
        flex-direction: row;
        justify-content: center;
    }

    .property-card, .property-card-flat {
        width: 200px;
    }
}


/****************** MOBILE ************************/
@media (max-width: 639px) {

#step-location{
	margin-left:auto !important;
	margin-right:auto !important;
	width:99% !important;
}

#step-house-details, .step-house, #step-house2{
	margin-left:auto !important; 
	margin-right:auto !important;
	max-width:400px !important;
	width: auto !important;
}


.form-control-override{
	max-width:80% !important;
	margin-left:auto !important;
	margin-right:auto !important;
	
}


#valutation, #flat_condition{
	width:200px !important;
}

.valuation__title {
        font-size: 22px !important;
}
    
    /* Input */
.input--with-icon {
    width: 100% !important;
    padding: 12px 44px 12px 12px !important; /* spazio per icona */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

        

}
/**********************************************/

#step-house-details{
	width:500px !important;
}



/* =========================
   RESPONSIVE (desktop)
========================= */

@media (min-width: 1024px) {

    .valuation {
        padding: var(--space-xl);
    }

    .valuation__title {
        font-size: 25px !important;
    }

    .property-card, .property-card-flat {
        width: 220px;
    }
}



/* Progress */
.progress {
    width: 100%;
    max-width: 664px;
    height: 6px;
    background: #eee;
    margin-bottom: 20px;
}

.progress__bar {
    height: 100%;
    width: 0%;
    background: #262626;
    transition: width 0.3s ease;
}

/* Step */
.step {
    display: none;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
}

.step.active {
    display: flex;
}

/* Input */
.input {
    width: 100% !important;
    max-width: 400px !important;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Button */
.btn {
    padding: 12px 20px;
    background: #262626;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

/* Stato ATTIVO (chiave UX) */
.property-card.active {
    background: #262626;
    color: #ffffff; /* QUI diventa bianca */
    border-color: #262626;
}

.property-card-flat.active {
    background: #262626;
    color: #ffffff; /* QUI diventa bianca */
    border-color: #262626;
}




/* Wrapper */
.input-group {
    position: relative !important;
    width: 100%;
    max-width: 400px;
}

/* Input */
.input--with-icon {
    width: 1100px !important;
    padding: 12px 44px 12px 12px !important; /* spazio per icona */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* Bottone icona */
.input-icon {
    position: absolute !important;
    right: 10px !important;
    top: 8% !important;
    transform: translateY(-50%) !important;

    background: none;
    border: none;
    cursor: pointer !important;

    color: #666;
    font-size: 16px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hover UX */
.input-icon:hover {
    color: #000;
}

/* Loading state */
.input-icon.loading {
    opacity: 0.5;
    pointer-events: none !important;
}


.autocomplete {
    position: relative;
    width: 100%;
    max-width: 400px;
}

/* Dropdown */
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: #fff;
    border: 1px solid #ddd;
    border-top: none;

    max-height: 260px;
    overflow-y: auto;

    z-index: 1000;
    display: none;
}

/* Item */
.autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: #f5f5f5 !important;
}