/*
 * Brand Overrides (SAK Assets)
 *
 * Applies the landing page brand identity (colors, fonts, effects)
 * across user‑facing UI components of the Fractional Real Estate plugin.
 *
 * Scope: only targets classes prefixed with .re- and plugin templates to avoid
 * impacting the site theme globally.
 */

/* Brand variables */
:root {
  --re-primary: #6C60FE;
  --re-secondary: #2D23A5;
  --re-headline: #002159;
  --re-body: #5A5F6A;
  --re-accent: #FEAA47;
  --re-white: #FFFFFF;
  --re-light-neutral: #FBFBFF;
  --re-off-white: #FAFAFF;
  --re-success: #1DB954;

  --re-radius-sm: 8px;
  --re-radius-md: 20px;
  --re-radius-lg: 32px;
  --re-radius-full: 50px;
}

/* Typography (plugin sections) */
.re-fractional-info-wrapper,
.re-wallet-dashboard-modern,
.re-inline-status-card,
.re-investment-progress-section,
.re-section-header,
.re-transactions-section,
.re-withdrawals-section {
  font-family: 'Lato', sans-serif;
  color: var(--re-body);
}

.re-fractional-info-wrapper h1,
.re-fractional-info-wrapper h2,
.re-fractional-info-wrapper h3,
.re-fractional-info-wrapper h4,
.re-section-header h2,
.re-wallet-dashboard-modern h1,
.re-wallet-dashboard-modern h2,
.re-wallet-dashboard-modern h3 {
  font-family: 'Poppins', sans-serif;
  color: var(--re-headline);
}

/* Buttons */
.re-btn-primary-modern,
.re-btn-modern.re-btn-green,
.re-btn-modern.re-btn-orange {
  background: linear-gradient(135deg, var(--re-primary) 0%, var(--re-secondary) 100%) !important;
  color: var(--re-white) !important;
  border: 0 !important;
  border-radius: var(--re-radius-sm) !important;
  box-shadow: 0 6px 24px rgba(108, 96, 254, 0.35) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.re-btn-primary-modern:hover,
.re-btn-modern.re-btn-green:hover,
.re-btn-modern.re-btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(108, 96, 254, 0.5) !important;
}

/* Secondary / ghost style */
.re-btn-secondary-modern,
.re-action-btn {
  background: transparent !important;
  color: var(--re-primary) !important;
  border: 2px solid var(--re-primary) !important;
  border-radius: var(--re-radius-sm) !important;
}
.re-btn-secondary-modern:hover,
.re-action-btn:hover {
  background: var(--re-primary) !important;
  color: var(--re-white) !important;
}

