.layout-form {display:flex; flex-direction:column; gap:18px;}
button {font-family: var(--font-family); background:none; border:0; font-size:initial;}
.input-fix-btn {color:#999; border:0; position:absolute; right:0px; bottom:0px; display:flex; width:52px; 
                height:48px; border-radius: var(--radius-sm); align-items:center; justify-content:center; 
                font-size:16px; cursor:pointer;}
.input-field:has(.input-fix-btn) input {padding-right:60px;}
.input-fix-btn.copied {color:var(--lime);}

/*****/
.input-field {display:flex; flex-direction: column; gap:8px; flex:1; position:relative; align-items:stretch;
             max-width:100%;}
.input-field label {color: var(--text-dim); font-size:14px; margin-left:18px}
.input-field input, .input-field textarea, .input-field select, .input-field .input-btn {
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    font-size: 14px;
    color: var(--text);
    padding:0px 18px;
    outline: none;
    font-family: var(--font-family);
    display:inline-flex;
    flex:1;
    box-shadow: inset 5px 5px 5px var(--input-shadow);
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    line-height: 1;
    box-sizing: border-box;
    align-items:center;
    height:48px;
    min-height:48px;
    -webkit-appearance: none;
    appearance: none;
}
::placeholder {
  color: #999;
  opacity: 1; /* Убирает полупрозрачность по умолчанию (особенно в Firefox) */
}
.input-field input:focus-visible, .input-field textarea:focus-visible, 
.select.open .select-trigger {
    border: 1px solid var(--input-focus);
    box-shadow: 0 0 4px var(--input-focus);
}

.input__min input, .input__min textarea, .input__min select {
    border-radius: 10px;
    padding:10px 14px;  
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    box-shadow: inset 5px 5px 5px var(--input-shadow);
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
}
input:-webkit-autofill:focus {
    border: 1px solid var(--input-focus);
    box-shadow: 0 0 4px var(--input-focus);
}

/*--- input-group ---*/
.input-group {display:flex;flex-direction:column;gap:10px;}
.input-group-horisontal {display:flex; gap:18px 10px; flex-wrap:wrap; align-items:end;}
.input-group-horisontal > * {}
.form-group-name {border-bottom:1px solid var(--border); padding:0 0px 14px 0px; text-align:center; margin-top:10px;}
.form-group-name h3 {color:var(--text-muted); font-size:14px; margin-bottom:4px;}
.form-group-name p {color:var(--text-dim); font-size:13px;}

.input-field__hint {color: var(--text-dim); font-size:14px; margin-left:18px;}

