/* bh-atelier-rdv.css */
/* Custom styles for the [bh_atelier_rdv] form */
/* Use @apply for Tailwind utilities if needed */

.bh-atelier-rdv-form-container {
  background:
    radial-gradient(96.73% 78.5% at 1.97% 21.5%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));

  @apply flex items-center justify-center p-6 lg:px-12 rounded-[24px] lg:rounded-[80px] max-w-[1344px] self-center backdrop-blur-[8px] border border-[#a8a8a8];
}

.bh-atelier-rdv-form {
  @apply flex flex-col lg:flex-row items-center justify-between gap-4 lg:gap-10 w-full;
}

.bh-atelier-rdv-form > div,
.bh-atelier-rdv-form > button {
  @apply flex justify-center items-center w-full lg:h-[52px] lg:w-auto;
}

.bh-atelier-rdv-selector-wrapper {
  @apply flex items-center justify-between relative text-base font-normal text-white tracking-tight w-full h-[24px];
  position: relative;
}

.bh-atelier-rdv-selector {
  @apply flex flex-1 w-full py-0 pl-1 pr-8;
  text-align: left;
  font-size: 16px;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.bh-atelier-rdv-arrow {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.2s ease;
  pointer-events: none;
}

.bh-atelier-rdv-selector option {
  @apply p-2;
  background-color: #1a1a1a !important;
  color: #ffffff;
  font-size: 14px;
  text-transform: capitalize;
}

.bh-atelier-rdv-selector:focus {
  border-bottom-color: #ffffff;
  outline: none;
  background-color: transparent !important;
}

.bh-atelier-rdv-selector:active {
  background-color: transparent !important;
}

.bh-atelier-rdv-arrow-down {
  transform: rotate(180deg);
}

.bh-atelier-rdv-delimitor {
  @apply w-[2px] h-[2px] lg:min-w-[2px] lg:h-[52px] bg-[rgba(255,255,255,0.2)];
}

.bh-atelier-rdv-submit {
  @apply flex items-center justify-center gap-2 px-9 py-2 w-full h-[40px] bg-[#E22415] rounded-full;
}

@media (max-width: 1024px) {
  .bh-atelier-rdv-selector-wrapper .bh-atelier-rdv-icon {
    width: 24px;
    height: 24px;
  }
}