/* ==========================================================================
   checkout.css - Checkout, Cart & Thank You Pages for mycell.eu
   Health Supplements & CBD Cosmetics E-Commerce

   Ultima modificare: 2026-09-10 18:30
   Modificari:
     2026-09-10 18:30 — Bulina metodei alese nu era centrata: punctul de 10px statea la 3px de
       margine intr-o zona de 18px, deci cadea cu un pixel mai sus si mai la stanga. Acum se
       centreaza cu 50% + translate, deci ramane la mijloc oricat de mare ar fi bulina.
     2026-09-10 17:10 — Formularul respira: campurile de pe desktop cresc de la 31,7px la 42px,
       text 0,9rem, mai mult aer intre randuri si intre eticheta si casuta (mobilul ramane la 46px).
       Plus lista derulanta de localitati: fundal de suprafata in loc de albul fix din select2 —
       pe temele inchise textul alb era invizibil pe panoul alb.
     2026-07-03 15:10 — Stiluri „Produse obligatorii" (forced add-on v2.0):
       .cart-item-forced (linii blocate sub parinte pe /cos/), badge, qty lock.
   ========================================================================== */

/* ==========================================================================
   CHECKOUT PAGE
   ========================================================================== */

/* --------------------------------------------------------------------------
   Checkout Layout (Form + Summary)
   -------------------------------------------------------------------------- */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 2.5rem;
  align-items: start;
  padding: 1.5rem 0 3rem;
}

/* --------------------------------------------------------------------------
   Checkout Form (Left Column)
   -------------------------------------------------------------------------- */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.checkout-step {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
}

.checkout-step-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.checkout-step-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--border-radius-full);
  flex-shrink: 0;
}

.checkout-step-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

/* Toggle switches (Company / Billing address) */
.checkout-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-bg);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  cursor: pointer;
}

.checkout-toggle input[type="checkbox"] {
  display: none;
}

.checkout-toggle-switch {
  width: 40px;
  height: 22px;
  background-color: var(--color-border);
  border-radius: var(--border-radius-full);
  position: relative;
  transition: var(--transition);
  flex-shrink: 0;
}

.checkout-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--color-white);
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.checkout-toggle input:checked ~ .checkout-toggle-switch {
  background-color: var(--color-primary);
}

.checkout-toggle input:checked ~ .checkout-toggle-switch::after {
  transform: translateX(18px);
}

.checkout-toggle-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
}

.checkout-toggle-fields {
  display: none;
  margin-top: 0.75rem;
}

.checkout-toggle-fields.open {
  display: block;
  animation: slideDown 0.3s ease;
}

