/**
 * @file
 * Subtheme specific CSS.
 */

.ramadan-container {
  width: 100%;
  height: 80vh; /* Full viewport height, adjust as needed */
}


/* Base Styles for Calendar Grid */
.ramadan-bg {
  background-image: url(https://beyond-qr.com/modules/custom/my_calendar/data/ramadan3.jpg);
  min-height: 650px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding: 20px;               /* Optional: Add padding around the content */

  /* Flexbox properties for centering */
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */

}
.ramadan-content {
  text-align: center; /* Optional: Center text */
}

.ramadan-content {
  text-align: center;
  color: #062933;
  font-family: 'Cairo', sans-serif;
  line-height: 1.6;
}

.ramadan-content p {
  font-size: 16px;
  margin-bottom: 10px;
}

.ramadan-content h3 {
  font-size: 20px;
  margin: 15px 0;
}

.ramadan-content ul {
  list-style: none; /* Remove bullet points */
  padding: 0;
  margin: 15px 0;
}

.ramadan-content ul li {
  font-size: 16px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.ramadan-content blockquote {
  font-style: italic;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-left: 4px solid #fff;
  margin: 15px 0;
}

.ramadan-content small {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  color: rgb(15 61 73 / 70%);
}





/* Base Styles for Calendar Grid */
.calendar-grid {
  background: url("https://beyond-qr.com/modules/custom/my_calendar/data/ramadan2.jpg") no-repeat center center;
}


/* Apply box-sizing globally */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Calendar Grid Container */
.calendar-grid {
  background: url("https://beyond-qr.com/modules/custom/my_calendar/data/ramdan-bd.jpg") no-repeat center top;
  background-size: 100% auto;
  width: 100%;
  padding: 1rem;
  min-height: 500px; /* Adjust as needed */
  position: relative; /* For background image positioning */
}

/* Responsive Adjustments for Extra Small Devices */
@media (max-width: 576px) {
  .calendar-grid {
    padding: 0.5rem;
    background-size: cover; /* Ensure the image covers the area */
    min-height: 700px;      /* Adjust height for more rows on mobile */
  }

  .calendar-day {
    padding: 0.5rem; /* Reduce padding on mobile */
  }

  /* Responsive Typography */
  .ar-weekday {
    font-size: 1rem; /* Smaller font on mobile */
  }

  .date-hijri {
    font-size: 0.9rem; /* Smaller font on mobile */
  }

  .date-miladi {
    font-size: 0.8rem; /* Smaller font on mobile */
  }

  /* Optional: Adjust Modal Styling for Mobile */
  .calendar-modal .modal-dialog {
    max-width: 90%; /* Reduce modal width on mobile */
  }

  .calendar-modal .modal-title {
    font-size: 1rem;
  }

  .calendar-modal .close-modal {
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
  }
}

/* Styles for Each Calendar Day Box */
.calendar-day {
  padding: 0.75rem;
  text-align: center;
  border: 1px solid #ccc;
  background-color: rgba(249, 249, 249, 0.9); /* Slightly transparent background */
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; /* Ensure equal height */
  box-sizing: border-box;
}

/* Alternate Background Colors with Transparency */
.calendar-day:nth-child(odd) {
  background-color: rgba(250, 250, 210, 0.7); /* Light golden, transparent */
}

.calendar-day:nth-child(even) {
  background-color: rgba(224, 255, 255, 0.7); /* Light cyan, transparent */
}

/* Hover Effect */
.calendar-day:hover {
  transform: scale(1.05);
  background-color: rgba(240, 240, 240, 0.9); /* Slightly different shade for hover */
}

/* Arabic Weekday Styling */
.ar-weekday {
  color: #d35400; /* Dark orange */
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

/* Hijri Date Styling */
.date-hijri {
  color: #2980b9; /* Medium blue */
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

/* Gregorian (Miladi) Date Styling */
.date-miladi {
  color: #333;
  font-size: 1rem;
}

/* Modal Styles */
.calendar-modal .modal-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.calendar-modal .modal-title {
  font-size: 1.2rem;
  margin: 0;
  padding: 0.25rem 0;
}

.calendar-modal .close-modal {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  background: #ccc;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.3rem 0.6rem;
}

.calendar-modal .close-modal:hover {
  background: #bbb;
}



/* one_day_block.css */

/* one_day_block.css */

/* Container Styling */
.one-day-block {
  background-color: #ffffff; /* White background for clarity */
  padding: 2rem; /* Spacious padding around the content */
  border-radius: 8px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  max-width: 800px; /* Optional: Limit the maximum width */
  margin: 0 auto; /* Center the block horizontally */
}

/* Current Day Section */
.current-day {
  background-color: #f0f8ff; /* Light blue background */
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px solid #e0e0e0; /* Light border */
}

.current-day h3 {
  font-size: 2rem;
  color: #333333; /* Dark text for readability */
  margin-bottom: 0.5rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.current-day p {
  font-size: 1.1rem;
  color: #555555; /* Slightly lighter text */
  line-height: 1.8;
}

/* Tabs Navigation */
.nav-tabs {
  border-bottom: 2px solid #dee2e6; /* Thicker bottom border for prominence */
}

.nav-tabs .nav-item {
  margin-bottom: -1px; /* Align with the border */
}

.nav-tabs .nav-link {
  background-color: #f8f9fa; /* Light background for inactive tabs */

  color: #495057; /* Standard Bootstrap text color */
  border: 1px solid #dee2e6; /* Border to separate tabs */
  border-radius: 0.25rem 0.25rem 0 0; /* Rounded top corners */
  transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
  font-weight: 500; /* Semi-bold text */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nav-tabs .nav-link:hover {
  background-color: #e9ecef; /* Slightly darker on hover */
  color: #212529; /* Darker text on hover */
}

.nav-tabs .nav-link.active {
  background-color: #ffffff; /* White background for active tab */
  color: #0d6efd; /* Bootstrap primary color for active tab text */
  border-color: #dee2e6 #dee2e6 #ffffff; /* Adjust borders for active tab */
  border-bottom: 2px solid #ffffff; /* Merge active tab with content */
}

.nav-tabs .nav-link.active::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #0d6efd; /* Bootstrap primary color */
  margin-top: 2px;
  border-radius: 2px 2px 0 0;
}

/* Tab Content Styling */
.tab-content {
  border: 1px solid #dee2e6; /* Border around the content */
  border-top: none; /* Remove top border to merge with active tab */
  padding: 1.5rem;
  background-color: rgb(255 255 255 / 33%);
  border-radius: 0 0 0.25rem 0.25rem; /* Rounded bottom corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  margin-bottom: 1.5rem; /* Space between content and tabs */
}

.tab-content h5 {
  font-size: 1.5rem;
  color: #333333;
  margin-bottom: 0.75rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.tab-content p {
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
}

/* Prayer Times Section */
.prayer-times {
  margin-top: 1.5rem;
}

.prayer-times h6 {
  font-size: 1.3rem;
  color: #0d6efd; /* Highlight with primary color */
  margin-bottom: 1rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.prayer-time-item {
  background-color: #f8f9fa; /* Light background for prayer items */
  padding: 0.75rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  text-align: center;
}

.prayer-time-item strong {
  display: block;
  font-size: 1.1rem;
  color: #333333; /* Darker text for labels */
  margin-bottom: 0.3rem;
}

.prayer-time-item span {
  font-size: 1rem;
  color: #555555; /* Slightly lighter text for times */
}

/* Center-align text within tab-pane */
.one-day-block .tab-pane {
  text-align: center;
}

/* Flexbox Centering for Nested Elements */
.one-day-block .tab-pane h5,
.one-day-block .tab-pane p,
.one-day-block .prayer-times h6,
.one-day-block .prayer-times .prayer-time-item {
  text-align: center;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
  .one-day-block {
    padding: 1rem; /* Reduce padding on small screens */
  }

  .current-day h3 {
    font-size: 1.5rem; /* Smaller heading on mobile */
  }

  .current-day p {
    font-size: 1rem; /* Smaller text on mobile */
  }

  .nav-tabs .nav-link {
    font-size: 0.9rem; /* Smaller tab text */
    padding: 0.5rem 0.75rem; /* Adjust padding */
  }

  .tab-content {
    padding: 1rem; /* Reduce padding in content */
  }

  .tab-content h5 {
    font-size: 1.2rem; /* Smaller subheading */
  }

  .tab-content p {
    font-size: 0.9rem; /* Smaller paragraph text */
  }

  .prayer-times h6 {
    font-size: 1.1rem; /* Smaller prayer times heading */
  }

  .prayer-time-item {
    padding: 0.5rem; /* Reduce padding */
  }

  .prayer-time-item strong {
    font-size: 1rem; /* Smaller label */
  }

  .prayer-time-item span {
    font-size: 0.9rem; /* Smaller time text */
  }
}