/* ============================================
   MODERN ORDER FORM - UGC ITALIA
   Design System: Coerente con dashboard creator
   NOTA: Questo CSS ha priorità su brand-style.css
   ============================================ */

/* === VARIABLES === */
:root {
    --primary-purple: #8D3FF2;
    --purple-dark: #7C3AED;
    --purple-darker: #6D28D9;
    --purple-light: #A78BFA;
    --purple-lighter: #E9D5FF;
    --purple-bg: #F0E7FF;
    --text-dark: #1F2937;
    --text-gray: #6B7280;
    --text-light: #9CA3AF;
    --border-color: #E5E7EB;
    --success-green: #10B981;
    --warning-orange: #F59E0B;
    --error-red: #EF4444;
}

/* === RESET CONFLITTI BRAND-STYLE.CSS === */
.site_brand_dashboard_section .orderDetailsTabs .nav-tabs {
    border: none !important;
    background: white !important;
    border-radius: 16px !important;
    padding: 8px !important;
    box-shadow: 0 2px 8px rgba(141, 63, 242, 0.08) !important;
    gap: 8px !important;
    max-width: 100% !important;
}

.site_brand_dashboard_section .orderDetailsTabs .nav-link {
    pointer-events: auto !important;
    background: transparent !important;
    color: var(--text-gray) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    border: none !important;
    white-space: normal !important;
}

.site_brand_dashboard_section .orderDetailsTabs .nav-link.active {
    background: linear-gradient(135deg, var(--primary-purple), var(--purple-dark)) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(141, 63, 242, 0.3) !important;
    padding: 12px 24px !important;
    border: none !important;
}

.site_brand_dashboard_section .orderdetailsTabContent h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 24px !important;
    margin-left: 0 !important;
}

.site_brand_dashboard_section .orderdetailsTabContent h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 16px !important;
}

.site_brand_dashboard_section .orderdetailsTabContent h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
}

/* === HEADER BANNER === */
.order-form-banner {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--purple-dark) 50%, var(--purple-darker) 100%) !important;
    padding: 40px 0 !important;
    margin-bottom: 32px !important;
    margin-top: -20px !important;
    border-radius: 0 0 24px 24px !important;
    position: relative;
    overflow: hidden;
}

.order-form-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.order-form-banner h1 {
    color: white !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    position: relative;
    z-index: 1;
}

.order-form-banner p {
    color: rgba(255,255,255,0.9) !important;
    font-size: 15px !important;
    margin: 8px 0 0 0 !important;
    position: relative;
    z-index: 1;
}

/* === NAVIGATION TABS === */
.site_brand_dashboard_section .orderDetailsTabs {
    margin-bottom: 32px !important;
}

.site_brand_dashboard_section .orderDetailsTabs .nav-tabs {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.site_brand_dashboard_section .orderDetailsTabs .nav-link:hover {
    background: var(--purple-bg) !important;
    color: var(--purple-dark) !important;
    transform: translateY(-1px);
}

/* === SECTION HEADERS - Rimosso, già gestito nel reset === */

/* === VIDEO TYPE SWIPER === */
.site_brand_dashboard_section .orderVideoSwiper {
    margin-bottom: 32px !important;
}

.site_brand_dashboard_section .orderVideoSwiper h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 20px !important;
}

.orderVideoSlide {
    height: auto;
}

.orderVideoSlide .image-checkbox {
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    height: 100%;
    display: block;
}

.orderVideoSlide .image-checkbox:hover {
    border-color: var(--primary-purple);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(141, 63, 242, 0.15);
}

.orderVideoSlide .image-checkbox-checked {
    border-color: var(--primary-purple);
    background: linear-gradient(135deg, rgba(141, 63, 242, 0.05), rgba(124, 58, 237, 0.05));
    box-shadow: 0 4px 16px rgba(141, 63, 242, 0.2);
}

.orderVideoSlide h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.orderVideoSlide p {
    font-size: 14px;
    color: var(--text-gray);
    margin: 0;
}

.orderVideoSlide img {
    border-radius: 12px;
    object-fit: cover;
}

/* Swiper Navigation Buttons */
.orderVideoNextBtn,
.orderVideoPrevBtn {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.orderVideoNextBtn:hover,
.orderVideoPrevBtn:hover {
    background: var(--primary-purple);
    box-shadow: 0 6px 20px rgba(141, 63, 242, 0.3);
}

.orderVideoNextBtn:hover svg path,
.orderVideoPrevBtn:hover svg path {
    fill: white;
}

/* === CUSTOMIZE VIDEO SECTION === */
.site_brand_dashboard_section .videoCustomizeWrapper {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.site_brand_dashboard_section .customizeVideoBox h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 20px !important;
}

.platformRow {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--purple-bg);
    border-radius: 16px;
}

.platformRow > .row > .col-md-2 {
    display: flex;
    align-items: center;
}

.platformRow span {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
}