/* Form row helpers */
.checkout-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.checkout-row-single {
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Payment Methods
   -------------------------------------------------------------------------- */
.checkout-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checkout-payment-method {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}

.checkout-payment-method:hover {
  border-color: var(--color-primary-light);
  background-color: var(--color-primary-lightest);
}

.checkout-payment-method.selected {
  border-color: var(--color-primary);
  background-color: var(--color-primary-lightest);
}

.checkout-payment-method input[type="radio"] {
  display: none;
}

.checkout-payment-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.checkout-payment-method.selected .checkout-payment-radio {
  border-color: var(--color-primary);
}

.checkout-payment-method.selected .checkout-payment-radio::after {
  content: '';
  /* CENTRARE PRIN 50% + translate, NU prin `top/left: 3px`.
     Bulina are 20px cu `box-sizing: border-box` si 1px de contur, deci zona din
     interiorul conturului e de 18px. Un punct de 10px pus la 3px de margine ocupa
     3..13 si lasa 5 de partea cealalta — adica statea cu un pixel mai sus si mai la
     stanga decat centrul. Se vedea cu ochiul liber pe metoda selectata (semnalat pe
     cetinis, 10 sep 2026), la toate magazinele. Cu 50% + translate ramane centrat
     indiferent de marimea bulinei sau de grosimea conturului. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: var(--color-primary);
  border-radius: 50%;
}

.checkout-payment-info {
  flex: 1;
}

.checkout-payment-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.checkout-payment-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 0.125rem;
}

.checkout-payment-icon {
  font-size: 1.5rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.checkout-payment-details {
  display: none;
  margin-top: 0.75rem;
  padding: 1rem;
  background-color: var(--color-bg);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.checkout-payment-method.selected .checkout-payment-details {
  display: block;
}

/* --------------------------------------------------------------------------
   Order Notes
   -------------------------------------------------------------------------- */
.checkout-notes textarea {
  min-height: 80px;
}

/* --------------------------------------------------------------------------
   Terms & Conditions
   -------------------------------------------------------------------------- */
.checkout-terms {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

.checkout-terms .form-check-input {
  margin-top: 0.1875rem;
  flex-shrink: 0;
}

.checkout-terms label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

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

/* Place Order Button */
.checkout-place-order {
  width: 100%;
  padding: 1rem;
  font-size: var(--font-size-base);
  font-weight: 700;
  border-radius: var(--border-radius-lg);
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.checkout-place-order:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.checkout-place-order:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Checkout Summary (Right Column - Sticky)
   -------------------------------------------------------------------------- */
.checkout-summary {
  position: sticky;
  top: 100px;
  z-index: 1;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.checkout-summary-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.checkout-summary-header h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0;
}

.checkout-summary-items {
  padding: 1rem 1.5rem;
  max-height: 320px;
  overflow-y: auto;
}

.checkout-summary-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border);
}

.checkout-summary-item:last-child {
  border-bottom: none;
}

.checkout-summary-item-image {
  width: 52px;
  height: 52px;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--color-bg);
  flex-shrink: 0;
  position: relative;
}

.checkout-summary-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-summary-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-text-secondary);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--border-radius-full);
}

.checkout-summary-item-info {
  flex: 1;
  min-width: 0;
}

.checkout-summary-item-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.checkout-summary-item-variant {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.checkout-summary-item-price {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.checkout-summary-totals {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.checkout-summary-row.discount {
  color: var(--color-primary-dark);
}

.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.5rem;
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.checkout-total-label {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
}

.checkout-total-amount {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-primary-dark);
}

/* ==========================================================================
   CART PAGE
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cart Table
   -------------------------------------------------------------------------- */
.cart-page {
  padding: 1.5rem 0 3rem;
}

.cart-table-wrapper {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
}

.cart-table,
#cartTable {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-primary-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.cart-table thead th,
#cartTable thead th {
  padding: 0.75rem 1.25rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary-dark);
  text-align: left;
}

.cart-table tbody td,
#cartTable tbody td {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.cart-table tbody tr:last-child td,
#cartTable tbody tr:last-child td {
  border-bottom: none;
}

/* Cart page qty selector overrides */
.cart-section .qty-selector {
  border: 1.5px solid var(--color-primary-light);
  border-radius: 10px;
  overflow: hidden;
}

.cart-section .qty-selector .qty-btn {
  width: 30px;
  height: 30px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-lightest);
}

.cart-section .qty-selector .qty-btn:hover {
  background: var(--color-primary);
  color: #fff;
  transition: all 0.2s ease;
}

.cart-section .qty-selector .qty-input {
  width: 36px;
  height: 30px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-left: 1.5px solid var(--color-primary-light);
  border-right: 1.5px solid var(--color-primary-light);
}

.cart-item-product {
  display: flex !important;
  align-items: center;
  gap: 1rem;
}

.cart-item-image {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--color-bg);
  flex-shrink: 0;
  display: block;
}

.cart-item-image img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}

.cart-item-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.cart-item-title a {
  color: inherit;
}

.cart-item-title a:hover {
  color: var(--color-primary);
}

.cart-item-variant {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin-top: 0.125rem;
}

.cart-item-price {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.cart-item-total,
.cart-item-subtotal {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-primary-dark);
  white-space: nowrap;
}

.cart-item-remove {
  text-align: center;
  vertical-align: middle;
}

.btn-remove-item {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-primary, var(--color-primary));
  font-size: 1.1rem;
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0;
  opacity: 0.7;
}

