/* Google font Orbitron for Sci-Fi loader numbers (matches original onboarding.css) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@400;600;800&display=swap');

/* =====================================================================
   OSF AI ONBOARDING  �  strictly theme-token driven.
   Every colour, radius, spacing, font and shadow consumes EXISTING global
   tokens directly:
     � Structural / colour tokens  ->  theme.css :root
         --border-radius, --card-bg, --section-bg,
         --red, --dark-red, --light-red, --white, --black,
         --border-color, --muted
     � Spacing / type / motion     ->  templates/default.css :root (whmp layer)
         --spacing-*, --font-*, --font-weight-*, --p/--label/--input/--button,
         --transition-base, --shadow-sm, --border-radius-circle, --whmp-*
   No private (--osf-*) variables, no hard-coded radii, no literal colours.
   Scope: everything is namespaced under .osf-onboard. Class names, ids and
   state hooks (.active/.completed/.selected, data-osf-*) are untouched so
   osf-onboarding.js keeps working.
   ===================================================================== */

.osf-onboard {
    width: 100%;
    color: var(--black);
    font-family: 'Poppins-Light';
}

.osf-onboard[hidden] { display: none; }

/* ---------- Progress circles / steps (ported .progress-steps) ---------- */
.osf-progress-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 40px 0;
    flex-wrap: wrap;
}
/* display:flex above would otherwise beat the UA [hidden] rule */
.osf-progress-steps[hidden] { display: none !important; }
.osf-step-item {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}
/* white rounded-square nodes sit on the red deploy backdrop */
.osf-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    transition: all 0.3s ease;
}
.osf-step-main-icon { font-size: 11px; color: rgba(255, 255, 255, 0.7); }
.osf-step-check-icon { font-size: 11px; color: var(--red); display: none; }

/* active node � white square with red icon and outer white outline */
.osf-step-item.active .osf-step-icon {
    background: var(--white);
    border: none;
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 3px;
}
.osf-step-item.active .osf-step-main-icon { color: var(--red); font-size: 12px; }

/* completed node � white square with a red check */
.osf-step-item.completed .osf-step-icon {
    background: var(--white);
    border: none;
}
.osf-step-item.completed .osf-step-main-icon { display: none; }
.osf-step-item.completed .osf-step-check-icon { display: block; color: var(--red); }

.osf-step-line {
    width: 72px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0;
}
/* connector fills only once the dot before it is completed, so the bar
   fills progressively as the user advances (and empties on Back) */
.osf-step-item.completed + .osf-step-line { background: var(--white); }

/* ---------- Card shell ---------- */
.osf-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* ---------- Step header (Red Gradient Banner) ---------- */
.osf-step-header {
    position: relative;
    padding: 40px 30px;
    background: var(--gradient);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.osf-step-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    padding: 4px 14px;
    border-radius: var(--border-radius);
    margin-bottom: 8px;
}
.osf-step-header .osf-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--white) !important;
    margin: 8px 0 6px 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.osf-step-header .osf-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

/* ---------- Checkout method chooser (#osf-onboard) ----------
   The pre-payment "How do you want to build?" card uses a plain WHITE header
   (red pill on a light tint + dark heading) � no red gradient banner. The red
   banner above is kept only for the post-payment wizard steps (#osf-deploy). */
#osf-onboard .osf-card { padding: 28px 30px !important; }
#osf-onboard .osf-step-header {
    position: static;
    padding: 0 !important;
    background: none !important;
    animation: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: left;
    margin-bottom: 15px;
}
#osf-onboard .osf-step-pill {
    color: var(--red) !important;
    background: var(--light-red) !important;
    border: none !important;
}
#osf-onboard .osf-step-header .osf-title { color: var(--black) !important; }
#osf-onboard .osf-step-header .osf-desc { color: var(--muted) !important; }

