/*
 * PAPI Theme — Design system for the Papi Demo Shop
 * Matches the visual language of docs.papi.mg & dashboard.papi.mg
 */

/* ─── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand / Primary — Papi Deep Blue */
  --pt-primary:        #0a4fb7;
  --pt-primary-hover:  #1a5fc7;
  --pt-primary-dark:   #083a8a;
  --pt-primary-light:  #EFF6FF;
  --pt-primary-mid:    rgba(10, 79, 183, 0.12);

  /* Papi gradient (docs.papi.mg / dashboard.papi.mg) */
  --pt-gradient:       linear-gradient(135deg, #0a4fb7 0%, #49a6f2 100%);
  --pt-accent:         #49a6f2;

  /* Map --pt-blue → Papi blue so all page inline-styles pick it up */
  --pt-blue:           #0a4fb7;
  --pt-blue-hover:     #1a5fc7;
  --pt-blue-light:     #EFF6FF;

  /* Backgrounds */
  --pt-bg-page:        #F8FAFC;
  --pt-bg-card:        #FFFFFF;
  --pt-bg-muted:       #EFF6FF;

  /* Borders */
  --pt-border:         #E2E8F0;
  --pt-border-focus:   #0a4fb7;

  /* Text */
  --pt-text-primary:   #0F172A;
  --pt-text-secondary: #334155;
  --pt-text-muted:     #94A3B8;
  --pt-text-label:     #475569;

  /* Status */
  --pt-green:          #1DB08A;
  --pt-green-bg:       #E6F8F2;
  --pt-red:            #E54545;
  --pt-red-bg:         #FEF0F0;
  --pt-warning:        #F59E0B;
  --pt-warning-bg:     #FFFBEB;

  /* Shadows */
  --pt-shadow-xs:  0 1px 2px rgba(13, 31, 30, 0.05);
  --pt-shadow-sm:  0 1px 4px rgba(13, 31, 30, 0.07), 0 1px 2px rgba(13, 31, 30, 0.04);
  --pt-shadow:     0 4px 16px rgba(13, 31, 30, 0.09);
  --pt-shadow-lg:  0 10px 40px rgba(13, 31, 30, 0.14);

  /* Shape */
  --pt-radius-xs:   4px;
  --pt-radius-sm:   6px;
  --pt-radius:      10px;
  --pt-radius-lg:   16px;
  --pt-radius-xl:   24px;
  --pt-radius-full: 9999px;

  /* Motion */
  --pt-transition: 0.16s ease;
}

/* ─── Base ───────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont,
               'Segoe UI', sans-serif;
  background: var(--pt-bg-page);
  color: var(--pt-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--pt-primary);
}

/* ─── Header ──────────────────────────────────────────────────────────────────── */
.header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 300;
}

.header-logo img {
  height: 26px !important;
}

.header-menu-title {
  color: var(--pt-text-secondary) !important;
  font-weight: 500;
  font-size: .88rem;
  transition: color var(--pt-transition);
}

.header-menu-title:hover {
  color: var(--pt-primary) !important;
}

/* Cart icon */
.icon-cart,
.icon-search {
  stroke: var(--pt-text-primary) !important;
}

.header-button-cart:hover .icon-cart,
.header-button-search:hover .icon-search {
  stroke: var(--pt-primary) !important;
}

/* Cart badge — always red for urgency */
.cart-badge {
  background: #EF4444 !important;
}

/* ─── Main content area ───────────────────────────────────────────────────────── */
.main {
  min-height: calc(100vh - 80px);
}

/* ─── Container ──────────────────────────────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.button-primary {
  background: var(--pt-primary) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600 !important;
  font-size: .875rem !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  padding: .7rem 1.5rem !important;
  box-shadow: 0 2px 8px rgba(58, 163, 159, 0.25) !important;
  transition: background var(--pt-transition), box-shadow var(--pt-transition),
              transform 0.1s ease !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.button-primary:hover {
  background: var(--pt-primary-hover) !important;
  box-shadow: 0 4px 16px rgba(58, 163, 159, 0.38) !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}

.button-primary:active {
  transform: translateY(0) !important;
}

/* Secondary buttons */
.button-secondary {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .8rem;
  color: var(--pt-text-secondary);
  text-transform: none;
  letter-spacing: 0;
}

.button-secondary.green {
  color: var(--pt-primary) !important;
}

.button-secondary.red {
  color: var(--pt-red) !important;
}

.button-add {
  color: var(--pt-primary) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .83rem;
  text-transform: none !important;
  letter-spacing: 0;
}

/* ─── Forms / Inputs ─────────────────────────────────────────────────────────── */
.input {
  font-family: 'Inter', sans-serif;
  border-radius: var(--pt-radius-sm) !important;
  border: 1px solid var(--pt-border) !important;
  transition: border-color var(--pt-transition), box-shadow var(--pt-transition);
}