.btn-remove-item:hover {
  color: var(--color-danger);
  transform: scale(1.15);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Produse obligatorii (forced add-on, v2.0) — linii BLOCATE sub parinte
   -------------------------------------------------------------------------- */
.cart-table tbody tr.cart-item-forced td {
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  border-top: 1px dashed color-mix(in srgb, var(--color-primary) 30%, transparent);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.cart-item-forced .cart-item-product {
  padding-left: 1.5rem;
}

.cart-item-forced .cart-item-image,
.cart-item-forced .cart-item-image img {
  width: 38px;
  min-width: 38px;
  height: 38px;
}

.cart-item-forced .cart-item-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary, var(--color-text-light));
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.cart-item-forced .cart-item-title .fa-link {
  font-size: 0.7em;
  color: var(--color-primary);
  opacity: 0.75;
}

.cart-item-forced-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius: 999px;
  padding: 1px 8px;
}

.cart-item-forced-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary, var(--color-text-light));
}

.cart-item-forced-qty .fa-lock {
  font-size: 0.7em;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Cart Bottom (Coupon + Summary)
   -------------------------------------------------------------------------- */
.cart-bottom {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  align-items: start;
}

/* Coupon */
.cart-coupon {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
}

.cart-coupon-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.cart-coupon-form {
  display: flex;
  gap: 0.5rem;
}

.cart-coupon-form .form-control {
  flex: 1;
}

.cart-coupon-form .btn {
  white-space: nowrap;
}

/* Coupon Messages */
.coupon-message {
  margin-top: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: slideDown 0.3s ease;
}

.coupon-message.coupon-error {
  background-color: color-mix(in srgb, var(--color-danger) 7%, var(--color-white) 93%);
  color: color-mix(in srgb, var(--color-danger) 85%, var(--color-text) 15%);
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, var(--color-white) 72%);
}

.coupon-message.coupon-error::before {
  content: '\2716';
  font-weight: 700;
}

.coupon-message.coupon-success {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary-dark);
  border: 1px solid rgba(var(--color-primary-rgb), 0.25);
}

.coupon-message.coupon-success::before {
  content: '\2714';
  font-weight: 700;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.shake {
  animation: shake 0.4s ease;
}

/* Cart Summary */
.cart-summary {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.cart-summary-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  font-weight: 600;
}

.cart-summary-body {
  padding: 1rem 1.25rem;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cart-summary-row.total {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 2px solid var(--color-border);
}

.cart-summary-row.total .amount {
  color: var(--color-primary-dark);
}

.cart-summary-row.discount {
  color: var(--color-primary-dark);
}

.cart-summary-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

.cart-summary-footer .btn {
  width: 100%;
  padding: 0.875rem;
  font-size: var(--font-size-base);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Cart Empty State
   -------------------------------------------------------------------------- */
.cart-empty {
  text-align: center;
  padding: 4rem 2rem;
}

.cart-empty-icon {
  font-size: 3.5rem;
  color: var(--color-text-light);
  opacity: 0.35;
  margin-bottom: 1rem;
}

.cart-empty-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.cart-empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   THANK YOU / ORDER CONFIRMATION PAGE
   ========================================================================== */
.thank-you-page {
  text-align: center;
  padding: 4rem 0;
  max-width: 640px;
  margin: 0 auto;
}

.thank-you-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-lightest);
  color: var(--color-primary);
  font-size: 2.5rem;
  border-radius: var(--border-radius-full);
  margin: 0 auto 1.5rem;
  animation: scaleIn 0.4s ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.thank-you-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.thank-you-message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
  line-height: 1.7;
}

/* Order Confirmation Card */
.order-confirmation {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  text-align: left;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.order-confirmation-header {
  padding: 1.25rem 1.5rem;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-confirmation-header h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0;
}

.order-number {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.order-confirmation-body {
  padding: 1.5rem;
}

.order-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-border);
}

.order-detail-row:last-child {
  border-bottom: none;
}

.order-detail-label {
  color: var(--color-text-secondary);
}

.order-detail-value {
  font-weight: 600;
  color: var(--color-text);
}

.order-detail-value.total {
  color: var(--color-primary-dark);
  font-size: var(--font-size-base);
}

.order-items-list {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.order-item-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.order-item-row img {
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-sm);
  object-fit: cover;
}

.order-item-name {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.order-item-qty {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.order-item-price {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.thank-you-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Compact form fields for checkout — desktop AND mobile
   -------------------------------------------------------------------------- */
/* 10 sep 2026: campurile erau de 31,7px cu text de 0,84rem — masurat pe finalizarea comenzii.
   Formularul iesea inghesuit: etichete lipite de casute, randuri fara aer, iar casutele pareau
   niste crapaturi. Nu e o schimbare de gust: 32px e sub orice tinta rezonabila de atingere si de
   citit pe un formular unde omul isi scrie adresa. Mobilul ramane cum era (blocul de mai jos,
   46px), aici se aeriseste doar desktopul. */
#checkoutForm .form-control,
#checkoutForm .form-select {
  padding: 0.55rem 0.8rem !important;
  font-size: 0.9rem !important;
  height: auto !important;
  min-height: 42px !important;
}

#checkoutForm .input-group-text {
  padding: 0 0.7rem !important;
  font-size: 0.95rem !important;
  min-height: 42px !important;
}

#checkoutForm .btn-infocui-lookup {
  padding: 0.5rem 0.85rem !important;
  font-size: 0.85rem !important;
}

/* Aer intre randurile de campuri si intre eticheta si casuta ei. */
#checkoutForm .row.g-3 { --bs-gutter-y: 1.15rem; }
#checkoutForm .row.g-2 { --bs-gutter-y: 0.9rem; }
#checkoutForm .form-label {
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
}