/* ---------- Step transition animation on reveal ---------- */
.osf-wizard-step:not([hidden]) {
    animation: osfRevealDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- Step body wrapper ---------- */
.osf-step-body {
    padding: 40px;
    background: var(--card-bg);
}
.osf-step-body-intro {
    text-align: left;
    margin-bottom: 20px;
}
.osf-step-body-intro h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 6px 0;
}
.osf-step-body-intro p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

/* ---------- Selection cards (method choice + category) ---------- */
.osf-selection-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 25px;
}
.osf-select-card {
    position: relative;
    background: var(--white);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px 15px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: unset;
}
.osf-select-card:hover {
    border-color: var(--red);
    background: var(--white);
    box-shadow: 0 8px 20px -10px rgba(225, 29, 72, 0.25);
    transform: translateY(-2px);
}
.osf-select-card.active {
    border-color: var(--red) !important;
    background: var(--light-red) !important;
    box-shadow: none;
}
.osf-select-card.active:hover {
    transform: translateY(-2px);
}
.osf-select-card h3,
.osf-select-card span {
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
    margin: 12px 0 4px 0;
    display: block;
    font-family: 'Poppins-Light';
}
.osf-select-card p {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}
.osf-card-icon {
    width: 50px;
    height: 50px;
    background: var(--white) !important;
    border: 1px solid var(--light-red) !important;
    border-radius: calc(var(--border-radius) - 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    transition: all 0.3s ease;
}
.osf-select-card:hover .osf-card-icon {
    transform: scale(1.12);
}
.osf-select-card.active .osf-card-icon {
    background: linear-gradient(135deg, #fb7185, var(--red)) !important;
    border-color: transparent !important;
}
.osf-card-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
    transition: all 0.3s ease;
}
/* SVG colour policy:
   - stroke-based icons (authored with fill="none") track the theme accent;
   - solid-fill / multi-colour SVGs keep their authored colours and are never
     flattened (no blanket fill/stroke override on them). */
.osf-card-icon svg[fill="none"] { stroke: var(--red); }
.osf-select-card.active .osf-card-icon svg[fill="none"] { stroke: var(--white) !important; }
.osf-card-icon i,
.osf-card-icon .fas,
.osf-card-icon .far {
    font-size: 20px;
    color: var(--red);
    transition: all 0.3s ease;
}
.osf-select-card.active .osf-card-icon i,
.osf-select-card.active .osf-card-icon .fas,
.osf-select-card.active .osf-card-icon .far {
    color: var(--white) !important;
}
.osf-active-tick {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: var(--red) !important;
    color: var(--white);
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5;
    border: 2px solid var(--white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.osf-select-card.active .osf-active-tick {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

/* ---------- Inputs ---------- */
.osf-input-group { margin-bottom: 15px; }
.osf-input-group label,
.osf-input-col label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 5px;
    font-family: 'Poppins-Medium';
}
.osf-input-row { display: flex; gap: 15px; flex-wrap: wrap; width: 100%; }
.osf-input-col { flex: 1; min-width: 160px; }
.osf-col-8 { flex: 0 0 calc(66.666% - 8px); width: calc(66.666% - 8px); }
.osf-col-4 { flex: 0 0 calc(33.333% - 8px); width: calc(33.333% - 8px); }
.osf-col-6 { flex: 0 0 calc(50% - 8px); width: calc(50% - 8px); }

.whmp-form-cntrl {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius);
    outline: none;
    color: var(--black);
    background-color: var(--white);
    box-sizing: border-box;
    transition: all 0.3s ease;
    height: auto !important;
}

/* Input focus dynamic background glow */
.whmp-form-cntrl:focus {
    border-color: var(--red) ;
}

/* AI generate button inside inputs � matches original ai-gen-btn */
.osf-ai-input-wrapper { position: relative; width: 100%; }
.osf-ai-gen-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--border-radius) / 2);
    background: rgba(203, 31, 73, 0.05);
    transition: all 0.2s ease;
    border: 1px solid transparent;
    color: var(--red);
    font-size: 14px;
}
.osf-ai-gen-btn:hover {
    background: rgba(203, 31, 73, 0.12);
    border-color: rgba(203, 31, 73, 0.2);
    transform: translateY(-50%) scale(1.05);
}
/* Textarea icon positioned near top */
textarea + .osf-ai-gen-btn,
.osf-ai-input-wrapper:has(textarea) .osf-ai-gen-btn {
    top: 25px;
}

