/* ============================================================
   Mirabel Registration Wizard
   ============================================================ */

:root {
    --mrw-primary: #6C5CE7;
    --mrw-primary-hover: #5A4BD1;
    --mrw-primary-light: #E8E5FC;
    --mrw-border: #E0E0E0;
    --mrw-border-active: #6C5CE7;
    --mrw-bg: #FFFFFF;
    --mrw-text: #333333;
    --mrw-text-light: #888888;
    --mrw-radius: 12px;
    --mrw-radius-sm: 8px;
    --mrw-shadow: 0 4px 24px rgba(0,0,0,0.08);
    --mrw-transition: 0.3s ease;
}

/* Hide default page wrapper padding for registration */
#content .register-form > p:first-child {
    text-align: center;
    margin-bottom: 24px;
    color: var(--mrw-text-light);
}

/* ---- Wizard container ---- */
.mrw-wizard {
    max-width: 560px;
    margin: 0 auto 40px;
    background: var(--mrw-bg);
    border-radius: var(--mrw-radius);
    box-shadow: var(--mrw-shadow);
    padding: 32px;
    position: relative;
}

/* ---- Progress bar ---- */
.mrw-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
}

.mrw-progress__segment {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--mrw-border);
    transition: background var(--mrw-transition);
}

.mrw-progress__segment.active {
    background: var(--mrw-primary);
}

/* ---- Step containers ---- */
.mrw-step {
    display: none;
    animation: mrwFadeIn 0.3s ease;
}

.mrw-step.active {
    display: block;
}

@keyframes mrwFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mrw-step__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mrw-text);
    margin-bottom: 20px;
}

/* ---- Step 1 : type cards ---- */
.mrw-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 8px;
}

.mrw-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 12px;
    border: 2px solid var(--mrw-border);
    border-radius: var(--mrw-radius-sm);
    cursor: pointer;
    transition: border-color var(--mrw-transition), box-shadow var(--mrw-transition);
    background: var(--mrw-bg);
    text-align: center;
    user-select: none;
}

.mrw-type-card:hover {
    border-color: var(--mrw-primary);
    box-shadow: 0 0 0 1px var(--mrw-primary);
}

.mrw-type-card.selected {
    border-color: var(--mrw-primary);
    box-shadow: 0 0 0 2px var(--mrw-primary);
    background: var(--mrw-primary-light);
}

.mrw-type-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mrw-type-card__icon svg {
    width: 48px;
    height: 48px;
    stroke: var(--mrw-primary);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mrw-type-card__label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mrw-text);
    line-height: 1.3;
}

.mrw-type-card__sublabel {
    font-size: 0.78rem;
    color: var(--mrw-text-light);
    font-weight: 400;
}

/* ---- Form field overrides inside wizard ---- */
.mrw-wizard .form-group {
    margin-bottom: 16px;
}

.mrw-wizard .form-group .col-md-3.form-control-label {
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    padding-bottom: 4px;
}

.mrw-wizard .form-control {
    border-radius: var(--mrw-radius-sm);
    border: 1.5px solid var(--mrw-border);
    padding: 10px 14px;
    font-size: 0.95rem;
    transition: border-color var(--mrw-transition);
}

.mrw-wizard .form-control:focus {
    border-color: var(--mrw-primary);
    box-shadow: 0 0 0 3px rgba(108,92,231,0.15);
}

/* Stack labels above inputs instead of side by side */
.mrw-wizard .form-group.row {
    flex-direction: column;
}

.mrw-wizard .form-group .col-md-3,
.mrw-wizard .form-group .col-md-6 {
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.mrw-wizard .form-group .col-md-3.form-control-comment {
    display: none;
}

/* Password field */
.mrw-wizard .field-password-policy {
    margin-bottom: 16px;
}

.mrw-wizard .input-group .btn {
    border-radius: 0 var(--mrw-radius-sm) var(--mrw-radius-sm) 0;
}

/* Radio buttons (gender) */
.mrw-wizard .radio-inline {
    margin-right: 16px;
}

.mrw-wizard .custom-radio span {
    border-color: var(--mrw-primary);
}

.mrw-wizard .custom-radio input:checked + span::before {
    background: var(--mrw-primary);
}

/* Checkboxes */
.mrw-wizard .custom-checkbox span {
    border-color: var(--mrw-border);
    border-radius: 4px;
}

.mrw-wizard .custom-checkbox input:checked + span {
    background: var(--mrw-primary);
    border-color: var(--mrw-primary);
}

/* ---- Navigation buttons ---- */
.mrw-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    gap: 12px;
}

.mrw-nav--center {
    justify-content: center;
}

.mrw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background var(--mrw-transition), transform 0.15s ease;
    line-height: 1;
}

