@font-face{
  font-family: Vazirmatn;
  src: local('Vazirmatn');
  font-weight: 400;
}
:root{
  --bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --surface: rgba(255, 255, 255, 0.1);
  --card: rgba(255, 255, 255, 0.15);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.7);
  --primary: #4f46e5;
  --primary-light: #6366f1;
  --accent: #ec4899;
  --accent-light: #f472b6;
  --accent-dark: #be185d;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --glass-border: 1px solid rgba(255, 255, 255, 0.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Vazirmatn,system-ui,sans-serif;min-height:100vh}
.container{max-width:1200px;margin:0 auto;padding:1rem}
header{display:flex;align-items:center;justify-content:space-between}
.link{color:var(--primary);text-decoration:none}
.grid{display:grid;gap:1rem;margin-top:1rem}
.two-col{grid-template-columns:2fr 3fr}
.three-col{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:var(--glass-border);border-radius:1.5rem;padding:1.5rem;box-shadow:var(--glass-shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.form-row{display:grid;grid-template-columns:2fr 1fr auto;gap:.75rem;align-items:end}
.form-col{display:flex;flex-direction:column;gap:.6rem}
input,textarea{
  background:var(--surface);color:var(--text);border:var(--glass-border);
  border-radius:1rem;padding:.8rem 1rem;outline:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:all 0.3s ease;
}
input:focus,textarea:focus{border-color:var(--primary)}
.btn{border:none;border-radius:1rem;padding:.8rem 1.2rem;cursor:pointer;transition:all 0.3s ease;font-weight:600;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--primary-light));color:var(--text);font-weight:700;box-shadow:0 4px 15px rgba(79, 70, 229, 0.4)}
.btn.primary:hover{background:linear-gradient(135deg, var(--primary-light), var(--primary));transform:translateY(-2px);box-shadow:0 6px 20px rgba(79, 70, 229, 0.6)}
.btn.secondary{background:var(--surface);border:var(--glass-border);color:var(--text)}
.btn.secondary:hover{background:rgba(255, 255, 255, 0.2);border-color:var(--primary);transform:translateY(-1px)}
.list{display:grid;gap:.5rem;margin-top:.75rem}
.list .item{display:flex;align-items:center;justify-content:space-between;border:var(--glass-border);border-radius:1rem;padding:1rem;background:var(--surface);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:all 0.3s ease}
.list .item.new-booking{background:linear-gradient(135deg, #10b981, #34d399);color:white;border:2px solid #059669;box-shadow:0 0 20px rgba(16, 185, 129, 0.3);animation:slideInNew 0.5s ease-out}
@keyframes slideInNew{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.list .item:hover{background:rgba(255, 255, 255, 0.15);transform:translateY(-1px)}
.badge{padding:.2rem .5rem;border-radius:.5rem;border:1px solid var(--border);font-size:.8rem;color:var(--text)}
.badge.success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.32);color:#bbf7d0}
.badge.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.32);color:#fde68a}
.actions{margin-top:.75rem;display:flex;gap:.75rem;align-items:center}
.footer{color:var(--muted);text-align:center;margin-top:2rem}
.empty-state{color:var(--muted)}

/* Calendar Styles */
.calendar-container {
  background: var(--surface);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.calendar-header h3 {
  margin: 0;
  color: var(--primary);
  font-size: 1.2rem;
}

.calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  text-align: center;
  font-weight: bold;
  color: var(--primary);
  font-size: 0.9rem;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  border: var(--glass-border);
  background: var(--surface);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.calendar-day:hover {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: var(--text);
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

.calendar-day.selected {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.6);
}

.calendar-day.has-slots {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--text);
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
}

.calendar-day.has-bookings {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: var(--text);
  box-shadow: 0 4px 15px rgba(190, 24, 93, 0.4);
}

.calendar-day.has-new-bookings {
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  border-color: #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
  animation: pulse-new 2s infinite;
}

@keyframes pulse-new {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.calendar-day.other-month {
  color: var(--muted);
  opacity: 0.5;
}

.calendar-day.today {
  border: 2px solid var(--primary);
  font-weight: bold;
}

/* Time Selection */
.time-selection {
  background: var(--surface);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.time-selection h3 {
  margin: 0 0 1rem 0;
  color: var(--primary);
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.time-slot {
  padding: 0.8rem;
  text-align: center;
  border: var(--glass-border);
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  background: var(--surface);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.time-slot:hover {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: var(--text);
  border-color: var(--primary);
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

.time-slot.selected {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.6);
}

.time-slot.booked {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: var(--text);
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: 0 4px 15px rgba(190, 24, 93, 0.4);
}

.time-slot.booked.new-booking {
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  opacity: 1;
  border-color: #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
  animation: pulse-new 2s infinite;
}

  /* File Upload Styles */
  .file-upload {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .file-upload label {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
  }

  .file-upload input[type="file"] {
    background: var(--surface);
    border: var(--glass-border);
    border-radius: 1rem;
    padding: 0.8rem;
    color: var(--text);
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
  }

  .file-upload input[type="file"]:hover {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.15);
  }

  .file-upload input[type="file"]::-webkit-file-upload-button {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: var(--text);
    border: none;
    border-radius: 0.8rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    margin-right: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .file-upload input[type="file"]::-webkit-file-upload-button:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
  }

  /* Color Picker Styles */
  .color-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .color-picker label {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
  }

  /* From Uiverse.io by Cobp */ 
  .container-items {
    display: flex;
    transform-style: preserve-3d;
    transform: perspective(1000px);
    gap: 0.5rem;
  }

  .item-color {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 40px;
    border: none;
    outline: none;
    transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
    cursor: pointer;
    background: transparent;
  }

  .item-color::after {
    position: absolute;
    content: "";
    inset: 0;
    width: 40px;
    height: 40px;
    background-color: var(--color);
    border-radius: 6px;
    transform: scale(1.2);
    pointer-events: none;
    transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
  }

  .item-color::before {
    position: absolute;
    content: attr(aria-color);
    left: 65%;
    bottom: 52px;
    font-size: 8px;
    line-height: 12px;
    transform: translateX(-50%);
    padding: 2px 0.25rem;
    background-color: #ffffff;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
  }

  .item-color:hover {
    transform: scale(1.5);
    z-index: 99999;
  }

  .item-color:hover::before {
    opacity: 1;
    visibility: visible;
  }

  .item-color:active::after {
    transform: scale(1.1);
  }

  .item-color:focus::before {
    content: "✅";
  }

  .item-color.selected::after {
    border: 3px solid #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }

  .item-color:hover + * {
    transform: scale(1.3);
    z-index: 9999;
  }

  .item-color:hover + * + * {
    transform: scale(1.15);
    z-index: 999;
  }

  .item-color:has(+ *:hover) {
    transform: scale(1.3);
    z-index: 9999;
  }

  .item-color:has(+ * + *:hover) {
    transform: scale(1.15);
    z-index: 999;
  }

  @media (max-width:1100px){
  .container{padding:0.5rem}
  .two-col{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr 1fr auto}
  .time-grid{grid-template-columns: repeat(auto-fill, minmax(70px, 1fr))}
  
  /* Header responsive */
  header{flex-direction:column;gap:1rem;text-align:center}
  h1{font-size:1.8rem}
  
  /* Form responsive */
  .form-row{grid-template-columns:1fr;gap:0.5rem}
  input,textarea{padding:0.6rem 0.8rem;font-size:0.9rem}
  .btn{padding:0.6rem 1rem;font-size:0.9rem}
  
  /* Cards responsive */
  .card{padding:1rem;margin-bottom:0.8rem}
  h2{font-size:1.2rem}
  
  /* Calendar responsive */
  .calendar-container{padding:1rem}
  .calendar-grid{gap:0.25rem}
  .calendar-day{font-size:0.8rem;padding:0.5rem}
  .calendar-weekdays{font-size:0.8rem}
  
  /* Time selection responsive */
  .time-selection{padding:1rem}
  .time-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:0.4rem}
  .time-slot{padding:0.6rem;font-size:0.8rem}
  
  /* Color picker responsive */
  .container-items{gap:0.3rem}
  .item-color{width:28px;height:36px}
  .item-color::after{width:36px;height:36px}
  
  /* List items responsive */
  .list .item{padding:0.8rem}
  .list .item strong{font-size:0.9rem}
  .list .item div{font-size:0.8rem}
}

@media (max-width:480px){
  .container{padding:0.3rem}
  
  /* Header responsive */
  h1{font-size:1.5rem}
  
  /* Calendar responsive */
  .calendar-container{padding:0.8rem}
  .calendar-day{font-size:0.7rem;padding:0.4rem}
  .calendar-weekdays{font-size:0.7rem}
  
  /* Time selection responsive */
  .time-selection{padding:0.8rem}
  .time-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:0.3rem}
  .time-slot{padding:0.5rem;font-size:0.7rem}
  
  /* Form responsive */
  input,textarea{padding:0.5rem 0.6rem;font-size:0.8rem}
  .btn{padding:0.5rem 0.8rem;font-size:0.8rem}
  
  /* Cards responsive */
  .card{padding:0.8rem;margin-bottom:0.6rem}
  h2{font-size:1.1rem}
  
  /* Color picker responsive */
  .container-items{gap:0.2rem}
  .item-color{width:24px;height:32px}
  .item-color::after{width:32px;height:32px}
  
  /* List items responsive */
  .list .item{padding:0.6rem}
  .list .item strong{font-size:0.8rem}
  .list .item div{font-size:0.7rem}
}