/* tone / palette pills  � matches original onboarding tone-pill */
.osf-pill-row { display: flex; flex-wrap: wrap; gap: 5px; }
.osf-pill {
    padding: 10px 22px;
    border: 1.5px solid var(--light-red);
    background: var(--white);
    color: var(--muted);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    margin-bottom: 5px;
}
.osf-pill.active { 
    background: linear-gradient(135deg, #fb7185, var(--red)) !important; 
    color: var(--white) !important; 
    border-color: #FF3B5C !important;
    box-shadow: 0 4px 10px rgba(255, 59, 92, 0.2);
}
.osf-pill:hover:not(.active) {
    border-color: var(--red);
    color: var(--red);
}

/* ---------- Template grid ----------
   The JS injects a Bootstrap `.row > .col-*` structure (same markup as the
   reference ai-templates.tpl), so this stays a plain block wrapper and lets
   the row/cols handle the columns. A CSS grid here would trap the whole row
   in a single narrow track. */
.osf-template-area { display: block; width: 100%; }
/* template cards overrides reskinned using theme variables */
.osf-onboard .ai-template-card {
    position: relative;
    background: var(--light-red) !important;
    border-radius: var(--border-radius) !important;
    padding: 4px !important;
    border: 2px solid transparent !important;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0px 0px transparent;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
.osf-onboard .tpl-img-container {
    height: auto;
    border-radius: calc(var(--border-radius) - 4px) !important;
    overflow: hidden;
    position: relative;
    background: var(--white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.osf-onboard .tpl-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    transition: transform 0.6s ease;
}
.osf-onboard .ai-template-card .card-body {
    padding: 8px 4px 4px 4px;
    text-align: left;
    background: transparent;
    position: relative;
    z-index: 2;
}
.osf-onboard .ai-template-card h6 {
    font-weight: 700;
    font-size: 15px;
    color: var(--black) !important;
    line-height: 1.4;
    margin: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}
.osf-onboard .ai-template-card:hover {
    transform: translate(3px, -3px) !important;
    box-shadow: -6px 6px 0px var(--red) !important;
}
.osf-onboard .ai-template-card:hover .tpl-thumb {
    transform: scale(1.08) !important;
}
.osf-onboard .ai-template-card:hover h6 {
    color: var(--red) !important;
}
.osf-onboard .ai-template-card.selected,
.osf-onboard .ai-template-card.active {
    border-color: var(--red) !important;
    background: var(--light-red) !important;
    transform: translate(3px, -3px) !important;
    box-shadow: -6px 6px 0px var(--red) !important;
}
.osf-onboard .selection-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 26px;
    height: 26px;
    background: var(--red) !important;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(203, 31, 73, 0.4);
    z-index: 10;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.osf-onboard .selection-badge::after {
    content: '?';
    font-weight: 900;
}
.osf-onboard .ai-template-card.selected .selection-badge,
.osf-onboard .ai-template-card.active .selection-badge {
    display: flex !important;
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---------- Skeleton loader styles (copied from onboarding.css) ---------- */
.pro-skeleton-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: var(--card-bg); 
    z-index: 10; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    border-radius: inherit;
}
.pro-skeleton-text {
    color: var(--red);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 20px;
    z-index: 10;
    position: relative;
}
.s-bar-pro {
    background: var(--border-color);
    border-radius: calc(var(--border-radius) / 2);
    position: relative;
    overflow: hidden;
    z-index: 2;
    height: 10px;
}
.s-bar-pro.mb-12 {
    margin-bottom: 12px;
}
.s-bar-pro.w-75 {
    width: 75%;
}
.s-bar-pro.w-65 {
    width: 65%;
}
.s-bar-pro.w-40 {
    width: 40%;
}
.s-bar-pro::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: skeleton-wave-bars 1.2s infinite ease-in-out;
}
@keyframes skeleton-wave-bars {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ---------- Transfer credentials reveal (pre-payment / checkout) ----------
   When the buyer picks the Transfer card, osf-onboarding.js un-hides
   #osf-checkout-transfer. This slides the credential form in directly below
   the builder-method row instead of popping in instantly. */
@keyframes osfRevealDown {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
}
#osf-checkout-transfer:not([hidden]) {
    animation: osfRevealDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* gentle staggered fade for each credential row inside the form */
#osf-checkout-transfer:not([hidden]) .osf-input-group,
#osf-checkout-transfer:not([hidden]) .osf-input-row {
    animation: osfRevealDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#osf-checkout-transfer:not([hidden]) .osf-input-group:nth-of-type(1),
#osf-checkout-transfer:not([hidden]) .osf-input-row:nth-of-type(1) { animation-delay: 0.08s; }
#osf-checkout-transfer:not([hidden]) .osf-input-row:nth-of-type(2) { animation-delay: 0.16s; }
#osf-checkout-transfer:not([hidden]) .osf-input-row:nth-of-type(3) { animation-delay: 0.24s; }
/* graceful close when the buyer switches to AI Builder / From Scratch.
   Declared after the reveal rule so it wins while the card is still un-hidden. */
@keyframes osfRevealUp {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-18px); }
}
#osf-checkout-transfer.osf-closing {
    animation: osfRevealUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- Footer buttons ---------- */
.osf-footer-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    gap: 15px;
}
.osf-btn-back {
    background: transparent;
    color: var(--red);
    border: none;
    font-weight: 700;
    cursor: pointer;
    padding: 10px 15px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
    font-size: 13px;
    gap: 8px;
}
.osf-btn-back i {
    transition: transform 0.3s ease;
}
.osf-btn-back:hover {
    color: var(--dark-red);
}
.osf-btn-back:hover i {
    transform: translateX(-4px);
}
.osf-btn-primary {
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 30px;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Poppins-Bold';
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(203, 31, 73, 0.3);
    transition: all 0.3s ease;
}
.osf-btn-primary:hover { 
    background: var(--dark-red); 
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(203, 31, 73, 0.4);
}
.osf-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Deploy status text (shared) ---------- */
.osf-status-text { font-size: 16px; color: var(--muted); }