.mrw-btn:active {
    transform: scale(0.97);
}

.mrw-btn--primary {
    background: var(--mrw-primary);
    color: #fff;
}

.mrw-btn--primary:hover {
    background: var(--mrw-primary-hover);
}

.mrw-btn--secondary {
    background: transparent;
    color: var(--mrw-primary);
    border: 2px solid var(--mrw-primary);
}

.mrw-btn--secondary:hover {
    background: var(--mrw-primary-light);
}

.mrw-btn__arrow {
    font-size: 1.1rem;
    line-height: 1;
}

/* ---- Step 5 : recap ---- */
.mrw-recap {
    background: #F8F8FC;
    border-radius: var(--mrw-radius-sm);
    padding: 20px;
    margin-bottom: 20px;
}

.mrw-recap__title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--mrw-text);
}

.mrw-recap__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--mrw-border);
    font-size: 0.9rem;
}

.mrw-recap__row:last-child {
    border-bottom: none;
}

.mrw-recap__label {
    color: var(--mrw-text-light);
    font-weight: 500;
}

.mrw-recap__value {
    color: var(--mrw-text);
    font-weight: 600;
    text-align: right;
}

/* ---- Validation error shake ---- */
.mrw-shake {
    animation: mrwShake 0.4s ease;
}

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

/* ---- Hide default submit during wizard ---- */
#customer-form > div > .form-footer,
#customer-form .form-footer {
    display: none !important;
}

/* ---- Errors display ---- */
.mrw-step-error {
    color: #e74c3c;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 8px;
    display: none;
}

.mrw-step-error.visible {
    display: block;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .mrw-wizard {
        margin: 0 12px 24px;
        padding: 20px 16px;
    }

    .mrw-type-grid {
        gap: 10px;
    }

    .mrw-type-card {
        padding: 14px 8px;
    }

    .mrw-type-card__icon {
        width: 44px;
        height: 44px;
    }

    .mrw-type-card__icon svg {
        width: 38px;
        height: 38px;
    }

    .mrw-btn {
        padding: 10px 20px;
        font-size: 0.88rem;
    }
}

/* ---- Checkout context: no card wrapper, inherit parent styling ---- */
.mrw-wizard--checkout {
    max-width: 100%;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

#checkout-guest-form .form-footer,
#checkout-guest-form > form > div > .form-footer {
    display: none !important;
}



.mrw-progress__segment.active {
    background:#264A4C;
}

body.page-customer-account #wrapper {
    background-color: #fff!important;
}

#registration .mrw-type-card.selected, #checkout .mrw-type-card.selected {
    border-color:#264A4C!important;
    background-color:#EFF7F7!important;
    box-shadow: 0 0 0 1px #264A4C;
}

#registration .mrw-type-card__icon svg, #checkout .mrw-type-card__icon svg {
    stroke:#264A4C!important;
}

#registration button.mrw-btn--primary, #checkout button.mrw-btn--primary {
    background:#264A4C;
}

#registration button.mrw-btn.mrw-btn--secondary, #checkout button.mrw-btn.mrw-btn--secondary {
    color:#264A4C!important;
    border-color:#264A4C!important;
    background-color:#EFF7F7!important;
}

#registration .col-md-6.js-input-column, #checkout .col-md-6.js-input-column {
    width: 100%!important;
}

#registration .mrw-recap, #checkout .mrw-recap {
     background:#EFF7F7!important;
}

#registration .mrw-wizard .form-group, #checkout .mrw-wizard .form-group {
    margin-bottom: 0px!important;
}

#registration .mrw-wizard .custom-checkbox input:checked + span, #checkout .mrw-wizard .custom-checkbox input:checked + span {
    background: white;
    border-color: #264A4C;
}

#registration .form-group.row, #checkout .form-group.row {
    margin-bottom: 10px!important;
}

#registration .mrw-type-card:hover, #checkout .mrw-type-card:hover {
    border-color: #264A4C!important;
    box-shadow: 0 0 0 1px #264A4C!important;
}

#registration .mrw-btn--primary:hover, #checkout .mrw-btn--primary:hover {
    background: #5E989C;
}

#registration button.mrw-btn.mrw-btn--secondary:hover, #checkout button.mrw-btn.mrw-btn--secondary:hover {
    color:#5E989C!important;
    border-color:#5E989C!important;
    background-color:#EFF7F7!important;
}

#registration .mrw-wizard .form-group .col-md-3, #checkout .mrw-wizard .form-group .col-md-3 {
    width:100%;
}

#registration .mrw-wizard .form-control:focus, #checkout .mrw-wizard .form-control:focus {
    box-shadow: 0 0 0 3px rgb(92 217 231 / 15%);
}