/* =====================================================================
   Job Offer Aggregator — Frontend CSS  (boxed layout)
   All rules scoped to .joa — no theme bleed.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Design tokens ──────────────────────────────────────────────── */
.joa {
    --joa-page-bg:      #FFFFFF;
    --joa-card-bg:      #FFFFFF;
    --joa-border:       #E2E8ED;
    --joa-border-light: #EAEEF2;
    --joa-text:         #181818;
    --joa-text-sub:     #000000;
    --joa-text-muted:   #8A9299;
    --joa-blue:         #1D3DBA;
    --joa-blue-mid:     #162E9A;
    --joa-blue-light:   #EDF0FC;
    --joa-subtitle:     #8A96D5;
    --joa-pill-bg:      #F5F5F5;
    --joa-pill-text:    #000000;
    --joa-time-text:    #000000;
    --joa-dist-bg:      #E8F5E9;
    --joa-dist-text:    #2E7D32;
    --joa-toggle-bg:    #EBEBEB;
    --joa-geo-ok:       #2E7D32;
    --joa-error:        #C62828;
    --joa-radius-sm:    5px;
    --joa-radius:       8px;
    --joa-radius-lg:    10px;
    --joa-shadow-card:  0 1px 4px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.045);
    --joa-shadow-hover: 0 5px 18px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.055);
    --joa-font:         'Source Sans Pro', system-ui, -apple-system, sans-serif;
    --joa-ease:         .15s ease;
    --joa-max-w:        1440px;

    font-family: var(--joa-font);
    color: var(--joa-text);
    background: var(--joa-page-bg);
    box-sizing: border-box;
    line-height: 1.5;
}
.joa *, .joa *::before, .joa *::after { box-sizing: inherit; }
.joa a { color: inherit; }


/* ═══════════════════════════════════════════════════════════════════
   BOXED CONTAINER
═══════════════════════════════════════════════════════════════════ */
.joa-container {
    max-width: var(--joa-max-w);
    margin: 0 auto;
}



/* ═══════════════════════════════════════════════════════════════════
   SECTION WRAPPERS
═══════════════════════════════════════════════════════════════════ */
.joa-section { margin-bottom: 40px; }
.joa-section__title {
    margin-bottom: 20px !important;
	text-align:center;
}
.joa-section__subtitle {
    font-size: 12px;
    font-style: italic;
    color: var(--joa-subtitle);
    text-align: center;
    margin: 0 0 22px;
}


/* ═══════════════════════════════════════════════════════════════════
   FEATURED — 2-column horizontal cards
═══════════════════════════════════════════════════════════════════ */
.joa-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) { .joa-featured-grid { grid-template-columns: 1fr; } }

.joa-featured-card {
     background: var(--joa-card-bg); border: 1px solid var(--joa-border);
    border-radius: var(--joa-radius-lg); box-shadow: var(--joa-shadow-card);
    overflow: hidden; display: flex;
    transition: box-shadow var(--joa-ease), transform var(--joa-ease);

}
/*.joa-featured-card:hover { box-shadow: var(--joa-shadow-hover); transform: translateY(-2px); }*/

.joa-featured-card__logo {
    flex: 0 0 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFAFA;
    border-right: 1px solid var(--joa-border-light);
    padding: 12px;
}

