/* --- Wrapper för hela top-delen --- */
.boat-search-toptop {
    display: flex;
    align-items: center;            /* vertikal centrering */

    flex-wrap: wrap;                 /* brytning på små skärmar */
}

.boat-search-matchcount {
    display: flex;
    margin-bottom:0.8em;

    flex-wrap: wrap;                 /* brytning på små skärmar */
}
.boat-search-top {
    display: flex;
    justify-content: space-between; /* pageLength vänster, search+buttons höger */
    align-items: center;            /* vertikal centrering */
    gap: 1em;
    flex-wrap: wrap;                 /* brytning på små skärmar */
}

/* --- Wrapper för sökfält + knappar --- */
.search-buttons-wrapper {
    display: flex;
    justify-content: flex-end; /* allt till höger */
    align-items: center;       /* vertikal linjering */
	gap: 0.8em;
}

/* --- Sökfält --- */
#boat-search-input,
.dt-container .dt-search input {
    width: 220px;         /* lagom bredd */
    height: 2.2em;        /* matchar knapphöjd */
    padding: 0 0.5em;
    line-height: 2.2em;   /* vertikal centering */
    margin: 0;
    box-sizing: border-box;
    font-size: 14px;      /* samma som knappar */
    border-radius: 4px;   /* rundning */
}

/* Ta bort fet ram och box-shadow, behåll standard-knappstil */
#boat-buttons .dt-button,
.dt-container .dt-buttons .dt-button {
    border: 1px solid #ddd;   /* tunn kant för standardkänsla */
    background-color: transparent; /* ingen färg */
    color: inherit;           /* textfärg från dokumentet */
    box-shadow: none;         /* ingen skugga */
    border-radius: 4px;       /* lätt rundning */
    height: 2.2em;            /* matcha input */
    line-height: 2.2em;       /* vertikal centrering */
    padding: 0 0.8em;
    font-size: 14px;
}

/* Hover-effekt – subtil */
#boat-buttons .dt-button:hover,
.dt-container .dt-buttons .dt-button:hover {
    background-color: rgba(0,0,0,0.05); /* lätt grå vid hover */
    border-color: #ccc;
}

/* --- Dölj standardlabels --- */
.dt-container .dt-length label > span:first-child,
.dt-container .dt-search label > span:first-child {
    display: none;
}

/* --- Flex för inline element --- */
.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-buttons {
    display: inline-flex;
    align-items: center;
    margin: 0;
	gap: 0.4em;
}

/* --- Justering för select och input --- */
.dt-container select,
.dt-container input[type="search"] {
    margin: 0;
    height: 2.2em;  /* matchar knappar */
}