/* garant2016 on Joomla 6: classes of Joomla 4-6 core layouts the Bootstrap 3 template does not know. */

/* screen-reader-only text (J4+ uses .visually-hidden, Bootstrap 3 has .sr-only) */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* password fields with the "show password" toggle (login, profile edit, registration, reset): full width like the other fields,
   the eye / crossed eye inside the field at its right end (drawn as inline SVG: the template has no Joomla icon font) */
.password-group .input-group { position: relative; display: block; width: 100%; }
.password-group .input-group > input { display: block; float: none; width: 100%; min-width: 0; padding-right: 40px; }
.password-group .input-group > input::-ms-reveal { display: none; }
.password-group .input-password-toggle {
  position: absolute; top: 1px; right: 1px; bottom: 1px; z-index: 3; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 38px; height: auto !important; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; opacity: .6; cursor: pointer; transition: opacity .15s;
}
.password-group .input-password-toggle:hover, .password-group .input-password-toggle:focus-visible { background: transparent; opacity: 1; }
.password-group .input-password-toggle .icon-eye,
.password-group .input-password-toggle .icon-eye-slash {
  display: inline-block; width: 16px; height: 16px; background: no-repeat center / 16px 16px;
}
.password-group .input-password-toggle .icon-eye::before,
.password-group .input-password-toggle .icon-eye-slash::before { content: none; }
.password-group .input-password-toggle .icon-eye {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.password-group .input-password-toggle .icon-eye-slash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E");
}
/* same height as the other inputs of the form (35 px) */
.password-group .input-group > input { height: 35px; box-sizing: border-box; }

/* password strength meter */
meter { display: block; width: 100%; height: 6px; margin-top: 4px; }

/* File links (pdf, doc/docx/rtf, xls/xlsx, zip/rar/7z): thin outline icons in the link's own colour, W = Word, X = Excel, zipper = archive (replace the 16x16 png icons of template.css), same as sdksirius / sdkgranit / broker-garant */
a[href$='.pdf' i], a[href$='.doc' i], a[href$='.docx' i], a[href$='.rtf' i], a[href$='.xls' i], a[href$='.xlsx' i], a[href$='.zip' i], a[href$='.rar' i], a[href$='.7z' i] { padding-left: 0 !important; background: none !important; }
a[href$='.pdf' i]::before, a[href$='.doc' i]::before, a[href$='.docx' i]::before, a[href$='.rtf' i]::before, a[href$='.xls' i]::before, a[href$='.xlsx' i]::before, a[href$='.zip' i]::before, a[href$='.rar' i]::before, a[href$='.7z' i]::before {
  content: ""; display: inline-block; width: 10px; height: 12px; margin-right: 5px; vertical-align: -2px;
  background-color: currentColor; opacity: .85; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
}
a[href$='.pdf' i]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M.5.5h6l3 3v8h-9z M6.5.5v3h3 M2.5 6.5h5 M2.5 8.5h5' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M.5.5h6l3 3v8h-9z M6.5.5v3h3 M2.5 6.5h5 M2.5 8.5h5' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
a[href$='.doc' i]::before, a[href$='.docx' i]::before, a[href$='.rtf' i]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M.5.5h6l3 3v8h-9z M6.5.5v3h3 M1.8 5.2l1.4 4.8l1.8-3.6l1.8 3.6l1.4-4.8' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M.5.5h6l3 3v8h-9z M6.5.5v3h3 M1.8 5.2l1.4 4.8l1.8-3.6l1.8 3.6l1.4-4.8' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
a[href$='.xls' i]::before, a[href$='.xlsx' i]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M.5.5h6l3 3v8h-9z M6.5.5v3h3 M2.6 5.2l4.8 4.8 M7.4 5.2l-4.8 4.8' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M.5.5h6l3 3v8h-9z M6.5.5v3h3 M2.6 5.2l4.8 4.8 M7.4 5.2l-4.8 4.8' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
a[href$='.zip' i]::before, a[href$='.rar' i]::before, a[href$='.7z' i]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M.5.5h6l3 3v8h-9z M6.5.5v3h3 M3.5 1.5h1 M4.5 2.5h1 M3.5 3.5h1 M4.5 4.5h1 M3.5 5.5h1 M3.5 7.5h2v2.5h-2z' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M.5.5h6l3 3v8h-9z M6.5.5v3h3 M3.5 1.5h1 M4.5 2.5h1 M3.5 3.5h1 M4.5 4.5h1 M3.5 5.5h1 M3.5 7.5h2v2.5h-2z' fill='none' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Front-end module editing for signed-in editors (Global Configuration: "Front-end editing: Modules", on as on J3).
   J6 inserts <a class="btn jmodedit"><span class="icon-edit"></span></a><div role="tooltip">…</div> into the module; the old
   template has neither the J6 icon font nor the tooltip CSS, so the tooltip text was printed and the button was an empty pill.
   Like J3: a small pencil in the module's top-left corner on hover, the tooltip only over the pencil. */
