/*
Theme Name: MG Property
Theme URI: https://mgproperty.com.pl/
Author: MG Property
Version: 1.0.2
Description: Strona firmowa MG Property przygotowana jako motyw WordPress.
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: mg-property
*/

/* =========================
   ROOT
========================= */

:root {
   --brown: #8a6a4f;
   --brown-dark: #4a3728;
   --cream: #f7f1ea;
   --cream-dark: #efe3d7;
   --white: #ffffff;
   --text: #2f2a26;
   --green: #4caf50;
   --red: #c62828;
}

/* =========================
   RESET
========================= */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: Arial, Helvetica, sans-serif;
   color: var(--text);
   background: var(--white);
   overflow-x: hidden;
}

a {
   text-decoration: none;
   color: inherit;
}

section {
   scroll-margin-top: 130px;
}

.container {
   width: min(1180px, 92%);
   margin: 0 auto;
}

/* =========================
   HEADER
========================= */

.header {
   background: rgba(255,255,255,0.96);
   backdrop-filter: blur(14px);
   border-bottom: 1px solid #e8d8ca;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
   width: 100%;
   height: 110px;
   box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}

.header-inner {
   width: 100%;
   height: 100%;
   padding: 0 50px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo {
   display: flex;
   align-items: center;
}

.logo img {
   height: 80px;
   width: auto;
   display: block;
   transition: 0.3s;
   border-radius: 16px;
   padding: 6px 10px;
   background: rgba(255,255,255,0.75);
   filter: drop-shadow(0 5px 10px rgba(0,0,0,0.10));
}

.logo img:hover {
   transform: scale(1.03);
}

/* =========================
   NAVIGATION
========================= */

.nav-wrapper {
   display: flex;
   align-items: center;
   gap: 22px;
}

.nav {
   display: flex;
   align-items: center;
   gap: 12px;
}

.nav a {
   position: relative;
   font-size: 15px;
   font-weight: 700;
   color: var(--brown-dark);
   padding: 12px 18px;
   transition: 0.3s;
   border-radius: 12px;
}

.nav a:hover {
   background: rgba(176,137,104,0.12);
   color: var(--brown);
}

.nav a::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 6px;
   width: 0%;
   height: 2px;
   background: var(--green);
   transition: 0.3s;
   transform: translateX(-50%);
}

.nav a:hover::after {
   width: 45%;
}

/* =========================
   BUTTONS
========================= */

.login-btn,
.emergency-btn,
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   color: white !important;
   font-weight: 600;
   font-family: "Segoe UI" , sans-serif;
   font-size: 15px;
   letter-spacing: 0.3px;
   transition: 0.35s;
   white-space: nowrap;
}

