.react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));cursor:auto}.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}

.deepleaf-widget-wrapper { 
  max-width: 480px; 
  margin: 1rem auto; 
  position: relative;
  z-index: 1;
}

.dl-card { 
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0; 
  border-radius: 16px; 
  padding: 24px; 
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.dl-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.dl-header {
  text-align: center;
  margin-bottom: 24px;
}

.dl-header h3 {
  color: #1e293b;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dl-subtitle {
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.dl-form { 
  display: grid; 
  gap: 20px; 
}

.dl-form label { 
  display: grid; 
  gap: 8px; 
}

.dl-label {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dl-label.required::after {
  content: " *";
  color: #ef4444;
  font-weight: 700;
}

.dl-input {
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  width: 100%;
  font-size: 14px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.dl-input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  transform: translateY(-1px);
}

.dl-input::placeholder {
  color: #9ca3af;
}

/* Select styling */
.dl-select-wrapper { position: relative; z-index: 5; }
.dl-select { position: relative; z-index: 6; }

/* Ensure no parent overflow hides dropdowns in some themes */
.deepleaf-widget-wrapper, .dl-card, .dl-form label { overflow: visible; }

.dl-select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  transform: translateY(-1px);
}

.dl-select:hover {
  border-color: #cbd5e1;
}

.dl-select-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.dl-select-error:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Error states for inputs */
.dl-input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.dl-input-error:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Error message styling */
.dl-error-message {
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Phone input error container */
.dl-phone-container {
  position: relative;
}

.dl-phone-error .react-international-phone-input {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.dl-phone-error .react-international-phone-input:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.dl-phone-error .react-international-phone-country-selector-button {
  border-color: #ef4444 !important;
}

/* Phone input styling for react-international-phone */
.dl-form .react-international-phone-input {
  border: 2px solid #e2e8f0 !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  outline: none !important;
  transition: all 0.3s ease !important;
  background: #ffffff !important;
}

.dl-form .react-international-phone-input:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  transform: translateY(-1px) !important;
}

.dl-form .react-international-phone-input::placeholder {
  color: #9ca3af !important;
}

/* Country selector styling */
.dl-form .react-international-phone-country-selector-button {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 8px 0 0 8px !important;
  padding: 12px 16px !important;
  min-width: 80px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.3s ease !important;
}

.dl-form .react-international-phone-country-selector-button:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  transform: translateY(-1px) !important;
}

.dl-form .react-international-phone-country-selector-button:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* Country flag styling */
.dl-form .react-international-phone-flag {
  width: 20px !important;
  height: 15px !important;
  margin-right: 4px !important;
}

/* Dropdown styling */
.dl-form .react-international-phone-country-selector-dropdown {
  background: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Country option styling */
.dl-form .react-international-phone-country-selector-option {
  padding: 8px 12px !important;
  cursor: pointer !important;
  border-bottom: 1px solid #f3f4f6 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dl-form .react-international-phone-country-selector-option:hover {
  background-color: #f9fafb !important;
}

.dl-form .react-international-phone-country-selector-option--selected {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
}

/* Search input in dropdown */
.dl-form .react-international-phone-country-selector-search-input {
  padding: 8px 12px !important;
  border: none !important;
  border-bottom: 1px solid #e5e7eb !important;
  outline: none !important;
  width: 100% !important;
  font-size: 14px !important;
}

.dl-form .react-international-phone-country-selector-search-input::placeholder {
  color: #9ca3af !important;
}

/* Submit button styling */
.dl-submit-btn {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: white;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dl-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -3px rgba(5, 150, 105, 0.3);
}

.dl-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.dl-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Loading spinner */
.dl-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dl-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Success state */
.dl-success {
  text-align: center;
  padding: 32px 16px;
  animation: fadeInUp 0.5s ease;
}

.dl-success-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  margin: 0 auto 16px;
  box-shadow: 0 8px 25px -5px rgba(16, 185, 129, 0.3);
}

.dl-success h4 {
  color: #1e293b;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.dl-success p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

/* WhatsApp button */
.dl-whatsapp-btn {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
  padding: 16px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(37, 211, 102, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dl-whatsapp-btn:hover {
  background: linear-gradient(135deg, #128c7e 0%, #075e54 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -3px rgba(37, 211, 102, 0.3);
}

.dl-whatsapp-btn:active {
  transform: translateY(0);
}

.dl-whatsapp-icon {
  font-size: 20px;
}

/* Alert styling */
.dl-alert {
  margin-top: 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  color: #92400e;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

/* Powered by section */
.dl-powered {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile responsive fixes */
@media (max-width: 480px) {
  .deepleaf-widget-wrapper { padding: 0 10px; }
}

/* React Select styling */
.dl-react-select {
  font-size: 14px;
}

.dl-react-select .dl__control {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  min-height: 44px;
  box-shadow: none;
  transition: all 0.3s ease;
  background: #ffffff;
}

.dl-react-select .dl__control:hover {
  border-color: #cbd5e1;
}

.dl-react-select .dl__control--is-focused {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  transform: translateY(-1px);
}

.dl-react-select .dl__control--menu-is-open {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.dl-react-select .dl__value-container {
  padding: 8px 12px;
}

.dl-react-select .dl__placeholder {
  color: #9ca3af;
  font-size: 14px;
}

.dl-react-select .dl__single-value {
  color: #374151;
  font-size: 14px;
}

.dl-react-select .dl__indicator-separator {
  display: none;
}

.dl-react-select .dl__dropdown-indicator {
  color: #6b7280;
  padding: 0 8px;
}

.dl-react-select .dl__dropdown-indicator:hover {
  color: #374151;
}

.dl-react-select .dl__menu {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  z-index: 1000;
}

.dl-react-select .dl__option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
}

.dl-react-select .dl__option:hover {
  background-color: #f9fafb;
}

.dl-react-select .dl__option--is-focused {
  background-color: #f3f4f6;
}

.dl-react-select .dl__option--is-selected {
  background-color: #10b981;
  color: white;
}

/* Error state for react-select */
.dl-react-select-error .dl__control {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.dl-react-select-error .dl__control--is-focused {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

