.wa-appt-form,
.wa-appt-form * {
  box-sizing: border-box;
  font-family: IBM, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
}

/* layout */
.wa-appt-form {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

/* basic controls styling (scoped) */
.wa-appt-form input[type="date"],
.wa-appt-form input[type="email"],
.wa-appt-form input[type="number"],
.wa-appt-form input[type="password"],
.wa-appt-form input[type="search"],
.wa-appt-form input[type="tel"],
.wa-appt-form input[type="text"],
.wa-appt-form input[type="url"],
.wa-appt-form select,
.wa-appt-form textarea {
  width: 100%;
  padding: 10px;
  margin: 0 0 10px 0;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
  color: inherit;
}

/* keep phone LTR digits in RTL mode */
.wa-appt-rtl input[type="tel"] {
  text-align: right !important;
  direction: ltr !important;
}

/* preserve native date picker appearance except the indicator (we will hide indicator and show custom icon) */
.wa-appt-form input:not([type="date"]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* date/time layout columns */
.datetime-row { display: flex; width: 100%; gap: 16px; align-items: center; }
.date-col { flex: 0 0 calc(50% - 8px); min-width: 200px; gap: 8px !important; display: grid; }
.time-col { flex: 0 0 calc(50% - 8px); min-width: 200px; gap: 8px !important; display: grid; }

/* responsive fallback */
@media (max-width:560px) {
  .wa-appt-form .datetime-row { flex-direction: column; }
  .wa-appt-form .date-col,
  .wa-appt-form .time-col {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ensure children inside columns fill width */
.date-col input[type="date"],
.time-col select#wa_time_slot {
  width: 100%;
  display: block;
}

/* wrapper for date to allow click-to-open & positioning */
.wa-appt-form .date-wrapper { position: relative; width: 100%; }

/* ---------- Calendar icon (custom) + hide native indicator where possible ---------- */

/* Hide webkit built-in calendar indicator & any clear/spin pseudo-elements */
.wa-appt-form input[type="date"]::-webkit-calendar-picker-indicator,
.wa-appt-form input[type="date"]::-webkit-inner-spin-button,
.wa-appt-form input[type="date"]::-webkit-clear-button {
  display: none !important;
  -webkit-appearance: none !important;
}

/* Firefox: try to use textfield appearance to reduce native controls (may vary) */
.wa-appt-form input[type="date"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  cursor: pointer;
  /* keep baseline padding (will be adjusted per direction below) */
}

/* Calendar SVG (data URI) */
:root {
  --wa-appt-calendar-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect><line x1='16' y1='2' x2='16' y2='6'></line><line x1='8' y1='2' x2='8' y2='6'></line><line x1='3' y1='10' x2='21' y2='10'></line></svg>");
  --wa-appt-clock-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'></circle><path d='M12 6v6l4 2'></path></svg>");
}

/* ---------- LTR: both icons on the LEFT ---------- */
.wa-appt-ltr .date-wrapper input[type="date"] {
  padding-left: 40px !important;                /* space for calendar icon */
  padding-right: 12px !important;
  background-image: var(--wa-appt-calendar-svg) !important;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  background-size: 20px !important;
}

/* LTR: time select - clock icon on left; keep space on right for native arrow */
.wa-appt-ltr select#wa_time_slot {
  padding-left: 40px !important;   /* space for clock */
  padding-right: 44px !important;  /* gap so native arrow isn't at the edge */
  background-image: var(--wa-appt-clock-svg) !important;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  background-size: 20px !important;
}

/* ---------- RTL: both icons on the RIGHT ---------- */
.wa-appt-rtl .date-wrapper input[type="date"] {
  padding-right: 40px !important;               /* space for calendar icon on right */
  padding-left: 12px !important;
  background-image: var(--wa-appt-calendar-svg) !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 10px) center !important;
  background-size: 20px !important;
}

/* RTL: time select - clock icon on right; keep space on left for native arrow in RTL */
.wa-appt-rtl select#wa_time_slot {
  padding-right: 40px !important;   /* space for clock (right) */
  padding-left: 44px !important;    /* gap so native arrow (now on left in RTL) isn't at the edge */
  background-image: var(--wa-appt-clock-svg) !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 10px) center !important;
  background-size: 20px !important;
}

/* small screens: slightly smaller paddings */
@media (max-width:560px) {
  .wa-appt-ltr select#wa_time_slot,
  .wa-appt-rtl select#wa_time_slot {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .wa-appt-ltr .date-wrapper input[type="date"],
  .wa-appt-rtl .date-wrapper input[type="date"] {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
}

/* other small helpers */
.wa-appt-form .wa-appt-field { display: block; }
.wa-appt-form .wa-appt-submit {
  padding: 10px 26px;
  background-color: #077A7D;
  color: #fff;
  border: 1px solid #077A7D !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: background .25s ease;
  font-size: 15px;
}
.wa-appt-form .wa-appt-submit:hover,
.wa-appt-form .wa-appt-submit:focus { background-color: #06202B; outline: none; }

.wa-appt-button-wrapper { width:100%; display:flex; justify-content:flex-start !important; }
.wa-appt-ltr { direction:ltr; text-align:left; align-items:flex-start; }
.wa-appt-rtl { direction:rtl; text-align:right; align-items:flex-start; }

/* make native date icon fully transparent (Firefox + others) */
.wa-appt-form input[type="date"]::-webkit-calendar-picker-indicator,
.wa-appt-form input[type="date"]::-moz-calendar-picker-indicator {
  opacity: 0 !important;
  color: transparent !important;
  background: transparent !important;
}

/* ====== WA Appointment — fixes for required star & RTL labels ====== */

/* make the red star smaller and vertically aligned */
.wa-required {
  color: #d00;
  font-size: 12px;       /* smaller size */
  line-height: 1;
  vertical-align: middle;
  margin-left: 6px;      /* gap for LTR labels */
  margin-right: 0;
  display: inline-block;
}

/* when form is RTL, move the gap to the other side so star sits correctly */
.wa-appt-rtl .wa-required {
  margin-left: 0;
  margin-right: 6px;
}

/* ensure labels align correctly depending on direction */
.wa-field-label {
  display: block;
  margin: 6px 0 4px;
  font-weight: 600;
  text-align: left; /* default LTR behavior */
}

/* RTL: labels should be right-aligned */
.wa-appt-rtl .wa-field-label {
  text-align: right !important;
}

/* Keep input/textarea direction sensible: Arabic text right-aligned,
   but keep phone LTR (digits) as before. */
.wa-appt-rtl .wa-appt-field {
  direction: rtl;
  text-align: right;
}

/* exception: phone inputs should remain LTR so digits display naturally */
.wa-appt-rtl input[type="tel"], .wa-appt-rtl input[type="tel"].wa-appt-field {
  direction: rtl !important;
  text-align: right !important;
}