/* Show a small left-arrow SVG for the Prev button (mirrored) */
.ui-datepicker .ui-datepicker-prev .ui-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none'><path d='M6 1L1 6.5L6 12' stroke='%23FFFFFF' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    width: 16px;
    height: 16px;
  }
  
  /* Force a custom arrow for Next */
  .ui-datepicker .ui-datepicker-prev,
  .ui-datepicker .ui-datepicker-next {
    background: none !important;
    border: none !important;
  }
  
  /* Use a small right-arrow SVG via data URI */
  .ui-datepicker .ui-datepicker-next .ui-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none'><path d='M1 1L6 6.5L1 12' stroke='%23FFFFFF' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    width: 16px;
    height: 16px;
    /* Make sure it doesn't change on hover */
  }
  .ui-datepicker .ui-datepicker-next:hover .ui-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none'><path d='M1 1L6 6.5L1 12' stroke='%23FFFFFF' stroke-width='2'/></svg>");
  }
  
  /* Keep the same arrow on hover (no change) */
  .ui-datepicker .ui-datepicker-prev:hover .ui-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13' fill='none'><path d='M6 1L1 6.5L6 12' stroke='%23FFFFFF' stroke-width='2'/></svg>");
  }  
  
  /* Example: Navy header with white text */
  .ui-datepicker .ui-datepicker-header {
    background-color: #1a30cb !important; /* navy */
    color: #fff !important;
  }
  
  /* Make the days-of-week row also navy with white text */
  .ui-datepicker thead tr {
    background-color: #1a30cb !important;
  }
  .ui-datepicker thead th {
    color: #fff !important; /* White text so it’s visible on navy */
  }
  
  /* If you want the main calendar background lighter: */
  .ui-datepicker {
    background-color: #f8f8f8 !important;
    border: none !important;
  }
  
  /* Day links (normal state) */
  .ui-datepicker td a {
    color: #333 !important;
  }
  
  /* Hover effect on day cells */
  .ui-datepicker td a:hover {
    background: #cda117 !important; /* gold-ish hover */
    color: #fff !important;
  }
  
  /* Active/selected day cell */
  .ui-datepicker .ui-state-active {
    background: #DAA520 !important; /* gold */
    border: 1px solid #DAA520 !important;
    color: #fff !important;
  }
  
  /* (Optional) highlight today's date in a subtle gold tint */
  .ui-datepicker .ui-state-highlight {
    background: #FFF8DC !important; /* light gold background */
    color: #DAA520 !important;
  }