/* ============================================================
   SV INSTITUTE – COMPONENTS CSS
   Module 1: Buttons · Cards · Forms · Footer · Floating · CTA
   ============================================================ */

/* ── 1. BUTTONS ───────────────────────────────────────────── */
.svi-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  font-family:     var(--svi-font-heading);
  font-size:       var(--svi-text-sm);
  font-weight:     600;
  line-height:     1;
  padding:         0.85rem 1.75rem;
  border-radius:   var(--svi-radius-sm);
  border:          2px solid transparent;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:      var(--svi-transition);
  min-height:      48px; /* Touch target */
  letter-spacing:  0.02em;
  position:        relative;
  overflow:        hidden;
}
.svi-btn:focus-visible {
  outline:        2px solid var(--svi-blue);
  outline-offset: 3px;
}

/* Primary Button */
.svi-btn--primary {
  background: var(--svi-gradient);
  color:      var(--svi-white);
  border-color: transparent;
  box-shadow:   var(--svi-shadow-blue);
}
.svi-btn--primary:hover,
.svi-btn--primary:focus-visible {
  background:  linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
  color:       var(--svi-white);
  box-shadow:  0 12px 36px rgba(30,136,229,0.35);
  transform:   translateY(-2px);
}
.svi-btn--primary:active {
  transform:   translateY(0);
  box-shadow:  var(--svi-shadow-blue);
}

/* Secondary Button */
.svi-btn--secondary {
  background:  var(--svi-navy);
  color:       var(--svi-white);
  border-color: var(--svi-navy);
}
.svi-btn--secondary:hover,
.svi-btn--secondary:focus-visible {
  background:  #162B56;
  color:       var(--svi-white);
  transform:   translateY(-2px);
  box-shadow:  var(--svi-shadow-md);
}

/* Outline Button */
.svi-btn--outline {
  background:   transparent;
  color:        var(--svi-navy);
  border-color: var(--svi-navy);
}
.svi-btn--outline:hover,
.svi-btn--outline:focus-visible {
  background:  var(--svi-navy);
  color:       var(--svi-white);
  transform:   translateY(-2px);
}

/* Outline-light (for dark backgrounds) */
.svi-btn--outline-light {
  background:   transparent;
  color:        var(--svi-white);
  border-color: rgba(255,255,255,0.5);
}
.svi-btn--outline-light:hover,
.svi-btn--outline-light:focus-visible {
  background:   var(--svi-white);
  color:        var(--svi-navy);
  border-color: var(--svi-white);
  transform:    translateY(-2px);
}

/* Size variants */
.svi-btn--sm {
  font-size:  var(--svi-text-xs);
  padding:    0.6rem 1.2rem;
  min-height: 40px;
}
.svi-btn--lg {
  font-size:  var(--svi-text-base);
  padding:    1rem 2.25rem;
  min-height: 56px;
}

/* Navbar CTA */
.svi-btn--nav {
  font-size: var(--svi-text-xs);
  padding:   0.6rem 1.25rem;
  min-height: 40px;
}

/* ── 2. CARDS ─────────────────────────────────────────────── */

/* Base Card */
.svi-card {
  background:    var(--svi-white);
  border-radius: var(--svi-radius-lg);
  border:        1px solid var(--svi-border);
  overflow:      hidden;
  transition:    var(--svi-transition-slow);
  height:        100%;
}
.svi-card:hover {
  transform:  translateY(-6px);
  box-shadow: var(--svi-shadow-lg);
  border-color: transparent;
}

/* Service Card */
.svi-card--service {
  padding:       var(--svi-space-lg);
  text-align:    left;
  position:      relative;
}
.svi-card--service .svi-card__icon-wrap {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            60px;
  height:           60px;
  border-radius:    var(--svi-radius-md);
  background:       var(--svi-blue-light);
  color:            var(--svi-blue);
  font-size:        1.5rem;
  margin-bottom:    var(--svi-space-md);
  transition:       var(--svi-transition);
}
.svi-card--service:hover .svi-card__icon-wrap {
  background: var(--svi-gradient);
  color:      var(--svi-white);
}
.svi-card--service .svi-card__title {
  font-size:   var(--svi-text-xl);
  font-weight: 700;
  color:       var(--svi-navy);
  margin-bottom: var(--svi-space-xs);
}
.svi-card--service .svi-card__text {
  color:     var(--svi-text-muted);
  font-size: var(--svi-text-sm);
  margin-bottom: var(--svi-space-md);
}
.svi-card--service .svi-card__link {
  font-weight: 600;
  font-size:   var(--svi-text-sm);
  color:       var(--svi-blue);
  display:     inline-flex;
  align-items: center;
  gap:         0.4rem;
}
.svi-card--service .svi-card__link i {
  transition: transform 0.25s;
}
.svi-card--service:hover .svi-card__link i {
  transform: translateX(4px);
}