.joa-featured-card__logo .joa-thumb__img {
    width: 64px; height: 64px; object-fit: contain; border-radius: var(--joa-radius-sm);
}
.joa-featured-card__logo .joa-thumb__initial {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: #fff;
}
.joa-featured-card__body {
    flex: 1; padding: 12px 14px 14px;
    display: flex; flex-direction: column; gap: 5px;
    position: relative; min-width: 0;
}
.joa-time-badge {
    position: absolute; top: 10px; right: 12px;
    font-size: 10px; color: var(--joa-time-text); white-space: nowrap;
}
.joa-featured-card__excerpt {
    font-size: 11px; color: var(--joa-text-sub); line-height: 1.55; margin: 4px 0 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════
   SHARED CARD ELEMENTS
═══════════════════════════════════════════════════════════════════ */
.joa-card__company {
    font-size: 14px; font-weight: 500; color: var(--joa-text-sub); margin: 0;
   text-overflow: ellipsis;
}
.joa-card__title, .joa-tile__title {
    font-size: 13px; font-weight: 700; line-height: 1.35; margin: 0; color: var(--joa-text);
}
.joa-card__title a, .joa-tile__title a {
    text-decoration: none; color: inherit; transition: color var(--joa-ease);
}
.joa-card__title a:hover, .joa-tile__title a:hover { color: var(--joa-blue); }
.joa-card__types, .joa-tile__types { display: flex; flex-wrap: wrap; gap: 6px; }
.joa-type-pill {
    display: inline-block; background: var(--joa-pill-bg); color: var(--joa-pill-text);
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; line-height: 1.6;
}
.joa-card__location {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; margin: 0;
}
.joa-card__location svg, .joa-tile__types svg { width: 15px; height: 15px; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════════════════════════════════ */
.joa-filter-bar {
    background: #F5F5F5;
    border-radius: var(--joa-radius-lg);
    margin-bottom: 28px;
    overflow: hidden;
	padding: 30px 20px;

}

/* ── Search row: full-width, both inputs in one pill-shaped row ── */
.joa-filter-form__search-row {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 0px;
}

/* Each input wrap grows to fill space */
.joa-filter-form__input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px 0 0;
    min-width: 0;
}
.joa-filter-form__input-wrap--postal {
    flex: 0 0 300px;        /* postal input has fixed width */
}

.joa-filter-form__input-icon {
    width: 15px; height: 15px; flex-shrink: 0;
    color: var(--joa-text-muted); opacity: .7;
}

.joa-filter-form__input {
    flex: 1;
    border-radius: 10px !important;
border: 1px solid #D5D5D5 !important;
background: #FFF !important;
    outline: none;
    font-family: var(--joa-font);
    font-size: 16px;
    color: var(--joa-text);
    background: transparent;
    padding: 8px 0;
    min-width: 0;
}
.joa-filter-form__input::placeholder { color: #BEBEBE; }
.joa-filter-form__input--postal { text-transform: uppercase; letter-spacing: .04em; }
.joa-filter-form__input--postal::placeholder { text-transform: none; letter-spacing: 0; }

/* Vertical divider between the two inputs */
.joa-filter-form__divider {
    width: 1px; height: 24px;
    background: var(--joa-border);
    flex-shrink: 0;
    margin: 0 4px;
}

/* Green checkmark when geocoded */
.joa-filter-form__geocoded {
    color: var(--joa-geo-ok);
    display: flex; align-items: center;
    flex-shrink: 0;
}
.joa-filter-form__geocoded svg { width: 14px; height: 14px; }

/* Rechercher button */
.joa-filter-form__submit {
    flex-shrink: 0;
    padding: 8px 12px !important;
	justify-content: center;
	align-items: center;
    background: #ffffff;
	color: #fff;
    border: 1px;
	border-radius: 10px !important;
    font-family: var(--joa-font); 
	font-size: 16px; 
	font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background var(--joa-ease), transform var(--joa-ease);
}
.joa-filter-form__submit:hover { background: var(--joa-blue-mid); }
.joa-filter-form__submit:active { transform: scale(.98); }

/* Geocode error notice */
.joa-geocode-error {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--joa-error);
    padding: 6px 16px 0;
    margin: 0;
}

/* ── Checkboxes area (below the search row) ── */
.joa-filter-form__checks-area {
    padding: 12px 16px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.joa-filter-form__check-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.joa-filter-form__group-label {
    font-size: 18px; font-weight: 700;
    color: var(--joa-text-sub);
    min-width: 58px; flex-shrink: 0;
    letter-spacing: .02em;
}
.joa-filter-form__checks { display: flex; flex-wrap: wrap; gap: 6px; }

/* Custom checkbox pill */
.joa-checkbox {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px 4px 6px;
    
    font-size: 14px; font-weight: 500; color: var(--joa-text-sub);
    cursor: pointer; user-select: none; background: transparent;
    transition: border-color var(--joa-ease), color var(--joa-ease), background var(--joa-ease);
    line-height: 1.3;
}
.joa-checkbox:hover { border-color: var(--joa-blue); color: var(--joa-blue); }
.joa-checkbox.is-checked { background: var(--joa-blue-light); border-color: var(--joa-blue); color: var(--joa-blue); }
.joa-checkbox__input { display: none; }
.joa-checkbox__box {
    width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    transition: background var(--joa-ease);
}
.joa-checkbox.is-checked .joa-checkbox__box { background: var(--joa-blue); border-color: var(--joa-blue); }
.joa-checkbox.is-checked .joa-checkbox__box::after {
    content: ''; display: block;
    width: 8px; height: 4px;
    border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════════
   RESULTS HEADER
═══════════════════════════════════════════════════════════════════ */
.joa-results-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}

/* Liste / Carte toggle */
.joa-view-toggle {
    display: inline-flex;
}
.joa-view-toggle__btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--joa-font); font-size: 18px; font-weight: 600;
    color: var(--joa-text-muted); background: transparent; border: none; cursor: pointer;
	justify-content: center;
	align-items: center;
    white-space: nowrap;
	border:none !important;
	border-radius:0px !important;
	padding: 12px 20px !important;
	border-bottom: 2px solid #ffffff !important;

}

