/* =================================================================== *
   Rental Selector — Front-end styles (FULL FILE, NORMALIZED DATE INPUT)
   - Matches preview layout (button, spacings, hover)
   - Normalizes input[type="date"] so padding/height match selects
   - Button text centered via inline-flex (theme-proof)
 * =================================================================== */

#container-wp-rental-module.container-wp-rental-module {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 16px;
  background: #ffffff00;
  border-radius: 8px;
  position: relative;
  overflow: visible;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #0A1833;
}

#container-wp-rental-module.container-wp-rental-module .cwp-rental-grid { display: contents; }

#container-wp-rental-module.container-wp-rental-module input,
#container-wp-rental-module.container-wp-rental-module select {
  height: 38px;
  min-height: 38px;
  line-height: 38px;
  box-sizing: border-box;
  padding: 10px 12px;
  margin: 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  color: #0A1833;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* --- Normalize native date input so its inner wrappers/icons don't alter padding --- */
#container-wp-rental-module.container-wp-rental-module input[type="date"] {
  padding: 10px 12px;
  line-height: 38px;
  height: 38px;
}
#container-wp-rental-module.container-wp-rental-module input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
#container-wp-rental-module.container-wp-rental-module input[type="date"]::-webkit-datetime-edit,
#container-wp-rental-module.container-wp-rental-module input[type="date"]::-webkit-datetime-edit-fields-wrapper,
#container-wp-rental-module.container-wp-rental-module input[type="date"]::-webkit-datetime-edit-text,
#container-wp-rental-module.container-wp-rental-module input[type="date"]::-webkit-datetime-edit-year-field,
#container-wp-rental-module.container-wp-rental-module input[type="date"]::-webkit-datetime-edit-month-field,
#container-wp-rental-module.container-wp-rental-module input[type="date"]::-webkit-datetime-edit-day-field {
  padding: 0;
  margin: 0;
}

@-moz-document url-prefix() {
  #container-wp-rental-module.container-wp-rental-module input[type="date"] {
    -moz-appearance: textfield;
  }
}

/* Placeholder baseline; final color is injected per-module by JS */
#container-wp-rental-module.container-wp-rental-module input::placeholder { color: #9ca3af; opacity: 1; }
#container-wp-rental-module.container-wp-rental-module input::-webkit-input-placeholder { color: #9ca3af; }
#container-wp-rental-module.container-wp-rental-module input:-ms-input-placeholder { color: #9ca3af; }
#container-wp-rental-module.container-wp-rental-module input::-ms-input-placeholder { color: #9ca3af; }

/* Center divider; margins for inputs are handled symmetrically by JS */
#container-wp-rental-module.container-wp-rental-module .separator {
  --sep-w: 1px;
  flex: 0 0 var(--sep-w);
  width: var(--sep-w);
  min-width: var(--sep-w);
  max-width: var(--sep-w);
  align-self: stretch;
  background-color: #d1d5db;
  margin: 0;
  pointer-events: none;
  box-sizing: border-box;
}

/* =========================
   Button: inline-flex centering
   ========================= */
#container-wp-rental-module.container-wp-rental-module #container-wp-submit {
  display: inline-flex;                /* center text robustly */
  align-items: center;                 /* vertical center */
  justify-content: center;             /* horizontal center */
  box-sizing: border-box;

  min-height: 40px;                    /* visual baseline */
  height: auto;                        /* grow with padding */
  line-height: 1;                      /* no artificial vertical offset */

  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  border-color: #1e40af;
  background-color: #4054B2;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  user-select: none;

  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

#container-wp-rental-module.container-wp-rental-module #container-wp-submit:hover,
#container-wp-rental-module.container-wp-rental-module #container-wp-submit:focus {
  background-color: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* Disabled look */
#container-wp-rental-module.container-wp-rental-module select:disabled,
#container-wp-rental-module.container-wp-rental-module button:disabled,
#container-wp-rental-module.container-wp-rental-module input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Wrap on narrow screens */
@media (max-width: 640px) {
  #container-wp-rental-module.container-wp-rental-module {
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 8px;
  }
  #container-wp-rental-module.container-wp-rental-module .separator { display: none; }
  #container-wp-rental-module.container-wp-rental-module input,
  #container-wp-rental-module.container-wp-rental-module select,
  #container-wp-rental-module.container-wp-rental-module #container-wp-submit {
    width: 100%;
  }
}

/* Loading state */
#container-wp-rental-module.container-wp-rental-module.loading { opacity: 0.7; pointer-events: none; }
#container-wp-rental-module.container-wp-rental-module.loading::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3; border-top: 2px solid #3b82f6; border-radius: 50%;
  animation: cwp-spin 1s linear infinite;
}
@keyframes cwp-spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }