*{box-sizing:border-box;font-family:Segoe UI, Roboto, Arial, sans-serif}
body{margin:0;background:#f7f9fb;color:#222}
.site-header{
    background-image: url('../img/header.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color:#fff;
    padding:32px 16px;
    text-align:center;
    position: relative;
}
.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 107, 107, 0.85);
    z-index: 1;
}
.site-logo{max-height:180px;width:auto;margin-bottom:24px;display:block;margin-left:auto;margin-right:auto;position:relative;z-index:2}
.header-content{display:flex;flex-direction:column;align-items:center;width:100%;position:relative;z-index:2}
.container{max-width:1200px;margin:24px auto;padding:0 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}
.form-panel{background:#fff;padding:16px;border-radius:8px;box-shadow:0 2px 8px rgba(12,20,32,0.06)}
.list-panel{background:#fff;padding:16px;border-radius:8px;box-shadow:0 2px 8px rgba(12,20,32,0.06)}
.row{margin-bottom:12px}
.row label{display:block;font-weight:600;margin-bottom:6px}
.row input,.row select,.row textarea{width:100%;padding:8px;border:1px solid #d7e0ef;border-radius:6px}
.two-cols{display:flex;gap:12px}
.two-cols > div{flex:1}
.actions{display:flex;gap:8px;align-items:center}
button{background:#ff6b6b;color:#fff;border:none;padding:10px 14px;border-radius:6px;cursor:pointer;transition:background-color 0.2s}
button:hover{background:#ff5252}
button.secondary{background:#6c757d}
.list-actions{margin-top:12px;display:flex;gap:8px}
.booking{border:1px solid #eef3ff;padding:10px;border-radius:6px;margin-bottom:8px}
.booking h3{margin:0 0 6px 0;font-size:16px}
.booking p{margin:4px 0;color:#333}
.booking button{background:#dc3545}
/* List/detail layout inside list-panel */
.split-container{display:grid;gap:12px;grid-template-columns:1fr minmax(260px,420px);align-items:start}
.split-container.three-col{grid-template-columns:1fr minmax(320px,520px)}
.bookings-list{max-height:60vh;overflow:auto;padding-right:6px}
.booking-detail{max-height:60vh;overflow:auto;padding:12px;border-left:1px solid #f0f0f0}
.history-panel{min-width:150px;max-height:55vh;overflow:auto;padding:8px;border-left:1px solid #f0f0f0;background:#fff;font-size:0.95em}
/* Larger history panel variant used on historique.html */
.history-panel-large{width:100%;min-width:300px;max-height:85vh;padding:12px;border-radius:8px;border:1px solid #eee;box-shadow:0 2px 8px rgba(0,0,0,0.04);}

/* History column wrapper controls flex sizing on the history page */
.history-column{min-width:280px}

/* Status colors for history items */
.history-item.entered{border-left:6px solid #ff6b6b;background:linear-gradient(90deg, rgba(255,107,107,0.02), transparent);}
.history-item.done{border-left:6px solid #28a745;background:linear-gradient(90deg, rgba(40,167,69,0.03), transparent);opacity:0.95}
.history-item.cancelled{border-left:6px solid #6c757d;background:linear-gradient(90deg, rgba(108,117,125,0.03), transparent);opacity:0.85}
.history-item .history-edit{background:#3bb54a}
.history-item .history-delete{background:#e55353}
.booking.selected{border-color:#ff6b6b;background:#fff7f7}

/* History list items */
.history-item{padding:6px;border-radius:6px;border:1px solid #f0f0f0;margin-bottom:6px;cursor:pointer}
.history-item.done{opacity:0.7;text-decoration:line-through;background:#f9f9f9}
.history-item:hover{box-shadow:0 1px 4px rgba(0,0,0,0.05)}
/* Collapsible history sections */
.history-section{margin-bottom:10px;border-radius:6px;overflow:hidden}
.history-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:#fff;border:1px solid #eee;padding:8px 10px;border-radius:6px;cursor:pointer;font-weight:600}
.history-toggle .count{background:#ff6b6b;color:#fff;padding:2px 8px;border-radius:999px;font-size:12px}
.history-items{display:none;padding:8px 0}
.history-section.open .history-items{display:block}
.history-toggle .arrow{transition:transform .18s ease}
.history-section.open .history-toggle .arrow{transform:rotate(90deg)}
.site-footer{text-align:center;padding:24px 16px;color:#666}
.footer-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer-logo{
  max-height: 80px;
  width: auto;
}
.footer-content p{
  margin: 0;
  font-size: 1.2em;
  font-weight: 600;
  color: #ff6b6b;
}
.whatsapp-btn{background:#25D366 !important}
@media (max-width:1000px){
  .container{grid-template-columns:1fr}
  .split-container.three-col{grid-template-columns:1fr}
  .split-container{grid-template-columns:1fr}
  .history-panel{width:auto;min-width:auto;border-left:none;border-top:1px solid #f0f0f0}
  .booking-detail{width:auto;border-left:none}
}
@media (max-width:600px){.actions{flex-direction:column}}

/* Receipt preview modal */
.preview-modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:9999}
.preview-modal-content{background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.2);max-width:500px;width:92%;position:relative}
.preview-close-btn{position:absolute;top:8px;right:8px;background:none;border:none;font-size:28px;color:#666;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.preview-close-btn:hover{color:#000}

/* Option / amount buttons */
.option-buttons, .amount-buttons{display:flex;gap:8px;flex-wrap:wrap}
.occasion-btn, .amount-btn{background:#f1f5f8;color:#333;border:1px solid #d7e0ef;padding:6px 10px;border-radius:6px;cursor:pointer}
.occasion-btn.active, .amount-btn.active{background:#ff6b6b;color:#fff;border-color:#ff6b6b}

/* When a modal is open, blur the page content except the modal(s) */
body.modal-open > *:not(.preview-modal){
  filter: blur(4px) saturate(0.95);
  transition: filter 180ms ease-in-out;
  pointer-events: none; /* prevent interacting with background while modal is open */
  user-select: none;
}
/* Prevent body scrolling when modal is open */
body.modal-open{overflow:hidden}

/* Ensure modal remains interactive (undo pointer-events) */
.preview-modal{pointer-events:auto}