/* The site's one date picker (ag-calendar.js): the look of the homepage search box's Flights calendar
   (search-box.css .sb-pop-dates) for every date field. Left and right are logical so Arabic mirrors. */
:root {
  --agc-blue: #006FCF; --agc-tint: #EAF3FC; --agc-navy: #00175A; --agc-navy-2: #0B2A7A; --agc-ink: #0E1B33;
  --agc-muted: #5A687C; --agc-line: #E1E5EB; --agc-box-line: #D3D9E1; --agc-soft: #F3F5F8; --agc-danger: #B42318;
}

/* ---- the field: a button that says the date in words ---- */
.agc-field { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 46px; margin: 0; padding: 0 14px; border: 1px solid var(--agc-box-line); border-radius: 10px; background: #fff; color: var(--agc-ink); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.agc-field:hover { border-color: #B8C2CF; }
.agc-field:focus-visible { outline: 0; border-color: var(--agc-blue); box-shadow: 0 0 0 2px var(--agc-blue); }
.agc-field.is-empty { color: #6B7789; font-weight: 400; }
.agc-field.is-invalid { border-color: var(--agc-danger); box-shadow: 0 0 0 1px var(--agc-danger); }
.agc-field .agc-ico { width: 20px; height: 20px; flex: none; color: var(--agc-navy); }
.agc-field-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* inside the results bar and other compact rows */
.rs-field .agc-field { min-height: 40px; padding: 0 10px; font-size: 14px; }
.rs-extra .agc-field { min-height: 40px; }

/* ---- the popup: a see-through modal holding the panel next to the field ---- */
.agc-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--agc-ink); }
.agc-dialog::backdrop { background: rgba(0, 23, 90, .08); }
.agc-pop { position: fixed; display: flex; flex-direction: column; width: 720px; max-width: calc(100vw - 16px); background: #fff; border: 1px solid var(--agc-line); border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 23, 90, .22); font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.5; text-align: start; }
:root[dir="rtl"] .agc-pop { font-family: Cairo, Inter, system-ui, sans-serif; letter-spacing: 0; }
.agc-pop * { box-sizing: border-box; }
.agc-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 4px; }
.agc-title { flex: 1; margin: 0; font-size: 16px; font-weight: 700; }
.agc-x { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--agc-navy); cursor: pointer; }
.agc-x:hover { background: var(--agc-soft); }
.agc-x .agc-ico { width: 22px; height: 22px; }
.agc-grid { display: flex; padding: 6px 4px 0; }
.agc-month { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 18px; }
.agc-month + .agc-month { border-inline-start: 1px solid var(--agc-line); }
.agc-month-head { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.agc-month-title { margin: 0; flex: 1; text-align: center; font-size: 15.5px; font-weight: 700; color: var(--agc-ink); }
.agc-nav { width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 18px; background: transparent; color: var(--agc-navy); font-size: 22px; line-height: 1; cursor: pointer; }
.agc-nav:hover:not(:disabled) { background: var(--agc-soft); }
.agc-nav:disabled { opacity: .3; cursor: default; }
.agc-nav.is-gone { visibility: hidden; }
.agc-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 2px 0 4px; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--agc-muted); }
.agc-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 34px; }
.agc-cell { display: flex; justify-content: center; align-items: center; min-width: 0; }
.agc-cell.in-range { background: var(--agc-tint); }
.agc-cell.is-start { background: linear-gradient(90deg, transparent 50%, var(--agc-tint) 50%); }
.agc-cell.is-end { background: linear-gradient(90deg, var(--agc-tint) 50%, transparent 50%); }
:root[dir="rtl"] .agc-cell.is-start { background: linear-gradient(270deg, transparent 50%, var(--agc-tint) 50%); }
:root[dir="rtl"] .agc-cell.is-end { background: linear-gradient(270deg, var(--agc-tint) 50%, transparent 50%); }
.agc-cell.is-start.is-end { background: none; }
.agc-day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 16px; background: transparent; color: var(--agc-ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.1; cursor: pointer; }
.agc-day:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--agc-blue); }
.agc-day.is-today .agc-num { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.agc-day:disabled { color: #B3BCC8; cursor: default; text-decoration: line-through; text-decoration-color: rgba(179, 188, 200, .7); }
.agc-day[aria-pressed="true"] { background: var(--agc-blue); color: #fff; font-weight: 700; box-shadow: none; }
.agc-day[aria-pressed="true"] .agc-num { text-decoration: none; }
.agc-day:focus-visible { outline: 3px solid var(--agc-blue); outline-offset: 1px; }
.agc-note { font-size: 9.5px; font-weight: 500; color: var(--agc-muted); white-space: nowrap; }
.agc-day[aria-pressed="true"] .agc-note { color: rgba(255, 255, 255, .9); }
.agc-day:disabled .agc-note { display: none; }
.agc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 18px 14px; border-top: 1px solid var(--agc-line); margin-top: 8px; }
.agc-sum { flex: 1 1 220px; margin: 0; font-size: 14px; font-weight: 600; color: var(--agc-ink); }
.agc-msg { flex-basis: 100%; order: 3; margin: 0; font-size: 14px; font-weight: 500; color: var(--agc-danger); }
.agc-msg:empty { display: none; }
.agc-btns { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.agc-clear { min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px; background: transparent; color: var(--agc-blue); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.agc-clear:hover { background: var(--agc-tint); }
.agc-apply { min-height: 40px; padding: 0 30px; border: 0; border-radius: 20px; background: var(--agc-navy); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.agc-apply:hover:not(:disabled) { background: var(--agc-navy-2); }
.agc-apply:disabled { opacity: .5; cursor: not-allowed; }
html.agc-open { overflow: hidden; }

/* ---- phones: a sheet from the bottom, one large month ---- */
.agc-dialog.is-phone .agc-pop { inset: auto 0 0 0; width: 100%; max-width: none; max-height: calc(100% - 24px); border-radius: 18px 18px 0 0; border: 0; overflow-y: auto; overscroll-behavior: contain; }
.agc-dialog.is-phone .agc-head { padding: 12px 12px 4px 16px; }
.agc-dialog.is-phone .agc-month { padding: 0 12px; }
.agc-dialog.is-phone .agc-days { grid-auto-rows: 46px; row-gap: 2px; }
.agc-dialog.is-phone .agc-day { width: 44px; height: 44px; border-radius: 22px; font-size: 15.5px; }
.agc-dialog.is-phone .agc-foot { position: sticky; bottom: 0; background: #fff; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.agc-dialog.is-phone .agc-btns { width: 100%; }
.agc-dialog.is-phone .agc-apply { flex: 1; min-height: 48px; border-radius: 24px; font-size: 15px; }
.agc-dialog.is-phone .agc-clear { min-height: 48px; }
.agc-dialog.is-phone::backdrop { background: rgba(0, 23, 90, .35); }

@media (forced-colors: active) {
  .agc-day[aria-pressed="true"] { outline: 2px solid Highlight; }
  .agc-pop { border: 1px solid CanvasText; }
}
