/* =========================================================================
   SECTION 01 — MEDIA BUILDER MODULE
   Used by:  frontend/views/builder/media/*
   Adds:     .module-media, .media-item, search box, PDF/image/video/list
             card styles, product-link chip for fișe tehnice
   ========================================================================= */


.module-media {
    --media-gap: 1.5rem;
    --media-card-radius: var(--bs-border-radius-lg, 0.5rem);
    --media-muted: var(--bs-gray-600, #6c757d);
    --media-soft-bg: rgba(var(--bs-light-rgb), 1);
}

.module-media-title {
    margin-bottom: 1.5rem;
    font-family: var(--h-font);
    font-weight: 700;
}

/* Search — consistent cu .form-control din default.css */
.module-media-search {
    position: relative;
    max-width: 28rem;
}
.module-media-search-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: var(--media-muted);
    pointer-events: none;
}
.module-media-search-icon svg {
    width: 100%;
    height: 100%;
}
.module-media-search-input {
    padding-left: 3rem;
}
.module-media-search-input:focus {
    box-shadow: 0 0 0 1px var(--bs-primary) !important;
}

.module-media-no-results {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--media-muted);
    font-size: var(--text-xs);
}

/* Card */
.media-item {
    position: relative;
}
.media-item:hover {
    background-color: rgba(var(--bs-light-rgb), 0.6);
}


/* PDF thumbnail preview — doar când există companion .jpg */
.media-item-pdf-preview {
    display: block;
    aspect-ratio: 4 / 3;
    background-color: var(--white);
    border-radius: calc(var(--media-card-radius) - 2px);
    overflow: hidden;
}
.media-item-pdf-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.media-item-pdf-preview:hover img {
    transform: scale(1.03);
}

/* Head: iconiță tip fișier + titlu, pe aceeași linie */
.media-item-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.media-item-type-icon {
    width: 2.2rem;
    aspect-ratio: 1;
    color: var(--bs-secondary);
}
.media-item-type-icon svg {
    width: 100%;
    height: auto;
}


/* File icon (non-image/pdf/video) */
.media-item-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background-color: var(--white);
    border-radius: calc(var(--media-card-radius) - 2px);
    color: var(--bs-primary);
    transition: var(--transition);
}
.media-item-file-icon i {
    font-size: 2rem;
    opacity: 0.7;
}

/* Image card */
.media-item-image > a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: calc(var(--media-card-radius) - 2px);
    background-color: var(--white);
}
.media-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.media-item-image:hover img {
    transform: scale(1.04);
}

/* Video card */
.media-item-video .ratio {
    border-radius: calc(var(--media-card-radius) - 2px);
    overflow: hidden;
    background-color: var(--white);
}



/* Product link — chip subtle */
.media-item-product-link span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* List view */
.module-media-list {
    border-radius: var(--media-card-radius);
    overflow: hidden;
}
.media-item-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    transition: var(--transition);
}
.media-item-list:hover {
    background-color: var(--media-soft-bg);
}
.media-item-list > a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--bs-body-color);
    font-size: var(--text-xs);
}
.media-item-list > a:hover {
    color: var(--bs-primary);
}
.media-item-list .fa-file-pdf {
    color: var(--bs-secondary);
}
.media-item-list .fa-file-image {
    color: var(--bs-primary);
}
.media-item-list .fa-file-video,
.media-item-list .fa-file-audio {
    color: #6610f2;
}
.media-item-list .fa-file-word {
    color: #2b579a;
}
.media-item-list .fa-file-excel {
    color: #217346;
}
.media-item-list .fa-file-archive {
    color: var(--media-muted);
}
.media-item-list .media-item-description {
    margin: 0;
}

/* Empty */
.module-media-empty {
    min-height: 2rem;
}

@media (max-width: 767.98px) {
    .media-item-product-link span {
        max-width: 9rem;
    }
    .media-item-pdf-icon {
        width: 2.25rem;
        height: 2.25rem;
    }
}