.osf-alert {
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 15px;
    font-size: 14px;
}
.osf-alert.error { background: var(--status-padding-bg); color: var(--text-muted); border: 1px solid var(--red); }
.osf-alert.success { background: var(--status-active-bg); color: var(--text-muted); border: 1px solid var(--green); }

/* ---------- info block / method note ---------- */
.osf-step-info-block {
    margin-bottom: 10px;
    text-align: left;
}
.osf-step-info-block .osf-sub-heading {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--black);
}
.osf-step-info-block .osf-desc {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}
.osf-method-note { margin-top: 20px; color: var(--green); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* ---------- palette selector � matches original palette-card ---------- */
.osf-palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.osf-palette {
    display: flex; 
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    border: 1.5px solid var(--border-color);
    border-radius: calc(var(--border-radius) - 4px);
    background: var(--white);
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}
.osf-palette span { flex: 1; display: block; width: 22px; height: 22px; border-radius: 4px; }
.osf-palette.active { border-color: var(--red) !important; background: var(--light-red) !important; box-shadow: 0 0 0 1px var(--red) !important; }
.osf-palette:hover:not(.active) { border-color: var(--red); }

/* ---------- logo drop zone ---------- */
.osf-logo-drop {
    position: relative; 
    height: 42px;
    border: 1px solid var(--border-color); 
    border-radius: 30px;
    background: var(--white);
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--black); 
    cursor: pointer; 
    transition: all 0.3s ease;
    overflow: hidden;
}
.osf-logo-drop:hover { border-color: var(--red); background: var(--card-bg); }
.osf-logo-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
#osf-logo-prompt { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--black); }
#osf-logo-prompt i { color: var(--red) !important; font-size: 16px; }
#osf-logo-preview { position: relative; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--white); }
#osf-logo-img { max-height: 80%; max-width: 80%; object-fit: contain; }
.osf-logo-remove {
    position: absolute; top: 4px; right: 4px; width: 18px; height: 18px;
    border-radius: 50%; border: none;
    background: var(--red); color: var(--white); cursor: pointer; font-size: 9px;
    display: flex; align-items: center; justify-content: center; z-index: 3;
}

