/* CDL Pro — UI Components */

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--cdl-font-heading);
  font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  border: 2px solid transparent; border-radius: var(--cdl-radius);
  cursor: pointer; transition: all var(--cdl-transition);
  text-decoration: none; white-space: nowrap;
  padding: 0.875rem 2rem; font-size: 0.9rem;
}
.btn:focus-visible { outline: 3px solid var(--cdl-accent); outline-offset: 2px; }
.btn--primary   { background: var(--cdl-accent); color: #fff; border-color: var(--cdl-accent); }
.btn--primary:hover { background: var(--cdl-accent-dark); border-color: var(--cdl-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(230,51,41,0.35); }
.btn--secondary { background: var(--cdl-primary); color: #fff; border-color: var(--cdl-primary); }
.btn--secondary:hover { background: var(--cdl-primary-dark); border-color: var(--cdl-primary-dark); color: #fff; transform: translateY(-2px); }
.btn--outline   { background: transparent; color: var(--cdl-primary); border-color: var(--cdl-primary); }
.btn--outline:hover { background: var(--cdl-primary); color: #fff; }
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--outline-white:hover { background: rgba(255,255,255,0.15); border-color: #fff; color: #fff; }
.btn--white     { background: #fff; color: var(--cdl-primary); border-color: #fff; }
.btn--white:hover { background: var(--cdl-off-white); color: var(--cdl-primary); transform: translateY(-2px); }
.btn--ghost     { background: transparent; color: var(--cdl-text-light); border-color: transparent; }
.btn--ghost:hover { color: var(--cdl-primary); }
.btn--lg        { padding: 1.1rem 2.5rem; font-size: 1rem; }
.btn--sm        { padding: 0.6rem 1.25rem; font-size: 0.8rem; }
.btn--full      { width: 100%; }
.btn--loading .btn-text   { display: none; }
.btn--loading .btn-loading { display: flex; }
.btn-loading    { display: none; }

/* ── Cards ── */
.card {
  background: var(--cdl-white);
  border: 1px solid var(--cdl-border);
  border-radius: var(--cdl-radius-lg);
  overflow: hidden;
  box-shadow: var(--cdl-shadow);
  transition: transform var(--cdl-transition), box-shadow var(--cdl-transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--cdl-shadow-lg); }

/* ── Program Cards ── */
.program-card {
  background: var(--cdl-white);
  border: 1px solid var(--cdl-border);
  border-radius: var(--cdl-radius-lg);
  overflow: hidden;
  box-shadow: var(--cdl-shadow);
  transition: transform var(--cdl-transition), box-shadow var(--cdl-transition);
  display: flex; flex-direction: column;
  position: relative;
}
.program-card:hover { transform: translateY(-6px); box-shadow: var(--cdl-shadow-lg); }
.program-card--featured { border-color: var(--cdl-accent); border-width: 2px; }
.program-badge {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--cdl-accent); color: #fff;
  font-family: var(--cdl-font-heading); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem; border-radius: 100px; z-index: 1;
}
.program-card__image { aspect-ratio: 16/9; overflow: hidden; }
.program-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.program-card:hover .program-card__image img { transform: scale(1.05); }
.program-card__body { padding: 1.5rem; flex: 1; }
.program-card__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.program-card__title a { color: var(--cdl-primary); }
.program-card__title a:hover { color: var(--cdl-accent); }
.program-card__duration { display: flex; align-items: center; gap: 0.4rem; color: var(--cdl-text-light); font-size: 0.875rem; margin-bottom: 0.75rem; }
.program-card__duration svg { color: var(--cdl-accent); flex-shrink: 0; }
.program-card__excerpt { color: var(--cdl-dark-gray); font-size: 0.9rem; margin-bottom: 1rem; }
.program-card__features { list-style: none; padding: 0; margin: 0; }
.program-card__features li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; padding: 0.3rem 0; border-bottom: 1px solid var(--cdl-border); }
.program-card__features li:last-child { border-bottom: none; }
.check-icon { color: var(--cdl-accent); flex-shrink: 0; width: 16px; height: 16px; }
.program-card__footer { padding: 1.25rem 1.5rem; background: var(--cdl-off-white); border-top: 1px solid var(--cdl-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.price-label { font-size: 0.75rem; color: var(--cdl-text-light); text-transform: uppercase; letter-spacing: 0.05em; display: block; }
.price-amount { font-family: var(--cdl-font-heading); font-size: 1.5rem; font-weight: 700; color: var(--cdl-primary); }

/* ── Testimonial Cards ── */
.testimonial-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--cdl-radius-lg);
  padding: 2rem;
  transition: transform var(--cdl-transition), background var(--cdl-transition);
}
.testimonial-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); }
.testimonial-card__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cdl-stars { display: flex; gap: 0.2rem; }
.star { width: 18px; height: 18px; }
.star--filled { color: var(--cdl-gold); }
.star--empty  { color: rgba(255,255,255,0.2); }
.testimonial-program { font-size: 0.75rem; background: var(--cdl-accent); color: #fff; padding: 0.25rem 0.75rem; border-radius: 100px; font-family: var(--cdl-font-heading); text-transform: uppercase; letter-spacing: 0.05em; }
.testimonial-card__quote { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.9); margin-bottom: 1.5rem; font-style: italic; }
.testimonial-card__author { display: flex; align-items: center; gap: 1rem; }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.2); }
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-avatar--initials { width: 100%; height: 100%; background: var(--cdl-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--cdl-font-heading); font-weight: 700; font-size: 1.25rem; }
.testimonial-name { display: block; font-family: var(--cdl-font-heading); font-weight: 600; color: #fff; }
.testimonial-job  { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.65); }
.testimonial-city { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 0.2rem; }

/* ── City Cards ── */
.city-card {
  display: block; border-radius: var(--cdl-radius-lg); overflow: hidden;
  box-shadow: var(--cdl-shadow); transition: transform var(--cdl-transition), box-shadow var(--cdl-transition);
  text-decoration: none; color: inherit; position: relative;
}
.city-card:hover { transform: translateY(-6px); box-shadow: var(--cdl-shadow-lg); color: inherit; }
.city-card__image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cdl-light-gray); }
.city-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.city-card:hover .city-card__image img { transform: scale(1.08); }
.city-card__image--placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--cdl-light-gray); }
.city-card__image--placeholder svg { width: 48px; height: 48px; color: var(--cdl-mid-gray); }
.city-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%); }
.city-card__body { padding: 1.25rem; background: var(--cdl-white); }
.city-card__name { font-size: 1.1rem; font-family: var(--cdl-font-heading); color: var(--cdl-primary); margin-bottom: 0.25rem; }
.city-card__state { font-size: 0.8rem; color: var(--cdl-text-light); display: block; margin-bottom: 0.5rem; }
.city-card__cta { font-size: 0.875rem; color: var(--cdl-accent); font-weight: 600; transition: gap var(--cdl-transition); }

/* ── Blog Cards ── */
.blog-card { background: var(--cdl-white); border: 1px solid var(--cdl-border); border-radius: var(--cdl-radius-lg); overflow: hidden; box-shadow: var(--cdl-shadow); transition: transform var(--cdl-transition), box-shadow var(--cdl-transition); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--cdl-shadow-lg); }
.blog-card__image { aspect-ratio: 16/9; overflow: hidden; }
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card__image img { transform: scale(1.05); }
.blog-card__body { padding: 1.5rem; }
.blog-card__cats { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.post-cat { font-size: 0.75rem; background: var(--cdl-off-white); color: var(--cdl-accent); padding: 0.25rem 0.75rem; border-radius: 100px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transition: background var(--cdl-transition); }
.post-cat:hover { background: var(--cdl-accent); color: #fff; }
.blog-card__title { font-size: 1.1rem; margin-bottom: 0.5rem; }
.blog-card__title a { color: var(--cdl-primary); }
.blog-card__title a:hover { color: var(--cdl-accent); }
.blog-card__excerpt { font-size: 0.875rem; color: var(--cdl-dark-gray); margin-bottom: 1rem; }
.blog-card__meta { display: flex; align-items: center; gap: 1rem; font-size: 0.8rem; color: var(--cdl-text-light); }
.read-time { display: flex; align-items: center; gap: 0.3rem; }

/* ── FAQ Accordion ── */
.faq-item { border: 1px solid var(--cdl-border); border-radius: var(--cdl-radius); margin-bottom: 0.75rem; overflow: hidden; }
.faq-question {
  width: 100%; background: var(--cdl-white); border: none; padding: 1.25rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--cdl-font-heading); font-size: 1rem; font-weight: 600;
  color: var(--cdl-primary); cursor: pointer; text-align: left;
  transition: background var(--cdl-transition);
}
.faq-question:hover { background: var(--cdl-off-white); }
.faq-question[aria-expanded="true"] { background: var(--cdl-primary); color: #fff; }
.faq-icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--cdl-transition); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-answer.open { max-height: 500px; }
.faq-answer__inner { padding: 1.25rem 1.5rem; color: var(--cdl-dark-gray); line-height: 1.8; }

/* ── Stats Bar ── */
.stats-bar { background: var(--cdl-accent); padding: 3rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; text-align: center; }
.stat-item { color: #fff; }
.stat-number { font-family: var(--cdl-font-heading); font-size: clamp(2rem,4vw,3rem); font-weight: 700; line-height: 1; display: block; }
.stat-label  { font-size: 0.875rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.5rem; display: block; }

/* ── Trust Bar ── */
.trust-bar { background: var(--cdl-off-white); border-top: 1px solid var(--cdl-border); border-bottom: 1px solid var(--cdl-border); padding: 1.5rem 0; }
.trust-bar__inner { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; font-weight: 600; color: var(--cdl-dark-gray); }
.trust-item svg { color: var(--cdl-accent); flex-shrink: 0; }

/* ── Sticky Bar ── */
.cdl-sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: var(--cdl-primary); color: #fff;
  padding: 0.875rem 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
  transform: translateY(100%); transition: transform 0.4s ease;
}
.cdl-sticky-bar.visible { transform: translateY(0); }
.cdl-sticky-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sticky-bar__text { font-size: 0.9rem; font-weight: 500; }
.sticky-bar__actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sticky-bar__close { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1.25rem; cursor: pointer; padding: 0.25rem; line-height: 1; }
.sticky-bar__close:hover { color: #fff; }

/* ── WhatsApp Button ── */
.cdl-whatsapp-btn {
  position: fixed; bottom: 5rem; right: 1.5rem; z-index: 999;
  width: 56px; height: 56px; background: #25d366; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4); transition: transform var(--cdl-transition), box-shadow var(--cdl-transition);
}
.cdl-whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(37,211,102,0.5); color: #fff; }
.cdl-whatsapp-btn svg { width: 28px; height: 28px; }

/* ── Cookie Banner ── */
.cdl-cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 998;
  background: var(--cdl-primary-dark); color: rgba(255,255,255,0.9);
  padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; font-size: 0.875rem;
  transform: translateY(100%); transition: transform 0.4s ease;
}
.cdl-cookie-banner.visible { transform: translateY(0); }
.cdl-cookie-banner p { margin: 0; }
.cdl-cookie-banner a { color: var(--cdl-gold); }
.cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; }