/* Feature Card */
.svi-card--feature {
  padding:    var(--svi-space-lg);
  text-align: center;
}
.svi-card--feature .svi-card__icon-wrap {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           72px;
  height:          72px;
  border-radius:   50%;
  background:      var(--svi-gradient-light);
  color:           var(--svi-blue-dark);
  font-size:       1.75rem;
  margin: 0 auto var(--svi-space-md);
  transition: var(--svi-transition);
}
.svi-card--feature:hover .svi-card__icon-wrap {
  background: var(--svi-gradient);
  color:      var(--svi-white);
  box-shadow: var(--svi-shadow-blue);
}
.svi-card--feature .svi-card__title {
  font-size:    var(--svi-text-lg);
  font-weight:  700;
  color:        var(--svi-navy);
  margin-bottom: var(--svi-space-xs);
}
.svi-card--feature .svi-card__text {
  color:     var(--svi-text-muted);
  font-size: var(--svi-text-sm);
  margin:    0;
}

/* Testimonial Card */
.svi-card--testimonial {
  padding:    var(--svi-space-lg);
  position:   relative;
}
.svi-card--testimonial::before {
  content:     '\201C';
  font-family: var(--svi-font-heading);
  font-size:   4rem;
  line-height: 1;
  color:       var(--svi-blue-light);
  position:    absolute;
  top:         1.25rem;
  left:        1.5rem;
  font-weight: 800;
}
.svi-card--testimonial .svi-card__text {
  color:      var(--svi-text);
  font-size:  var(--svi-text-sm);
  line-height: 1.8;
  margin-bottom: var(--svi-space-md);
  padding-top: 1rem;
}
.svi-card--testimonial .svi-card__stars {
  color:         #F59E0B;
  font-size:     var(--svi-text-sm);
  margin-bottom: var(--svi-space-sm);
}
.svi-card--testimonial .svi-card__author {
  display:     flex;
  align-items: center;
  gap:         0.85rem;
}
.svi-card--testimonial .svi-card__avatar {
  width:         44px;
  height:        44px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--svi-border);
  flex-shrink:   0;
}
.svi-card--testimonial .svi-card__author-info .name {
  font-weight:  700;
  font-size:    var(--svi-text-sm);
  color:        var(--svi-navy);
  display:      block;
}
.svi-card--testimonial .svi-card__author-info .role {
  font-size: var(--svi-text-xs);
  color:     var(--svi-text-muted);
  display:   block;
}

/* Blog Card */
.svi-card--blog .svi-card__thumb-wrap {
  overflow: hidden;
  height:   210px;
}
.svi-card--blog .svi-card__thumb {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.svi-card--blog:hover .svi-card__thumb {
  transform: scale(1.05);
}
.svi-card--blog .svi-card__body {
  padding: var(--svi-space-md) var(--svi-space-md) var(--svi-space-lg);
}
.svi-card--blog .svi-card__category {
  font-size:      var(--svi-text-xs);
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--svi-blue);
  margin-bottom:  var(--svi-space-xs);
  display:        block;
}
.svi-card--blog .svi-card__title {
  font-size:     var(--svi-text-lg);
  font-weight:   700;
  color:         var(--svi-navy);
  margin-bottom: var(--svi-space-xs);
  line-height:   1.35;
}
.svi-card--blog .svi-card__title:hover { color: var(--svi-blue); }
.svi-card--blog .svi-card__meta {
  font-size:     var(--svi-text-xs);
  color:         var(--svi-text-muted);
  display:       flex;
  gap:           1rem;
  align-items:   center;
  flex-wrap:     wrap;
}

/* ── 3. FORMS ─────────────────────────────────────────────── */
.svi-form-group {
  margin-bottom: var(--svi-space-md);
}
.svi-form-label {
  display:       block;
  font-size:     var(--svi-text-sm);
  font-weight:   600;
  color:         var(--svi-navy);
  margin-bottom: 0.375rem;
}
.svi-form-label .svi-required {
  color:       var(--svi-error);
  margin-left: 0.25rem;
}

