:root { --primary: #1a2a6c; --accent: #b8860b; --urgent: #c0392b; --background: #002D62;}
body {
  /*font-family: 'Segoe UI', sans-serif; margin: 0; background: #f9f9f9;*/
  font-family: 'Roboto', sans-serif; margin: 0; background: #f9f9f9;
 }

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

header {
  width: 100%;
}

form {
  border: solid 1px #002D62;
  padding: 1rem;
}

select {
  padding: 8px;
}

input {
  border: solid 1px black;
  padding: 8px;
}

input[type="checkbox"] {
  /* Vergroot die boksie 1.5 keer sy oorspronklike grootte */
  transform: scale(1.5);

  /* Voeg 'n bietjie spasie rondom sodat dit nie teen die teks druk nie */
  margin: 5px;

  /* Opsioneel: Verander die wyser na 'n handjie vir beter UX */
  cursor: pointer;
}

.headerimg {
  display: block;
  width: 20%;
  margin: auto;
  padding-top: 1rem;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 60%;
  margin: auto;
  padding: 1rem;
}

#hamburger {
    display: none;
    color: #002D62;
    padding: 15px;
    cursor: pointer;
}

.button-container {
    display: flex;
    justify-content: center; /* Sentreer horisontaal */
    align-items: center;     /* Sentreer vertikaal (indien houer hoog is) */
    gap: 15px;               /* Voeg spasie tussen knoppies as daar meer as een is */
    margin-top: 20px;
    width: 100%;
}

.button {
  border: solid 1px black;
  padding: 1rem;
  color: white;
  text-decoration: none;
  background-color: #002D62;
  cursor: pointer;
  width: 10rem;
  margin: auto;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5rem;
  text-align: center;
}

.whatsapp-button {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: green;
}

.button:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 1); /* Voeg 'n ligte skaduwee by */
  transform: translateY(-2px); /* Lig die knoppie effens op */
}

header .container {
  display: flex;
  flex-direction: row;
  flex: 1 1;
  padding-top: 1rem;
}

.search-card h2 {
  background-color: lightgrey;
  padding: 1rem;
}

main.container {
  width: 80%;
  margin: auto;
  padding: 1rem;
}

.form-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 40%;
  margin: auto;
}

.fa-heart {
  background-color: transparent;
}

.actions {
  border: solid 1px #002D62;
}

.protected-img {
  width: 100%;
}

.box {
  flex: 1;            /* Dit is die towerwoord: albei kry 'n gelyke deel */
  padding: 20px;
  border: solid 1px #002D62;
}

/* 1. Die houer (die boksie om die prent) */
.img-wrapper {
    /*overflow: hidden; */   /* Dit sny die prent af as hy groter word */
    width: 100%;
    height: 200px;       /* Maak seker die boksie het 'n vaste hoogte */
    position: relative;
}

/* 2. Die prent self */
img.protected-img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Hou die prent se proporsies reg */
    transition: transform 0.5s ease;
    display: block;
}

/* 3. Die hover effek */
.img-wrapper:hover img.protected-img:hover {
    transform: scale(1.5);
}

img.protected-img {
  transition: transform 0.5s ease;
}

/* 1. Die Hoofhouer */
.protected-container {
    width: 90%;
    position: relative;
    max-width: 1000px;
    margin: 20px auto;
    background-color: #002D62;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* 2. Die Image Shield (Beskerming teen regsklik) */
.image-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Sit bo-oor die prent */
    background: transparent;
}

/* 3. Die Slideshow area */
.slideshow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px; /* Pas aan volgens jou voorkeur */
    overflow: hidden;
}

.mySlides {
    display: none; /* Word deur JS beheer */
    width: 100%;
    height: auto;
}

.mySlides img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.protected-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Hou die foto se proporsies reg teen die swart agtergrond */
}

/* 4. Navigasie Pyle */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    transition: 0.3s ease;
    border-radius: 0 5px 5px 0;
    user-select: none;
    z-index: 15; /* Moet bo die shield sit om klikbaar te wees */
    background-color: rgba(0,0,0,0.4);
    text-decoration: none;
}

.prev {
  left: 0;
  border-radius: 5px 0 0 5px;
}

.next {
    right: 0;
    border-radius: 5px 0 0 5px;
}

.prev:hover, .next:hover {
    background-color: rgba(255,165,0, 0.8); /* Gebruik 'n kleur soos oranje vir Mr. T Branding */
}

/* 5. Die Fade Animasie */
.fade {
    animation-name: fadeAnim;
    animation-duration: 0.8s;
}