/* =========================================================================
   SECTION 02 — CHECKOUT
   Used by:  frontend/views/checkout/index.php
             frontend/views/checkout/_form.php
             frontend/views/checkout/_products-part.php
             frontend/views/checkout/_summary-part.php
             frontend/views/checkout/_voucher-part.php
             frontend/views/checkout/_lockers-part.php
             frontend/views/checkout/thank-you.php
   Note:     .checkout-steps-wrapper, .radio-switch, .cart-page-products-inner
             and .empty-cart are already styled in custom.css — not duplicated.
   ========================================================================= */





/* --- 2.3  Delivery tabs (nav-tabs) --------------------------------------- */

.delivery-method .nav-tabs {
    --bs-nav-tabs-link-active-bg: rgba(var(--bs-light-rgb), 1);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color);
    --bs-nav-tabs-link-border-color: var(--bs-border-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    border: none;
}
.delivery-method .nav-tabs .nav-link {
    width: 100%;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: inherit;
    margin: 0;
    padding: 1rem;
    border: var(--bs-nav-tabs-border-width) solid var(--bs-border-color);
    color: var(--bs-gray-600);
}
.delivery-method .nav-tabs .nav-link.active {
    box-shadow: 0 0 0 1.5px var(--bs-primary);
    color: var(--bs-primary);
}




/* --- 2.4  Form radios (other_delivery, payment methods) ------------------ */
.checkout-page-form .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    cursor: pointer;
}
.checkout-page-form .form-check-input {
    margin: 0;
    flex-shrink: 0;
}




/* --- 2.5  Summary sidebar ------------------------------------------------ */

.checkout-products-part-wrapper .product-specification {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.checkout-products-part-wrapper .product-image {
    background-color: var(--white);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}
.checkout-products-part-wrapper .product-image img {
    width: 100%;
    max-width: 5rem;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1;
    padding: 0.25rem;
}

.checkout-products-part-wrapper .product-price .regular-price,
.checkout-products-part-wrapper .product-price .sale-price {
    font-size: var(--text-xs);
    margin: 0;
    white-space: nowrap;
}
.checkout-products-part-wrapper .product-sale-price .regular-price {
    color: var(--bs-gray-600);
    font-size: var(--text-xxs);
    display: block;
}
.checkout-products-part-wrapper .product-sale-price .sale-price {
    color: var(--bs-secondary);
    font-weight: 700;
}





/* --- 2.6  Summary lines (price breakdown) -------------------------------- */





/* --- 2.7  Voucher section ------------------------------------------------ */

.checkout-voucher {
    padding: 1.25rem;
    background-color: rgba(var(--bs-light-rgb), 1);
    border-radius: var(--bs-border-radius-lg);
    margin-bottom: 1.5rem;
}
.checkout-voucher .checkout-step-title {
    margin-bottom: 0.75rem;
}
.checkout-voucher .input-inner {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.checkout-voucher .input-wrapper {
    flex: 1;
    margin: 0 !important;
}
.checkout-voucher .btn_apply_voucher {
    flex-shrink: 0;
    align-self: stretch;
}
.btn_remove_voucher {
    margin-left: 0.5rem;
    padding: 0 0.5rem;
    line-height: 1.2;
    font-size: var(--text-xxs);
}




/* --- 2.8  Payment method card -------------------------------------------- */

.payment-method .form-check {
    background-color: var(--white);
    border-radius: var(--bs-border-radius);
}


.secure-connection-box {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background-color: var(--white);
    border: 1px solid #7db63b;
    border-radius: var(--bs-border-radius);
    opacity: 0.9;
}
.secure-connection-box svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}
.secure-connection-box-text {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.1em;
    color: #5a8c26;
}







/* --- 2.11  Thank-you page ------------------------------------------------ */

.checkout-thank-you {
    padding: 3rem 0;
}
.thanks-order-details {
    max-width: 40rem;
    margin: 0 auto;
    background-color: rgba(var(--bs-light-rgb), 1);
    border-radius: var(--bs-border-radius-lg);
}
.thanks-order-details .thank-you-wrapper {
    text-align: center;
}
.thanks-order-details .thank-you-wrapper .title > * {
    font-size: var(--heading-md);
    font-weight: 700;
    color: var(--bs-primary);
}
.thanks-order-details .text-inner {
    font-size: var(--text-xs);
    line-height: 1.7em;
    color: var(--bs-body-color);
}
.thanks-order-details .text-inner p {
    margin-bottom: 0.35rem;
}
.thanks-order-details .btn-wrapper {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}




/* --- 2.12  Address modals (invoice + delivery) --------------------------- */

.checkout-invoice-address,
.checkout-delivery {
    padding: 0;
}
.checkout-invoice-address .modal-header,
.checkout-delivery .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.checkout-invoice-address .modal-title,
.checkout-delivery .modal-title {
    font-size: var(--text-sm);
    font-weight: 700;
    margin: 0;
}
.checkout-invoice-address .modal-body,
.checkout-delivery .modal-body {
    padding: 1.5rem;
}

/* Tabs inside modal (persoana fizica / juridica) */
.checkout-invoice-address .nav-tabs {
    --bs-nav-tabs-link-active-bg: rgba(var(--bs-light-rgb), 1);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color);
    --bs-nav-tabs-link-border-color: var(--bs-border-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    border: none;
}
.checkout-invoice-address .nav-tabs .nav-link {
    width: 100%;
    font-weight: 600;
    text-transform: inherit;
    margin: 0;
    padding: 1.2rem;
    border: var(--bs-nav-tabs-border-width) solid var(--bs-border-color);
    color: var(--bs-gray-600);
    font-size: var(--text-xs);
}
.checkout-invoice-address .nav-tabs .nav-link.active {
    box-shadow: 0 0 0 1.5px var(--bs-primary);
    color: var(--bs-primary);
}

/* List of saved addresses */
.delivery-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 0.75rem;
}