.login-btn {
   background: linear-gradient(135deg, #b08968, #8a6a4f);
   padding: 13px 24px;
   border-radius: 40px;
   box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.login-btn:hover {
   background: linear-gradient(135deg, #4caf50, #3f9142);
   transform: translateY(-2px);
}

.emergency-btn {
   background: linear-gradient(135deg, #c62828, #a91f1f);
   padding: 13px 24px;
   border-radius: 40px;
   box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.emergency-btn:hover {
   background: linear-gradient(135deg, #4caf50, #3f9142);
   transform: translateY(-2px);
}

.btn {
   background: linear-gradient(135deg, #b08968, #8a6a4f);
   padding: 16px 30px;
   border-radius: 14px;
   margin-top: 20px;
   font-size: 16px;
   letter-spacing: 0.2px;
   box-shadow: 0 12px 28px rgba(0,0,0,0.14);
}

.btn:hover {
   background: linear-gradient(135deg, #4caf50, #3f9142);
   transform: translateY(-3px);
   box-shadow: 0 18px 35px rgba(0,0,0,0.20);
}

/* =========================
   HERO
========================= */

.hero {
   min-height: 720px;
   padding-top: 110px;
   display: flex;
   align-items: center;
   background:
      linear-gradient(
         rgba(0,0,0,0.45),
         rgba(0,0,0,0.45)
      ),
      url("assets/img/tlo_mgproperty.png");

   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.hero-card {
   margin-left: 80px;
   width: 900px;
   max-width: 100%;
   background: rgba(247,241,234,0.90);
   padding: 40px 60px;
   border-radius: 22px;
   box-shadow: 0 22px 50px rgba(0,0,0,0.28);
}
/* HERO BRANDING */

.hero-card .container {

   display: flex;

   align-items: center;

   justify-content: center;

   gap: 34px;
}

/* LOGO */

.hero-logo {

   width: 280px;

   height: auto;

   display: block;

   flex-shrink: 0;
}

/* SLOGAN */

.hero-slogan {

   font-size: 28px;

   line-height: 1.35;

   font-weight: 500;

   color: #6b625c;

   max-width: 430px;

   text-align: center;
}

.hero-slogan span {
   color: var(--red);
   font-weight: 700;
}

/* =========================
   MINI TITLE
========================= */

.mini-title {
   display: inline-block;
   color: var(--green);
   font-weight: 800;
   font-size: 18px;
   padding: 12px 22px;
   border-radius: 40px;
   margin-bottom: 22px;
   text-transform: uppercase;
   letter-spacing: 2px;
   background: rgba(76,175,80,0.12);
   box-shadow: 0 8px 20px rgba(76,175,80,0.10);
}

/* =========================
   REVEAL
========================= */

.reveal {
   opacity: 0;
   transform: translateY(55px);
   transition: 0.8s ease;
}

.reveal.active {
   opacity: 1;
   transform: translateY(0);
}

/* =========================
   SECTION
========================= */

.section {
   padding: 90px 0;
   background: var(--cream);
}

.section-header {
   text-align: center;
   max-width: 760px;
   margin: 0 auto 60px;
}

.section-header h2 {
   font-size: 46px;
   color: var(--brown-dark);
   margin-bottom: 20px;
}

.section-header p {
   color: #5f5147;
   line-height: 1.8;
   font-size: 18px;
}


/* =========================
   ABOUT
========================= */

.about-strip {
   background: linear-gradient(180deg, #efe3d7, #f7f1ea);
   padding: 60px 0;
}

.about-strip-box {
   display: grid;
   grid-template-columns: 1.4fr 0.6fr;
   gap: 45px;
   align-items: center;
   background: rgba(255,255,255,0.84);
   padding: 48px;
   border-radius: 28px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}

.about-strip-left h2 {
   font-size: 42px;
   color: var(--brown-dark);
   margin-bottom: 22px;
}

.about-strip-left p {
   color: #5f5147;
   font-size: 17px;
   line-height: 1.85;
   margin-bottom: 18px;
}

.about-strip-right {
   display: grid;
   gap: 18px;
}

.about-stat {
   background: #f5e6da;
   padding: 24px;
   border-radius: 18px;
   box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.about-stat strong {
   display: block;
   font-size: 26px;
   color: var(--brown-dark);
   margin-bottom: 8px;
}

.about-stat span {
   color: #5f5147;
   font-weight: 600;
}

/* =========================
   ADVANTAGES
========================= */

.advantages-section {
   background: linear-gradient(180deg, #f7f1ea 0%, #efe3d7 100%);
   padding: 80px 0;
}

.advantages-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px;
}

.advantage-card {
   background: rgba(255,255,255,0.82);
   padding: 42px;
   border-radius: 26px;
   box-shadow: 0 20px 50px rgba(0,0,0,0.10);
   transition: 0.35s;
   position: relative;
   overflow: hidden;
}

.advantage-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 6px;
   background: linear-gradient(90deg, #b08968, #8a6a4f);
}

.advantage-card:hover {
   transform: translateY(-8px);
}

.advantage-icon {
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: rgba(176,137,104,0.14);
   font-size: 32px;
   margin-bottom: 28px;
}

.advantage-card h3 {
   color: var(--brown-dark);
   font-size: 30px;
   margin-bottom: 18px;
}

.advantage-card p {
   color: #5f5147;
   line-height: 1.9;
}

/* =========================
   CARDS
========================= */

.cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   margin-top: 55px;
}

.card {
   background: white;
   padding:35px;
   border-radius: 22px;
   box-shadow: 0 18px 40px rgba(0,0,0,0.08);
   transition: 0.4s;
   position: relative;
   overflow: hidden;
}

.card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: linear-gradient(90deg, #b08968, #8a6a4f);
}

.card:hover {
   transform: translateY(-10px);
}

.card h3 {
   color: var(--brown-dark);
   margin-bottom: 18px;
   font-size: 28px;
}

.card p {
   color: #5f5147;
   line-height: 1.8;
}

/* =========================
   OFFER
========================= */

.offer-section {
   background: var(--cream);
}

.offer-section.alt {
   background: var(--cream-dark);
}

.offer-box {
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   gap: 45px;
   align-items: center;
   background: rgba(255,255,255,0.78);
   padding: 46px;
   border-radius: 24px;
   box-shadow: 0 18px 45px rgba(0,0,0,0.10);
}

.offer-box h2 {
   font-size: 42px;
   color: var(--brown-dark);
   margin-bottom: 18px;
}

.offer-box p {
   color: #5f5147;
   line-height: 1.8;
}

.offer-list {
   list-style: none;
   display: grid;
   gap: 14px;
}

.offer-list li {
   background: #f5e6da;
   padding: 16px 18px;
   border-radius: 14px;
   color: var(--brown-dark);
   font-weight: 700;
}

.offer-list li::before {
   content: "✓ ";
   color: var(--green);
   font-weight: 900;
}

/* =========================
   PROCESS
========================= */

.process-section {
   background: linear-gradient(180deg, #f7f1ea, #efe3d7);
}

.process-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 25px;
}

.process-card {
   background: rgba(255,255,255,0.82);
   padding: 46px 30px;
   border-radius: 24px;
   box-shadow: 0 18px 42px rgba(0,0,0,0.09);
   position: relative;
   overflow: hidden;
}

.process-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 6px;
   background: linear-gradient(90deg, #b08968, #8a6a4f);
}

.process-card:hover {
   transform: translateY(-8px);
}

.process-number {
   font-size: 74px;
   font-weight: 900;
   color: rgba(176,137,104,0.18);
   position: absolute;
   top: 22px;
   right: 24px;
}

.process-card h3 {
   font-size: 27px;
   color: var(--brown-dark);
   margin-bottom: 16px;
}

.process-card p {
   color: #5f5147;
   line-height: 1.75;
}

/* =========================
   CONTACT
========================= */

.contact {
   background: linear-gradient(180deg, #efe3d7, #f7f1ea);
}

.contact-top {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px;
   margin-bottom: 30px;
}

.contact-box {
   background: rgba(255,255,255,0.80);
   padding: 38px;
   border-radius: 24px;
   box-shadow: 0 18px 45px rgba(0,0,0,0.10);
}

.contact-box h3 {
   color: var(--brown-dark);
   margin-bottom: 24px;
   font-size: 30px;
}

.contact-box p {
   color: #5f5147;
   line-height: 1.8;
   margin-bottom: 18px;
}

.work-item {
   background: #f5e6da;
   padding: 18px 20px;
   border-radius: 16px;
   margin-bottom: 16px;
}

.work-item strong {
   display: block;
   color: var(--brown-dark);
   margin-bottom: 6px;
}

.map-box {
   overflow: hidden;
   border-radius: 18px;
   margin-top: 20px;
}

/* =========================
   MODAL
========================= */

.emergency-modal {
   position: fixed;
   inset: 0;
   z-index: 99999;
   display: none;
}

.emergency-modal.active {
   display: block;
}

.emergency-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,0.60);
}

.emergency-box {
   position: relative;
   z-index: 2;
   width: min(720px, 92%);
   max-height: 88vh;
   overflow-y: auto;
   margin: 45px auto;
   background: var(--cream);
   padding: 42px;
   border-radius: 22px;
   box-shadow: 0 25px 70px rgba(0,0,0,0.35);
}

.emergency-close {
   position: absolute;
   top: 18px;
   right: 22px;
   border: none;
   background: transparent;
   font-size: 36px;
   cursor: pointer;
   color: var(--brown-dark);
}

.emergency-box h2 {
   color: var(--brown-dark);
   font-size: 38px;
   margin: 10px 0 15px;
}

.emergency-box p {
   color: #5f5147;
   line-height: 1.6;
}

.emergency-box form {
   margin-top: 25px;
   display: grid;
   gap: 14px;
}

.emergency-box label {
   font-weight: 700;
   color: var(--brown-dark);
}

.emergency-box input,
.emergency-box select,
.emergency-box textarea {
   width: 100%;
   padding: 14px 16px;
   border-radius: 10px;
   border: 1px solid #d8c4b2;
   background: #fff;
   font-size: 16px;
}

.form-btn {
   width: 100%;
   border: none;
   cursor: pointer;
}

/* =========================
   FOOTER
========================= */

.file-upload-box {
   background: #f5e6da;
   border: 2px dashed #b08968;
   border-radius: 18px;
   padding: 22px;
   transition: 0.3s;
}

.file-upload-box:hover {
   background: #efe3d7;
   border-color: #4caf50;
}

.file-upload-box input[type="file"] {
   width: 100%;
   padding: 14px;
   background: white;
   border-radius: 12px;
   border: 1px solid #d8c4b2;
   cursor: pointer;
}


.file-item button:hover {
   background: #4caf50;
}
.file-upload-box input[type="file"]::file-selector-button {

   background: #4caf50;

   color: white;

   border: none;

   padding: 12px 18px;

   border-radius: 12px;

   cursor: pointer;

   font-weight: 700;

   margin-right: 14px;

   transition: 0.3s;
}

.file-upload-box input[type="file"]::file-selector-button:hover {

   background: #388e3c;
}



.footer {
   background: #171717;
   color: white;
   text-align: center;
   padding: 25px;
}

.file-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: #f5e6da;
  padding: 12px 14px;
  border-radius: 12px;
  color: #4a3728;
  font-weight: 700;
}

.file-item button {
  border: none;
  background: #c62828;
  color: white;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}


.marquee-bar {
   width: 100%;
   overflow: hidden;
   position: relative;
   background: linear-gradient(90deg, rgba(74,55,40,0.96), rgba(111,78,55,0.96));
   padding: 18px 0;
}

.marquee-track {
   display: flex;
   align-items: center;
   gap: 35px;
   width: max-content;
   white-space: nowrap;
   animation: marqueeMove 24s linear infinite;
}

.marquee-track span {
   color: white;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
}

.marquee-track span::before {
   content: "◆";
   color: #d6b08d;
   font-size: 12px;
   margin-right: 12px;
}

@keyframes marqueeMove {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
   }
}

/* HERO INFO */

.hero-info {

   display: flex;

   flex-direction: column;

   gap: 14px;

   margin-left: 24px;
}

/* BADGE */

.hero-badge {

   background:
   rgba(255,255,255,0.10);

   border:
   1px solid rgba(255,255,255,0.14);

   padding: 14px 20px;

   border-radius: 16px;

   min-width: 270px;

   backdrop-filter: blur(6px);

   transition: 0.3s;
}

.hero-badge:hover {

   background:
   rgba(255,255,255,0.16);

   transform:
   translateX(4px);
}

/* LICZBA */

.hero-badge strong {

   display: block;

   font-size: 24px;

   font-weight: 700;

   color: #8b1e1e;

   margin-bottom: 3px;
}

/* OPIS */

.hero-badge span {

   color: #5f5147;

   font-size: 14px;

   font-weight: 500;

   letter-spacing: 0.3px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 1000px) {

   .header {
      height: auto;
      position: sticky;
   }

   .header-inner {
      flex-direction: column;
      gap: 18px;
      padding: 15px 20px;
   }

   .nav-wrapper {
      flex-direction: column;
   }

   .nav {
      flex-wrap: wrap;
      justify-content: center;
   }

   .hero {
      padding-top: 40px;
      min-height: 620px;
   }

   .hero-card {
      margin-left: 0;
      width: 92%;
      padding: 32px;
   }

  
   .cards,
   .advantages-grid,
   .process-grid,
   .contact-top,
   .offer-box,
   .about-strip-box {
      grid-template-columns: 1fr;
   }

   .section-header h2,
   .offer-box h2,
   .about-strip-left h2 {
      font-size: 34px;
   }
}

/* Formularz - stany przycisku */
.form-btn:disabled {
   opacity: 0.65;
   cursor: not-allowed;
   transform: none;
}

.emergency-box select:invalid {
   color: #777;
}

@media (max-width: 600px) {
   .hero-card .container {
      flex-direction: column;
      gap: 20px;
   }

   .hero-info {
      margin-left: 0;
      width: 100%;
   }

   .hero-badge {
      min-width: 0;
      width: 100%;
   }

   .emergency-box {
      padding: 30px 22px;
      margin: 25px auto;
   }
}