/* =============================
   Inputs (Date & Time)
============================= */
.fd-date,
.fd-time {
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.45;
  background-color: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}

.fd-date:hover,
.fd-time:hover {
  border-color: #b5b5b5;
}

.fd-date:focus,
.fd-time:focus {
  outline: none;
  border-color: #6aa8ff;
  box-shadow: 0 0 0 3px rgba(106,168,255,.25);
}

.fd-date:disabled,
.fd-time:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Placeholder */
.fd-time::placeholder { color: #999; }

/* ব্রাউজার/থিমের ডিফল্ট clock আইকন লুকান */
.fd-time::-webkit-calendar-picker-indicator { display: none !important; opacity: 0 !important; }
.fd-time { background-image: none !important; }

/* =============================
   Label + Trigger button row
============================= */
.fd-time-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 6px;
  font-weight: 600;
}

.fd-time-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.fd-time-trigger:hover { background: #f7f7f7; border-color: #b5b5b5; }
.fd-time-trigger:focus {
  outline: none;
  border-color: #6aa8ff;
  box-shadow: 0 0 0 3px rgba(106,168,255,.25);
}

/* =============================
   Flatpickr overlay (date)
============================= */
.flatpickr-calendar {
  z-index: 100000 !important;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* =============================
   Custom Analog Clock (Time)
============================= */

/* স্ক্রল লক যখন ডায়াল খোলা */
.fdclk-no-scroll { overflow: hidden; }

/* Overlay container */
#fd-clock-overlay.fdclk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  z-index: 100001;           /* Flatpickr-এর উপর */
}
#fd-clock-overlay[hidden] { display: none; }

/* Dialog box */
.fdclk-dialog {
  width: 320px;
  max-width: 92vw;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  padding: 14px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header */
.fdclk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fdclk-ap { display: inline-flex; gap: 6px; }
.fdclk-ap .ap {
  border: 1px solid #cfcfcf;
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.fdclk-ap .ap.on,
.fdclk-ap .ap[aria-pressed="true"] {
  background: #eaf2ff;
  border-color: #6aa8ff;
}

/* Clock faces */
.fdclk-face-wrap { position: relative; width: 280px; max-width: 80vw; margin: 12px auto; }
.fdclk-face {
  position: relative;
  width: 100%;
  padding-bottom: 100%;            /* square */
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff 40%, #f7f7f7 100%);
  border: 1px solid #e5e5e5;
}
.fdclk-face[hidden] { display: none; }

/* Ticks (hour/minute buttons) */
.fdclk-face .tick {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #cfcfcf;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.fdclk-face .tick:hover { background: #f7f7f7; border-color: #b5b5b5; }
.fdclk-face .tick.sel  { background: #6aa8ff; color: #fff; border-color: #6aa8ff; }

/* Footer buttons */
.fdclk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.fdclk-actions .fdclk-back,
.fdclk-actions .fdclk-cancel,
.fdclk-actions .fdclk-ok {
  border: 1px solid #cfcfcf;
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.fdclk-actions .fdclk-back { margin-right: auto; }
.fdclk-actions .fdclk-back:hover,
.fdclk-actions .fdclk-cancel:hover,
.fdclk-actions .fdclk-ok:hover {
  background: #f7f7f7;
  border-color: #b5b5b5;
}

/* =============================
   Responsive tweaks
============================= */
@media (max-width: 480px) {
  .fd-time-row { gap: 8px; }
  .fd-time-trigger { padding: 7px 10px; }
  .fdclk-dialog { width: 300px; }
  .fdclk-face .tick { width: 36px; height: 36px; font-size: 14px; }
}








/* ---- Clock icon inside the time input (orange) ---- */
/* এই ব্লকটা fd-booking.css এর একদম শেষে রাখো */
.fd-time.has-clock {
  /* আগের background-image:none !important; override করার জন্য !important ব্যবহার করছি */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ff6600' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") 
              no-repeat right 12px center !important;
  background-size: 18px !important;
  padding-right: 36px;   /* আইকনের জায়গা */
  cursor: pointer;
}


/* ---- Date field: calendar icon ---- */
.fd-date.has-calendar {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236aa8ff' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' ry='2'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='3' y1='11' x2='21' y2='11'/%3E%3C/svg%3E") 
              no-repeat right 12px center !important;
  background-size: 18px !important;
  padding-right: 36px;
  cursor: pointer;
}

/* ---- Flatpickr calendar styling ---- */
.flatpickr-calendar {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  border-radius: 12px !important;
  border: 1px solid #6aa8ff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.2) !important;
  overflow: hidden;
}

/* Header */
.flatpickr-months {
  background: linear-gradient(135deg, #6aa8ff, #4a90e2);
  color: #fff !important;
  padding: 6px 0;
}
.flatpickr-current-month input.cur-year {
  color: #fff !important;
}
.flatpickr-monthDropdown-months { background:#fff; color:#333; }

/* Weekdays */
span.flatpickr-weekday {
  color: #6aa8ff !important;
  font-weight: 600;
}

/* Days */
.flatpickr-day {
  border-radius: 6px !important;
  transition: all .2s ease;
}
.flatpickr-day:hover {
  background: #eaf2ff !important;
  border-color: #6aa8ff !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #6aa8ff !important;
  color: #fff !important;
  border-color: #6aa8ff !important;
}
.flatpickr-day.today {
  border-color: #ff6600 !important;
  color: #ff6600 !important;
  font-weight: 700;
}




/* Flatpickr altInput (visible input) এর জন্য calendar icon */
#pickup_date + .flatpickr-input {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236aa8ff' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' ry='2'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='3' y1='11' x2='21' y2='11'/%3E%3C/svg%3E") 
              no-repeat right 12px center !important;
  background-size: 18px !important;
  padding-right: 36px !important;
  cursor: pointer;
}