/* Basic styling for PriceWise plugin */
.pricewise-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: transparent;
    padding-top: 20px;
}

.pricewise-calculator {
    width: 100%;
    max-width: 800px;
    padding: 20px;
    background: transparent;
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
}

/* Make the article transparent */
article.post-14 {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: transparent;
    border-radius: 15px;
    color: white;
}

article.post-313 {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: transparent;
    border-radius: 15px;
    color: white;
}


/* Adjusting coin info box to be smaller and left-aligned */
.pricewise-coin-info {
    width: 40%;
    padding: 15px;
    background: linear-gradient(to bottom, black, #333);
    border-radius: 10px;
    color: white;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    text-align: left;
    align-self: flex-start;
}

.pricewise-form {
    width: 100%;
    padding: 20px;
    background: linear-gradient(to bottom, black, #333);
    border-radius: 10px;
    color: white;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Adjusting form fields to align label on left and select/input on right */
.pricewise-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

.pricewise-label {
    font-weight: bold;
    color: white;
    flex: 1;
    text-align: left;
    padding-right: 10px;
}

.pricewise-input {
    width: 490px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    background: white;
    color: black;
    box-sizing: border-box;
}

.pricewise-select {
    width: 490px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    background: white;
    color: black;
    box-sizing: border-box;
}

/* Dropdown styles */
.pricewise-dropdown-wrapper {
    flex: 1.65;
    position: relative;
}

.custom-select {
    position: relative;
    width: 490px;
    background: white;
    color: black;
    box-sizing: border-box;
}

.select-selected {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    color: black;
    font-size: 16px;
    line-height: 1.5;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-sizing: border-box;
}


.select-selected:after {
    content: '▼';
    font-size: 12px;
    color: #666;
    margin-left: auto;
}

.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 1000;
    max-height: 250px;
    overflow: hidden; /* ✅ Σβήνει το scroll */
    display: flex;
    flex-direction: column;
}

.select-items div {
    padding: 8px;
    cursor: pointer;
    color: black;
}

.select-items .select-items-list div:hover {
    background: #f5f5f5;
}

.select-items div.selected {
    background: #e6e6e6;
}

.select-hide {
    display: none;
}

/* Region and Area search */
.region-search, .area-search {
    width: calc(100% - 16px);
    padding: 8px;
    margin: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: sticky;
    top: 0;
    background: white;
}

.select-items-list {
    max-height: 200px;
    overflow-y: auto;
}

/* Buttons */
.pricewise-button {
    background: #444;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.pricewise-button:hover {
    background: #666;
}

/* Selected display areas for all feature types */
#selected-additions-display,
#selected-garage-display,
#selected-heating-display,
#selected-insulation-display,
#selected-storage-display,
#selected-parking-display,
#selected-location-display {
    flex: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 30px;
}

/* Tag styles for all feature types */
.selected-addition-tag,
.selected-garage-tag,
.selected-heating-tag,
.selected-insulation-tag,
.selected-storage-tag,
.selected-parking-tag,
.selected-location-tag {
    display: inline-flex;
    align-items: center;
    background: #444;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
    color: white;
}

.selected-addition-tag:hover,
.selected-garage-tag:hover,
.selected-heating-tag:hover,
.selected-insulation-tag:hover,
.selected-storage-tag:hover,
.selected-parking-tag:hover,
.selected-location-tag:hover {
    background: #666;
}

.selected-addition-tag .remove-tag,
.selected-garage-tag .remove-tag,
.selected-heating-tag .remove-tag,
.selected-insulation-tag .remove-tag,
.selected-storage-tag .remove-tag,
.selected-parking-tag .remove-tag,
.selected-location-tag .remove-tag {
    margin-left: 6px;
    font-weight: bold;
}

/* Results area */
.pricewise-estimate {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}

.pricewise-additions {
    margin-top: 10px;
    width: 100%;
}

/* Different colors for different feature types (optional) */
.selected-garage-tag {
    background: #3a5998;
}
.selected-garage-tag:hover {
    background: #4a69a8;
}

.selected-heating-tag {
    background: #c13584;
}
.selected-heating-tag:hover {
    background: #d14594;
}

.selected-insulation-tag {
    background: #4caf50;
}
.selected-insulation-tag:hover {
    background: #5cbf60;
}

.selected-storage-tag {
    background: #ff9800;
}
.selected-storage-tag:hover {
    background: #ffa820;
}

.selected-parking-tag {
    background: #795548;
}
.selected-parking-tag:hover {
    background: #8a6658;
}

.selected-location-tag {
    background: #2196F3; /* Blue color for location tags */
}
.selected-location-tag:hover {
    background: #0b7dda;
}

/* Making results more appealing */
.pricewise-estimate h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: white;
}

.pricewise-estimate p {
    margin: 5px 0;
    color: #ccc;
}

.pricewise-additions h4 {
    margin-top: 15px;
    margin-bottom: 5px;
    color: white;
}

.pricewise-additions ul {
    margin: 0;
    padding: 0 0 0 20px;
}

.pricewise-additions li {
    margin-bottom: 3px;
}

/* Toggle switch styling */
.toggle-switch {
    flex: 2;
    position: relative;
    display: inline-block;
    /*margin-bottom: 1rem;*/
}

.toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label {
    position: relative;
    display: block;
    width: 60px;
    height: 30px;
    background-color: #ccc;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.4s;
}

.toggle-label:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

