:root {
  /* Colors */
  --sms-white: #ffffff;
  --sms-gray: #7f7f7f;
  --sms-primary: #da2128;
  --sms-border: #e1e1e1;
  --sms-error: hsl(0deg 0% 99.91% / 91%);
  /* Spacing */
  --sms-field-padding-x: 26px;
  --sms-field-padding-y: 18px;
  --sms-icon-gap: 18px;
  --sms-field-gap: 20px;
  --sms-header-gap: 30px;
  --sms-container-padding-x: 30px;
  --sms-container-padding-y: 33px;

  /* Typography */
  --sms-field-font-size: 16px;
  --sms-field-letter-spacing: -0.01em;

  /* Border Radius */
  --sms-border-radius: 10px;

  /* Transitions */
  --sms-transition: all 0.13s ease;
}

/* Form Container */
.sms-service-form {
  padding: var(--sms-container-padding-y) var(--sms-container-padding-x);
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0px 30px 40px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  border-radius: 10px;
  max-width: 610px;
  margin: 0 auto;
}

.form-section-header {
  margin-bottom: var(--sms-header-gap);
  color: var(--sms-white);
}

.form-section-header h2 {
  margin: 0;
  color: var(--sms-white);
}

/* Base Form Field Styles */
.form-field {
  position: relative;
  margin-bottom: var(--sms-field-gap);
}

.form-field input,
.form-field select {
  width: 100%;
  padding: var(--sms-field-padding-y) var(--sms-field-padding-x);
  padding-left: calc(var(--sms-field-padding-x) + 24px + var(--sms-icon-gap));
  border-radius: var(--sms-border-radius);
  font-size: var(--sms-field-font-size);
  letter-spacing: var(--sms-field-letter-spacing);
  transition: var(--sms-transition);
}

.form-field svg {
  position: absolute;
  left: var(--sms-field-padding-x);
  top: 50%;
  transform: translateY(-50%);
  transition: var(--sms-transition);
  pointer-events: none;
}

/* Zen Form Style */
.zen-form .form-field input,
.zen-form .form-field select {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--sms-white);
}

.zen-form .form-field svg {
  color: var(--sms-white);
}

/* Style for Zen form dropdowns */
.zen-form .form-field select option {
  background-color: white;
  color: #333;
  padding: 10px;
}

.zen-form .form-field input::placeholder,
.zen-form .form-field select:invalid {
  color: rgba(255, 255, 255, 0.7);
}

.zen-form .form-field input:hover,
.zen-form .form-field input:focus,
.zen-form .form-field select:hover,
.zen-form .form-field select:focus {
  border-color: var(--sms-white);
  background-color: rgba(255, 255, 255, 0.2);
}

/* Flat Form Style */
.flat-form .form-field input,
.flat-form .form-field select {
  background-color: var(--sms-white);
  border: 1px solid var(--sms-border);
  color: var(--sms-gray);
}

.flat-form .form-field svg {
  color: var(--sms-gray);
}

.flat-form .form-field input::placeholder,
.flat-form .form-field select:invalid {
  color: var(--sms-gray);
}

.flat-form .form-field input:hover,
.flat-form .form-field input:focus,
.flat-form .form-field select:hover,
.flat-form .form-field select:focus {
  border-color: var(--sms-primary);
}

/* Style for Flat form dropdowns */
.flat-form .form-field select option {
  background-color: white;
  color: #333;
  padding: 10px;
}

.flat-form .form-field input:hover::placeholder,
.flat-form .form-field input:focus::placeholder,
.flat-form .form-field select:hover:invalid,
.flat-form .form-field select:focus:invalid {
  color: var(--sms-primary);
}

.flat-form .form-field input:hover + svg,
.flat-form .form-field input:focus + svg,
.flat-form .form-field select:hover + svg,
.flat-form .form-field select:focus + svg {
  color: var(--sms-primary);
}

.form-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #eee;
}

.form-section:last-child {
  border-bottom: none;
}

