/* Customer forms: registration (create_account.php), login (login.php) and a new delivery address
   (checkout_shipping_address.php). Every rule is under .account-form, set on the page's .login-bg box */

.login-bg.account-form {
    padding: 32px 0 48px;
    background-image: none;
}

.login-bg.account-form > div {
    float: none;
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    padding: 8px 32px 28px;
    background: #fff;
    border: 1px solid #e6dde2;
    border-radius: 12px;
}

.account-form .checkout-title {
    margin: 16px 0 20px;
    padding-bottom: 14px;
    font-size: 24px;
    line-height: 1.25;
}

/* fields */
.account-form .form-group {
    margin: 0 0 16px;
}

.account-form .control-label,
.account-form .form-group > label {
    display: inline-block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #333;
}

.account-form .isRequired {
    margin-left: 2px;
    color: #c0392b;
}

.account-form .form-group .row {
    display: flex;
    gap: 8px;
    margin: 0 0 8px;
}

/* Bootstrap clearfix pseudo-elements would become flex items and add a gap */
.account-form .form-group .row::before,
.account-form .form-group .row::after {
    display: none;
}

.account-form .form-group .row:last-child {
    margin-bottom: 0;
}

.account-form .form-group .row > [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

/* column widths keep the Bootstrap proportions, the gap is fixed */
.account-form .form-group .row > .col-xs-2  { flex: 2 1 0; }
.account-form .form-group .row > .col-xs-3  { flex: 3 1 0; }
.account-form .form-group .row > .col-xs-6  { flex: 6 1 0; }
.account-form .form-group .row > .col-xs-7  { flex: 7 1 0; }
.account-form .form-group .row > .col-xs-9  { flex: 9 1 0; }
.account-form .form-group .row > .col-xs-10 { flex: 10 1 0; }
.account-form .form-group .row > .col-xs-12,
.account-form .form-group .row > .col-lg-12 { flex: 1 1 100%; }

.account-form .form-group .form-control:not(.btn) {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    font-size: 16px; /* 16px keeps iOS from zooming in on focus */
    line-height: normal;
    color: #222;
    background: #fff;
    border: 1px solid #cfc4ca;
    border-radius: 8px;
    box-shadow: none;
    -webkit-appearance: none; /* iOS Safari: no native inner shadow or rounding */
    appearance: none;
}

.account-form .form-group .form-control:not(.btn)::placeholder {
    color: #8a8087;
    opacity: 1;
}

.account-form .form-group .form-control:not(.btn):focus {
    border-color: #a63d6f;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(166, 61, 111, .18);
}

/* short boxes (№, Вх., Ет., Ап., Пощ.к.) */
.account-form #address_book #streetsNo,
.account-form #address_book #entranceNo,
.account-form #address_book #floorNo,
.account-form #address_book #apartmentNo,
.account-form #address_book #postCode {
    padding: 0 6px;
    text-align: center;
}

/* read-only fields (the e-mail in account_edit.php) */
.account-form .form-group .form-control:not(.btn)[readonly] {
    color: #6d5f67;
    background: #f5f0f3;
    border-color: #ebe2e7;
    cursor: default;
}

/* read-only prefixes filled by the address lookup (гр., кв./жк, ул./бул.) */
.account-form #address_book .form-control:not(.btn)[readonly] {
    padding: 0 4px;
    font-size: 14px; /* read-only, no keyboard, so no iOS zoom */
    text-align: center;
}

.account-form .form-group .form-control:not(.btn)[readonly]:focus {
    box-shadow: none;
    border-color: #ebe2e7;
}

/* Еконт office checkbox and newsletter */
.account-form #trToOffice > div,
.account-form .form-group.check label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
}

/* "Направи по подразбиране" on a new delivery address (checkbox without a label) */
.account-form .form-group.check .col-lg-12 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    font-size: 15px;
    line-height: 1.35;
}

.account-form #toOfficeCheckBox,
.account-form #primary,
.account-form #newsletter {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #017e68;
}

.account-form .form-group.check {
    margin-top: 20px;
}

/* errors */
.account-form .message-error:empty {
    display: none;
}

.account-form .field-validation-error {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}

/* buttons (Продължи, Вход) and the notes under them */
.account-form .btn-next-step.form-control {
    height: 50px;
    margin: 24px 0 0;
    font-size: 17px;
    font-weight: 700;
    border-radius: 8px;
}

/* a link styled as a button (Назад, Изтрий) */
.account-form a.btn-next-step.form-control {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* "Назад" is always the first of a button pair: a quiet outline button */
.account-form .row > [class*="col-"]:first-child > a.btn-next-step.form-control {
    color: #017e68;
    background: #fff;
    border: 1px solid #017e68;
}

.account-form .row > [class*="col-"]:first-child > a.btn-next-step.form-control:hover {
    background: #eef7f5;
}

/* button pairs outside a .form-group (address_book_process.php) */
.account-form .row.form-buttons {
    display: flex;
    gap: 8px;
    margin: 0;
}

.account-form .row.form-buttons::before,
.account-form .row.form-buttons::after {
    display: none;
}

.account-form .row.form-buttons > [class*="col-"] {
    flex: 1 1 0;
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
}

.account-form .login-row {
    margin: 16px 0 0;
}

.account-form .register-link {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* login.php: the "forgotten password" link and the "new customer" line */
.account-form .rememberme {
    float: none;
    padding: 0;
    text-align: right;
}

.account-form .passwordRecoveryPage {
    font-size: 14px;
    line-height: 1.4;
}

.account-form .login-row .row {
    margin: 0;
}

.account-form .login-row .btn-next-step.form-control {
    margin-top: 4px;
}

.account-form .login-row .register-link {
    display: block;
    margin-top: 16px;
}

/* checkout_shipping_address.php: saved addresses as a list of choices, then the new address form */
.account-form .address-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    border: 1px solid #e6dde2;
    border-radius: 10px;
    cursor: pointer;
}

.account-form .address-choice input[type=radio] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #017e68;
}

.account-form .address-current {
    margin: 0 0 20px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.5;
    background: #faf7f9;
    border-radius: 10px;
}

.account-form .address-heading {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.account-form #addressFormDiv {
    margin-top: 16px;
}

/* address suggestions (jquery.ui.combogrid). The menu is appended to <body>,
   so it is scoped by the html.ca-page class that the page sets */
html.ca-page .cg-menu.combogrid {
    z-index: 4 !important; /* above the form, under the fixed header (5) */
    min-width: 380px;
    max-width: 494px; /* the width of the form fields */
    box-sizing: border-box;
    margin-top: 4px;
    padding: 4px 0;
    font-family: inherit;
    color: #222;
    background: #fff;
    border: 1px solid #d9cdd3;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(70, 25, 50, .16);
    overflow: hidden;
}

html.ca-page .cg-menu #cg-divHeader,
html.ca-page .cg-menu .cg-colItem {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
}

/* column sizes do not depend on the text, so the header and every row line up;
   the name (2nd column) gets the most width, long names wrap */
html.ca-page .cg-menu .cg-colHeader,
html.ca-page .cg-menu .cg-DivItem {
    float: none;
    flex: 1.4 1 0;
    width: auto !important;
    min-width: 0;
    height: auto;
    overflow-wrap: break-word;
}

html.ca-page .cg-menu .cg-colHeader:nth-child(2),
html.ca-page .cg-menu .cg-DivItem:nth-child(2) {
    flex: 2 1 0;
}

/* Населено място (type, name, municipality, post code): narrow type and post code.
   Each menu is recognised by its paging input, which carries the field id as a class */
html.ca-page .cg-menu:has(.currentPage.sites) .cg-colHeader:first-child,
html.ca-page .cg-menu:has(.currentPage.sites) .cg-DivItem:first-child {
    flex: 0 0 28px;
}

html.ca-page .cg-menu:has(.currentPage.sites) .cg-colHeader:nth-child(4),
html.ca-page .cg-menu:has(.currentPage.sites) .cg-DivItem:nth-child(4) {
    flex: 0 0 52px;
    text-align: right !important;
}

/* квартал, улица (type, name, Latin name) and Еконт office (code, name, address):
   a list without a header, the name on top and the rest as a grey line under it */
html.ca-page .cg-menu:has(.currentPage.quarters) #cg-divHeader,
html.ca-page .cg-menu:has(.currentPage.streets) #cg-divHeader,
html.ca-page .cg-menu:has(.currentPage.offices) #cg-divHeader {
    display: none;
}

html.ca-page .cg-menu:has(.currentPage.quarters) .cg-colItem,
html.ca-page .cg-menu:has(.currentPage.streets) .cg-colItem,
html.ca-page .cg-menu:has(.currentPage.offices) .cg-colItem {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0;
    row-gap: 2px;
    align-items: baseline;
    padding-top: 8px;
    padding-bottom: 8px;
}

html.ca-page .cg-menu .cg-colItem > .cg-DivItem:first-child:not(:empty) {
    margin-right: 8px;
}

html.ca-page .cg-menu:has(.currentPage.quarters) .cg-colItem > .cg-DivItem:nth-child(2),
html.ca-page .cg-menu:has(.currentPage.streets) .cg-colItem > .cg-DivItem:nth-child(2),
html.ca-page .cg-menu:has(.currentPage.offices) .cg-colItem > .cg-DivItem:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

html.ca-page .cg-menu:has(.currentPage.quarters) .cg-colItem > .cg-DivItem:nth-child(n+3),
html.ca-page .cg-menu:has(.currentPage.streets) .cg-colItem > .cg-DivItem:nth-child(n+3),
html.ca-page .cg-menu:has(.currentPage.offices) .cg-colItem > .cg-DivItem:nth-child(n+3) {
    grid-column: 2;
    font-size: 13px;
}

html.ca-page .cg-menu:has(.currentPage.quarters) .cg-colItem > .cg-DivItem:nth-child(n+3),
html.ca-page .cg-menu:has(.currentPage.streets) .cg-colItem > .cg-DivItem:nth-child(n+3) {
    font-size: 12px;
    color: #9a8f96;
}

/* the internal Еконт office number means nothing to the customer */
html.ca-page .cg-menu:has(.currentPage.offices) .cg-colItem > .cg-DivItem:first-child {
    display: none;
}

html.ca-page .cg-menu #cg-divHeader {
    padding-top: 6px;
    padding-bottom: 6px;
    background: none;
    border-bottom: 1px solid #f0e9ed;
}

html.ca-page .cg-menu .cg-colHeader {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #8a8087;
}

html.ca-page .cg-menu .cg-colHeader-label {
    cursor: default;
    text-decoration: none;
}

html.ca-page .cg-menu .cg-comboItem {
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    cursor: pointer;
}

html.ca-page .cg-menu .cg-colItem {
    min-height: 46px;
    padding-top: 6px;
    padding-bottom: 6px;
}

html.ca-page .cg-menu .cg-DivItem {
    font-size: 14px;
    line-height: 1.3;
    color: #6d5f67;
}

/* the place / street name */
html.ca-page .cg-menu .cg-DivItem:nth-child(2) {
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

html.ca-page .cg-menu .cg-comboItem + .cg-comboItem .cg-colItem {
    border-top: 1px solid #f5f0f3;
}

html.ca-page .cg-menu .ui-state-hover,
html.ca-page .cg-menu .ui-state-focus,
html.ca-page .cg-menu .ui-state-active {
    font-weight: inherit;
    color: inherit;
    background: #f7edf2 !important;
    border-color: transparent !important;
}

/* paging: only the arrows and the page number; hidden when there is one page */
html.ca-page .cg-menu .cg-comboButton {
    height: auto;
    margin: 0;
    padding: 4px 8px;
    background: #faf7f9;
    border: 0;
    border-top: 1px solid #f0e9ed;
    border-radius: 0;
}

html.ca-page .cg-menu .cg-comboButton:not(:has(.cg-pg-button:not(.cg-state-disabled))) {
    display: none;
}

html.ca-page .cg-menu .cg-navTable {
    font-size: 14px;
}

html.ca-page .cg-menu #cg-keynav-right,
html.ca-page .cg-menu .recordXP,
html.ca-page .cg-menu .ui-separator {
    display: none;
}

html.ca-page .cg-menu #cg-keynav-center {
    width: auto !important;
}

html.ca-page .cg-menu .cg-pg-table {
    margin: 0 auto;
}

html.ca-page .cg-menu .cg-pg-button,
html.ca-page .cg-menu .cg-pg-button:hover {
    width: 40px;
    height: 40px;
    padding: 0;
    text-align: center;
    background: none;
    border: 0 !important;
    border-radius: 8px;
}

html.ca-page .cg-menu .cg-pg-button .ui-icon {
    display: inline-block;
    vertical-align: middle;
    filter: grayscale(1) brightness(.55); /* the theme sprite is orange */
}

html.ca-page .cg-menu .cg-pg-button.cg-state-disabled {
    opacity: .3;
}

html.ca-page .cg-menu #cg-navInfo {
    min-width: 0;
    padding: 0 6px;
    font-size: 0; /* hides the English "Page … of …" words, keeps the page number */
}

html.ca-page .cg-menu #cg-navInfo::before {
    content: "Страница";
    margin-right: 4px;
    font-size: 13px;
    color: #8a8087;
}

html.ca-page .cg-menu #cg-navInfo input {
    width: 28px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    text-align: center;
    background: none;
    border: 0;
}

/* spinner while the suggestions load */
.account-form #address_book .cg-loading {
    background-position: right 10px center;
}

/* phones */
@media (max-width: 767px) {
    /* the menu spans the form width instead of starting under the field */
    html.ca-page .cg-menu.combogrid {
        left: 22px !important;
        right: 22px;
        width: auto !important;
        min-width: 0;
        max-width: none;
    }

    /* place suggestions (type, name, municipality, post code) as two lines:
       "гр. СОФИЯ ... 1000" and "общ. СТОЛИЧНА" under the name */
    html.ca-page .cg-menu:has(.currentPage.sites) #cg-divHeader:has(> .cg-colHeader:nth-child(4):last-child) {
        display: none;
    }

    html.ca-page .cg-menu:has(.currentPage.sites) .cg-colItem:has(> .cg-DivItem:nth-child(4):last-child) {
        display: grid;
        grid-template-columns: 28px 1fr auto;
        column-gap: 10px;
        row-gap: 2px;
        align-items: baseline;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    html.ca-page .cg-menu:has(.currentPage.sites) .cg-colItem:has(> .cg-DivItem:nth-child(4):last-child) > .cg-DivItem:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        font-size: 13px;
    }

    html.ca-page .cg-menu:has(.currentPage.sites) .cg-colItem:has(> .cg-DivItem:nth-child(4):last-child) > .cg-DivItem:nth-child(3)::before {
        content: "общ. ";
    }

    html.ca-page .cg-menu:has(.currentPage.sites) .cg-colItem:has(> .cg-DivItem:nth-child(4):last-child) > .cg-DivItem:nth-child(4) {
        grid-column: 3;
        grid-row: 1;
    }

    .login-bg.account-form {
        padding: 12px 0 32px;
    }

    .login-bg.account-form > div {
        max-width: none;
        margin: 0;
        padding: 4px 16px 20px;
        border-radius: 10px;
    }

    .account-form .checkout-title {
        margin: 12px 0 16px;
        padding-bottom: 12px;
        font-size: 22px;
    }

    .account-form .form-group {
        margin-bottom: 14px;
    }

    .account-form .form-group .form-control:not(.btn) {
        height: 48px;
    }

    .account-form .form-group .row {
        gap: 6px;
        margin-bottom: 6px;
    }
}

/* very narrow phones (iPhone SE 1st gen, small Androids) */
@media (max-width: 359px) {
    .login-bg.account-form > div {
        padding: 4px 12px 16px;
    }

    .account-form #address_book #streetsNo,
    .account-form #address_book #entranceNo,
    .account-form #address_book #floorNo,
    .account-form #address_book #apartmentNo,
    .account-form #address_book #postCode,
    .account-form .form-group .form-control:not(.btn)[readonly] {
        padding: 0 2px;
    }

    html.ca-page .cg-menu.combogrid {
        left: 18px !important;
        right: 18px;
    }
}