.joa-view-toggle__btn.is-active {
    border-bottom: 2px solid var(--joa-blue) !important;
}
.joa-view-toggle__btn:hover, .joa-view-toggle__btn:focus {
    background:none;
	color: var(--joa-blue);
}
.joa-view-toggle__btn:hover:not(.is-active) { color: var(--joa-text-sub); }

.joa-result-count { font-size: 12px; color: var(--joa-text-muted); margin: 0; }
.joa-result-count strong { color: var(--joa-text); }
.joa-result-count__page,
.joa-result-count__radius { font-size: 11px; }
.joa-result-count__radius { color: var(--joa-geo-ok); }


/* ═══════════════════════════════════════════════════════════════════
   PANEL VISIBILITY
═══════════════════════════════════════════════════════════════════ */
.joa-panel.is-hidden { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   MOSAIC — 3 columns
═══════════════════════════════════════════════════════════════════ */
.joa-mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 1024px) { .joa-mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .joa-mosaic { grid-template-columns: 1fr; } }

.joa-tile {
   border-radius: 10px;
border: 1px solid #D5D5D5;
background: #FFF;
padding: 7px;
}
/*.joa-tile:hover { box-shadow: var(--joa-shadow-hover); transform: translateY(-2px); }*/

.joa-tile__thumb {
    position: relative;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--joa-border-light);
    flex-shrink: 0;
	border-radius: 7px;
	background: rgba(151, 151, 151, 0.20);
	padding: 25px 25px 25px 20px;
	justify-content: left;
	align-items: center;
	gap:30px;
	overflow: hidden;
	height:auto;
}
.joa-tile__company_logo {
    width: 100%;
    height: 100%;          /* fill the thumb area completely */
    display: flex;
    align-items: center;
    justify-content: center;
	width: 100px;
  height: 100px;
  padding: 10px;
  border-radius: 50%; 
  background: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
	
}
.joa-tile__thumb .joa-thumb__img,
.joa-tile__thumb .joa-tile__company_logo .joa-thumb__img {
    width: 100%;
    height: 100%;
		height:auto !important;
	max-width:60px !important; 
background: #FFF;
    /*object-fit: contain;*/
    /*padding: 14px;*/
}
.joa-tile__thumb .joa-thumb__initial {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #fff;
}
/* "il y a X" badge — top-right of thumb */
.joa-time-badge--tile {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255,255,255,.88); border: 1px solid var(--joa-border);
    border-radius: 10px; padding: 3px 8px;
    font-size: 10px; color: var(--joa-time-text); white-space: nowrap;
    backdrop-filter: blur(4px);
}
/* Distance badge — bottom-left of thumb */
.joa-distance-badge {
    position: absolute; bottom: 7px; left: 8px;
    background: var(--joa-dist-bg); color: var(--joa-dist-text);
    border-radius: 10px; padding: 2px 7px;
    font-size: 9px; font-weight: 600; white-space: nowrap;
}

.joa-tile__body { display: flex;
padding: 15px 20px 10px 20px;
justify-content: space-between;
align-items: center;
align-self: stretch; }

.joa-button a {
padding: 10px 20px;
border-radius: 20px;
border: 1px solid var(--joa-pill-text);
background: var(--joa-page-bg);
}
.joa-button a:hover {
padding: 10px 20px;
border-radius: 20px;
border: 1px solid var(--joa-pill-text);
background: var(--joa-pill-text);
color: var(--joa-page-bg);
}

.joa-card__location {
	padding-top:5px;
}