#checkoutForm .input-group > .input-group-text:first-child + .form-control:last-child {
  /* Stanga = 0 (lipita de iconita), dreapta = rotunjita doar daca input-ul e ULTIM */
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
}
#checkoutForm .input-group > .input-group-text:first-child + .form-control:not(:last-child) {
  /* Stanga = 0 (lipita de iconita), dreapta = 0 (lipita de butonul de dupa, ex: COD CUPON / COD REFERRAL) */
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   LISTA DERULANTA (localitati, judete) — aceleasi reguli ca in components.css,
   repetate AICI, dar numai pe pagina de finalizare.
   De ce duplicat: 10 magazine au inca versiunea de components.css de dinainte de
   variabilizarea din iulie 2026, iar aducerea lor la zi inseamna un lot intreg de
   schimbari de tema, care se face doar la cererea explicita a utilizatorului.
   `checkout.css` insa e la zi peste tot, deci prin el ajunge reparatia si la ele.
   ⚠️ Cand toate magazinele vor avea components.css la zi, blocul asta se STERGE.
   Bugul: `.select2-dropdown` are fundal alb fix in select2.min.css; pe temele
   inchise textul optiunilor (aproape alb) devenea invizibil — lista de localitati
   arata goala (masurat pe cetinis, 10 sep 2026).
   -------------------------------------------------------------------------- */
body.page-checkout .select2-container--default .select2-dropdown {
  background-color: var(--color-white);
  color: var(--color-text);
}

body.page-checkout.theme-dark .select2-container--default .select2-results__option[aria-selected=true],
body.page-checkout.theme-dark .select2-container--default .select2-results__option--selected {
  color: var(--color-primary);
}

body.page-checkout .select2-container--default .select2-results__options {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* Select2 la aceeasi inaltime cu restul campurilor (42px). */
#checkoutForm .select2-container--default .select2-selection--single {
  height: 42px !important;
  font-size: 0.9rem !important;
}

#checkoutForm .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 0.9rem !important;
  line-height: 40px;
}

#checkoutForm .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
}

#checkoutForm .select2-icon-prepend {
  min-height: 42px !important;
  width: 42px;
  font-size: 0.95rem !important;
}

