ul {
    list-style-image: url('/menu/images/tick-mark.png');
  }
ul:hover{
  color: #CB0858; /* Reddish*/
  }
 
  .a{
  color: #1705EC;
  }

.table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

 td, th {
    border: 1px solid #c7bebe;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #f3eded;
  }
  tr:nth-child(odd) {
    background-color: #f7dcdc;
  }
  
  /*  targets the last column specifically Translation on process-search.php index page search action form file*/ 
  /* on some page the last column is not translation but audio samples and other important stuff */
  /* not destroying other pages : can leave as is */
table td:last-child, 
table th:last-child {
    background-color: #e8f4fd; /* A soft blue to contrast the pinks */
    color: #1705EC;            /* Using existing blue '.a' color */
    font-weight: bold;
    border-left: 2px solid #CB0858; /* adds a vertical separator */
}

/* To maintain the 'striped' feel while highlighting the last column */
tr:nth-child(even) td:last-child {
    background-color: #dbeafe; /* Slightly darker blue for even rows */
}
 
 tr:nth-child(odd) td:last-child {
    background-color: #D4D3D2; /* turn to a grey background for white rows*/
}
 
 /* END NEW CODE*/
h1{
margin-top:6px;
  margin-bottom:6px;  
    color:blue;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    text-align: center;
  }

 h2{
    margin-top:4px;
  margin-bottom:4px;  

    color:rgb(45, 45, 77);
    font-family: 'Times New Roman', Times, serif;
    font-style:oblique;
    text-align: center;
  }

  h3{
      margin-top:4px;
  margin-bottom:4px;  
    color:rgb(229, 62, 76);
    font-family: 'Times New Roman', Times, serif;
    font-style:oblique;
    text-align: center;
  }
  
   h4{
      margin-top:4px;
  margin-bottom:4px;  
    color:rgb(208, 11, 57);
    font-family: 'Times New Roman', Times, serif;
    font-style:oblique;
    text-align: center;
  }
  
  h5{
      margin-top:4px;
  margin-bottom:4px;  
    color:rgb(6, 147, 143);
    font-family: 'Times New Roman', Times, serif;
    font-size:32px;
    font-style:oblique;
    text-align: center;
  }
  
  
  h6{
      margin-top:4px;
  margin-bottom:4px;  
    color:rgb(25, 4, 58);
    font-family: 'Times New Roman', Times, serif;
    font-size:24px;
    font-style:oblique;
    text-align: center;
  }
  
  .horizrule{
  background-color:white;
  color:#FA040F;
  }

/*  for radio check boxes */
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width:36px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
} 
/* small audio container */

/* Minimalist Audio Container */
.audio-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 300px; /* Prevents full-page spanning */
  margin: 5px 0;
}

.audio-wrapper audio {
  height: 32px; /* Slimmer player */
  width: 100%;  /* Fills the 300px container */
}

