/*
 Theme Name:     Miron Draft
 Theme URI:      https://b2webstudios.com/
 Description:    Custom Landing Page Template for Miron Construction
 Author:         B2 Web Studios
 Author URI:     https://b2webstudios.com
 Template:       hello-elementor
 Version:        1.0.0
*/

@import url("../hello-elementor/style.css");

:root {
  --miron-red: #9e2432;

  --miron-blue: #001740;

  --miron-gray: #7a7a7a;

  --miron-yellow: #fad804;

  --miron-red-hover: #641923;
}

.miron-red {
  color: var(--miron-red);
}

.miron-red-bg {
  background-color: var(--miron-red);
}

.miron-blue {
  color: var(--miron-blue);
}

.miron-blue-bg {
  background-color: var(--miron-blue);
}

.miron-yellow {
  color: var(--miron-yellow);
}

.miron-yellow-bg {
  background-color: var(--miron-yellow);
}

.miron-gray {
  color: var(--miron-gray);
}

/* ==========================================================================
Header Styles
========================================================================== */

.site-header {
  background-color: var(--miron-blue) !important;
  padding: 0px !important;
}

/* ==========================================================================
Footer Styles
========================================================================== */

/* ==========================================================================
Text Styles
========================================================================== */

h1,
h2,
h3,
h4 {
  margin-top: 30px;
}

/* ==========================================================================
Button Styles
========================================================================== */

.miron-button,
.miron-tooltip-button {
  background-color: var(--miron-red) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 0px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
}

.miron-tooltip-button:hover {
  background-color: var(--miron-red-hover) !important;
  color: #ffffff;
}

/* ==========================================================================
Map Styles
========================================================================== */
.imp-container,
.imp-search-box,
.imp-object-list {
  background: var(--miron-blue) !important;
}

/* ==========================================================================
Modal Styles
========================================================================== */

/* Miron Project Modal Styles */
.miron-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.miron-modal.active {
  display: block;
  opacity: 1;
}

.miron-modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
  width: 90%;
  max-width: 1000px;
  position: relative;
  /* max-height: 85vh; */
  overflow-y: auto;
  transition: transform 0.3s ease;
  transform: translateY(20px);
}

.miron-modal.active .miron-modal-content {
  transform: translateY(0);
}

.miron-modal-close {
  color: var(--miron-gray);
  float: right;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 10px;
  transition: color 0.2s ease;
  z-index: 10;
}

.miron-modal-close:hover {
  color: var(--miron-red);
}

/* Loading indicator */
.miron-modal .loading {
  text-align: center;
  padding: 50px;
  font-style: italic;
  color: var(--miron-gray);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .miron-modal-content {
    width: 95%;
    margin: 10% auto;
    padding: 20px;
    max-height: 80vh;
  }
}

/* ==========================================================================
Tooltip Styles
========================================================================== */

.miron-tooltip {
  max-width: 300px !important;
  padding: 10px !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.miron-tooltip img {
  width: 100% !important;
  height: auto !important;
  margin-bottom: 10px !important;
}

.miron-tooltip h4 {
  margin-top: 0px !important;
  padding-top: 0px !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* ==========================================================================
Mobile Styles
========================================================================== */