/* =========================================================
   PROVE EDUCATIONAL CONSULTANCY
   Popup + Updates + Banner Styles
   ========================================================= */

/* ============ TOP ANNOUNCEMENT BANNER ============ */
.pec-banner{
  position:relative;
  background:linear-gradient(135deg,#0b1f52 0%,#1a3fa0 100%);
  color:#fff;
  padding:11px 44px 11px 20px;
  font-size:13.5px;
  font-weight:600;
  text-align:center;
  letter-spacing:.2px;
  z-index:98;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  animation:pecSlideDown .4s ease;
}
@keyframes pecSlideDown{
  from{transform:translateY(-100%);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
.pec-banner.hidden{display:none;}
.pec-banner.yellow{
  background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%);
  color:#0b1f52;
}
.pec-banner.green{
  background:linear-gradient(135deg,#16a34a 0%,#22c55e 100%);
  color:#fff;
}
.pec-banner a{
  color:inherit;
  text-decoration:none;
  font-weight:800;
  background:rgba(255,255,255,.18);
  padding:5px 14px;
  border-radius:50px;
  transition:all .18s ease;
  white-space:nowrap;
  font-size:12.5px;
}
.pec-banner a:hover{
  background:rgba(255,255,255,.32);
  transform:translateY(-1px);
}
.pec-banner .close-banner{
  position:absolute;
  right:10px;top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.16);
  border:none;
  color:inherit;
  width:26px;height:26px;
  border-radius:50%;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s ease;
  font-family:inherit;
}
.pec-banner .close-banner:hover{background:rgba(255,255,255,.3);}

/* ============ POPUP OVERLAY ============ */
.pec-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(11,31,82,.7);
  backdrop-filter:blur(6px);
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.pec-popup-overlay.show{
  opacity:1;
  visibility:visible;
}

/* ============ POPUP BOX ============ */
.pec-popup{
  background:#fff;
  border-radius:20px;
  max-width:480px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 30px 80px rgba(11,31,82,.4);
  position:relative;
  transform:translateY(30px) scale(.94);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.pec-popup-overlay.show .pec-popup{
  transform:translateY(0) scale(1);
}

/* Colored top strip */
.pec-popup-header{
  padding:28px 28px 22px;
  background:linear-gradient(135deg,#0b1f52 0%,#1a3fa0 100%);
  color:#fff;
  border-radius:20px 20px 0 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.pec-popup-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,193,7,.2), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(227,30,36,.15), transparent 50%);
  pointer-events:none;
}
.pec-popup.yellow .pec-popup-header{
  background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%);
  color:#0b1f52;
}
.pec-popup.green .pec-popup-header{
  background:linear-gradient(135deg,#16a34a 0%,#22c55e 100%);
}
.pec-popup-icon{
  font-size:44px;
  line-height:1;
  margin-bottom:10px;
  position:relative;
  z-index:2;
  display:block;
}
.pec-popup-title{
  font-size:21px;
  font-weight:900;
  letter-spacing:-.3px;
  margin-bottom:6px;
  position:relative;
  z-index:2;
  line-height:1.25;
}

/* Body */
.pec-popup-body{
  padding:24px 28px 26px;
  text-align:center;
}
.pec-popup-message{
  font-size:14.5px;
  color:#5b6480;
  line-height:1.7;
  margin-bottom:22px;
}

/* Buttons */
.pec-popup-btns{
  display:flex;
  gap:10px;
  flex-direction:column;
}
.pec-popup-primary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(135deg,#1a3fa0 0%,#2a5bd7 100%);
  color:#fff;
  text-decoration:none;
  padding:14px 24px;
  border-radius:11px;
  font-size:15px;
  font-weight:800;
  font-family:inherit;
  border:none;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 8px 22px rgba(26,63,160,.32);
  letter-spacing:.2px;
}
.pec-popup-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(26,63,160,.45);
}
.pec-popup.yellow .pec-popup-primary{
  background:linear-gradient(135deg,#0b1f52 0%,#1a3fa0 100%);
}
.pec-popup-secondary{
  background:transparent;
  border:none;
  color:#5b6480;
  padding:10px;
  font-size:13.5px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .18s ease;
}
.pec-popup-secondary:hover{color:#1a1f36;}

/* Close button */
.pec-popup-close{
  position:absolute;
  top:12px;right:12px;
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .18s ease;
  z-index:5;
  font-family:inherit;
}
.pec-popup.yellow .pec-popup-close{
  background:rgba(11,31,82,.15);
  border-color:rgba(11,31,82,.2);
  color:#0b1f52;
}
.pec-popup-close:hover{
  background:rgba(255,255,255,.35);
  transform:rotate(90deg);
}
.pec-popup.yellow .pec-popup-close:hover{
  background:rgba(11,31,82,.25);
}

/* ============ UPDATES SECTION (inline on pages) ============ */
.updates-section{
  padding:70px 0;
  background:#fff;
}
.updates-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 40px;
}
.updates-head .eyebrow{
  display:inline-block;
  font-size:12px;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;
  color:#1a3fa0;margin-bottom:10px;
}
.updates-head h2{
  font-size:clamp(24px,3.4vw,34px);
  font-weight:800;letter-spacing:-.6px;
  line-height:1.2;margin-bottom:10px;
}
.updates-head p{font-size:15px;color:#5b6480;}

.updates-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
}
.update-card{
  background:#fff;
  border:1px solid #e2e6f0;
  border-radius:14px;
  padding:22px;
  transition:all .25s ease;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.update-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(11,31,82,.12);
  border-color:transparent;
}
.update-card.featured{
  border-color:#1a3fa0;
  background:linear-gradient(135deg,#f8faff 0%,#ffffff 60%);
}
.update-card.featured::after{
  content:"FEATURED";
  position:absolute;
  top:0;right:0;
  background:linear-gradient(135deg,#1a3fa0,#2a5bd7);
  color:#fff;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:1.2px;
  padding:5px 12px;
  border-bottom-left-radius:10px;
}
.update-tag{
  display:inline-block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:50px;
  margin-bottom:12px;
  align-self:flex-start;
}
.update-tag.korea{background:#fee2e2;color:#c60c30;}
.update-tag.uk{background:#dbeafe;color:#012169;}
.update-tag.yellow{background:#fef3c7;color:#92400e;}
.update-tag.green{background:#dcfce7;color:#166534;}
.update-tag.blue{background:#dbeafe;color:#1e40af;}
.update-tag.usa{background:#e0e7ff;color:#1e3a8a;}
.update-tag.japan{background:#fce7f3;color:#9d174d;}

.update-date{
  font-size:11.5px;
  color:#5b6480;
  font-weight:600;
  margin-bottom:8px;
  letter-spacing:.3px;
}
.update-title{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.2px;
  line-height:1.35;
  margin-bottom:8px;
  color:#1a1f36;
}
.update-excerpt{
  font-size:13.5px;
  color:#5b6480;
  line-height:1.65;
  flex:1;
  margin-bottom:14px;
}
.update-link{
  font-size:12.5px;
  font-weight:800;
  color:#1a3fa0;
  letter-spacing:.3px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:gap .18s ease;
}
.update-card:hover .update-link{gap:9px;}

.updates-loading{
  grid-column:1/-1;
  text-align:center;
  padding:40px;
  color:#5b6480;
  font-size:14px;
}

/* ============ RESPONSIVE ============ */
@media (max-width:640px){
  .pec-popup-header{padding:24px 22px 18px;}
  .pec-popup-body{padding:20px 22px 22px;}
  .pec-popup-title{font-size:18px;}
  .pec-popup-icon{font-size:38px;}
  .pec-banner{font-size:12px;padding:10px 40px 10px 14px;}
  .pec-banner a{font-size:11.5px;padding:4px 11px;}
  .updates-grid{grid-template-columns:1fr;}
}

/* =========================================================
   HIGHLIGHT TICKER (Scrolling News Strip)
   ========================================================= */
.pec-ticker{
  position:relative;
  background:linear-gradient(90deg,#c60c30 0%,#e31e24 100%);
  color:#fff;
  padding:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  height:40px;
  font-size:13px;
  font-weight:600;
  z-index:97;
}
.pec-ticker.hidden{display:none;}
/* The "BREAKING" label: solid, above the moving text */
.pec-ticker::before{
  content:"⚡ BREAKING";
  position:relative;
  z-index:2;
  background:#9f0a26;
  box-shadow:6px 0 10px -4px rgba(0,0,0,.35);
  padding:0 14px;
  height:100%;
  display:flex;
  align-items:center;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:1.5px;
  flex-shrink:0;
  white-space:nowrap;
}
/* Messages only show in the area to the right of the label */
.pec-ticker-viewport{
  position:relative;
  flex:1;
  min-width:0;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.pec-ticker-track{
  display:flex;
  align-items:center;
  width:max-content;
  white-space:nowrap;
  will-change:transform;
  /* Moves left to right */
  animation:pecScrollRight var(--ticker-duration, 30s) linear infinite;
}
.pec-ticker:hover .pec-ticker-track{animation-play-state:paused;}
.pec-ticker-item{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  padding-right:22px;
}
.pec-ticker-item::after{
  content:"●";
  color:rgba(255,255,255,.45);
  font-size:7px;
  margin-left:22px;
}

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

@media (max-width:640px){
  .pec-ticker{height:36px;font-size:11.5px;}
  .pec-ticker::before{font-size:9.5px;padding:0 10px;}
  .pec-ticker-item{padding-right:16px;}
  .pec-ticker-item::after{margin-left:16px;}
}
@media (prefers-reduced-motion:reduce){
  .pec-ticker-track{animation:none;}
}

/* =========================================================
   HIGHLIGHTED UPDATE CARD (Featured Glow)
   ========================================================= */
.update-card.highlight{
  position:relative;
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#f59e0b,#e31e24,#1a3fa0) border-box;
  box-shadow:0 8px 24px rgba(227,30,36,.14);
}
.update-card.highlight::before{
  content:"🔥 HOT";
  position:absolute;
  top:-1px;right:-1px;
  background:linear-gradient(135deg,#f59e0b,#e31e24);
  color:#fff;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:1.2px;
  padding:5px 12px;
  border-radius:0 12px 0 10px;
  animation:pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(227,30,36,.4);}
  50%{box-shadow:0 0 0 8px rgba(227,30,36,0);}
}
.update-card.highlight .update-title{
  background:linear-gradient(135deg,#0b1f52,#1a3fa0);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* =========================================================
   EXIT-INTENT POPUP (Special Style)
   ========================================================= */
.pec-popup.exit-intent .pec-popup-header{
  background:linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%);
  color:#0b1f52;
}
.pec-popup.exit-intent .pec-popup-icon{
  font-size:52px;
  animation:waveHand 1.5s ease-in-out infinite;
  transform-origin:70% 70%;
}
@keyframes waveHand{
  0%,100%{transform:rotate(0deg);}
  10%{transform:rotate(14deg);}
  20%{transform:rotate(-8deg);}
  30%{transform:rotate(14deg);}
  40%{transform:rotate(-4deg);}
  50%{transform:rotate(10deg);}
  60%,100%{transform:rotate(0deg);}
}
.pec-popup.exit-intent .pec-popup-primary{
  background:linear-gradient(135deg,#e31e24 0%,#c60c30 100%);
  box-shadow:0 8px 22px rgba(227,30,36,.4);
}
.pec-popup.exit-intent .pec-popup-primary:hover{
  box-shadow:0 14px 30px rgba(227,30,36,.55);
}