.audio-emoji {
  font-size: 1.2rem;
  line-height: 1;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* end radio check box */
  .word{
    color:rgb(6, 6, 237);
  }
    .adjective{
      color:rgb(12, 12, 63);
    }
    .adverb{
      
      color:rgb(230, 44, 44);
    }
    .verb{
        color:rgb(251, 97, 8);
    }
    .noun{
        color:rgb(16, 113, 9);
    }
    .pronoun{
        color:rgb(84, 5, 163);
    }
    .quantifier{
        color:rgb(241, 2, 126);
    }
    
    .comparator{
        color:rgb(152, 6, 6);
    }
    .possessive{
        color:rgb(5, 91, 70);
    }
    .example{
        color:rgb(4, 119, 128);
    }
    .engtranslate{
        color:rgb(19, 9, 216);
    }
    
    .turktranslate{
        color:rgb(230, 15, 37);
    }
.showdate{
  color: rgb(9, 9, 232);
}
 .showtags{
  background-color:#dc1616;
  color:#f5f4f4;
 }

.showturktags{
    margin-top: 25px; /* have a little separation from elements above */
    background-color:#F20A1A; /* show in Turkish red colour*/
    color:#f5f4f4;
}
.showengtags{
    margin-top:25px;
  background-color:#1B2E79; /* show in English  blue colour */
  color:#f5f4f4;
 }
 .showwhen{
  background-color: #CFD1CE;
  color: #1705EC;
 }
 
 .english{
  background-color: #f6f7f1;
  color: #3614e4;
  font-size: xx-large;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  
 }

 .turkish{
  background-color: #f9f9f1;
  color: #D30849;
  font-size: xx-large;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 }
 
/* menu navbar */
.menunavbar {
  position: static; 
  width: 100%;
  height: auto; 
  margin: 0;
  padding: 10px;
  background-color: #E30A17; /* Turkish Flag Red */
  border: 2px solid rgb(219, 219, 231);
  font-style: oblique;
  font-size: 18px;
  text-align: center;
}

.menunavbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menunavbar li {
  display: inline-block;
  padding: 10px 20px;
  vertical-align: middle;
}

.menunavbar a {
  text-decoration: none;
  color: #FFF; 
  /* Transition removed */
} 

/* Hover effects removed */
.menunavbar a:hover {
  /* No color change or underline */
} 

.menunavbar img {
  vertical-align: middle;
  margin-left: 10px;
}
 
/* blue nav bar for English */
.engmenunavbar {
  position: static; 
  width: 100%;
  height: auto; 
  margin: 0;
  padding: 10px;
  background-color: #1B2E79; 
  border: 2px solid rgb(219, 219, 231);
  font-style: oblique;
  font-size: 18px;
  text-align: center;
}

.engmenunavbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.engmenunavbar li {
  display: inline-block;
  padding: 10px 20px;
  vertical-align: middle;
}

.engmenunavbar a {
  text-decoration: none;
  color: #FFF; 
  /* Transition removed */
} 

/* Hover effects removed */
.engmenunavbar a:hover {
  /* No color change or underline */
} 

.engmenunavbar img {
  vertical-align: middle;
  margin-left: 10px;
}

/*  smaller menu for info pages*/
.infopagenav{
  position: static; 
  top:12px;
  left: 2px;
  width: 560px;
  height: 220px; 
  margin-top: 2px;
  padding-top: 2px;
  background-color: #eb8861;
  border-style: double;
  border: rgb(106, 205, 227);
  font-style:italic;
  font-size: 24px;
  text-align: center;

}
.logsinsubsubmit{

  position: fixed !important; 
  top:12px !important; 
  right: 2px !important;
  width: 860px; 
  height: 100px;
  margin-top: 2px;
  padding-top: 2px;
  background-color: #ece6ab;
  border-style: double;
  border: rgb(230, 15, 37);
  font-style: oblique;
  font-size: 18px;
  text-align: left;
}
 .optionselected{

  color: rgb(228, 12, 12);
  font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    text-align: center;
  }

.questionanswers{

    position: fixed !important;
    top: 390px !important; 
    right: 880px !important;
    width: 960px;
    height: 320px;
    margin-top: 10px;
    padding-top: 10px;
    background-color: #F6F7CE;
    color:#1E1E19;
    border-style: double;
    border: red;
    font-style: oblique;
    font-size: 24px;
    text-align: center;
    overflow-y: scroll; 
    overflow-x: scroll; 

}

/* search results table */
  .result{
   position: fixed;
    top: 470px; 
    right: 1020px;
    width: 920px;
    height: 260px;
    margin-top: 10px;
    background-color: #d9e6f1;
    border-style: double;
    font-style: oblique;
    font-size: 24px;
    text-align: center;
    overflow-y: scroll; 
    overflow-x: scroll; 
}
 /* search status process search page */
  .search-results{
   position: fixed;
    top: 100px; 
    right: 220px;
    width: 920px;
    height: 66px;
    margin-top: 10px;
    background-color: #d9e6f1;
    color: #04048C; /* navyish blue */
    border-style: double;
    border-color: #EA0516; /* contrast red*/
    font-style: oblique;
    font-size: 24px;
    text-align: center;
    overflow-y: scroll; 
    overflow-x: scroll; 
}

/* for input checking process search page*/
 .search-input{
   position: fixed;
    top: 100px; 
    right: 1220px;
    width: 460px;
    height: 66px;
    margin-top: 10px;
    background-color: #05E3EA;
    color: #09046C; /* dark maueve purpley */
    border-style: double;
    border-color: #E9F704; /* contrast yellow*/
    font-style: oblique;
    font-size: 24px;
    text-align: center;
    overflow-y: scroll; 
    overflow-x: scroll; 
}
.videoshow{
  position: relative;
  top:-24px;
  left: 720px;
  width: 96%;
  height: 500px;
  margin-top: 2px;
  padding-top: 2px;
  background-color: #f7f8f9;
 
}
.frontrow{
  position:relative ;
  top:-100px ;
  left:620px;
  background-color: #f0e8e8 ;
 }
/* frontrow for about and other pages play videos in */
/* width and height set by video height width */

.longparas{
  background-color: #CFD1CE;
  color: #3614e4;
  text-align: left;
  font-size: 24px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: oblique;
}
 .messages{
    position: fixed !important;
    top: 1020px !important; 
    left: 100px !important;
    width: 90%;
    height: 140px;
    margin-top: 10px;
    padding-top: 10px;
    background-color: #d9e6f1;
    border-style: double;
    border: blue;
    font-style: oblique;
    font-size: 24px;
    text-align: center;
}
 .loginerrors{
   position: fixed; 
   left:calc(100% - 50%);
    width: 820px;
    height: 420px;
    margin-top: 10px;
    padding-top: 10px;
    background-color: #EEAEAD;
    border-style: double;
    border: blue;
    font-style: oblique;
    font-size: 24px;
    text-align: center;
   }
.searchmessages{
    position: relative;
    top: 40px ; 
    left: 660px;
    width: 340px;
    height: 64px;
    margin-top: 10px;
    padding-top: 20px;
    background-color: #d9e6f1;
    border-style: double;
    border: black;
    font-style: oblique;
    font-size: 24px;
    text-align: center;
   
}
.messagesdisplay{

  position: relative !important;
  top: 40px !important; 
  left: 550px !important;
  width: 80%;
  height: 280px;
  margin-top: 10px;
  padding-top: 10px;
  background-color: #dee2e5;
  color:#020000;
  border-style: double;
  border: black;
  font-style: oblique;
  font-size: 24px;
  text-align: center;
 
}
.games{
    position: relative !important;
    top: 160px !important; 
    left: 20px !important;
    width: 720px;
    height: 620px;
    margin-top: 10px;
    padding-top: 10px;
    background-color: #d9e6f1;;
    border-style: double;
    border: black;
    font-style: oblique;
    font-size: 24px;
    text-align: center;
}

.search-container {
  position: relative;
}

.theresults {
  position: absolute;
  margin-top: 20px;
  top: 100%;           /* directly below input */
  left: 0;
  width: 100%;
  max-height: 360px;
  background: #fff;
  z-index: 1000;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
/* footer below results */
.results-footer {
  margin-top: 8px;
  padding: 8px 0;
  border-top: 2px solid rgba(0,0,0,0.15);
}


.videoplay{
background-color:#fffeff;
}

.video{
background-color:#fdffff;
}


/* use for dictionary entries to play*/
.audio{
background-color:#CFD1CE;
}

.play{
background-color:#F8EAC6;
}

.reset{
background-color:#E0F7F1;
}
.videoreset{
  background-color:#c0eadf;
  color:#15140c;
  border: #CB0858;
  border-radius: 4px;
}

.videoreset:hover {
  background-color: #ce7272; /* pink */
  box-shadow: 0 4px 6px 0 rgba(51, 31, 87, 0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  color: white;
}
.error{
background-color:#FBF5F6;
color:#F90532;
}

.red-highlighter-text{
background-color:#E6E0DF;
color:#F90532;
font-size: 1.25em;
}
.translatebox{
    position: fixed !important;
    top: 164px !important; 
    left: 630px !important;
    width: 1920px;
    height: 34px;
    margin-top: 4px;
    background-color: #FCF9F9;
    color: #06096B; /* navy bluish   */
    border-style: double;
    border: blue;
    font-style: oblique;
    font-size: 32px;
    text-align: left;
}
.gameinstruct{
    position: fixed !important;
    top: 30px !important; 
    right: 1020px !important;
    width: 920px;
    height: 560px;
    margin-top: 4px;
    padding-top: 4px;
    background-color: #FCF9F9;
    color: #FC040F;
    border-style: double;
    border: blue;
    font-style: oblique;
    font-size: 24px;
    text-align: center;
    overflow-y: scroll; 
    overflow-x: scroll; 

}
.errorbox{
    position: relative !important;
    top: 20px !important; 
    right: 1220 !important;
    width: 880px;
    height: 560px;
    margin-top: 4px;
    padding-top: 4px;
    background-color: #FCF9F9;
    color: #FC040F;
    border-style: double;
    border: blue;
    font-style: oblique;
    font-size: 24px;
    text-align: center;
    overflow-y: scroll; 
    overflow-x: scroll; 
}
.errorbox:hover{
  color: #F5DDA1; /* very pale light pink*/
  box-shadow: 0 16px 16px 0 rgba(0,0,0,0.24), 0 24px 70px 0 rgba(0,0,0,0.19);
  color: white;
}

.gamebox{
    position: fixed !important;
    top: 480px !important; 
    left: 820px !important;
    width: 1820px;
    height: 920px;
    margin-top: 4px;
    padding-top: 4px;
    background-color: #FCF9F9;
    color: #1705EC;/* medium pale bluey blue */
    border-style: double;
    border: blue;
    font-style: oblique;
    font-size: 32px;
    text-align: center;
    overflow-y: scroll; 
    overflow-x: scroll; 
}

.gamebox:hover{
  color: #EC05AA; /* purple */
 
}
.submit{
  background-color: #04AA6D; /* Green */
  border-radius: 8px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.4s;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  font-size: 16px;
}

.submit:hover {
  background-color: #04AA6D; /* Green */
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  color: white;
}
/* 330px because was too big on mobile devices*/

.inputbox{
  width:330px; 
  height:26px;
  background-color: #FAFBCC; /* Light YELLOW*/
  border-radius: 4px;
  color: #1C1E1E;
  padding: 2px 2px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.6s;
   box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.19);
  font-size: 18px;
}


.yumasak-g-error {
  width: 100%;              /* Full available width */
  max-width: 100%;          /* Prevent overflow on mobile */
  
  min-height: 60px;         /* Reasonable default height */
  max-height: 140px;        /* Limit height */
  overflow-y: auto;         /* Vertical scroll when needed */
  
  background-color: #FAFBCC; /* Light yellow */
  
  border: 2px solid #F50729; /* Strong red border */
  border-radius: 4px;
  
  color: #1C1E1E;
  
  padding: 10px;            /* Better spacing */
  box-sizing: border-box;   /* Keeps padding inside width */
  
  text-align: center;
  display: block;
  
  font-size: 18px;          /* Slightly more balanced */
  line-height: 1.4;
  
  transition: all 0.3s ease;
  
  box-shadow: 0 2px 6px rgba(0,0,0,0.2),
              0 2px 4px rgba(0,0,0,0.19);
}
.passwordinput{

background-color: #FAE4E7; /* Light Pink*/
  border-radius: 8px;
  color: #FA040F;
  padding: 6px 6px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.8s;
   box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2), 0 8px 8px 0 rgba(0,0,0,0.19);
  font-size: 24px;
}

.loginsignup{

position:relative !important;
top:24px;
background-color: #FAE4E7; /* Light Pink*/
  border-radius: 8px;
  color: #FA040F;
  padding: 6px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.8s;
   box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2), 0 8px 8px 0 rgba(0,0,0,0.19);
  font-size: 24px;
}


