/* ═══════════════════════════════════════════
   RESERVAR — Full viewport, no-scroll layout
   v3 — Blueprint style
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --green: #3CB371;
  --green-dark: #2d8a57;
  --green-light: #e8f5ee;
  --occupied: #e74c3c;
  --upcoming: #f39c12;
  --available: #3CB371;
  --room-color: #6c5ce7;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --border: rgba(0,0,0,0.08);
  --wall: #c8ccd4;
  --wall-inner: #dce0e6;
  --radius: 12px;
  --radius-sm: 8px;
  --topbar-h: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%; overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
}

/* ═══ TOPBAR ═══ */
.res-topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 10;
}
.res-back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--text); text-decoration: none; transition: background 0.2s;
}
.res-back:hover { background: var(--bg); }
.res-logo img { height: 28px; }
.res-controls { display: flex; align-items: center; gap: 16px; margin-left: auto; }

.res-select-wrap { position: relative; display: flex; align-items: center; }
.res-select-icon { position: absolute; left: 10px; pointer-events: none; color: var(--green); }
.res-select-wrap select {
  appearance: none;
  padding: 8px 32px 8px 32px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; font-weight: 600;
  background: var(--surface); cursor: pointer; color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color 0.2s;
}
.res-select-wrap select:focus { outline: none; border-color: var(--green); }

.res-floor-tabs {
  display: flex; gap: 2px;
  background: var(--bg); border-radius: var(--radius-sm); padding: 3px;
}
.res-floor-tab {
  border: none; background: transparent;
  padding: 6px 16px; border-radius: 6px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; transition: all 0.25s;
}
.res-floor-tab.active {
  background: var(--green); color: #fff;
  box-shadow: 0 2px 8px rgba(60,179,113,0.3);
}
.res-floor-tab:not(.active):hover { color: var(--text); }

.res-wa-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #25D366; color: #fff; text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.res-wa-btn:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(37,211,102,0.4); }

/* ═══ MAIN LAYOUT ═══ */
.res-main {
  display: grid; grid-template-columns: 1fr 300px;
  height: calc(100% - var(--topbar-h)); overflow: hidden;
}

/* ═══ PLAN AREA ═══ */
.res-plan-area {
  display: flex; flex-direction: column;
  overflow: hidden; padding: 16px; gap: 8px;
}
.res-plan-container {
  flex: 1;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.res-plan-container svg { width: 100%; height: 100%; }

/* ═══ SVG BLUEPRINT STYLES ═══ */

/* Building outline */
.fp-outline {
  fill: #ffffff;
  stroke: var(--wall);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

/* Interior walls — same style as outline but thinner */
.fp-wall {
  stroke: var(--wall-inner);
  stroke-width: 0.5;
}

/* Spaces — SAME thin strokes as walls, NO colored borders */
.fp-space {
  fill: transparent;
  stroke: var(--wall-inner);
  stroke-width: 0.5;
  rx: 2; ry: 2;
  cursor: pointer;
  transition: fill 0.2s ease;
}

/* Status tints — only on hover/select, not default */
.fp-space.available:hover {
  fill: rgba(60, 179, 113, 0.1);
}
.fp-space.selected {
  fill: rgba(60, 179, 113, 0.15);
  stroke: var(--green);
  stroke-width: 0.8;
}
.fp-space.occupied {
  cursor: default;
  fill: rgba(0,0,0,0.02);
}
.fp-space.upcoming {
  cursor: default;
  fill: rgba(0,0,0,0.015);
}
.fp-space.room-type:hover {
  fill: rgba(108, 92, 231, 0.08);
}
.fp-space.room-type.selected {
  fill: rgba(108, 92, 231, 0.12);
  stroke: var(--room-color);
  stroke-width: 0.8;
}

/* Status dots — small, in corner */
.fp-dot {
  pointer-events: none;
  filter: none;
}
.fp-dot.available { fill: var(--available); }
.fp-dot.occupied { fill: var(--occupied); }
.fp-dot.upcoming { fill: var(--upcoming); }
.fp-dot.room-dot { fill: var(--room-color); }

/* Labels */
.fp-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  fill: #4a5568;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
}
.fp-label-sm {
  font-family: 'Inter', sans-serif;
  font-size: 7px; font-weight: 600;
  fill: #718096;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
}
.fp-sublabel {
  font-family: 'Inter', sans-serif;
  font-size: 7px; font-weight: 400;
  fill: #a0aec0;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
}
.fp-area-label {
  font-family: 'Inter', sans-serif;
  font-size: 8px; font-weight: 700;
  fill: #a0aec0;
  pointer-events: none;
  text-anchor: start;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.fp-common-label {
  font-family: 'Inter', sans-serif;
  font-size: 8px; font-weight: 500;
  fill: #cbd5e0;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
}

/* ═══ LEGEND ═══ */
.res-legend {
  display: flex; gap: 20px; justify-content: center;
  padding: 6px 0; flex-shrink: 0;
}
.res-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--text-muted);
}
.res-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.res-legend-dot.available { background: var(--available); }
.res-legend-dot.occupied { background: var(--occupied); }
.res-legend-dot.upcoming { background: var(--upcoming); }
.res-legend-dot.room { background: var(--room-color); }

/* ═══ SIDEBAR ═══ */
.res-sidebar {
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto;
}
.res-sidebar-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-muted); text-align: center; gap: 12px; padding: 24px;
}
.res-sidebar-empty svg { opacity: 0.3; }
.res-sidebar-empty p { font-size: 13px; line-height: 1.6; }

.res-sidebar-detail { padding: 0; }
.res-sidebar-detail.hidden { display: none; }

.res-detail-photo {
  width: 100%;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
}
.res-detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.res-detail-header { margin-bottom: 16px; padding: 16px 20px 0; }