/* =====================================================================
   DEPLOY LOADER  (ported layout from onboarding.tpl step-6, themed)
   ===================================================================== */
.osf-loader { text-align: center; max-width: 640px; margin: 0 auto; padding: 20px 0; }

.osf-ai-main { position: relative; width: 180px; height: 180px; margin: 0 auto 20px; }
.osf-circular-chart { width: 100%; height: 100%; transform: rotate(-90deg); }
.osf-circle-track { fill: none; stroke: var(--border-color); stroke-width: 3; opacity: .5; }
.osf-circle-bg { fill: none; stroke: var(--border-color); stroke-width: 8; }
.osf-circle-progress { fill: none; stroke: var(--red); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.osf-ai-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.osf-ai-spark { color: var(--red); font-size: 40px; line-height: 1; margin-bottom: 4px; }
.osf-ai-percent { font-size: 26px; font-weight: 700; color: var(--black); }

/* timeline */
.osf-steps-flex { display: flex; align-items: center; justify-content: center; margin-top: 30px; }
.osf-step-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.osf-step-ring {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center;
    color: var(--muted); background: var(--white); transition: all 0.3s ease;
}
.osf-step-text { font-size: 11px; color: var(--muted); font-weight: 600; }
.osf-step-col.active .osf-step-ring { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 4px var(--status-padding-bg); }
.osf-step-col.completed .osf-step-ring { border-color: var(--red); background: var(--red); color: var(--white); }
.osf-step-col.active .osf-step-text, .osf-step-col.completed .osf-step-text { color: var(--black); }
.osf-step-prog { width: 70px; height: 3px; background: var(--border-color); margin: 0 6px; align-self: flex-start; margin-top: 16px; border-radius: 50%; transition: all 0.3s ease; }
.osf-step-prog.active, .osf-step-prog.completed { background: var(--red); }

/* error / success */
.osf-error-icon { font-size: 56px; color: var(--red); margin-bottom: 15px; }
.osf-congrats { font-size: 56px; margin-bottom: 10px; }

@media (max-width: 800px) {
    .osf-selection-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 600px) {
    .osf-card { padding: 20px; }
    .osf-step-line { width: 28px; }
    .osf-step-prog { width: 36px; }
    .osf-ai-main { width: 150px; height: 150px; }
    .osf-selection-row { grid-template-columns: 1fr; gap: 15px; }
    .osf-col-8, .osf-col-4, .osf-col-6 {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .osf-input-row {
        gap: 15px;
    }
}

/* =====================================================================
   FULL-SCREEN OVERLAY FOR DEPLOY/WIZARD (complete.tpl)
   ===================================================================== */
#osf-deploy.onboarding-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--red);
    background-image:
            linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, transparent 18%),
            linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 42%, transparent 42.1%),
            linear-gradient(135deg, transparent 42.1%, rgba(255, 255, 255, 0.06) 42.2%, transparent 65%),
            linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.7) 100%);
    overflow-y: auto;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0 !important;
    max-width: 100% !important;
}

#osf-deploy[hidden] {
    display: none !important;
}

.bg-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bg-animation .cube {
    position: absolute;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    animation: float 20s infinite linear;
    bottom: -100px;
    z-index: 0;
}
.cube:nth-child(1) { width: 80px; height: 80px; left: 10%; }
.cube:nth-child(2) { width: 40px; height: 40px; left: 30%; animation-duration: 15s; }
.cube:nth-child(3) { width: 60px; height: 60px; left: 70%; animation-duration: 25s; }
@keyframes float { to { transform: translateY(-1000px) rotate(360deg); opacity: 0; } }

.ob-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0px;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
}

.osf-ob-content-wrap {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 2;
}

/* Center card shell on screen and style it like onboarding white-card */
#osf-deploy .osf-card {
    background: var(--card-bg);
    color: var(--black);
    border: none !important;
    border-radius: var(--border-radius);
    padding: 0 !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    box-sizing: border-box;
    overflow: hidden;
}

/* Hide surrounding theme elements when onboarding is active */
body:has(#osf-deploy:not([hidden])) #header,
body:has(#osf-deploy:not([hidden])) #footer,
body:has(#osf-deploy:not([hidden])) footer,
body:has(#osf-deploy:not([hidden])) .footer-simple,
body:has(#osf-deploy:not([hidden])) .navbar,
body:has(#osf-deploy:not([hidden])) .cart-sidebar,
body:has(#osf-deploy:not([hidden])) .cart-body > .header-lined,
body:has(#osf-deploy:not([hidden])) .cart-body > p,
body:has(#osf-deploy:not([hidden])) .cart-body > .row:not(:has(#osf-deploy)),
body:has(#osf-deploy:not([hidden])) .cart-body > .text-center,
body:has(#osf-deploy:not([hidden])) .product-added-panel,
body:has(#osf-deploy:not([hidden])) .product-recommendations-container,
body.osf-onboarding-active #header,
body.osf-onboarding-active #footer,
body.osf-onboarding-active footer,
body.osf-onboarding-active .footer-simple,
body.osf-onboarding-active .navbar,
body.osf-onboarding-active .cart-sidebar,
body.osf-onboarding-active .cart-body > .header-lined,
body.osf-onboarding-active .cart-body > p,
body.osf-onboarding-active .cart-body > .row:not(:has(#osf-deploy)),
body.osf-onboarding-active .cart-body > .text-center,
body.osf-onboarding-active .product-added-panel,
body.osf-onboarding-active .product-recommendations-container {
    display: none !important;
}

body:has(#osf-deploy:not([hidden])),
body.osf-onboarding-active {
    overflow: hidden !important;
}

/* =====================================================================
   CIRCULAR LOADER CUSTOM GLOW STYLES (from onboarding.css)
   ===================================================================== */
.ai-main-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 35px;
}
.circular-chart-ai {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.4));
    overflow: visible !important;
}
.circle-bg-ai {
    fill: none;
    stroke: rgba(0, 0, 0, 0.15);
    stroke-width: 5;
}
.circle-progress-ai {
    fill: none;
    stroke: var(--white);
    stroke-width: 8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-inner-core {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ai-brain-svg {
    font-size: 60px;
    background: var(--white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    animation: brainPulse 1.5s infinite alternate;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}
.ai-percent-text {
    margin-top: 25px;
    font-size: 55px;
    font-weight: 700;
    font-family: 'Orbitron', 'Inter', sans-serif;
    color: var(--white);
    line-height: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
}
@keyframes brainPulse {
    0% { transform: scale(0.95); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)); }
}

@keyframes osfHeaderGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Copied AI Styles from wordpressManager */
.ai-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin-bottom: 25px;
}

/* 1. Base Card Styling - Border bilkul clean rakha hai */
.ai-cat-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--base-color, #e5e7eb);
    padding: 15px 15px;
    border-radius: var(--border-radius, 16px);
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    transition: all 0.2s ease-in-out;
}

/* 2. Icon Box Container */
.wpm-cat-icon-wrap {
    width: 50px;
    height: 50px;
   background: linear-gradient(320deg, #fff5f7, #fff);
    border: 1px solid #fecaca;
    border-radius: var(--border-radius, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    transition: all 0.3s ease;
}

.wpm-cat-icon-wrap svg {
    height: 24px;
    width: 24px;
    stroke: var(--red, #CB1F49); /* Normal state mein red stroke */
    stroke-width: 1.8;
    transition: all 0.3s ease;
}
/* 3. Tick Position (Exactly like Sample) */
.active-tick {
    position: absolute;
    top: 8px;    /* Sample image ke mutabiq andar ki taraf */
    right: 8px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #fb7185, #be123c);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5;
}

/* 4. Hover State - Sirf border color change hoga, lift nahi hoga */
.ai-cat-card:hover {
    border-color: var(--red, #CB1F49);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -14px rgba(225, 29, 72, 0.4);
}

/* 5. Active / Selected State - No Shadow, No Translate */
.ai-cat-card.active,
.ai-cat-card.selected {
    border-color: var(--red, #CB1F49) !important;
    background: var(--light-red, #fae9ed) !important; /* White background rakha hai clean look ke liye */
    box-shadow: 0 0 0 3px rgba(203,31,73,0.1);
}

.ai-cat-card.selected:hover {
    transform: translateY(-2px);
}


/* Active Icon Box and Tick */
.ai-cat-card.active .wpm-cat-icon-wrap {
    background: linear-gradient(135deg, #fb7185, #be123c);
}

.ai-cat-card.active svg {
    stroke: #ffffff;
}

.ai-cat-card.active .active-tick {
    opacity: 1;
    transform: scale(1);
.ai-main-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 35px;
}

/* 🔴 FIXED SVG Canvas - White Glow */
.circular-chart-ai {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.4));
    overflow: visible !important; /* 🔴 JADOO: Ye us rectangle/cut ko khatam kar dega aur glow ko smoothly phelny dega */
}

/* 🔴 OUTER TRACK - (Image jesa contrast, but White Dashes) */
.circle-track-ai {
    display: none;
}

.circle-bg-ai {
    fill: none;
    stroke: rgba(0, 0, 0, 0.15); /* Dark depth for background ring */
    stroke-width: 5;
}

/* 🔴 PROGRESS BAR - Bright Glowing White */
.circle-progress-ai {
    fill: none;
    stroke: #ffffff;
    stroke-width: 8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-inner-core {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* 🔴 INNER ICON (Brain) - Pure White with Glow */
.ai-brain-svg {
    font-size: 60px;
    background: var(--card-bg, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    animation: brainPulse 1.5s infinite alternate;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* 🔴 PERCENT TEXT - Glowing White */
.ai-percent-text {
    margin-top: 25px;
    font-size: 55px;
    font-weight: 700;
    font-family: 'Orbitron', 'Inter', sans-serif;
    color: #ffffff;
    line-height: 1;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
}

@keyframes brainPulse {
    0% { transform: scale(0.95); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); }
    100% { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)); }
}


/* =========================================
   BOTTOM STEPS (White Rings, Dark Centers)
   ========================================= */
.ai-steps-flex {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    margin: 40px auto 20px;
    position: relative;
}

.ai-step-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    z-index: 2;
    transition: 0.4s;
}

/* 🔴 INACTIVE STATE - White Ring, Dark Center */
.ai-step-ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3px solid #ffffff; /* Solid White Border */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3a0010; /* Dark Center for Contrast on Red BG */
    margin-bottom: 12px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.ai-step-ring i {
    font-size: 16px;
    display: none;
}

.ai-step-text {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6); /* Dim white text for inactive */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    transition: 0.3s;
}

/* 🔴 CONNECTING LINES (Default Dark) */
.ai-step-line {
    flex-grow: 1;
    height: 4px;
    background: rgba(0, 0, 0, 0.4);
    margin-top: 21px;
    margin-left: -12px;
    margin-right: -12px;
    z-index: 1;
    border-radius: 2px;
    transition: all 0.6s ease-in-out;
}

/* ==========================
   ACTIVE STATE (GLOWING WHITE HALO)
   ========================== */
.ai-step-col.active { transform: translateY(-2px); }
.ai-step-col.active .ai-step-ring {
    background: #2a0008; /* Dark Center */
    border-color: #ffffff;
    /* Powerful Glowing Halo to pop against red background */
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.8), inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.ai-step-col.active .ai-step-ring i {
    display: block;
    color: #ffffff; /* White center spinner */
    animation: fa-spin 1.5s linear infinite;
}
.ai-step-col.active .ai-step-text {
    color: #ffffff; /* Bright white text */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.ai-step-line.active {
    background: var(--card-bg, #ffffff); /* Glowing white line to active step */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

/* ==========================
   COMPLETED STATE (WHITE RING, WHITE CHECK)
   ========================== */
.ai-step-col.completed .ai-step-ring {
    background: #2a0008; /* Dark Center */
    border-color: #ffffff; /* White Ring */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Remove glow, keep subtle drop shadow */
}
.ai-step-col.completed .ai-step-ring i {
    display: block;
    /* 🔴 CHANGED: Green to glowing White Checkmark for premium feel */
    color: #ffffff;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}
.ai-step-col.completed .ai-step-text {
    color: #ffffff; /* Solid White Text */
    text-shadow: none;
}

.ai-step-line.completed {
    background: rgba(0, 0, 0, 0.4); /* Image mein completed line dark hai structure safe */
    box-shadow: none;
}
/* Dot Rings - Match background color so line hides behind */
.dot-ring {
    width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1);
    background: #090e17; display: flex; align-items: center; justify-content: center;
    transition: 0.4s;
}
.dot-ring i { font-size: 16px; display: none; }

.ai-status-dot.active { transform: translateY(-3px); }
.ai-status-dot.active .dot-ring { border-color: #06b6d4; box-shadow: 0 0 20px rgba(6, 182, 212, 0.5), inset 0 0 10px rgba(6, 182, 212, 0.2); }
.ai-status-dot.active .dot-ring i.fa-circle-notch { display: block; color: #60a5fa; animation: fa-spin 1s linear infinite; }
.ai-status-dot.active .dot-label { color: #fff; text-shadow: 0 0 5px rgba(255, 255, 255, 0.7); }

.ai-status-dot.completed .dot-ring { border-color: #10b981; background: rgba(16, 185, 129, 0.05); box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
.ai-status-dot.completed .dot-ring i.fa-circle-notch { display: none !important; }
.ai-status-dot.completed .dot-ring i.fa-check { display: block; color: #10b981; }
.ai-status-dot.completed .dot-label { color: #10b981; }

.dot-label { position: absolute; top: 55px; font-size: 11.5px; font-weight: 700; color: var(--muted, #6c757d); white-space: nowrap; text-transform: uppercase; transition: 0.3s; }
.ai-input-wrapper {
    position: relative;
    width: 100%;
}

.ai-gen-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(203, 31, 73, 0.05);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.ai-gen-btn:hover {
    background: rgba(203, 31, 73, 0.12);
    border-color: rgba(203, 31, 73, 0.2);
    transform: translateY(-50%) scale(1.05);
}

/* Textarea ke liye icon upar set karein */
textarea + .ai-gen-btn {
    top: 25px;
}

.ai-icon-sparkle {
    color: var(--red, #CB1F49);
    font-size: 14px;
    transition: all 0.3s ease;
}

.ai-gen-btn:hover .ai-icon-sparkle {
    transform: scale(1.2) rotate(15deg);
    text-shadow: 0 0 8px rgba(203, 31, 73, 0.4);