/* =========================================================
   STEP2ENGLISH - VOCAB GLOBAL V6 STRONG FLOW
   Card 1 -> Question -> Reverse Card -> Reverse Question
========================================================= */

.s2e-vocab-app,
.s2e-vocab-app *{ box-sizing:border-box !important; }

.s2e-vocab-app{
  --s2e-blue-1:#0d1f5c;
  --s2e-blue-2:#0f57c6;
  --s2e-blue-3:#10c2ff;
  --s2e-text:#17335d;
  --s2e-border:#d9e7fb;
  --s2e-orange:#ffb24c;
  --s2e-orange-2:#fff7ea;
  width:min(100%, 740px) !important;
  margin:14px auto !important;
  direction:rtl !important;
  font-family:Tahoma, Verdana, Arial, sans-serif !important;
  color:var(--s2e-text) !important;
}

.s2e-vocab-shell{
  background:linear-gradient(180deg,#fbfdff 0%, #f2f7ff 100%) !important;
  border:1px solid var(--s2e-border) !important;
  border-radius:28px !important;
  overflow:hidden !important;
  box-shadow:0 16px 34px rgba(10,45,110,.10) !important;
}

.s2e-vocab-head{
  background:linear-gradient(135deg,var(--s2e-blue-1) 0%, var(--s2e-blue-2) 65%, #2d87ea 100%) !important;
  padding:12px !important;
  color:#fff !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:8px !important;
  align-items:center !important;
}

.s2e-vocab-day,
.s2e-vocab-count{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:900 !important;
}

.s2e-vocab-count{ justify-self:end !important; }
.s2e-vocab-title{
  grid-column:1 / -1 !important;
  text-align:center !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  color:#fff !important;
  margin-top:2px !important;
}

.s2e-vocab-card{
  padding:16px 14px 14px !important;
}

.s2e-vocab-main{
  text-align:center !important;
  color:#0d47a1 !important;
  font-size:74px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
  margin:0 0 10px !important;
  word-break:break-word !important;
}

.s2e-vocab-listen-row{
  display:flex !important;
  justify-content:center !important;
  margin:0 0 14px !important;
}

.s2e-vocab-btn,
.s2e-vocab-option,
.s2e-vocab-close{
  border:none !important;
  cursor:pointer !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  outline:none !important;
  -webkit-tap-highlight-color:transparent !important;
}

.s2e-vocab-btn,
.s2e-vocab-close{
  min-height:60px !important;
  padding:10px 14px !important;
  border-radius:22px !important;
  font-size:17px !important;
  font-weight:900 !important;
  box-shadow:0 6px 0 rgba(11,48,112,.10), 0 10px 18px rgba(6,30,86,.08) !important;
  transition:transform .16s ease, filter .16s ease !important;
}

.s2e-vocab-btn:active,
.s2e-vocab-close:active,
.s2e-vocab-option:active{ transform:translateY(1px) !important; }

.s2e-vocab-btn-main{
  color:#fff !important;
  background:linear-gradient(180deg,#002867 0%, #004e9f 55%, #10c2ff 100%) !important;
  border:2px solid #8be8ff !important;
}

.s2e-vocab-btn-lite,
.s2e-vocab-close{
  color:var(--s2e-text) !important;
  background:linear-gradient(180deg,#ffffff 0%, #f5f8ff 100%) !important;
  border:2px solid #dbe7fb !important;
}

.s2e-vocab-btn .ar,
.s2e-vocab-btn .en{
  display:block !important;
  line-height:1.05 !important;
  text-align:center !important;
}
.s2e-vocab-btn .ar{ font-size:19px !important; font-weight:900 !important; }
.s2e-vocab-btn .en{ font-size:11px !important; font-weight:700 !important; opacity:.92 !important; margin-top:5px !important; }

.s2e-vocab-btn-next{ animation:s2ePulseSoft 2.25s ease-in-out infinite !important; }
.s2e-vocab-listen{ min-width:150px !important; animation:s2ePulseListen 2s ease-in-out infinite !important; }
.s2e-vocab-btn.is-speaking{ filter:brightness(1.06) !important; }
.s2e-vocab-btn.is-disabled{ opacity:.46 !important; pointer-events:none !important; animation:none !important; }

.s2e-vocab-subwrap{
  display:flex !important;
  justify-content:center !important;
  margin:0 0 10px !important;
}

.s2e-vocab-sub{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:72px !important;
  padding:10px 20px !important;
  border-radius:22px !important;
  border:3px solid var(--s2e-orange) !important;
  background:linear-gradient(180deg,#ffffff 0%, var(--s2e-orange-2) 100%) !important;
  color:#7b4a00 !important;
  font-size:38px !important;
  line-height:1.06 !important;
  font-weight:900 !important;
  text-align:center !important;
  word-break:break-word !important;
  box-shadow:0 8px 18px rgba(255,178,76,.20) !important;
}

.s2e-vocab-arabic{
  text-align:center !important;
  color:#6a7690 !important;
  direction:rtl !important;
  font-size:28px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  margin:0 0 14px !important;
}

.s2e-vocab-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  direction:ltr !important;
}

/* Modal */
.s2e-vocab-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:none !important;
  background:rgba(8,22,56,.82) !important;
  backdrop-filter:blur(7px) !important;
  -webkit-backdrop-filter:blur(7px) !important;
}
.s2e-vocab-modal.is-open{ display:block !important; }

.s2e-vocab-modal-inner{
  width:100vw !important;
  height:100vh !important;
  background:linear-gradient(180deg,#f8fbff 0%, #eef5ff 100%) !important;
  display:flex !important;
  flex-direction:column !important;
}

.s2e-vocab-modal-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  direction:ltr !important;
  padding:12px !important;
  background:linear-gradient(135deg,var(--s2e-blue-1) 0%, var(--s2e-blue-2) 60%, #2d87ea 100%) !important;
}

.s2e-vocab-modal-count{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:8px 16px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:900 !important;
}

.s2e-vocab-close{
  min-height:48px !important;
  min-width:118px !important;
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:none !important;
}

.s2e-vocab-modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:14px !important;
  overflow:auto !important;
}

.s2e-vocab-question-card{
  max-width:760px !important;
  margin:0 auto !important;
  border:1px solid var(--s2e-border) !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%) !important;
  box-shadow:0 10px 26px rgba(11,48,112,.06) !important;
  padding:14px !important;
}

.s2e-vocab-question{
  text-align:left !important;
  direction:ltr !important;
  color:#17335d !important;
  font-size:28px !important;
  line-height:1.32 !important;
  font-weight:900 !important;
  margin:0 0 12px !important;
}

.s2e-vocab-highlight{
  display:inline-block !important;
  padding:2px 10px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#fff5b9 0%, #ffe082 100%) !important;
  border:2px solid #ffd24d !important;
  color:#7a4a00 !important;
  box-shadow:0 5px 12px rgba(255,193,7,.18) !important;
}

.s2e-vocab-options{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
}

.s2e-vocab-option{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  min-height:64px !important;
  padding:10px 14px !important;
  text-align:left !important;
  direction:ltr !important;
  border-radius:20px !important;
  border:2px solid #dbe7fb !important;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%) !important;
  box-shadow:0 6px 14px rgba(11,48,112,.04) !important;
}

.s2e-vocab-option-letter{
  flex:0 0 42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#f5f9ff 0%, #edf4ff 100%) !important;
  border:2px solid #dfeafa !important;
  color:#184b9e !important;
  font-size:19px !important;
  font-weight:900 !important;
}

.s2e-vocab-option-text{
  flex:1 1 auto !important;
  color:#17335d !important;
  font-size:18px !important;
  font-weight:900 !important;
}

.s2e-vocab-option.correct{
  background:linear-gradient(180deg,#eefbff 0%, #e5f7ff 100%) !important;
  border-color:#56b8ff !important;
}
.s2e-vocab-option.correct .s2e-vocab-option-letter{
  background:linear-gradient(180deg,#0f57c6 0%, #16b8ff 100%) !important;
  border-color:#0f57c6 !important;
  color:#fff !important;
}
.s2e-vocab-option.wrong{
  background:linear-gradient(180deg,#fff5f5 0%, #ffeded 100%) !important;
  border-color:#f1b5b5 !important;
}
.s2e-vocab-option.dim{ opacity:.72 !important; }

.s2e-vocab-result{
  margin-top:12px !important;
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  border-radius:18px !important;
  border:1px solid #dbe7fb !important;
  background:linear-gradient(180deg,#fbfdff 0%, #f5f8ff 100%) !important;
  color:#21456f !important;
  font-size:20px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  padding:10px 12px !important;
}
.s2e-vocab-result.bad{ color:#a82727 !important; }

.s2e-vocab-modal-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:12px !important;
  direction:ltr !important;
}

body.s2e-vocab-lock{ overflow:hidden !important; }

@keyframes s2ePulseListen{
  0%,100%{ transform:scale(1); box-shadow:0 6px 0 rgba(11,48,112,.10), 0 10px 18px rgba(6,30,86,.08); }
  50%{ transform:scale(1.03); box-shadow:0 7px 0 rgba(11,48,112,.11), 0 12px 20px rgba(6,30,86,.10); }
}
@keyframes s2ePulseSoft{
  0%,100%{ transform:scale(1); box-shadow:0 6px 0 rgba(11,48,112,.10), 0 10px 18px rgba(6,30,86,.08); }
  50%{ transform:scale(1.02); box-shadow:0 7px 0 rgba(11,48,112,.11), 0 12px 20px rgba(6,30,86,.10); }
}

@media (max-width:768px){
  .s2e-vocab-app{ width:min(100%, 96vw) !important; }
  .s2e-vocab-head{ padding:10px !important; }
  .s2e-vocab-day,
  .s2e-vocab-count,
  .s2e-vocab-modal-count{ min-height:34px !important; padding:7px 13px !important; font-size:16px !important; }
  .s2e-vocab-title{ font-size:17px !important; }
  .s2e-vocab-card{ padding:12px !important; }
  .s2e-vocab-main{ font-size:56px !important; margin-bottom:8px !important; }
  .s2e-vocab-listen{ min-width:132px !important; }
  .s2e-vocab-sub{ min-height:64px !important; font-size:30px !important; padding:10px 16px !important; border-radius:20px !important; }
  .s2e-vocab-arabic{ font-size:22px !important; margin-bottom:12px !important; }
  .s2e-vocab-btn,
  .s2e-vocab-close{ min-height:54px !important; border-radius:20px !important; padding:8px 10px !important; }
  .s2e-vocab-btn .ar{ font-size:17px !important; }
  .s2e-vocab-btn .en{ font-size:10px !important; margin-top:4px !important; }
  .s2e-vocab-modal-head{ padding:10px !important; }
  .s2e-vocab-close{ min-width:108px !important; min-height:44px !important; }
  .s2e-vocab-modal-body{ padding:10px !important; }
  .s2e-vocab-question-card{ padding:10px !important; border-radius:22px !important; }
  .s2e-vocab-question{ font-size:24px !important; line-height:1.28 !important; margin-bottom:10px !important; }
  .s2e-vocab-option{ min-height:58px !important; padding:8px 10px !important; border-radius:18px !important; }
  .s2e-vocab-option-letter{ flex:0 0 38px !important; min-height:38px !important; font-size:18px !important; }
  .s2e-vocab-option-text{ font-size:16px !important; }
  .s2e-vocab-result{ font-size:18px !important; min-height:44px !important; }
}