.form-section h3 {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  color: #333;
}

/* Style placeholders */
.form-field input::placeholder,
.form-field select:invalid {
  color: rgba(255, 255, 255, 0.7);
}

/* Focus states */
.form-field input:focus,
.form-field select:focus {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  outline: none;
}

/* Disabled state */
.form-field select:disabled {
  background-color: rgba(255, 255, 255, 0.07);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Form Grid Layout */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--sms-field-gap);
  }
}

/* Submit Button */
.form-actions {
  /* margin-top: var(--sms-field-gap); */
}

.form-actions button {
  width: 100%;
  padding: var(--sms-field-padding-y) var(--sms-field-padding-x);
  border-radius: 100px;
  font-size: 18px;
  letter-spacing: var(--sms-field-letter-spacing);
  transition: var(--sms-transition);
  cursor: pointer;
}

/* Flatpickr customization */
.flatpickr-day.selected {
  background: #0073aa;
  border-color: #0073aa;
}

.flatpickr-day.selected:hover {
  background: #006291;
  border-color: #006291;
}

/* Select field customization */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.695 0.29116C16.1025 0.679374 16.1025 1.30879 15.695 1.69701L8.73846 8.32423C8.33096 8.71244 7.67026 8.71244 7.26276 8.32423L0.306238 1.697C-0.101265 1.30879 -0.101265 0.679373 0.306238 0.291159C0.713741 -0.0970541 1.37444 -0.097054 1.78194 0.29116L8.00061 6.21546L14.2193 0.29116C14.6268 -0.0970534 15.2875 -0.0970534 15.695 0.29116Z' fill='rgba(255, 255, 255, 0.7)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sms-field-padding-x) center;
}

/* Dropdown option styles */
.form-field select option {
  background-color: white;
  color: #333;
  padding: 10px;
}

/* Hover state for options */
.form-field select option:hover,
.form-field select option:focus,
.form-field select option:active,
.form-field select option:checked {
  background-color: #f5f5f5;
  color: #333;
}

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.form-field input.has-error {
  border-color: var(--sms-error);
}

.form-field input.has-error:focus {
  border-color: var(--sms-error);
  box-shadow: 0 0 0 1px var(--sms-error);
}

/* Address Label */
.address-label {
  border-radius: var(--sms-border-radius);
  padding: 4px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  transition: all 0.3s ease;
  background-color: rgb(255 255 255 / 25%);
  backdrop-filter: blur(10px);
  border: none;
  color: var(--sms-white);
  margin-bottom: 20px;
}

.address-label:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.address-label-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.address-label-text {
  font-size: 13px;
  color: #b6b6b6;
}

.address-label-actions {
  display: flex;
  gap: 7px;
}

.address-label-actions button {
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  padding: 1px 7px;
  font-size: 12px;
}

.address-label-actions button:hover {
  opacity: 1;
}

.address-label-actions .address-change {
  background: white !important;
  border-color: #1c4387;
  color: #1c4387;
}

.address-label-actions .address-delete {
  color: white;
  background: #1c4387 !important;
  border-color: #1c4387;
}

/* Field validation styles */
.field-tooltip {
  position: absolute;
  background: var(--sms-error);
  color: #282727;
  padding: 4px 8px;
  font-size: 11px;
  z-index: 1;
  box-shadow: 0 4px 14px rgb(0 0 0 / 16%);
  width: 100%;
  line-height: 1.2;
  text-align: center;
  right: 0;
  letter-spacing: -0.1px;
  border-radius: 10px 10px 0px 0px;
}

/* Phone input specific styles */
.form-field input[type="tel"] {
  letter-spacing: 0.5px;
}

.member-badge {
  position: absolute;
  top: -10px;
  left: -25px;
  z-index: 10;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  transition: transform 0.3s ease;
}

.member-badge:hover {
  transform: scale(1.1) rotate(5deg);
}

.member-badge img {
  width: 80px;
  height: 80px;
}