/* Reel Compass-inspired premium polish layer for all Look In Ora pages. */

:root {
  --premium-bg:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.12), transparent 28%),
    linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 48%, #FDF2F8 100%);
  --premium-surface: rgba(255, 255, 255, 0.94);
  --premium-border: rgba(139, 92, 246, 0.16);
  --premium-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
  --premium-soft-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  --premium-gradient: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  --premium-gradient-dark: linear-gradient(135deg, #0F172A 0%, #2E1065 58%, #831843 100%);
  --premium-table-header: linear-gradient(135deg, #F5F3FF 0%, #FCE7F3 100%);
  --premium-table-header-text: #4C1D95;
}

body {
  background: var(--premium-bg) !important;
}

body.theme-dark {
  --premium-bg:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.22), transparent 32%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.16), transparent 30%),
    linear-gradient(135deg, #07101F 0%, #0F172A 55%, #020617 100%);
  --premium-surface: rgba(15, 23, 42, 0.92);
  --premium-border: rgba(196, 181, 253, 0.18);
  --premium-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  --premium-soft-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.app-container,
.offer-dashboard,
.purchase-dashboard,
.vendor-dashboard,
.sip-dashboard,
.settings-container,
.versions-container,
.flow-page {
  background: var(--premium-surface) !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-shadow) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@media (min-width: 768px) {
  .app-container,
  .offer-dashboard,
  .purchase-dashboard,
  .vendor-dashboard,
  .sip-dashboard,
  .settings-container,
  .versions-container,
  .flow-page {
    border-radius: 28px !important;
    margin: 20px auto !important;
    max-width: min(1440px, calc(100vw - 40px)) !important;
    min-height: calc(100vh - 40px) !important;
    min-height: calc(100dvh - 40px) !important;
    overflow: hidden;
  }
}

.card,
.pricing-card,
.purchase-card,
.vendor-card,
.sip-card,
.offer-card,
.customer-card,
.inventory-card,
.stat-card,
.settings-card,
.comparison-card,
.summary-card,
.table-container,
.table-wrapper,
.chart-wrapper,
.pie-chart-wrapper,
.purchase-stat-chip,
.vendor-stat-chip,
.sip-stat-card,
.modal-content,
.purchase-modal-content,
.edit-modal-content,
.camera-container {
  background: var(--premium-surface) !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-soft-shadow) !important;
}

.card,
.pricing-card,
.purchase-card,
.vendor-card,
.sip-card,
.offer-card,
.customer-card,
.inventory-card,
.stat-card,
.settings-card,
.comparison-card,
.summary-card,
.table-container,
.table-wrapper,
.chart-wrapper,
.pie-chart-wrapper {
  border-radius: 24px !important;
}

.card:hover,
.pricing-card:hover,
.purchase-card:hover,
.vendor-card:hover,
.sip-card:hover,
.offer-card:hover,
.customer-card:hover,
.inventory-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.32) !important;
  box-shadow: 0 24px 46px rgba(139, 92, 246, 0.14) !important;
}

.card-header,
.purchase-topbar,
.vendor-topbar,
.sip-topbar,
.offer-topbar,
.settings-header,
.page-header,
.section-header,
.modal-header,
.purchase-modal-header {
  background: var(--premium-gradient) !important;
  color: #FFFFFF !important;
  border: none !important;
}

.card-header *,
.purchase-topbar *,
.vendor-topbar *,
.sip-topbar *,
.offer-topbar *,
.settings-header *,
.page-header *,
.section-header *,
.modal-header *,
.purchase-modal-header * {
  color: inherit !important;
}

h1,
h2,
h3,
.page-title,
.section-title {
  letter-spacing: -0.03em;
}

button,
.btn,
.btn-primary,
.purchase-btn-primary,
.vendor-btn-primary,
.sip-btn-primary,
.offer-btn-primary,
.view-btn.active,
.selection-method-btn.active {
  border-radius: 14px !important;
}

.btn-primary,
button.btn-primary,
.purchase-btn-primary,
.vendor-btn-primary,
.sip-btn-primary,
.offer-btn-primary,
.view-btn.active,
.selection-method-btn.active {
  background: var(--premium-gradient) !important;
  border: none !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 26px rgba(139, 92, 246, 0.22) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
.purchase-btn-primary:hover,
.vendor-btn-primary:hover,
.sip-btn-primary:hover,
.offer-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(139, 92, 246, 0.28) !important;
}

input,
select,
textarea,
.form-control,
.purchase-input,
.filter-select {
  border-radius: 14px !important;
  border: 1px solid rgba(139, 92, 246, 0.16) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.purchase-input:focus,
.filter-select:focus {
  border-color: #8B5CF6 !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12) !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .form-control,
body.theme-dark .purchase-input,
body.theme-dark .filter-select {
  background: rgba(15, 23, 42, 0.82) !important;
  color: #F8FAFC !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

th {
  background: var(--premium-table-header) !important;
  color: var(--premium-table-header-text) !important;
  border: none !important;
}

td {
  background: rgba(255, 255, 255, 0.86) !important;
  border-top: 1px solid rgba(139, 92, 246, 0.08) !important;
  border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important;
}

body.theme-dark td {
  background: rgba(15, 23, 42, 0.82) !important;
}

tr:hover td {
  background: rgba(139, 92, 246, 0.08) !important;
}

.loader-container,
.fullscreen-loader {
  background: var(--premium-gradient-dark) !important;
}

.receipt-content,
.receipt-content *,
#receiptContent,
#receiptContent * {
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 767px) {
  .app-container,
  .offer-dashboard,
  .purchase-dashboard,
  .vendor-dashboard,
  .sip-dashboard,
  .settings-container,
  .versions-container,
  .flow-page {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    min-height: 100vh !important;
  }
}