/* ── Breadcrumbs ── */
.cdl-breadcrumbs { padding: 0.75rem 0; font-size: 0.875rem; }
.breadcrumb-list { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.breadcrumb-list li { display: flex; align-items: center; gap: 0.5rem; color: var(--cdl-text-light); }
.breadcrumb-list li::after { content: '/'; color: var(--cdl-border); }
.breadcrumb-list li:last-child::after { display: none; }
.breadcrumb-list a { color: var(--cdl-text-light); }
.breadcrumb-list a:hover { color: var(--cdl-accent); }

/* ── Pagination ── */
.cdl-pagination { margin: 3rem 0 1rem; }
.pagination-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.page-item a, .page-item span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--cdl-border); border-radius: var(--cdl-radius); font-size: 0.875rem; color: var(--cdl-primary); transition: all var(--cdl-transition); }
.page-item a:hover { background: var(--cdl-accent); border-color: var(--cdl-accent); color: #fff; }
.page-item .current { background: var(--cdl-primary); border-color: var(--cdl-primary); color: #fff; }

/* ── CTA Strip ── */
.cta-strip { background: linear-gradient(135deg, var(--cdl-accent) 0%, var(--cdl-accent-dark) 100%); padding: 5rem 0; }
.cta-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.cta-strip__title { font-size: clamp(1.5rem,3vw,2.25rem); color: #fff; margin-bottom: 0.75rem; }
.cta-strip__subtitle { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 500px; }
.cta-strip__actions { display: flex; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; }

/* ── Salary Calculator ── */
#cdl-salary-calculator { background: var(--cdl-white); border-radius: var(--cdl-radius-lg); padding: 2rem; box-shadow: var(--cdl-shadow-lg); }
.calc-slider { width: 100%; accent-color: var(--cdl-accent); }
.calc-result { background: var(--cdl-primary); color: #fff; border-radius: var(--cdl-radius); padding: 1.5rem; text-align: center; margin-top: 1.5rem; }
.calc-result .salary-amount { font-family: var(--cdl-font-heading); font-size: 2.5rem; font-weight: 700; color: var(--cdl-gold); }

/* ── Enrollment Wizard ── */
#cdl-enrollment-wizard { background: var(--cdl-white); border-radius: var(--cdl-radius-lg); overflow: hidden; }
.wizard-progress { background: var(--cdl-off-white); padding: 1rem 1.5rem; display: flex; gap: 0.5rem; }
.wizard-step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cdl-border); transition: background var(--cdl-transition); }
.wizard-step-dot.active { background: var(--cdl-accent); }
.wizard-step-dot.done   { background: var(--cdl-primary); }
.wizard-body { padding: 2rem; }
.wizard-nav { display: flex; justify-content: space-between; padding: 1rem 2rem; border-top: 1px solid var(--cdl-border); }

/* ── Program Finder ── */
#cdl-program-finder { background: var(--cdl-off-white); border-radius: var(--cdl-radius-lg); padding: 2rem; }
.finder-filters { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.finder-filter { padding: 0.5rem 1.25rem; border: 2px solid var(--cdl-border); border-radius: 100px; background: #fff; cursor: pointer; font-weight: 600; transition: all var(--cdl-transition); }
.finder-filter.active { border-color: var(--cdl-accent); background: var(--cdl-accent); color: #fff; }

/* ── City Search ── */
#cdl-city-search { position: relative; }
.city-search-input { width: 100%; padding: 1rem 1.5rem; border: 2px solid var(--cdl-border); border-radius: var(--cdl-radius); font-size: 1rem; transition: border-color var(--cdl-transition); }
.city-search-input:focus { border-color: var(--cdl-accent); outline: none; }
.city-search-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--cdl-border); border-radius: var(--cdl-radius); box-shadow: var(--cdl-shadow-lg); z-index: 100; max-height: 300px; overflow-y: auto; }
.city-search-result { padding: 0.75rem 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--cdl-border); transition: background var(--cdl-transition); }
.city-search-result:hover { background: var(--cdl-off-white); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .cta-strip .container { flex-direction: column; text-align: center; }
  .cta-strip__actions { justify-content: center; }
  .trust-bar__inner { gap: 1.5rem; }
  .cdl-sticky-bar .container { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
}