/*  big lists */

.biglists {
  width: 92%;
  max-width: 98%; /*  limit how wide the card grows */
  background-color: white;
  margin: 0 auto; /* centre horizontally */
  padding: 2px;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.36s;
  box-shadow: 0 12px 4px 0 rgba(0, 0, 0, 0.2),
              0 8px 8px 0 rgba(0, 0, 0, 0.19);
  font-size: 22px;
}

.list-explain{
  width: 92%;
  max-width: 98%; /*  limit how wide the card grows */
  background-color: #F5DFDC;
  margin: 0 auto; /* centre horizontally */
  padding: 2px;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.36s;
  box-shadow: 0 12px 4px 0 rgba(0, 0, 0, 0.4),
              0 8px 8px 0 rgba(0, 0, 0, 0.23);
 
  font-family: "San-serif", Times, serif, Courier;
 
  font-size: 20px;
    
}

/* turkish <h2> text for help page */

.tr-text {
    color: #cc0000;         /* Turkish red */
    font-size: 0.9em;       /* smaller than the English */
    font-style: italic;     /* Italicize to differentiate */
    margin-left: 10px;      /* Gap between English and Turkish */
    font-weight: normal;    /* Less bold than the main title */
}


/* Main help answer container */
.search-suggestion {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  background-color: #FFF8F7;
  margin: 32px 0;  /* vertical spacing between answers */
  padding: 24px 32px;

  text-align: left;
  text-decoration: none;

  transition: box-shadow 0.36s ease;

  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.18),
    0 4px 6px rgba(0, 0, 0, 0.12);

  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6;

  border-left: 6px solid #d84a3a; /* visual highlight */
  scroll-margin-top: 120px;       /* prevents anchor jump hiding header */
}