/* === VIDEO TYPE CARDS (Step 2) === */
.videoTypeCard {
    display: block !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.videoTypeCard:hover {
    border-color: #c4b5fd !important;
    box-shadow: 0 6px 20px rgba(141, 63, 242, 0.15) !important;
    transform: translateY(-4px) !important;
}

.videoTypeCard.image-checkbox-checked {
    border-color: #8D3FF2 !important;
    box-shadow: 0 8px 24px rgba(141, 63, 242, 0.25) !important;
}

.videoTypeCardContent {
    display: flex !important;
    flex-direction: column !important;
}

.videoTypeImageWrapper {
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #8D3FF2 0%, #7C3AED 50%, #6D28D9 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.videoTypeImageWrapper img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 12px !important;
}

.videoTypeTextWrapper {
    padding: 20px !important;
    text-align: center !important;
}

.videoTypeTextWrapper h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 !important;
}

/* === CUSTOM OPTION CARDS === */
.site_brand_dashboard_section .customOptionCard {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 20px !important;
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-width: 110px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.site_brand_dashboard_section .customOptionCard:hover {
    border-color: #c4b5fd !important;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 6px 16px rgba(141, 63, 242, 0.2), 0 2px 8px rgba(141, 63, 242, 0.1) !important;
}

.site_brand_dashboard_section .customOptionCard.selected {
    border-color: #8D3FF2 !important;
    background: linear-gradient(135deg, #8D3FF2 0%, #7C3AED 50%, #6D28D9 100%) !important;
    box-shadow: 0 6px 20px rgba(141, 63, 242, 0.4), 0 3px 10px rgba(141, 63, 242, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) scale(1.01) !important;
}

/* Error state for platformRow */
.site_brand_dashboard_section .platformRow.error .customOptionCard {
    border-color: #fca5a5 !important;
    animation: shake 0.3s ease-in-out !important;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.site_brand_dashboard_section .customOptionCard .optionContent {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.site_brand_dashboard_section .customOptionCard .optionLabel {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    transition: color 0.3s ease !important;
}

.site_brand_dashboard_section .customOptionCard.selected .optionLabel {
    color: white !important;
}

.site_brand_dashboard_section .customOptionCard .optionPrice {
    display: inline-block !important;
    padding: 4px 10px !important;
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
    color: #7C3AED !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.15) !important;
    transition: all 0.3s ease !important;
}

.site_brand_dashboard_section .customOptionCard.selected .optionPrice {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.site_brand_dashboard_section .customOptionCard:hover .optionPrice {
    transform: scale(1.05) !important;
}

.site_brand_dashboard_section .customOptionCard svg {
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

.site_brand_dashboard_section .customOptionCard.selected svg rect {
    stroke: white !important;
}

.site_brand_dashboard_section .customOptionCard .site_video_tooltip svg path {
    transition: fill 0.3s ease !important;
}

.site_brand_dashboard_section .customOptionCard.selected .site_video_tooltip svg path {
    fill: white !important;
}

/* === VIDEO CHECKBOXES === */
.site_brand_dashboard_section .videoCheckbox {
    position: relative !important;
    margin: 0 !important;
}

.site_brand_dashboard_section .videoCheckboxInput {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.site_brand_dashboard_section .videoCheckboxLabel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 24px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 1 !important;
    min-width: 110px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
}

.site_brand_dashboard_section .videoCheckboxLabel::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(141, 63, 242, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: -1 !important;
}

.site_brand_dashboard_section .videoCheckboxLabel:hover {
    border-color: #c4b5fd !important;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(141, 63, 242, 0.2), 0 2px 8px rgba(141, 63, 242, 0.1) !important;
}

.site_brand_dashboard_section .videoCheckboxLabel:hover::before {
    opacity: 1 !important;
}

.site_brand_dashboard_section .videoCheckboxInput:checked + .videoCheckboxLabel {
    border-color: #8D3FF2 !important;
    background: linear-gradient(135deg, #8D3FF2 0%, #7C3AED 50%, #6D28D9 100%) !important;
    color: white !important;
    box-shadow: 0 8px 24px rgba(141, 63, 242, 0.4), 0 4px 12px rgba(141, 63, 242, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.site_brand_dashboard_section .videoCheckboxInput:checked + .videoCheckboxLabel::before {
    opacity: 0 !important;
}

.site_brand_dashboard_section .videoCheckboxInput:checked + .videoCheckboxLabel .videopriceBix {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.site_brand_dashboard_section .videopriceBix {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
    color: #7C3AED !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-left: 6px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.15) !important;
}

.site_brand_dashboard_section .videoCheckboxLabel:hover .videopriceBix {
    transform: scale(1.05) !important;
}

/* === GREY BOX SECTIONS === */
.site_brand_dashboard_section .greyBox {
    background: #F9FAFB !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}

.site_brand_dashboard_section .whiteBox {
    background: white !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* === SERVICES SECTION === */
.site_brand_dashboard_section .site_additional_servcie_wrap h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 8px !important;
}

.site_brand_dashboard_section .site_additional_servcie_wrap > p {
    color: var(--text-gray) !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

.site_brand_dashboard_section .serviceRow {
    background: white !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 12px !important;
    border: 2px solid var(--border-color) !important;
    transition: all 0.3s ease !important;
}

.site_brand_dashboard_section .serviceRow:hover {
    border-color: var(--primary-purple) !important;
    box-shadow: 0 4px 16px rgba(141, 63, 242, 0.1) !important;
}

.site_brand_dashboard_section .serviceContent h4 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 8px !important;
}

.site_brand_dashboard_section .serviceContent p {
    font-size: 14px !important;
    color: var(--text-gray) !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
}

.site_brand_dashboard_section .serviceContent h4[data-service-price] {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--primary-purple) !important;
    margin-bottom: 12px !important;
}

.site_brand_dashboard_section .serviceContent h4[data-service-price] span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-gray) !important;
}

/* === BUTTONS === */
.darkBtn {
    background: linear-gradient(135deg, var(--primary-purple), var(--purple-dark));
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(141, 63, 242, 0.3);
}

.darkBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(141, 63, 242, 0.4);
    color: white;
    text-decoration: none;
}

.darkBtn:active {
    transform: translateY(0);
}

.darkBtn svg {
    width: 20px;
    height: 20px;
}

.serviceAddBtn {
    padding: 10px 24px;
    font-size: 14px;
}

.serviceAddBtn[data-selected="true"] {
    background: linear-gradient(135deg, var(--success-green), #059669);
}

/* === PACKAGES SECTION === */
.site_brand_dashboard_section .ourPriceWrapper h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
}

.site_brand_dashboard_section .ourPriceWrapper > p {
    font-size: 14px !important;
    color: var(--text-gray) !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
}

.pricingRow {
    display: flex;
    gap: 32px;
}

.budgetColumn {
    flex: 1;
}

.budgetHead p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.price-slider {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    margin: 24px 0;
}

.price-trail {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-purple), var(--purple-dark));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.ui-slider-handle {
    width: 24px;
    height: 24px;
    background: white;
    border: 3px solid var(--primary-purple);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(141, 63, 242, 0.3);
    transition: all 0.2s ease;
}

.ui-slider-handle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(141, 63, 242, 0.4);
}

.price-ranges {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.price-ranges .range {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-gray);
}

.agencyResultCardsWrapper {
    margin-top: 32px;
}

.resultCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.moneySavingsCard,
.packVideosCard,
.totalCreditsCard {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid var(--border-color);
}

.moneySavingsCard .text,
.packVideosCard .text,
.totalCreditsCard .text {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.moneySavingsCard .amount,
.packVideosCard .amount,
.totalCreditsCard .amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-purple);
}

.totalCreditsCard .additionalAmount {
    font-size: 13px;
    color: var(--text-gray);
    margin-top: 4px;
    display: block;
}

.calculatorColumn {
    flex: 1;
}

.calculatorResults {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.packType {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.pack-description {
    font-size: 14px;
    color: var(--text-gray);
    margin-bottom: 24px;
}

.upToSection {
    text-align: center;
    margin-bottom: 24px;
}

.upToSection .upTo {
    font-size: 14px;
    color: var(--text-gray);
    display: block;
    margin-bottom: 8px;
}

.upToSection .numbers {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-purple);
    display: block;
}

.topText {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.pricingWrapper {
    text-align: center;
    margin-bottom: 24px;
}

.pricing .price {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-dark);
    display: block;
    margin-bottom: 8px;
}

.pricing .totalCredits {
    font-size: 14px;
    color: var(--text-gray);
}

.pricing .totalCredits span {
    font-weight: 700;
    color: var(--primary-purple);
}

.orderButton {
    text-align: center;
}

.budget-button {
    width: 100%;
    padding: 16px 32px;
    font-size: 16px;
}

.budget-button[data-selected="false"] {
    background: linear-gradient(135deg, var(--primary-purple), var(--purple-dark));
}

.budget-button[data-selected="true"] {
    background: linear-gradient(135deg, var(--success-green), #059669);
}

/* === ORDER SUMMARY SIDEBAR === */
.site_brand_dashboard_section .orderSummaryInner {
    position: sticky !important;
    top: 100px !important;
    background: white !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(141, 63, 242, 0.12) !important;
    border: 2px solid var(--purple-lighter) !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.site_brand_dashboard_section .site_ordersummary_title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--border-color) !important;
}

#order-detail-box .d-flex {
    margin-bottom: 12px;
}

#order-detail-box svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

#order-detail-box span {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 500;
}

#order-detail-box hr {
    margin: 12px 0 !important;
}

.duration-span-label,
.aspect-ration-span-label {
    font-weight: 700;
    color: var(--primary-purple);
}

.site_additional_services_title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 16px;
    margin-bottom: 10px;
}

#additional-service-box {
    margin-top: 8px;
}