@keyframes fadeAnim {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* 6. Nommering (1/5 ens) */
.numbertext {
    color: #f2f2f2;
    font-size: 14px;
    padding: 12px;
    position: absolute;
    top: 0;
    z-index: 16;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

@media (max-width: 600px) {
    .slideshow {
        height: 300px;
    }
    .prev, .next {
        padding: 10px;
        font-size: 18px;
    }
}
.heart-btn-container {
  width: 40%;
  margin: auto;
  border: solid 1px #002D62;
  padding: 8px;
  border-radius: 10px;
  background-color: transparent;
}

.heart-btn {
  display: block;
  width: 5rem;
  margin: auto;
  border: none !important;
  cursor: pointer;
}

.heart-btn i {
    font-size: 40px; /* Adjust this value to get the exact size you want */
    transition: transform 0.2s ease; /* Adds a nice little 'pop' effect */
    text-align: center;
}

.heart-btn:hover i {
    transform: scale(1.2); /* Makes it grow slightly when Trevor's clients hover over it */
}

.urgent-badge {
    /*position: absolute;
    top: 10px;
    right: 10px;*/
    background-color: #d32f2f; / Donkerrooi
    color: white;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 0.75rem;
    border-radius: 4px;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.amenities {
  width: 80%;
  margin: auto;
  padding: 1rem;
  border: solid 1px #002D62;
}

.bond-calc {
  width: 80%;
  margin: auto;
  padding: 1rem;
  border: solid 1px #002D62;
}

/* Anti-Copy Protection */
/*.protected-container { position: relative; user-select: none; }
.image-shield { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; cursor: default; }*/

/* Urgent Badge */
.badge-urgent, .badge-onshow { background: var(--urgent); color: white; padding: 5px 10px; font-weight: bold; animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Print Media for PDF Brochures */
@media print {
    .no-print, .whatsapp-float, .search-bar { display: none !important; }
    .property-detail { display: block; width: 100%; }
}

.filter-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.filter-row input, .filter-row select {
  /*flex: 1;*/
  padding: 10px;
  border: 1px solid black;
  border-radius: 4px;
  width: 10rem !important;
 }

 input[type="number"] {
   width: 6rem;
 }

.features-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 15px 0;
    padding: 10px;
    background: lightgrey;
    border-radius: 4px;
    justify-content: flex-start;
}

.property-gridx {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: flex-start;
  margin-top: 30px;
  padding: 1rem;
}

.property-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 30px;
  padding: 1rem;
}


.property-card {
  display: flex;
  flex-direction: row;
  flex: 1 1;
  width: 80%;
  margin: auto;
  border: solid 1px #002D62;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.specs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 1;
  gap: 1rem;
}

.badge-urgent {
    position: absolute; top: 10px; right: 10px;
    background: #e74c3c; color: white; padding: 5px 10px;
    font-weight: bold; border-radius: 3px; z-index: 20;
}

.badge-onshow {
    position: absolute; bottom: 10px; right: 10px;
    background: #F57C00; color: white; padding: 5px 10px;
    font-weight: bold; border-radius: 3px; z-index: 20;
}

footer {
  width: 80%;
  margin: auto;
  border: solid 1px black;
  background-color: lightgrey;
  padding: 1rem;
}

.footer-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.footer-legal p {
  text-align: center;
}

.social-icons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 1rem;
  width: 30%;
  margin: auto'
}

.admin-form {
  width: 80%;
  padding: 1rem;
  margin: auto;
  border: solid 1px black;
}

.admin-edit {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 8px;
  width: 50%;
  margin: auto;
  margin-top:20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;  spesifieke hoogte het) */
    width: 100%;            /* Maak seker dit beslaan die volle breedte */
    margin-bottom: 20px;
}

.form-group label, .form-row label {
    display: block;
    margin-bottom: 10px;    /* Spasie tussen die label en die textarea */
    text-align: center;     /* Sentreer die teks binne die label self */
    font-weight: bold;
    color: white;
}

.form-row {
  flex-direction: row;
  padding: 1rem;
}

.form-row-1 {
  flex-direction: row;
}

.form-group textarea {
    width: 90%;            /* Of stel 'n spesifieke breedte soos 800px */
  /*  max-width: 800px;  */     /* Beperk die breedte vir leesbaarheid */
    padding: 10px;
    border: 1px solid black;
    border-radius: 4px;
}

.blank-td {
  background-color: transparent !important;
}

input[name="title"] {
  width: 100%;
  margin: auto;
}

input[name="name"] {
  width: 90%;
}

input[name="email"] {
  width: 90%;
}

input[name="phone"] {
  width: 15rem;
}

/* Dwing die admin navigasie om altyd te wys, selfs op mobiel */
/* Belyn die hele navigasie-balk */
.nav-links {
    display: flex;
    align-items: center; /* Hou almal op dieselfde horisontale lyn */
    gap: 10px; /* Spasie tussen knoppies */
}

/* Maak seker die dropdown-houer belyn reg */
.dropdown {
    display: inline-flex;
    vertical-align: middle;
}

/* Forseer alle knoppies om dieselfde grootte te wees */
.nav-links .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px; /* Stel 'n vaste hoogte vir almal */
    padding: 0 20px; /* Sye-spasie */
    box-sizing: border-box; /* Verseker padding breek nie die grootte nie */
    border: none; /* Verwyder default button borders */
    cursor: pointer;
    font-size: 1rem;
    white-space: nowrap; /* Keer dat teks breek op klein skerms */
    text-decoration: none;
}

/* Dropdown Content moet net onder die knoppie verskyn */
.dropdown-content {
    display: none;
    position: absolute;
    top: 45px; /* Dieselfde as die knoppie se hoogte */
    background-color: white;
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 1000;
    border-radius: 4px;
}
/* Skakels binne die dropdown */
.dropdown-content a {
    color: #002D62;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: #D4AF37;
}

/* Wys die dropdown wanneer jy bo-oor beweeg */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Styl vir die caret/pyltjie */
.fa-caret-down {
    margin-left: 5px;
    font-size: 0.8rem;
}

.calc-card .form-group label {
  color: black;
}

.calc-card .form-group input {
  width: 100% !important;
}

.modal {
  display: none;
}

.feature-item {
    display: flex;
    align-items: center; /* Hierdie lyn doen die 'magic' belyning */
    gap: 15px;           /* Spasie tussen die ikoon, label en waarde */
    margin-bottom: 10px;
    padding: 4px;
    border: solid 1px #002D62;
}

.feature-item .icon img {
    display: block;      /* Verwyder witspasie onderaan images */
}

.feature-item .label {
    font-weight: bold;
    color: #002D62;      /* Trevor se blou */
}

.feature-item .value {
    color: #333;
}