/* Hover feedback */
.search-suggestion:hover {
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Header inside each help box */
.search-suggestion h2 {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

/* Body text */
.search-suggestion p {
  margin: 0;
  color: #444;
}

/* Key points / common confusion block */
.search-suggestion .key-points {
  margin-top: 20px;
  padding: 16px 20px;

  background-color: #fff3d6;      /* soft highlight */
  border-left: 6px solid #f0a500;  /* warning / attention color */

  font-size: 17px;
  line-height: 1.6;
  color: #333;
}

/* Optional heading inside key-points */
.search-suggestion .key-points h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #8a5a00;
}

/* List styling inside key-points */
.search-suggestion .key-points ul {
  margin: 8px 0 0 18px;
  padding: 0;
}

.search-suggestion .key-points li {
  margin-bottom: 6px;
}

/* new key points highlighter */

.search-suggestion .key-points::before {
  content: "🔑 KEY POINTS - ANA NOKTALAR";
  display: inline-block;

  background-color: #F50541;
  color: #fff;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;

  padding: 4px 10px;
  border-radius: 12px;

  margin-bottom: 10px;
}

/* normal paragraph - Mobile Responsive */
.search-suggestion .normal-paragraph {
    margin-top: 4px;
    padding: 16px;
    background-color: #F0F4C3;
    color: #102A43;
    line-height: 1.4;
    display: block;
    
    /* Default size for desktop (approx 22px) */
    font-size: 1.375rem; 
}

/* Scalable rule for screens smaller than 600px */
@media (max-width: 600px) {
    .search-suggestion .normal-paragraph {
        font-size: 1.1875rem; /* Scales down to ~19px on phones */
        padding: 12px;        /* Slightly tighter padding for small screens */
    }
}

/* FOOTER STUFF */
.footer{
background-color: #0F0AAF; /* blue*/
  border-radius: 4px;
  margin-left:2%;
  color: #1C1E1E;
  padding: 2px 2px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  width:100%;
 font-size: 18px;

}

.footer-social{
  background-color: #000000; /*black black */
  color: white;
  
}

.footer-stripe{
  background-color: #2D0685; /* bluey blacky black black */
  color:white;
  font-family: 'Verdana', 'Georgia', 'Times New Roman', Times, serif;
  text-align:center;
  text-align:center;
}
.footer-business{
  background-color:black;
  color:white;
}

.footer-business, .footer-stripe {
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    color: white;
    background-color: black;
    padding: 20px;
}
.separator{
background-color: #e4e7eb; /* Blue*/
border-radius: 4px;
  margin-left:4%;
  color: #1C1E1E;
  padding: 2px 2px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.8s;
   box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2), 0 8px 8px 0 rgba(0,0,0,0.19);
  width:34%;
}
.contact{
background-color: #D9F0CE; /* pale green*/
  border-radius: 4px;
  margin-left:2%;
  color: #1C1E1E;
  padding: 2px 2px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  width:30%;
 font-size: 18px;
}
.adcontact{
background-color: #08E4D7; /*  pale blue */
  border-radius: 4px;
  margin-left:2%;
  color: #0D0101; /* nearly black  */
  padding: 2px 2px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  width:30%;
 font-size: 18px;
}
.submissions{
background-color: #0538AD; /* dark blue*/
  border-radius: 4px;
  margin-left:2%;
  color: #EFF1F6; /* off white */
  padding: 2px 2px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  width:30%;
 font-size: 18px;
}

