/* Basic Smartech-themed styles for test + results */
:root{
    --accent:#2b7a2b;
    --muted:#666;
    --bg:#ffffff;
    --card:#f8f8f8;
    --danger:#c0392b;
}
	#fullscreenBtn {
  background: white;
  color: Black;
  border-radius: 5px;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: bold;
}

#fullscreenBtn:hover {
  background: #0056b3;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
    margin:0;
    background:var(--bg);
    color:#222;
    font-family: "Arial", serif;
}

.site-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 20px;
    border-bottom:2px solid #eee;
    background:linear-gradient(90deg,#fff,#fbfffb);
}
.logo { height:72px; }

.main-nav a {
    margin:0 10px;
    text-decoration:none;
    color:white;
    font-weight:600;
}
.container {
    max-width:85%;
    margin:18px auto;
	background: #FFFAAE;
    padding:12px;
}
.container2 {
    max-width:80%;
    margin:18px auto;
	
	
    padding:12px;
}

/* Test section */
.header-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}
.left-meta, .center-meta, .right-meta { display:flex; align-items:center; gap:10px; }
#timer { font-weight:700; color:var(--danger); }
#current-chunk { font-size:1.3rem; color:var(--muted); text-align:center; color:red;font-weight:bold}

/* Make both boxes identical */
.reference-outer,
.typing-input {
  width: 100%;
  height: 220px;          /* <-- set the size you want */
  box-sizing: border-box; /* include padding + border in size */
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  	line-height:1.8;
    font-size:1.65rem;
   	 font-family: 'Arial', serif;
  overflow-y: auto;       /* scroll if text overflows */
   resize: none;
  outline: none;
}

/* Keep formatting of reference text */
.paragraph {
  white-space: pre-wrap;
}



/* Buttons */
.primary-btn {
    background:#ff0018;
    color:#fff;
    border:none;
    padding:8px 14px;
    border-radius:6px;
    cursor:pointer;
}
.small-btn {
    background:#fff;
    border:1px solid #ddd;
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
}
.link-btn {
    background:transparent;
    color:var(--accent);
    border:0;
    cursor:pointer;
}

/* Results */
.results-section { margin-top:16px; }
.results-table { width:100%; border-collapse:collapse; margin-top:8px; }
.results-table th, .results-table td {
    border:1px solid #e6e6e6;
    padding:8px;
    text-align:left;
}
.results-table th { background:#f4f8f4; font-weight:700; color:#1b5d1b; }

.error-highlight { margin-top:12px; padding:10px; background:#fff8f8; border:1px solid #f2dede; border-radius:6px; }

/* highlight classes used by engine */
.correct { color:#1aab1a; font-weight:600; }
.wrong { color:#c0392b; font-weight:600; }
.given { color:#050000;}

/* stats history */
.stats-history-table { width:100%; border-collapse:collapse; margin-top:10px; }
.stats-history-table th, .stats-history-table td { border:1px solid #eee; padding:8px; }
.pass-result { color:green; font-weight:700; }
.fail-result { color:#c0392b; font-weight:700; }

/* popups */
.popup {
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,0.35);
}
.popup-inner {
    background:#fff; padding:18px; border-radius:8px; min-width:260px; text-align:center;
}
.popup-actions { margin-top:8px; display:flex; gap:8px; justify-content:center; }

/* misc */
.error-message { background:#fdecea; border:1px solid #f5c6cb; padding:8px; margin-bottom:8px; border-radius:6px; }
/* =======================
   RESULT TABLE DESIGN
   ======================= */

#results {
    margin-top: 25px;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

#results h2 {
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #222;
    text-align: center;
    font-family: "Arial", serif;
}

/* Table */
#results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    font-family: "Arial", serif;
    text-align: left;
}

/* Header Row */
#results-table thead th {
    background: #004688;
    color: white;
    padding: 12px;
    font-size: 15px;
    text-transform: uppercase;
}

/* Table Row Styling */
#results-table tbody td {
    padding: 10px 12px;
    border: 1px solid #ddd;
}

/* Zebra effect rows like PSSSB answer sheet */
#results-table tbody tr:nth-child(even) {
    background-color: #f5f1e7;
}

#results-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Notes Section */
#results-notes {
    margin-top: 10px;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
}

/* Pass/Fail styles */
#exam-note {
    color: #b80000;
    font-weight: bold;
}

#pass-note {
    color: #007b00;
    font-weight: bold;
}

/* Buttons Row */
#button-row button,
#refresh-btn-2,
#practice-another-btn-2 {
    font-family: "Arial", serif;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    font-size: 15px;
}

/* Primary Buttons */
#refresh-btn-2,
#practice-another-btn-2 {
    background: #0055b8;
    color: white;
}

#refresh-btn-2:hover,
#practice-another-btn-2:hover {
    background: #003f8a;
}