/* Intro row: text + "Adauga adresa" button */
.add-delivery-address {
    flex-wrap: wrap;
    border-top: 1px dashed var(--bs-border-color);
    border-bottom: 1px dashed var(--bs-border-color);
}
.add-delivery-address > div p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--bs-gray-600);
}

/* Individual card (extends .user-address-box from 2.2) */
.address-card {
    cursor: pointer;
}
.address-card:hover {
    box-shadow: 0 0 0 1px var(--bs-primary);
}


/* "Modifica" button on saved address card — same subtle treatment */
.address-card .btn-secondary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--white);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    font-size: var(--text-xxs);
    font-weight: 600;
    text-transform: none;
}










/* =========================================================================
   SECTION 03 — AWB UPLOADER (distribuitor checkout)
   Used by:  frontend/views/checkout/_form.php  (only renders when
             Tools::getDistribuitor() returns truthy)
   Endpoints: /checkout/upload-awb, /checkout/remove-awb
   ========================================================================= */

/* --- 3.2  Drop zone ------------------------------------------------------ */

.awb-uploader {
    position: relative;
}
.awb-uploader.is-uploading {
    opacity: 0.7;
    pointer-events: none;
}

.awb-drop-zone {
    position: relative;
    display: block;
    padding: 1.25rem;
    background-color: var(--white);
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: var(--transition);
}
.awb-drop-zone:hover,
.awb-drop-zone.is-dragover {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.03);
}

.awb-drop-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.awb-drop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-radius: 50%;
}

.awb-drop-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: var(--text-xs);
    color: var(--bs-body-color);
}
.awb-drop-text strong {
    font-weight: 700;
}
.awb-drop-text span {
    font-size: var(--text-xxs);
    color: var(--bs-gray-600);
}

/* "alege din calculator" — inline link button */
.awb-browse-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--bs-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.awb-browse-btn:hover {
    color: var(--bs-secondary);
}




