/* ========== Drakakis Ferry Single – layout όπως στο screenshot ========== */

:root {
    --dfs-blue: #0095b6;
    --dfs-blue-dark: #16afd0;
    --dfs-border: #e5e7eb;
    --dfs-bg-pill: #ffffff;
    --dfs-text-main: #4b5563;   /* γκρι όπως στο screenshot */
    --dfs-text-muted: #9ca3af;
}

/* Wrapper */
.dfs-widget {
    width: 100%;
    max-width: 1180px;  /* το στενεύουμε λίγο για να μοιάζει */
    margin: 0 auto 24px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing: border-box;
}

/* Form */
.dfs-form {
    margin: 0;
}

/* Κύρια μπάρα – μία γραμμή */
.dfs-row {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid var(--dfs-border);
    border-radius: 3px;
    overflow: hidden;       /* Κόβει ό,τι περισσεύει δεξιά/αριστερά */
    box-shadow: none;
}

/* Segments */
.dfs-segment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-right: 1px solid var(--dfs-border);
    background: #ffffff;
    box-sizing: border-box;
    min-width: 0;
}

/* Χωρίς καμπύλες σε κανένα segment */
.dfs-segment:first-child,
.dfs-segment:last-child {
    border-radius: 0;
}

/* Πλάτη όπως στο screenshot: From / To / Date / Pax / Veh / Search */
/* Κατανομή πλάτους χωρίς κενά στο τέλος */
.dfs-segment-from,
.dfs-segment-to,
.dfs-segment-date {
    flex: 1 1 0;          /* μοιράζονται τον χώρο */
}

.dfs-segment-passengers,
.dfs-segment-vehicles {
    flex: 0 0 90px;       /* σταθερό, στενό κομμάτι */
    justify-content: center;
}

.dfs-segment-btn {
    flex: 0 0 150px;      /* σταθερό πλάτος για το Search */
    padding: 0 !important;
    margin: 0 !important;
    border-right: 0 !important;
    background: transparent !important;
}
/* Icons – γκρι, μικρό κυκλάκι */

.dfs-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    filter: none; /* γιατί είναι SVG */
    opacity: 0.55; /* ίδιο γκρι feeling όπως Liknoss */
}

/* Travel From */
.dfs-icon-location {
    background-image: url('https://drakakistours.com/wp-content/uploads/icons/map-marker-alt-solid.svg');
}

/* Travel To */
.dfs-icon-target {
    background-image: url('https://drakakistours.com/wp-content/uploads/icons/dot-circle-regular.svg');
}

/* Date */
.dfs-icon-calendar {
    background-image: url('https://drakakistours.com/wp-content/uploads/icons/calendar-alt-solid.svg');
}

/* Passengers */
.dfs-icon-user {
    background-image: url('https://drakakistours.com/wp-content/uploads/icons/user-solid.svg');
}

/* Vehicles */
.dfs-icon-car {
    background-image: url('https://drakakistours.com/wp-content/uploads/icons/car-solid.svg');
}

/* Πεδία – γκρι κείμενο, ίδιο ύψος με screenshots */
.dfs-field {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--dfs-text-main);
    padding: 4px 0;
    outline: none;
    min-width: 0;
}

/* Date */
.dfs-field-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--dfs-text-main);
}

/* Passengers / Vehicles – μόνο νούμερο */
.dfs-field-center {
    max-width: 32px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
}
/*
.dfs-field-center::-webkit-outer-spin-button,
.dfs-field-center::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dfs-field-center {
    -moz-appearance: textfield;
}
*/
/* Select arrow – διακριτικό */
select.dfs-field {
    /* κρύβουμε το native βελάκι */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-color: transparent;
    background-image:
        linear-gradient(45deg, transparent 50%, #9ca3af 50%),
        linear-gradient(135deg, #9ca3af 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 24px;
}

/* Clear X – στο δικό σου layout δεν εμφανίζονται, οπότε το κρατάω πολύ διακριτικό
   (αν δεν τα χρησιμοποιείς, μπορείς να μην τα βάζεις καθόλου στο HTML). */
.dfs-clear {
    border: none;
    background: transparent;
    color: var(--dfs-text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 4px;
    flex-shrink: 0;
}
.dfs-row {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid var(--dfs-border);
    border-radius: 3px;
    overflow: hidden;       /* Κόβει ό,τι περισσεύει δεξιά/αριστερά */
    box-shadow: none;
}
.dfs-segment-btn {
    flex: 0 0 12%;
    padding: 0 !important;
    margin: 0 !important;
    border-right: 0 !important;
    background: transparent !important;  /* να μην φαίνεται άσπρο πίσω από το κουμπί */
    box-sizing: border-box;
}

.dfs-submit {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;

    background: #0095b6 !important;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: none !important;
    border-radius: 0 !important;  /* ΠΑΝΤΕΛΩΣ ίσιο */
    box-shadow: none !important;
}

.dfs-submit:hover {
    background: #16afd0 !important;
}

/* -------- Responsive (βασικά) -------- */

@media (max-width: 1024px) {
    .dfs-row {
        flex-wrap: wrap;
    }

    .dfs-segment-from,
    .dfs-segment-to,
    .dfs-segment-date,
    .dfs-segment-passengers,
    .dfs-segment-vehicles {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid var(--dfs-border);
    }

    .dfs-segment-btn {
        flex: 1 1 100%;
        border-right: none;
    }

    .dfs-submit {
        border-radius: 0 0 22px 22px;
    }
}

/* --- Mobile: Double height Search button --- */
@media (max-width: 768px) {
    .dfs-segment-btn {
        height: 50px !important; /* περίπου το διπλάσιο */
    }

    .dfs-submit {
        height: 50px !important;
        font-size: 18px !important; /* πιο ωραίο στο μάτι */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}