/* ============================================
   ECOFACTOR - Form Components (UI Kit)
   Custom Inputs, Dropdowns, Phone fields
   ============================================ */

/* ============================================
   BASE INPUT STYLES
   ============================================ */

.input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.input__label {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-bold);
  line-height: 1.35;
  color: var(--color-gray-20);
}

.input__field {
  width: 100%;
  height: 60px;
  padding: 19px 30px;
  background-color: var(--color-white);
  border: 1px solid #B0B2B5;
  border-radius: var(--radius-lg); /* 12px */
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-medium);
  line-height: 1.6;
  color: var(--color-gray-20);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input__field::placeholder {
  color: #A6A6A6;
  font-weight: var(--font-medium);
}

/* Focus state */
.input__field:focus {
  outline: none;
  border: 1px solid var(--color-gray-35);
}

/* Error state */
.input--error .input__field {
  border: 1px solid var(--color-error);
}

.input__error {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--font-regular);
  line-height: 1.55;
  color: var(--color-error);
  margin-top: 4px;
  display: none;
}

.input--error .input__error {
  display: block;
}

/* ============================================
   PHONE INPUT WITH COUNTRY SELECTOR
   ============================================ */

.input-phone {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.input-phone__label {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-bold);
  line-height: 1.35;
  color: var(--color-gray-20);
}

.input-phone__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 30px;
  background-color: var(--color-white);
  border: 1px solid #B0B2B5;
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-phone__wrapper:focus-within {
  outline: none;
  border: 1px solid var(--color-gray-35);
}

/* Error state */
.input-phone--error .input-phone__wrapper {
  border: 1px solid var(--color-error);
}

.input-phone--error .input-phone__wrapper:focus-within {
  border: 1px solid var(--color-error);
}

/* Country selector button */
.input-phone__country {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.input-phone__flag {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Flag images */
.input-phone__flag--ua {
  background: linear-gradient(to bottom, #0057B7 50%, #FFD700 50%);
}

.input-phone__flag--pl {
  background: linear-gradient(to bottom, #FFFFFF 50%, #DC143C 50%);
}

.input-phone__flag--gb {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23b)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E") center/cover;
}

.input-phone__arrow {
  width: 10px;
  height: 6px;
  transition: transform var(--transition-fast);
}

.input-phone--open .input-phone__arrow {
  transform: rotate(180deg);
}

.input-phone__code {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-bold);
  line-height: 1.6;
  color: var(--color-gray-20);
  flex-shrink: 0;
}

.input-phone__field {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-regular);
  line-height: 1.6;
  color: var(--color-gray-20);
  outline: none;
}

.input-phone__field::placeholder {
  color: #A6A6A6;
}

/* Country dropdown */
.input-phone__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border: 1px solid #B0B2B5;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: var(--z-dropdown);
  max-height: 200px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}

/* Custom scrollbar */
.input-phone__dropdown::-webkit-scrollbar {
  width: 6px;
}

.input-phone__dropdown::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.input-phone__dropdown::-webkit-scrollbar-thumb {
  background-color: #D9D9D9;
  border-radius: 3px;
}

.input-phone__dropdown::-webkit-scrollbar-thumb:hover {
  background-color: #B0B2B5;
}

.input-phone--open .input-phone__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Also support class on wrapper */
.input-phone__wrapper.input-phone--open .input-phone__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.input-phone__wrapper.input-phone--open .input-phone__arrow {
  transform: rotate(180deg);
}

.input-phone__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.input-phone__option:hover {
  background-color: var(--color-gray-95);
}

.input-phone__option-code {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-bold);
  line-height: 1.6;
  color: var(--color-gray-20);
}

.input-phone__option-name {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-regular);
  line-height: 1.6;
  color: var(--color-gray-30);
}

.input-phone__option-separator {
  color: var(--color-gray-30);
}

/* Error message */
.input-phone__error {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--font-regular);
  line-height: 1.55;
  color: var(--color-error);
  margin-top: 4px;
  display: none;
}

.input-phone--error .input-phone__error {
  display: block;
}

/* ============================================
   CUSTOM DROPDOWN / SELECT
   ============================================ */

.input-dropdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  position: relative;
}

.input-dropdown__label {
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-bold);
  line-height: 1.35;
  color: var(--color-gray-20);
}

.input-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 60px;
  padding: 0 30px;
  background-color: var(--color-white);
  border: 1px solid #B0B2B5;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-dropdown__trigger:focus {
  outline: none;
  border: 1px solid var(--color-gray-35);
}