/* --- 3.3  File preview (after upload) ------------------------------------ */

.awb-file-preview {
    background-color: var(--white);
    border-radius: var(--bs-border-radius);
    padding: 0.75rem 1rem;
}
.awb-file-preview-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.awb-file-preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--bs-secondary);
}
.awb-file-preview-icon svg {
    width: 100%;
    height: 100%;
}
.awb-file-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}
.awb-file-preview-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.awb-file-preview-size {
    font-size: var(--text-xxs);
    color: var(--bs-gray-600);
}
.awb-file-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--bs-gray-600);
    cursor: pointer;
    transition: var(--transition);
}
.awb-file-remove:hover {
    background-color: var(--bs-secondary);
    color: var(--white);
}




/* --- 3.4  Status messages ------------------------------------------------ */

.awb-uploader-status {
    margin-top: 0.5rem;
    font-size: var(--text-xxs);
    line-height: 1.4em;
}
.awb-uploader-status.is-error {
    color: var(--bs-secondary);
}
.awb-uploader-status.is-info {
    color: var(--bs-gray-600);
}










/* =========================================================================
   SECTION 04 — QUICK ORDER (Comanda rapida)
   Used by:  frontend/views/user/quick-order.php
             frontend/views/user/_quick-order-items-part.php
             frontend/views/user/_quick-order-summary-part.php
   Reuses:   checkout-step-group, user-address-box, awb-uploader,
             nav-tabs (from section 02)
   ========================================================================= */
.quick-order-items-wrap {
    border-top: 1px dashed var(--bs-border-color);
}

.checkout-step-group {
    margin-bottom: 1.5rem;
}
.field-checkoutform-note {
    margin-bottom: 0 !important;
    background: var(--white);
}
.field-checkoutform-note .form-label {
    margin: 0;
}
.checkout-step-group textarea {
    background-color: var(--white);
    margin-top: 0.5rem;
}
/* --- 4.1  Page wrapper --------------------------------------------------- */




/* --- 4.2  Product search ------------------------------------------------- */

.quick-order-search {
    position: relative;
    margin-bottom: 1rem;
}
.quick-order-search-icon {
    display: flex;
    position: absolute;
    top: 0.9rem;
    left: 1rem;
    width: 1rem;
    height: auto;
    color: var(--bs-gray-600);
    pointer-events: none;
}
.quick-order-search-icon svg {
    width: 100%;
    height: 100%;
}
.quick-order-search-input {
    padding-left: 2.5rem;
}
.quick-order-search-input:focus {
    box-shadow: 0 0 0 1px var(--bs-primary) !important;
}

.quick-order-search-results {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 10;
    max-height: 22rem;
    overflow-y: auto;
    background-color: var(--white);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--bs-border-color);
}
.qo-search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--bs-gray-600);
    font-size: var(--text-xs);
}

.qo-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color2);
    transition: var(--transition);
}
.qo-search-item:last-child {
    border-bottom: 0;
}
.qo-search-item:hover {
    background-color: rgba(var(--bs-light-rgb), 1);
}
.qo-search-item-thumb {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--white);
    overflow: hidden;
}
.qo-search-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.15rem;
}
.qo-search-item-body {
    flex: 1;
    min-width: 0;
}
.qo-search-item-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qo-search-item-meta {
    font-size: var(--text-xxs);
    color: var(--bs-gray-600);
}
.qo-search-item-add {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    background-color: var(--bs-primary);
    border: 0;
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    transition: var(--transition);
}
.qo-search-item-add:hover {
    background-color: var(--bs-body-color);
}
.qo-search-item-add svg {
    width: 1.2em;
    height: auto;
}


