/* =============================================================
   QuicForm v5.1 – Premium Shopify-level UI · Mobile-first
   ============================================================= */

/* ── Masquer WC natif ────────────────────────────────────────── */
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart .woocommerce-variation-add-to-cart,
.single-product form.cart .qty,
.single-product .quantity { display: none !important; }

/* ── Design tokens ───────────────────────────────────────────── */
.qf-card {
    --qf-accent:     #16a34a;
    --qf-accent-rgb: 22, 163, 74;
    --qf-accent-d:   #15803d;
    --qf-r:          16px;        /* radius principale */
    --qf-r-sm:       12px;        /* radius inputs */
    --qf-r-xs:       8px;
    --qf-border:     #e5e7eb;
    --qf-border-d:   #d4d4d8;
    --qf-bg:         #fff;
    --qf-surface:    #fafafa;
    --qf-surface-2:  #f4f4f5;
    --qf-text:       #09090b;
    --qf-text-2:     #3f3f46;
    --qf-muted:      #71717a;
    --qf-focus:      rgba(var(--qf-accent-rgb), .18);
    --qf-ok-bg:      #f0fdf4;
    --qf-ok-brd:     #bbf7d0;
    --qf-ok-txt:     #166534;
    --qf-err-bg:     #fff1f2;
    --qf-err-brd:    #fecdd3;
    --qf-err-txt:    #9f1239;
    --qf-shadow:     0 1px 2px rgba(16,24,40,.04), 0 8px 32px rgba(16,24,40,.06);
    --qf-shadow-lg:  0 1px 3px rgba(16,24,40,.04), 0 16px 48px rgba(16,24,40,.08);
    --qf-t:          .18s cubic-bezier(.4,0,.2,1);
    --qf-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Carte ────────────────────────────────────────────────────── */
.qf-card {
    font-family:   var(--qf-font);
    margin-top:    28px;
    background:    var(--qf-bg);
    border:        1px solid var(--qf-border);
    border-radius: var(--qf-r);
    box-shadow:    var(--qf-shadow);
    overflow:      hidden;
    color:         var(--qf-text);
    font-size:     15px;
    line-height:   1.55;
}

.qf-card *,
.qf-card *::before,
.qf-card *::after { box-sizing: border-box; }

/* ── Header ──────────────────────────────────────────────────── */
.qf-header {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       18px 20px;
    background:    linear-gradient(180deg, var(--qf-surface) 0%, #fff 100%);
    border-bottom: 1px solid var(--qf-border);
}

.qf-product-img {
    width:         72px;
    height:        72px;
    object-fit:    cover;
    border-radius: var(--qf-r-xs);
    border:        1px solid var(--qf-border);
    flex-shrink:   0;
    background:    var(--qf-surface);
}

.qf-header-info { flex: 1; min-width: 0; }

.qf-product-name {
    font-size:     16px;
    font-weight:   700;
    margin:        0;
    line-height:   1.3;
    color:         var(--qf-text);
    letter-spacing:-.005em;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.qf-product-price {
    font-size:   15px;
    font-weight: 700;
    color:       var(--qf-accent);
    margin:      5px 0 0;
}

.qf-per-unit {
    font-weight: 400;
    font-size:   12.5px;
    color:       var(--qf-muted);
}

/* ── Corps ────────────────────────────────────────────────────── */
.qf-body {
    padding:        22px 20px;
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

/* ── Sections (Shopify-style group) ──────────────────────────── */
.qf-section {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.qf-section-title {
    display:        flex;
    align-items:    center;
    gap:            8px;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: .02em;
    color:          var(--qf-text);
    margin:         0 0 2px;
    text-transform: none;
    font-family:    var(--qf-font);
}

.qf-section-icon {
    color:       var(--qf-accent);
    flex-shrink: 0;
}

/* ── Grille 2 colonnes ───────────────────────────────────────── */
.qf-row-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
}

/* ── Champ ────────────────────────────────────────────────────── */
.qf-field                { display: flex; flex-direction: column; gap: 6px; }
.qf-field.full           { grid-column: 1 / -1; }
.qf-field--spacer        { display: none; }

.qf-field label {
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .01em;
    color:          var(--qf-text-2);
}

.qf-req      { color: var(--qf-accent); margin-left: 2px; font-weight: 700; }
.qf-optional { color: var(--qf-muted); font-style: normal; font-weight: 400; font-size: 11px; }

.qf-card input[type="text"],
.qf-card input[type="tel"],
.qf-card input[type="email"],
.qf-card input[type="number"],
.qf-card input[type="search"],
.qf-card textarea,
.qf-card select {
    width:          100%;
    padding:        12px 14px;
    font-size:      15px;
    color:          var(--qf-text);
    background:     var(--qf-bg);
    border:         1.5px solid var(--qf-border);
    border-radius:  var(--qf-r-sm);
    outline:        none;
    transition:     border-color var(--qf-t), box-shadow var(--qf-t), background var(--qf-t);
    font-family:    var(--qf-font);
    line-height:    1.4;
    -webkit-appearance: none;
    appearance:     none;
}

.qf-card textarea {
    min-height: 88px;
    resize:     vertical;
    padding:    12px 14px;
    line-height:1.5;
}

.qf-card input:hover:not(:focus):not(.qf-invalid),
.qf-card textarea:hover:not(:focus):not(.qf-invalid),
.qf-card select:hover:not(:focus):not(.qf-invalid) {
    border-color: var(--qf-border-d);
}

.qf-card input:focus,
.qf-card textarea:focus,
.qf-card select:focus {
    border-color: var(--qf-accent);
    box-shadow:   0 0 0 3px var(--qf-focus);
}

.qf-card input.qf-invalid,
.qf-card textarea.qf-invalid,
.qf-card select.qf-invalid {
    border-color: #ef4444;
    box-shadow:   0 0 0 3px rgba(239, 68, 68, .14);
}

.qf-card input::placeholder,
.qf-card textarea::placeholder {
    color:   #a1a1aa;
    opacity: 1;
}

/* ── Select dropdown ──────────────────────────────────────────── */
.qf-card select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2371717a' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    padding-right:       36px;
}

/* ── Section Quantité + Paliers ───────────────────────────────── */
.qf-section--qty .qf-qty-row {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.qf-stepper {
    display:       inline-flex;
    align-items:   center;
    border:        1.5px solid var(--qf-border);
    border-radius: var(--qf-r-sm);
    overflow:      hidden;
    width:         fit-content;
    background:    var(--qf-bg);
    transition:    border-color var(--qf-t);
}

.qf-stepper:hover { border-color: var(--qf-border-d); }

.qf-qty-btn {
    width:         44px;
    height:        44px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    var(--qf-bg);
    border:        none;
    cursor:        pointer;
    color:         var(--qf-text-2);
    transition:    background var(--qf-t), color var(--qf-t);
    flex-shrink:   0;
    padding:       0;
    font-family:   inherit;
}

.qf-qty-btn:hover  { background: var(--qf-surface-2); color: var(--qf-accent); }
.qf-qty-btn:active { opacity: .75; }
.qf-qty-btn:focus-visible {
    outline:     2px solid var(--qf-accent);
    outline-offset: -2px;
}

.qf-qty-input {
    width:         56px !important;
    height:        44px;
    padding:       0 !important;
    text-align:    center;
    font-size:     16px !important;
    font-weight:   700;
    border:        none !important;
    border-left:   1.5px solid var(--qf-border) !important;
    border-right:  1.5px solid var(--qf-border) !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    background:    #fff !important;
    -moz-appearance: textfield;
    color:         var(--qf-text) !important;
}
.qf-qty-input::-webkit-inner-spin-button,
.qf-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qf-qty-input:focus { box-shadow: none !important; }

/* ── Paliers réduction ────────────────────────────────────────── */
.qf-tiers {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.qf-tier {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       8px 14px;
    background:    var(--qf-bg);
    border:        1.5px solid var(--qf-border);
    border-radius: 999px;
    font-size:     13px;
    transition:    all var(--qf-t);
    cursor:        pointer;
    font-family:   inherit;
    color:         var(--qf-text);
    line-height:   1.2;
}

.qf-tier:hover {
    border-color: var(--qf-accent);
    transform:    translateY(-1px);
}

.qf-tier:active { transform: translateY(0); }

.qf-tier:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--qf-focus);
}

.qf-tier-qty { font-weight: 600; color: var(--qf-text); }
.qf-tier-pct {
    font-weight:   700;
    color:         var(--qf-accent);
    padding:       2px 8px;
    background:    rgba(var(--qf-accent-rgb), .10);
    border-radius: 999px;
    font-size:     12px;
}

.qf-tier.is-active {
    background:   rgba(var(--qf-accent-rgb), .08);
    border-color: var(--qf-accent);
    box-shadow:   0 2px 8px rgba(var(--qf-accent-rgb), .16);
}

.qf-tier.is-active .qf-tier-pct {
    background: var(--qf-accent);
    color:      #fff;
}

/* ── Bloc prix dynamique ──────────────────────────────────────── */
.qf-price-block {
    background:    linear-gradient(135deg, var(--qf-ok-bg) 0%, #dcfce7 100%);
    border:        1.5px solid var(--qf-ok-brd);
    border-radius: var(--qf-r-sm);
    padding:       16px 18px;
    animation:     qfIn .22s cubic-bezier(.4,0,.2,1);
}

@keyframes qfIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.qf-price-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
}

.qf-price-label {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color:          var(--qf-ok-txt);
    opacity:        .85;
}

.qf-price-values {
    display:     flex;
    align-items: baseline;
    gap:         10px;
    flex-wrap:   wrap;
    justify-content: flex-end;
}

.qf-price-original {
    font-size:       15px;
    font-weight:     500;
    color:           var(--qf-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(113,113,122,.55);
}

.qf-price-amount {
    font-size:     24px;
    font-weight:   800;
    color:         var(--qf-ok-txt);
    line-height:   1;
    letter-spacing:-.015em;
    font-variant-numeric: tabular-nums;
}

.qf-price-saving {
    margin-top:  10px;
    font-size:   13px;
    font-weight: 600;
    color:       var(--qf-ok-txt);
    display:     none;
    align-items: center;
    gap:         6px;
}

.qf-price-saving[style*="display: block"],
.qf-price-saving[style*="display:block"] { display: flex !important; }

.qf-price-saving svg { flex-shrink: 0; opacity: .9; }

/* ── Bouton Commander ─────────────────────────────────────────── */
.qf-submit {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    width:           100%;
    padding:         16px 24px;
    font-size:       16px;
    font-weight:     700;
    letter-spacing:  .01em;
    color:           #fff !important;
    background:      var(--qf-accent);
    border:          none;
    border-radius:   var(--qf-r-sm);
    cursor:          pointer;
    transition:      background var(--qf-t), box-shadow var(--qf-t), transform .12s ease;
    box-shadow:      0 4px 14px rgba(var(--qf-accent-rgb), .35);
    font-family:     var(--qf-font);
    position:        relative;
    overflow:        hidden;
    -webkit-appearance: none;
    text-transform:  none;
    min-height:      52px;
}

.qf-submit::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 100%);
    pointer-events:none;
}

.qf-submit:hover:not(:disabled) {
    background: var(--qf-accent-d);
    box-shadow: 0 8px 24px rgba(var(--qf-accent-rgb), .48);
    transform:  translateY(-1px);
}

.qf-submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--qf-accent-rgb), .4);
}
.qf-submit:focus-visible {
    outline:        2px solid var(--qf-accent);
    outline-offset: 2px;
}
.qf-submit:disabled { opacity: .62; cursor: not-allowed; transform: none; }

.qf-btn-icon { flex-shrink: 0; transition: transform var(--qf-t); }
.qf-submit:hover .qf-btn-icon { transform: translateX(2px); }

.qf-btn-text { position: relative; }

/* Loading */
.qf-submit.qf-loading .qf-btn-icon { opacity: 0; }
.qf-submit.qf-loading .qf-btn-text { opacity: 0; }
.qf-submit.qf-loading::after {
    content:          '';
    position:         absolute;
    inset:            0;
    margin:           auto;
    width:            20px;
    height:           20px;
    border:           2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius:    50%;
    animation:        qfSpin .65s linear infinite;
}

@keyframes qfSpin { to { transform: rotate(360deg); } }

/* ── Status ───────────────────────────────────────────────────── */
.qf-status {
    display:       none;
    padding:       13px 16px;
    border-radius: var(--qf-r-sm);
    font-size:     14px;
    font-weight:   500;
    border:        1.5px solid var(--qf-border);
    background:    var(--qf-surface);
    line-height:   1.45;
}

.qf-status.ok  { background: var(--qf-ok-bg);  border-color: var(--qf-ok-brd);  color: var(--qf-ok-txt); }
.qf-status.err { background: var(--qf-err-bg); border-color: var(--qf-err-brd); color: var(--qf-err-txt); }

.qf-spinner {
    display:          inline-block;
    width:            13px;
    height:           13px;
    border:           2px solid currentColor;
    border-top-color: transparent;
    border-radius:    50%;
    animation:        qfSpin .6s linear infinite;
    vertical-align:   middle;
    margin-right:     5px;
    opacity:          .85;
}

.qf-check { font-weight: 800; margin-right: 3px; }

/* ── Trust badges ─────────────────────────────────────────────── */
.qf-trust {
    display:         flex;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             8px 18px;
    padding-top:     6px;
    border-top:      1px dashed var(--qf-border);
    margin-top:      2px;
}

.qf-trust span {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   12px;
    color:       var(--qf-muted);
    white-space: nowrap;
}

.qf-trust svg { flex-shrink: 0; color: var(--qf-accent); opacity: .8; }

/* ── Responsive (mobile-first polish) ─────────────────────────── */
@media (max-width: 520px) {
    .qf-card         { border-radius: var(--qf-r-sm); margin-top: 16px; }
    .qf-body         { padding: 18px 16px; gap: 18px; }
    .qf-header       { padding: 14px 16px; gap: 12px; }
    .qf-product-img  { width: 58px; height: 58px; }
    .qf-product-name { font-size: 15px; }
    .qf-row-2        { grid-template-columns: 1fr; gap: 10px; }
    .qf-price-amount { font-size: 22px; }
    .qf-price-original { font-size: 14px; }
    .qf-submit       { font-size: 15px; padding: 15px; min-height: 50px; }
    .qf-tiers        { gap: 6px; }
    .qf-tier         { padding: 7px 12px; font-size: 12.5px; }
    .qf-tier-pct     { font-size: 11.5px; }
    .qf-trust        { gap: 6px 14px; font-size: 11.5px; }
    .qf-section--qty .qf-qty-row { gap: 12px; }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .qf-card,
    .qf-card * {
        animation-duration:   .01ms !important;
        transition-duration:  .01ms !important;
    }
}

/* ── Section Livraison par ville (PRO 5.3+) ──────────────────── */
.qf-section--delivery .qf-delivery-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    padding:         12px 14px;
    background:      var(--qf-bg, #f8fafc);
    border:          1px dashed var(--qf-border, #d4d4d8);
    border-radius:   var(--qf-r-sm, 8px);
    font-size:       14px;
}
.qf-section--delivery .qf-delivery-label {
    color: var(--qf-text-2, #71717a);
}
.qf-section--delivery .qf-delivery-price {
    font-weight: 700;
    color:       var(--qf-accent, #16a34a);
}