/* Shop site builder — layout extensions (tokens + layout via company-builder.css) */

.shop-builder-wrap {
    background: var(--cb-bg);
    min-height: calc(100vh - 120px);
    padding: 1.5rem 0 3rem;
    margin-inline: calc(-1 * var(--bs-gutter-x, 0.75rem));
    width: calc(100% + var(--bs-gutter-x, 0.75rem) * 2);
    max-width: 100vw;
    font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
}

.shop-builder-main .content-section {
    padding-top: 0;
}

.shop-builder-main .step-content {
    display: none;
    animation: cbFadeIn 0.35s ease;
}

.shop-builder-main .step-content.active {
    display: block;
}

.shop-builder-main #mainFormContainer .rounded-xl.shadow-xl,
.shop-builder-main .bg-white.rounded-xl {
    background: var(--cb-surface) !important;
    border: 1px solid var(--cb-border) !important;
    border-radius: var(--cb-radius-card) !important;
    box-shadow: var(--cb-shadow) !important;
}

.shop-builder-wrap .btn-gradient,
.shop-builder-main .btn-primary:not(.btn-outline-primary):not(.btn-link) {
    background: var(--cb-primary) !important;
    border-color: var(--cb-primary) !important;
}

/* Plans — shop section */
.shop-plans-section .group.relative.bg-white {
    background: var(--cb-surface) !important;
    border: 1px solid var(--cb-border) !important;
    border-radius: var(--cb-radius-card) !important;
    box-shadow: var(--cb-shadow) !important;
    transform: none !important;
}

.shop-plans-section .group.relative.bg-white:hover {
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1) !important;
    transform: translateY(-4px) !important;
}

.shop-plans-section .group.relative.bg-white > .relative > .h-1 {
    background: linear-gradient(90deg, var(--cb-primary), #60a5fa) !important;
    height: 4px !important;
}

.shop-plans-section .group.relative.bg-white a[class*="bg-gradient-to-r"] {
    background: var(--cb-primary) !important;
    border-radius: var(--cb-radius-control) !important;
    font-size: 1rem !important;
    padding: 0.85rem 1.25rem !important;
}

.shop-plans-section .group.relative.bg-white a[class*="from-green"] {
    background: var(--cb-success) !important;
}

/* Shop launch success — hero styles live in wepido-company-ui.css (.shop-launch) */

.shop-launch section.bg-light {
    background: var(--cb-bg) !important;
}

.shop-launch .card {
    background: var(--cb-surface) !important;
    border: 1px solid var(--cb-border) !important;
    border-radius: var(--cb-radius-card) !important;
    box-shadow: var(--cb-shadow) !important;
}

.shop-flow-wrap {
    background: var(--cb-bg);
    min-height: 50vh;
    padding: 2rem 0;
}

/* ——— Wizard navigation (all steps) ——— */
.shop-builder-wrap .cb-wizard-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cb-border);
}

.shop-builder-wrap .prev-step,
.shop-builder-wrap .company-btn-prev.prev-step {
    background: transparent !important;
    color: var(--cb-primary) !important;
    border: 1px solid var(--cb-border) !important;
    padding: 0.65rem 1.5rem !important;
    border-radius: var(--cb-radius-control) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    box-shadow: none !important;
    transform: none !important;
}

.shop-builder-wrap .prev-step:hover,
.shop-builder-wrap .company-btn-prev.prev-step:hover {
    background: var(--cb-primary-subtle) !important;
    border-color: var(--cb-primary) !important;
    color: var(--cb-primary) !important;
}

.shop-builder-wrap .next-step,
.shop-builder-wrap .btn-next-step,
.shop-builder-wrap .btn-site-name,
.shop-builder-wrap .btn-domain,
.shop-builder-wrap .btnnext-images.next-step {
    background: var(--cb-primary) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.65rem 1.5rem !important;
    border-radius: var(--cb-radius-control) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
    transform: none !important;
}