/* Payment plan cards (single product) */
.re-payment-plan-section {
  background: linear-gradient(135deg, var(--re-light-neutral) 0%, #F5F4FF 100%);
  border-radius: var(--re-radius-lg);
}
.re-payment-card {
  border-radius: var(--re-radius-lg) !important;
  border: 2px solid rgba(108, 96, 254, 0.12) !important;
  box-shadow: 0 10px 40px rgba(108, 96, 254, 0.08) !important;
}
.re-payment-badge {
  background: linear-gradient(135deg, rgba(108,96,254,.1) 0%, rgba(254,170,71,.1) 100%);
  color: #ffffff !important;
  border: 1px solid rgba(108,96,254,.2);
  border-radius: var(--re-radius-full);
}
.re-icon-green { color: var(--re-success) !important; }

/* Badges */
.re-badge {
  border-radius: var(--re-radius-full) !important;
  border: 1px solid rgba(108,96,254,.18) !important;
  background: linear-gradient(135deg, rgba(108,96,254,.06) 0%, rgba(254,170,71,.06) 100%) !important;
  color: var(--re-primary) !important;
}

/* Inline status cards (KYC prompt) */
.re-inline-status-card {
  border-radius: var(--re-radius-md) !important;
  border: 2px solid rgba(108, 96, 254, 0.12) !important;
  background: #fff !important;
  box-shadow: 0 10px 40px rgba(108, 96, 254, 0.08) !important;
}
.re-inline-status-card .dashicons { color: var(--re-primary); }

/* Progress bar (single product) */
.re-progress-bar-container {
  background: rgba(108, 96, 254, 0.10) !important;
  border-radius: var(--re-radius-full) !important;
}
.re-progress-bar {
  background: transparent !important;
}
.re-progress-bar-fill {
  background: linear-gradient(135deg, var(--re-primary) 0%, var(--re-secondary) 100%) !important;
  border-radius: var(--re-radius-full) !important;
  box-shadow: 0 6px 16px rgba(108, 96, 254, 0.35) !important;
}
.re-progress-header .dashicons { color: var(--re-primary); }
.re-progress-percentage { color: var(--re-headline); font-weight: 700; }

/* Properties grid/cards (shortcode) */
.re-properties-grid .re-property-card {
  border-radius: var(--re-radius-lg) !important;
  border: 2px solid rgba(108,96,254,.12) !important;
  box-shadow: 0 10px 40px rgba(108,96,254,.08) !important;
  background: #fff;
}
.re-properties-grid .re-property-title a { color: var(--re-headline) !important; font-family: 'Poppins', sans-serif; }
.re-properties-grid .re-price-label { color: var(--re-body); font-weight: 600; }
.re-properties-grid .re-price-value { color: var(--re-headline); font-weight: 700; }
.re-properties-grid .re-progress-bar,
.re-property-card .re-progress-bar { background: rgba(108,96,254,.10) !important; border-radius: var(--re-radius-full) !important; }
.re-properties-grid .re-progress-fill,
.re-property-card .re-progress-fill { background: linear-gradient(135deg, var(--re-primary), var(--re-secondary)) !important; border-radius: var(--re-radius-full) !important; box-shadow: 0 6px 16px rgba(108,96,254,.35) !important; }
.re-property-card .re-btn.re-btn-primary { background: linear-gradient(135deg, var(--re-primary), var(--re-secondary)) !important; color: var(--re-white) !important; border-radius: var(--re-radius-sm) !important; border: 0 !important; }

/* Wallet dashboard */
.re-wallet-header {
  background: linear-gradient(135deg, var(--re-light-neutral) 0%, #F5F4FF 100%);
  border-radius: var(--re-radius-lg);
}
.re-balance-card-modern {
  border-radius: var(--re-radius-lg) !important;
  border: 2px solid rgba(108,96,254,.12) !important;
  box-shadow: 0 10px 40px rgba(108,96,254,.08) !important;
}
.re-balance-amount { color: #ffffff !important; }
.re-action-card {
  border-radius: var(--re-radius-lg) !important;
  border: 2px solid rgba(108,96,254,.12) !important;
  box-shadow: 0 10px 40px rgba(108,96,254,.08) !important;
}
.re-action-icon.re-icon-green { color: var(--re-success) !important; }
.re-action-icon.re-icon-orange { color: var(--re-accent) !important; }
.re-transaction-item {
  border-radius: var(--re-radius-md) !important;
  border: 1px solid rgba(108,96,254,.12) !important;
}
.re-amount-credit { color: var(--re-success) !important; }
.re-amount-debit { color: #dc2626 !important; }

/* Toast notifications */
.re-toast.re-toast-success { background: linear-gradient(135deg, var(--re-success), #169c45) !important; color: #fff; }
.re-toast.re-toast-error { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; color: #fff; }
.re-toast.re-toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #fff; }
.re-toast.re-toast-info { background: linear-gradient(135deg, var(--re-primary), var(--re-secondary)) !important; color: #fff; }
.re-toast { border-radius: var(--re-radius-sm) !important; box-shadow: 0 10px 30px rgba(0,0,0,.15) !important; }

/* Verification panel tweaks */
/* Verification templates (both modern and simple) */
.re-verification-modern .re-verify-card,
.re-verification-modern .re-verify-upload,
.re-verification-page .re-status-card,
.re-verification-page .re-verification-form-card {
  border-radius: var(--re-radius-lg) !important;
  border: 2px solid rgba(108,96,254,.12) !important;
  box-shadow: 0 10px 40px rgba(108,96,254,.08) !important;
}
.re-verification-modern .re-verify-title,
.re-verification-page h1,
.re-verification-page h2,
.re-verification-page h3 { color: var(--re-headline) !important; }
.re-verification-modern .re-verify-hint,
.re-verification-page p,
.re-verification-page small { color: var(--re-body) !important; }
.re-verification-page .re-status-icon .dashicons { color: var(--re-primary) !important; }
.re-kyc-form button[type="submit"],
.re-verification-page .re-kyc-form .re-btn-modern {
  background: linear-gradient(135deg, var(--re-primary), var(--re-secondary)) !important;
  color: var(--re-white) !important;
  border: 0 !important;
  border-radius: var(--re-radius-sm) !important;
}

/* Cards/stat blocks */
.re-stat-card {
  border-radius: var(--re-radius-lg) !important;
  border: 2px solid rgba(108,96,254,.12) !important;
  box-shadow: 0 10px 40px rgba(108,96,254,.08) !important;
}
.re-stat-icon { color: var(--re-primary) !important; }
.re-stat-value { color: var(--re-headline) !important; }

/* Misc */
.re-note-icon { color: var(--re-accent) !important; }
.re-payment-label { color: var(--re-body) !important; font-weight: 600; }

/* Focus styles for accessibility */
.re-fractional-info-wrapper :focus-visible,
.re-wallet-dashboard-modern :focus-visible {
  outline: 3px solid var(--re-accent) !important;
  outline-offset: 3px;
  border-radius: var(--re-radius-sm);
}