/* subscribe search button different colors */
.buttonclick{
    border: 2px solid blue;
    border-radius: 4px;
    padding: 2px;
    width:320px;
    height:60px;
    background-color:red;
    color:white;
    }
    
   
     .searchclick{
    border: 2px solid white;
    border-radius: 4px;
    padding: 2px;
    width:160px;
    height:30px;
    background-color: green;
    color:white;
    font-size:medium;
    } /* was much to chunky on mobile devices */
    
  .homeclick{
    border: 2px solid blue;
    border-radius: 4px;
    padding: 2px;
    width:320px;
    height:60px;
    background-color: white;
    color:green;
    font-size:medium;
    }
    
    /* link button */
.linkclick {
    border: 2px solid green;
    border-radius: 4px;
    padding: 2px;
    width:320px;
    height:60px;
    background-color: white;
    color: green;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block; /* important for links */
    border-radius: 5px;
    font-size: medium;
    cursor: pointer;
}

/*  hover effect */
.linkclick:hover {
    background-color: darkgreen;
}

/* word of the day wrapper div */
.wotd-container {
    width:100%;
    margin: 20px auto;
    border: 3px solid #4a6fa5;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
}

.wotd-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(90deg, #4a6fa5 0%, #63a4ff 100%);
}

.wotd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid #e1e1e1;
}

