/* =========================================================
   TRADEVEST EXAMS — RESPONSIVE CSS
========================================================= */

/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form .fluentform,
.contact-form .ff-el-group,
.contact-form .ff-el-input--content,
.contact-form .ff-el-form-control,
.contact-form textarea{
  width:100% !important;
  max-width:100% !important;

  box-sizing:border-box;
}

.contact-form .ff-el-form-label{
  display:block;

  margin-bottom:7px !important;

  color:var(--text);

  font-size:14px !important;
  font-weight:600 !important;

  text-align:left !important;
}

.contact-form .ff-el-form-control{
  height:48px !important;

  padding:0 14px !important;

  background:var(--white) !important;

  border:1px solid #dbe3f0 !important;
  border-radius:12px !important;

  box-shadow:none !important;

  font-size:14px !important;

  transition:all .25s ease;
}

.contact-form .ff-el-form-control:focus{
  border-color:var(--primary) !important;

  box-shadow:
    0 0 0 4px rgba(37,99,235,.10) !important;
}

.contact-form textarea.ff-el-form-control{
  height:130px !important;

  padding-top:12px !important;
}

.contact-form .ff-btn-submit{
  width:190px !important;
  height:48px !important;

  display:flex !important;
  align-items:center;
  justify-content:center;

  margin:10px auto 0 !important;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    ) !important;

  border:none !important;
  border-radius:12px !important;

  color:var(--white) !important;

  font-size:14px !important;
  font-weight:600 !important;

  transition:all .25s ease;
}

.contact-form .ff-btn-submit:hover{
  transform:translateY(-1px);

  box-shadow:
    0 8px 18px rgba(37,99,235,.20);
}


/* =========================================================
   FLUENT FORM ERRORS
========================================================= */

.contact-form .ff-el-is-error .text-danger,
.contact-form .ff-el-error,
.contact-form .ff-message-error,
.contact-form .ff-el-help-block{
  display:block !important;

  text-align:left !important;

  font-size:13px !important;
}


/* =========================================================
   AUTH CARD
========================================================= */

.tv-auth-card{
  padding:20px;

  background:var(--white);

  border:1px solid var(--border);
  border-radius:18px;

  box-shadow:
    0 6px 18px rgba(15,23,42,.05);
}

.tv-auth-card h2{
  margin-bottom:6px;

  color:var(--text);

  font-size:22px;
  font-weight:700;
}

.tv-auth-card p{
  margin-bottom:18px;

  color:var(--muted);

  font-size:13px;
  line-height:1.6;
}

.tv-auth-btn{
  height:42px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 18px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    );

  border:none;
  border-radius:10px;

  color:var(--white);

  font-size:13px;
  font-weight:600;

  transition:all .25s ease;
}

.tv-auth-btn:hover{
  transform:translateY(-1px);

  box-shadow:
    0 8px 18px rgba(37,99,235,.20);
}

/* =========================================================
   RESULT CARD BUTTON
========================================================= */

.tv-result-card .tv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:18px;

  padding:12px 22px !important;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    );

  border-radius:12px;

  color:var(--white) !important;

  font-size:14px;
  font-weight:600;

  text-decoration:none;

  transition:all .25s ease;
}

.tv-result-card .tv-btn:hover{
  transform:translateY(-1px);

  box-shadow:
    0 8px 18px rgba(37,99,235,.20);
}

/* =========================================================
   STUDY MATERIALS
========================================================= */

.study-materials{
  overflow:hidden;

  padding:80px 0 100px;

  background:
    linear-gradient(
      135deg,
      #f8fbff 0%,
      #eef4ff 50%,
      #f8fbff 100%
    );
}

.study-materials .container{
  max-width:1100px;
}

.study-material-card{
  width:100%;
  max-width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  overflow:hidden;

  padding:32px;

  background:var(--white);

  border:1px solid var(--border);
  border-radius:24px;

  box-shadow:
    0 8px 24px rgba(15,23,42,.04);

  transition:all .25s ease;
}

.study-material-card:hover{
  transform:translateY(-2px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.05);
}

.study-material-icon{
  width:72px;
  height:72px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #eef4ff,
      #dbeafe
    );

  color:var(--primary);

  font-size:32px;
}

.study-material-content{
  flex:1;

  min-width:0;
}

.study-material-content h3{
  margin-bottom:8px;

  color:var(--text);

  font-size:24px;
  font-weight:700;
  line-height:1.4;
}

.study-material-content p{
  color:#6b7280;

  font-size:15px;
  line-height:1.7;
}

