/* app/components/LocationModal.css */

/* ============================================
   LEVEL 1: MODAL ROOT CLASSES
   ============================================ */

/* Modal Root */

.location_modal_root {
  background: #ffffff80;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.location_modal_root .modal-content {
  border: none;
  border-radius: 28px;
  background: transparent;
  overflow: hidden;
}

/* Modal Content */
.location_modal_root .location_modal_content {
  background: transparent;
  border-radius: 0px;
  border: none;
}

/* ============================================
   LEVEL 2: MODAL BODY
   ============================================ */

.location_modal_root .location_modal_body {
  padding: 10px 2%;
  text-align: center;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ============================================
   LEVEL 3: ICON SECTION
   ============================================ */

/* ICON ANIMATIONS */
.location_modal_root
  .location_modal_icon_container
  .main
  .Location_lottie_icon {
  margin: 0px auto;
  margin-bottom: 20px;
}
/* ============================================
   LEVEL 4: TEXT SECTION
   ============================================ */

.location_modal_root .location_modal_text_container {
  margin-bottom: 10px;
}

.location_modal_root .location_modal_title {
  font-size: 17px;
  color: #1a1a1a;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #2c3e50 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.3px;
}

.location_modal_root .location_modal_description {
  font-size: 14px;
  color: #1a1a1a;
  margin: 0;
  font-weight: 500;
  padding: 0 0.5rem;
}

/* ============================================
   LEVEL 5: ACTION BUTTONS
   ============================================ */

.location_modal_root .location_modal_actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Add this to your CSS file */

.location_modal_root .location_modal_icon_container,
.location_modal_root .location_modal_text_container {
  transition: opacity 0.3s ease; /* Makes the fade-out smooth */
  opacity: 1;
}

/* When the "dimmed" class is present, drop opacity to 0.4 */
.location_modal_root .dimmed {
  opacity: 0.4;
  pointer-events: none; /* Prevents interaction while fetching */
}

/* ... existing styles ... */

/* Primary Button */

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */