/* ============================================================
   EXCEL REQUEST
   ============================================================ */

#excelrequest-page {
    width: 100%;
    max-width: none;
    margin: 0 auto 40px;
}


/*
 * Позволяваме на страницата да използва
 * цялата налична ширина.
 */

#center_column #excelrequest-page,
#center_column .columns-container #excelrequest-page,
.columns-container #excelrequest-page,
#content #excelrequest-page {
    width: 100%;
    max-width: none;
}


/* ============================================================
   HEADER
   ============================================================ */

#excelrequest-page .er-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 25px 30px;
    margin-bottom: 20px;

    background: #f5f7fa;
    border: 1px solid #e1e5ea;
    border-radius: 6px;
}

#excelrequest-page .er-head h1 {
    margin: 0 0 8px;

    font-size: 28px;
    line-height: 1.2;
}

#excelrequest-page .er-head p {
    margin: 0;

    color: #777;
}

#excelrequest-page .er-file-badge {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 70px;
    height: 55px;

    padding: 0 15px;

    font-size: 20px;
    font-weight: 700;

    color: #fff;
    background: #2f8f5b;

    border-radius: 5px;
}


/* ============================================================
   MESSAGE
   ============================================================ */

#excelrequest-message {
    display: none;

    margin-bottom: 20px;
    padding: 12px 15px;

    border-radius: 4px;

    line-height: 1.5;
}

#excelrequest-message.success {
    display: block;

    color: #155724;
    background: #d4edda;
    border: 1px solid #c3e6cb;
}

#excelrequest-message.error {
    display: block;

    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
}


/* ============================================================
   UPLOAD
   ============================================================ */

#excelrequest-page .er-upload-card {
    padding: 20px;
    margin-bottom: 20px;

    background: #fff;

    border: 1px solid #e1e5ea;
    border-radius: 6px;
}

#excelrequest-page .er-upload-main {
    display: flex;
    align-items: center;

    gap: 15px;
}

#excelrequest-page .er-file-label {
    display: flex;
    align-items: center;

    flex: 1;

    min-height: 60px;

    padding: 10px 15px;

    cursor: pointer;

    background: #f7f8fa;

    border: 1px dashed #c7ccd3;
    border-radius: 5px;
}

#excelrequest-page .er-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    margin-right: 12px;

    font-size: 24px;

    color: #2f8f5b;
}

#excelrequest-page .er-file-text {
    display: flex;
    flex-direction: column;
}

#excelrequest-page .er-file-text strong {
    font-size: 15px;
}

#excelrequest-page .er-file-text small {
    margin-top: 4px;

    color: #777;
}

#excelrequest-page #excelrequest-file {
    display: none;
}

#excelrequest-page .er-upload-button {
    min-height: 50px;

    padding: 0 20px;
}

#excelrequest-page .er-upload-note {
    margin-top: 10px;

    font-size: 12px;

    color: #888;
}


/* ============================================================
   BOX
   ============================================================ */

#excelrequest-page .er-box {
    padding: 20px;
    margin-bottom: 20px;

    background: #fff;

    border: 1px solid #e1e5ea;
    border-radius: 6px;
}

#excelrequest-page .er-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
    padding-bottom: 12px;

    border-bottom: 1px solid #eee;
}

#excelrequest-page .er-section-title h3 {
    margin: 0;

    font-size: 19px;
}

#excelrequest-page .er-section-title span {
    color: #777;

    font-size: 13px;
}


/* ============================================================
   COLUMNS
   ============================================================ */

#excelrequest-page .er-columns {
    display: flex;

    gap: 15px;

    margin-bottom: 15px;
}

#excelrequest-page .er-columns label {
    display: flex;
    flex-direction: column;

    flex: 1;

    font-weight: 600;
}

#excelrequest-page .er-columns select {
    min-height: 38px;

    margin-top: 6px;
}


/* ============================================================
   PREVIEW
   ============================================================ */

#excelrequest-page .er-preview {
    margin-top: 20px;

    overflow-x: auto;
}

#excelrequest-page .er-preview table {
    width: 100%;

    border-collapse: collapse;
}

#excelrequest-page .er-preview th,
#excelrequest-page .er-preview td {
    padding: 8px 10px;

    border: 1px solid #ddd;

    text-align: left;

    font-size: 12px;
}

#excelrequest-page .er-preview th {
    background: #f5f5f5;
}


/* ============================================================
   STATUS
   ============================================================ */

#excelrequest-page .er-status {
    padding: 14px 18px;

    margin-bottom: 20px;

    border-radius: 5px;
}

#excelrequest-page .er-status.success {
    color: #155724;

    background: #d4edda;

    border: 1px solid #c3e6cb;
}


/* ============================================================
   PRODUCT
   ============================================================ */

#excelrequest-page .er-product {

    display: grid;

    /*
     * Снимка
     * Информация
     * Опаковка
     * Количество
     * Общо
     */

    grid-template-columns:
        80px
        minmax(200px, 1fr)
        minmax(220px, 1.4fr)
        150px
        120px;

    align-items: center;

    gap: 18px;

    width: 100%;

    box-sizing: border-box;

    padding: 18px 0;

    border-bottom: 1px solid #eee;
}

#excelrequest-page .er-product:last-child {
    border-bottom: 0;
}


/* ============================================================
   IMAGE
   ============================================================ */

#excelrequest-page .er-image {
    width: 80px;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fafafa;

    border: 1px solid #eee;
    border-radius: 4px;

    overflow: hidden;
}

#excelrequest-page .er-image img {
    display: block;

    max-width: 100%;
    max-height: 100%;
}


/* ============================================================
   INFO
   ============================================================ */

#excelrequest-page .er-info {
    min-width: 0;
}

#excelrequest-page .er-info b {
    display: block;

    margin-bottom: 7px;

    font-size: 15px;
}

#excelrequest-page .er-info b a {
    color: #333;
}

#excelrequest-page .er-info b a:hover {
    color: #2f8f5b;
}

#excelrequest-page .er-info small {
    display: block;

    margin-bottom: 8px;

    color: #888;

    word-break: break-word;
}

#excelrequest-page .er-info strong {
    display: block;

    font-size: 15px;

    font-weight: 600;
}


/* ============================================================
   PRICE / TOTAL COLUMN
   ============================================================ */

#excelrequest-page .er-price-column {

    width: 120px;

    min-width: 0;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    align-items: flex-end;
    justify-content: center;

    text-align: right;

    white-space: nowrap;
}

#excelrequest-page .er-price-label {
    display: block;

    margin-bottom: 5px;

    color: #777;

    font-size: 12px;
}

#excelrequest-page .er-price-column strong {
    display: block;

    font-size: 15px;

    font-weight: 600;

    white-space: nowrap;
}


/* ============================================================
   COMBINATIONS
   ============================================================ */

#excelrequest-page .er-combinations {
    min-width: 0;
}

#excelrequest-page .er-combinations-title {
    margin-bottom: 7px;

    font-size: 12px;

    font-weight: 700;

    color: #777;

    text-transform: uppercase;
}

#excelrequest-page .er-combination-option {

    position: relative;

    display: flex;
    align-items: center;

    min-height: 36px;

    padding: 5px 8px;

    margin-bottom: 4px;

    cursor: pointer;

    border: 1px solid transparent;

    border-radius: 4px;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

#excelrequest-page .er-combination-option:hover {

    background: #f5f7f8;

    border-color: #ddd;
}

#excelrequest-page .er-combination-option input {

    position: absolute;

    opacity: 0;

    width: 1px;
    height: 1px;
}

#excelrequest-page .er-radio {

    position: relative;

    display: inline-block;

    flex: 0 0 18px;

    width: 18px;
    height: 18px;

    margin-right: 8px;

    border: 2px solid #aaa;

    border-radius: 50%;

    background: #fff;
}

