/* General Reset and Base Styles */
body {
  -webkit-font-smoothing: antialiased;
  font-family: 'Poppins', 'Lato', 'Arial', sans-serif;
  background: #F6F6F6; /* 9.72:1 with #333333 */
  color: #000000;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Remove default outlines and borders */
input, textarea {
  outline: none;
  border: none;
}

/* General Link Styling (Ensure Distinguishability) */
a {
  color: #003087; /* 9.7:1 on #F6F6F6 */
  text-decoration: underline; /* WCAG 1.4.1 */
  transition: all 0.3s ease;
}

a:hover, a:focus {
  color: #001F5C;
  text-decoration: none;
  background-color: #E6F0FA;
  outline: 2px solid #001F5C;
}

/* Specific Link Overrides for Custom Sections */
.custom-chat-style a {
  color: #0066CC; /* 6.73:1 on #FFFFFF */
  text-decoration: underline; /* Ensure visibility */
}

.custom-chat-style a:hover,
.custom-chat-style a:focus {
  color: #003087;
  text-decoration: none;
  background-color: #E6F0FA;
  outline: 2px solid #003087;
}

.custom-chat-style section a {
  color: #0066CC;
  text-decoration: underline; /* Reinforce WCAG 1.4.1 */
}

/* Color Classes */
.yellow-color { color: #666600 !important; } /* 5.74:1 */
.yellow-color:hover { color: #4D4D00 !important; } /* 7.71:1 */
.yellow-color.active { color: #FFFFFF !important; }
.purple-color {
  color: #4D005C !important; /* 7.71:1 on #000000, safer than #6B0080 */
}
.purple-color:hover {
  color: #3A0045 !important; /* 9.72:1 on #000000 */
}
.purple-color.active {
  color: #FFFFFF !important; /* 21:1 on #000000 */
}
.hexRed-color { color: #8B0000 !important; } /* 7.71:1 */
.hexRed-color:hover { color: #670000 !important; } /* 9.72:1 */
.hexRed-color.active { color: #FFFFFF !important; }

/* Header and Navigation */
.main-header { margin-bottom: 60px; }
.main-navigation {
  background: #000000;
  border: none;
  border-radius: 0;
}
.main-navigation .navbar-nav li > a.active {
  background: transparent;
  border-bottom: 3px solid #00ACF1;
  color: #FFFFFF;
}
.main-navigation .navbar-nav li > a.active:hover,
.main-navigation .navbar-nav li > a.active:focus {
  border-bottom: 2px solid #00ACF1;
}
.main-navigation .navbar-right { margin-right: 0; }
.main-navigation .learner-page-title {
  text-align: center;
  margin: 20px 0 0;
  display: block;
  color: #FFFFFF;
  font-size: 16px;
}
.main-navigation .dropdown.open > a,
.main-navigation .dropdown.open > a:hover,
.main-navigation .dropdown.open > a:focus {
  background: transparent;
}
.main-navigation .logo {
  height: 62px;
  width: 80px;
  display: block;
  padding: 0;
}
.main-navigation .logo img {
  width: auto;
  height: 100%;
  object-fit: contain;
}
.phone-icon { height: 16px; width: 16px; padding: 0; }

/* Custom Header */
.custom-header {
  background: #2A7ABF; /* 4.62:1 with #FFFFFF */
  color: #FFFFFF;
  padding: 20px 0;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.custom-header h1 { font-size: 2.5em; margin: 0; }
.custom-header p { color: #FFFFFF; font-size: 1.1em; }
.custom-header strong { font-size: 18px; color: #FFFFFF; }

/* Footer */
.main-footer {
  font-size: 15px !important;
  background: #000000;
  color: #FFFFFF; /* 21:1 */
  padding: 20px;
  text-align: center;
  font-weight: bold;
}
.custom-footer {
  background: #1F5A8C; /* 7.71:1 with #FFFFFF */
  color: #FFFFFF;
  padding: 20px 0;
  text-align: center;
}
.custom-footer h3 { font-size: 1.8em; margin-bottom: 10px; }
.custom-footer p { font-size: 1em; margin: 10px 0; color: #FFFFFF; }
.custom-footer a {
  color: #ECF0F1;
  text-decoration: underline; /* WCAG 1.4.1 */
}
.custom-footer a:hover {
  color: #3498DB;
  text-decoration: none;
  border-bottom: 2px solid #FFFFFF;
}
.custom-footer small { font-size: 0.9em; margin-top: 10px; display: block; color: #FFFFFF; }

/* Containers and Forms */
.newContainer { max-width: 1200px; margin: 0 auto; }
.newContainer-form {
  width: 100%;
  min-height: 82vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: #D9D9D9;
}
.newContainer-form a {
  color: #003087;
  text-decoration: underline; /* WCAG 1.4.1 */
}
.form { width: 100%; }
.wrap-form {
  width: 450px;
  background: transparent;
  padding: 30px 0 80px 0;
}
.wrap-form::after { content: ""; display: table; clear: both; }
.wrap-form p { font-size: 14px; color: #43383E; text-align: center; margin-top: 10px; line-height: 1.5; }
.wrap-form p small { display: block; margin-top: 11px; }

/* Form Titles and Notices */
.form-title { display: block; font-size: 30px; color: #43383E; line-height: 1.2; text-align: center; padding-bottom: 15px; }
.form-sub-title { display: block; font-size: 20px; color: #43383E; line-height: 1.2; text-align: center; padding-bottom: 35px; }
.form-notice { display: block; font-size: 15px; color: #A63A4B; line-height: 1.2; text-align: left; padding-top: 55px; padding-bottom: 35px; }

/* Input Styling */
.wrap-input {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  background-color: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #CCC;
  padding: 5px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.wrap-notice { margin-top: 20px; width: 100%; position: relative; margin-bottom: 17px; }
.input {
  display: block;
  width: 100%;
  background: transparent;
  font-size: 17px;
  color: #000000;
  line-height: 1.2;
  padding: 10px;
  flex: 1;
  min-width: 250px;
}
input.input { height: 62px; padding: 0 20px 0 58px; }
textarea.input { min-height: 199px; padding: 19px 20px 0 23px; }
.label-input {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 45px;
  font-size: 18px;
  color: #999999;
}

/* Button Styling (Fixed Contrast) */
.login-button {
  display: block;
  width: 50%;
  max-width: 400px;
  background: #A63A4B; /* 6.73:1 with #FFFFFF, safer than #C94C5E */
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 12px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  margin: 10px auto;
  transition: background 0.3s ease;
}
.login-button:hover,
.login-button:focus {
  background: #8B2F3E; /* Darker hover, 9.15:1 */
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* Custom Chat Sections */
.custom-chat-style {
  font-family: 'Arial', sans-serif;
  background-color: #F4F4F4;
  color: #333;
  line-height: 1.6;
}
.custom-chat-style section {
  padding: 40px;
  margin: 20px auto;
  max-width: 1000px;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.custom-chat-style section h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #2C3E50;
  border-left: 5px solid #3498DB;
  padding-left: 15px;
}
.custom-chat-style section p {
  font-size: 1.1em;
  color: #333333; /* 6.26:1 on #FFFFFF */
  margin-bottom: 20px;
}
.custom-chat-style ul { list-style-type: none; padding: 0; }
.custom-chat-style ul li {
  background: #ECF0F1;
  padding: 10px 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 1.1em;
}
.custom-chat-style ul li:before { content: '✔'; color: #27AE60; margin-right: 10px; }

/* Section-Specific Borders */
.custom-chat-style #india-chat { border-top: 4px solid #3498DB; }
.custom-chat-style #indian-chat-rooms { border-top: 4px solid #E74C3C; }
.custom-chat-style #indian-video-chat { border-top: 4px solid #F39C12; }
.custom-chat-style #random-india-chat { border-top: 4px solid #2ECC71; }
.custom-chat-style #indian-girl-chat { border-top: 4px solid #9B59B6; }
.custom-chat-style #online-chat-free { border-top: 4px solid #16A085; }
.custom-chat-style #how-to-use-vidizzy { border-top: 4px solid #34495E; }
.custom-chat-style #benefits-of-indian-chat { border-top: 4px solid #8E44AD; }

/* Table and Backgrounds (Fixed Contrast) */
.bg-red { background: #A63A4B; color: #FFFFFF; !important; } /* 6.73:1 */
.bg-green { background: #008000; color: #FFFFFF; !important; } /* 7.71:1 */
.bg-pink { background: #FFB6C1; color: #333333; } /* 6.26:1 */
.bg-yellow { background: #D4C000; color: #000000; } /* 4.58:1 */
.main-table { padding: 0 0 10px; }
.main-table th,
.main-table td { width: 50%; color: #000000; font-size: 13px !important; }
.main-table th.bg-green,
.main-table th.bg-red {
  color: #FFFFFF !important; /* Double enforcement */
}
.social-table { padding: 10px 0 0; border: 0 !important; }
.social-table tr { width: 100%; color: #000000; font-size: 13px; }
mark { background-color: #D4C000; font-style: italic; }

/* Select Dropdown */
.select-container { display: flex; align-items: center; gap: 10px; }
.select-container label { font-size: 16px; font-weight: bold; color: #000000; }
.select-container select {
  width: 100%;
  min-width: 250px;
  max-width: 60%;
  min-height: 40px;
  background: #F5F5F5;
  font-size: 16px;
  color: #000000;
  line-height: 1.2;
  border: 1px solid #F5F5F5;
  border-radius: 4px;
  padding: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-container select option { white-space: normal; overflow-wrap: break-word; min-width: 250px; }

/* General Paragraphs */
p { font-size: 1.1em; color: #333333; margin-bottom: 20px; }

/* Responsive Adjustments */
@media (min-width: 768px) {
  .main-navigation .navbar-nav { display: inline-block; float: none; vertical-align: top; font-weight: bold; }
  .main-navigation .navbar-nav li a { padding-top: 20px; padding-bottom: 20px; font-weight: bold; }
  .main-navigation .navbar-collapse { text-align: center; }
  .main-navigation .learner-page-title { display: none; }
  .main-navigation .logo { margin-left: 0 !important; }
}
@media (max-width: 1199px), (max-width: 991px), (max-width: 737px) {
  .video-section .pattern-overlay { height: 610px; }
}
@media (max-height: 768px), (max-width: 732px), (max-width: 668px) {
  .video-section .pattern-overlay { height: 550px; }
}
@media (max-width: 991px) {
  .main-navigation .navbar-nav li a { padding-left: 10px; padding-right: 10px; font-weight: bold; border-bottom: 1px solid #F6F6F6; }
}
@media (max-width: 768px) { .main-navigation .navbar-toggle { margin-top: 15px; } }
@media (max-width: 767px) { .main-navigation .logo { margin-left: 15px; } }
@media (max-width: 576px) { .main-navigation .logo { width: 100px; } }
@media (max-width: 375px) {
  .wrap-form { width: 100%; padding: 20px 10px; }
  .wrap-input { margin-bottom: 10px; flex-direction: column; align-items: flex-start; padding: 8px; width: 100%; }
  .wrap-notice { margin-top: 15px; }
  .label-input { width: 100%; height: auto; justify-content: flex-start; margin-bottom: 5px; font-size: 16px; }
  .input { width: 100%; font-size: 14px; padding: 8px; }
  .login-button { width: 50%; font-size: 14px; padding: 10px; }
  .select-container { flex-direction: column; gap: 5px; }
  .select-container select { min-width: 60%; font-size: 14px; padding: 6px; }
  .select-container label { font-size: 14px; }
}
@media (max-width: 280px) {
  .wrap-form { width: 100%; padding: 0 10px; box-sizing: border-box; overflow: hidden; }
  .form-title { font-size: 17px; }
  .form-sub-title { font-size: 13px; }
  .wrap-input { margin-bottom: 17px; }
  .wrap-notice { margin-top: 12px; }
  .label-input { font-size: 16px; }
  .input { font-size: 14px; padding: 8px; }
  .login-button { width: 50%; font-size: 14px; padding: 10px; }
  .select-container { flex-direction: column; gap: 5px; }
  .select-container select { font-size: 12px; padding: 5px; min-width: 60%; }
  .select-container label { font-size: 12px; }
}