#additional-service-box .d-flex {
    margin-bottom: 10px;
}

.order_price,
.vat_price,
.total_price {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-purple);
}

.summaryOrderTotalWrapper {
    background: linear-gradient(135deg, var(--purple-bg), rgba(167, 139, 250, 0.1));
    border-radius: 14px;
    padding: 16px;
    margin-top: 20px;
}

.summaryOrderTotalWrapper h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.summaryOrderTotalWrapper .total_price {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-purple);
}

/* === HIDE THIRD STEP === */
.thirdStep {
    display: none !important;
}

/* === FORM INPUTS === */
.genericInputFiled {
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--text-dark);
    transition: all 0.3s ease;
    width: 100%;
}

.genericInputFiled:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 4px rgba(141, 63, 242, 0.1);
    outline: none;
}

.genericInputFiled::placeholder {
    color: var(--text-light);
}

.genericLable {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: block;
}

.form-select {
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.form-select:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 4px rgba(141, 63, 242, 0.1);
    outline: none;
}

/* === FILE UPLOAD === */
.custom-file-upload {
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--purple-bg);
    position: relative;
}

.custom-file-upload:hover {
    border-color: var(--primary-purple);
    background: rgba(141, 63, 242, 0.05);
}

.custom-file-upload h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 12px 0 4px 0;
}