.form-check:has(.qo_other_delivery_option) {                                  
      display: flex;   
      align-items: center;
      border-bottom: 1px solid var(--bs-border-color2);
      cursor: pointer;                                                          
      transition: border-color .15s, background-color .15s;     
      max-resolution: 0;                
  }                                                                             
                                                                                

                                                                                
                                                      
  
  /* label-ul (cuprinde input + text) */                                        
  .form-check:has(.qo_other_delivery_option) .form-check-label {
      display: flex;                                                            
      align-items: center;
      gap: .75rem;
      width: 100%;                                                              
      margin: 0;
      cursor: pointer;                                                          
      font-size: .875rem;
      padding: 1rem 0;
  }

  /* radio custom — direct pe input */                                          
  .qo_other_delivery_option {
      appearance: none;                                                         
      -webkit-appearance: none;
      width: 1.5rem;                                                              
      height: 1.5rem;
      border: 0.1rem solid #c0c0c0;                                                
      border-radius: 50%;
      background-color: #fff;
      margin: 0;                    /* scoate margin negativ Bootstrap */
      flex-shrink: 0;                                                           
      cursor: pointer;
      transition: border-color .15s, background-image .15s;                     
  }               
                                                                                
  .qo_other_delivery_option:checked {
    border-color: var(--bs-primary);
    background-image: radial-gradient(circle, var(--bs-primary) 0.375rem, transparent 0px);
    background-color: var(--white);
  }                                                                             
  
  .qo_other_delivery_option:focus-visible {                                     
      outline: none;
      box-shadow: 0 0 0 0.188rem rgba(22, 163, 74, .25);
  }      




/* --- 4.3  Items list ----------------------------------------------------- */

.qo-items-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--bs-gray-600);
    font-size: var(--text-xs);
    background-color: rgba(var(--bs-light-rgb), 1);
    border-radius: var(--bs-border-radius);
}
.qo-items-empty p {
    margin: 0;
}

.qo-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.qo-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: var(--transition);
}
.qo-item:hover {
    border-color: var(--bs-primary);
}
.qo-item-thumb {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--white);
}
.qo-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.15rem;
}
.qo-item-body {
    flex: 1;
    min-width: 0;
}
.qo-item-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qo-item-meta {
    font-size: var(--text-xxs);
    color: var(--bs-gray-600);
}

.qo-item-qty {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    background-color: var(--white);
    border-radius: var(--bs-border-radius-pill);
    padding: 0.15rem 0.25rem;
}
.qo-qty-minus,
.qo-qty-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    line-height: 1;
    font-size: 0.95rem;
    background-color: rgba(var(--bs-light-rgb), 1);
    border: 0;
    border-radius: 50%;
    color: var(--bs-primary);
    cursor: pointer;
    transition: var(--transition);
}
.qo-qty-minus:hover,
.qo-qty-plus:hover {
    background-color: var(--bs-primary);
    color: var(--white);
}
.qo-qty-input {
    width: 2.5rem;
    padding: 0;
    text-align: center;
    background: transparent;
    border: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    -moz-appearance: textfield;
}
.qo-qty-input::-webkit-outer-spin-button,
.qo-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qo-qty-input:focus {
    outline: none;
}

.qo-item-price {
    flex-shrink: 0;
    min-width: 5rem;
    text-align: right;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--bs-primary);
}

.qo-item-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    /* line-height: 1; */
    /* font-size: 1.1rem; */
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--bs-gray-700);
    cursor: pointer;
    transition: var(--transition);
}
.qo-item-remove:hover {
    background-color: var(--bs-secondary);
    color: var(--white);
}




/* --- 4.4  Summary extras (free delivery, crossed price) ------------------ */

.qo-summary-note {
    margin: 0.75rem 0 0;
    font-size: var(--text-xxs);
    color: var(--bs-gray-600);
}

.qo-free-delivery-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background-color: #d4edda;
    color: #155724;
    border-radius: var(--bs-border-radius-pill);
    font-size: var(--text-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.qo-delivery-crossed {
    display: inline-block;
    margin-left: 0.5rem;
    color: var(--bs-gray-600);
    font-size: var(--text-xxs);
    opacity: 0.7;
}




/* --- 4.5  CSV import ----------------------------------------------------- */

.quick-order-search-row {
    display: flex;
    gap: 0.5rem;
    position: relative;
}
.quick-order-search-row .quick-order-search {
    flex: 1;
    margin-bottom: 0;
}

.qo-import-csv-btn:hover {
    background-color: var(--bs-primary);
    color: var(--white);
}
.qo-import-csv-btn:disabled,
.qo-import-csv-btn.is-loading {
    opacity: 0.6;
    cursor: wait;
}

.qo-csv-hint {
    margin: 0.5rem 0 1rem;
    font-size: var(--text-xxs);
    color: var(--bs-gray-600);
    line-height: 1.4em;
}
.qo-csv-hint em {
    font-style: normal;
    font-weight: 600;
    color: var(--bs-body-color);
}

.qo-csv-result {
    position: relative;
    padding: 0.9rem 2.25rem 0.9rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--bs-border-radius);
    font-size: var(--text-xs);
}
.qo-csv-result p {
    margin: 0 0 0.35rem;
}
.qo-csv-result p:last-child {
    margin-bottom: 0;
}
.qo-csv-result.is-info {
    background-color: rgba(var(--bs-light-rgb), 1);
    color: var(--bs-gray-600);
}
.qo-csv-result.is-error {
    background-color: rgba(var(--bs-secondary-rgb), 0.08);
    color: var(--bs-secondary);
}
.qo-csv-result.is-success {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    color: var(--bs-body-color);
}
.qo-csv-result strong {
    font-weight: 700;
}
.qo-csv-result-meta {
    font-size: var(--text-xxs);
    color: var(--bs-gray-600);
}
.qo-csv-result-meta em {
    font-style: normal;
    font-weight: 600;
    color: var(--bs-body-color);
}
.qo-csv-result-close {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    line-height: 1;
    font-size: 1.1rem;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    transition: var(--transition);
}
.qo-csv-result-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.qo-csv-result-skipped {
    margin-top: 0.5rem;
    font-size: var(--text-xxs);
}
.qo-csv-result-skipped summary {
    cursor: pointer;
    color: var(--bs-primary);
    font-weight: 600;
}
.qo-csv-result-skipped ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    color: var(--bs-gray-600);
}
.qo-csv-result-skipped li {
    margin-bottom: 0.15rem;
}
.qo-csv-result-skipped code {
    font-size: 0.95em;
    color: var(--bs-body-color);
}




/* --- 4.6  Responsive ----------------------------------------------------- */

@media (max-width: 767.98px) {
    .quick-order-search-row {
        flex-direction: column;
    }
    .qo-import-csv-btn {
        width: 100%;
        justify-content: center;
    }

    .qo-item {
        flex-wrap: wrap;
        padding: 0.75rem;
    }
    .qo-item-thumb { width: 2.5rem; height: 2.5rem; }
    .qo-item-body { flex: 1 1 100%; order: -1; }
    .qo-item-qty { order: 0; }
    .qo-item-price { order: 1; min-width: 0; flex: 1; }
    .qo-item-remove { order: 2; }
}










/* =========================================================================
   SECTION 05 — DISCOUNTS
   Used by:
     frontend/views/user/index.php (+ _discounts-widget.php)
     frontend/views/product/_product-card.php (strikethrough + badge)
   Backend styles (admin discount preset editor, user edit discount section)
   live in this section too, scoped under .discount-* classes.
   ========================================================================= */


/* --- 5.1  widget on my-account ------------------------------ */

.discounts-widget-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: var(--white);
    font-size: var(--text-md);
    font-weight: 700;
}

.discounts-widget-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    align-items: flex-start;
}

