/* ============================================================
   Qsarco Storefront v2 — Apple-grade overlay
   ------------------------------------------------------------
   Patches ciblés sur les CSS legacy : press-scale, floating
   labels réels, dark mode, skeleton, animations marker.
   Enqueue APRÈS cart.css / checkout.css / tracking.css.
   ============================================================ */

@layer overrides {

  /* ===== Press scale haptique sur tous les boutons ===== */
  .qsf-checkout-btn,
  .qsf-qty-btn,
  .qsf-coupon-apply,
  .qsf-coupon-apply-cc,
  .qsf-remove-btn,
  .qsf-remove-coupon,
  .qsf-gift-toggle,
  .qsf-mobile-toggle,
  .qsf-back,
  .qot-back,
  .qot-continue-btn,
  .qot-invoice-link,
  .qot-sidebar-header,
  .qsf-login-form-wrap input[type="submit"],
  .qsf-social-btn {
    transition: background-color var(--qsf-duration-fast) var(--qsf-ease-snappy),
                color var(--qsf-duration-fast) var(--qsf-ease-snappy),
                border-color var(--qsf-duration-fast) var(--qsf-ease-snappy),
                box-shadow var(--qsf-duration-fast) var(--qsf-ease-snappy),
                transform var(--qsf-duration-instant) var(--qsf-ease-snappy);
  }
  .qsf-checkout-btn:active:not(:disabled),
  .qsf-coupon-apply:active,
  .qsf-coupon-apply-cc:active,
  .qsf-gift-toggle:active,
  .qsf-mobile-toggle:active,
  .qot-continue-btn:active,
  .qsf-login-form-wrap input[type="submit"]:active,
  .qsf-social-btn:active {
    transform: scale(0.97);
  }
  .qsf-qty-btn:active:not(:disabled),
  .qsf-remove-btn:active,
  .qsf-remove-coupon:active {
    transform: scale(0.90);
  }

  /* ===== Focus ring uniforme partout ===== */
  .qsf-checkout-btn:focus-visible,
  .qsf-qty-btn:focus-visible,
  .qsf-coupon-apply:focus-visible,
  .qsf-coupon-apply-cc:focus-visible,
  .qsf-remove-btn:focus-visible,
  .qsf-gift-toggle:focus-visible,
  .qsf-mobile-toggle:focus-visible,
  .qot-continue-btn:focus-visible,
  .qot-invoice-link:focus-visible,
  .qsf-back:focus-visible,
  .qot-back:focus-visible {
    outline: none;
    box-shadow: var(--qsf-shadow-ring);
  }

  /* ===== Labels classiques au-dessus des inputs (no floating) ===== */
  /* On laisse WC gérer les widths form-row-first / form-row-last */
  .qsf-checkout-form .form-row {
    margin-bottom: 14px;
  }
  .qsf-checkout-form .form-row > label {
    display: block;
    position: static;
    transform: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--qsf-text-soft);
    margin-bottom: 6px;
    padding: 0;
    background: transparent;
    pointer-events: auto;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    top: auto !important;
  }
  .qsf-checkout-form .form-row .woocommerce-input-wrapper {
    display: block;
    width: 100%;
  }
  .qsf-checkout-form .form-row input[type="text"],
  .qsf-checkout-form .form-row input[type="email"],
  .qsf-checkout-form .form-row input[type="tel"],
  .qsf-checkout-form .form-row input[type="number"],
  .qsf-checkout-form .form-row input[type="password"],
  .qsf-checkout-form .form-row select,
  .qsf-checkout-form .form-row textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--qsf-border);
    border-radius: var(--qsf-radius-md);
    font-size: 14px;
    background: var(--qsf-surface);
    color: var(--qsf-text);
    font-family: inherit;
    line-height: 1.4;
    height: auto;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .qsf-checkout-form .form-row input:focus,
  .qsf-checkout-form .form-row select:focus,
  .qsf-checkout-form .form-row textarea:focus {
    outline: none;
    border-color: var(--qsf-primary);
    box-shadow: 0 0 0 3px rgba(0,111,255,0.12);
  }
  .qsf-checkout-form .form-row input::placeholder,
  .qsf-checkout-form .form-row textarea::placeholder {
    color: var(--qsf-text-faint);
    opacity: 1;
  }
  /* Force le label invalide-error en rouge */
  .qsf-checkout-form .form-row.woocommerce-invalid input,
  .qsf-checkout-form .form-row.woocommerce-invalid select {
    border-color: var(--qsf-danger);
  }

  /* ===== Skeleton états cart loading ===== */
  .qsf-cart-table.is-skeleton .qsf-cart-row {
    opacity: 0;
  }
  .qsf-cart-table.is-skeleton::after {
    content: "";
    display: block;
    height: 96px;
    margin-bottom: var(--qsf-space-3);
    border-radius: var(--qsf-radius-lg);
    background: linear-gradient(90deg,
      var(--qsf-surface-3) 0%,
      var(--qsf-surface-2) 50%,
      var(--qsf-surface-3) 100%);
    background-size: 200% 100%;
    animation: qsf-shimmer 1.4s linear infinite;
  }

  /* ===== Cart input - tabular nums pour les prix ===== */
  .qsf-cart-total-amount,
  .qsf-total-row span,
  .qot-total-row span,
  .qot-payment-amount,
  .qsf-summary-price {
    font-variant-numeric: tabular-nums;
  }

  /* ===== Cards generous radius en v2 ===== */
  .qsf-sidebar-card,
  .qot-sidebar-card,
  .qot-totals-card {
    border-radius: var(--qsf-radius-lg) !important;
  }
  .qsf-cart-page .qsf-sidebar-card,
  .qot-sidebar-card {
    box-shadow: var(--qsf-shadow-md) !important;
  }

  /* ===== Pulse marker sur la carte tracking ===== */
  .qot-map-wrapper {
    border-radius: var(--qsf-radius-xl);
    overflow: hidden;
  }
  .leaflet-marker-icon {
    animation: qot-marker-bounce 2s var(--qsf-ease-spring) infinite;
  }
  @keyframes qot-marker-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  /* Pulse autour du marker */
  .qot-map-wrapper .leaflet-marker-icon::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: var(--qsf-primary);
    opacity: 0.4;
    animation: qot-pulse 2s ease-out infinite;
    z-index: -1;
  }
  @keyframes qot-pulse {
    0%   { transform: scale(1);   opacity: 0.4; }
    100% { transform: scale(2.5); opacity: 0; }
  }

  /* ===== Tracking stepper progress avec spring ===== */
  .qot-stepper::before {
    transition: width var(--qsf-duration-slower) var(--qsf-ease-spring) !important;
  }

  /* ===== Express section : badge style premium ===== */
  .qsf-express-section {
    background: var(--qsf-surface-2);
    border: 1px solid var(--qsf-border);
    border-radius: var(--qsf-radius-lg);
    padding: var(--qsf-space-4);
    margin-bottom: var(--qsf-space-6);
  }
  .qsf-express-section .qsf-express-label {
    font-size: var(--qsf-text-xs);
    font-weight: var(--qsf-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--qsf-tracking-wide);
    color: var(--qsf-text-muted);
    margin-bottom: var(--qsf-space-3);
  }
  .qsf-express-section .qsf-divider {
    text-align: center;
    color: var(--qsf-text-faint);
    font-size: var(--qsf-text-xs);
    margin-top: var(--qsf-space-3);
    position: relative;
  }
  .qsf-express-section .qsf-divider::before,
  .qsf-express-section .qsf-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 20px);
    height: 1px;
    background: var(--qsf-border);
  }
  .qsf-express-section .qsf-divider::before { left: 0; }
  .qsf-express-section .qsf-divider::after  { right: 0; }
  .qsf-express-section .qsf-divider span {
    background: var(--qsf-surface-2);
    padding: 0 var(--qsf-space-2);
    position: relative;
  }

  /* ===== Mobile : swipe-to-remove sur les items cart ===== */
  @media (max-width: 720px) {
    .qsf-cart-row {
      touch-action: pan-y;
    }
    .qsf-cart-row.is-swiping {
      transition: transform var(--qsf-duration-fast) var(--qsf-ease-snappy);
    }
    .qsf-cart-row.is-swiped {
      background: var(--qsf-danger-soft);
    }
  }

  /* ===== View Transitions API ===== */
  @supports (view-transition-name: none) {
    .qsf-checkout-btn,
    .qot-continue-btn {
      view-transition-name: qsf-primary-cta;
    }
  }

  /* ===== Dark mode patches sur les CSS legacy ===== */
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) {
      .qsf-cart-page, .qsf-checkout-wrap, .qot-page,
      .qsf-cart-page *, .qsf-checkout-wrap *, .qot-page * {
        color-scheme: dark;
      }

      .qsf-cart-items,
      .qsf-cart-items thead,
      .qsf-cart-items tbody,
      .qsf-cart-items th,
      .qsf-cart-items td {
        background: var(--qsf-surface);
        color: var(--qsf-text);
        border-color: var(--qsf-border);
      }

      .qsf-sidebar-card,
      .qot-sidebar-card,
      .qot-totals-card,
      .qsf-checkout-right,
      .qsf-checkout-right-inner {
        background: var(--qsf-surface) !important;
        color: var(--qsf-text) !important;
        border-color: var(--qsf-border) !important;
      }

      .qsf-input,
      input.qsf-input,
      textarea.qsf-input,
      select.qsf-input {
        background: var(--qsf-surface-2) !important;
        color: var(--qsf-text) !important;
        border-color: var(--qsf-border) !important;
      }

      .qot-stepper,
      .qot-step-circle {
        background: var(--qsf-surface-2);
      }

      .qsf-login-wrap,
      .qsf-login-left,
      .qsf-login-form-wrap {
        background: var(--qsf-bg) !important;
      }
      .qsf-login-form-wrap input[type="text"],
      .qsf-login-form-wrap input[type="email"],
      .qsf-login-form-wrap input[type="password"] {
        background: var(--qsf-surface-2);
        color: var(--qsf-text);
        border-color: var(--qsf-border);
      }

      .qot-map-wrapper {
        filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.95);
      }
      .qot-map-wrapper .leaflet-marker-icon,
      .qot-map-wrapper .leaflet-popup-content-wrapper,
      .qot-map-wrapper .leaflet-popup-tip {
        filter: invert(1) hue-rotate(180deg);
      }
    }
  }

  /* ===== Confirmation page : confetti subtle ===== */
  .qot-page.is-order-received .qot-title {
    animation: qot-title-in var(--qsf-duration-slower) var(--qsf-ease-spring);
  }
  @keyframes qot-title-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ===== Newsletter / save_info checkbox style premium ===== */
  .qsf-checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--qsf-space-3);
    padding: var(--qsf-space-3) 0;
    cursor: pointer;
    user-select: none;
  }
  .qsf-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--qsf-primary);
    cursor: pointer;
  }
  .qsf-checkbox-row span {
    font-size: var(--qsf-text-sm);
    color: var(--qsf-text-soft);
  }

  /* ===== Tracking number : style copy-friendly ===== */
  .qot-tracking-info .qot-tracking-line a {
    font-family: var(--qsf-font-mono);
    font-size: var(--qsf-text-sm);
    background: var(--qsf-primary-soft);
    color: var(--qsf-primary);
    padding: 2px 8px;
    border-radius: var(--qsf-radius-xs);
    text-decoration: none;
    transition: var(--qsf-transition-color);
  }
  .qot-tracking-info .qot-tracking-line a:hover {
    background: var(--qsf-primary);
    color: var(--qsf-text-inverse);
  }

  /* ===== Coupon row : remove button stylé ===== */
  .qsf-remove-coupon {
    background: transparent;
    border: none;
    color: var(--qsf-text-muted);
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: var(--qsf-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    margin-left: 4px;
  }
  .qsf-remove-coupon:hover {
    background: var(--qsf-danger);
    color: var(--qsf-text-inverse);
  }

  /* ===== Touch target minimum (Apple HIG : 44x44px) ===== */
  @media (max-width: 720px) {
    .qsf-qty-btn,
    .qsf-remove-btn,
    .qsf-remove-coupon,
    .qot-sidebar-header,
    .qsf-mobile-toggle,
    .qsf-checkbox-row input[type="checkbox"] {
      min-width: 44px;
      min-height: 44px;
    }
  }

  /* ===== Smooth scroll global sur nos pages ===== */
  .qsf-page, .qot-page {
    scroll-behavior: smooth;
  }

  /* ===== Checkout : notices en floating sticky pour ne pas décaler ===== */
  .qsf-notices-slot {
    position: sticky;
    top: 12px;
    z-index: 100;
    margin: 0;
    pointer-events: none;
  }
  .qsf-notices-slot:empty,
  .qsf-notices-slot .qsf-notices-inner:empty {
    display: none;
  }
  .qsf-notices-slot .qsf-notices-inner {
    pointer-events: auto;
    background: var(--qsf-surface);
    border: 1px solid var(--qsf-border);
    border-left: 4px solid var(--qsf-danger);
    border-radius: var(--qsf-radius-lg);
    box-shadow: var(--qsf-shadow-xl);
    padding: 12px 18px;
    margin: 0 0 16px;
    font-size: var(--qsf-text-sm);
    color: var(--qsf-text);
    animation: qsf-toast-in var(--qsf-duration-slow) var(--qsf-ease-spring);
    backdrop-filter: var(--qsf-blur-sm);
    -webkit-backdrop-filter: var(--qsf-blur-sm);
  }
  .qsf-notices-slot .woocommerce-error,
  .qsf-notices-slot .woocommerce-message,
  .qsf-notices-slot .woocommerce-info,
  .qsf-notices-slot ul.woocommerce-error {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    list-style: none !important;
    box-shadow: none !important;
  }
  .qsf-notices-slot .woocommerce-error li,
  .qsf-notices-slot .woocommerce-message li,
  .qsf-notices-slot .woocommerce-info li {
    padding: 2px 0;
    margin: 0;
  }
  .qsf-notices-slot .woocommerce-message { border-left-color: var(--qsf-success); }
  .qsf-notices-slot .woocommerce-info    { border-left-color: var(--qsf-primary); }

  /* ===== CTA Check Out : plus proéminent (cart sidebar) ===== */
  .qsf-cart-page .qsf-checkout-btn,
  .qsf-sidebar-card .qsf-checkout-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: var(--qsf-text-md) !important;
    font-weight: var(--qsf-weight-semibold) !important;
    padding: 16px 24px !important;
    border-radius: var(--qsf-radius-xl) !important;
    background: var(--qsf-primary) !important;
    color: var(--qsf-text-inverse) !important;
    text-decoration: none !important;
    margin-top: var(--qsf-space-5) !important;
    box-shadow: 0 6px 20px -6px var(--qsf-primary-ring),
                0 2px 4px rgba(0, 111, 255, 0.15) !important;
    position: relative;
    overflow: hidden;
    transition: transform var(--qsf-duration-normal) var(--qsf-ease-out),
                box-shadow var(--qsf-duration-normal) var(--qsf-ease-out),
                background var(--qsf-duration-fast) var(--qsf-ease-snappy) !important;
  }
  .qsf-cart-page .qsf-checkout-btn:hover,
  .qsf-sidebar-card .qsf-checkout-btn:hover {
    background: var(--qsf-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -6px var(--qsf-primary-ring),
                0 4px 8px rgba(0, 111, 255, 0.20) !important;
  }
  .qsf-cart-page .qsf-checkout-btn:active,
  .qsf-sidebar-card .qsf-checkout-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px -2px var(--qsf-primary-ring) !important;
  }
  .qsf-cart-page .qsf-checkout-btn::after,
  .qsf-sidebar-card .qsf-checkout-btn::after {
    content: " →";
    display: inline-block;
    margin-left: 6px;
    transition: transform var(--qsf-duration-normal) var(--qsf-ease-spring);
  }
  .qsf-cart-page .qsf-checkout-btn:hover::after,
  .qsf-sidebar-card .qsf-checkout-btn:hover::after {
    transform: translateX(4px);
  }

  /* CTA sticky mobile sur la page panier */
  @media (max-width: 720px) {
    .qsf-cart-page .qsf-sidebar-card {
      position: sticky;
      bottom: 0;
      z-index: 50;
      box-shadow: 0 -10px 40px -10px rgba(15, 23, 42, 0.15) !important;
      backdrop-filter: var(--qsf-blur-sm);
      -webkit-backdrop-filter: var(--qsf-blur-sm);
    }
    .qsf-cart-page .qsf-checkout-btn {
      min-height: 56px;
    }
  }
}