/* Define primary colors */
:root {
    --primary-color: #277D82;
    --primary-hover: #13565A;
    --background-color: #F2F3F4;
}

/* Dark Mode */
.dark-mode {
    --primary-color: #1a1a1a;         /* Very dark background for buttons/sections */
    --primary-hover: #333333;         /* Slightly lighter for hover effect */
    --background-color: #000000;      /* Pure black background */
    --text-color: #ffffff;            /* White text */
}
.dark-mode .offcanvas-body,
.dark-mode .list-group-item,
.dark-mode .search-bar-anchor,
.dark-mode .filter-list,
.dark-mode .modal-content,
.dark-mode .card {
    background: #1a1a1a;
}

.dark-mode .confirm-btn,
.dark-mode .leaflet-popup-content-wrapper,
.dark-mode .leaflet-popup-tip,
.dark-mode .active>.page-link, .page-link.active {
    background: #333333;
}

.dark-mode .leaflet-tooltip,
.dark-mode .page-link {
    color: #000000 !important; /* Black text */
}
.dark-mode .map-count,
.dark-mode .login-content .form-section h6,
.dark-mode .login-content span{
    background-color: #ffffff;
    color: #000000 !important;
}
.dark-mode .leaflet-control-zoom-in span,
.dark-mode .leaflet-control-zoom-out span {
    color: initial !important;
}

.dark-mode html,
.dark-mode body,
.dark-mode a,
.dark-mode p,
.dark-mode span,
.dark-mode div,
.dark-mode .breadcrumb-item,
.dark-mode .section-title,
.dark-mode .text-start,
.dark-mode a.change-lang,
.dark-mode label,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: var(--text-color) !important;
}

@import url('https://fonts.googleapis.com/css2?family=Mukta+Malar&display=swap');

body {
    background-color: var(--background-color);
    font-family: 'Mukta Malar', sans-serif;
}

html {
  font-size: 100%; /* default: 16px */
}

body {    
  font-size: 100%; /* will be updated dynamically by JS */
}


/* General Styles 
body {
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
*/

/* .body-style{
    margin-top: 110px;
}

@media (max-width: 992px) {
    .body-style{
        margin-top: 80px;
    }
} */

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1;
    padding-top: 128px;
}

/* Container */
.container-login {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
}

.offcanvas-header{
    background-color: var(--primary-color);
    color: #fff;
}

.btn-close{
    background-color: #fff;
}

.list-group-item img{
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.list-group-item a{
    text-decoration: none;
    color: #000;
   font-family: 'Mukta Malar', sans-serif;
    /* font-size: 18px; */
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.04em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

/* Form Section */
.form-section {
    background: #FFFFFF;
    padding: 27px;
    flex: 1;
}

.head-text{
     font-family: 'Mukta Malar', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 36.86px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

p{
   font-family: 'Mukta Malar', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 19.84px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  
}

.sign-in-text{
   font-family: 'Mukta Malar', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 39.68px;
    letter-spacing: -0.04em;
    text-align: center !important;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--primary-color);
}

/* Image Section */
.image-section {
    background-color: #f5fbe6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px;
}

/* Form Styles */
.form-control {
    border-radius: 7px;
    /* height: 48px; */
}

.input-group-text {
    border-radius: 20px;
    border: 1px solid #000;
}

/* Button Custom Styles */
.btn-custom {
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 20px;
    width: 100%;
}

.btn-custom:hover {
    background-color: var(--primary-hover);
    color: #fff;
}

/* Hide elements */
.hidden {
    display: none;
}

.btn-lang{
    border: 2px solid var(--primary-color);
    border-radius: 25px; 
    /* background-color: var(--primary-hover); */
    color: var(--primary-color);
}

/* Header elements */
.navbar {
    background-color: var(--primary-color);
}
.navbar-brand img {
    height: 60px;
}
.navbar-brand .tamilnadu-img {
    height: 75px;
}
.header-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
}
.sub-title {
    color: #fff;
}
.navbar-title{
    margin-top: 10px;
}
.navbar>.container-fluid{
    flex-wrap: nowrap;
}

.navbar-toggler{
    border: none;
    display: inline !important;
}
.navbar-toggler:focus {
    box-shadow: none;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-toggler {
        display: inline;
    }

    .navbar-title.d-none.d-lg-block {
        display: block !important;
    }

    .navbar-collapse {
        justify-content: flex-end;
    }

    .navbar-nav {
        align-items: center;
    }
    .temple-search 
    {
        padding-left: 0;
    }
    .search-link {
        display: flex;
    }
}

@media (max-width: 991.98px) {
    .navbar-brand {
        margin-right: 0;
        gap: 10px;
    }

    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    a.mobile-header {
        text-decoration: none;
        color: inherit;
    }

    .mobile-logo {
        max-height: 40px;
        width: auto;
    }

    .navbar-title {
        flex-grow: 1;
        text-align: left;
    }

    .navbar-title h2 {
        font-size: 1.375rem;
        color: #fff;
        margin: 0;
        line-height: 1.2;
    }

    .navbar-title p {
        font-size: 0.875rem; 
        color: #fff;
        margin: 0;
    }
    
    .navbar-nav {
        background-color: var(--primary-color);
        padding: 1rem;
        flex-direction: row !important; 
        flex-wrap: wrap; 
        justify-content: flex-start;
    }

    .navbar-nav .nav-item {
       margin-top: -16px;
    }

    .navbar-nav .nav-link {
        display: block;
        width: 100%;
        padding: 0.5rem 1rem;
        text-align: left;
        font-size: 0.875rem; 
    }

    .language-change {
        margin-top: 10px;
    }

    .navbar-toggler {
        margin-top: -70px;
        margin-left: auto;
    }

    .navbar > .container-fluid {
        flex-wrap: wrap !important; 
        padding: 6px;
    }
    
    .navbar-collapse {
        display: block !important;
        width: 100%;
    }

     #searchContainer {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: 28px;
    }

    #searchContainer .form-control {
        width: 100%;
        font-size: 0.875rem; 
    }

    #searchContainer .btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}
