@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Open+Sans:wght@400;600&display=swap');

/* Global reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p, body, a, button {
  font-family: 'Open Sans', sans-serif;
}

body {
  background-color: #f7f7f8; /* Light mode background */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Dark mode body background and text color */
body.dark {
  background-color: #1f1f1f; /* Custom dark mode background */
  color:  #b6bdc0; /* Custom dark mode text color */
}

/* Text selection color */
::selection {
  background-color: #1d3557;
  color: white;
}
::selection.dark {
  background-color:  #b6bdc0;
  color: #1f1f1f;
}

/* Button styling */
button {
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  margin: 5px;
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Primary button */
button.primary {
  background-color: #1d3557; /* Primary button background */
  color: white; /* White text for primary button */
}

button.primary.dark {
  background-color:  #5a8fd0; /* Dark mode primary button background */
  color: #1d3557; /* Custom dark mode text color */
}

button.primary:hover {
  background-color: #F2AF29;
  color: #1D3557;
}

button.primary.dark:hover {
  background-color: #75acf0 ;
}

/* Secondary button */
button.secondary {
  background-color: #F2AF29; /* Yellow */
  color: #1D3557; /* Dark Blue for contrast */
}

button.secondary.dark {
  background-color: #F2AF29; /* Yellow */
  color: #1D3557; /* Dark Blue for contrast */
}

button.secondary:hover {
  background-color: #1D3557;
  color: white;
}

button.secondary.dark:hover {
  background-color:  #e09f23;
}

/* Delete button */
button.delete {
  background-color: #E63946;
  color: white; /* White text for delete button */
}

button.delete.dark {
  background-color: #E63946;
  color: white; /* White text for delete button */
}

button.delete:hover {
  background-color: #ff4d5b;
}

button.delete.dark:hover {
  background-color: #ff4d5b;
}

/* Typography for headings */
h1, h2, h3, h4, h5, h6 {
  color: #1d3557; /* Color for headings in light mode */
  font-family: 'Montserrat', sans-serif;
}

h1.dark, h2.dark, h3.dark, h4.dark, h5.dark, h6.dark {
  color: #5a8fd0;  /* Dark mode heading color */
}

/* Links */
a {
  color: #1d3557;
  text-decoration: none;
  transition: color 0.3s ease; /* Smooth transition */
}

a.dark {
  color: #5a8fd0; /* Dark mode link color */
}

a:hover {
  color: #F2AF29;
}

a.dark:hover {
 color: #75acf0 ;
}

/* Share button */
.share-button {
  position: fixed;
  bottom: 1.25rem; /* Equivalent to bottom-5 */
  right: 1.25rem; /* Equivalent to right-5 */
  width: 3rem; /* Equivalent to w-12 */
  height: 3rem; /* Equivalent to h-12 */
  background-color: #1d3557; /* Equivalent to bg-green-500 */
  color: white;
  border-radius: 9999px; /* Equivalent to rounded-full */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Equivalent to shadow-lg */
  z-index: 1000;
  font-size: 24px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.share-button.dark {
  background-color: #5a8fd0 ; /* Dark mode share button background */
  box-shadow: 0 5px 10px rgba(255, 255, 255, 0.05);
}

.share-button:hover {
  background-color: #F2AF29;
}

.share-button.dark:hover {
  background-color: #75acf0;
}

/*********************************Advisory plans cards style*****************************************************/

/* Shared container for paragraph and cards */
.content-container {
  max-width: 1200px; /* Consistent width for content */
  margin: 0 auto; /* Center horizontally */
  padding: 0 20px; /* Padding for small screens */
}

.centered-image {
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100%; /* Optional: Adjust height to match the parent container */
  margin: 20px 0; /* Optional: Add some margin for spacing */
}

.centered-image img {
  max-width: 100%; /* Ensure the image does not overflow */
  height: auto; /* Maintain aspect ratio */
}

/* Page Title */
.advisory-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: #1D3557; /* Dark Navy */
  margin-top: 20px;
  margin-bottom: 20px;
}
.advisory-title.dark {
  color: #5A8FD0; /* Dark mode - Light Blue */
}
/* Paragraph Section */
.advisory-plan-paragraph {
  text-align: center;
  margin-bottom: 40px;
  color: #4A5568; /* Neutral Gray */
  line-height: 1.6;
}
.advisory-plan-paragraph.dark {
  color: #B6BDC0; /* Dark mode - Light Gray */
}

.advisory-plan-paragraph p {
  margin-bottom: 10px;
}

.advisory-plan-paragraph p.dark {
  color: #B6BDC0; /* Dark mode for individual paragraphs */
}


.arabic-paragraph {
  font-family: 'Noto Sans Arabic', sans-serif;
  direction: rtl;
  text-align: right;
}

.arabic-paragraph.dark {
  color: #B6BDC0; /* Dark mode Arabic paragraph */
}

/* Cards Container */
.advisory-plans-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
}

/* Individual Card */
.college-box {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 360px;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}
.college-box.dark {
  background-color: #28292A; /* Dark mode - Darker Gray */
  border: 1px solid #3A3A3A; /* Dark mode - Slightly Lighter Gray */
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05); /* Dark mode shadow */
}
.college-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.college-box.dark:hover {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); /* Dark mode hover shadow */
}

/* Card Title */
.college-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1D3557; /* Dark Navy */
  margin-bottom: 20px; /* Space between title and buttons */
  text-align: center;
}

.college-title.dark {
  color: #5A8FD0; /* Dark mode - Light Blue */
}


/* Buttons Container */
.major-button-container {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between buttons */
}

/* Individual Button */
.plan-button {
  display: block;
  padding: 10px;
  background-color: #1D3557; /* Primary Dark Navy */
  color: #FFFFFF; /* White Text */
  border: 2px solid transparent; /* Default border */
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.plan-button:hover {
  background-color: #F2AF29; /* Hover Background - Golden Yellow */
  color: #1D3557; /* Hover Text - Dark Navy */
  border-color: #F2AF29; /* Hover Border - Golden Yellow */
}
 .plan-button.dark {
  background-color: #5A8FD0; /* Dark mode - Light Blue */
  color: #1D3557; /* White Text */
  border-color: #5A8FD0; /* Dark mode - Light Blue */
}


/* ===================== INTRO.JS TAILWIND STYLES ===================== */

/* Customize the pop-up tooltip */
.introjs-tooltip {
  @apply bg-gray-900 text-white p-4 rounded-xl shadow-lg border border-gray-700;
}

/* Title text */
.introjs-tooltip-title {
  @apply text-lg font-bold text-yellow-400;
}

/* Step text */
.introjs-tooltiptext {
  @apply text-white text-base;
}

/* Navigation Buttons */
.introjs-button {
  @apply bg-yellow-400 text-black font-semibold px-4 py-2 rounded-lg transition-all duration-200 ease-in-out;
}

/* Hover effect for buttons */
.introjs-button:hover {
  @apply bg-yellow-300;
}

/* Back Button */
.introjs-prevbutton {
  @apply bg-gray-600 text-white;
}

/* Close (X) Button */
.introjs-skipbutton {
  @apply bg-red-600 text-white font-semibold;
}

/* Progress Bar */
.introjs-progress {
  @apply bg-yellow-400;
}

.introjs-progressbar {
  @apply bg-yellow-300;
}

/* Tooltip Arrow */
.introjs-arrow {
  @apply border-gray-900;
}