/**
 * Nfinx Sales (any-skills) client portal theme — design system.
 * Exception: Google Fonts @import for Sora (theme-specific branding; not in global Perfex CSS).
 */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

:root {
  --color-primary: #0070B7;
  --color-secondary: #3B444B;
  --color-text: #7A8289;
  --color-accent: #FECC27;
  --color-green: #2ABE69;
  --color-coral: #D86D4E;
  --color-bg: #F5F5F5;
  --color-white: #FFFFFF;
  --color-border: #E5E5E5;
  --color-border-mid: #BDBDBD;
  --color-sky: #4DBAE6;
  --color-black: #000000;
  --space-1: 0.44rem; --space-2: 0.67rem; --space-3: 1rem;
  --space-4: 1.5rem; --space-5: 2.25rem; --space-6: 3.38rem; --space-7: 5.06rem;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-section: 0px 10px 20px rgba(0,0,0,0.15);
  --shadow-dropdown: 0px 10px 30px rgba(0,0,0,0.25);
  --grad-hero-blue: linear-gradient(180deg, #0070B7 50%, #00000059 100%);
  --grad-cta: linear-gradient(120deg, #000000 0%, #0070B780 100%);
  --grad-light: linear-gradient(150deg, #F5F5F5 30%, #F5F5F5E6 100%);
}

* { font-family: 'Sora', sans-serif; box-sizing: border-box; }
body.customers { font-size: 16px; font-weight: 400; color: #7A8289; line-height: 1.5em; background: #F5F5F5; }
h1,h2,h3,h4,h5,h6 { font-family: 'Sora', sans-serif; font-weight: 600; color: #3B444B; }
h1 { font-size: 51px; line-height: 1.1em; letter-spacing: -2px; text-transform: capitalize; }
h2 { font-size: 40px; line-height: 1.1em; }
h3 { font-size: 31px; line-height: 1.2em; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }

.as-container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }

.btn-primary { background: #FECC27; color: #3B444B; border-radius: 3px; padding: 10px 25px; font-family: Sora, sans-serif; font-weight: 600; font-size: 15px; border: 1px solid #FECC27; transition: background 0.3s, color 0.3s; display: inline-block; cursor: pointer; text-decoration: none; }
.btn-primary:hover { background: #3B444B; color: #2ABE69; }
.btn-blue { background: #0070B7; color: #fff; border-radius: 3px; padding: 10px 25px; font-weight: 600; border: none; display: inline-block; }
.btn-ghost { background: transparent; color: #3B444B; border: 1px solid #BDBDBD; border-radius: 3px; padding: 10px 25px; display: inline-block; }

input, select, textarea { font-family: Sora, sans-serif; font-size: 16px; font-weight: 400; color: #3B444B; border: 1px solid #BDBDBD; border-radius: 3px; padding: 10px 14px; background: #FFFFFF; width: 100%; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(245,197,24,0.22); outline: none; }
label { font-family: Sora, sans-serif; font-size: 16px; font-weight: 500; color: #3B444B; text-transform: capitalize; display: block; margin-bottom: 6px; }

.as-card { background: #f5f5f7; border-radius: 4px; box-shadow: var(--shadow-card); padding: 1.5rem 1.25rem; position: relative; }

.badge-success { background: #2ABE69; color: #fff; padding: 3px 8px; border-radius: 3px; font-size: 12px; }
.badge-warning { background: #FECC27; color: #3B444B; padding: 3px 8px; border-radius: 3px; font-size: 12px; }
.badge-danger { background: #D86D4E; color: #fff; padding: 3px 8px; border-radius: 3px; font-size: 12px; }
.badge-info { background: #4DBAE6; color: #fff; padding: 3px 8px; border-radius: 3px; font-size: 12px; }

/* Hero section */
.as-hero { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; }
.as-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.as-hero-overlay { position: absolute; inset: 0; background: var(--grad-hero-blue); opacity: 0.85; }
.as-hero-content { position: relative; z-index: 2; max-width: 50%; padding: var(--space-7) 0; }
.as-hero-content h1 { color: #fff; }
.as-hero-subtitle { color: rgba(255,255,255,0.7); font-size: 16px; max-width: 480px; margin-bottom: var(--space-4); }
.as-hero-trust { color: rgba(255,255,255,0.5); font-size: 13px; margin-top: var(--space-3); }
.as-hero-breadcrumb { color: #4DBAE6; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-3); }

/* Stats */
.as-stats { display: flex; justify-content: center; gap: var(--space-7); padding: var(--space-6) 0; }
.as-stat-number { font-size: 48px; font-weight: 700; color: #0070B7; display: block; }
.as-stat-label { font-size: 14px; color: #7A8289; }

/* Category pills */
.as-pill { display: inline-block; background: #F5F5F5; border: 1px solid #E5E5E5; color: #3B444B; border-radius: 100px; padding: 8px 20px; margin: 4px; font-size: 14px; cursor: pointer; transition: all 0.3s; text-decoration: none; }
.as-pill:hover { background: #FECC27; border-color: #FECC27; }

/* Eyebrow */
.as-eyebrow { color: #2ABE69; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: var(--space-2); }

/* Course card grid */
.as-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.as-grid-item { flex: 0 0 calc(33.333% - 1rem); }

/* Filter bar */
.as-filter-select { background: #f5f5f7; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 0.65rem 2.75rem 0.65rem 1rem; font-family: Sora, sans-serif; font-weight: 500; font-size: 15px; color: #2d2d33; appearance: none; cursor: pointer; }
.as-filter-select:focus { box-shadow: 0 0 0 3px rgba(245,197,24,0.22); outline: none; }

/* Sidebar nav (dashboard) */
.as-sidebar { background: #3B444B; }
.as-sidebar a { color: rgba(255,255,255,0.6); font-family: Sora, sans-serif; font-size: 14px; font-weight: 500; padding: 10px 16px; display: block; transition: all 0.3s; text-decoration: none; }
.as-sidebar a:hover { color: #fff; }
.as-sidebar a.active { color: #FECC27; background: rgba(254,204,39,0.08); border-left: 3px solid #FECC27; }

/* Ebook cover */
.as-ebook-cover { height: 160px; border-radius: 4px 4px 0 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.as-ebook-cover-business { background: linear-gradient(135deg, #0070B7, #004f85); }
.as-ebook-cover-finance { background: linear-gradient(135deg, #2ABE69, #1a8a4a); }
.as-ebook-cover-tech { background: linear-gradient(135deg, #D86D4E, #a84a30); }
.as-ebook-cover-default { background: linear-gradient(135deg, #7B5EA7, #5a3f80); }
.as-format-badge { position: absolute; top: 8px; right: 8px; font-size: 10px; text-transform: uppercase; border-radius: 3px; padding: 3px 8px; font-weight: 700; }
.as-format-free { background: #2ABE69; color: #fff; }
.as-format-premium { background: #FECC27; color: #3B444B; }

/* Footer */
.as-footer { background: #3B444B; padding: var(--space-6) 0; }
.as-footer-grid { display: flex; gap: var(--space-5); }
.as-footer-col-wide { flex: 2; }
.as-footer-col { flex: 1; }
.as-footer a, .as-footer p { color: rgba(255,255,255,0.6); font-size: 14px; text-decoration: none; display: block; margin-bottom: 8px; }
.as-footer a:hover { color: #fff; }
.as-footer h5 { color: #fff; margin-bottom: var(--space-3); }

/* Top bar — skin existing Perfex navbar */
.as-topbar { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 100; }
.as-topbar .navbar.header { margin-bottom: 0; border: none; border-radius: 0; background: #fff; }
.as-topbar .navbar-brand.logo { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 22px; color: #3B444B; }
.as-topbar .navbar-nav > li > a { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 500; color: #3B444B; }
.as-topbar .navbar-nav > li > a:hover,
.as-topbar .navbar-nav > li.active > a { color: #FECC27; }

/* Auth card wrapper */
.as-auth-shell { min-height: 100vh; background: #F5F5F5; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.as-auth-card { background: #fff; border-radius: 10px; box-shadow: var(--shadow-section); padding: 40px 48px; width: 100%; max-width: 480px; }
.as-auth-card-wide { max-width: 960px; }

/* Client dashboard shell */
.as-client-dashboard { padding-bottom: var(--space-6); }

/* Responsive */
@media (max-width: 1024px) {
  h1 { font-size: 42px; }
  h2 { font-size: 34px; }
  .as-grid-item { flex: 0 0 calc(50% - 0.75rem); }
  .as-hero-content { max-width: 70%; }
  .as-footer-grid { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  h1 { font-size: 33px; }
  h2 { font-size: 28px; }
  .as-grid-item { flex: 0 0 100%; }
  .as-hero-content { max-width: 100%; }
  .as-stats { flex-direction: column; align-items: center; gap: var(--space-4); }
}

@keyframes as-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}