/* --------------------------------------------------------------------------
   ⚠️ FIX 2026-08-30 (BUG GENERAL, toti clientii) — pe TELEFON campurile NU se
   compacteaza. Blocul „Compact form fields" de mai sus se aplica si pe mobil si
   lasa campurile la 30,4px inaltime cu font de 13,44px (masurat 30 aug, 360px).
   Doua consecinte:
     · sub iOS Safari, ORICE `input` cu font mai mic de 16px declanseaza marirea
       automata a paginii la atingere — omul iese din cadru la fiecare camp;
     · 30px e sub tinta de atingere de 44px.
   Pana acum nicio tema nu putea repara asta: blocul de sus foloseste `!important`,
   deci cerea temei (`min-height:46px`) si a lui `mobile-wow.css` (`height:48px`)
   pierdeau amandoua. De aceea reparatia trebuie sa fie AICI, cu acelasi calibru.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #checkoutForm .form-control,
  #checkoutForm .form-select {
    padding: 11px 14px !important;
    font-size: 16px !important;
    min-height: 46px !important;
  }
  #checkoutForm .input-group-text {
    padding: 0 12px !important;
    font-size: 1.05rem !important;
  }
  #checkoutForm .select2-container--default .select2-selection--single {
    height: 46px !important;
    font-size: 16px !important;
  }
  #checkoutForm .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 16px !important;
    line-height: 44px;
  }
  #checkoutForm .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
  }
  #checkoutForm .select2-icon-prepend {
    min-height: 46px !important;
    width: 46px;
    font-size: 1.05rem !important;
  }
  #checkoutForm .form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Labels slightly smaller */
#checkoutForm .form-label {
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
}

#checkoutForm .form-label i {
  font-size: 0.72rem;
}

/* --------------------------------------------------------------------------
   Beautiful validation errors — replaces ugly Bootstrap is-invalid
   -------------------------------------------------------------------------- */

/* Shake animation for fields with errors */
@keyframes checkout-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

/* Override Bootstrap's ugly red border with a smooth animated glow */
#checkoutForm .form-control.is-invalid,
#checkoutForm .form-select.is-invalid {
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-white) 55%) !important;
  background-image: none !important; /* remove Bootstrap's ugly red X icon */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--color-danger) 8%, transparent) !important;
  animation: checkout-shake 0.5s ease-in-out;
}

#checkoutForm .form-control.is-invalid:focus,
#checkoutForm .form-select.is-invalid:focus {
  border-color: color-mix(in srgb, var(--color-danger) 65%, var(--color-white) 35%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 18%, transparent) !important;
}

/* Input-group: glow on the prepend icon too */
#checkoutForm .input-group:has(.is-invalid) .input-group-text {
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-white) 55%);
  background-color: color-mix(in srgb, var(--color-danger) 7%, var(--color-white) 93%);
  color: color-mix(in srgb, var(--color-danger) 85%, var(--color-text) 15%);
}

/* Select2 error state (applied via JS to the wrapper) */
#checkoutForm .select2-icon-wrapper.has-error .select2-icon-prepend {
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-white) 55%);
  background-color: color-mix(in srgb, var(--color-danger) 7%, var(--color-white) 93%);
  color: color-mix(in srgb, var(--color-danger) 85%, var(--color-text) 15%);
}

#checkoutForm .select2-icon-wrapper.has-error .select2-selection--single {
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-white) 55%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 12%, transparent) !important;
  animation: checkout-shake 0.5s ease-in-out;
}

/* Error message: compact pill positioned under the field */
#checkoutForm .field-error {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.2rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-danger) 85%, var(--color-text) 15%);
  background: color-mix(in srgb, var(--color-danger) 7%, var(--color-white) 93%);
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, var(--color-white) 72%);
  border-radius: 4px;
  animation: field-error-in 0.3s ease-out;
  line-height: 1.2;
}

#checkoutForm .field-error::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

@keyframes field-error-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide Bootstrap's default invalid-feedback (we use .field-error instead) */
#checkoutForm .invalid-feedback {
  display: none !important;
}

