:root{--red:#FF69B4;--white:#fff}
*{box-sizing:border-box}
.btn{padding:8px 12px;border-radius:6px;border:1px solid #ccc;background:#fff;cursor:pointer;transition:transform 120ms ease, box-shadow 120ms ease, background 120ms ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,0.08)}
.btn.primary{background:var(--red);color:var(--white);border-color:var(--red)}

/* Color variables for light/dark mode */
:root{--bg:#ffffff;--text:#111111;--card:#ffffff;--muted:#666666}
body{font-family:Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text);transition:background 300ms ease,color 300ms ease}

/* Dark mode */
body.dark{--bg:#0f1720;--text:#e6eef6;--card:#0b1220;--muted:#9aa6b2}

.site-header{
  background:var(--red);
  color:var(--white);
  padding:40px;
  text-align:center;
  position:relative;
  z-index:100;
  border-radius:24px 24px 24px 24px;
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
  margin-top:12px;
}
.site-header h1{margin:0;font-size:28px}
.subtitle{margin:12px 0 0;font-size:14px;opacity:0.95}
.grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  padding:18px;
  max-width:1200px;
  margin:20px auto 20px auto
}
.box{background:#fff;border:2px solid var(--red);height:320px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0;cursor:pointer;border-radius:14px;overflow:hidden;box-shadow:0 6px 14px rgba(200,16,46,0.06);transition:transform 180ms ease, box-shadow 180ms ease}
.box img{
  /* Make any image fill the entire box without gaps */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.box img.placeholder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

.box:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 18px 40px rgba(0,0,0,0.12)}

.empty-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;background:linear-gradient(to bottom, rgba(255,255,255,0.0), rgba(255,255,255,0.65));padding:12px 12px 20px 12px;z-index:2}
.box{position:relative}
.empty{color:var(--red);font-weight:700;background:rgba(255,255,255,0.75);padding:6px 10px;border-radius:8px}

/* Make the overlay upload button green */
.empty-overlay .upload-btn{background:#28a745;color:#fff;border-color:#28a745;padding:8px 12px;border-radius:8px}
.empty-overlay .upload-btn:hover{background:#239238}
.box .empty{color:var(--red);font-weight:600}
.btn{padding:8px 12px;border-radius:6px;border:1px solid #ccc;background:#fff;cursor:pointer}
.btn.primary{background:var(--red);color:var(--white);border-color:var(--red)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:2000}
.modal.hidden{display:none}
.modal-content{background:var(--card);padding:16px;border-radius:8px;max-width:420px;width:100%;border:4px solid var(--red)}
.modal-content h2{margin-top:0}
.modal-content form{display:flex;flex-direction:column;gap:8px}
.modal-content label{display:flex;flex-direction:column;font-size:14px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.footer{text-align:center;padding:20px;color:#666}
/* Removed responsive media queries - site will look the same on all devices */

/* Sidebar styles */
.sidebar{position:fixed;right:0;top:0;height:100vh;width:0;max-width:360px;background:var(--white);border-left:1px solid #eee;box-shadow:-8px 0 24px rgba(0,0,0,0.06);overflow:auto;transition:width 240ms ease;padding:0}
.sidebar:not(.hidden){width:320px;padding:18px}
.sidebar-header{display:flex;justify-content:flex-end}
.sidebar-nav{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.sidebar-nav .side-item{background:transparent;border:1px solid #eee;padding:10px;border-radius:8px;text-align:left;cursor:pointer}
.sidebar-nav .side-item:hover{background:#f6f6f6}
.sidebar-content{margin-top:12px}
.side-section{display:none}
.side-section.hidden{display:none}
.side-section h3{margin-top:0}

/* Dark adjustments for sidebar */
body.dark .sidebar{background:#07101a;border-left-color:#112233}
body.dark .sidebar-nav .side-item{border-color:#123243}
body.dark .sidebar-nav .side-item:hover{background:#071b27}

/* Show section when active */
.side-section.active{display:block}

/* When sidebar is open, push main content left so it doesn't overlap */
body.sidebar-open main{margin-right:340px;transition:margin-right 240ms ease}
body.sidebar-open .dark-toggle,
body.sidebar-open .lang-dropdown {margin-right:340px;transition:margin-right 240ms ease}

/* Small fixed toggle button for sidebar */
.sidebar-toggle{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:var(--red);color:var(--white);border:none;box-shadow:0 6px 14px rgba(200,16,46,0.18);font-weight:700;cursor:pointer;z-index:999;font-size:20px;display:flex;align-items:center;justify-content:center}
.sidebar-toggle:active{transform:translateY(1px)}

/* Toggle button hover & small animation */
.sidebar-toggle{transition:transform 180ms ease, box-shadow 180ms ease, background 180ms ease}
.sidebar-toggle:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 18px 40px rgba(200,16,46,0.22)}

/* Language selector styles */
.lang-dropdown {
  position: absolute;
  top: 12px;
  right: 142px;
  z-index: 1000;
}

/* Brand logo in top-left (circular) */
.brand-logo{
  position:absolute;
  top:12px;
  left:18px;
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(255,255,255,0.9);
  box-shadow:0 8px 22px rgba(0,0,0,0.18);
  z-index:1002;
  background: #fff;
}

.lang-toggle {
  width: 90px;
  height: 54px;
  border-radius: 27px;
  background: rgba(255,255,255,0.95);
  color: #222;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), background 320ms ease, box-shadow 220ms ease;
}

.lang-toggle:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.lang-menu.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  font-size: 15px;
  color: #333;
  transition: background 180ms ease;
  width: 100%;
  text-align: left;
}

.lang-option:hover {
  background: #f0f0f0;
}

.flag {
  font-size: 20px;
}

body.dark .lang-toggle {
  background: linear-gradient(135deg,#0b3b53,#082b3a);
  color: #fff;
}

body.dark .lang-menu {
  background: #07101a;
  border: 1px solid #123243;
}

body.dark .lang-option {
  color: #e6eef6;
}

body.dark .lang-option:hover {
  background: #071b27;
}

/* Dark mode toggle button: larger, fixed at top-right (left of hamburger) */
.dark-toggle{position:absolute;top:12px;right:78px;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,0.95);color:#222;border:1px solid rgba(0,0,0,0.06);box-shadow:0 8px 20px rgba(0,0,0,0.08);font-size:22px;display:flex;align-items:center;justify-content:center;z-index:1000;cursor:pointer;transition:transform 220ms cubic-bezier(.2,.9,.2,1), background 320ms ease, box-shadow 220ms ease}
.dark-toggle:hover{transform:translateY(-3px) scale(1.05)}
.dark-toggle.toggled{background:linear-gradient(135deg,#0b3b53,#082b3a);color:#fff;box-shadow:0 18px 40px rgba(2,18,26,0.5)}

/* Moon-to-sun spin animation for toggle */
@keyframes moonSpin {0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}
.dark-toggle.animate{animation:moonSpin 520ms ease-in-out}

/* Ensure sidebar appears under the toggles but above main content */
.sidebar{z-index:900}

/* Style sidebar nav items and section headers: larger, bold, red with icons */
.sidebar-nav .side-item{font-size:18px;color:var(--red);font-weight:800;display:flex;align-items:center;gap:10px}
.sidebar-nav .side-item .icon{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;color:var(--red)}
.side-section h3{font-size:20px;color:var(--red);font-weight:800;display:flex;align-items:center;gap:10px}
.side-section .icon-inline{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center}

/* Upload button hover & subtle pulse */
.empty-overlay .upload-btn{background:#28a745;color:#fff;border-color:#28a745;padding:8px 12px;border-radius:8px;transition:transform 160ms ease, box-shadow 160ms ease, background 160ms ease}
.empty-overlay .upload-btn:hover{background:#239238;transform:translateY(-3px);box-shadow:0 10px 24px rgba(40,167,69,0.18)}
.empty-overlay .upload-btn.pulse{animation:pulse 2.6s infinite ease-in-out}
@keyframes pulse{0%{transform:scale(1);box-shadow:0 6px 14px rgba(40,167,69,0.10)}50%{transform:scale(1.03);box-shadow:0 14px 30px rgba(40,167,69,0.14)}100%{transform:scale(1);box-shadow:0 6px 14px rgba(40,167,69,0.10)}}

/* Generic button hover lift */
.btn{padding:8px 12px;border-radius:6px;border:1px solid #ccc;background:#fff;cursor:pointer;transition:transform 120ms ease, box-shadow 120ms ease, background 120ms ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,0.08)}
.btn.primary{background:var(--red);color:var(--white);border-color:var(--red)}

/* Action buttons that sit on top of box #1 without covering the image */
.action-buttons{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:8px;
  display:flex;
  gap:10px;
  z-index:3; /* above image */
  pointer-events: none; /* let buttons themselves handle events */
}
.action-buttons .btn{
  pointer-events: auto; /* enable clicking on buttons themselves */
  height:44px;
  padding:0 14px;
  padding-left:48px; /* reserve space so text stays centered */
  border-radius:999px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center; /* keep label centered */
  gap:8px;
  box-shadow:0 8px 22px rgba(0,0,0,0.18);
  transform:translateY(0);
  transition:transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, opacity 180ms ease;
  font-size:14px;
  line-height:1;
  position:relative;
}
.action-buttons .btn::before{
  content: attr(data-icon);
  position:absolute;
  left:12px;
  font-size:18px;
  line-height:1;
}
.action-buttons .contact-btn{background:#28a745;color:#fff;border:0;min-width:120px}
.action-buttons .contact-btn:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(40,167,69,0.22)}
.action-buttons .profile-btn{background:rgba(255,255,255,0.06);color:#fff;border:1px solid rgba(255,255,255,0.14);min-width:150px}
.action-buttons .profile-btn:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.22)}

/* Slight entrance animation for the buttons */
@keyframes floatIn {
  0%{opacity:0;transform:translateY(8px) scale(.98)}
  60%{opacity:1;transform:translateY(-2px) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.action-buttons.show{animation:floatIn 420ms cubic-bezier(.2,.9,.2,1) both}

/* Badge for box #1: name and city shown at bottom-center, above the image */
.box1-badge{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:32px; /* moved a bit lower as requested */
  z-index:4;
  text-align:center;
  pointer-events:auto; /* allow interactions on its children */
}
.box1-badge .name{
  color:#fff;
  font-weight:900;
  font-size:20px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  text-shadow:0 6px 18px rgba(0,0,0,0.7);
}

/* Modern red visit profile button under the name */
/* Minimal visit button under the name */
.box1-badge .visit-btn{
  margin-top:6px;
  background: rgba(255,255,255,0.10);
  color:#fff; /* white bold text */
  border:1px solid rgba(255,255,255,0.35);
  border-radius:10px;
  padding:6px 12px;
  font-weight:700;
  font-size:12.5px;
  line-height:1;
  cursor:pointer;
  transition:transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}
.box1-badge .visit-btn:hover{
  transform:translateY(-2px);
  background: rgba(255,255,255,0.16);
  box-shadow:0 10px 22px rgba(0,0,0,0.22);
}
.box1-badge .visit-btn:active{
  transform:translateY(-1px);
}

/* Profile modal specific sizing - compact and centered */
.profile-modal .modal-content{max-width:360px;padding:16px;border-radius:12px;border:3px solid rgba(200,16,46,0.08)}
.profile-modal .modal-content img{border-radius:10px}
.profile-modal .btn{font-weight:700}

/* Profile details & gallery */
.profile-details{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  background:rgba(0,0,0,0.03);
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.06);
}
body.dark .profile-details{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.08);
}
.profile-details .detail-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  padding:6px 0;
  border-bottom:1px dashed rgba(0,0,0,0.08);
}
.profile-details .detail-row:last-child{border-bottom:none}
.profile-details .label{color:var(--muted);font-weight:600}
.profile-details .value{color:var(--text);font-weight:800}
.profile-details a{color:var(--red);text-decoration:none}
.profile-details a:hover{text-decoration:underline}

.profile-gallery{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.profile-gallery img{
  width:100%;
  height:90px;
  object-fit:cover;
  border-radius:10px;
  border:2px solid rgba(0,0,0,0.06);
  box-shadow:0 6px 16px rgba(0,0,0,0.10);
}
body.dark .profile-gallery img{border-color:rgba(255,255,255,0.08)}

/* Lightbox for full-screen image viewing */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.95);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3000;
  animation:fadeIn 280ms ease;
}
.lightbox.hidden{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.lightbox img{
  max-width:90vw;
  max-height:90vh;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

.lightbox-close{
  position:absolute;
  top:20px;
  right:20px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  color:#fff;
  border:2px solid rgba(255,255,255,0.3);
  font-size:24px;
  font-weight:700;
  cursor:pointer;
  transition:transform 180ms ease, background 180ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-close:hover{
  background:rgba(255,255,255,0.25);
  transform:scale(1.1);
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  color:#fff;
  border:2px solid rgba(255,255,255,0.3);
  font-size:36px;
  font-weight:700;
  cursor:pointer;
  transition:transform 180ms ease, background 180ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.lightbox-nav:hover{
  background:rgba(255,255,255,0.25);
  transform:translateY(-50%) scale(1.1);
}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}

/* Warning Modal Styles */
.warning-modal {
  z-index: 9999 !important;
  background: rgba(0,0,0,0.8) !important;
}

.warning-content {
  max-width: 500px !important;
  border: 4px solid #ff4444 !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, #fff, #fffbfb) !important;
  box-shadow: 0 20px 60px rgba(255,68,68,0.3) !important;
  text-align: center !important;
  padding: 25px !important;
}

.warning-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.warning-icon {
  font-size: 36px;
  animation: warningPulse 1.5s infinite;
}

.warning-header h2 {
  color: #ff4444;
  font-size: 28px;
  font-weight: 900;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(255,68,68,0.3);
}

.warning-text {
  margin: 20px 0;
}

.warning-text p {
  color: #333;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  background: rgba(255,68,68,0.1);
  padding: 15px;
  border-radius: 10px;
  border-left: 5px solid #ff4444;
}

.warning-actions {
  margin-top: 25px;
}

.warning-btn {
  background: linear-gradient(135deg, #ff4444, #ff6666) !important;
  color: white !important;
  border: none !important;
  padding: 12px 30px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 25px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(255,68,68,0.4) !important;
  transition: all 200ms ease !important;
}

.warning-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(255,68,68,0.6) !important;
}

@keyframes warningPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Sidebar Warning Box */
.sidebar-warning {
  margin-top: 20px;
  padding: 15px;
  background: rgba(255,68,68,0.1);
  border: 2px solid #ff4444;
  border-radius: 10px;
  border-left: 5px solid #ff4444;
}

.sidebar-warning p {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.sidebar-warning strong {
  color: #ff4444;
  font-weight: 800;
}

body.dark .sidebar-warning {
  background: rgba(255,68,68,0.15);
  border-color: #ff6666;
}

body.dark .sidebar-warning p {
  color: var(--text);
}

body.dark .sidebar-warning strong {
  color: #ff6666;
}

/* Mobile-only adjustments: show 3 boxes per row and optimize header/toggles.
   These rules are inside media queries so desktop (>=769px) is NOT changed. */
@media (max-width: 768px) {
  /* 3 columns per row on mobile */
  .grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    max-width: none !important;
    margin: 12px auto !important;
  }

  /* Slightly smaller boxes to fit three per row */
  .box {
    height: 200px !important;
    border-radius: 10px !important;
    overflow: hidden;
  }

  .box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Header & controls: move elements higher in pink header area on mobile */
  .site-header {
    padding: 20px 12px !important;
    border-radius: 16px !important;
    text-align: center !important;
    position: relative !important;
  }

  .brand-logo {
    width: 40px !important;
    height: 40px !important;
    top: 4px !important;
    left: 8px !important;
    border-width: 2px !important;
  }

  .lang-dropdown {
    top: 4px !important;
    right: 125px !important;
  }

  .lang-toggle {
    width: 72px !important;
    height: 36px !important;
    font-size: 13px !important;
    gap: 6px !important;
  }

  .dark-toggle {
    top: 4px !important;
    right: 75px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }

  

  /* Sidebar: full width on mobile to cover entire screen */
  .sidebar:not(.hidden) {
    width: 100vw !important;
    padding: 16px !important;
    left: 0 !important;
    right: auto !important;
  }

  /* Make modals fit nicely on mobile */
  .modal-content { max-width: 92vw !important; padding: 12px !important; }

  /* Ensure action buttons do not overflow */
  .action-buttons .btn { min-width: 72px !important; height: 36px !important; font-size: 12px !important; padding-left: 36px !important; }

  /* Box1 badge smaller and lower for mobile */
  .box1-badge {
    bottom: 20px !important;
  }

  .box1-badge .name {
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
  }

  .box1-badge .visit-btn {
    font-size: 10px !important;
    padding: 4px 8px !important;
    margin-top: 4px !important;
  }
}

/* Extra-tight adjustments for very small screens to keep 3 columns usable */
@media (max-width: 420px) {
  .grid { gap: 6px !important; padding: 8px !important; }
  .box { height: 160px !important; }
  .brand-logo { width: 34px !important; height: 34px !important; top: 3px !important; left: 6px !important; }
  .lang-dropdown { right: 105px !important; top: 3px !important; }
  .lang-toggle { width: 64px !important; height: 32px !important; font-size: 12px !important; }
  .dark-toggle { right: 68px !important; width: 34px !important; height: 34px !important; top: 3px !important; }
  
  
  /* Even smaller sidebar for very small screens */
  .sidebar:not(.hidden) {
    width: 100vw !important;
    padding: 14px !important;
    left: 0 !important;
    right: auto !important;
  }

  /* Extra small box1 badge for tiny screens - even lower */
  .box1-badge {
    bottom: 15px !important;
  }

  .box1-badge .name {
    font-size: 12px !important;
    letter-spacing: 0.2px !important;
  }

  .box1-badge .visit-btn {
    font-size: 9px !important;
    padding: 3px 6px !important;
    margin-top: 3px !important;
  }
}