.input-dropdown--open .input-dropdown__trigger {
  border: 1px solid var(--color-gray-35);
}

.input-dropdown__value {
  flex: 1;
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-medium);
  line-height: 1.6;
  color: var(--color-gray-20);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-dropdown__value--placeholder {
  color: #A6A6A6;
}

.input-dropdown__arrow {
  width: 12px;
  height: 8px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.input-dropdown--open .input-dropdown__arrow {
  transform: rotate(180deg);
}

/* Dropdown options */
.input-dropdown__options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border: 1px solid #B0B2B5;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: var(--z-dropdown);
  max-height: 250px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}

/* Custom scrollbar */
.input-dropdown__options::-webkit-scrollbar {
  width: 6px;
}

.input-dropdown__options::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.input-dropdown__options::-webkit-scrollbar-thumb {
  background-color: #D9D9D9;
  border-radius: 3px;
}

.input-dropdown__options::-webkit-scrollbar-thumb:hover {
  background-color: #B0B2B5;
}

.input-dropdown--open .input-dropdown__options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Search input inside dropdown */
.input-dropdown__search {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-gray-95);
}

.input-dropdown__search-input {
  width: 100%;
  border: none;
  background: none;
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-medium);
  line-height: 1.6;
  color: var(--color-gray-20);
  outline: none;
}

.input-dropdown__search-input::placeholder {
  color: #A6A6A6;
}

/* Option items */
.input-dropdown__option {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-regular);
  line-height: 1.6;
  color: var(--color-gray-20);
  transition: background-color var(--transition-fast);
  border-bottom: 1px solid var(--color-gray-95);
}

.input-dropdown__option:last-child {
  border-bottom: none;
}

.input-dropdown__option:hover {
  background-color: var(--color-gray-95);
}

.input-dropdown__option--selected {
  background-color: rgba(58, 241, 133, 0.1);
}

/* Searchable dropdown panel */
.input-dropdown--searchable {
  position: relative;
  z-index: 1;
}

.input-dropdown--searchable.input-dropdown--open {
  z-index: var(--z-dropdown, 100);
}

.input-dropdown--searchable .input-dropdown__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border: 1px solid #B0B2B5;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: var(--z-dropdown, 100);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}

.input-dropdown--searchable.input-dropdown--open .input-dropdown__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.input-dropdown--searchable .input-dropdown__options {
  position: static;
  border: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  max-height: 250px;
  overflow-y: auto;
}

/* Search input */
.input-dropdown__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-90);
  background: var(--color-gray-98);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.input-dropdown__search-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.input-dropdown__search-input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--font-regular);
  line-height: 1.4;
  color: var(--color-gray-20);
  outline: none;
  padding: 0;
}

.input-dropdown__search-input::placeholder {
  color: var(--color-gray-50);
}

/* Not found message */
.input-dropdown__not-found {
  padding: 16px 20px;
  text-align: center;
  color: var(--color-gray-50);
  font-size: 14px;
}

/* Loading and placeholder states */
.input-dropdown__loading,
.input-dropdown__placeholder,
.input-dropdown__error {
  padding: 16px 20px;
  text-align: center;
  color: var(--color-gray-50);
  font-size: 14px;
}

.input-dropdown__error {
  color: var(--color-error, #dc3545);
}

/* ============================================
   CHECKBOX
   ============================================ */

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox__input {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  appearance: none;
  border: 1px solid var(--color-gray-30);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  opacity: 1;
}

.checkbox__input:checked {
  background-color: var(--color-white);
  border-color: var(--color-green-60);
}

.checkbox__input:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L6.5 11.5L13 5' stroke='%233A3A3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.checkbox__input:focus {
  outline: none;
  border: 1px solid var(--color-gray-35);
}

.checkbox__label {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: var(--font-regular);
  line-height: 1.6;
  color: var(--color-gray-20);
}

.checkbox__link {
  color: var(--color-green-60);
  font-weight: var(--font-regular);
  text-decoration: underline;
}

.checkbox__link:hover {
  opacity: 0.8;
}

/* Checkbox error state */
.checkbox--error .checkbox__input {
  border-color: var(--color-error);
}

.checkbox--error .checkbox__label {
  color: var(--color-error);
}


/* ============================================
   MODAL CLOSE BUTTON
   ============================================ */

button#close-modal-btn:hover {
  border-radius: 10px;
  background-color: var(--color-gray-95);
}