/*--- Подсказки для ввода пароля ---*/
.auth-pwhints {display: flex;flex-wrap: wrap;gap: 4px; justify-content:center; margin:0 -10px;}
.auth-pwhints span {font-size: 12px;padding: 5px 8px;border-radius: var(--radius-sm);
    background: var(--bg);color: var(--text-dim);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/*---- Ошибки формы ----*/
.auth-pwhints span.invalid {background:#fe00005c; color:#fff;}
.auth-pwhints span.valid {background:#d6ff003b; color:#fff;}
html[data-theme="light"] .auth-pwhints span.invalid {color: #c50000; background:#fe00001c;}
html[data-theme="light"] .auth-pwhints span.valid {color: #5e9100; background:#c3e90052;}

.form-alert {padding: 10px 10px; text-align:center; 
             font-size:13px; border-radius: var(--radius-sm);}
.alert-danger {color: #fff; background:#fe00005c;}
.alert-success { color: #fff; background:#d6ff003b;}
html[data-theme="light"] .alert-danger {color: #c50000; background:#fe00001c;}
html[data-theme="light"] .alert-success { color: #5e9100; background:#c3e90052;}

/*----- Form-text -----*/
.form-text-title {font-size:20px; margin-bottom:-2px;}
.form-text-content {font-size:15px; color:var(--text-muted); line-height:1.4; text-wrap:balance;}
.form-text-label {font-size:12px; color:var(--text-muted); line-height:1.4; text-wrap:balance; text-transform:uppercase;}
.form-text, .form-text-line, .form-btn-link {font-size:14px; color:var(--text-dim); text-wrap:balance;}
.form-text-mini {font-size:13px; color:var(--text-dim); text-wrap:balance;}
.form-text-mini a {color:var(--text-muted);}
.form-text-line {text-align:center; display:flex; align-items:center; gap:10px;}
.form-text-line > * {flex:1;}
.form-text-line:before, .form-text-line:after {content:""; flex:1; margin-top:2px;;
                                              background:var(--border); height:1px;}
.form-btn-link {color:var(--text-muted); cursor:pointer; transition:all 0.3s;}
.form-line {background:var(--border); height:1px;}
/*----- Buttons -----*/
.btn {
     padding: 0px 24px;
     background: var(--lime);
     color: #000000;
     border: none;
     text-decoration:none;
     font-size:15px;
     cursor:pointer;
     transition:all 0.3s;
     display:inline-flex;
     justify-content:center;
     align-items:center;
     box-sizing: border-box;
     border-radius:var(--radius-md);
     height:48px;
     gap:8px;
     line-height:1;
     white-space: nowrap;
     }

.btn:disabled {opacity: 0.6;cursor: default;}  
.btn.outline {background:var(--bg-soft-2); border: 1px solid var(--border-input); color: var(--text);}

.btn.big {padding: 0px 32px;font-size: 16px; height:56px; border-radius:var(--radius-lg);}
.btn.min {padding: 0px 16px;font-size: 14px; height:40px; border-radius:var(--radius-sm); line-height:0.9;}
html[data-theme="light"] .btn.outline {border: 1px solid #00000040; background:#cccccc5c;}
.btn.red {background:var(--danger); border-color:var(--danger); color:#fff;}
.btn svg {height:26px; width:26px;}
.btn i {font-weight:initial;}
.input-btn {gap:8px; cursor:pointer;}
.input-btn span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:var(--text-muted);}
.input-btn i {font-size:15px; color:var(--text-dim)}

.btn-group {display:flex; flex-wrap:wrap; gap:10px;}
.btn-group > .btn.full {flex:1;}
.btn-group.right-group {justify-content:right;}
.btn-group.center-group {justify-content:center;}

/* icon social form */
.social-block-auth {display:flex; justify-content:center; gap:20px; margin-top:6px;}
.social-block-auth a {display:flex; align-items:center; justify-content:center;
                     width:40px; height:40px; text-decoration:none;}
.social-block-auth a img {height:30px;}
html[data-theme="light"] .social-block-auth img[src$="apple-white.svg"] { content: url('/img/social/apple.svg'); }
html[data-theme="light"] .social-block-auth img[src$="x-white.svg"]     { content: url('/img/social/x.svg'); }

/* полная/короткая подпись на кнопках */
.pill-short { display: none; }

/* ============ SELECT (универсальный) ============ */
.select {position:relative; flex:1; min-width:200px;}

/* --- триггер-кнопка (вид 1, 2) --- */
.select-trigger {
  width:100%;
  height: 48px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px 0 18px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  box-shadow: inset 5px 5px 5px var(--input-shadow);
  color: var(--text);
  font-family: var(--font-family);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
button.select-trigger:focus-visible { outline: none; }
.select.open .select-trigger,
.select-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.select-value .fi {margin-right:6px;}
.select-arrow { flex-shrink: 0; color: var(--text-dim); font-size: 12px; transition: transform .2s ease; }
.select.open .select-arrow { transform: rotate(180deg); }

.select[data-add] .input-field {position:relative;}
.select[data-add] .select-arrow {position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:12px; 
                                 color:var(--text-dim); transition:all 0.2s;
                                background:var(--bg-input); display:flex; align-items:center; justify-content:center;
                                width:36px; height:36px; border-radius:50%; cursor:pointer;}
.select[data-add].open .select-arrow {transform:translateY(-50%) rotate(180deg);}

/* --- панель --- */
.select-panel {position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 2;
  display: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 6px var(--box-shadow);
  overflow:hidden;
  padding:8px 4px 8px 8px;
}
html[data-theme="light"] .select-panel  {background: var(--bg-card);}
.select.open .select-panel { display: block; }

/* --- поиск внутри селект --- */
.select-search {
  display:flex; position:relative; margin:0 4px 10px 0;
}
.select-search i { color: var(--text-dim); font-size: 16px; position:absolute; top:17px; left:14px;}
.select-search input {
  background: none; outline: none;
  color: var(--text); font-family: var(--font-family); font-size: 14px; border:1px solid #99999942;
  flex:1; padding-left:46px;  height:48px; min-height:48px;
    -webkit-appearance: none;
    appearance: none; background:#242424; box-sizing:border-box;
}
.select-search input::placeholder { color: var(--text-dim); }

.select-list {
  max-height: 270px;
  overflow-y: auto;
  scroll-behavior: smooth; 
  padding-right:4px;
}
.select-list::-webkit-scrollbar { width: 14px;  }
.select-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }  /* стрелки */
.select-list::-webkit-scrollbar-track  { background: #86868600; }
.select-list::-webkit-scrollbar-thumb  { background: #cccccc85; border-radius: 30px;
                                         border:5px solid var(--bg);}
html[data-theme="light"] .select-list::-webkit-scrollbar-thumb  {
  border:5px solid var(--bg-card); 
}

/* --- пункт --- */
.select-option {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 14px 16px;
  background: none; border-bottom: 0px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-family); font-size: 14px;
  text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
  position:relative;
}
.select-option.active { background: var(--hover-1);}
.select-option.is-selected { color: var(--lime); background: #36363685; }
.select-option.is-selected .select-option-name { color: var(--lime); }
.select-option.is-selected.active { background: var(--hover-1); }
html[data-theme="light"] .select-option.is-selected { color: var(--text); font-weight:500; 
                                                     background:#89898926;}
html[data-theme="light"] .select-option.active {background:#8989891f !important;}
.select-option.is-selected::after {
  content: "\f00c";                    
  font-family: var(--font-awesome);
  margin-left: auto;                   
  font-size: 15px;
}
.select-option-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text);}
.s-o-phone {color:var(--text-muted); }
.select .fi {border-radius:2px;}
.s-o-phone > .fi {margin-right:10px;}
.select-phone .select-option.is-selected span {color:var(--text);}
.select-option-txt { color: var(--text); display:flex; gap:8px;}
.sel-val-num {display:flex; gap:8px; overflow:visible;}
.select-option-txt b, .sel-val-num b {font-size: 12px; color: var(--text-dim); background:#d6ff004d;
                      display:flex; width:19px; height:19px; border-radius:50%; color:var(--lime);
                      align-items:center; justify-content:center; margin:-2px 0; position:relative; top:2px;}
.select-option[hidden] { display: none !important; }
/* --- «добавить новое» --- */
.select-add { color: var(--lime); margin:16px 0px 0 0px; width:calc(100% - 4px); font-weight: 400;}
html[data-theme="light"] .select-add { color: var(--text);}
.select-add:before {content:""; height:1px; background:var(--border); flex-basis:100%;
                   margin:0px 0 0 0; position:absolute; top:-8px; left:-8px; right:-8px;}
.select-add i {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--lime); color: #000;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0;
}
.select-add strong {font-weight: 600; }

/* --- пусто --- */
.select-empty, .select-hint {
  padding: 14px 16px 14px 16px; font-size: 14px; font-style: italic;
  color: var(--text-dim); 
}
.select-empty[hidden], .select-hint[hidden] { display: none !important; }

/* --- CheckBox --- */
.modal-checkbox {display: flex;align-items: flex-start;gap: 10px;cursor: pointer;user-select: none;
                background:var(--bg);border-radius: var(--radius-md);  border: 1px solid var(--border);
                padding:14px 14px; margin:0 0px 0 -4px;;}
.modal-checkbox input {appearance: none;-webkit-appearance: none;flex-shrink: 0;
    width: 20px; height: 20px; margin: 0; border: 1px solid #cccccc54;
    border-radius: 4px; background: var(--bg-card); cursor: pointer; position: relative;
    transition: background-color .15s, border-color .15s;
}
html[data-theme="light"] .modal-checkbox input {border: 1px solid #a9a9a9;}

.modal-checkbox input:checked {background: var(--lime);border-color: var(--lime);}
.modal-checkbox.red input:checked {background: var(--danger);border-color: var(--danger);}

.modal-checkbox input:checked::after {content: "";position: absolute;
    left: 5px; top: 2px;width: 7px; height: 10px;border: solid #111;
    border-width: 0 2px 2px 0;transform: rotate(45deg);}
.modal-checkbox.red input:checked::after {content: "";border: solid #fff;
    border-width: 0 2px 2px 0;transform: rotate(45deg);}

.modal-checkbox input:focus-visible {outline: 2px solid var(--lime);outline-offset: 2px;}
.modal-checkbox span { line-height: 1.4; font-size:14px; color:var(--text);}

/* кастомный скролл у textarea */
.input-field textarea {height:auto; padding:16px 20px; resize: none; line-height:1.4;}
textarea::-webkit-scrollbar { width: 20px;  }
textarea::-webkit-scrollbar-button { display: none; width: 0; height: 0; }  /* стрелки */
textarea::-webkit-scrollbar-track  { background: #86868600; }
textarea::-webkit-scrollbar-thumb  { background: #cccccca1; border-radius: 30px;
                                         border:8px solid var(--bg-input);}
html[data-theme="light"] textarea::-webkit-scrollbar-thumb  { background: #a8a8a8a1; 
                                         border:8px solid #f9f9f9;}

/* поля для 6-ти значного кода */
.code-input {display: flex;gap: 14px;width: 100%;
    max-width: 340px; margin: 0 auto;}
.code-input input {flex: 1 1 0;   min-width: 0;   aspect-ratio: 6 / 6;   
    box-sizing: border-box;padding: 0;text-align: center;font-size: 16px;  
    font-weight: 400;border: 1px solid var(--border-input);
    border-radius: 6px;background: var(--bg-input);
    color: var(--text);box-shadow: inset 5px 5px 5px var(--input-shadow);
    max-height:48px;
}
.code-input input:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 4px var(--input-focus);
}

/* --- Тумблер --- */
.cab-toggle { position: relative; display: inline-block; flex-shrink: 0; width: 40px; height: 22px; background: rgb(132 132 132 / 40%); border-radius: 11px; cursor: pointer; transition: background .15s; }
.cab-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .15s; }
.cab-toggle.on { background: var(--lime); }
.cab-toggle.on::after { transform: translateX(18px); background: #0a0a0a; }

/* --- Выбор телефона --- */
.phone-field {position:relative; display:flex;  gap:6px; }
.select-phone { flex:none; min-width:auto; position:initial;}
.select-phone .select-trigger {gap:6px;}
.select-phone .select-trigger > i{font-size:8px;}
.select-phone .select-panel {width:100%; min-width:auto; right:20px;}
.phone-field__input {position:relative; flex:1;}
.phone-field__input input {width:100%;}
.select-phone .select-option.is-selected::after { display: none; }
/* АДАПТИВ */
@media (min-width: 1200px){
.btn:hover:not(:disabled) {background:var(--hover-btn);} 
.btn.red:hover:not(:disabled) {background:#da2222;}  
.btn.outline:hover:not(:disabled) { background:rgb(255 255 255 / 8%);}   
  
html[data-theme="light"] .select-option:hover { background: var(--hover-1);}  
.select-option:not(.is-selected):hover {color:var(--text); background: #36363657;} 
.form-text a:hover, .form-text-mini a:hover, .form-btn-link:hover {color:var(--text);} 
.select[data-add] .select-arrow:hover {color:var(--text-muted);}  
}
/***********************************/
@media (max-width: 1200px) {
  .select-search {margin:0 0px 10px 0;} 
}
@media (max-width: 1000px) {
  html[data-theme="light"] .input-field input:focus-visible, 
  html[data-theme="light"] .input-field textarea:focus-visible, 
  html[data-theme="light"] .select.open .select-trigger {
      border: 1px solid var(--lime);
      box-shadow: 0 0 6px #b0d300;
  } 
}
@media (max-width: 700px) {
  .phone-group {flex-direction:column; align-items:inherit;}
}
@media (max-width: 640px) {
.select-list {max-height: 282px;}  
.select-option, .select-search input {font-size:16px;}
}
@media (max-width: 480px) {
  .btn-group > .btn bdi {max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                        display:inline-block !important;}
  .modal-window .btn-group > .btn {
    min-height:48px;align-items:center;
        flex:1;
}
  .modal-window .btn-group > .btn:only-child {flex:none; padding:0 24px;}
  .pill-full { display: none; }
  .pill-short { display: inline; }
  .modal-checkbox {padding:10px; margin:0 0 0 -2px;}
}
@media (max-width: 360px) {
  .code-input {gap:6px;}
  .phone-group {margin:0 0px;}
  .select-phone .select-panel {padding:4px}
  .select-phone .select-list {padding:0;}
  .select-phone .select-option {padding:14px 12px;}
  .select-phone .select-panel .select-search input {width:calc(100% - 48px);}
  .select-phone .select-trigger {gap:4px;}
}
@media (max-width: 380px) {
   .btn-group > .btn span {display:none;}
}

/*--- БЛОК "СОЗДАТЬ ССЫЛКУ" ---*/
.create-link__select {flex-basis:100%;}
.create-link__btn {}
.create-form-bottom {display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 14px;border-top: 1px solid var(--border); margin-bottom:-16px;
}
.create-footer-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.create-footer-btns > * {color: var(--text-dim)}
html[data-theme="light"] .create-footer-btns > * {color:#333333e0;}
.create-helpers-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-dim);
}
.create-helpers-inline .js-merchants-count { color: var(--lime); font-weight: 500; }
html[data-theme="light"] .js-merchants-count { color: var(--text); }

/* ---- АДАПТИВ ДЛЯ "СОЗДАТЬ ССЫЛКУ" ---- */
@media (max-width: 1000px) {
  .create-link__wrapper > * {flex:1; flex-basis:46%;}
  .create-link__select {flex-basis:100%;}
}
@media (max-width: 640px) {
 .create-footer-btns {width:100%;}
 .create-footer-btns > * {flex:1;}
  .create-helpers-inline {justify-content:center; width:100%; margin-top:4px;}
}
