/* ===============================
   MOSQUE TILE GRID
=============================== */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:0px;
  padding:5px;
}

/* ===============================
   TILE CARD (MARBLE + GOLD)
=============================== */
.tile-card {
    background: #fff;
    border-radius: 0px;
    padding: 20px 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
    font-family: 'Poppins';
}

/* GOLD TOP LINE */
.tile-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  /*background:linear-gradient(90deg,#d4af37,#f8e08e,#d4af37);*/
}

/* HOVER EFFECT */
.tile-card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

/* ===============================
   NAME TEXT
=============================== */
.tile-name{
  font-size:15px;
  font-weight:600;
  color:#333;
  margin-bottom:8px;
}

/* ===============================
   PRICE
=============================== */
.tile-price{
  font-size:14px;
  color:#2e7d32;
  font-weight:700;
  margin-bottom:10px;
}

/* ===============================
   BUTTON
=============================== */
.select-tile{
  background:#ffbd59;
  color:#000;
  padding:5px 18px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-size:15px;
  transition:.3s;
  font-weight:500;
}

.select-tile:hover{
background: #2a896f;
color:#fff;
}

/* ===============================
   BADGES
=============================== */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;

}

.tile.available {
    border: 2px solid #d8b6a1;
}

.tile.reserved .tile-card {
    padding: 24px 15px;
    border: 2px solid #d8b6a1;
}

.tile.sold .tile-card {
    padding: 24px 15px;
    border: 2px solid #d8b6a1;
}
/*.reserved{
  background:#fff3cd;
  color:#856404;
}

.sold{
  background:#dc3545;
  color:#fff;
}*/

.tile-status span.reserved {
    background: #2a896f;
    padding: 10px 18px;
    font-size: 15px;
   
    font-weight: 500;
     
}

.tile-status span.sold {
    background: #2a896f;
    padding: 10px 18px;
    font-size: 15px;
   
    font-weight: 500;
   
}

/* ===============================
   MODAL BACKDROP
=============================== */
.tile-modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(5px);
  z-index:999999;
  justify-content:center;
  align-items:center;
}

.tile-modal.active{
  display:flex;
}

/* ===============================
   MODAL BOX (ELEGANT)
=============================== */
.modal-box{
  background:linear-gradient(145deg,#ffffff,#f7f3e9);
  padding:30px;
  border-radius:18px;
  width:360px;
  text-align:center;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  animation:fadeUp .3s ease;
}

/* TITLE */
.modal-box h3{
  color:#2a896f;
  margin-bottom:10px;
}

/* SELECTED TILE */
#selectedTileText{
  font-weight:600;
  margin-bottom:10px;
}

/* INPUT */
.modal-box input{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #ddd;
  margin:10px 0;
  outline:none;
}

.modal-box input:focus{
  border-color:#2e7d32;
  box-shadow:0 0 0 2px rgba(46,125,50,0.1);
}

/* BUTTONS */
#continueBtn{
  background:#ffbd59;
  color:#fff;
  border:none;
  padding:12px;
  width:100%;
  border-radius:10px;
  cursor:pointer;
}

#paymentBtn{
  display:none;
  background:#ffbd59;
  color:#fff;
  border:none;
  padding:12px;
  width:100%;
  border-radius:10px;
  margin-top:10px;
  cursor:pointer;
}

/* CLOSE */
.close-modal{
  position:absolute;
  top:12px;
  right:15px;
  cursor:pointer;
  font-size:18px;
  color:#888;
}

.close-modal:hover{
  color:#000;
}

/* ANIMATION */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}