/* landing page */
#map {
    height: 100vh;
    width: 100%;
    position: relative;
}

.map-container {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    border-radius: 8px;
    z-index: 1000;
    width: 90%;
}

.search-bar input {
    width: 100%;
}

.filter-bar {
    margin-top: 10px;
}
.leaflet-popup-content img { width: 100%; height: auto; border-radius: 8px; }
.popup-content {  position: relative; text-align: center; font-family: Arial, sans-serif; }
.read-more-btn {
display: inline-block;
margin-top: 5px;
padding: 5px 10px;
background: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-size: 0.875rem; 
}
.read-more-btn:hover { 
background: #0056b3; 
}

.search-bar-anchor{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 20px;
    border: 1px solid #727E7F;
    background-color: #fff;
}

.search-bar-anchor a{
color: #000;
text-decoration: none;
}

.search-link {
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    width: 100%;
}


.modal-backdrop {
display: none;
}

.modal{
    /* background: rgba(0, 0, 0, 0.5);  */
    height: 100vh;
}

/* popup */
label {
font-size: 1rem;
font-weight: bold;
color: #666;
display: block;
margin-top: 15px;
}
.dropdown, .slider-input {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.radio-options {
display: flex;
flex-direction: column;
margin-top: 10px;
}
.radio-options label {
display: flex;
align-items: center;
font-size: 0.875rem; 
cursor: pointer;
}
.radio-options input {
margin-right: 10px;
}
.slider-wrapper {
text-align: center;
margin-top: 10px;
}
.confirm-btn {
text-decoration: none;
width: 100%;
background-color: var(--primary-color);
color: white;
padding: 12px;
border: none;
border-radius: 25px;
font-size: 1rem;
cursor: pointer;
}

.filter-list {
overflow-y: auto;
background: #F2F3F4;
border-radius: 8px;
color: #666;;
}
.filter-item {
display: flex;
align-items: center;
padding: 10px;
}
.filter-item img {
width: 48px;
height: 48px;
margin-right: 10px;
}
.filter-checkbox {
margin-left: auto;
width: 20px;
height: 20px;
}

/* Data entry page */
.breadcrumb {
    background: none;
    padding: 10px 0;
}
.section-title {
    font-family: 'Mukta Malar', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 49.15px;
    letter-spacing: -1px;
    color: var(--primary-color);
}
.comments-title {
    font-family: 'Mukta Malar', sans-serif;
    font-weight: 400;
    /* font-size: 30px; */
    font-size: 1.875rem;
    line-height: 49.15px;
    letter-spacing: -1px;
    color: var(--primary-color);
}
.breadcrumb-item{
    color: var(--primary-color)!important;
    /* font-size: 18px; */
    font-size: 1.125rem;
}

.breadcrumb a{
    color: var(--primary-color)!important;
    text-decoration: none;
}

.breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--primary-color)!important;
    content: var(--bs-breadcrumb-divider, ">");
}