/* ==========================================================================
   CHECKOUT PREMIUM REDESIGN
   ========================================================================== */

/* --------------------------------------------------------------------------
   Progress Steps Bar
   -------------------------------------------------------------------------- */
.checkout-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1.25rem 0;
}

.checkout-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}

.checkout-progress-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: var(--color-border);
  color: var(--color-text-light);
  transition: all 0.3s;
  border: 2px solid transparent;
}

.checkout-progress-step.done .checkout-progress-icon {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.checkout-progress-step.active .checkout-progress-icon {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-lightest);
  animation: checkout-pulse 2s ease-in-out infinite;
}

@keyframes checkout-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--color-primary-lightest); }
  50% { box-shadow: 0 0 0 8px var(--color-primary-lightest); }
}

.checkout-progress-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.checkout-progress-step.done .checkout-progress-label,
.checkout-progress-step.active .checkout-progress-label {
  color: var(--color-primary);
}

.checkout-progress-line {
  width: 80px;
  height: 2px;
  background: var(--color-border);
  margin: 0 0.5rem;
  margin-bottom: 1.2rem;
  border-radius: 2px;
}

.checkout-progress-line.done {
  background: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Premium Step Cards
   -------------------------------------------------------------------------- */
.checkout-step {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
  transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.checkout-step:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.checkout-step-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.checkout-step-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

.checkout-step-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Premium Inputs
   -------------------------------------------------------------------------- */
#checkoutForm .form-control,
#checkoutForm .form-select {
  border-radius: var(--border-radius) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Input-group children: correct border-radius for grouped items */
#checkoutForm .input-group > .form-control:first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}
#checkoutForm .input-group > .form-control:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}
#checkoutForm .input-group > .form-control:last-child:not(:first-child),
#checkoutForm .input-group > .btn:last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}
#checkoutForm .input-group > .input-group-text:first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}
#checkoutForm .input-group > .input-group-text:first-child + .form-control:last-child {
  /* Input precedat de iconita SI ultim → stanga = 0, dreapta = rotunjita */
  border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}
#checkoutForm .input-group > .input-group-text:first-child + .form-control:not(:last-child) {
  /* Input precedat de iconita SI urmat de buton (ex: COD CUPON / COD REFERRAL) → 0 pe ambele */
  border-radius: 0 !important;
}

#checkoutForm .form-control:focus,
#checkoutForm .form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}

#checkoutForm .input-group-text {
  border-radius: 10px 0 0 10px !important;
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

#checkoutForm .form-label {
  font-size: 0.72rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-text-secondary);
}

/* Required indicator — subtle colored dot */
#checkoutForm .req {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  font-size: 0;
  color: transparent;
  margin-left: 3px;
  vertical-align: middle;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Payment Method Cards (override)
   -------------------------------------------------------------------------- */
.checkout-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkout-payment-method {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--color-white);
}

.checkout-payment-method:hover {
  border-color: var(--color-primary-light);
  background: var(--color-primary-lightest);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.checkout-payment-method.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-lightest);
  box-shadow: 0 0 0 3px var(--color-primary-lightest);
}

.checkout-payment-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: all 0.2s;
}

.checkout-payment-method.selected .checkout-payment-icon {
  background: var(--color-primary);
  color: var(--color-white);
}

.checkout-payment-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.checkout-payment-desc {
  font-size: 0.7rem;
  color: var(--color-text-light);
  margin-top: 0.1rem;
}

/* --------------------------------------------------------------------------
   Trust Signals
   -------------------------------------------------------------------------- */
.checkout-trust-signals {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-bg);
}

.checkout-trust-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  color: var(--color-text-light);
  font-weight: 500;
}

