/* Styles for sakan.html and the new cards */

.sakan-page {
  padding: 18px;
  margin-top: 110px; /* حتى ما يجي المحتوى تحت الـ navbar */
}


.page-title {
 
  font-size: 32px; /* أكبر شوي */
  font-weight: 800;
  color: var(--green); /* حسب ألوانك */
  font-family: 'Qahwa Arabic', serif; /* مطابق للـ title عندك */
  text-align:right;

}

.shelters-grid {
  display: grid;
  /* 6 أعمدة زي الصورة */
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap: 20px; /* مسافة أكبر شوي بين الكروت */
  align-items: start;
}

/* Responsive adjustments */
@media (max-width: 1200px) { /* لابتوبات متوسطة */
  .shelters-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}
@media (max-width: 992px) { /* تابلت */
  .shelters-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
@media (max-width: 768px) { /* موبايلات كبيرة */
  .shelters-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 15px;
  }
  .sakan-page { padding: 10px; margin-top: 80px; } /* نخفف الـ margin-top */
  .page-title { font-size: 26px; }
}
@media (max-width: 576px) { /* موبايلات صغيرة */
  .shelters-grid {
    grid-template-columns: 1fr; /* عمود واحد */
  }
  .sakan-page { padding: 10px; margin-top: 70px; }
  .page-title { font-size: 24px; margin-bottom: 12px; }
}


.shelter-card {
  text-decoration: none;
  color: var(--abyad); /* لون النص داخل الكرت */
  display: block;
  background: var(--brik ); /* خلفية بيضا للكروت */
  border-radius: 18px; /* زوايا دائرية */
  overflow: hidden; /* لضمان إن الصورة ما تطلع برا */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* ظل خفيف */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shelter-card:hover {
  transform: translateY(-5px); /* حركة خفيفة عند الـ hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-img {
  position: relative;
  height: 160px; /* ارتفاع الصورة */
  background: #eee; /* خلفية لو الصورة لسه بتحمل */
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* لتغطية المساحة بدون تشويه */
  display: block;
}

.status-pill {
  position: absolute;
  top: 15px; /* أعلى شوي */
  left: 15px; /* يمين شوي */
  background: var(--green); /* نفس لون "متوفر" في الصور */
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 14px; /* أكبر شوي */
  border-radius: 12px; /* زوايا أكبر */
  z-index: 2;
}

.status-pill.booked {
  background: var(--brik, #c0622a);
}

.card-body {
  padding: 12px; /* مسافة داخلية */
  color: var(--abyad); /* لون النص داخل الكرت */
}

.card-title {
  font-size: 18px; /* حجم الخط */
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--abyad); /* لون النص */
  font-family: 'Qahwa Arabic', serif; /* نفس خط العناوين */
}

.card-meta {
  display: flex;
  flex-wrap: wrap; /* لو ما وسعت، تنزل تحت */
  gap: 12px; /* مسافة بين العناصر */
  font-size: 13px;
  color: var(--abyad); /* لون رمادي مزرق */
}
.card-meta span {
  display: inline-flex; /* لضمان alignment لو فيه أسعار */
  align-items: center;
  gap: 4px; /* مسافة بين الرقم والـ $ */
}
.card-meta span::after { /* إضافة علامة الدولار */
 
  font-size: 11px; /* أصغر شوي */
}


/* رسائل التحميل وعدم وجود نتائج */
.loading, .empty, .error {
  grid-column: 1 / -1; /* يمتد على كل الأعمدة */
  text-align: center;
  padding: 30px 0;
  font-weight: 700;
  color: var(--blue-gray);
  font-size: 18px;
}

.error {
  color: var(--red); /* لون الخطأ أحمر */
}
.arrow-icon {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--green);
  border-radius: 50%;
  text-decoration: none;
  color:var(--green);
  cursor:pointer;
}
.arrow-icon:hover{
    background: var(--green);
    color: white;
}
.nav-btn {
  background: transparent;
  border: none;
  color: var(--brik);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.3s;
  text-decoration: none;
}



.available-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.back-link{
  color: var(--green);
  text-decoration: none;
  font-weight: 800;
  border: 2px solid var(--green);
  padding: 8px 14px;
  border-radius: 14px;
}
.back-link:hover{
  background: var(--green);
  color: #fff;
}