.discounts-list {
    display: flex;
    flex-direction: column;
}
.discounts-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--text-xs);
    border-bottom: 1px solid var(--bs-border-color2);
}
.discounts-item:last-child {
    padding: 0 !important;
    margin: 0 !important;
    border: none;
}
.discounts-item-target {
    color: var(--bs-body-color);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.discounts-item-pct {
    flex-shrink: 0;
    padding: 0.25rem 0.55rem;
    font-size: var(--text-xxs);
    font-weight: 600;
}
.discounts-item-dates {
    flex-shrink: 0;
    font-size: var(--text-xxs);
    color: var(--bs-gray-600);
}




/* --- 5.2  User discount chrome (badge + threshold hint) ----------------- */

.user-discount-badge {
    /* padding: 0.35rem 0.55rem; */
    font-size: var(--text-xxs);
    background-color: rgba(var(--bs-light-rgb), 1);
    color: var(--bs-primary);
    font-weight: 700;
    text-transform: uppercase;
}


.user-discount-threshold {
    margin-top: 0.15rem;
    color: var(--bs-gray-600);
    font-size: var(--text-xxs);
    line-height: 1.3em;
}


.discounts-item-threshold {
    flex-shrink: 0;
    font-size: var(--text-xxs);
    color: var(--bs-gray-600);
}


/* Product card corner badge ("-25%") — overlays the product image, top-left.
   Combines sale_price + user discount via Product::getEffectiveDiscountPercent(). */
.product-discount-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.5rem 0.55rem;
    font-size: var(--text-xxs);
    font-weight: 700;
    line-height: 1;
    color: var(--white);
    background-color: var(--bs-danger);
    border-radius: var(--bs-border-radius);
    z-index: 2;
}




/* --- 5.3  Pending threshold messages (cart, checkout, quick order) ------- */


.cpsl-pending-thresholds,
.cart-pending-thresholds,
.checkout-pending-thresholds,
.qo-pending-thresholds {
    color: var(--bs-body-color);
}

.cpsl-pending-thresholds p,
.cart-pending-thresholds p,
.checkout-pending-thresholds p,
.qo-pending-thresholds p {
    margin: 0;
}

.cpsl-pending-thresholds p + p,
.cart-pending-thresholds p + p,
.checkout-pending-thresholds p + p,
.qo-pending-thresholds p + p {
    margin-top: 0.25rem;
}




/* --- 5.4  Responsive ---------------------------------------------------- */

@media (max-width: 575.98px) {
    .discounts-widget-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
    .discounts-item {
        flex-wrap: wrap;
    }
}










/* =========================================================================
   SECTION 06 — SHOP FILTERS (category + promotii + search listings)
   Used by:
     frontend/views/product/category.php
     frontend/views/promotii/index.php
     frontend/views/search/index.php
   Moved out of category.php inline <style> on 2026-05-20 so /promotii can
   reuse the same chrome.
   ========================================================================= */


/* --- 6.1  Filters sidebar ---------------------------------------------- */

.filters-wrapper {
    padding: 1rem;
    user-select: none;
}

.filters-tab {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #0000000a;
}
.filters-tab:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0;
    border: none;
}

.filters-tab-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--bs-primary);
    cursor: pointer;
}
.filters-tab-title svg {
    width: 0.6rem;
    height: auto;
    transition: var(--transition);
}
.filters-tab-title.collapsed svg {
    transform: rotate(-180deg);
}

.filters-tab-content {
    font-size: var(--text-xs);
}
.filters-tab-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.filters-tab-content .filters-tab-content-inner {
    padding: 1rem 0 0 0;
}


.filters-tab-content .category-list li a {
    display: flex;
    padding: 0.5rem 1rem;
    border-radius: var(--bs-border-radius-lg);
}


/* --- 6.2  Individual filter items (checkbox-style links) --------------- */

.li-filter-item {
    margin-bottom: 0.75rem;
}
.li-filter-item:last-child {
    margin-bottom: 0;
}

.filter_link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 0.5rem;
}
.filter_link .icon {
    display: flex;
    align-items: center;
    background-color: rgba(var(--bs-light-rgb), 1);
    padding: 0.25rem;
    border-radius: var(--bs-border-radius);
}
.filter_link .icon svg {
    width: 1rem;
    height: auto;
    opacity: 0;
    visibility: hidden;
}
.li-filter-item.active .filter_link .icon svg {
    opacity: 1;
    visibility: visible;
}


