 <style>
    body {
      margin: 0;
       font-family: 'Varela Round', sans-serif;
      background: #fffafc;
      direction: rtl;
      color: #333;
    }
    header {
      background: url('<?= htmlspecialchars($settings['header_bg_url'] ?? '') ?>') center/cover no-repeat;
      padding: 80px 20px;
      text-align: center;
      color: white;
      position: relative;
    }
    header::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.5);
    }
    header h1, header p {
      position: relative;
      z-index: 1;
    }
    section {
      padding: 50px 20px;
      max-width: 1000px;
      margin: auto;
    }
    section h2 {
      color: #d63384;
      font-size: 28px;
      margin-bottom: 20px;
      text-align: center;
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }
    .gallery-item {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .gallery-item img {
      width: 100%;
      display: block;
    }
    .watermark {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background: rgba(255,255,255,0.7);
      padding: 4px 8px;
      font-size: 14px;
      color: #d63384;
      border-radius: 6px;
      font-weight: bold;
    }
    .reviews {
      background: #fff0f5;
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-top: 40px;
      text-align: center;
    }
    .review {
      font-size: 16px;
      line-height: 1.6;
      transition: opacity 0.6s ease;
    }
    footer {
      background-color: #f8cdda;
      text-align: center;
      padding: 30px;
      color: white;
      font-size: 15px;
      margin-top: 60px;
    }
    transition: background 0.3s, transform 0.3s;
&:hover { background: #ffe4ec; transform: scale(1.03); }
.calendar table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.calendar th, .calendar td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
.calendar th {
  background-color: #fce4ec;
  color: #d63384;
}
.calendar td button {
  background-color: #ffe3f1;
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s;
}
.calendar td button:hover {
  background-color: #f8cdda;
}
.calendar td button:disabled {
  background-color: #eee;
  color: #999;
  cursor: not-allowed;
}
.form-box h2 {
  color: #d63384;
}
.form-box button {
  background-color: #d63384;
}
.form-box button:hover {
  background-color: #c2185b;
}
#day-details {
  margin-top: 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 25px;
}
.slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.slot-list button {
  background-color: #a5d6a7;
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s;
}
.slot-list button:hover {
  background-color: #81c784;
}
.slot-list button.selected {
  border: 2px solid #2575fc;
}
.slot-list button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 15px;
}
.slot-list button {
  background-color: #a5d6a7;
  color: white;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
}
.slot-list button:hover {
  background-color: #81c784;
  transform: scale(1.05);
}
.slot-list button.selected {
  border: 2px solid #2575fc;
  background-color: #66bb6a;
}
.slot-list button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.form-box form {
  display: flex;
  flex-direction: column;
}
.form-box label {
  margin-top: 15px;
  font-weight: bold;
  color: #d63384;
}
.form-box input, .form-box select {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin-top: 5px;
  font-size: 1em;
}
.form-box button[type="submit"] {
  background-color: #d63384;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.3s;
}
.form-box button[type="submit"]:hover {
  background-color: #c2185b;
}

  </style>