.study-material-actions{
  display:flex;
  align-items:center;

  gap:14px;

  min-width:0;
}

/* =========================================================
   THEME SELECT BOX
========================================================= */

#study-material-select{
  width:100%;
  min-width:280px;

  height:56px;

  padding:0 52px 0 18px;

  background-color:#ffffff !important;

  border:1px solid #dbe3f0;
  border-radius:16px;

  color:#0f172a !important;

  font-size:15px;
  font-weight:500;

  box-shadow:
    0 4px 12px rgba(15,23,42,.04);

  outline:none;

  cursor:pointer;

  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;

  transition:all .25s ease;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:18px;

  -webkit-tap-highlight-color:transparent;
}

#study-material-select:hover{
  border-color:#bfdbfe;

  box-shadow:
    0 6px 18px rgba(37,99,235,.08);
}

#study-material-select:focus{
  border-color:#2563eb;

  box-shadow:
    0 0 0 4px rgba(37,99,235,.10);
}

#study-material-select option{
  color:#0f172a;

  background:#ffffff;

  font-size:15px;
}

/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.study-material-actions .btn{
  min-width:190px;
  height:56px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 20px;

  border-radius:16px;

  white-space:nowrap;

  font-size:15px;
  font-weight:600;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:992px){

  .grid{
    grid-template-columns:repeat(2,1fr);
  }

  .bundle-grid,
  .faq-grid{
    grid-template-columns:1fr;
  }

  .study-material-card{
    flex-direction:column;

    align-items:flex-start;
  }

  .study-material-actions{
    width:100%;
  }

  #study-material-select{
    min-width:auto;

    flex:1;
  }

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  /* =====================================================
     FORCE MOBILE NAVIGATION
  ===================================================== */

  .nav-links,
  .nav-actions{
    display:none !important;
  }

  .tv-mobile-toggle{
    display:flex !important;
  }

  /* =====================================================
     HERO
  ===================================================== */

  .hero{
    padding:70px 0;
  }

  .hero-inner{
    flex-direction:column;

    gap:40px;

    text-align:center;
  }

  .hero h1{
    font-size:38px;
  }

  .hero-buttons,
  .features{
    justify-content:center;
  }

  .features span{
    width:100%;

    justify-content:center;
  }

  /* =====================================================
     GRID
  ===================================================== */

  .grid{
    grid-template-columns:1fr;
  }

  .section-title{
    font-size:30px;
  }

  /* =====================================================
     CONTACT
  ===================================================== */

  .contact{
    padding:25px 0;
  }

  .contact-inner{
    padding:0 14px;
  }

  .contact h2{
    font-size:32px;
  }

  .contact-form{
    padding:22px 18px;
  }

  .contact-form .ff-btn-submit{
    width:100% !important;
  }

  /* =====================================================
     STUDY MATERIALS
  ===================================================== */

  .study-materials{
    padding:70px 0 90px;
  }

  .study-materials .container{
    width:100%;
    max-width:100%;

    padding-left:16px;
    padding-right:16px;
  }

  .study-material-card{
    width:100%;

    gap:20px;

    padding:24px;
  }

  .study-material-content{
    width:100%;
  }

  .study-material-content h3{
    font-size:22px;
  }

  .study-material-actions{
    width:100%;

    flex-direction:column;
  }

  #study-material-select,
  .study-material-actions .btn{
    width:100%;
    min-width:100%;
    max-width:100%;
  }

  /* =====================================================
     MOBILE SELECT FIX
  ===================================================== */

  #study-material-select{
    height:58px !important;

    padding-left:16px !important;
    padding-right:50px !important;

    border-radius:18px !important;

    font-size:16px !important;
    font-weight:500 !important;

    background-color:#ffffff !important;

    line-height:normal !important;

    position:relative;

    z-index:5;

    opacity:1 !important;

    color:#0f172a !important;
  }

  /* =====================================================
     BUNDLE
  ===================================================== */

  .bundle-content,
  .bundle-pricing{
    padding:26px;
  }

  .final-price{
    font-size:44px;
  }

  /* =====================================================
     FAQ
  ===================================================== */

  .faq-question{
    padding:18px 20px;

    font-size:15px;
  }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .hero h1{
    font-size:32px;
  }

  .section-title{
    font-size:28px;
  }

  .card,
  .bundle-content,
  .bundle-pricing{
    padding:22px;
  }

  .study-material-card{
    padding:20px;
  }

  .final-price{
    font-size:38px;
  }

}