.input:focus {
  outline: none !important;
  border-color: var(--pt-primary) !important;
  box-shadow: 0 0 0 3px rgba(58, 163, 159, 0.15) !important;
}

/* Radio selector */
.input-custom-selector-viewer {
  border-color: var(--pt-border) !important;
  transition: border-color var(--pt-transition);
}

.input-custom-selector-input:checked + .input-custom-selector-viewer {
  border-color: var(--pt-primary) !important;
}

.input-custom-selector-input:checked + .input-custom-selector-viewer::after {
  background-color: var(--pt-primary) !important;
}

/* Quantity controls */
.product-quantity-input {
  border-color: var(--pt-border) !important;
  border-radius: 8px !important;
}

/* ─── Breadcrumb / Step Progress ─────────────────────────────────────────────── */
.cart-breadcrumb-wrapper {
  align-items: center;
  gap: 0;
  padding: 1rem 0 1.75rem;
}

.cart-breadcrumb {
  display: flex;
  align-items: center;
}

.cart-breadcrumb .cart-step {
  font-size: .8rem !important;
  font-weight: 600;
  color: var(--pt-text-secondary);
  letter-spacing: .01em;
}

.cart-breadcrumb:not(:first-child) .cart-step {
  color: var(--pt-text-muted);
}

/* Active step */
.cart-breadcrumb:not(:has(.cart-breadcrumb-is-passive)) .cart-step,
.cart-step:not(.cart-breadcrumb-is-passive) {
  color: var(--pt-primary) !important;
  font-weight: 700;
}

.cart-breadcrumb-is-passive {
  color: var(--pt-text-muted) !important;
  opacity: 1 !important;
}

/* Arrow icon in breadcrumbs */
.cart-breadcrumb .icon-arrow-right {
  color: var(--pt-border) !important;
}

/* ─── Order Summary ───────────────────────────────────────────────────────────── */
.order-summary {
  background: var(--pt-bg-card) !important;
  border: 1px solid var(--pt-border) !important;
  border-radius: var(--pt-radius-lg) !important;
  box-shadow: var(--pt-shadow-sm) !important;
  padding: 1.5rem !important;
}

.order-summary-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--pt-text-primary);
  letter-spacing: -.01em;
}

.order-summary-total {
  font-weight: 700;
}

.order-summary-total-title {
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pt-text-label);
}

.order-summary-total-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pt-text-primary);
}

.order-summary-detail {
  border-bottom-color: var(--pt-border) !important;
}

.text-primary {
  color: var(--pt-primary) !important;
}

.order-summary .button-primary {
  border-radius: 8px !important;
  font-size: .875rem !important;
  padding: .8rem 1.25rem !important;
}

/* Coupon input */
.order-summary-coupon-input {
  border-color: var(--pt-border) !important;
  border-radius: var(--pt-radius-sm) !important;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem !important;
}

/* ─── Product Detail ──────────────────────────────────────────────────────────── */
.product-content-title {
  font-family: 'Inter', sans-serif;
  letter-spacing: -.02em;
}

.product-content-numbers-price {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--pt-text-primary);
}

.product-image-nav-item.is-active {
  border-color: var(--pt-primary) !important;
}

/* ─── Address cards ───────────────────────────────────────────────────────────── */
.address-detail-item-name-address {
  color: var(--pt-primary) !important;
  border-color: var(--pt-primary) !important;
  border-radius: var(--pt-radius-sm) !important;
}

.address-item-wrapper {
  border-bottom-color: var(--pt-border) !important;
}

/* ─── Shipping ──────────────────────────────────────────────────────────────── */
.shipping-detail-item-box {
  border-color: var(--pt-border) !important;
  border-radius: 8px !important;
  background: var(--pt-bg-card);
}

.shipping-method-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--pt-text-primary);
}

/* ─── Paiement ──────────────────────────────────────────────────────────────── */
.payment-detail-item {
  border-color: var(--pt-border) !important;
  border-radius: 8px !important;
  background: var(--pt-bg-card);
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--pt-border) !important;
}

.payment-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--pt-text-primary);
}

/* ─── Promo banner ───────────────────────────────────────────────────────────── */
.order-offer {
  background: var(--pt-primary-light) !important;
  border: 1px solid rgba(58, 163, 159, 0.25) !important;
  border-radius: 8px !important;
}

/* ─── Product color swatches ─────────────────────────────────────────────────── */
.product-content-favorite-button {
  color: var(--pt-primary) !important;
}

/* ─── Commande Wrapper ───────────────────────────────────────────────────────── */
.checkout-wrapper {
  gap: 2rem;
}

/* ─── Papi Progress Steps (new component) ────────────────────────────────────── */
.papi-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.75rem 0 2rem;
  position: relative;
}