/* Error text / Highlight */
#error-highlight {
    margin-top: 10px;
    padding: 10px;
    background: ;
    border: 1px solid #f5ca49;
    color: #7d5b00;
    border-radius: 5px;
}

.top-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.left-meta button,
.right-meta button {
    margin-left: 5px;
}

.small-btn {
    padding: 6px 10px;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    background: Black;
    color: white;
}
.small-btn:hover {
    background: #003b84;
}










body { font-family: 'Arial', serif; margin: 0; background: #f8f9fa; }
nav { background: #00295f; padding: 10px 10px;}
nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: left; }
nav ul li { margin-right: 5px; }
nav ul li a, nav ul li button {   color: white;
    text-decoration: none;
    margin: 0 12px;
    font-size: 16px;
    transition: 0.3s;
    padding: 6px 0px;
    border-radius: 6px;
	font-weight:bold;}
nav ul li a:hover, nav ul li button:hover { background: white;
    color: #00295f; }
.header { display: flex; justify-content: space-between; padding: 10px 20px; align-items: center; }
header img { height: 80px; }
.container { width: 90%; margin: 20px auto; }
.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0px 0px 10px rgba(0,0,0,0.15); margin-bottom: 20px; }
.card h2 { color: #00295f; border-left: 6px solid #00295f; padding-left: 10px; }
textarea, input { width: 100%; padding: 8px; margin-top: 6px; border-radius: 6px; border: 1px solid #ccc; }
button { margin-top: 8px; padding: 8px 14px; border: none; background: black; color: white; border-radius: 5px; cursor: pointer; }
button:hover { background: black; }
.delete-btn { background: #d40000; } .delete-btn:hover { background: #9b0000; }
.hidden { display: none; }
#loginModal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; }
.modal-content { background: white; padding: 20px; border-radius: 5px; text-align: center; }

/* ===== Transparent Intro Styles ===== */
#intro-screen {
  position: fixed;
  inset: 0;
  background: transparent; /* no background at all */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  animation: fadeOut 3s ease 2.8s forwards; /* fades away after 3s */
  pointer-events: none; /* allows clicking elements below */
}
.intro-text {
  font-family: 'Arial', serif;
  font-size: 2.2rem;
  color: #00295f;
  text-shadow: 0 2px 10px rgba(0,0,0,0.15);
  position: relative;
  z-index: 2;
  animation: fadeInText 1s ease-in-out;
}
/* Floating letters */
.letters-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.letter {
  position: absolute;
  color: #D4AF37;
  opacity: 0.8;
  font-family: 'Arial', serif;
  animation: floatLetters 3s linear forwards;
  user-select: none;
}
/* ===== Animations ===== */
@keyframes floatLetters {
  from { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  to { transform: translateY(-600px) scale(1.3) rotate(360deg); opacity: 0; }
}
@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; display: none; }
}
@keyframes fadeInText {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================= INTRO ================= */
#intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0px 8%;
  background: linear-gradient(to right, #fff, #f9f8f6);
  min-height: 80vh;
  overflow: hidden;
}
.intro-content { flex: 1; min-width: 300px; animation: fadeInLeft 1.2s ease; }
.intro-content h1 { font-size: 2.5rem; color: #222; margin-bottom: 10px; }
.highlight { color: #00295f; }
.subtitle { font-size: 1.2rem; color: #555; max-width: 500px; margin-bottom: 25px; line-height: 1.6; }
.intro-buttons { display: flex; gap: 15px; }
.btn { padding: 12px 25px; border-radius: 8px; font-weight: bold; text-decoration: none; font-size: 1rem; transition: all 0.3s ease; }
.gold-btn { background: #00295f; color: white; }
.gold-btn:hover { background: #000; color: white; }
.black-btn { background: black; color: white; }
.black-btn:hover { background: #00295f; color: #000; }
.intro-image { flex: 1; text-align: center; animation: fadeInRight 1.2s ease; }
.intro-image img { width: 85%; max-width: 400px; border-radius: 20px; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2)); }
/* ===== Animations ===== */
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
/* Responsive */
@media (max-width: 800px) {
  #intro { flex-direction: column; text-align: center; }
  .intro-content, .intro-image { animation: none; }
  .intro-content h1 { font-size: 2rem; }
  .subtitle { font-size: 1rem; }
  .intro-buttons { justify-content: center; }
}

/* ✨ Animation styles */
#tips-list li {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}
#tips-list li.visible {
  opacity: 1;
  transform: translateY(0);
}
/* ✨ Animation styles */
  
#tips-list li {
  
  opacity: 0;
  
  transform: translateY(20px);
  
  transition: all 0.6s ease;
  
}
  

  
#tips-list li.visible {
  
  opacity: 1;
  
  transform: translateY(0);
  
}