/* =========================================================
   TRADEVEST EXAMS — FINAL LAYOUT CSS
========================================================= */


/* =========================================================
   NAVBAR
========================================================= */

.nav{
  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:9999;

  background:
    rgba(255,255,255,.92);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border-bottom:
    1px solid rgba(226,232,240,.75);

  transition:
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    transform .25s ease;
}


/* =========================================================
   NAVBAR SCROLLED
========================================================= */

.nav.scrolled{
  background:
    rgba(255,255,255,.97);

  border-color:
    rgba(226,232,240,.9);

  box-shadow:
    0 12px 32px rgba(15,23,42,.06);
}


/* =========================================================
   WORDPRESS ADMIN BAR FIX
========================================================= */

.admin-bar .nav{
  top:32px;
}

@media(max-width:782px){

  .admin-bar .nav{
    top:46px;
  }

}


/* =========================================================
   NAV INNER
========================================================= */

.nav-inner{
  position:relative;

  height:74px;

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

  gap:20px;
}


/* =========================================================
   LOGO
========================================================= */

.logo{
  position:relative;

  z-index:5;

  flex-shrink:0;
}

.logo a{
  display:flex;
  align-items:center;
}

.site-logo{
  width:auto;
  height:40px;

  display:block;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.nav-links{
  position:absolute;

  left:50%;

  transform:translateX(-50%);

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

  gap:30px;

  z-index:1;
}

.nav-links a{
  position:relative;

  color:#334155;

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

  white-space:nowrap;

  transition:
    color .25s ease,
    opacity .25s ease;
}


/* =========================================================
   NAV LINK HOVER
========================================================= */

.nav-links a::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-7px;

  width:0;
  height:2px;

  border-radius:999px;

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

  transition:width .25s ease;
}

.nav-links a:hover{
  color:var(--primary);
}