.res-detail-status {
  display: inline-block;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.res-detail-status.available { background: rgba(60,179,113,0.12); color: var(--green-dark); }
.res-detail-status.occupied { background: rgba(231,76,60,0.12); color: var(--occupied); }
.res-detail-status.upcoming { background: rgba(243,156,18,0.12); color: var(--upcoming); }
.res-detail-status.room-type { background: rgba(108,92,231,0.12); color: var(--room-color); }

.res-detail-header h3 { font-size: 20px; font-weight: 800; margin: 4px 0; letter-spacing: -0.5px; }
.res-detail-type { font-size: 13px; color: var(--text-muted); font-weight: 500; }

.res-detail-specs {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.res-spec {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-muted);
}
.res-spec svg { color: var(--green); flex-shrink: 0; }

.res-detail-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; padding: 12px 20px 0; }
.res-price-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.res-price-value { font-size: 24px; font-weight: 800; letter-spacing: -1px; color: var(--text); }

.res-detail-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; padding: 0 20px; }
.res-feature-tag {
  padding: 4px 10px; background: var(--bg);
  border-radius: 20px; font-size: 11px; font-weight: 500; color: var(--text-muted);
}

.res-detail-actions { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 20px; }
.res-btn-reserve {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; background: var(--green); color: #fff;
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 700;
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px;
  transition: all 0.3s;
}
.res-btn-reserve:hover { background: var(--green-dark); box-shadow: 0 4px 16px rgba(60,179,113,0.3); transform: translateY(-1px); }
.res-btn-contact {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all 0.2s;
}
.res-btn-contact:hover { background: var(--bg); border-color: #25D366; color: #25D366; }
.res-btn-contact svg { color: #25D366; }

/* ═══ DESKTOP PAN ═══ */
.res-plan-container {
  cursor: grab;
}
.res-plan-container.dragging {
  cursor: grabbing;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .res-topbar { padding: 0 12px; gap: 8px; }
  .res-logo img { height: 22px; }
  .res-select-wrap select { font-size: 12px; padding: 6px 24px 6px 28px; }
  .res-floor-tab { padding: 5px 12px; font-size: 11px; }

  /* Map goes FULLSCREEN — no grid split */
  .res-main {
    display: block;
    position: relative;
    height: calc(100% - var(--topbar-h));
    overflow: hidden;
  }

  .res-plan-area {
    position: absolute;
    inset: 0;
    padding: 8px;
    gap: 6px;
    z-index: 1;
  }

  /* Plan container — full area with zoom/pan */
  .res-plan-container {
    overflow: hidden;
    position: relative;
    touch-action: none;
    cursor: grab;
  }
  .res-plan-container:active { cursor: grabbing; }

  /* SVG fits fully inside container — no cropping */
  .res-plan-container svg {
    width: 100%;
    height: 100%;
    transition: none;
  }

  /* Legend — floating over map */
  .res-legend {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 20px;
    gap: 10px;
    flex-wrap: nowrap;
    font-size: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    z-index: 3;
    white-space: nowrap;
  }

  /* ═══ BACKDROP — tap outside to close ═══ */
  .res-sheet-backdrop {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 9;
  }
  .res-sheet-backdrop.visible {
    display: block;
  }

  /* ═══ SIDEBAR → FLOATING BOTTOM SHEET ═══ */
  .res-sidebar {
    position: absolute;
    overflow: hidden;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
    max-height: 60vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
    border-left: none;
    border-top: none;
  }
  .res-sidebar.sheet-visible {
    transform: translateY(0);
  }

  /* Empty state — hide on mobile (map speaks for itself) */
  .res-sidebar-empty { display: none !important; }

  /* Sheet handle — big & draggable */
  .res-sheet-handle {
    display: flex !important;
    justify-content: center;
    padding: 12px 0 6px;
    cursor: grab;
  }
  .res-sheet-handle span {
    width: 40px;
    height: 5px;
    background: #c5c9ce;
    border-radius: 3px;
  }

  /* Close button — larger & more visible */
  .res-sheet-close {
    display: flex !important;
    position: absolute;
    top: 8px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 12;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
  .res-sheet-close:active { background: rgba(0,0,0,0.7); }

  .res-sidebar-detail { padding: 0; margin: 0; }
  .res-detail-photo { height: 140px; border-radius: 0; margin: 0; }
  .res-detail-header { padding: 12px 16px 0; margin-bottom: 8px; }
  .res-detail-header h3 { font-size: 17px; }
  .res-detail-specs { padding: 8px 16px; }
  .res-detail-price { padding: 8px 16px 0; }
  .res-price-value { font-size: 20px; }
  .res-detail-features { padding: 0 16px; margin-bottom: 8px; }
  .res-detail-actions { flex-direction: row; padding: 0 16px 16px; }
  .res-btn-reserve { flex: 1; padding: 12px; font-size: 13px; }
  .res-btn-contact { flex: 0; padding: 12px 16px; }

  /* Zoom controls — above legend */
  .res-zoom-controls {
    display: flex !important;
    position: absolute;
    bottom: 48px;
    right: 16px;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
  }
}

/* Sheet handle, close, backdrop — hidden on desktop */
.res-sheet-handle { display: none; }
.res-sheet-close { display: none; }
.res-sheet-backdrop { display: none; }

/* Zoom controls — hidden on desktop */
.res-zoom-controls {
  display: none;
}
.res-zoom-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 18px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s;
}
.res-zoom-btn:active { background: var(--bg); }

/* ═══ ANIMATIONS ═══ */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.res-sidebar-detail:not(.hidden) { animation: fadeInUp 0.3s ease; }
.res-plan-container.transitioning svg { animation: planSwitch 0.3s ease; }
@keyframes planSwitch { 0% { opacity: 0; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }