/* ============================================================
   ASHXPRESS — CHECKOUT · CORPORATE PREMIUM REDESIGN
   Pure CSS3 · Zero framework · Zero glassmorphism
   All original class names preserved
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

   /* ── Design Tokens ─────────────────────────────────────────── */
   :root {
       /* Brand */
       --primary:        #1a1a2e;
       --primary-hover:  #16213e;
       --accent:         #e63946;
       --accent-soft:    #fde8ea;
   
       /* Surface */
       --bg-canvas:      #f4f5f7;
       --bg-card:        #ffffff;
       --bg-subtle:      #f8f9fb;
       --bg-input:       #ffffff;
   
       /* Text */
       --text:           #0f172a;
       --text-mid:       #334155;
       --text-light:     #64748b;
       --text-muted:     #94a3b8;
       --text-inverse:   #ffffff;
   
       /* Borders */
       --border:         #e2e8f0;
       --border-focus:   #1a1a2e;
   
       /* Feedback */
       --error:          #dc2626;
       --error-bg:       #fef2f2;
       --error-border:   #fca5a5;
       --success:        #16a34a;
   
       /* Depth */
       --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.06);
       --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
       --shadow-md:  0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
       --shadow-lg:  0 10px 24px rgba(15, 23, 42, 0.09), 0 4px 8px rgba(15, 23, 42, 0.05);
   
       /* Geometry */
       --radius-sm:  6px;
       --radius:     10px;
       --radius-lg:  14px;
       --radius-xl:  18px;
   
       /* Timing */
       --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
       --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   /* ── Base Reset ────────────────────────────────────────────── */
   *,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   body {
       font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
       background-color: var(--bg-canvas);
       color: var(--text);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       line-height: 1.6;
   }
   
   /* ── Page Container ────────────────────────────────────────── */
   .checkout-container {
       max-width: 1160px;
       margin: 3rem auto 5rem;
       padding: 0 1.5rem;
   }
   
   /* ── Page Title ────────────────────────────────────────────── */
   .checkout-title {
       font-family: 'DM Sans', sans-serif;
       font-size: clamp(1.5rem, 3vw, 2rem);
       font-weight: 700;
       color: var(--text);
       text-align: center;
       letter-spacing: -0.03em;
       margin-bottom: 0.5rem;
   }
   
   /* Accent underline via a sibling trick — purely decorative, no HTML change */
   .checkout-title::after {
       content: '';
       display: block;
       width: 40px;
       height: 3px;
       background: var(--accent);
       border-radius: 2px;
       margin: 0.75rem auto 2.5rem;
   }
   
   /* ── Layout Grid ───────────────────────────────────────────── */
   .checkout-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 1.75rem;
       align-items: start;
   }
   
   @media (min-width: 992px) {
       .checkout-grid {
           grid-template-columns: 5fr 7fr;
           gap: 2rem;
       }
   }
   
   /* ── Cards ─────────────────────────────────────────────────── */
   .summary-card,
   .form-card {
       background: var(--bg-card);
       border-radius: var(--radius-xl);
       border: 1px solid var(--border);
       box-shadow: var(--shadow-md);
       padding: 2rem;
       height: 100%;
       transition: box-shadow 0.25s var(--ease-out);
   }
   
   .summary-card:hover,
   .form-card:hover {
       box-shadow: var(--shadow-lg);
   }
   
   /* ── Section Titles ────────────────────────────────────────── */
   .summary-title,
   .form-title {
       font-size: 0.8125rem;
       font-weight: 600;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--text-light);
       margin-bottom: 1.5rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid var(--border);
   }
   
   .summary-title i,
   .form-title i {
       color: var(--accent);
       font-size: 0.9rem;
   }
   
   /* ── Items List ────────────────────────────────────────────── */
   .items-list {
       margin-bottom: 0;
   }
   
   .cart-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0.875rem 0;
       border-bottom: 1px solid var(--border);
       animation: fadeUp 0.35s var(--ease-out) both;
   }
   
   .cart-item:last-child {
       border-bottom: none;
   }
   
   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(8px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   /* ── Item Info ─────────────────────────────────────────────── */
   .item-info {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       flex: 1;
       min-width: 0;
   }
   
   .item-quantity {
       background: var(--primary);
       color: var(--text-inverse);
       border-radius: var(--radius-sm);
       min-width: 26px;
       height: 26px;
       padding: 0 6px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 0.75rem;
       font-weight: 700;
       font-family: 'DM Mono', monospace;
       flex-shrink: 0;
   }
   
   .item-name {
       color: var(--text-mid);
       font-size: 0.9375rem;
       font-weight: 500;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .item-price {
       font-weight: 700;
       font-size: 0.9375rem;
       color: var(--text);
       white-space: nowrap;
       margin-left: 1rem;
       font-family: 'DM Mono', monospace;
       letter-spacing: -0.02em;
   }
   
   /* ── Total Section ─────────────────────────────────────────── */
   .total-section {
       margin-top: 1.25rem;
       background: var(--bg-subtle);
       border-radius: var(--radius);
       padding: 1rem 1.25rem;
       border: 1px solid var(--border);
   }
   
   .total-line {
       display: none; /* replaced by the card background above */
   }
   
   .total-amount {
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 1rem;
       font-weight: 600;
       color: var(--text-mid);
   }
   
   .total-amount .price {
       font-size: 1.3125rem;
       font-weight: 800;
       color: var(--primary);
       font-family: 'DM Mono', monospace;
       letter-spacing: -0.03em;
   }
   
   /* ── Error Alert ───────────────────────────────────────────── */
   .error-alert {
       background: var(--error-bg);
       border: 1px solid var(--error-border);
       border-left: 4px solid var(--error);
       border-radius: var(--radius);
       padding: 1rem 1.25rem;
       margin-bottom: 1.5rem;
       display: flex;
       align-items: flex-start;
       gap: 0.875rem;
       animation: slideDown 0.3s var(--ease-out);
   }
   
   @keyframes slideDown {
       from {
           opacity: 0;
           transform: translateY(-8px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }
   
   .error-alert i {
       color: var(--error);
       font-size: 1.125rem;
       flex-shrink: 0;
       margin-top: 0.15rem;
   }
   
   .error-content {
       flex: 1;
   }
   
   .error-content strong {
       display: block;
       color: var(--error);
       font-size: 0.875rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       margin-bottom: 0.35rem;
   }
   
   .error-content p {
       color: #7f1d1d;
       font-size: 0.875rem;
       margin: 0.2rem 0;
       line-height: 1.55;
   }
   
   /* ── Form ──────────────────────────────────────────────────── */
   .modern-form {
       margin-top: 0.5rem;
   }
   
   .form-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 0;
   }
   
   @media (min-width: 560px) {
       .form-grid {
           grid-template-columns: 1fr 1fr;
           column-gap: 1.25rem;
       }
   }
   
   /* ── Form Group ────────────────────────────────────────────── */
   .form-group {
       margin-bottom: 1.375rem;
       position: relative;
   }
   
   .form-group label {
       display: block;
       font-size: 0.8125rem;
       font-weight: 600;
       letter-spacing: 0.03em;
       color: var(--text-mid);
       margin-bottom: 0.5rem;
       text-transform: uppercase;
   }
   
   /* ── Input Fields ──────────────────────────────────────────── */
   .form-group input,
   .form-group select,
   .form-group textarea {
       width: 100%;
       padding: 0.8125rem 1rem;
       background: var(--bg-input);
       border: 1.5px solid var(--border);
       border-radius: var(--radius);
       font-family: 'DM Sans', sans-serif;
       font-size: 0.9375rem;
       font-weight: 400;
       color: var(--text);
       line-height: 1.5;
       transition:
           border-color 0.2s var(--ease-in-out),
           box-shadow 0.2s var(--ease-in-out),
           background-color 0.2s;
       box-sizing: border-box;
       -webkit-appearance: none;
       appearance: none;
       outline: none;
   }
   
   .form-group input::placeholder {
       color: var(--text-muted);
       font-weight: 300;
   }
   
   .form-group input:hover {
       border-color: #cbd5e1;
   }
   
   .form-group input:focus {
       border-color: var(--border-focus);
       background-color: var(--bg-input);
       box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.10);
   }
   
   /* ── Error States ──────────────────────────────────────────── */
   .form-group.has-error input {
       border-color: var(--error);
       background-color: var(--error-bg);
   }
   
   .form-group.has-error input:focus {
       box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
   }
   
   .field-error {
       display: flex;
       align-items: center;
       gap: 0.4rem;
       color: var(--error);
       font-size: 0.8125rem;
       font-weight: 500;
       margin-top: 0.45rem;
       animation: fadeIn 0.2s var(--ease-out);
   }
   
   .field-error i {
       font-size: 0.8125rem;
       flex-shrink: 0;
   }
   
   @keyframes fadeIn {
       from { opacity: 0; transform: translateY(-3px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   /* ── Help Text ─────────────────────────────────────────────── */
   .help-text {
       display: block;
       font-size: 0.8125rem;
       color: var(--text-muted);
       margin-top: 0.35rem;
       line-height: 1.4;
   }
   
   /* ── Submit Button ─────────────────────────────────────────── */
   .submit-button {
       width: 100%;
       background: var(--primary);
       color: var(--text-inverse);
       border: none;
       border-radius: var(--radius);
       padding: 1rem 1.5rem;
       font-family: 'DM Sans', sans-serif;
       font-size: 0.9375rem;
       font-weight: 700;
       letter-spacing: 0.02em;
       cursor: pointer;
       transition:
           background-color 0.2s var(--ease-in-out),
           transform 0.15s var(--ease-out),
           box-shadow 0.2s var(--ease-in-out);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.625rem;
       margin-top: 1.5rem;
       position: relative;
       overflow: hidden;
   }
   
   .submit-button::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
       pointer-events: none;
   }
   
   .submit-button:hover:not(:disabled) {
       background: var(--primary-hover);
       transform: translateY(-2px);
       box-shadow:
           0 6px 16px rgba(26, 26, 46, 0.25),
           0 2px 4px rgba(26, 26, 46, 0.15);
   }
   
   .submit-button:active:not(:disabled) {
       transform: translateY(0);
       box-shadow: none;
   }
   
   .submit-button:disabled {
       background: #94a3b8;
       cursor: not-allowed;
       opacity: 0.7;
       transform: none;
       box-shadow: none;
   }
   
   /* ── Loading Spinner ───────────────────────────────────────── */
   .spinner {
       width: 17px;
       height: 17px;
       border: 2px solid rgba(255, 255, 255, 0.25);
       border-top-color: #ffffff;
       border-radius: 50%;
       animation: spin 0.65s linear infinite;
       flex-shrink: 0;
   }
   
   @keyframes spin {
       to { transform: rotate(360deg); }
   }
   
   /* ── Back Button ───────────────────────────────────────────── */
   .back-button {
       display: inline-flex;
       align-items: center;
       gap: 0.375rem;
       text-decoration: none;
       color: var(--text-light);
       font-size: 0.875rem;
       font-weight: 500;
       padding: 0.5rem 0.875rem;
       border-radius: var(--radius-sm);
       border: 1.5px solid var(--border);
       background: var(--bg-card);
       transition:
           color 0.2s,
           border-color 0.2s,
           background-color 0.2s,
           box-shadow 0.2s;
       margin-bottom: 1.5rem;
   }
   
   .back-button:hover {
       color: var(--primary);
       border-color: var(--primary);
       background: var(--bg-subtle);
       box-shadow: var(--shadow-xs);
   }
   
   /* ── Responsive Refinements ────────────────────────────────── */
   @media (max-width: 640px) {
       .checkout-container {
           padding: 0 1rem;
           margin-top: 1.5rem;
       }
   
       .summary-card,
       .form-card {
           padding: 1.5rem;
           border-radius: var(--radius-lg);
       }
   
       .checkout-title {
           font-size: 1.5rem;
       }
   
       .submit-button {
           padding: 0.9375rem 1.25rem;
       }
   }
   
   @media (max-width: 360px) {
       .summary-card,
       .form-card {
           padding: 1.25rem 1rem;
       }
   }
   
   /* ── FedaPay — encart paiement (flat, sans glassmorphism) ──── */
   .fedapay-payment-panel {
       margin: 1.5rem 0 1.25rem;
   }
   
   .fedapay-payment-panel-inner {
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       padding: 1rem 1.125rem;
       box-shadow: var(--shadow-xs);
   }
   
   .fedapay-payment-heading {
       font-size: 0.9375rem;
       font-weight: 600;
       color: var(--text);
       margin: 0 0 0.5rem;
       letter-spacing: 0.02em;
   }
   
   .fedapay-payment-text {
       font-size: 0.8125rem;
       color: var(--text-mid);
       line-height: 1.55;
       margin: 0;
   }
   
   .fedapay-payment-warn {
       font-size: 0.8125rem;
       font-weight: 600;
       color: var(--error);
       margin: 0.75rem 0 0;
       padding: 0.625rem 0.75rem;
       background: var(--error-bg);
       border: 1px solid var(--error-border);
       border-radius: var(--radius-sm);
   }
   
   .submit-button:disabled {
       opacity: 0.55;
       cursor: not-allowed;
       transform: none;
   }
   
   /* ── Print ─────────────────────────────────────────────────── */
   @media print {
       .submit-button,
       .back-button {
           display: none;
       }
   
       .summary-card,
       .form-card {
           box-shadow: none;
           border: 1px solid #ccc;
       }
   }