.shop-builder-wrap .next-step:hover:not(.disabled):not(:disabled),
.shop-builder-wrap .btn-next-step:hover:not(.disabled):not(:disabled),
.shop-builder-wrap .btn-site-name:hover:not(.disabled):not(:disabled),
.shop-builder-wrap .btn-domain:hover:not(.disabled):not(:disabled) {
    background: var(--cb-primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.shop-builder-wrap .next-step.disabled,
.shop-builder-wrap .next-step:disabled,
.shop-builder-wrap .company-btn-next.next-step.disabled,
.shop-builder-wrap .btn-next-step.disabled,
.shop-builder-wrap .btn-site-name.disabled,
.shop-builder-wrap .btn-domain.disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    pointer-events: none;
}

.shop-builder-wrap .upload-button_logo,
.shop-builder-wrap .upload-button_favicon {
    background: var(--cb-primary) !important;
    border: none !important;
    border-radius: var(--cb-radius-control) !important;
    color: #fff !important;
}

/* ——— Step cards & forms ——— */
.shop-builder-main .domain-search-box,
.shop-builder-main .domain-area .card,
.shop-builder-main .step-content .card {
    background: var(--cb-surface) !important;
    border: 1px solid var(--cb-border) !important;
    border-radius: var(--cb-radius-card) !important;
    box-shadow: var(--cb-shadow) !important;
}

.shop-builder-main .domain-search-box h2,
.shop-builder-main .step-content h2.text-center:not(.text-white),
.shop-builder-main .step-content h2.bg-gradient-to-r,
.shop-builder-main .step-content h2.bg-clip-text,
.shop-builder-main .step-content .text-gradient,
.shop-builder-main .step-content h2.h2.text-gradient {
    color: var(--cb-text) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
}

.shop-builder-main .step-content button.bg-gradient-to-r,
.shop-builder-main .step-content .bg-gradient-to-r.from-blue-500.to-purple-600 {
    background: var(--cb-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--cb-radius-control) !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
}

.shop-builder-main .step-content button.bg-gradient-to-r:hover:not(:disabled) {
    background: var(--cb-primary-hover) !important;
}

.shop-builder-main .full-domain-display {
    background: var(--cb-primary-subtle) !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
    border-radius: var(--cb-radius-control) !important;
}

.shop-builder-main .full-domain-text {
    color: var(--cb-primary) !important;
}

.shop-builder-main .form-control,
.shop-builder-main .form-select,
.shop-builder-main .domain-input {
    border-radius: var(--cb-radius-control) !important;
    border-color: var(--cb-border) !important;
}

.shop-builder-main .form-control:focus,
.shop-builder-main .form-select:focus,
.shop-builder-main .domain-input:focus {
    border-color: var(--cb-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* ——— Final step (step 5) ——— */
.shop-builder-main #step-5 .shop-final-step-wrap {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.shop-builder-main #step-5 .shop-card-header,
.shop-builder-main #step-5 .card-header.bg-gradient-to-r {
    background: #1e293b !important;
    border: none !important;
    padding: 1rem 1.25rem !important;
}

.shop-builder-main #step-5 .shop-card-header h4,
.shop-builder-main #step-5 .shop-card-header h5,
.shop-builder-main #step-5 .card-header h4,
.shop-builder-main #step-5 .card-header h5 {
    color: #fff !important;
    margin: 0 !important;
}

.shop-builder-main #step-5 .shop-agreement-header {
    background: var(--cb-primary) !important;
    border-radius: var(--cb-radius-card) var(--cb-radius-card) 0 0 !important;
}

.shop-builder-main #step-5 .shop-terms-row {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-card);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.shop-builder-main #step-5 #agreeCheckbox {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--cb-primary);
    cursor: pointer;
}

.shop-builder-main #step-5 .shop-terms-row label {
    color: var(--cb-text) !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.shop-builder-main #step-5 #payOrderBtn,
.shop-builder-main #step-5 #createFreeSiteBtn,
.shop-builder-main #step-5 .shop-btn-build {
    background: var(--cb-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--cb-radius-control) !important;
    padding: 0.85rem 2rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    min-width: 220px;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
    transform: none !important;
}

.shop-builder-main #step-5 #payOrderBtn:hover,
.shop-builder-main #step-5 #createFreeSiteBtn:hover:not(:disabled) {
    background: var(--cb-primary-hover) !important;
    transform: translateY(-1px) !important;
}

.shop-builder-main #step-5 #plan_price.company-plan-price,
.shop-builder-main #step-5 #plan_price[data-monthly-price] {
    background: var(--cb-primary) !important;
    border-radius: 999px !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.9rem !important;
}

.shop-builder-main #step-5 .payorfree .card,
.shop-builder-main #step-5 .completeprofile .card {
    overflow: hidden;
}

.shop-builder-main #step-5 #affiliate {
    background: var(--cb-bg) !important;
    border: 1px solid var(--cb-border) !important;
    border-radius: var(--cb-radius-card) !important;
    box-shadow: var(--cb-shadow) !important;
}

.shop-builder-main #step-5 #affiliate button[onclick] {
    background: var(--cb-primary) !important;
    border: none !important;
    border-radius: var(--cb-radius-control) !important;
    transform: none !important;
}

.shop-builder-main #step-5 .peer:checked + label > div {
    border-color: var(--cb-primary) !important;
    background: var(--cb-primary-subtle) !important;
    animation: none !important;
}

.shop-builder-main #step-5 .text-center.pt-2 {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cb-border);
}

#logoInfoModal .btn-gradient {
    background: var(--cb-primary) !important;
    border: none !important;
    color: #fff !important;
}