/* --- 6.3  Price filter ------------------------------------------------- */

.price-filter {
    padding: 10px 0;
}
.price-filter .form-label {
    font-size: 0.7rem;
}

.btn_apply_price_filter {
    margin-top: 1rem;
}


/* --- 6.4  Reset + form controls ---------------------------------------- */

.btn_reset_filters {
    width: 100%;
}

.filters-tab .form-control {
    padding: 0.5rem;
    background-color: rgba(var(--bs-light-rgb), 1);
}


/* --- 6.5  Listing header (count + sort) -------------------------------- */



/* --- 6.6  Empty state (promotii only) ---------------------------------- */

.promotii-empty {
    color: var(--bs-gray-700);
}


/* --- 6.7  Responsive --------------------------------------------------- */

@media (max-width: 991px) {

    .custom-dropdown {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .shop-filters {
        gap: 20px;
    }
    .filters-tab {
        padding: 15px;
    }
    .pagination-container {
        margin-top: 30px;
        padding-top: 20px;
    }
    .pagination a,
    .pagination span {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 36px;
    }
}




/* --- 6.8  Category tree (active path + expand toggle) ------------------ */
/* Used by frontend/views/product/_subcategories-filters.php — recursive
   sidebar tree where the path from the root down to the current category
   is auto-expanded by the controller (via $ancestor_ids), and the current
   node gets `.active`. */

.li-category {
    margin-bottom: 0.15rem;
}
.li-category:last-child {
    margin-bottom: 0;
}

.li-category .category-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.li-category .category-title-wrapper > a {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--bs-body-color);
    text-decoration: none;
}
.li-category .category-title-wrapper > a:hover {
    color: var(--bs-primary);
}

/* Active node — the category page we're currently on. */
.li-category.active > .category-title-wrapper > a {
    color: var(--bs-primary);
    font-weight: 700;
    background-color: var(--white);
}

/* Ancestor nodes on the active path — subtler hint. */
.li-category.on-path:not(.active) > .category-title-wrapper > a {
    color: var(--bs-primary);
    font-weight: 600;
}

/* +/x expand toggle (rotates +45° to look like x when open). */
.category-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem;
    background: transparent;
    border: 0;
    color: var(--bs-gray-600);
    cursor: pointer;
    border-radius: var(--bs-border-radius);
}
.category-toggle:hover {
    color: var(--bs-primary);
    background-color: var(--white);
}
.category-toggle svg {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform 0.2s ease;
}
.category-toggle:not(.collapsed) svg {
    transform: rotate(45deg);
}

/* Indent each nested level — keeps the recursion visually obvious. */
.li-category ul {
    list-style: none;
    padding-left: 1rem;
    margin: 0.25rem 0 0.25rem 0;
}



/* =========================================================================
   SECTION 07 — SEARCH RESULTS
   Used by:
     frontend/views/search/index.php          (pagina /search)
     frontend/views/builder/menu/results.php  (dropdown-ul din header)
   Pagina refoloseste chrome-ul din SECTION 06 (.filters-wrapper, .category-header,
   .products-grid), asa ca aici raman doar bucatile proprii cautarii.
   ========================================================================= */


/* --- 7.1  Dropdown: randul "Vezi toate rezultatele" ---------------------- */

.search-results-all {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.search-results-all .results-item.all {
    color: var(--bs-primary);
}


/* --- 7.2  Pagina: lista de pagini/articole ------------------------------- */

.search-page-results-list .results-item.pages {
    border-color: var(--bs-border-color) !important;
    background-color: var(--white);
}

.search-page-results-list .results-item.pages:hover {
    padding-left: 1.25rem;
    background-color: rgba(var(--bs-light-rgb), 1);
}


/* --- 7.3  Stari goale ---------------------------------------------------- */

.search-empty .search-empty-brands {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
}