.custom-file-upload span {
    font-size: 13px;
    color: var(--text-gray);
}

.custom-file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* === VIDEO SCENARIO === */
.videoScenarioBox h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.videoScenarioBox span {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-purple);
    display: block;
    margin-bottom: 8px;
}

.videoScenarioBox > .whiteBox > p {
    font-size: 14px;
    color: var(--text-gray);
    margin-bottom: 20px;
}

.videoScenarioRow {
    margin-bottom: 16px;
}

.ScenarioRow {
    margin-bottom: 12px;
}

.ScenarioRow .genericInputFiled {
    flex: 1;
}

.iconGroup {
    display: flex;
    gap: 8px;
}

.deleteBtn {
    background: transparent;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deleteBtn:hover {
    background: var(--error-red);
    border-color: var(--error-red);
}

.deleteBtn:hover svg path {
    stroke: white;
}

.addScenario {
    background: white;
    border: 2px solid var(--primary-purple);
    color: var(--primary-purple);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.addScenario:hover {
    background: var(--primary-purple);
    color: white;
    text-decoration: none;
}

.addScenario svg path {
    fill: var(--primary-purple);
}

.addScenario:hover svg path {
    fill: white;
}

/* === HOOK TAGS === */
.hookTagsRow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.productTag {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
}

.productTag:hover {
    border-color: var(--primary-purple);
    background: var(--purple-bg);
}

.productTag.active {
    background: linear-gradient(135deg, var(--primary-purple), var(--purple-dark));
    border-color: var(--primary-purple);
    color: white;
}

.productTag input {
    display: none;
}

/* === CREATOR CRITERIA === */
.videoCreatorCriteria .d-flex {
    gap: 16px;
    flex-wrap: wrap;
}

.videoCreatorCriteria .form-group {
    flex: 1;
    min-width: 200px;
}

.videoCreatorCriteria .form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-gray);
    margin-bottom: 6px;
    display: block;
}

/* === AGREE TERMS === */
.agreeTermsBox {
    background: var(--purple-bg);
    border-radius: 16px;
    padding: 20px;
    margin-top: 32px;
}

.agreeTermsBox .form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.agreeTermsBox .form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}

.agreeTermsBox .form-check-input:checked {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
}

.agreeTermsBox .form-check-label {
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.5;
    cursor: pointer;
}

/* === NEXT STEP BOX === */
.nextStepBox {
    background: white;
    border-top: 2px solid var(--border-color);
    padding: 24px 0;
    margin-top: 40px;
    position: sticky;
    bottom: 0;
    z-index: 100;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
}

.totalAmount {
    text-align: right;
    margin-right: 20px;
}

.totalAmount h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.totalAmount h4 .video_count,
.totalAmount h4 .to_multiply {
    font-weight: 700;
    color: var(--primary-purple);
}

.nextStepBtn button {
    padding: 16px 32px;
    font-size: 16px;
}

.backStepBtn a {
    background: white;
    border: 2px solid var(--border-color);
    color: var(--text-dark);
    box-shadow: none;
}

.backStepBtn a:hover {
    background: var(--border-color);
    border-color: var(--border-color);
    color: var(--text-dark);
}

/* === ERROR STATES === */
.errorBox.has-error .genericInputFiled,
.errorBox.has-error .form-select {
    border-color: var(--error-red);
}

.errorBox.has-error .image-checkbox {
    border-color: var(--error-red);
}

.error-message-container {
    color: var(--error-red);
    font-size: 13px;
    margin-top: 8px;
}

/* === PAYMENT TAB === */
.paymentMethodBox {
    background: white;
    border-radius: 16px;
    padding: 28px;
}