.toggle-input:checked + .toggle-label {
    background-color: #4caf50;
}

.toggle-input:checked + .toggle-label:before {
    transform: translateX(30px);
}

.toggle-input:focus + .toggle-label {
    box-shadow: 0 0 1px #4caf50;
}

.pricewise-toggle-align .toggle-switch {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 3.5rem;
}

.pricewise-toggle-align .toggle-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.pricewise-not-logged {
    text-align: left !important;
    font-size: 16px;
    color: white;
    max-width: 600px;
    margin: 0 !important; /* Remove auto margin */
    align-self: flex-start; /* Align to the start of flex container */
    width: 100%; /* Take full width */
    padding-left: 0%;
}

#calculate-price {
    display: block;
    margin: 30px auto;
    padding: 1rem 2.5rem;
    background-color: #d73cbe;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 12px;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s, transform 0.2s;
}

#calculate-price:hover {
    background-color: #b9309f;
    transform: scale(1.05);
}

/* Add this class to the parent container when showing the not-logged message */
.pricewise-container-not-logged {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}


.pricewise-container, 
.pricewise-container * {
    font-family: '42dot Sans', sans-serif !important;
}

/* Στυλ για το container των φίλτρων ιστορικού */
.pricewise-history-filters {
    max-width: 400px;
    margin-bottom: 20px;
}
/* Κάνουμε το input αναζήτησης και τα αριθμητικά πεδία να δείχνουν ομοιόμορφα */
.pricewise-history-filters input[type="text"],
.pricewise-history-filters input[type="number"] {
    padding: 8px;
    font-size: 14px;
}
/* Περιορίζουμε το πλάτος των πεδίων "From" και "To" για να είναι μικρότερα */
.pricewise-history-filters input[type="number"] {
    width: 80px;
    box-sizing: border-box;
}
/* Προαιρετικά, μικρό περιθώριο δεξιά στα labels για καλύτερη απόσταση από τα inputs */
.pricewise-history-filters label {
    margin-right: 5px;
    font-weight: 600;
}


#garage-dropdown,
#heating-dropdown,
#storage-dropdown,
#parking-dropdown,
#location-dropdown,
#additions-dropdown,
#house-type-dropdown,
#insulation-dropdown,
#energy-label-dropdown {
    max-height: 250px !important;
    overflow-y: auto;
    scroll-behavior: smooth;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* Εμφάνιση scrollbar (για WebKit browsers) */
#garage-dropdown::-webkit-scrollbar,
#heating-dropdown::-webkit-scrollbar,
#storage-dropdown::-webkit-scrollbar,
#parking-dropdown::-webkit-scrollbar,
#location-dropdown::-webkit-scrollbar,
#additions-dropdown::-webkit-scrollbar,
#house-type-dropdown::-webkit-scrollbar,
#insulation-dropdown::-webkit-scrollbar,
#energy-label-dropdown::-webkit-scrollbar {
    width: 6px;
}

#garage-dropdown::-webkit-scrollbar-thumb,
#heating-dropdown::-webkit-scrollbar-thumb,
#storage-dropdown::-webkit-scrollbar-thumb,
#parking-dropdown::-webkit-scrollbar-thumb,
#location-dropdown::-webkit-scrollbar-thumb,
#additions-dropdown::-webkit-scrollbar-thumb,
#house-type-dropdown::-webkit-scrollbar-thumb,
#insulation-dropdown::-webkit-scrollbar-thumb,
#energy-label-dropdown::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 3px;
}

/* Hover effect στα options */
#garage-dropdown div:hover,
#heating-dropdown div:hover,
#storage-dropdown div:hover,
#parking-dropdown div:hover,
#location-dropdown div:hover,
#additions-dropdown div:hover,
#house-type-dropdown div:hover,
#insulation-dropdown div:hover,
#energy-label-dropdown div:hover {
    background-color: #f0f0f0;
}


.pricewise-estimate-box {
    width: 100%;
    background: linear-gradient(to bottom, black, #333);
    border-radius: 10px;
    color: white;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    text-align: left;
}

/* Κρατάει το dropdown μέσα στο wrapper του */
.pricewise-dropdown-wrapper {
    position: relative;
    overflow: visible;
}

/* Τα dropdown items δεν θα βγουν εκτός */
.select-items {
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    z-index: 1000;
}

/* Responsive fix για κινητά */
@media screen and (max-width: 768px) {
    .select-items {
        position: absolute;
        left: 0;
        right: 0;
        max-height: 200px;
        font-size: 14px;
    }

    .select-selected {
        font-size: 14px;
    }
    
    .pricewise-field {
        flex-direction: column;
        align-items: stretch;
    }

    .pricewise-label {
        width: 100% !important;
        text-align: left;
        margin-bottom: 5px;
        padding-right: 0 !important;
    }

    .pricewise-input,
    .custom-select,
    .pricewise-select,
    .region-search,
    .area-search,
    input[type="range"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .pricewise-dropdown-wrapper {
        width: 100% !important;
    }

    .select-selected,
    .select-items {
        width: 100% !important;
    }
    .pricewise-toggle-align .toggle-switch {
        margin-left : 0;
    } 
}

@media screen and (max-width: 768px) {
    .entry-content,
    .post-313 {
        padding: 0 10px;
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

    #pricewise-form,
    #estimated-price,
    #additions-list,
    .pricewise-coin-info,
    .pricewise-estimate-box {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .pricewise-form {
        padding: 15px;
    }
}