/* ── Variables ─────────────────────────────────────────────────────── */
:root {
    --rx-primary:  #0d6efd;
    --rx-gradient: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

/* ── Global ────────────────────────────────────────────────────────── */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Page publique : centrage vertical + horizontal */
body.page-centered {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page-main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
    padding: 24px 0;
}

/* ── Hero Header ──────────────────────────────────────────────────── */
.hero-header {
    background: var(--rx-gradient);
    box-shadow: 0 4px 20px rgba(13, 110, 253, .25);
}
.logo-img {
    height: 52px; width: auto;
    border-radius: 8px; object-fit: contain;
    background: rgba(255,255,255,.15); padding: 4px;
}
.logo-placeholder {
    width: 52px; height: 52px;
    background: rgba(255,255,255,.2);
    border-radius: 10px; color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   WIZARD STEPS INDICATOR
══════════════════════════════════════════════════════════════════ */
.wizard-steps { gap: 8px; }

.step-bubble {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    background: #e9ecef; color: #adb5bd;
    transition: background .35s, color .35s, transform .2s;
    flex-shrink: 0;
}
.step-bubble.active {
    background: var(--rx-primary); color: #fff;
    box-shadow: 0 0 0 4px rgba(13,110,253,.2);
    transform: scale(1.1);
}
.step-bubble.done {
    background: #198754; color: #fff;
}

.step-track {
    flex-grow: 1; max-width: 64px; height: 3px;
    background: #e9ecef; border-radius: 2px;
    transition: background .4s;
}
.step-track.done { background: #198754; }

/* ══════════════════════════════════════════════════════════════════
   ÉTAPE TRANSITIONS
══════════════════════════════════════════════════════════════════ */
.step-enter {
    opacity: 0;
    transform: translateY(12px);
}
.step-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease;
}

/* ══════════════════════════════════════════════════════════════════
   SPINNER D'ANIMATION (double anneau)
══════════════════════════════════════════════════════════════════ */
.dual-ring-spinner {
    position: relative;
    width: 80px; height: 80px;
    margin: 0 auto;
}
.ring-outer, .ring-inner {
    position: absolute;
    border-radius: 50%;
    border: 4px solid transparent;
    animation: rx-spin 1s linear infinite;
}
.ring-outer {
    inset: 0;
    border-top-color:   var(--rx-primary);
    border-right-color: rgba(13,110,253,.25);
}
.ring-inner {
    inset: 14px;
    border-bottom-color: #6f42c1;
    border-left-color:   rgba(111,66,193,.25);
    animation-duration:  .7s;
    animation-direction: reverse;
}
@keyframes rx-spin {
    to { transform: rotate(360deg); }
}

#anim-title, #anim-sub {
    transition: opacity .4s ease;
}

/* ══════════════════════════════════════════════════════════════════
   BADGE TYPE (étape 2)
══════════════════════════════════════════════════════════════════ */
.coupon-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #0d6efd, #6f42c1);
    color: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(13,110,253,.3);
}

/* ══════════════════════════════════════════════════════════════════
   INPUT CODE COUPON
══════════════════════════════════════════════════════════════════ */
.code-input {
    font-size: 1.5rem !important;
    letter-spacing: 6px;
    padding: 14px 16px !important;
    border-width: 2px !important;
    transition: border-color .2s, box-shadow .2s;
}
.code-input:focus {
    border-color: var(--rx-primary) !important;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.2) !important;
}
.code-input.is-valid   { border-color: #198754 !important; }
.code-input.is-invalid { border-color: #dc3545 !important; }

/* Compteur de caractères */
.code-counter {
    font-size: .82rem;
    font-weight: 600;
    color: #adb5bd;
    transition: color .2s;
    white-space: nowrap;
}
.code-counter.cc-ok    { color: #198754; }
.code-counter.cc-warn  { color: #fd7e14; }
.code-counter.cc-error { color: #dc3545; }

/* ══════════════════════════════════════════════════════════════════
   CHECKMARK ANIMÉ (SVG — étape 3)
══════════════════════════════════════════════════════════════════ */
.success-checkmark {
    width: 80px; height: 80px;
}
.checkmark-svg {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #198754;
    stroke-miterlimit: 10;
}
.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #198754;
    fill: rgba(25,135,84,.08);
    animation: rx-stroke .6s cubic-bezier(.65, 0, .45, 1) forwards;
}
.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 2.5;
    stroke-linecap: round;
    animation: rx-stroke .3s cubic-bezier(.65, 0, .45, 1) .6s forwards;
}
@keyframes rx-stroke {
    100% { stroke-dashoffset: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN LAYOUT
══════════════════════════════════════════════════════════════════ */
.admin-body { background: #f0f2f5; }

.hover-item { transition: background .15s; }
.hover-item:hover { background: rgba(255,255,255,.1) !important; }
.sidebar .nav-link.active { background: var(--rx-primary) !important; color: #fff !important; }

/* ── Table ────────────────────────────────────────────────────────── */
.table > :not(caption) > * > * { padding: .65rem .85rem; }

/* ── Alerts ───────────────────────────────────────────────────────── */
.alert { border: none; border-left: 4px solid; }
.alert-success { border-left-color: #198754; }
.alert-danger  { border-left-color: #dc3545; }
.alert-info    { border-left-color: #0dcaf0; }
.alert-warning { border-left-color: #ffc107; }

/* ── Pagination ───────────────────────────────────────────────────── */
.page-link { color: var(--rx-primary); }
.page-item.active .page-link { background-color: var(--rx-primary); border-color: var(--rx-primary); }

/* ── Form focus ───────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--rx-primary);
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.2);
}

/* ── Captcha (page captcha.php) ───────────────────────────────────── */
.captcha-img { border: 2px solid #dee2e6; border-radius: 6px; cursor: pointer; }
.captcha-img:hover { border-color: var(--rx-primary); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .hero-header .h3 { font-size: 1.2rem; }
    .code-input { font-size: 1.2rem !important; letter-spacing: 4px; }
    .coupon-badge { font-size: .9rem; padding: 8px 16px; }
}

/* ── Print ────────────────────────────────────────────────────────── */
@media print {
    .sidebar, .navbar, .btn, nav, #step-header { display: none !important; }
}