/* ========================================
   AntDesign Override CSS
   This file MUST load after ant-design-blazor.css
   Using custom .solixync-menu class for maximum specificity
   ======================================== */

/* ========================================
   Sidebar Navigation - Override AntDesign Blue
   Using custom class + AntDesign selectors for MAXIMUM specificity
   ======================================== */

/* HIGHEST SPECIFICITY: Custom class + doubled AntDesign class + element */
ul.solixync-menu.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) li.ant-menu-item-selected,
ul.solixync-menu.ant-menu.ant-menu-dark .ant-menu-item-selected,
.solixync-menu.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected,
.solixync-menu.ant-menu.ant-menu-dark .ant-menu-item-selected {
    background-color: rgba(230, 122, 46, 0.15) !important;
    color: #e67a2e !important;
}

/* Override selected item text color */
.solixync-menu.ant-menu-dark .ant-menu-item-selected,
ul.solixync-menu.ant-menu-dark li.ant-menu-item-selected {
    color: #e67a2e !important;
    border-right: 0;
}

/* Override link colors inside selected item */
.solixync-menu.ant-menu-dark .ant-menu-item-selected > a,
.solixync-menu.ant-menu-dark .ant-menu-item-selected > span > a,
.solixync-menu.ant-menu-dark .ant-menu-item-selected > a:hover,
.solixync-menu.ant-menu-dark .ant-menu-item-selected > span > a:hover,
ul.solixync-menu.ant-menu-dark li.ant-menu-item-selected a {
    color: #e67a2e !important;
}

/* Override icon colors inside selected item */
.solixync-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon,
.solixync-menu.ant-menu-dark .ant-menu-item-selected .anticon,
ul.solixync-menu.ant-menu-dark li.ant-menu-item-selected .anticon {
    color: #e67a2e !important;
}

/* Override icon + span colors */
.solixync-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon + span,
.solixync-menu.ant-menu-dark .ant-menu-item-selected .anticon + span,
ul.solixync-menu.ant-menu-dark li.ant-menu-item-selected span {
    color: #e67a2e !important;
}

/* Override menu title content */
.solixync-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content,
.solixync-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content a,
.solixync-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content span {
    color: #e67a2e !important;
}

/* Override SVG fill */
.solixync-menu.ant-menu-dark .ant-menu-item-selected svg,
ul.solixync-menu.ant-menu-dark li.ant-menu-item-selected svg {
    fill: #e67a2e !important;
}

/* Quad class specificity for extra safety */
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item.ant-menu-item-selected,
ul.solixync-menu.ant-menu.ant-menu-root.ant-menu-dark li.ant-menu-item.ant-menu-item-selected {
    background-color: rgba(230, 122, 46, 0.15) !important;
    color: #e67a2e !important;
}

ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item.ant-menu-item-selected .anticon,
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item.ant-menu-item-selected a,
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item.ant-menu-item-selected span {
    color: #e67a2e !important;
}

/* ========================================
   Menu Item Styling - Border Radius, Height, Indicator
   ======================================== */

/* Menu container - constrain overflow */
.solixync-menu.ant-menu,
ul.solixync-menu.ant-menu {
    overflow: hidden !important;
    padding: 0 8px !important;
}

/* All menu items - rounded corners and proper sizing */
.solixync-menu.ant-menu-dark .ant-menu-item,
ul.solixync-menu.ant-menu.ant-menu-dark .ant-menu-item,
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item {
    border-radius: 8px !important;
    height: 44px !important;
    line-height: 44px !important;
    margin: 4px 0 !important;
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    transition: all 150ms ease !important;
}

/* Selected item - orange indicator bar on left */
.solixync-menu.ant-menu-dark .ant-menu-item-selected::before,
ul.solixync-menu.ant-menu.ant-menu-dark .ant-menu-item-selected::before,
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item-selected::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 20px !important;
    background: #e67a2e !important;
    border-radius: 0 2px 2px 0 !important;
}

/* Hide the default right border indicator */
.solixync-menu.ant-menu-dark .ant-menu-item-selected::after,
ul.solixync-menu.ant-menu.ant-menu-dark .ant-menu-item-selected::after {
    display: none !important;
    border-right: none !important;
}

/* ========================================
   Sidebar & Menu - Full Glassy Dark Theme
   ======================================== */

/* Sidebar container - matches main app dark theme with subtle orange tint */
.main-sider.ant-layout-sider,
.main-sider.ant-layout-sider-dark,
aside.main-sider.ant-layout-sider,
aside.main-sider.ant-layout-sider-dark,
.ant-layout-sider.main-sider,
.ant-layout-sider-dark.main-sider {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(230, 122, 46, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #0d0f14 0%, #141821 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Sider children container */
.main-sider .ant-layout-sider-children,
aside.main-sider .ant-layout-sider-children {
    background: transparent !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Override AntDesign's default dark sider background - MAXIMUM SPECIFICITY */
.ant-layout-sider.ant-layout-sider-dark.main-sider,
aside.ant-layout-sider.ant-layout-sider-dark.main-sider,
aside.main-sider.ant-layout-sider.ant-layout-sider-dark,
aside.main-sider.ant-layout-sider.ant-layout-sider-dark.ant-layout-sider-has-trigger,
.ant-layout-has-sider aside.main-sider,
section.ant-layout aside.main-sider {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(230, 122, 46, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #0d0f14 0%, #141821 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Menu container - transparent to show sider background */
.solixync-menu.ant-menu-dark,
.solixync-menu.ant-menu.ant-menu-dark,
.solixync-menu.ant-menu-dark.ant-menu-inline,
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline {
    background: transparent !important;
    flex: 1;
}

/* ========================================
   NON-SELECTED Menu Items - Override AntDesign Blue
   Using high specificity with solixync-menu class
   ======================================== */

/* Non-selected items - base styling (exclude selected) */
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected),
ul.solixync-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected),
.solixync-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) {
    color: rgba(255, 255, 255, 0.65) !important;
    background: transparent !important;
    margin: 4px 8px !important;
    border-radius: 8px !important;
    transition: all 150ms ease !important;
}

/* Non-selected items - icons */
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) .anticon,
ul.solixync-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected) .anticon,
.solixync-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .anticon {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Non-selected items - links and text */
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) a,
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) span,
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content,
ul.solixync-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected) a,
ul.solixync-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected) span,
.solixync-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) a,
.solixync-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) span,
.solixync-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Non-selected items - HOVER state (glassy) */
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover,
ul.solixync-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected):hover,
.solixync-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover .anticon,
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover a,
ul.solixync-menu.ant-menu.ant-menu-dark.ant-menu-inline li.ant-menu-item:not(.ant-menu-item-selected):hover span,
ul.solixync-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected):hover .anticon,
ul.solixync-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected):hover a,
ul.solixync-menu.ant-menu-dark li.ant-menu-item:not(.ant-menu-item-selected):hover span,
.solixync-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover .anticon,
.solixync-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover a,
.solixync-menu.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover span {
    color: #ffffff !important;
}