.stripe-card-wrap {
    margin-top: 24px;
}

#card-element {
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

#card-element.StripeElement--focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 4px rgba(141, 63, 242, 0.1);
}

#card-errors {
    color: var(--error-red);
    font-size: 13px;
    margin-top: 8px;
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
    .pricingRow {
        flex-direction: column;
    }
    
    .resultCards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .order-form-banner h1 {
        font-size: 26px !important;
    }
    
    .site_brand_dashboard_section .orderdetailsTabContent h2 {
        font-size: 22px !important;
    }
    
    .site_brand_dashboard_section .videoCustomizeWrapper {
        padding: 20px 16px !important;
    }
    
    .site_brand_dashboard_section .orderSummaryInner {
        position: static !important;
        margin-top: 32px !important;
        max-height: none !important;
    }
}

@media (max-width: 768px) {
    .order-form-banner {
        padding: 28px 0 !important;
        margin-top: -10px !important;
    }
    
    .order-form-banner h1 {
        font-size: 22px !important;
    }
    
    .order-form-banner p {
        font-size: 14px !important;
    }
    
    .site_brand_dashboard_section .orderDetailsTabs .nav-link {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }
    
    .site_brand_dashboard_section .platformRow {
        padding: 14px !important;
    }
    
    .site_brand_dashboard_section .platformRow > .row {
        flex-direction: column;
    }
    
    .site_brand_dashboard_section .videoCheckboxLabel {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
    
    .site_brand_dashboard_section .greyBox {
        padding: 16px !important;
    }
    
    .site_brand_dashboard_section .whiteBox {
        padding: 18px !important;
    }
    
    .site_brand_dashboard_section .videoCreatorCriteria .form-group {
        min-width: 100%;
    }
    
    .site_brand_dashboard_section .nextStepBox {
        padding: 16px 0 !important;
    }
    
    .site_brand_dashboard_section .totalAmount {
        margin-right: 0;
        margin-bottom: 16px;
        text-align: left;
    }
}

@media (max-width: 576px) {
    .orderVideoNextBtn,
    .orderVideoPrevBtn {
        width: 40px;
        height: 40px;
    }
    
    .site_brand_dashboard_section .darkBtn {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
    
    .site_brand_dashboard_section .hookTagsRow {
        gap: 6px;
    }
    
    .site_brand_dashboard_section .productTag {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
    
    .site_brand_dashboard_section .orderdetailsTabContent h2 {
        font-size: 20px !important;
    }
    
    .site_brand_dashboard_section .orderdetailsTabContent h3 {
        font-size: 18px !important;
    }
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-pane.active {
    animation: fadeIn 0.4s ease;
}

/* === LOADING STATES === */
.package_loader_wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.darkBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* === TOOLTIPS === */
.site_video_tooltip {
    cursor: help;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
}

.tooltiip {
    position: relative;
    cursor: help;
}

.tooltiip span {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-dark);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    transition: all 0.3s ease;
    z-index: 1000;
}

.tooltiip:hover span {
    visibility: visible;
    opacity: 1;
}

/* === SECOND TAB (Order/Package Toggle) === */
.orderDetailsTabsSecond {
    margin-bottom: 24px;
}

.nav-tabs-second {
    display: flex;
    gap: 8px;
    background: white;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.nav-link-second {
    flex: 1;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: var(--text-gray);
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.nav-link-second:hover {
    background: var(--purple-bg);
    color: var(--purple-dark);
}

.nav-link-second[data-active="true"] {
    background: linear-gradient(135deg, var(--primary-purple), var(--purple-dark));
    color: white;
    box-shadow: 0 2px 8px rgba(141, 63, 242, 0.3);
}

/* === IMPROVED LAYOUT === */
.site_brand_dashboard_section .firstStepWraper {
    margin-top: 0 !important;
}

.site_brand_dashboard_section {
    padding-bottom: 60px !important;
}

/* === CONTAINER IMPROVEMENTS === */
.site_brand_dashboard_section .container {
    max-width: 1400px !important;
}

/* === ROW SPACING === */
.site_brand_dashboard_section .row {
    margin-left: -12px !important;
    margin-right: -12px !important;
}

.site_brand_dashboard_section .row > [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* === VIDEO PREVIEW === */
.site_ads_video {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.site_video_thumb_link {
    border-radius: 16px;
    overflow: hidden;
}

.site_video_thumb {
    border-radius: 16px;
    object-fit: cover;
}

/* === MODERN CUSTOMIZATION SECTION === */
.site_brand_dashboard_section .customizeVideoBox {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
    border-radius: 20px !important;
    padding: 28px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f3f4f6 !important;
    margin-top: 24px !important;
}

.site_brand_dashboard_section .customizeVideoBox > h4 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;
    border-bottom: 3px solid transparent !important;
    background: linear-gradient(to right, #8D3FF2 0%, #7C3AED 50%, transparent 50%) !important;
    background-size: 200% 3px !important;
    background-position: 0 100% !important;
    background-repeat: no-repeat !important;
    letter-spacing: -0.02em !important;
}

.site_brand_dashboard_section .platformRow {
    margin-bottom: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.site_brand_dashboard_section .platformRow:last-child {
    margin-bottom: 0 !important;
}

.site_brand_dashboard_section .platformRow > .row {
    align-items: flex-start !important;
    gap: 16px !important;
}

.site_brand_dashboard_section .platformRow > .row > .col-md-2 {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
}

.site_brand_dashboard_section .platformRow span {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    display: block !important;
    letter-spacing: -0.01em !important;
    position: relative !important;
    padding-left: 12px !important;
}

.site_brand_dashboard_section .platformRow span::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 20px !important;
    background: linear-gradient(135deg, #8D3FF2 0%, #7C3AED 100%) !important;
    border-radius: 2px !important;
}

.site_brand_dashboard_section .platformRow .col-md-10 {
    padding: 0 !important;
}

.site_brand_dashboard_section .platformRow .d-flex {
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 4px !important;
}

/* === SERVICE IMAGE === */
.serviceImage {
    border-radius: 12px;
    overflow: hidden;
}

.serviceImage img {
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.serviceRow:hover .serviceImage img {
    transform: scale(1.05);
}

/* === PACKAGE DETAIL BOX === */
#package-detail-box {
    background: var(--purple-bg);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

/* === PAYMENT METHOD === */
.paymentMethodBox h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.stripe-card-wrap label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: block;
}

/* === BALANCE DISPLAY === */
.balance-display {
    background: linear-gradient(135deg, var(--success-green), #059669);
    color: white;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* === IMPROVED SPACING === */
.videoCustomizeWrapper .row {
    margin-bottom: 0;
}

.platformRow:last-child {
    margin-bottom: 0;
}

/* === BETTER FORM GROUPS === */
.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* === SLIDE BOX IMPROVEMENTS === */
.slideLeftBox {
    padding-right: 20px;
}

.slideRightBox {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === PHYSICAL MESSAGE - MODERN DESIGN === */
.site_brand_dashboard_section .physical_message {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
    border: 2px solid #F59E0B !important;
    border-left: 6px solid #F59E0B !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    margin: 20px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
}

.site_brand_dashboard_section .physical_message::before {
    content: '⚠️' !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

.site_brand_dashboard_section .physical_message::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20px !important;
    width: 100px !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.site_brand_dashboard_section .physical_message p,
.site_brand_dashboard_section .physical_message span,
.site_brand_dashboard_section .physical_message {
    color: #92400E !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.site_brand_dashboard_section .physical_message strong {
    color: #78350F !important;
    font-weight: 700 !important;
}

.site_brand_dashboard_section .physical_message a {
    color: #92400E !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

.site_brand_dashboard_section .physical_message a:hover {
    color: #78350F !important;
}

/* Variante info (blu) */
.site_brand_dashboard_section .physical_message.info {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%) !important;
    border-color: #3B82F6 !important;
    border-left-color: #3B82F6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

.site_brand_dashboard_section .physical_message.info::before {
    content: 'ℹ️' !important;
}

.site_brand_dashboard_section .physical_message.info p,
.site_brand_dashboard_section .physical_message.info span,
.site_brand_dashboard_section .physical_message.info {
    color: #1E40AF !important;
}

.site_brand_dashboard_section .physical_message.info strong {
    color: #1E3A8A !important;
}

/* Variante success (verde) */
.site_brand_dashboard_section .physical_message.success {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%) !important;
    border-color: #10B981 !important;
    border-left-color: #10B981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}

.site_brand_dashboard_section .physical_message.success::before {
    content: '✅' !important;
}

.site_brand_dashboard_section .physical_message.success p,
.site_brand_dashboard_section .physical_message.success span,
.site_brand_dashboard_section .physical_message.success {
    color: #065F46 !important;
}

.site_brand_dashboard_section .physical_message.success strong {
    color: #064E3B !important;
}

/* Variante error (rosso) */
.site_brand_dashboard_section .physical_message.error {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%) !important;
    border-color: #EF4444 !important;
    border-left-color: #EF4444 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

.site_brand_dashboard_section .physical_message.error::before {
    content: '❌' !important;
}

.site_brand_dashboard_section .physical_message.error p,
.site_brand_dashboard_section .physical_message.error span,
.site_brand_dashboard_section .physical_message.error {
    color: #991B1B !important;
}

.site_brand_dashboard_section .physical_message.error strong {
    color: #7F1D1D !important;
}

/* === SERVIZI AGGIUNTIVI - GRID LAYOUT === */
.site_brand_dashboard_section .servicesGrid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-top: 16px !important;
}

.site_brand_dashboard_section .serviceCard {
    background: white !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    height: 100% !important;
}

.site_brand_dashboard_section .serviceCard:hover {
    border-color: var(--primary-purple) !important;
    box-shadow: 0 8px 24px rgba(141, 63, 242, 0.15) !important;
    transform: translateY(-4px) !important;
}

.site_brand_dashboard_section .serviceCardImage {
    width: 100% !important;
    height: 140px !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.site_brand_dashboard_section .serviceCardImage img,
.site_brand_dashboard_section .serviceCardImage iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    transition: transform 0.4s ease !important;
}

.site_brand_dashboard_section .serviceCard:hover .serviceCardImage img {
    transform: scale(1.05) !important;
}

.site_brand_dashboard_section .additionalServicesWrapper .serviceCardContent {
    padding: 14px !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: flex-start !important;
}

.site_brand_dashboard_section .additionalServicesWrapper .serviceCardTitle {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
    line-height: 1.3 !important;
}

.site_brand_dashboard_section .additionalServicesWrapper .serviceCardDescription {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    flex-grow: 0 !important;
}

.site_brand_dashboard_section .additionalServicesWrapper .serviceCardFooter {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--border-color) !important;
}

.site_brand_dashboard_section .serviceCardPrice {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--primary-purple) !important;
    margin: 0 !important;
    text-align: center !important;
}

.site_brand_dashboard_section .serviceCardPrice span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    display: block !important;
    margin-top: 2px !important;
}

.site_brand_dashboard_section .serviceCardFooter .darkBtn {
    padding: 10px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    font-weight: 600 !important;
    width: 100% !important;
    text-align: center !important;
}

/* Responsive Layout */
@media (max-width: 1400px) {
    .site_brand_dashboard_section .servicesGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .site_brand_dashboard_section .servicesGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .site_brand_dashboard_section .serviceCardImage {
        height: 180px !important;
    }
    
    .site_brand_dashboard_section .serviceCardContent {
        padding: 18px !important;
    }
    
    .site_brand_dashboard_section .serviceCardTitle {
        font-size: 17px !important;
        margin-bottom: 6px !important;
    }
    
    .site_brand_dashboard_section .serviceCardDescription {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    
    .site_brand_dashboard_section .serviceCardPrice {
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    .site_brand_dashboard_section .servicesGrid {
        grid-template-columns: 1fr !important;
    }
    
    .site_brand_dashboard_section .serviceCardImage {
        height: 200px !important;
    }
    
    .site_brand_dashboard_section .serviceCardTitle {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    .site_brand_dashboard_section .serviceCardDescription {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    .site_brand_dashboard_section .serviceCardPrice {
        font-size: 20px !important;
    }
}

/* === BETTER CHECKBOX ALIGNMENT === */
.videoCheckbox .errorBox {
    margin: 0;
}

/* === IMPROVED ALERTS === */
.alert {
    border-radius: 12px;
    border: none;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
    color: var(--success-green);
    border-left: 4px solid var(--success-green);
}

.alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
    color: var(--error-red);
    border-left: 4px solid var(--error-red);
}

.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1));
    color: var(--warning-orange);
    border-left: 4px solid var(--warning-orange);
}

/* === CREATE ORDER BUTTON === */
#create-order-button,
.create-order-button {
    width: 100%;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-purple), var(--purple-dark));
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(141, 63, 242, 0.3);
}

#create-order-button:hover,
.create-order-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(141, 63, 242, 0.4);
}

#create-order-button:disabled,
.create-order-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* === VIDEO SCENARIO ERROR === */
.videoScenarioErrorContainer,
#videoScenarioError {
    color: var(--error-red);
    font-size: 13px;
    margin-top: 8px;
    font-weight: 500;
}

/* === IMPROVED GRID LAYOUTS === */
@media (min-width: 992px) {
    .videoCustomizeWrapper .col-xl-3 {
        padding-right: 24px;
    }
    
    .videoCustomizeWrapper .col-xl-9 {
        padding-left: 24px;
    }
}

/* === SMOOTH TRANSITIONS === */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === FOCUS VISIBLE === */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-purple);
    outline-offset: 2px;
}

/* === PRINT STYLES === */
@media print {
    .order-form-banner,
    .orderDetailsTabs,
    .nextStepBox,
    .backStepBtn {
        display: none;
    }
}

/* === ADDITIONAL FIXES === */
.site_brand_dashboard_section .orderVideoSlide .image-checkbox {
    border: 2px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background: white !important;
    height: 100% !important;
    display: block !important;
}

.site_brand_dashboard_section .orderVideoSlide .image-checkbox:hover {
    border-color: var(--primary-purple) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(141, 63, 242, 0.15) !important;
}

.site_brand_dashboard_section .orderVideoSlide .image-checkbox-checked {
    border-color: var(--primary-purple) !important;
    background: linear-gradient(135deg, rgba(141, 63, 242, 0.05), rgba(124, 58, 237, 0.05)) !important;
    box-shadow: 0 4px 16px rgba(141, 63, 242, 0.2) !important;
}

.site_brand_dashboard_section .orderVideoSlide h4 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 8px !important;
}

.site_brand_dashboard_section .orderVideoSlide p {
    font-size: 13px !important;
    color: var(--text-gray) !important;
    margin: 0 !important;
}

/* === NEXT STEP BOX IMPROVEMENTS === */
.site_brand_dashboard_section .nextStepBox {
    background: white !important;
    border-top: 2px solid var(--border-color) !important;
    padding: 20px 0 !important;
    margin-top: 40px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.05) !important;
}

.site_brand_dashboard_section .totalAmount h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 4px !important;
}

