/* =====================================================================
   ANT Travels — Custom Datepicker Skin (self-contained)
   This file REPLACES jquery-ui.css / jquery-ui.min.css for the
   datepicker widget. You do NOT need to include jquery-ui.css anymore
   for styling — only the jQuery UI *JS* (jquery-ui.min.js) is still
   needed for the widget to function. This CSS supplies 100% of the
   look on its own.

   HOW TO USE:
   1. REMOVE (or comment out) the old <link> to jquery-ui.css /
      jquery-ui.min.css from your master page / header include.
      Keep the <script src=".../jquery-ui.min.js"> as-is — that JS
      file is what makes $(...).datepicker() work; it is separate
      from the CSS theme file.
   2. Add this file instead:
        <link rel="stylesheet" href="/css/datepicker-custom.css" />
   3. Every $(...).datepicker() field site-wide (Departure Date, etc.)
      will now render with this exact look — no grey circles, no grey
      header bar, clean numbers, green outline on today, solid green
      circle on the selected date.
   ===================================================================== */

/* Reset everything jQuery UI's default theme normally sets */
.ui-datepicker,
.ui-datepicker * {
  box-sizing: border-box;
}

.ui-datepicker {
  width: 300px !important;
  padding: 16px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif !important;
}

/* ---- Header: month/year + prev/next arrows ---- */
.ui-datepicker .ui-datepicker-header {
  background: none !important;
  background-image: none !important;
  border: none !important;
  position: relative !important;
  padding: 0 0 14px 0 !important;
  text-align: center !important;
}

.ui-datepicker .ui-datepicker-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a2b1a !important;
  line-height: 30px !important;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 15px;
  font-weight: 700;
  border: none;
  background: transparent;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute !important;
  top: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border: none !important;
  background: none !important;
  background-image: none !important;
  cursor: pointer !important;
}

.ui-datepicker .ui-datepicker-prev { left: 0 !important; }
.ui-datepicker .ui-datepicker-next { right: 0 !important; }

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  background: none !important;
  background-image: none !important;
  text-indent: -9999px !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

/* Draw plain chevrons with CSS borders — no sprite/icon font needed */
.ui-datepicker .ui-datepicker-prev span::before,
.ui-datepicker .ui-datepicker-next span::before,
.ui-datepicker .ui-datepicker-prev .ui-icon::before,
.ui-datepicker .ui-datepicker-next .ui-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-top: 2px solid #33691e !important;
  border-right: 2px solid #33691e !important;
  text-indent: 0 !important;
}

.ui-datepicker .ui-datepicker-prev span::before,
.ui-datepicker .ui-datepicker-prev .ui-icon::before {
  transform: translate(-30%, -50%) rotate(-135deg) !important;
}

.ui-datepicker .ui-datepicker-next span::before,
.ui-datepicker .ui-datepicker-next .ui-icon::before {
  transform: translate(-70%, -50%) rotate(45deg) !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background: #f2f2f2 !important;
  border-radius: 50% !important;
}

/* ---- Calendar table ---- */
.ui-datepicker table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  font-size: 14px !important;
}

/* Weekday header row (Su Mo Tu We Th Fr Sa) — NO grey bar background */
.ui-datepicker thead {
  background: none !important;
}

.ui-datepicker th {
  padding: 8px 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5b7a8c !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
}

/* Date cells */
.ui-datepicker tbody tr {
  background: none !important;
}

.ui-datepicker td {
  padding: 3px !important;
  text-align: center !important;
  border: none !important;
  background: none !important;
}

/* Every day number: plain, no circle, no grey fill, by default */
.ui-datepicker td a,
.ui-datepicker td span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  text-align: center !important;
}

/* Dates outside the current month / disabled — greyed text, still no fill */
.ui-datepicker-unselectable .ui-state-default,
.ui-datepicker .ui-priority-secondary {
  color: #c9d3cf !important;
  background: none !important;
}

/* Hover — soft green tint, not grey */
.ui-datepicker td a:hover {
  background: #eef3ea !important;
  color: #1a1a1a !important;
}

/* Today — hollow green ring (not filled) unless it's also selected */
.ui-datepicker td .ui-datepicker-today a {
  background: #ffffff !important;
  border: 1.5px solid #4c7a2e !important;
  color: #1a1a1a !important;
}

/* Selected date — solid green filled circle, white text (matches reference) */
.ui-datepicker td a.ui-state-active {
  background: #4c7a2e !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ---- Footer buttons (Today / Done), if enabled ---- */
.ui-datepicker-buttonpane {
  background: none !important;
  border-top: 1px solid #eee !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
}

.ui-datepicker-buttonpane button {
  background: #4c7a2e !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  cursor: pointer !important;
}