#excelrequest-page
.er-combination-option input:checked
+ .er-radio {

    border-color: #2f8f5b;
}

#excelrequest-page
.er-combination-option input:checked
+ .er-radio:after {

    position: absolute;

    content: "";

    left: 3px;
    top: 3px;

    width: 8px;
    height: 8px;

    background: #2f8f5b;

    border-radius: 50%;
}

#excelrequest-page .er-combination-label {

    flex: 1;

    min-width: 0;

    font-size: 13px;
}

#excelrequest-page .er-combination-option small {

    margin-left: 8px;

    color: #888;

    white-space: nowrap;
}


/* ============================================================
   QUANTITY
   ============================================================ */

#excelrequest-page .er-quantity {

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
}

#excelrequest-page .er-quantity button {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 36px;

    width: 36px;
    height: 40px;

    padding: 0;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    border: 1px solid #ddd;

    background: #f5f5f5;
}

#excelrequest-page .er-quantity button:hover {

    background: #e9e9e9;
}

#excelrequest-page .er-quantity .er-minus {

    border-radius: 4px 0 0 4px;
}

#excelrequest-page .er-quantity .er-plus {

    border-radius: 0 4px 4px 0;
}

#excelrequest-page .er-quantity .er-qty {

    width: 70px;
    height: 40px;

    min-width: 0;

    padding: 0 5px;

    text-align: center;

    border: 1px solid #ddd;

    border-left: 0;
    border-right: 0;

    box-sizing: border-box;
}


/* ============================================================
   SPIN BUTTONS
   ============================================================ */

#excelrequest-page .er-qty::-webkit-inner-spin-button,
#excelrequest-page .er-qty::-webkit-outer-spin-button {
    opacity: 1;
}


/* ============================================================
   NOT FOUND
   ============================================================ */

#excelrequest-page .er-notfound {

    margin-bottom: 20px;
}

#excelrequest-page .er-nf-title {

    padding: 12px 15px;

    margin-bottom: 10px;

    color: #721c24;

    background: #f8d7da;

    border: 1px solid #f5c6cb;

    border-radius: 4px;

    font-weight: 700;
}

#excelrequest-page .er-notfound table {

    width: 100%;

    border-collapse: collapse;

    background: #fff;
}

#excelrequest-page .er-notfound th,
#excelrequest-page .er-notfound td {

    padding: 9px 10px;

    border: 1px solid #ddd;

    text-align: left;
}

#excelrequest-page .er-notfound th {

    background: #f5f5f5;
}


/* ============================================================
   SUMMARY
   ============================================================ */

#excelrequest-page .er-summary {

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 20px;

    background: #f5f7fa;

    border: 1px solid #e1e5ea;

    border-radius: 6px;

    box-sizing: border-box;
}

#excelrequest-page .er-summary > div {

    display: flex;

    flex-direction: column;

    min-width: 110px;
}

#excelrequest-page .er-summary-label {

    margin-bottom: 4px;

    color: #777;

    font-size: 12px;
}

#excelrequest-page .er-summary strong {

    font-size: 19px;
}

#excelrequest-page #er-cart {

    margin-left: auto;
}


/* ============================================================
   THEME CONTAINER WIDTH
   ============================================================ */

@media (min-width: 1200px) {

    #excelrequest-page {

        width: 100%;

        max-width: none;
    }

    #excelrequest-page .er-box,
    #excelrequest-page .er-upload-card,
    #excelrequest-page .er-head,
    #excelrequest-page .er-summary {

        width: 100%;

        box-sizing: border-box;
    }
}


/* ============================================================
   LARGE TABLET
   ============================================================ */