.svi-form-control {
  display:       block;
  width:         100%;
  padding:       0.75rem 1rem;
  font-family:   var(--svi-font-body);
  font-size:     var(--svi-text-base);
  color:         var(--svi-text);
  background:    var(--svi-white);
  border:        1.5px solid var(--svi-border);
  border-radius: var(--svi-radius-sm);
  line-height:   1.5;
  transition:    border-color 0.2s, box-shadow 0.2s;
  appearance:    none;
  min-height:    48px;
}
.svi-form-control::placeholder   { color: #A0AEC0; }
.svi-form-control:hover           { border-color: #C4CAD4; }
.svi-form-control:focus {
  outline:      none;
  border-color: var(--svi-blue);
  box-shadow:   0 0 0 3px rgba(30,136,229,0.15);
}
.svi-form-control.is-invalid {
  border-color: var(--svi-error);
}
.svi-form-control.is-valid {
  border-color: var(--svi-success);
}

textarea.svi-form-control {
  min-height: 140px;
  resize:     vertical;
}

.svi-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.85rem center;
  background-size:     14px;
  padding-right:       2.5rem;
  cursor:              pointer;
}

.svi-form-hint {
  display:    block;
  font-size:  var(--svi-text-xs);
  color:      var(--svi-text-muted);
  margin-top: 0.35rem;
}
.svi-form-error {
  display:    block;
  font-size:  var(--svi-text-xs);
  color:      var(--svi-error);
  margin-top: 0.35rem;
}

/* Form card wrapper */
.svi-form-card {
  background:    var(--svi-white);
  border-radius: var(--svi-radius-xl);
  box-shadow:    var(--svi-shadow-lg);
  padding:       var(--svi-space-xl) var(--svi-space-lg);
}

/* ── 4. CTA SECTION ───────────────────────────────────────── */
.svi-cta-section {
  background:    var(--svi-gradient-dark);
  padding:       var(--svi-space-2xl) 0;
  text-align:    center;
  position:      relative;
  overflow:      hidden;
}
.svi-cta-section::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}
.svi-cta-section .svi-cta-title {
  font-size:     clamp(1.75rem, 4vw, 2.5rem);
  font-weight:   800;
  color:         var(--svi-white);
  margin-bottom: var(--svi-space-sm);
}
.svi-cta-section .svi-cta-subtitle {
  color:         rgba(255,255,255,0.72);
  font-size:     var(--svi-text-lg);
  max-width:     560px;
  margin:        0 auto var(--svi-space-lg);
}
.svi-cta-section .svi-cta-actions {
  display:     flex;
  gap:         1rem;
  flex-wrap:   wrap;
  justify-content: center;
}

/* ── 5. FOOTER ────────────────────────────────────────────── */
.svi-footer {
  background-color: var(--svi-navy);
  color:            rgba(255,255,255,0.8);
}
.svi-footer__top {
  padding: var(--svi-space-2xl) 0 var(--svi-space-xl);
}
.svi-footer__logo {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  margin-bottom: var(--svi-space-md);
  text-decoration: none;
}
.svi-footer__desc {
  font-size:     var(--svi-text-sm);
  color:         rgba(255,255,255,0.6);
  line-height:   1.8;
  margin-bottom: var(--svi-space-md);
  max-width:     340px;
}
.svi-footer__socials {
  display: flex;
  gap:     0.75rem;
}
.svi-footer__social-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.08);
  color:           rgba(255,255,255,0.8);
  font-size:       1.1rem;
  transition:      var(--svi-transition);
  text-decoration: none;
}
.svi-footer__social-link:hover {
  background:  var(--svi-gradient);
  color:       var(--svi-white);
  transform:   translateY(-3px);
}
.svi-footer__heading {
  font-family:   var(--svi-font-heading);
  font-size:     var(--svi-text-sm);
  font-weight:   700;
  color:         var(--svi-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--svi-space-md);
}
.svi-footer__links { display: flex; flex-direction: column; gap: 0.6rem; }
.svi-footer__link {
  color:           rgba(255,255,255,0.65);
  font-size:       var(--svi-text-sm);
  text-decoration: none;
  transition:      color 0.2s;
}
.svi-footer__link:hover { color: var(--svi-white); }
.svi-footer__address p {
  display:       flex;
  align-items:   flex-start;
  gap:           0.6rem;
  color:         rgba(255,255,255,0.65);
  font-size:     var(--svi-text-sm);
  margin-bottom: 0.75rem;
}
.svi-footer__address p i {
  color:      var(--svi-blue);
  font-size:  1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.svi-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding:    1.25rem 0;
}
.svi-footer__bottom-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             0.5rem;
}
.svi-footer__bottom p {
  font-size:   var(--svi-text-xs);
  color:       rgba(255,255,255,0.45);
  margin:      0;
}
.svi-footer__legal {
  display:  flex;
  gap:      1.5rem;
}
.svi-footer__legal li a {
  font-size: var(--svi-text-xs);
  color:     rgba(255,255,255,0.45);
}
.svi-footer__legal li a:hover { color: var(--svi-white); }