.icon-card {
    text-align: center;
    padding: 15px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.icon-card img {
    margin-bottom: 10px;
    width: 95%;
}
.icon-title {
    font-family: 'Mukta Malar', sans-serif;
    font-weight: 400;
    /* font-size: 15px; */
    font-size: 0.9375rem;
    line-height: 22.32px;
    letter-spacing: 0px;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: Auto;
    color: #000;
}

.data-p{
   font-family: 'Mukta Malar', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 28px;
    letter-spacing: 0px;
    color: #000;
}

@media only screen and (max-width: 700px) {
    .section-title {
        font-size: 1.375rem;
        line-height: 30px;
    }
    .comments-title {
        font-size: 1.375rem;
        line-height: 30px;
    }
  }

.footer-text{
   font-family: 'Mukta Malar', sans-serif;
    font-weight: 400;
    font-size: 0.875rem; 
    line-height: 17.36px;
    letter-spacing: -4%;
    color: var(--primary-color)!important;
}

.auth-btn.active {
    background-color: var(--primary-color)!important;
    color: white; 
}

/* latest header */
/* Fixed header setup */
.header-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background-color: var(--primary-hover);
  color: white;
  font-size: 14px;
  padding: 6px 20px;
}

/* Fix main header below top header */
.header-main {
  position: fixed;
  top: 38px; 
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: var(--primary-color);
}

/* .header-top {
  background-color: var(--primary-hover);
  color: white;
  font-size: 14px;
  padding: 6px 20px;
} */

.header-top a, .header-top span {
  margin-left: 5px;
  color: white;
  text-decoration: none;
}
/* .header-main {
    background-color: var(--primary-color); 
} */
.custom-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.custom-nav-item {
  margin: 0;
}

.custom-nav-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.login-button {
  background-color: var(--primary-hover);
  color: white;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
}

.login-button:hover {
  background-color: #0f3d3f;
}
.collapse:not(.show) {
    display: block;
}

#english-lang.active a,
#tamil-lang.active a {
    font-weight: bold;
    background-color: var(--primary-color);
    color: white;
    border-radius: 4px;
    padding: 4px 8px;
}

.navbar-toggler {
    border-color: #fff;
}

.navbar-toggler-icon {
   background-image: url('/assets/web/images/icons/menu-head.png');
}
.font-resize-controls {
    margin-left: 12px;
}
.font-resize-controls button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin: 0 2px;
    min-width: 25px;
    min-height: 25px;
}

.btn-close {
    background-image: url('/assets/web/images/icons/close-btn.png');
}
@media (max-width: 768px) {
  .header-main > .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .collapse.navbar-collapse {
    display: flex !important;
    justify-content: flex-start !important;
    flex-grow: 1;
  }

  .custom-nav {
    justify-content: flex-start !important;
    gap: 10px;
    margin: 0;
    padding-left: 0;
    list-style: none;
  }

  .navbar-toggler {
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  .header-title {
    font-size: 1rem;
  }

  .sub-title {
    font-size: 0.8rem;
  }

  .navbar-title {
    white-space: normal; /* allow wrap if preferred */
    text-align: left;
  }
}

/* Latest Footer */
.footer-section {
  background-color: var(--primary-color);
  color: white;
  position: relative;
  margin-top: 1rem;
}

.footer-section a {
  color: white;
  text-decoration: none;
}

.footer-section a:hover {
  text-decoration: underline;
}

.footer-section .contact-info li,
.footer-section .quick-links li {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.footer-section .footer-bottom {
  background-color: var(--primary-hover); /* Darker than main */
  font-size: 0.75rem;
}

.footer-section .share-btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background-color: #2796a8;
  border: none;
  z-index: 10;
}

.footer-section .share-btn:hover {
  background-color: #1b7c90;
}

/* Responsive styles */
@media (max-width: 768px) {
  .footer-section .contact-info li, .footer-section .quick-links li {
      margin-bottom: 0.5rem;
      font-size: 0.75rem;
  }
}