/* ═══════════════════════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════════════════════ */
.joa-empty { text-align: center; padding: 56px 24px; color: var(--joa-text-muted); }
.joa-empty svg { width: 54px; height: 54px; margin: 0 auto 14px; display: block; opacity: .2; }
.joa-empty p { font-size: 14px; margin: 0 0 8px; }
.joa-empty__hint { font-size: 12px; color: var(--joa-text-muted); font-style: italic; margin-bottom: 14px; }
.joa-btn-outline {
    display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
    border: 1.5px solid var(--joa-border); border-radius: var(--joa-radius);
    font-family: var(--joa-font); font-size: 12px; font-weight: 600;
    color: var(--joa-text-sub); text-decoration: none;
    transition: border-color var(--joa-ease), color var(--joa-ease);
}
.joa-btn-outline:hover { border-color: var(--joa-blue); color: var(--joa-blue); }


/* ═══════════════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════════════ */
.joa-pagination {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 4px; margin-top: 36px;
    padding-top: 20px; 
}
.joa-pagination__btn {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    border-radius: var(--joa-radius-sm); border: 1px solid var(--joa-border);
    background: var(--joa-card-bg); font-family: var(--joa-font);
    font-size: 12px; font-weight: 600; color: var(--joa-text-sub); text-decoration: none;
    transition: border-color var(--joa-ease), color var(--joa-ease);
}
.joa-pagination__btn:hover { border-color: var(--joa-blue); color: var(--joa-blue); }
.joa-pagination__num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 6px;
    border-radius: var(--joa-radius-sm); border: 1px solid var(--joa-border);
    background: var(--joa-card-bg); font-family: var(--joa-font);
    font-size: 14px; font-weight: 500; color: var(--joa-text-sub); text-decoration: none;
    transition: all var(--joa-ease);
}
.joa-pagination__num:hover { border-color: var(--joa-blue); color: var(--joa-blue); }
.joa-pagination__num.is-current { background: var(--joa-blue); border-color: var(--joa-blue); color: #fff; font-weight: 700; cursor: default; }
.joa-pagination__ellipsis { font-size: 12px; color: var(--joa-text-muted); padding: 0 3px; line-height: 34px; }


/* ═══════════════════════════════════════════════════════════════════
   MAP PANEL
═══════════════════════════════════════════════════════════════════ */
.joa-map-canvas {
    width: 100%; height: 540px;
    border-radius: var(--joa-radius-lg); overflow: hidden;
    border: 1px solid var(--joa-border); box-shadow: var(--joa-shadow-card);
    background: #e8eaed;
}
.joa-map-count { margin: 8px 0 0; font-size: 11px; color: var(--joa-text-muted); text-align: right; }
.joa-map-empty {
    display: flex; align-items: center; justify-content: center;
    height: 220px; background: #FAFAFA; border: 1px dashed var(--joa-border);
    border-radius: var(--joa-radius-lg); color: var(--joa-text-muted);
    font-size: 13px; text-align: center; padding: 24px;
}

/* Info window */
.joa-infowindow { font-family: var(--joa-font); max-width: 260px; line-height: 1.45; }
.joa-infowindow__title { font-size: 13px; font-weight: 700; color: #181818; margin: 0 0 3px; }
.joa-infowindow__company { font-size: 11px; color: #000000; margin: 0 0 6px; }
.joa-infowindow__meta { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 10px; color: #000000; margin-bottom: 8px; }
.joa-infowindow__types { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.joa-infowindow__type-pill {
    display: inline-block; background: #EDF0FC; color: #3552B8;
    font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; line-height: 1.6;
}
.joa-infowindow__link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: #1D3DBA; text-decoration: none;
    padding: 4px 10px; border: 1px solid #1D3DBA; border-radius: 4px;
    transition: background .12s;
}
.joa-infowindow__link:hover { background: #1D3DBA; color: #ffffff !important; }


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    .joa-filter-form__search-row { flex-wrap: wrap; gap: 0; padding: 10px; }
    .joa-filter-form__input-wrap,
    .joa-filter-form__input-wrap--postal { flex: 1 1 100%; padding: 6px 8px; }
    .joa-filter-form__divider { display: none; }
    .joa-filter-form__submit { width: 100%; margin: 8px 0 0; justify-content: center; }
    .joa-filter-form__check-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .joa-results-header { flex-direction: column; align-items: flex-start; }
    .joa-map-canvas { height: 360px; }
    .joa-section__title { font-size: 18px; }
}

/* ── Default company icon (SVG fallback) ─────────────────────── */
.joa-thumb__img--default {
    width: 56px;
    height: 56px;
    object-fit: contain;
    /*opacity: .35;          !* muted so it reads clearly as a placeholder *!*/
    padding: 0;            /* no extra padding — the SVG has its own whitespace */
}
/* In featured cards the logo column is narrower — keep it proportional */
.joa-featured-card__logo .joa-thumb__img--default {
    width: 48px;
    height: 48px;
}

/* ═══════════════════════════════════════════════════════════════════
   [joa_vedettes] — standalone featured shortcode
═══════════════════════════════════════════════════════════════════ */

/* Column variants: default is 2 (already defined by .joa-featured-grid).
   Add overrides for 1 and 3 columns. */
.joa-featured-grid--cols-1 {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.joa-featured-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
    .joa-featured-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
    .joa-featured-grid--cols-3 { grid-template-columns: 1fr; }
}

/* Section header block */
.joa-section__header {
    text-align: center;
    margin-bottom: 22px;
}

/* CTA link at the bottom of each featured card */
.joa-featured-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--joa-blue);
    text-decoration: none;
    transition: color var(--joa-ease);
}
.joa-featured-card__cta svg {
    width: 13px;
    height: 9px;
    flex-shrink: 0;
    transition: transform var(--joa-ease);
}
.joa-featured-card__cta:hover {
    color: var(--joa-blue-mid);
}
.joa-featured-card__cta:hover svg {
    transform: translateX(3px);
}

/* Make the card body a column so the CTA always sits at the bottom */
.joa-vedettes .joa-featured-card__body {
    display: flex;
    flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════
   [joa_recherche] — Hero search banner
═══════════════════════════════════════════════════════════════════ */

.joa-hero-search {
    background: linear-gradient(to right, #93CCF2 0%, #4364C9 100%);
    border-radius: 16px;
    padding: 44px 48px 40px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--joa-font, 'DM Sans', system-ui, sans-serif);
}

.joa-hero-search__inner {
    max-width: 800px;
}

.joa-hero-search__heading {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    color: #1D3DBA;
    margin: 0 0 32px;
    letter-spacing: -.02em;
}

.joa-hero-search__form {
    display: flex;
    align-items: center;
    gap: 20px;
	flex-direction: row;
	align-items: flex-start;
	width: 1360px;
	max-width: 100%;
}

.joa-hero-search__field {
    flex: 1;
    min-width: 240px;
    max-width: 560px;
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(202, 222, 245, 0.55);
    border: 1.5px solid rgba(255,255,255,.45);
    border-radius: 50px;
    padding: 0 20px 0 16px;
    backdrop-filter: blur(6px);
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.joa-hero-search__field:focus-within {
    background: rgba(255,255,255,.75);
    border-color: rgba(255,255,255,.8);
    box-shadow: 0 0 0 4px rgba(255,255,255,.25);
}

.joa-hero-search__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: rgba(255,255,255,.8);
    margin-right: 8px;
}

.joa-hero-search__input {
    border-radius: 30px !important;
	border: 1px solid #1D3DBA !important;
	background: rgba(255, 255, 255, 0.60);
	max-width: 400px;
	padding: 15px 30px !important;
}

.joa-hero-search__input::placeholder {
    color: #2E312F;
    font-weight: 500;
	font-size:18px;
    letter-spacing: 1.5px;
}

.joa-hero-search__btn {
    flex-shrink: 0;
    padding: 12px 30px !important;
    background: #1D3DBA !important;
    color: #fff !important;
    border-color: #1D3DBA !important;
    border-radius: 30px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 1.5px;
	height:56px;
}

.joa-hero-search__btn:hover {
    background: #ffffff !important;
	color:#1D3DBA !important;
}

.joa-hero-search__btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(29,61,186,.35);
}

@media (max-width: 560px) {
    .joa-hero-search {
        padding: 32px 24px 28px;
        border-radius: 12px;
    }
    .joa-hero-search__form {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .joa-hero-search__field {
        max-width: 100%;
    }
    .joa-hero-search__btn {
        width: 100%;
        justify-content: center;
    }
}