html::before {
  
  position: fixed;
  inset: 0;
  z-index: -1;
  margin: auto;
  width: fit-content;
  height: fit-content;
  font-family: monospace;
  opacity: 0.6;
  background: rebeccapurple;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

.nav-logo-img {
  height: 30px; 
  width: auto;
  object-fit: contain;
}

/* ඩෙස්ක්ටොප් හෝ සාමාන්‍ය ස්ටයිල් එක */
.container {
  display: flex;
  gap: 20px;
}

/* මොබයිල් තිර සඳහා (උදාහරණයක් ලෙස තිරය 768px වඩා අඩු නම්) */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* ෆෝන් එකේදී අයිතම එකක් යටට එකක් වැටේ */
  }
}

/* Destination card — save/heart button */
.dest-card{ position:relative; }
.dest-save-btn{
  position:absolute; top:14px; left:14px; z-index:5;
  width:36px; height:36px; border-radius:50%;
  background:rgba(14,42,32,0.55); backdrop-filter:blur(2px);
  border:1px solid rgba(246,243,234,0.25);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 0.25s, transform 0.2s;
}
.dest-save-btn:hover{ background:rgba(14,42,32,0.8); transform:scale(1.08); }
.dest-save-btn svg{
  width:18px; height:18px;
  fill:none; stroke:#F6F3EA; stroke-width:2;
  transition:fill 0.25s, stroke 0.25s;
}
.dest-save-btn.saved svg{ fill:#E3A73A; stroke:#E3A73A; }

/* Dynamic Comment Card Style */
.comment-card-item {
    background: rgba(246, 243, 234, 0.03); /* Dark green background එකට ගැලපෙන card color එක */
    border: 1px solid rgba(246, 243, 234, 0.08);
    padding: 24px;
    border-radius: 20px;
    margin-bottom: 20px;
    color: #F6F3EA;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    animation: fadeInComment 0.4s ease-in-out;
}

/* Gold Stars styling */
.comment-stars {
    color: #E3A73A; /* රන්වන් පාට */
    font-size: 1.1rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

/* Comment Message styling */
.comment-message-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 16px;
    color: rgba(246, 243, 234, 0.9);
}

/* User profile layout inside card */
.comment-user-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

/* Circle Avatar */
.comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

/* Fallback avatar (initial letter) when a commenter has no photo */
.comment-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E3A73A;
    color: #123328;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.comment-user-details {
    display: flex;
    flex-direction: column;
}

/* Name and Location */
.comment-username {
    font-weight: 600;
    font-size: 0.95rem;
    color: #F6F3EA;
}

.comment-location {
    font-size: 0.85rem;
    color: rgba(246, 243, 234, 0.5);
}

/* Smooth appearance animation */
@keyframes fadeInComment {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------
   Dropdown සහ Date Input Styles (Custom Dark Theme)
------------------------------------------------------- */


.field select, .field input[type="date"] {
  background: #0d2218 !important; /* කෙලින්ම තද කොළ පාට Force කරනවා */
  border: 1px solid rgba(246, 243, 234, 0.2) !important;
  color: #ffffff !important; /* අකුරු සුදු පාට Force කරනවා */
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  width: 100%;
  outline: none;
  cursor: pointer;
  margin-top: 4px;
  padding: 8px 12px !important;
  border-radius: 8px;
  
  appearance: none !important; 
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
}
/* Search section එකේ position එක හරිගැස්සීම */
#search {
  position: relative;
  z-index: 10;
  margin-top: -46px; /* මේකෙන් widget එක Hero එක උඩට ඇදෙනවා */
}

/* දැනට තියෙන .search-widget එකේ margin එක අයින් කරන්න, මොකද දැන් අපි section එකට දෙනවා */
.search-widget {
  margin-top: 0 !important; 
}
/* Rating Container Styles */
.rating-container {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rating-container label {
  color: #ffffff; /* සුදු පාට අකුරු */
  font-family: sans-serif;
  font-size: 14px;
}

.my-rating-container .rating-stars-wrapper { 
    display: flex; 
    gap: 10px; 
    cursor: pointer; 
    margin-top: 10px;
}
.my-rating-container .rating-star { 
    font-size: 35px; 
    color: #ccc; 
    transition: 0.3s; 
}
.my-rating-container .rating-star.active { 
    color: #ffb703 !important; 
}
.stars-wrapper { display: flex; gap: 5px; cursor: pointer; margin-top: 10px; }
.rating-star { font-size: 35px; color: #ccc; transition: 0.2s; }
.rating-star.active { color: #ffb703 !important; }