/* Sider trigger (collapse button) - blends with sidebar gradient */
.main-sider .ant-layout-sider-trigger,
aside.main-sider .ant-layout-sider-trigger,
.ant-layout-sider-trigger {
    background: rgba(20, 24, 33, 0.8) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    transition: all 150ms ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.main-sider .ant-layout-sider-trigger:hover,
aside.main-sider .ant-layout-sider-trigger:hover,
.ant-layout-sider-trigger:hover {
    background: rgba(230, 122, 46, 0.15) !important;
    color: #e67a2e !important;
}

/* Remove the default blue right border */
.main-sider .ant-menu-item-selected::after,
.ant-menu-dark .ant-menu-item-selected::after,
.ant-menu.ant-menu-dark .ant-menu-item-selected::after {
    border-right-color: transparent !important;
    display: none !important;
}

/* Hover state */
.main-sider .ant-menu-dark .ant-menu-item:hover,
.ant-menu-dark .ant-menu-item:hover:not(.ant-menu-item-selected) {
    color: var(--text-primary) !important;
}

.main-sider .ant-menu-dark .ant-menu-item:hover .anticon,
.ant-menu-dark .ant-menu-item:hover:not(.ant-menu-item-selected) .anticon {
    color: var(--text-primary) !important;
}

/* Non-selected items - default styling */
.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content,
.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content a,
.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) a,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-title-content a,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.main-sider .ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .anticon,
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected) .anticon {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========================================
   Dropdown Overrides
   ======================================== */

.ant-select-dropdown {
    background: #141821 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0.25rem !important;
}

.ant-select-item {
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px !important;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: rgba(230, 122, 46, 0.15) !important;
    color: #e67a2e !important;
    font-weight: 500;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
    color: #e67a2e !important;
}

/* ========================================
   Message/Notification Overrides
   ======================================== */

.ant-message-notice-content {
    background: #141821 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.ant-message-success .anticon {
    color: #52c41a !important;
}

.ant-message-error .anticon {
    color: #ff4d4f !important;
}

.ant-message-info .anticon {
    color: #e67a2e !important;
}

.ant-message-notice-content .ant-message-custom-content span:last-child {
    color: #ffffff !important;
}

/* ========================================
   Table Overrides - Dark Theme
   ======================================== */

.ant-table {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-table-container,
.ant-table-content,
.ant-table table {
    background: transparent !important;
}

.ant-table-thead > tr > th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-table-tbody > tr > td {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-table-tbody > tr {
    background: transparent !important;
}

.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr:hover > td {
    background: rgba(255, 255, 255, 0.08) !important;
}

.ant-table-cell-fix-left,
.ant-table-cell-fix-right {
    background: #141821 !important;
}

/* ========================================
   Card Overrides - Dark Theme
   ======================================== */

.ant-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.ant-card-body {
    background: transparent !important;
}

.ant-card-head {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.ant-card-head-title {
    color: #ffffff !important;
}

/* ========================================
   Empty State Overrides
   ======================================== */

.ant-empty-description {
    color: rgba(255, 255, 255, 0.45) !important;
}

.ant-empty-image svg {
    fill: rgba(255, 255, 255, 0.25) !important;
}

/* ========================================
   Spin/Loading Overrides
   ======================================== */

.ant-spin-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-spin-dot-item {
    background-color: #e67a2e !important;
}

/* ========================================
   Alert Overrides - Glassy Dark Theme
   ======================================== */

.ant-alert {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
}

.ant-alert-message {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ant-alert-description {
    color: rgba(255, 255, 255, 0.65) !important;
}

.ant-alert-info {
    background: rgba(230, 122, 46, 0.08) !important;
    border-color: rgba(230, 122, 46, 0.15) !important;
}

.ant-alert-info .ant-alert-icon {
    color: #e67a2e !important;
}

.ant-alert-info .ant-alert-message {
    color: rgba(255, 255, 255, 0.8) !important;
}

.ant-alert-success {
    background: rgba(82, 196, 26, 0.08) !important;
    border-color: rgba(82, 196, 26, 0.15) !important;
}

.ant-alert-success .ant-alert-icon {
    color: #52c41a !important;
}

.ant-alert-warning {
    background: rgba(250, 173, 20, 0.08) !important;
    border-color: rgba(250, 173, 20, 0.15) !important;
}

.ant-alert-warning .ant-alert-icon {
    color: #faad14 !important;
}

.ant-alert-error {
    background: rgba(255, 77, 79, 0.08) !important;
    border-color: rgba(255, 77, 79, 0.15) !important;
}

.ant-alert-error .ant-alert-icon {
    color: #ff4d4f !important;
}

.ant-alert-error .ant-alert-message {
    color: #ff7875 !important;
}

/* ========================================
   Tag Overrides - Glassy Dark Theme
   ======================================== */

.ant-tag {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.ant-tag-green {
    background: rgba(82, 196, 26, 0.15) !important;
    border-color: rgba(82, 196, 26, 0.25) !important;
    color: #95de64 !important;
}

.ant-tag-blue {
    background: rgba(24, 144, 255, 0.15) !important;
    border-color: rgba(24, 144, 255, 0.25) !important;
    color: #69c0ff !important;
}

.ant-tag-orange {
    background: rgba(250, 173, 20, 0.15) !important;
    border-color: rgba(250, 173, 20, 0.25) !important;
    color: #ffc53d !important;
}

.ant-tag-red {
    background: rgba(255, 77, 79, 0.15) !important;
    border-color: rgba(255, 77, 79, 0.25) !important;
    color: #ff7875 !important;
}

.ant-tag-cyan {
    background: rgba(19, 194, 194, 0.15) !important;
    border-color: rgba(19, 194, 194, 0.25) !important;
    color: #36cfc9 !important;
}

.ant-tag-purple {
    background: rgba(114, 46, 209, 0.15) !important;
    border-color: rgba(114, 46, 209, 0.25) !important;
    color: #b37feb !important;
}

.ant-tag-magenta,
.ant-tag-pink {
    background: rgba(235, 47, 150, 0.15) !important;
    border-color: rgba(235, 47, 150, 0.25) !important;
    color: #f759ab !important;
}

.ant-tag-gold {
    background: rgba(250, 173, 20, 0.15) !important;
    border-color: rgba(250, 173, 20, 0.25) !important;
    color: #ffc53d !important;
}

.ant-tag-lime {
    background: rgba(160, 217, 17, 0.15) !important;
    border-color: rgba(160, 217, 17, 0.25) !important;
    color: #bae637 !important;
}

.ant-tag-volcano {
    background: rgba(250, 84, 28, 0.15) !important;
    border-color: rgba(250, 84, 28, 0.25) !important;
    color: #ff7a45 !important;
}

.ant-tag-geekblue {
    background: rgba(47, 84, 235, 0.15) !important;
    border-color: rgba(47, 84, 235, 0.25) !important;
    color: #597ef7 !important;
}

/* ========================================
   Steps Overrides - Dark Theme with Orange Active
   ======================================== */

/* Steps container */
.ant-steps {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Step titles */
.ant-steps-item-title {
    color: rgba(255, 255, 255, 0.65) !important;
}

.ant-steps-item-description {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Waiting steps - dark glass circles */
.ant-steps-item-wait .ant-steps-item-icon {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.ant-steps-item-wait .ant-steps-item-icon .ant-steps-icon {
    color: rgba(255, 255, 255, 0.45) !important;
}

.ant-steps-item-wait .ant-steps-item-title {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Active/Process step - orange gradient */
.ant-steps-item-process .ant-steps-item-icon {
    background: linear-gradient(135deg, #e67a2e 0%, #f5a623 100%) !important;
    border-color: #e67a2e !important;
}

.ant-steps-item-process .ant-steps-item-icon .ant-steps-icon {
    color: #ffffff !important;
}

.ant-steps-item-process .ant-steps-item-title {
    color: #ffffff !important;
}

.ant-steps-item-process .ant-steps-item-description {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Finished steps - orange with checkmark */
.ant-steps-item-finish .ant-steps-item-icon {
    background: rgba(230, 122, 46, 0.15) !important;
    border-color: #e67a2e !important;
}

.ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon {
    color: #e67a2e !important;
}

.ant-steps-item-finish .ant-steps-item-title {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Tail/connector lines between steps */
.ant-steps-item-tail::after {
    background: rgba(255, 255, 255, 0.15) !important;
}

.ant-steps-item-finish .ant-steps-item-tail::after {
    background: #e67a2e !important;
}

/* Title connector line (the visible one between steps) */
.ant-steps-item-finish .ant-steps-item-title::after {
    background-color: #e67a2e !important;
}

/* ========================================
   Primary Button Overrides - Orange Theme
   ======================================== */

/* Primary button - orange gradient */
.ant-btn-primary,
button.ant-btn-primary,
.ant-btn.ant-btn-primary {
    background: linear-gradient(135deg, #e67a2e 0%, #f5a623 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
    color: #ffffff !important;
    transition: all 150ms ease !important;
}

.ant-btn-primary:hover,
.ant-btn-primary:focus,
button.ant-btn-primary:hover,
button.ant-btn-primary:focus,
.ant-btn.ant-btn-primary:hover,
.ant-btn.ant-btn-primary:focus {
    background: linear-gradient(135deg, #f5a623 0%, #e67a2e 100%) !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.ant-btn-primary:active,
button.ant-btn-primary:active,
.ant-btn.ant-btn-primary:active {
    background: linear-gradient(135deg, #d06a1e 0%, #e67a2e 100%) !important;
    box-shadow: 0 2px 8px rgba(230, 122, 46, 0.35) !important;
    transform: translateY(0);
}

/* Disabled primary button */
.ant-btn-primary[disabled],
.ant-btn-primary.ant-btn-disabled,
button.ant-btn-primary[disabled],
button.ant-btn-primary.ant-btn-disabled {
    background: rgba(230, 122, 46, 0.3) !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Loading state */
.ant-btn-primary.ant-btn-loading,
button.ant-btn-primary.ant-btn-loading {
    opacity: 0.8;
}

/* Dropdown trigger button styling */
.ant-btn-primary .anticon,
button.ant-btn-primary .anticon {
    color: #ffffff !important;
}

/* ========================================
   Dropdown Menu Overrides - Dark Theme
   ======================================== */

.ant-dropdown-menu {
    background: #141821 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 4px !important;
}

.ant-dropdown-menu-item {
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: all 150ms ease !important;
}

.ant-dropdown-menu-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.ant-dropdown-menu-item .anticon {
    color: rgba(255, 255, 255, 0.65) !important;
}

.ant-dropdown-menu-item:hover .anticon {
    color: #ffffff !important;
}

.ant-dropdown-menu-item-divider {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   ImageCard Overrides - Dark Theme
   ======================================== */

/* Image filename - white text */
.image-card .filename {
    color: #ffffff !important;
}

/* More platforms badge (+2) - dark theme */
.image-card .more-platforms {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Download button - dark glass with orange hover */
.image-card .download-btn,
.image-card .download-btn.ant-btn {
    background: rgba(20, 24, 33, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.image-card .download-btn:hover,
.image-card .download-btn.ant-btn:hover {
    background: rgba(230, 122, 46, 0.2) !important;
    border-color: rgba(230, 122, 46, 0.4) !important;
    color: #e67a2e !important;
}

.image-card .download-btn .anticon,
.image-card .download-btn.ant-btn .anticon {
    color: inherit !important;
}

/* Image thumbnail background - dark */
.image-card .image-thumbnail {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Image placeholder icon - muted */
.image-card .image-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Compliance icon background - dark */
.image-card .compliance-icon {
    background: #141821 !important;
}

/* ========================================
   Subscription Tag Overrides
   ======================================== */

/* Unlimited tier - orange gradient with glow */
.subscription-tag.tier-unlimited,
.ant-tag.subscription-tag.tier-unlimited {
    background: linear-gradient(135deg, rgba(230, 122, 46, 0.25) 0%, rgba(245, 166, 35, 0.25) 100%) !important;
    border: 1px solid rgba(230, 122, 46, 0.4) !important;
    color: #f5a623 !important;
    box-shadow: 0 0 12px rgba(230, 122, 46, 0.2);
}

/* ========================================
   Dashboard Plan Value Styling
   ======================================== */

/* Free plan - default muted styling */
.stat-value.plan-free {
    color: var(--text-muted) !important;
}

/* Starter plan - blue */
.stat-value.plan-starter {
    color: #60a5fa !important;
}

/* Professional plan - purple */
.stat-value.plan-professional {
    color: #a78bfa !important;
}

/* Enterprise plan - orange */
.stat-value.plan-enterprise {
    background: linear-gradient(135deg, #e67a2e 0%, #f5a623 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Unlimited plan - orange gradient with glow effect */
.stat-value.plan-unlimited {
    background: linear-gradient(135deg, #e67a2e 0%, #f5a623 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(230, 122, 46, 0.4);
}

/* ========================================
   Upgrade Page Button Overrides
   ======================================== */

/* Plan card body - flex layout to push button to bottom */
.plan-card .ant-card-body,
.plan-card.ant-card .ant-card-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* All plan card buttons - pill shape, pushed to bottom */
.plan-card .ant-btn,
.plan-card.ant-card .ant-btn {
    height: 48px !important;
    font-weight: 600 !important;
    border-radius: 24px !important;
    font-size: 0.9375rem !important;
    transition: all 200ms ease !important;
    margin-top: auto !important;
}

/* Default button (Free plan) */
.plan-card .ant-btn-default,
.plan-card.ant-card .ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.plan-card .ant-btn-default:hover:not(:disabled),
.plan-card.ant-card .ant-btn-default:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Disabled "Current Plan" button - green indicator style */
.plan-card .ant-btn-default[disabled],
.plan-card .ant-btn-default.ant-btn-disabled,
.plan-card.ant-card .ant-btn-default[disabled],
.plan-card.ant-card .ant-btn-default.ant-btn-disabled {
    background: rgba(82, 196, 26, 0.1) !important;
    border: 1px solid rgba(82, 196, 26, 0.25) !important;
    color: #52c41a !important;
    opacity: 1 !important;
    cursor: default !important;
}

/* Primary button (Subscribe) */
.plan-card .ant-btn-primary,
.plan-card.ant-card .ant-btn-primary {
    background: linear-gradient(135deg, #e67a2e 0%, #f5a623 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
}

.plan-card .ant-btn-primary:hover:not(:disabled),
.plan-card.ant-card .ant-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
}

/* ========================================
   Billing Toggle - Save Badge
   ======================================== */

/* Save percentage badge - make it stand out */
.billing-toggle .ant-tag {
    background: linear-gradient(135deg, #e67a2e 0%, #f5a623 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(230, 122, 46, 0.4) !important;
    animation: pulse-glow 2s ease-in-out infinite !important;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(230, 122, 46, 0.4);
    }
    50% {
        box-shadow: 0 2px 16px rgba(230, 122, 46, 0.6), 0 0 20px rgba(230, 122, 46, 0.3);
    }
}

/* ========================================
   Checkbox Overrides - Orange Theme
   ======================================== */

/* Checkbox inner box - dark glass background */
.ant-checkbox .ant-checkbox-inner,
.ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    border-radius: 4px !important;
}

/* Checkbox hover state */
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-wrapper:hover .ant-checkbox .ant-checkbox-inner {
    border-color: #e67a2e !important;
}

/* Checkbox checked state - orange */
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-wrapper .ant-checkbox-checked .ant-checkbox-inner {
    background: #e67a2e !important;
    border-color: #e67a2e !important;
}

/* Checkbox checked hover - lighter orange */
.ant-checkbox-checked:hover .ant-checkbox-inner,
.ant-checkbox-wrapper:hover .ant-checkbox-checked .ant-checkbox-inner {
    background: #f0944d !important;
    border-color: #f0944d !important;
}

/* Checkbox indeterminate state - orange */
.ant-checkbox-indeterminate .ant-checkbox-inner::after,
.ant-checkbox-wrapper .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background-color: #e67a2e !important;
}

/* Checkbox focus ring - orange glow */
.ant-checkbox-input:focus + .ant-checkbox-inner,
.ant-checkbox-wrapper .ant-checkbox-input:focus + .ant-checkbox-inner {
    border-color: #e67a2e !important;
    box-shadow: 0 0 0 2px rgba(230, 122, 46, 0.2) !important;
}

/* Checkbox label text color */
.ant-checkbox-wrapper {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Checkbox wrapper hover */
.ant-checkbox-wrapper:hover {
    color: #ffffff !important;
}

/* ========================================
   Radio Button Overrides - Orange Theme
   ======================================== */

/* Radio inner circle - dark glass background */
.ant-radio .ant-radio-inner,
.ant-radio-wrapper .ant-radio .ant-radio-inner {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Radio hover state */
.ant-radio:hover .ant-radio-inner,
.ant-radio-wrapper:hover .ant-radio .ant-radio-inner {
    border-color: #e67a2e !important;
}

/* Radio checked state - orange */
.ant-radio-checked .ant-radio-inner,
.ant-radio-wrapper .ant-radio-checked .ant-radio-inner {
    background: #e67a2e !important;
    border-color: #e67a2e !important;
}

/* Radio checked inner dot */
.ant-radio-checked .ant-radio-inner::after,
.ant-radio-wrapper .ant-radio-checked .ant-radio-inner::after {
    background-color: #ffffff !important;
}

/* Radio checked hover - lighter orange */
.ant-radio-checked:hover .ant-radio-inner,
.ant-radio-wrapper:hover .ant-radio-checked .ant-radio-inner {
    background: #f0944d !important;
    border-color: #f0944d !important;
}

/* Radio focus ring - orange glow */
.ant-radio-input:focus + .ant-radio-inner,
.ant-radio-wrapper .ant-radio-input:focus + .ant-radio-inner {
    border-color: #e67a2e !important;
    box-shadow: 0 0 0 2px rgba(230, 122, 46, 0.2) !important;
}

/* Radio label text color */
.ant-radio-wrapper {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Radio wrapper hover */
.ant-radio-wrapper:hover {
    color: #ffffff !important;
}

/* ========================================
   Adjustment Grid Item - Dark Theme
   ======================================== */

.adjustment-grid-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.adjustment-grid-item:hover {
    border-color: #e67a2e !important;
    box-shadow: 0 2px 8px rgba(230, 122, 46, 0.15) !important;
}

.adjustment-grid-item.selected {
    border-color: #e67a2e !important;
    box-shadow: 0 0 0 3px rgba(230, 122, 46, 0.2) !important;
}

.adjustment-grid-item .item-preview {
    background: rgba(255, 255, 255, 0.08) !important;
}

.adjustment-grid-item .adjustment-badge {
    background: #e67a2e !important;
}

.adjustment-grid-item .item-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.adjustment-grid-item .item-name {
    color: #ffffff !important;
}

.adjustment-grid-item .item-size {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* ===============================================
   Slider Overrides - Orange Theme
   =============================================== */

.ant-slider-rail {
    background: rgba(255, 255, 255, 0.1) !important;
}

.ant-slider-track {
    background: #e67a2e !important;
}

.ant-slider-handle {
    background: #e67a2e !important;
    border-color: #e67a2e !important;
}

.ant-slider-handle:hover,
.ant-slider-handle:focus,
.ant-slider-handle-dragging {
    box-shadow: 0 0 0 4px rgba(230, 122, 46, 0.2) !important;
    border-color: #e67a2e !important;
}

.ant-slider:hover .ant-slider-track {
    background: #f08838 !important;
}

.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
    border-color: #f08838 !important;
}

/* ===============================================
   Modal/Drawer Overrides - Dark Theme
   =============================================== */

.ant-modal-mask {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
}

.ant-modal-content {
    background: rgba(30, 32, 38, 0.95) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    padding: 0 !important;
    overflow: hidden;
}

.ant-modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 20px 24px !important;
}

.ant-modal-title {
    color: #ffffff !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
}

.ant-modal-close {
    color: rgba(255, 255, 255, 0.45) !important;
    top: 16px !important;
    right: 16px !important;
}

.ant-modal-close:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px;
}

.ant-modal-body {
    padding: 24px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-modal-body p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 16px 0;
    line-height: 1.6;
}

.ant-modal-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 24px !important;
}

.ant-modal-footer .ant-btn {
    height: 40px !important;
    border-radius: 8px !important;
    font-weight: 500;
}

.ant-modal-footer .ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ant-modal-footer .ant-btn-default:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.ant-modal-footer .ant-btn-primary {
    background: linear-gradient(135deg, #e67a2e 0%, #f5a623 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
}

.ant-modal-footer .ant-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
}

.ant-modal-footer .ant-btn-dangerous {
    background: rgba(255, 77, 79, 0.15) !important;
    border: 1px solid rgba(255, 77, 79, 0.25) !important;
    color: #ff7875 !important;
}

.ant-modal-footer .ant-btn-dangerous:hover {
    background: rgba(255, 77, 79, 0.25) !important;
    border-color: rgba(255, 77, 79, 0.4) !important;
}

.ant-drawer-mask {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
}

.ant-drawer-content {
    background: rgba(30, 32, 38, 0.95) !important;
    backdrop-filter: blur(24px);
}

.ant-drawer-header {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.ant-drawer-title {
    color: #ffffff !important;
}

.ant-drawer-close {
    color: rgba(255, 255, 255, 0.65) !important;
}

.ant-drawer-close:hover {
    color: #ffffff !important;
}

.ant-drawer-body {
    background: transparent !important;
}

/* ===============================================
   Image Adjustment Editor - Dark Theme
   =============================================== */

.image-adjustment-editor {
    background: rgba(30, 32, 38, 0.95) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.image-adjustment-editor .editor-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.image-adjustment-editor .editor-title {
    color: #ffffff !important;
}

.image-adjustment-editor .editor-header .ant-btn-text {
    color: rgba(255, 255, 255, 0.65) !important;
}

.image-adjustment-editor .editor-header .ant-btn-text:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Platform tabs */
.image-adjustment-editor .platform-tabs .ant-tabs-nav::before {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-tab {
    color: rgba(255, 255, 255, 0.65) !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-tab:hover {
    color: #e67a2e !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #e67a2e !important;
}

.image-adjustment-editor .platform-tabs .ant-tabs-ink-bar {
    background: #e67a2e !important;
}

/* Preview container */
.image-adjustment-editor .preview-container {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

.image-adjustment-editor .preview-wrapper {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Controls panel */
.image-adjustment-editor .controls-panel {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

.image-adjustment-editor .controls-panel .ant-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Slider labels */
.image-adjustment-editor .slider-label,
.image-adjustment-editor .control-label {
    color: #ffffff !important;
}

.image-adjustment-editor .slider-value {
    color: #e67a2e !important;
}

/* Offset controls */
.image-adjustment-editor .offset-label {
    color: rgba(255, 255, 255, 0.45) !important;
}

.image-adjustment-editor .offset-header .ant-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.image-adjustment-editor .offset-header .ant-btn:hover {
    border-color: #e67a2e !important;
    color: #e67a2e !important;
}

/* InputNumber styling */
.image-adjustment-editor .ant-input-number {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.image-adjustment-editor .ant-input-number:hover,
.image-adjustment-editor .ant-input-number:focus,
.image-adjustment-editor .ant-input-number-focused {
    border-color: #e67a2e !important;
    box-shadow: 0 0 0 2px rgba(230, 122, 46, 0.2) !important;
}

.image-adjustment-editor .ant-input-number-input {
    color: #ffffff !important;
}

.image-adjustment-editor .ant-input-number-handler-wrap {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.image-adjustment-editor .ant-input-number-handler {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.image-adjustment-editor .ant-input-number-handler:hover {
    background: rgba(230, 122, 46, 0.15) !important;
}

.image-adjustment-editor .ant-input-number-handler-up-inner,
.image-adjustment-editor .ant-input-number-handler-down-inner {
    color: rgba(255, 255, 255, 0.65) !important;
}

.image-adjustment-editor .ant-input-number-handler:hover .ant-input-number-handler-up-inner,
.image-adjustment-editor .ant-input-number-handler:hover .ant-input-number-handler-down-inner {
    color: #e67a2e !important;
}

/* Control hint */
.image-adjustment-editor .control-hint {
    color: rgba(255, 255, 255, 0.65) !important;
    background-color: rgba(230, 122, 46, 0.1) !important;
    border: 1px solid rgba(230, 122, 46, 0.2) !important;
    border-radius: 8px !important;
}

.image-adjustment-editor .control-hint .anticon {
    color: #e67a2e !important;
}

/* Quick buttons */
.image-adjustment-editor .quick-buttons .ant-btn,
.image-adjustment-editor .scale-presets .ant-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.image-adjustment-editor .quick-buttons .ant-btn:hover,
.image-adjustment-editor .scale-presets .ant-btn:hover {
    border-color: #e67a2e !important;
    color: #e67a2e !important;
}

/* Toolbar */
.image-adjustment-editor .adjustment-toolbar {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0 0 16px 16px !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-default:hover:not(:disabled) {
    border-color: #e67a2e !important;
    color: #e67a2e !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-default:disabled {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.25) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-primary {
    background: linear-gradient(135deg, #e67a2e 0%, #f5a623 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
}

.image-adjustment-editor .adjustment-toolbar .ant-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
}

/* Platform overlay - Orange crop guide */
.platform-overlay .margin-guide {
    border-color: rgba(230, 122, 46, 0.6) !important;
}

/* Platform label tag - Orange theme */
.platform-overlay .platform-label .ant-tag,
.platform-overlay .platform-label .ant-tag-blue {
    background: rgba(230, 122, 46, 0.15) !important;
    color: #f5a623 !important;
    border-color: rgba(230, 122, 46, 0.25) !important;
}

/* ===============================================
   Progress Bar Overrides - Orange Theme
   =============================================== */

.ant-progress-bg {
    background: linear-gradient(90deg, #e67a2e 0%, #f5a623 100%) !important;
}

.ant-progress-inner {
    background: rgba(255, 255, 255, 0.1) !important;
}

.ant-progress-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ant-progress-success-bg {
    background: #e67a2e !important;
}

/* Progress circle (if used) */
.ant-progress-circle-path {
    stroke: #e67a2e !important;
}

.ant-progress-circle-trail {
    stroke: rgba(255, 255, 255, 0.1) !important;
}

/* ===============================================
   Result Component Overrides - Orange Theme
   =============================================== */

/* Success icon - Orange instead of green */
.ant-result-success .ant-result-icon > .anticon {
    color: #e67a2e !important;
}

.ant-result-success .ant-result-icon svg {
    fill: #e67a2e !important;
}

/* Result text colors for dark theme */
.ant-result-title {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ant-result-subtitle {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Warning icon (for partial success) */
.ant-result-warning .ant-result-icon > .anticon {
    color: #faad14 !important;
}

/* ===============================================
   BatchProgress Component - Dark Theme
   =============================================== */

.batch-progress {
    padding: 24px;
}

.batch-progress .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.batch-progress .progress-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff !important;
    margin: 0 0 4px 0;
}

.batch-progress .progress-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0;
}

.batch-progress .progress-stats {
    display: flex;
    gap: 12px;
    font-size: 14px;
}

.batch-progress .stat-completed {
    color: #e67a2e !important;
}

.batch-progress .stat-failed {
    color: #ff7875 !important;
}

.batch-progress .stat-total {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Connection status badges - dark theme */
.batch-progress .connection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.batch-progress .connection-status.connected {
    background-color: rgba(230, 122, 46, 0.15) !important;
    color: #f5a623 !important;
    border: 1px solid rgba(230, 122, 46, 0.25);
}

.batch-progress .connection-status.connecting {
    background-color: rgba(250, 173, 20, 0.15) !important;
    color: #ffc53d !important;
    border: 1px solid rgba(250, 173, 20, 0.25);
}

.batch-progress .connection-status.disconnected {
    background-color: rgba(255, 77, 79, 0.15) !important;
    color: #ff7875 !important;
    border: 1px solid rgba(255, 77, 79, 0.25);
}

/* Image grid - dark theme */
.batch-progress .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.batch-progress .image-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.batch-progress .image-preview {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.batch-progress .image-item.pending .image-preview {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.batch-progress .image-item.processing .image-preview {
    border-color: #e67a2e !important;
}

.batch-progress .image-item.completed .image-preview {
    border-color: #e67a2e !important;
}

.batch-progress .image-item.failed .image-preview {
    border-color: #ff7875 !important;
}

.batch-progress .image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.batch-progress .image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 24px;
}

/* Status overlay - dark glass */
.batch-progress .status-overlay {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(20, 24, 33, 0.9) !important;
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.batch-progress .status-icon {
    font-size: 18px;
}

.batch-progress .status-icon.pending {
    color: rgba(255, 255, 255, 0.45) !important;
}

.batch-progress .status-icon.completed {
    color: #e67a2e !important;
}

.batch-progress .status-icon.failed {
    color: #ff7875 !important;
}

/* Step text */
.batch-progress .image-info {
    text-align: center;
}

.batch-progress .step-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65) !important;
}

.batch-progress .step-text.success {
    color: #e67a2e !important;
    font-weight: 500;
}

.batch-progress .step-text.error {
    color: #ff7875 !important;
    font-weight: 500;
}

/* Processing step - ensure full width */
.step-processing > * {
    width: 100%;
}

/* Result component in processing step - full width */
.step-processing .ant-result {
    width: 100%;
    max-width: 100%;
    padding: 48px 24px;
}

/* ===============================================
   Subscription Page - Dark Glassmorphism Theme
   =============================================== */

.subscription-page,
div.subscription-page,
.ant-layout-content .subscription-page {
    min-height: calc(100vh - 64px);
    padding: var(--space-xl);
    background: transparent !important;
    background-color: transparent !important;
}

/* Direct card overrides with high specificity */
.subscription-page .ant-card,
.subscription-page .ant-card.subscription-card,
.subscription-page .ant-card.usage-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.subscription-page .ant-card .ant-card-body,
.subscription-page .ant-card-body {
    background: transparent !important;
}

.subscription-page .ant-card .ant-card-head {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.subscription-page .page-container {
    max-width: 800px;
    margin: 0 auto;
}

.subscription-page .page-header {
    margin-bottom: var(--space-xl);
    animation: slideUp 0.5s ease-out;
}

.subscription-page .page-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.02em;
}

.subscription-page .page-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.subscription-page .loading-container {
    display: flex;
    justify-content: center;
    padding: var(--space-2xl);
}

.subscription-page .subscription-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    animation: slideUp 0.6s ease-out 0.1s both;
}

@media (max-width: 768px) {
    .subscription-page .subscription-content {
        grid-template-columns: 1fr;
    }
}

/* Glass Card Styling */
.subscription-page .subscription-card.ant-card,
.subscription-page .usage-card.ant-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    transition: all var(--transition-base);
    height: 100%;
}

.subscription-page .subscription-card.ant-card:hover,
.subscription-page .usage-card.ant-card:hover {
    border-color: var(--glass-border-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.subscription-page .subscription-card .ant-card-body,
.subscription-page .usage-card .ant-card-body {
    padding: var(--space-xl) !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.subscription-page .usage-card .ant-card-head {
    background: transparent !important;
    border-bottom: 1px solid var(--glass-border) !important;
    padding: var(--space-md) var(--space-xl) !important;
}

.subscription-page .usage-card .ant-card-head-title {
    color: var(--text-primary) !important;
    font-family: var(--font-display);
    font-weight: 600;
}

/* Subscription Header */
.subscription-page .subscription-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.subscription-page .plan-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.subscription-page .plan-name {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-transform: capitalize;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tags */
.subscription-page .subscription-header .ant-tag {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-weight: 500;
}

.subscription-page .subscription-header .ant-tag-blue {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    color: #60a5fa !important;
}

.subscription-page .subscription-header .ant-tag-green {
    background: rgba(82, 196, 26, 0.15) !important;
    border-color: rgba(82, 196, 26, 0.25) !important;
    color: #52c41a !important;
}

.subscription-page .subscription-header .ant-tag-orange {
    background: rgba(230, 122, 46, 0.15) !important;
    border-color: rgba(230, 122, 46, 0.25) !important;
    color: #f5a623 !important;
}

.subscription-page .subscription-header .ant-tag-red {
    background: rgba(255, 77, 79, 0.15) !important;
    border-color: rgba(255, 77, 79, 0.25) !important;
    color: #ff7875 !important;
}

/* Subscription Details */
.subscription-page .subscription-details {
    margin-bottom: var(--space-lg);
}

.subscription-page .renewal-info {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9375rem;
}

.subscription-page .renewal-info strong {
    color: var(--text-primary);
}

/* Divider */
.subscription-page .ant-divider {
    border-color: var(--glass-border) !important;
    margin: var(--space-lg) 0 !important;
}

/* Action Buttons */
.subscription-page .subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: auto;
}

.subscription-page .subscription-actions .ant-btn {
    height: 40px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all var(--transition-fast) !important;
}

.subscription-page .subscription-actions .ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
}

.subscription-page .subscription-actions .ant-btn-default:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

.subscription-page .subscription-actions .ant-btn-dangerous {
    background: rgba(255, 77, 79, 0.1) !important;
    border: 1px solid rgba(255, 77, 79, 0.25) !important;
    color: #ff7875 !important;
}

.subscription-page .subscription-actions .ant-btn-dangerous:hover:not(:disabled) {
    background: rgba(255, 77, 79, 0.2) !important;
    border-color: rgba(255, 77, 79, 0.4) !important;
}

/* Usage Card Content */
.subscription-page .usage-info {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.subscription-page .usage-stat {
    margin-bottom: var(--space-lg);
}

.subscription-page .usage-label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
}

.subscription-page .usage-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.subscription-page .usage-remaining {
    color: var(--text-muted);
    margin-top: var(--space-md);
    font-size: 0.875rem;
}

.subscription-page .unlimited-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.125rem;
    font-weight: 600;
    color: #f5a623;
    background: linear-gradient(135deg, rgba(230, 122, 46, 0.15) 0%, rgba(245, 166, 35, 0.15) 100%);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(230, 122, 46, 0.3);
}

.subscription-page .unlimited-badge .anticon {
    color: #e67a2e;
}

/* Alerts */
.subscription-page .subscription-details .ant-alert {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-md) !important;
}

.subscription-page .subscription-details .ant-alert-warning {
    background: rgba(250, 173, 20, 0.1) !important;
    border-color: rgba(250, 173, 20, 0.25) !important;
}

.subscription-page .subscription-details .ant-alert-warning .ant-alert-message {
    color: #ffc53d !important;
}

.subscription-page .subscription-details .ant-alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

.subscription-page .subscription-details .ant-alert-info .ant-alert-message {
    color: #60a5fa !important;
}

/* ===============================================
   Checkout Success Page - Dark Glassmorphism Theme
   =============================================== */

.checkout-success-page,
div.checkout-success-page,
.ant-layout-content .checkout-success-page,
.checkout-result-page {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: transparent !important;
    background-color: transparent !important;
    position: relative;
    overflow: hidden;
}

/* Override any Result component container */
.checkout-success-page .result-container,
.checkout-result-page .result-container,
.checkout-success-page .success-container {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    padding: 48px !important;
    max-width: 500px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Background orbs */
.checkout-success-page .bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.5;
    pointer-events: none;
}

.checkout-success-page .bg-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(230, 122, 46, 0.3) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    animation: float-slow 25s ease-in-out infinite;
}

.checkout-success-page .bg-orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(82, 196, 26, 0.2) 0%, transparent 70%);
    bottom: -50px;
    left: -50px;
    animation: float-slow 20s ease-in-out infinite reverse;
}

.checkout-success-page .bg-orb-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(230, 122, 46, 0.25) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: success-pulse-glow 4s ease-in-out infinite;
}

@keyframes float-slow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(30px, -30px) scale(1.05);
    }
    50% {
        transform: translate(-20px, 20px) scale(0.95);
    }
    75% {
        transform: translate(-30px, -20px) scale(1.02);
    }
}

@keyframes success-pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Success container */
.checkout-success-page .success-container {
    max-width: 500px;
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    text-align: center;
    position: relative;
    z-index: 1;
    animation: slideUp 0.6s ease-out;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 1px 1px rgba(255, 255, 255, 0.05) inset;
}

/* Success icon */
.checkout-success-page .success-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-xl);
}

.checkout-success-page .success-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(230, 122, 46, 0.3);
    animation: ring-pulse 2s ease-out infinite;
}

@keyframes ring-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.checkout-success-page .success-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e67a2e 0%, #f5a623 100%);
    border-radius: 50%;
    box-shadow:
        0 8px 32px rgba(230, 122, 46, 0.4),
        0 0 60px rgba(230, 122, 46, 0.2);
    animation: icon-appear 0.5s ease-out 0.3s both;
}

@keyframes icon-appear {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.checkout-success-page .success-icon .anticon {
    font-size: 48px;
    color: white;
    animation: checkmark 0.4s ease-out 0.6s both;
}

@keyframes checkmark {
    from {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* Title and subtitle */
.checkout-success-page .success-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.02em;
    animation: fadeIn 0.5s ease-out 0.5s both;
}

.checkout-success-page .success-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-xl) 0;
    line-height: 1.6;
    animation: fadeIn 0.5s ease-out 0.6s both;
}

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

/* Plan badge */
.checkout-success-page .success-details {
    margin-bottom: var(--space-xl);
    animation: fadeIn 0.5s ease-out 0.7s both;
}

.checkout-success-page .plan-badge {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: linear-gradient(135deg, rgba(230, 122, 46, 0.15) 0%, rgba(245, 166, 35, 0.15) 100%);
    border: 1px solid rgba(230, 122, 46, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-xl);
}

.checkout-success-page .plan-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.checkout-success-page .plan-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #f5a623;
    text-transform: capitalize;
}

/* Action buttons */
.checkout-success-page .success-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    animation: fadeIn 0.5s ease-out 0.8s both;
}

@media (min-width: 400px) {
    .checkout-success-page .success-actions {
        flex-direction: row;
        justify-content: center;
    }
}

.checkout-success-page .success-actions .ant-btn {
    height: 48px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    transition: all var(--transition-base) !important;
}

.checkout-success-page .success-actions .primary-action.ant-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(230, 122, 46, 0.35) !important;
    min-width: 180px;
}

.checkout-success-page .success-actions .primary-action.ant-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 122, 46, 0.45) !important;
}

.checkout-success-page .success-actions .secondary-action.ant-btn-default {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    min-width: 180px;
}

.checkout-success-page .success-actions .secondary-action.ant-btn-default:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--glass-border-light) !important;
    color: var(--text-primary) !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .checkout-success-page .success-container {
        padding: var(--space-xl);
        border-radius: var(--radius-lg);
    }

    .checkout-success-page .success-icon-wrapper {
        width: 80px;
        height: 80px;
    }

    .checkout-success-page .success-icon .anticon {
        font-size: 36px;
    }

    .checkout-success-page .success-title {
        font-size: 1.5rem;
    }

    .checkout-success-page .success-actions .ant-btn {
        width: 100%;
    }
}

/* ===============================================
   OTP Input - Hide placeholder (cleaner look)
   Target any input with letter-spacing in its inline style
   =============================================== */

.ant-input[style*="letter-spacing"]::placeholder {
    color: transparent !important;
}

.ant-input[style*="letter-spacing"]::-webkit-input-placeholder {
    color: transparent !important;
}

.ant-input[style*="letter-spacing"]::-moz-placeholder {
    color: transparent !important;
}

.ant-input[style*="letter-spacing"]:-ms-input-placeholder {
    color: transparent !important;
}

/* ===============================================
   Form Loading Overlay - Dark Theme
   =============================================== */

.ant-spin-nested-loading > div > .ant-spin {
    max-height: unset;
}

.ant-spin-blur {
    opacity: 0.5;
}

.ant-spin-blur::after {
    background: transparent !important;
}

.ant-spin-container::after {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* ===============================================
   Change Email Modal - Input Styling
   =============================================== */

.change-email-modal .ant-form-item-label > label {
    color: rgba(255, 255, 255, 0.7) !important;
}

.change-email-modal .ant-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.change-email-modal .ant-input:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.change-email-modal .ant-input:focus,
.change-email-modal .ant-input-focused {
    border-color: #e67a2e !important;
    box-shadow: 0 0 0 2px rgba(230, 122, 46, 0.2) !important;
}

.change-email-modal .ant-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.change-email-modal .ant-input-lg {
    height: 48px !important;
    padding: 8px 16px !important;
    font-size: 1rem !important;
}

/* OTP code input - special styling with letter spacing */
.change-email-modal .ant-input[style*="letter-spacing"] {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Modal description text */
.change-email-modal .ant-modal-body p {
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.6;
}

/* Code expiry notice */
.change-email-modal .code-expiry {
    background: rgba(230, 122, 46, 0.1) !important;
    border: 1px solid rgba(230, 122, 46, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    margin-bottom: 24px !important;
    color: #e67a2e !important;
    font-size: 0.875rem !important;
    text-align: center !important;
}

/* Modal action buttons */
.change-email-modal .modal-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

/* Resend link */
.change-email-modal .resend-link {
    text-align: center !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.change-email-modal .resend-link .ant-btn-link {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.875rem !important;
}

.change-email-modal .resend-link .ant-btn-link:hover {
    color: #e67a2e !important;
}