.wotd-language {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.wotd-flag {
    font-size: 2em;
}

.wotd-main {
    padding: 15px;
    background-color: #fff;
}

.wotd-word {
    font-size: 2em;
    font-weight: bold;
    color: #4a6fa5;
    margin-bottom: 10px;
    text-align: center;
    padding: 10px 0;
    border-bottom: 2px dashed #e1e1e1;
}

.wotd-used {
    font-style: italic;
    color: #666;
    margin-bottom: 15px;
    text-align: center;
}

.wotd-example, .wotd-translate {
    margin-bottom: 10px;
    line-height: 1.4;
    color: #444;
}

.wotd-example strong, .wotd-translate strong {
    color: #4a6fa5;
}
 /* date goes in here */
.wotd-footer {
    margin-top:6px;
    height:20px;
    padding: 10px 15px;
    background-color: #f5f7fa;
    text-align: right;
    font-size: 0.8em;
    color: #666;
    border-top: 1px solid #e1e1e1;
}

/* For Turkish version */
.wotd-container[title*="Turkish"] .wotd-word {
    color: #c8102e; /* Turkish red */
}

.wotd-container[title*="Turkish"] .wotd-example strong, 
.wotd-container[title*="Turkish"] .wotd-translate strong {
    color: #c8102e;
}

.wotd-container[title*="Turkish"]::before {
    background: linear-gradient(90deg, #c8102e 0%, #e6483c 100%);
}

.wotd-date-below{
    margin-top:4px;
    height:24px;
    width:80%;
    background-color:#87C3DE;
    color:#000405;
}
/* styles for labels */

.row-entry {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-left: 6px solid #3498db; /* Default blue strip */
    margin: 6px 0;
    background-color: #f9f9f9;
    border-radius: 4px;
    font-family: Arial, sans-serif;
}

.row-entry:nth-child(odd) {
    border-left-color: #F70707; /* Red */
}

.label {
    font-weight: bold;
    color: #333;
    min-width: 150px;
}

.value {
    margin-left: 10px;
    color: #111;
}
 
/*  dashes centred in empty cells*/
.empty-cell {
    text-align: center;
    color: ##15076E;
    font-size: 1.9em;
}

/* flashcard for pages with questions */

.flashcards-container {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }

        .flashcard-wrapper {
            perspective: 1000px;
            width: 300px;
            height: 200px;
        }

        .flashcard {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.8s;
            cursor: pointer;
        }

        .flashcard-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            padding: 20px;
            box-sizing: border-box;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .front {
            background: linear-gradient(135deg, #6a11cb 0%, #0611F2 100%);
            color: white;
        }

        .back {
            background: white;
            color: #333;
            transform: rotateY(180deg);
        }

        .flashcard-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .flip-btn {
            background: #6a11cb;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: bold;
        }

        .flip-btn:hover {
            background: #2575fc;
        }

        /* Hide radio buttons but keep functionality */
        .state-toggle {
            display: none;
        }

        /* Flip when back is checked */
        #back-toggle:checked ~ .flashcard-wrapper .flashcard {
            transform: rotateY(180deg);
        }

        /* Hide back button when front is shown */
        #front-toggle:checked ~ .flashcard-buttons .back-btn {
            display: none;
        }

        /* Hide front button when back is shown */
        #back-toggle:checked ~ .flashcard-buttons .front-btn {
            display: none;
        }

        .card-image {
            max-width: 80px;
            max-height: 80px;
            margin-bottom: 15px;
        }       
        
 /* cards popup */
        
   .popup {
    display: none; 
    position: fixed;
    z-index: 999;
    padding-top: 60px;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background: rgba(0,0,0,0.5);
}