@media (max-width: 1200px) {

    #excelrequest-page .er-product {

        grid-template-columns:
            70px
            minmax(180px, 1fr)
            minmax(200px, 1fr)
            140px
            110px;

        gap: 14px;
    }

    #excelrequest-page .er-price-column {

        width: 110px;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    #excelrequest-page .er-product {

        grid-template-columns:
            70px
            minmax(180px, 1fr)
            minmax(200px, 1fr);

        position: relative;
    }

    #excelrequest-page .er-quantity {

        grid-column: 2 / 4;

        justify-content: flex-start;

        margin-top: 5px;
    }

    #excelrequest-page .er-price-column {

        grid-column: 2 / 4;

        justify-self: start;

        align-items: flex-start;

        text-align: left;

        width: auto;

        margin-top: 5px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    #excelrequest-page .er-head {

        padding: 20px;
    }

    #excelrequest-page .er-head h1 {

        font-size: 22px;
    }

    #excelrequest-page .er-file-badge {

        display: none;
    }


    /* UPLOAD */

    #excelrequest-page .er-upload-main {

        display: block;
    }

    #excelrequest-page .er-file-label {

        margin-bottom: 10px;
    }

    #excelrequest-page .er-upload-button {

        width: 100%;
    }


    /* COLUMNS */

    #excelrequest-page .er-columns {

        display: block;
    }

    #excelrequest-page .er-columns label {

        margin-bottom: 12px;
    }


    /* SECTION TITLE */

    #excelrequest-page .er-section-title {

        display: block;
    }

    #excelrequest-page .er-section-title span {

        display: block;

        margin-top: 6px;
    }


    /* PRODUCT */

    #excelrequest-page .er-product {

        display: grid;

        grid-template-columns:
            60px
            minmax(0, 1fr);

        gap: 12px;

        width: 100%;
    }


    /* IMAGE */

    #excelrequest-page .er-image {

        width: 60px;
        height: 60px;
    }


    /* INFO */

    #excelrequest-page .er-info {

        grid-column: 2;

        min-width: 0;
    }


    /* COMBINATIONS */

    #excelrequest-page .er-combinations {

        grid-column: 1 / 3;

        width: 100%;
    }


    /* QUANTITY */

    #excelrequest-page .er-quantity {

        grid-column: 1 / 3;

        justify-content: flex-start;

        width: 100%;
    }


    /* PRICE */

    #excelrequest-page .er-price-column {

        grid-column: 1 / 3;

        justify-self: start;

        align-items: flex-start;

        text-align: left;

        width: auto;

        margin-top: 0;
    }


    /* SUMMARY */

    #excelrequest-page .er-summary {

        display: flex;

        flex-wrap: wrap;

        gap: 15px;
    }

    #excelrequest-page .er-summary > div {

        min-width: calc(50% - 10px);
    }

    #excelrequest-page #er-cart {

        width: 100%;

        margin-left: 0;
    }
}


/* ============================================================
   EXCEL REQUEST - FULL CONTENT WIDTH
   ============================================================ */

body#module-excelrequest-display #center_column {

    width: 75% !important;

    max-width: 75% !important;

    flex: 0 0 75% !important;
}

body#module-excelrequest-display #excelrequest-page {

    width: 100% !important;

    max-width: none !important;

    margin-left: 0 !important;

    margin-right: 0 !important;
}


/*
 * Ако темата използва float вместо flex.
 */

body#module-excelrequest-display #center_column {

    float: right !important;
}


/*
 * Основните кутии да използват
 * цялата налична ширина.
 */

body#module-excelrequest-display #excelrequest-page .er-head,
body#module-excelrequest-display #excelrequest-page .er-upload-card,
body#module-excelrequest-display #excelrequest-page .er-box,
body#module-excelrequest-display #excelrequest-page .er-summary {

    width: 100%;

    box-sizing: border-box;
}


/*
 * Продуктите също да използват
 * цялата ширина.
 */

body#module-excelrequest-display #excelrequest-page .er-product {

    width: 100%;

    box-sizing: border-box;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 992px) {

    body#module-excelrequest-display #center_column {

        width: 75% !important;

        max-width: 75% !important;
    }
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 991px) {

    body#module-excelrequest-display #center_column {

        width: 100% !important;

        max-width: 100% !important;

        float: none !important;
    }
}