.papi-steps::before {
  content: '';
  position: absolute;
  top: calc(1.75rem + 13px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 80px);
  max-width: 320px;
  height: 2px;
  background: var(--pt-border);
  z-index: 0;
}

.papi-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 130px;
  position: relative;
  z-index: 1;
}

.papi-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pt-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--pt-text-muted);
  transition: all var(--pt-transition);
  position: relative;
  z-index: 2;
}

.papi-step--done .papi-step-dot {
  background: var(--pt-primary);
  border-color: var(--pt-primary);
  color: #fff;
}

.papi-step--active .papi-step-dot {
  background: var(--pt-primary);
  border-color: var(--pt-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(58, 163, 159, 0.2);
}

.papi-step-label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--pt-text-muted);
  margin-top: .45rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.papi-step--active .papi-step-label {
  color: var(--pt-primary);
}

.papi-step--done .papi-step-label {
  color: var(--pt-text-secondary);
}

/* Connector lines */
.papi-step-line {
  position: absolute;
  top: 13px;
  left: calc(50% + 14px);
  height: 2px;
  width: calc(100% - 28px);
  background: var(--pt-border);
  z-index: 0;
}

.papi-step--done + .papi-step .papi-step-line,
.papi-step--done .papi-step-line {
  background: var(--pt-primary);
}

/* ─── Page Cards / Panels ────────────────────────────────────────────────────── */
.papi-card {
  background: var(--pt-bg-card);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  box-shadow: var(--pt-shadow-sm);
  padding: 1.5rem;
}

.papi-card + .papi-card {
  margin-top: 1rem;
}

/* ─── Badges / Tags ──────────────────────────────────────────────────────────── */
.papi-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--pt-radius-full);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
}

.papi-badge--success {
  background: var(--pt-green-bg);
  color: var(--pt-green);
}

.papi-badge--error {
  background: var(--pt-red-bg);
  color: var(--pt-red);
}

.papi-badge--primary {
  background: var(--pt-primary-light);
  color: var(--pt-primary);
}

/* ─── Alert / Notice ─────────────────────────────────────────────────────────── */
.papi-alert {
  padding: .85rem 1rem;
  border-radius: 8px;
  font-size: .83rem;
  font-family: 'Inter', sans-serif;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  line-height: 1.5;
}

.papi-alert--success {
  background: var(--pt-green-bg);
  border: 1px solid rgba(29, 176, 138, 0.25);
  color: #0D6B4E;
}

.papi-alert--error {
  background: var(--pt-red-bg);
  border: 1px solid rgba(229, 69, 69, 0.25);
  color: #B91C1C;
}

/* ─── Divider ────────────────────────────────────────────────────────────────── */
.papi-divider {
  border: none;
  border-top: 1px solid var(--pt-border);
  margin: 1.25rem 0;
}

/* ─── Commande step links (back navigation) ────────────────────────────────── */
.papi-back-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--pt-text-secondary);
  text-decoration: none;
  transition: color var(--pt-transition);
  margin-bottom: 1.25rem;
}

.papi-back-link:hover {
  color: var(--pt-primary);
}

.papi-back-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Section headings inside forms ─────────────────────────────────────────── */
.papi-section-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pt-text-label);
  margin-bottom: .85rem;
  font-family: 'Inter', sans-serif;
}

/* ─── Skeleton loaders (utility) ────────────────────────────────────────────── */
@keyframes pt-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.papi-skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg, #e8efef 25%, #d6e4e4 50%, #e8efef 75%);
  background-size: 800px 100%;
  animation: pt-shimmer 1.5s infinite;
}

/* ─── Responsive tweaks ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .papi-steps {
    padding: 1.25rem 0 1.5rem;
  }

  .papi-step-label {
    font-size: .62rem;
  }

  .papi-steps::before {
    width: calc(100% - 40px);
  }

  .order-summary {
    padding: 1.1rem !important;
  }
}

/* ─── Commande flow wrapper on mobile ───────────────────────────────────────── */
@media (max-width: 680px) {
  .checkout-wrapper {
    display: block !important;
  }

  .checkout-wrapper .order-summary {
    margin-top: 2rem;
  }
}

/* ─── Left main wrapper ──────────────────────────────────────────────────────── */
.left-main-wrapper {
  flex: 1;
}

/* ─── Consistent section wrappers ───────────────────────────────────────────── */
.address-wrapper,
.shipping-wrapper,
.payment-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1200px) {
  .address-wrapper,
  .shipping-wrapper,
  .payment-wrapper {
    grid-template-columns: 1fr 340px;
  }
}

/* ─── Page background for checkout pages ─────────────────────────────────────── */
.address section,
.shipping section,
.payment section {
  background: var(--pt-bg-page);
}

/* ─── Print ──────────────────────────────────────────────────────────────────── */
@media print {
  .header,
  .shop-toolbar {
    position: static !important;
    box-shadow: none !important;
  }
}