.site_brand_dashboard_section .totalAmount h4 .video_count,
.site_brand_dashboard_section .totalAmount h4 .to_multiply {
    font-weight: 700 !important;
    color: var(--primary-purple) !important;
}

/* === FORM INPUTS IMPROVEMENTS === */
.site_brand_dashboard_section .genericInputFiled {
    border: 2px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: var(--text-dark) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.site_brand_dashboard_section .genericInputFiled:focus {
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 4px rgba(141, 63, 242, 0.1) !important;
    outline: none !important;
}

.site_brand_dashboard_section .genericLable {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.site_brand_dashboard_section .form-select {
    border: 2px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: var(--text-dark) !important;
    transition: all 0.3s ease !important;
}

.site_brand_dashboard_section .form-select:focus {
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 4px rgba(141, 63, 242, 0.1) !important;
    outline: none !important;
}

/* === VIDEO SCENARIO IMPROVEMENTS === */
.site_brand_dashboard_section .videoScenarioBox h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 14px !important;
}

.site_brand_dashboard_section .videoScenarioBox span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--primary-purple) !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.site_brand_dashboard_section .videoScenarioBox > .whiteBox > p {
    font-size: 13px !important;
    color: var(--text-gray) !important;
    margin-bottom: 16px !important;
}

.site_brand_dashboard_section .addScenario {
    background: white !important;
    border: 2px solid var(--primary-purple) !important;
    color: var(--primary-purple) !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.site_brand_dashboard_section .addScenario:hover {
    background: var(--primary-purple) !important;
    color: white !important;
    text-decoration: none !important;
}

/* === HOOK TAGS IMPROVEMENTS === */
.site_brand_dashboard_section .hookTagsRow {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.site_brand_dashboard_section .productTag {
    background: white !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.site_brand_dashboard_section .productTag:hover {
    border-color: var(--primary-purple) !important;
    background: var(--purple-bg) !important;
}

.site_brand_dashboard_section .productTag.active {
    background: linear-gradient(135deg, var(--primary-purple), var(--purple-dark)) !important;
    border-color: var(--primary-purple) !important;
    color: white !important;
}

/* === AGREE TERMS IMPROVEMENTS === */
.site_brand_dashboard_section .agreeTermsBox {
    background: var(--purple-bg) !important;
    border-radius: 12px !important;
    padding: 18px !important;
    margin-top: 24px !important;
}

.site_brand_dashboard_section .agreeTermsBox .form-check-label {
    font-size: 13px !important;
    color: var(--text-dark) !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}

/* === CREATOR CRITERIA IMPROVEMENTS === */
.site_brand_dashboard_section .videoCreatorCriteria h4 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-bottom: 16px !important;
}

.site_brand_dashboard_section .videoCreatorCriteria .d-flex {
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.site_brand_dashboard_section .videoCreatorCriteria .form-group {
    flex: 1 !important;
    min-width: 180px !important;
    margin-bottom: 0 !important;
}

.site_brand_dashboard_section .videoCreatorCriteria .form-group label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-gray) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* === SWIPER BUTTONS IMPROVEMENTS === */
.site_brand_dashboard_section .orderVideoNextBtn,
.site_brand_dashboard_section .orderVideoPrevBtn {
    width: 44px !important;
    height: 44px !important;
    background: white !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.site_brand_dashboard_section .orderVideoNextBtn:hover,
.site_brand_dashboard_section .orderVideoPrevBtn:hover {
    background: var(--primary-purple) !important;
    box-shadow: 0 6px 20px rgba(141, 63, 242, 0.3) !important;
}

/* === SUMMARY ORDER TOTAL === */
.site_brand_dashboard_section .summaryOrderTotalWrapper {
    background: linear-gradient(135deg, var(--purple-bg), rgba(167, 139, 250, 0.1)) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-top: 20px !important;
}

.site_brand_dashboard_section .summaryOrderTotalWrapper h5 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-bottom: 10px !important;
}

.site_brand_dashboard_section .summaryOrderTotalWrapper .total_price {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--primary-purple) !important;
}

/* === SLIDE BOX IMPROVEMENTS === */
.site_brand_dashboard_section .slideLeftBox {
    padding-right: 16px !important;
}

.site_brand_dashboard_section .slideLeftBox h4 {
    font-size: 17px !important;
    margin-bottom: 6px !important;
}

.site_brand_dashboard_section .slideLeftBox p {
    font-size: 13px !important;
    line-height: 1.4 !important;
}