/* =========================================================================
   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 {am rez
    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.4b  Acord termeni (bifa de deasupra butonului) -------------------- */
/* default.css ascunde global input[type="checkbox"], deci bifa trebuie adusa
   inapoi la vedere. Selectorul are specificitate mai mare, restul aspectului
   il face bootstrap prin .form-check-input.
   {error} sta in interiorul .form-check, ca sa ramana frate cu inputul —
   bootstrap afiseaza mesajul prin `.is-invalid ~ .invalid-feedback`. De-aia
   randul e flex-wrap, altfel eroarea ar sta pe aceeasi linie cu textul. */

.checkout-terms .form-check {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 0.6rem;
    row-gap: 0.35rem;
    padding: 0;
}

.checkout-terms .form-check-input[type="checkbox"] {
    display: block;
    flex-shrink: 0;
    float: none;
    margin: 0.15rem 0 0 0;
}

.checkout-terms .form-check-label {
    display: block;
    flex: 1;
    margin: 0;
    font-size: var(--text-xxs);
    line-height: 1.5;
    cursor: pointer;
}

.checkout-terms .form-check-label a {
    color: var(--bs-primary);
    text-decoration: underline;
}

.checkout-terms .invalid-feedback {
    width: 100%;
    margin: 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: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.discounts-list {
    display: flex;
    flex-direction: column;
}
.discounts-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    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);
}
.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.6  Empty state (promotii only) ---------------------------------- */

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





/* --- 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: rândul "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  Stări goale ---------------------------------------------------- */

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








/* =========================================================================
   SECTION 08 — PHONE MASK (07xx xxx xxx)
   Used by: inputurile marcate .js-phone-mask
     frontend/views/checkout/_form.php               (facturare + livrare diferita)
     frontend/views/user/personal-data.php
     frontend/views/user/_address-modal-content.php
     frontend/views/user/_nav.php
   Logica: frontend/web/js/custom.js, blocul "PHONE MASK".

   Fantoma e un <span> asezat peste input, cu portiunea deja tastata tinuta
   invizibila inauntru, ca restul mastii sa inceapa exact unde s-a oprit
   cursorul. Fontul, paddingul si pozitia se copiaza din input prin JS, deci
   nu se dubleaza aici — schimbi .form-control si masca urmeaza singura.
   ========================================================================= */


/* --- 8.1  Gazda (containerul campului din ActiveForm) -------------------- */
/* .form-group la yii\widgets, .mb-3 .field-<id> la yii\bootstrap5.          */

.phone-mask-host {
    position: relative;
}


/* --- 8.2  Masca gri ------------------------------------------------------ */

.phone-mask-ghost {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--bs-gray-600);
    white-space: pre;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Copia textului deja tastat: tine latimea reala, dar nu se vede. */
.phone-mask-ghost .phone-mask-typed {
    visibility: hidden;
}


/* =========================================================================
   SECTION 09 — GOOGLE reCAPTCHA (v2 invisible)
   =========================================================================
   Insigna Google pluteste implicit peste continut, in coltul din dreapta jos,
   unde avem deja banner-ul de cookies. O ascundem — permis de termenii Google
   cu conditia sa afisam textul de mai jos, pe care il randeaza ReCaptcha::field().
   ========================================================================= */

.grecaptcha-badge {
    visibility: hidden;
}

.recaptcha-notice {
    margin-bottom: 0;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.4;
}

.recaptcha-notice a {
    color: inherit;
    text-decoration: underline;
}








/* =========================================================================
   SECTION 10 — ACCESIBILITATE
   =========================================================================
   Cerinte WCAG 2.1 AA care nu tin de o pagina anume. Vezi declaratia de
   accesibilitate (Legea 232/2022).
   ========================================================================= */


/* --- 10.1  Skip link (WCAG 2.4.1) ---------------------------------------

   Primul element focusabil din pagina. Ascuns pana la focus, apoi coboara
   peste header. Fara el, cine navigheaza din tastatura trece prin tot meniul
   pe fiecare pagina inainte sa ajunga la continut.
   ------------------------------------------------------------------------ */

.skip-link {
    position: fixed;
    top: 0;
    left: 1rem;
    z-index: 1080; /* peste #header (fixed-top, 1030) */
    padding: 0.7rem 1.25rem;
    background-color: var(--bs-primary);
    color: #fff;
    text-decoration: none;
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    transform: translateY(-101%);
    transition: var(--transition);
}

.skip-link:focus {
    color: #fff;
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: -6px;
}


/* Header-ul e fixed-top, deci tinta ar ajunge sub el dupa salt. */
#main-content {
    scroll-margin-top: 120px;
}

/* main[tabindex="-1"] primeste focus programatic dupa salt — fara contur. */
#main-content:focus {
    outline: none;
}








/* =========================================================================
   SECTION 11 — RETRAGERE DIN CONTRACT (cerere de retur)
   =========================================================================
   Fluxul public /retragere-contract, in patru pasi. Toate clasele sunt
   prefixate `retragere-`, ca sectiunea sa se poata muta intreaga.
   ========================================================================= */


/* --- 11.1  Cadru si antet ----------------------------------------------- */

.retragere-page {
    background-color: rgba(var(--bs-light-rgb), 0.4);
}

.retragere-header {
    margin-bottom: 1.5rem;
}

.retragere-header h1 {
    font-family: var(--h-font);
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.retragere-header p {
    margin-bottom: 0;
    font-size: var(--text-sm);
}

.retragere-card {
    padding: 1.75rem;
    background-color: #fff;
    border-radius: var(--bs-border-radius-lg);
}


/* --- 11.2  Indicatorul de pasi ------------------------------------------ */

.retragere-pasi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(var(--bs-light-rgb), 1);
}

.retragere-pas {
    font-size: var(--text-xs);
    color: var(--bs-secondary-color, #6c757d);
}

.retragere-pas.activ {
    color: var(--bs-primary);
    font-weight: 600;
}

.retragere-pas.gata {
    color: var(--bs-primary);
    opacity: 0.65;
}


/* --- 11.3  Lista de produse --------------------------------------------

   default.css ascunde global input[type=checkbox], asa ca bifele din flux
   trebuie facute vizibile explicit — aceeasi capcana ca la acordul GDPR
   de la checkout.
   ------------------------------------------------------------------------ */

.retragere-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.retragere-produs {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.9rem 1rem;
    background-color: rgba(var(--bs-light-rgb), 0.5);
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.retragere-produs:hover {
    border-color: rgba(var(--bs-light-rgb), 1);
}

.retragere-produs:has(.retragere-bifa:checked) {
    background-color: #fff;
    border-color: var(--bs-primary);
}

.retragere-bifa {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--bs-primary);
    cursor: pointer;
}

.retragere-produs-imagine {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    overflow: hidden;
    background-color: #fff;
    border-radius: var(--bs-border-radius);
}

.retragere-produs-imagine img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.retragere-produs-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.retragere-produs-nume {
    font-size: var(--text-sm);
    font-weight: 500;
}

.retragere-produs-cod,
.retragere-produs-cantitate {
    font-size: var(--text-xxs);
    color: var(--bs-secondary-color, #6c757d);
}

.retragere-produs-pret {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}


/* --- 11.4  Note, acord, actiuni ----------------------------------------- */

.retragere-nota {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    font-size: var(--text-xs);
    border-radius: var(--bs-border-radius);
}

.retragere-nota-info {
    background-color: rgba(var(--bs-light-rgb), 0.7);
}

.retragere-nota-atentie {
    background-color: rgba(255, 193, 7, 0.12);
}

.retragere-nota-ok {
    background-color: rgba(25, 135, 84, 0.1);
}

.retragere-acord {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.25rem 0;
    font-size: var(--text-xs);
}

.retragere-acord label {
    margin-bottom: 0;
}

.retragere-ajutor {
    margin-bottom: 1.25rem;
    font-size: var(--text-xxs);
    color: var(--bs-secondary-color, #6c757d);
}

.retragere-actiuni {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}


/* --- 11.5  Recapitulare si pagina de succes ----------------------------- */

.retragere-recapitulare {
    margin-bottom: 1.5rem;
}

.retragere-rand {
    display: flex;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(var(--bs-light-rgb), 1);
    font-size: var(--text-sm);
}

.retragere-rand-bloc {
    flex-direction: column;
    gap: 0.35rem;
}

.retragere-eticheta {
    flex: 0 0 170px;
    color: var(--bs-secondary-color, #6c757d);
    font-size: var(--text-xs);
}

.retragere-valoare {
    flex: 1 1 auto;
}

.retragere-recap-lista {
    margin: 0;
    padding-left: 1.1rem;
}

.retragere-recap-cantitate {
    color: var(--bs-secondary-color, #6c757d);
}

.retragere-succes {
    text-align: center;
}

.retragere-succes-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    font-size: 1.9rem;
    color: #fff;
    background-color: var(--bs-primary);
    border-radius: var(--bs-border-radius-pill);
}

.retragere-succes h1 {
    font-family: var(--h-font);
    font-size: 1.6rem;
}

.retragere-numar {
    font-size: var(--text-md);
}

.retragere-succes .retragere-recap-lista-wrap,
.retragere-succes .retragere-pasi-urmatori {
    margin: 1.75rem auto 0;
    padding: 1.25rem;
    max-width: 460px;
    text-align: left;
    background-color: rgba(var(--bs-light-rgb), 0.5);
    border-radius: var(--bs-border-radius);
}

.retragere-succes .retragere-pasi-urmatori h2 {
    font-size: var(--text-md);
    margin-bottom: 0.75rem;
}

.retragere-succes .retragere-pasi-urmatori ol {
    margin: 0;
    padding-left: 1.1rem;
    font-size: var(--text-xs);
}

.retragere-succes .retragere-pasi-urmatori li {
    margin-bottom: 0.4rem;
}

.retragere-succes .btn {
    margin-top: 1.75rem;
}


/* --- 11.6  Informatiile legale de pe primul pas ------------------------- */

.retragere-info {
    margin-top: 1.75rem;
    font-size: var(--text-xs);
    color: var(--bs-secondary-color, #6c757d);
}

.retragere-info h2 {
    font-size: var(--text-md);
    color: var(--bs-body-color);
    margin-bottom: 0.6rem;
}

.retragere-info ul {
    padding-left: 1.1rem;
}

.retragere-info li {
    margin-bottom: 0.3rem;
}


@media (max-width: 575.98px) {

    .retragere-card {
        padding: 1.25rem;
    }

    .retragere-produs {
        flex-wrap: wrap;
    }

    .retragere-produs-pret {
        width: 100%;
        padding-left: 4.6rem;
    }

    .retragere-rand {
        flex-direction: column;
        gap: 0.2rem;
    }

    .retragere-eticheta {
        flex: 0 0 auto;
    }
}