:has(> .jmodedit) { position: relative; }
.jmodedit { display: none !important; position: absolute !important; top: 0; left: 0; z-index: 1000; width: 26px !important; height: 26px !important;
  min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 1px solid #c4c6c9 !important; border-radius: 3px !important; box-shadow: none !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.5 1.5l3 3-9 9H2.5v-3z M9.5 3.5l3 3' fill='none' stroke='%23555555' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat !important; }
.jmodedit .icon-edit { display: none; }
:has(> .jmodedit):hover > .jmodedit { display: block !important; }
.jmodedit + [role="tooltip"] { display: none; position: absolute; top: 28px; left: 0; z-index: 1001; padding: 4px 8px; border-radius: 3px; background: #333; color: #fff;
  font-size: 12px; line-height: 1.4; text-align: left; white-space: nowrap; }
.jmodedit:hover + [role="tooltip"], .jmodedit:focus + [role="tooltip"] { display: block; }
.jmenuedit { display: none; }

/* Login page (/component/users/login, J6 core layout) as on J3: login and password fields 250px, "Запомнить меня" with the checkbox to the right
   of the label (template.css positions .well #remember absolutely for the J3 markup: in J6 it flew up over the banner),
   "Забыли пароль? / Забыли логин?" as small links instead of boxed list items. */
.com-users-login .control-group { margin-bottom: 0; }
.com-users-login #username, .com-users-login .password-group .input-group { width: 250px; max-width: 100%; }
.com-users-login__remember { padding-top: 10px; }
.com-users-login__remember .form-check { display: flex; align-items: center; gap: 7px; padding: 0; margin: 0; min-height: 0; }
.com-users-login__remember .form-check-label { order: 1; margin: 0; }
.well .com-users-login__remember #remember, .com-users-login__remember #remember { order: 2; float: none; }
.com-users-login__options.list-group { display: block; margin: 0 0 20px; padding: 0; border: 0; border-radius: 0; }
.com-users-login__options .list-group-item { display: block; width: max-content; padding: 0; margin: 0 0 9px; border: 0; background: none;
  font-size: 12px; line-height: 1.2; color: #333; text-decoration: none; }
.com-users-login__options .list-group-item:hover { color: #cd272e; background: none; }

/* Header login panel («Вход для клиентов»): one tidy row — two equal fields, «Запомнить меня» with a site-style checkbox,
   the red button and the two «Забыли…» links, everything on one centre line; light grey strip under the dark top bar. */
.login-block--open { padding: 16px 0; background: #f7f8fa; border-bottom: 1px solid #e3e5e8; }
.login-block #login-form { margin: 0; }
.login-block #login-form .control-group { margin: 0; }
.login-block .validate-password, .login-block .validate-username {
  height: 42px; padding: 0 14px; border: 1px solid #d9dce1; border-radius: 0; background: #fff; color: #252524; font-size: 15px;
  transition: border-color .15s, box-shadow .15s; }
.login-block .validate-password:focus, .login-block .validate-username:focus { border-color: #cd272e; box-shadow: 0 0 0 3px rgba(205, 39, 46, .12); }
.login-block .validate-password::placeholder, .login-block .validate-username::placeholder { color: #8a8d93; }
.login-block .remember-block { display: flex; align-items: center; gap: 9px; padding: 0; cursor: pointer; white-space: nowrap; }
.login-block .remember-block label { order: 2; margin: 0; padding: 0; font-size: 14px; line-height: 1.2; color: #45484e; cursor: pointer; }
.login-block .remember-block .inputbox, .com-users-login__remember #remember {
  -webkit-appearance: none; appearance: none; flex: none; position: static; width: 17px; height: 17px; margin: 0; padding: 0;
  border: 1px solid #d9dce1; border-radius: 0; background: #fff center / 11px no-repeat; box-shadow: none; outline: 0; cursor: pointer;
  transition: border-color .15s; }
.login-block .remember-block .inputbox { order: 1; }
.login-block .remember-block .inputbox:hover, .login-block .remember-block .inputbox:focus-visible,
.com-users-login__remember #remember:hover, .com-users-login__remember #remember:focus-visible { border-color: #cd272e; }
.login-block .remember-block .inputbox:checked, .com-users-login__remember #remember:checked {
  border-color: #cd272e; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='%23cd272e' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E"); }
.login-block .button-search { width: 100%; height: 42px; padding: 0 24px; font-size: 15px; letter-spacing: .02em; transition: background-color .15s; }
.login-block .button-search:hover, .login-block .button-search:focus { background: #a91f25; }
.login-block .remind-block ul { gap: 4px; }
.login-block .remind-block li a { font-size: 13px; line-height: 1.25; white-space: nowrap; }
@media (min-width: 768px) {
  .login-block #login-form { display: flex; align-items: center; gap: 20px; padding: 0 15px; }
  .login-block #login-form > .control-group, .login-block #login-form > .remind-block { float: none; width: auto; padding: 0; }
  .login-block #form-login-username, .login-block #form-login-password { flex: 1 1 0; min-width: 0; }
  .login-block #form-login-remember, .login-block #form-login-submit, .login-block .remind-block { flex: none; }
  .login-block #login-form > #form-login-submit { width: 170px; }
}
@media (max-width: 767px) {
  .login-block #login-form > .control-group { margin-bottom: 10px; }
  .login-block .remember-block { padding: 4px 15px 6px; }
  .login-block .remind-block { padding: 4px 15px 0; }
}

/* Header login panel, «Забыли пароль? / Забыли логин?» (14.11.2026): the whole recovery runs in the same row —
   e-mail → «логин + код из письма» → «новый пароль ×2» → «Пароль изменён» (or e-mail → «письмо с логином отправлено»),
   with a status line and «← Назад ко входу» (Esc does the same). */
.login-block form[hidden], .login-block [hidden] { display: none !important; }
.login-block .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.login-block #login-recover { margin: 0; }
.login-block #login-recover .control-group { margin: 0; }
.login-block .login-recover__group { display: flex; gap: 12px; }
.login-block .login-recover__group input { flex: 1 1 0; min-width: 0; width: 100%; }
.login-recover__hint { display: block; font-size: 13px; line-height: 1.3; color: #6b6f76; }
.login-recover__hint--error { color: #cd272e; }
.login-recover__hint--ok { color: #2e7d32; font-size: 14px; }
.login-block #login-recover[data-step="done"] #form-recover-fields,
.login-block #login-recover[data-step="done"] > .remind-block { display: none; }   /* result: the message and one red «Назад ко входу» */
.login-block #login-recover[data-step="done"] > .login-recover__hint { text-align: center; }
.login-block #login-recover[aria-busy="true"] .button-search { opacity: .7; cursor: progress; }
.login-block #login-recover .button-search { padding: 0 12px; white-space: nowrap; }
.login-block .remind-block .login-recover__back { color: #cd272e; }
/* Sticky header (≥1200px): the open login panel is fixed above the company bar and the menu (JS sets --login-h) */
@media (min-width: 1200px) {
  header.header--fixed.header--login-open { padding-top: calc(32px + var(--login-h, 0px)); }
  header.header--fixed.header--login-open .login-block { position: fixed; top: 0; left: 0; width: 100%; z-index: 10000000; }
  header.header--fixed.header--login-open .top-bar-wrapper { top: var(--login-h, 0px); }
  header.header--fixed.header--login-open .main-bar-wrapper--fixed { top: calc(32px + var(--login-h, 0px)); }
}
/* «×» closes the panel: at the right end of the row (desktop), next to the links at the bottom (phone, where the menu button sits top right) */
.login-block .container { position: relative; }
.login-block__close { position: absolute; right: 15px; top: 50%; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 0;
  border-radius: 50%; background: none; color: #8a8d93; font-size: 26px; line-height: 32px; text-align: center; cursor: pointer; z-index: 1;
  transition: color .15s, background-color .15s; }
.login-block__close:hover, .login-block__close:focus-visible { color: #cd272e; background: #eceef1; outline: none; }
@media (min-width: 768px) {
  .login-block #login-form, .login-block #login-recover { padding-right: 60px; }
}
@media (max-width: 767px) {
  .login-block__close { top: auto; bottom: 0; margin-top: 0; }
}
.login-block .remind-block .login-recover__back:hover { color: #a91f25; }
@media (min-width: 768px) {
  .login-block #login-recover { display: flex; align-items: center; gap: 12px 20px; padding: 0 15px; }
  .login-block #login-recover > .control-group, .login-block #login-recover > .remind-block { float: none; width: auto; padding: 0; }
  .login-block #form-recover-fields { flex: 1 1 0; min-width: 0; }
  /* the status line goes under the fields (Joomla's messages can be long) */
  .login-block #login-recover { flex-wrap: wrap; }
  .login-block #login-recover > .login-recover__hint { order: 5; flex: 1 1 100%; min-width: 0; margin-top: -4px; }
  .login-block #login-recover[data-step="done"] { justify-content: center; gap: 12px 32px; }   /* message + button together in the middle */
  .login-block #login-recover[data-step="done"] > .login-recover__hint { order: 0; flex: 0 1 auto; margin: 0; }
  .login-block #login-recover > #form-recover-submit { flex: none; width: 170px; }
  .login-block #login-recover > .remind-block { flex: none; }
}
@media (max-width: 767px) {
  .login-block #login-recover > .control-group { margin-bottom: 10px; }
  .login-block .login-recover__group { flex-direction: column; gap: 10px; }
  .login-block #login-recover > .login-recover__hint { margin: 0 15px 10px; }
  .login-block #login-recover > .remind-block { padding: 4px 15px 0; }
}

/* Joomla 6 validation message («Пожалуйста, заполните поле») goes inside the field label; the template's Bootstrap 3 rule
   .form-control-feedback {position:absolute; right:0; width:34px} pushed it to the right edge, one word per line.
   Now: next to the label text, small red, and only after the user has pressed the submit button (as on broker / sirius / granit). */
form.form-validate label .form-control-feedback { position: static; display: inline; width: auto; height: auto; margin-left: 8px;
  line-height: inherit; font-size: 12px; font-weight: 400; color: #cd272e; text-align: left; pointer-events: none; }
form.form-validate:not(.was-submitted) .form-control-feedback { display: none !important; }
form.form-validate:not(.was-submitted) label.invalid, form.form-validate:not(.was-submitted) label.invalid .star { color: inherit; }
form.form-validate:not(.was-submitted) input.invalid, form.form-validate:not(.was-submitted) textarea.invalid,
form.form-validate:not(.was-submitted) select.invalid { border-color: #e2e2e2; box-shadow: none; }

/* Fields of the Joomla 6 core forms (login, reset, remind, profile): square corners and the template's light border, like the
   rest of the site (Bootstrap left 4px radius on all of them and "input-group" corners on the password field: left rounded, right square) */
form.form-validate .form-control, form.form-validate input[type=text], form.form-validate input[type=email],
form.form-validate input[type=password], form.form-validate textarea, form.form-validate select,
.password-group .input-group > input { border-radius: 0 !important; }
.password-group .input-group > input { border: 1px solid #e2e2e2; }

/* "Контакты": the transfer-agents tab (article 1070, contacts-page.php) gets the same offsets as its two sister tabs
   (central office: article 3, branch: article 1246, both page.php with their own inline styles): heading and tabs at one x */
@media (min-width: 768px) {
  body.page-1070 .content-section > .container { padding-left: 0 !important; }
  body.page-1070 .content-section .content-block-wrapper,
  body.page-1070 .content-section .content-block { padding-left: 0 !important; padding-right: 0 !important; }
  body.page-1070 .tabs-list { position: relative; left: 20px; }
  body.page-1070 .item-page h1 { padding-left: 15px; }   /* the heading text 15px in, as on the sister tabs */
  body.page-1070 .item-page .row-no-padding { margin-left: 0 !important; }   /* table: full width at the heading's x, as the map and text of the sister tabs */
}

/* every checkbox of the site in the site's style (as «Запомнить меня»): white square, thin grey frame, red check; red frame on
   hover/focus. Checkboxes with their own inline style (set by hand) keep it (2026-11-14) */
input[type="checkbox"]:not([style]) {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-block; width: 17px; height: 17px; margin: 0 8px 0 0; padding: 0;
  vertical-align: -3px; border: 1px solid #d9dce1; border-radius: 0; background: #fff center / 11px no-repeat; box-shadow: none; outline: 0;
  cursor: pointer; transition: border-color .15s; }
input[type="checkbox"]:not([style]):hover, input[type="checkbox"]:not([style]):focus-visible { border-color: #cd272e; }
input[type="checkbox"]:not([style]):checked {
  border-color: #cd272e; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='%23cd272e' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E"); }
input[type="checkbox"]:not([style]):disabled { cursor: default; opacity: .5; border-color: #d9dce1; }
/* Convert Forms resets checkboxes back to the native look (.convertforms .cf-input[type=checkbox] { appearance: checkbox }) */
.convertforms .cf-input[type="checkbox"]:not([style]) { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; padding: 0; }