.nav-links a:hover::after{
  width:100%;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.nav-actions{
  position:relative;

  z-index:5;

  margin-left:auto;

  display:flex;
  align-items:center;

  gap:12px;

  flex-shrink:0;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
  height:42px;

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

  padding:0 18px;

  border:none;
  border-radius:12px;

  white-space:nowrap;

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

  cursor:pointer;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.nav-actions .btn{
  min-width:auto;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.btn-primary{
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );

  color:#ffffff;

  border:none;
}

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

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

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

#download-study-material-btn:disabled{
  opacity:.55;

  cursor:not-allowed;

  transform:none !important;

  box-shadow:none !important;
}

/* =========================================================
   OUTLINE BUTTON
========================================================= */

.btn-outline{
  background:#ffffff;

  border:1px solid var(--primary);

  color:var(--primary);
}

.btn-outline:hover{
  background:#eff6ff;
}


/* =========================================================
   START TEST BUTTON
========================================================= */

.mock-start-btn{
  background:#ffffff !important;

  border:1px solid var(--primary) !important;

  color:var(--primary) !important;

  box-shadow:none !important;
}

.mock-start-btn:hover{
  background:#ffffff !important;

  border:1px solid var(--primary) !important;

  color:var(--primary) !important;

  transform:none !important;

  box-shadow:none !important;
}


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

.tv-mobile-toggle{
  display:none;

  width:44px;
  height:44px;

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

  flex-shrink:0;

  border:none;
  border-radius:12px;

  background:#eff6ff;

  color:var(--primary);

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

  cursor:pointer;

  z-index:1001;

  transition:
    background .25s ease,
    transform .25s ease;
}

.tv-mobile-toggle:hover{
  background:#dbeafe;
}


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

.mobile-menu{
  display:none;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
  overflow:hidden;

  padding:38px 0 30px;

  text-align:center;

  background:
    linear-gradient(
      135deg,
      #0f172a,
      #111827,
      #1e293b
    );

  border-top:
    1px solid rgba(255,255,255,.06);
}

.footer .container{
  width:100%;
  max-width:920px;
}


/* =====================================================
   FOOTER TAGLINE
===================================================== */

.footer-tagline{
  color:#ffffff;

  font-size:17px;
  font-weight:700;
  line-height:1.6;

  margin-bottom:12px;
}


/* =====================================================
   FOOTER DESCRIPTION
===================================================== */

.footer-desc{
  color:rgba(255,255,255,.78);

  font-size:15px;
  line-height:1.8;

  max-width:640px;

  margin:
    0 auto 18px;
}


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

.footer-contact{
  display:flex;

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

  flex-wrap:wrap;

  gap:10px;

  margin-bottom:18px;
}

.footer-contact a{
  color:#ffffff;

  font-size:15px;

  text-decoration:underline;

  text-underline-offset:3px;

  transition:
    color .3s ease,
    opacity .3s ease;
}

.footer-contact a:hover{
  color:#4f7cff;

  opacity:.95;
}

.footer-contact span{
  color:rgba(255,255,255,.35);
}


/* =====================================================
   SOCIAL MEDIA
===================================================== */

.footer-social{
  display:flex;

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

  gap:12px;

  margin-bottom:18px;
}

.footer-social a{
  width:40px;
  height:40px;

  border-radius:50%;

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

  background:rgba(255,255,255,.06);

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(8px);

  color:#ffffff;

  text-decoration:none;

  box-shadow:
    0 4px 12px rgba(0,0,0,.22);

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.footer-social a i{
  color:#ffffff;

  font-size:15px;

  line-height:1;
}

.footer-social a:hover{
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #4f7cff
    );

  transform:
    translateY(-2px);

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


/* =====================================================
   COPYRIGHT
===================================================== */

.footer-text{
  color:rgba(255,255,255,.7);

  font-size:14px;
  line-height:1.7;

  margin-bottom:18px;
}


/* =====================================================
   STUDY MATERIAL POPUP
===================================================== */

.tv-study-popup{
  position:fixed;

  inset:0;

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

  overflow-y:auto;

  padding:20px;

  background:rgba(15,23,42,.68);

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  z-index:99999;
}

.tv-study-popup.active{
  display:flex;
}


/* =====================================================
   POPUP BOX
===================================================== */

.tv-study-popup-box{
  position:relative;

  width:100%;
  max-width:430px;

  overflow:hidden;

  padding:32px;

  background:#ffffff;

  border-radius:26px;

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

  animation:
    tvPopupFade .25s ease;
}


/* =====================================================
   POPUP ANIMATION
===================================================== */

@keyframes tvPopupFade{

  from{
    opacity:0;

    transform:
      translateY(10px)
      scale(.98);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.tv-popup-close{
  position:absolute;

  top:14px;
  right:14px;

  width:40px;
  height:40px;

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

  border:none;
  border-radius:50%;

  background:#eff6ff;

  color:var(--primary);

  font-size:24px;
  line-height:1;

  cursor:pointer;

  transition:
    background .25s ease,
    transform .25s ease;
}

.tv-popup-close:hover{
  background:#dbeafe;

  transform:rotate(90deg);
}


/* =====================================================
   POPUP TITLE
===================================================== */

.tv-study-popup-title{
  margin-bottom:10px;

  color:var(--text);

  font-size:24px;
  font-weight:700;
  line-height:1.3;

  letter-spacing:-.5px;

  text-align:center;
}


/* =====================================================
   POPUP DESCRIPTION
===================================================== */

.tv-study-popup-desc{
  margin-bottom:24px;

  color:var(--muted);

  font-size:13px;
  line-height:1.8;

  text-align:center;
}


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

#tv-study-form{
  display:flex;
  flex-direction:column;

  gap:14px;
}


/* =====================================================
   INPUTS
===================================================== */

#tv-study-form input{
  width:100%;
  height:52px;

  padding:0 16px;

  background:#ffffff;

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

  color:var(--text);

  font-size:14px;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

#tv-study-form input::placeholder{
  color:#94a3b8;
}

#tv-study-form input:focus{
  outline:none;

  border-color:var(--primary);

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

/* =====================================================
   STUDY MATERIAL SELECT
===================================================== */

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

  height:54px;

  padding:
    0 50px 0 18px;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

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

  background-color:#ffffff;

  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' 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 16px center;

  background-size:18px;

  color:var(--text);

  font-size:15px;
  font-weight:500;
  line-height:1.4;

  outline:none;

  box-shadow:none;

  cursor:pointer;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}


/* =====================================================
   SELECT FOCUS
===================================================== */

.study-material-actions select:focus{
  border-color:var(--primary);

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


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

@media(max-width:768px){

  .study-material-actions select{

    min-height:54px;

    font-size:16px;

    line-height:normal;

  }

}

/* =====================================================
   SUBMIT BUTTON
===================================================== */

.tv-study-submit{
  width:100%;
  height:54px;

  margin-top:4px;

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

  border:none;
  border-radius:16px;

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

  color:#ffffff;

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

  cursor:pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.tv-study-submit:hover{
  transform:translateY(-1px);

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

.tv-study-submit:disabled{
  opacity:.7;

  cursor:not-allowed;

  transform:none !important;

  box-shadow:none !important;
}


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

@media(max-width:768px){

  .nav-inner{
    height:70px;
  }

  .site-logo{
    height:34px;
  }

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

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

  .mobile-menu{
    position:absolute;

    top:100%;
    left:0;

    width:100%;

    padding:22px 20px;

    background:var(--white);

    border-top:
      1px solid var(--border);

    box-shadow:
      0 16px 40px rgba(15,23,42,.08);

    z-index:999;

    flex-direction:column;

    gap:24px;

    box-sizing:border-box;
  }

  .mobile-menu.active{
    display:flex;
  }

  .mobile-nav-links{
    display:flex;
    flex-direction:column;

    gap:6px;
  }

  .mobile-nav-links a{
    padding:12px 14px;

    border-radius:12px;

    color:#334155;

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

    transition:
      background .25s ease,
      color .25s ease;
  }

  .mobile-nav-links a:hover{
    background:#eff6ff;

    color:var(--primary);
  }

  .mobile-nav-actions{
    display:flex;
    flex-direction:column;

    gap:12px;
  }

  .mobile-nav-actions .btn{
    width:100%;
  }

  .footer{
    padding:34px 0 26px;
  }

  .footer .container{
    max-width:100%;

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

  .footer-tagline{
    font-size:16px;

    margin-bottom:10px;
  }

  .footer-desc{
    font-size:14px;

    margin:
      0 auto 16px;
  }

  .footer-contact{
    gap:8px;

    margin-bottom:16px;
  }

  .footer-social{
    gap:10px;

    margin-bottom:16px;
  }

  .footer-social a{
    width:38px;
    height:38px;
  }

  .footer-social a i{
    font-size:14px;
  }

  .footer p,
  .footer span,
  .footer a{
    word-break:break-word;
  }

}


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

@media(max-width:480px){

  .nav-inner{
    gap:12px;
  }

  .site-logo{
    height:32px;
  }

  .mobile-menu{
    padding:20px 16px;
  }

  .tv-study-popup{
    padding:16px;
  }

  .tv-study-popup-box{
    padding:26px 22px;

    border-radius:22px;
  }

  .tv-study-popup-title{
    font-size:24px;
  }

}