/* Listing submission page only: do not change the catalogue's legacy grid. */
.bani-add-page #wrapper {
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
    min-width: 0;
    padding: 12px;
}

.bani-add-page #header,
.bani-add-page #content,
.bani-add-page #footer {
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
}

.bani-add-page #header { padding: 0; }
.bani-add-brand { position: relative; height: 210px; }
.bani-add-brand .logo { width: 270px; margin: 40px 0 0 35px; }
.bani-add-page .img-box { pointer-events: none; }

.bani-add-page #header .menu,
.bani-add-page .menuFooter {
    position: relative;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 48px;
    margin: 0;
}

.bani-add-page #content { margin: 24px auto; }
.bani-add-page #content #center-colomn { float: none; width: 100%; }
.bani-add-page .mainTitle { box-sizing: border-box; width: 100%; justify-content: center; }
.bani-add-page .mainTitle h1 { margin: 12px; padding: 0; text-align: center; }
.bani-add-page #centerBack { overflow: visible; }
.bani-add-page #centerBack h3 { margin: 0; padding: 28px 16px 20px; }

.bani-add-page #centerBack .added-form {
    box-sizing: border-box;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px 32px;
}

.bani-add-page #centerBack .form { width: 100%; margin: 0; border-collapse: collapse; }
.bani-add-page #centerBack .form td { padding: 8px 0; vertical-align: top; }
.bani-add-page #centerBack .form td.label { width: 210px; padding: 16px 20px 8px 0; }
.bani-add-page .form td.label label { padding: 0; }
.bani-add-page #centerBack .form input[type="text"],
.bani-add-page #centerBack .form input[type="tel"],
.bani-add-page #centerBack .form textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    min-height: 40px;
    height: auto;
    line-height: 1.4;
    font-size: 16px;
    color: #474747;
}
.bani-add-page #centerBack .form textarea { resize: vertical; }
.bani-add-page .form [data-bani-phone][aria-invalid="true"] { border-color: #8b2828; }
.bani-add-page .bani-phone-error { color: #8b2828; margin-top: 4px; line-height: 1.4; }
.bani-add-page .bani-phone-error:not([hidden]) { display: block; }
.bani-add-page .bani-add-steam-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.bani-add-page .bani-add-steam-options label { display: flex; align-items: flex-start; gap: 6px; padding: 0; line-height: 1.4; }
.bani-add-page .bani-add-steam-options input { flex: none; margin: 3px 0 0; }
.bani-add-page .form .button { margin-top: 12px; min-height: 44px; }
.bani-add-page .form .notice { line-height: 1.5; }
.bani-add-page .alert-message { max-width: 720px; margin: 0 auto 16px; padding: 12px; line-height: 1.5; }
.bani-add-page .error-message { color: #8b2828; background: #fff0ef; }
.bani-add-page .success-message { color: #245b35; background: #e9f7ed; }
.bani-add-page #footInfo { box-sizing: border-box; float: none; width: 100%; margin: 0; padding: 24px; line-height: 1.5; }

@media (max-width: 620px) {
    .bani-add-page #wrapper { padding: 8px; }
    .bani-add-brand { height: 150px; }
    .bani-add-brand .logo { width: 210px; margin: 28px 0 0 16px; }
    .bani-add-page .menu ul .mainMenu .menuBlock a,
    .bani-add-page .menuFooter ul .mainMenu .menuBlock a { flex-direction: column; gap: 3px; font-size: 11px; line-height: 1.2; }
    .bani-add-page .menu ul .mainMenu a img,
    .bani-add-page .menuFooter ul .mainMenu a img { width: 18px; height: 18px; margin: 0; }
    .bani-add-page #content { margin: 16px auto; }
    .bani-add-page #centerBack .added-form { padding: 0 12px 24px; }
    .bani-add-page #centerBack .form,
    .bani-add-page #centerBack .form tbody,
    .bani-add-page #centerBack .form tr,
    .bani-add-page #centerBack .form td { display: block; width: 100%; }
    .bani-add-page #centerBack .form td.label { width: 100%; padding: 12px 0 4px; }
    .bani-add-page #centerBack .form td.label:empty { display: none; }
    .bani-add-page .bani-add-steam-options { grid-template-columns: 1fr; }
    .bani-add-page #footInfo { padding: 16px; }
}

@media (max-width: 360px) {
    .bani-add-page #centerBack .added-form { padding-left: 0; padding-right: 0; }
    .bani-add-page #centerBack .form td { box-sizing: border-box; padding-left: 4px; padding-right: 4px; }
    .bani-add-page #centerBack .form .g-recaptcha { margin-left: -4px; }
}