.popup-content {
    background: #fff;
    margin: auto;
    padding: 20px 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.popup-content h2 {
    margin-top: 0;
    font-size: 1.4rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.popup-content ul {
    list-style: none;
    padding: 0;
}

.popup-content li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.popup-content li a {
    text-decoration: none;
    color: #0066cc;
}

.popup-content li a:hover {
    text-decoration: underline;
}

.close-btn {
    float: right;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
}

.popup-trigger {
    text-align: center;
    margin: 15px 0;
}

.popup-trigger button {
    background: #0066cc;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 5px;
    cursor: pointer;
}/*. call to action image text */

.cta-container {
    display: flex;
    width: 100%;
    min-height: 300px; /* Minimum height for text area */
}

.cta-text {
    flex: 1; /* Takes remaining space */
    background: white;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-heading {
    color: #466ed9; /* RGB(70,110,217) */
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.cta-byline {
    color: #466ed9;
    line-height: 1.4;
}

.cta-image-container {
    flex: 0 0 50%; /* Fixed 50% width */
    max-width: 50%;
}

.cta-image {
    width: 100%;
    height: 300px;
    object-fit: cover; /* Ensures image fills container */
    border: 3px solid #466ed9; /* Menu color border */
    box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
    }
    
    .cta-image-container {
        flex: 1;
        max-width: 100%;
        order: -1; /* Image above text on mobile */
    }
}  

/* secondary cta button */
.cta-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ffcc00;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}

.cta-button:hover {
  background-color: #ff9900;
}

/* for 90% similarity underlining */
.close-match {
    color: red;
    text-decoration: underline;
} 

/* end results footer sepator classes */

/* General styling for both separtors bands english turkish*/
.end-turkish-results, .end-english-results {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    clear: both;
    margin-top: 5px;
    font-size: 0.9em;
}

/* Turkish Theme */
.end-turkish-results {
    background-color: #E30A17; /* Turkish Flag Red */
}
.end-turkish-results::before, .end-turkish-results::after {
    content: " 🇹🇷 ";
}

/* English Theme */
.end-english-results {
    background-color: #002366; /* Royal Navy Blue */
}
.end-english-results::before, .end-english-results::after {
    content: " 🇬🇧 ";
}  

/* count shows tatistics */
.stats-header {
    background: #001f3f;
    color: white;
    padding: 10px;
    font-weight: bold;
}

.stats-row {
    display: flex;
    gap: 15px;
    margin: 15px 0;
}

.stat-card {
    flex: 1;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

.stat-card.tr {
    background: #e30a17;
    color: white;
}

.stat-card.en {
    background: #002147;
    color: white;
}

.stat-card.total {
    background: #f4f4f4;
    color: #222;
    border: 1px solid #ccc;
}

.stat-number {
    font-size: 1.8em;
    font-weight: bold;
}

/* centralised help pages block text */

.help-links-box {
  max-width: 420px;
  margin: 12px 0 20px 0;
  padding: 12px 16px;
  border: 2px solid #2c6fa3;
  background-color: #f4f9fd;
  border-radius: 6px;
  font-family: Arial, sans-serif;
}

.help-links-box h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  color: #2c6fa3; 
}

.help-links-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-links-box li {
  margin-bottom: 6px;
}

.help-links-box a {
  text-decoration: none;
  color: #003366;
  font-weight: 500;
}

.help-links-box a:hover {
  text-decoration: underline;
  color: #c0392b;
} 

/* friendly warning  */

/* Shared layout  */
.error-container,
.reminder-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    line-height: 1.6;
}

/*  Neutral notice (Turkish explanation)  */
.error-container {
    background-color: #f4f7fa;
    border-left: 6px solid #8aaacb;
}

.error-container h1 {
    margin-top: 0;
    font-size: 1.4rem;
    color: #2c3e50;
}

.error-container p {
    color: #34495e;
}

/* Friendly reminder (English explanation)  */
.reminder-container {
    background-color: #f9faf6;
    border-left: 6px solid #9fb98f;
}

.reminder-container h2 {
    margin-top: 0;
    color: #2f4f2f;
}

.reminder-container p {
    color: #3b4a3b;
}

/* Tone down the colour responses*/
.reminder-container p:nth-of-type(n+2) {
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Images  */
.image-container {
    max-width: 900px;
    margin: 3rem auto;
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.image-container img {
    max-width: 380px;
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/*  Language hints */
[lang="tr"] {
    font-style: italic;
}

/* Headings (global softening) */
.h1, h2, h3 {
    text-align: center;
    font-weight: 500;
}    

/*conjunction explainer text */

.explainer {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.95em;
  line-height: 1.4;
}

.explainer-conjunction {
  background: #eef5fb; /* very soft blue */
  border-left: 4px solid #6fa8dc;
  color: #2c3e50;
}
 
/* database cards desktop and mobile */

.horizontal-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px;
    scroll-snap-type: x mandatory; /* Makes it snap cleanly on mobile */
    background-color: #f9f9f9;
}

.record-card {
    flex: 0 0 320px; /* Fixed width so it doesn't squash */
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field p {
    margin: 4px 0 0 0;
    font-size: 1rem;
    line-height: 1.4;
    white-space: normal; /* Critical for 256 char text to wrap */
    color: #333;
}

.label {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #888;
    letter-spacing: 0.5px;
}

.word-field p {
    font-size: 1.4rem;
    font-weight: 700;
    color: #007bff;
}

.audio-field {
    margin-top: auto; /* Push to the bottom of the card */
    padding-top: 10px;
}

.audio {
    width: 100%; /* Ensure audio player fits inside the card */
}

/* Hide scrollbar for a cleaner look */
.horizontal-scroll-container::-webkit-scrollbar {
    height: 6px;
}
.horizontal-scroll-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* last entry to database horzontal across screen */


.latest-entry {
  display: grid;
  grid-template-columns: 
    1.2fr   /* Word */
    1.3fr   /* Usage */
    0.8fr   /* Verb */
    0.8fr   /* Noun */
    2fr     /* Example */
    1.5fr   /* Translate */
    1.5fr;  /* Notes */
    
  gap: 15px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  align-items: start;
}

.latest-entry .col {
  font-size: 0.95rem;
  line-height: 1.4;
}
 /*.for mobile responsiveneess */
 
 @media (max-width: 900px) {
  .latest-entry {
    grid-template-columns: 1fr;
  }

  .latest-entry .col {
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
  }

  .latest-entry .col:last-child {
    border-bottom: none;
  }  
  
  /*English turkish searches empty search error message box*/
  /* not being applied investigate find and fix !!!!!*/
  .search-empty-error{
    position:fixed;
    top:800px;
    width:320px
    height:160px;
    border-color:red;
    border-radius:12px;
    text-align:center;
    font-size:22px;
  }