.checkout-trust-item i {
  font-size: 0.75rem;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Place Order Button Premium
   -------------------------------------------------------------------------- */
.checkout-place-order {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.checkout-place-order:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.checkout-place-order:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Summary Sidebar Premium
   -------------------------------------------------------------------------- */
.checkout-summary {
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  border: none !important;
  transition: transform 0.2s, box-shadow 0.2s;
}

.checkout-summary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
}

/* --------------------------------------------------------------------------
   Responsive adjustments for progress bar
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .checkout-progress-line { width: 40px; }
  .checkout-progress-icon { width: 34px; height: 34px; font-size: 0.75rem; }
  .checkout-progress-label { font-size: 0.6rem; }
  .checkout-trust-signals { flex-direction: column; align-items: center; gap: 0.5rem; }
}

/* ─────────── Delivery methods radio cards ─────────── */
.checkout-delivery-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.checkout-delivery-method {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
  background: var(--color-white);
}
.checkout-delivery-method:hover {
  border-color: var(--color-primary-light);
  background-color: var(--color-primary-lightest);
}
.checkout-delivery-method.selected {
  border-color: var(--color-primary);
  background-color: var(--color-primary-lightest);
}
.checkout-delivery-method.is-pending {
  cursor: not-allowed;
  opacity: 0.7;
}
.checkout-delivery-method.is-pending:hover {
  border-color: var(--color-border);
  background-color: var(--color-white);
}
.checkout-delivery-method input[type="radio"] {
  display: none;
}
.checkout-delivery-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: var(--transition-fast);
}
.checkout-delivery-method.selected .checkout-delivery-radio {
  border-color: var(--color-primary);
}
.checkout-delivery-method.selected .checkout-delivery-radio::after {
  content: '';
  /* Acelasi motiv ca la bulina metodei de PLATA (mai sus in fisier): centrare reala. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: var(--color-primary);
  border-radius: 50%;
}
.checkout-delivery-icon {
  font-size: 1.4rem;
  color: var(--color-primary);
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.checkout-delivery-info {
  flex: 1 1 auto;
  min-width: 0;
}
.checkout-delivery-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.15rem;
}
.checkout-delivery-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
}
.checkout-delivery-cost {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  white-space: nowrap;
}
.dm-cost-free {
  color: var(--color-success);
}
.dm-cost-value {
  color: var(--color-primary);
}
.dm-cost-pending {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--color-warning);
}
.dm-cost-pending .icon-map-pin {
  color: var(--color-warning);
}
.dm-time, .dm-threshold {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .checkout-delivery-method { padding: 0.7rem 0.8rem; gap: 0.6rem; }
  .checkout-delivery-icon { font-size: 1.1rem; width: 24px; }
  .checkout-delivery-name { font-size: 0.82rem; }
  .checkout-delivery-cost { font-size: 0.82rem; }
}

/* ─────────── Validation alerts (unified pe toate temele) ─────────── */
.checkout-validation-alert {
  margin-top: 0.6rem;
  padding: 0.7rem 0.95rem;
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--color-danger);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: fadeInShake 0.4s ease;
}
.checkout-validation-alert i { color: var(--color-danger); flex-shrink: 0; }
.checkout-validation-alert strong { color: var(--color-danger); font-weight: 700; }

/* ==========================================================================
   AUTOCOMPLETARE CHROME — pastreaza fundalul temei (2026-07-30)
   --------------------------------------------------------------------------
   Cand browserul precompleteaza un camp (nume, telefon, strada, oras...),
   Chrome/Safari picteaza fortat un fundal albastru-deschis proprietar
   (`:-webkit-autofill`), care NU poate fi suprascris cu `background`.
   Pe temele INCHISE campurile precompletate ieseau albe/albastrui langa cele
   goale, care raman inchise — arata rupt (raportat pe porcusorulpofticios).
   Singura metoda care functioneaza: `box-shadow: inset` gros cat tot campul,
   plus `-webkit-text-fill-color` pentru text si caret. `transition` lunga pe
   background impiedica flash-ul galben la focus.
   Se aplica pe TOT site-ul, nu doar la checkout — orice input/textarea/select.
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset !important;
  box-shadow: 0 0 0 1000px var(--color-white) inset !important;
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-text);
  border-color: var(--color-border) !important;
  transition: background-color 100000s ease-in-out 0s;
}