/* Logo mark (used in nav + footer) */
.svi-logo-mark {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            40px;
  height:           40px;
  border-radius:    var(--svi-radius-sm);
  background:       var(--svi-gradient);
  flex-shrink:      0;
}
.svi-logo-mark--light { background: rgba(255,255,255,0.12); }
.svi-logo-mark__icon {
  font-family: var(--svi-font-heading);
  font-weight: 800;
  font-size:   0.9rem;
  color:       var(--svi-white);
  letter-spacing: -0.02em;
}
.svi-logo-text { display: flex; flex-direction: column; line-height: 1; }
.svi-logo-text__name {
  font-family: var(--svi-font-heading);
  font-size:   var(--svi-text-base);
  font-weight: 800;
  color:       var(--svi-navy);
  letter-spacing: -0.02em;
}
.svi-logo-text__name--light { color: var(--svi-white); }
.svi-logo-text__tagline {
  font-size:  var(--svi-text-xs);
  font-weight: 500;
  color:      var(--svi-text-muted);
  margin-top: 2px;
}
.svi-logo-text__tagline--light { color: rgba(255,255,255,0.55); }

/* ── 6. FLOATING ELEMENTS ────────────────────────────────── */
.svi-float {
  position:        fixed;
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  border-radius:   var(--svi-radius-pill);
  font-size:       1.25rem;
  text-decoration: none;
  z-index:         var(--svi-z-float);
  transition:      var(--svi-transition);
  box-shadow:      var(--svi-shadow-md);
  min-height:      52px;
  padding:         0 1rem;
  white-space:     nowrap;
}

.svi-float--whatsapp {
  bottom: 90px;
  right:  1.25rem;
  background: #25D366;
  color:  var(--svi-white);
}
.svi-float--whatsapp:hover {
  background:  #1DA851;
  color:       var(--svi-white);
  transform:   translateY(-4px) scale(1.04);
  box-shadow:  0 12px 32px rgba(37,211,102,0.35);
}

.svi-float--call {
  bottom: 1.25rem;
  right:  1.25rem;
  background: var(--svi-gradient);
  color:  var(--svi-white);
}
.svi-float--call:hover {
  color:     var(--svi-white);
  transform: translateY(-4px) scale(1.04);
  box-shadow: var(--svi-shadow-blue);
}

.svi-float__label {
  font-family: var(--svi-font-heading);
  font-size:   var(--svi-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Scroll To Top */
.svi-scroll-top {
  position:         fixed;
  bottom:          160px;
  right:           1.25rem;
  z-index:         var(--svi-z-float);
  width:           46px;
  height:          46px;
  border-radius:   50%;
  background:      var(--svi-navy);
  color:           var(--svi-white);
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.1rem;
  box-shadow:      var(--svi-shadow-md);
  transition:      var(--svi-transition);
  opacity:         0;
  transform:       translateY(12px);
}
.svi-scroll-top.is-visible {
  opacity:   1;
  transform: translateY(0);
}
.svi-scroll-top:hover {
  background: var(--svi-blue-dark);
  transform:  translateY(-3px);
  box-shadow: var(--svi-shadow-lg);
}
.svi-scroll-top[hidden] { display: none; }

/* ── 7. BADGE / TAG ───────────────────────────────────────── */
.svi-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            0.35rem;
  padding:        0.3rem 0.75rem;
  border-radius:  var(--svi-radius-pill);
  font-size:      var(--svi-text-xs);
  font-weight:    700;
  letter-spacing: 0.04em;
}
.svi-badge--blue    { background: var(--svi-blue-light); color: var(--svi-blue-dark); }
.svi-badge--navy    { background: rgba(11,28,57,0.08);   color: var(--svi-navy); }
.svi-badge--success { background: #DCFCE7; color: #166534; }
.svi-badge--warning { background: #FEF3C7; color: #92400E; }

/* ── 8. STAT BLOCK ────────────────────────────────────────── */
.svi-stat {
  text-align:    center;
  padding:       var(--svi-space-md);
}
.svi-stat__number {
  font-family:   var(--svi-font-heading);
  font-size:     clamp(2rem, 5vw, 3.25rem);
  font-weight:   800;
  color:         var(--svi-navy);
  line-height:   1;
  margin-bottom: 0.25rem;
}
.svi-stat__number--light { color: var(--svi-white); }
.svi-stat__label {
  font-size: var(--svi-text-sm);
  color:     var(--svi-text-muted);
}
.svi-stat__label--light { color: rgba(255,255,255,0.7); }