/**
 * Gowrie Lots Map Styles
 *
 * @package gowrie_station_custom
 * @since 1.0.2
 */

/* =================================
   CSS VARIABLES (defaults)
   ================================= */
.gowrie-lots-map {
    --lot-highlight-color: rgba(75, 60, 29, 1);
    --lot-highlight-text-color: rgba(255, 255, 255, 1);
    --lot-transition-duration: 0.2s;
}

/* =================================
   MAP CONTAINER
   ================================= */
.gowrie-lots-map {
    width: 100%;
    position: relative;
}

.gowrie-lots-map__container {
    width: 100%;
    position: relative;
}

.gowrie-lots-map__svg,
.gowrie-lots-map svg {
    width: 100%;
    height: auto;
    display: block;
}

/* =================================
   SVG LOT HIGHLIGHTING
   ================================= */

/* Base state - transparent fill, no stroke for rect, path, and polygon */
.gowrie-lots-map__svg a[id] rect,
.gowrie-lots-map__svg a[id] path,
.gowrie-lots-map__svg a[id] polygon,
.gowrie-lots-map svg a[id] rect,
.gowrie-lots-map svg a[id] path,
.gowrie-lots-map svg a[id] polygon {
    fill: rgba(75, 60, 29, 0) !important;
    stroke: none !important;
    transition: fill var(--lot-transition-duration) ease;
}

/* Hover highlight - fill the rect/path/polygon */
.gowrie-lots-map__svg a[id]:hover rect,
.gowrie-lots-map__svg a[id]:hover path,
.gowrie-lots-map__svg a[id]:hover polygon,
.gowrie-lots-map svg a[id]:hover rect,
.gowrie-lots-map svg a[id]:hover path,
.gowrie-lots-map svg a[id]:hover polygon {
    fill: var(--lot-highlight-color) !important;
    transition: fill var(--lot-transition-duration) ease;
}

/* Selected/locked state */
.gowrie-lots-map__svg a[id].lot-selected rect,
.gowrie-lots-map__svg a[id].lot-selected path,
.gowrie-lots-map__svg a[id].lot-selected polygon,
.gowrie-lots-map svg a[id].lot-selected rect,
.gowrie-lots-map svg a[id].lot-selected path,
.gowrie-lots-map svg a[id].lot-selected polygon {
    fill: var(--lot-highlight-color) !important;
}

/* Base state - text hidden */
.gowrie-lots-map__svg a[id] text,
.gowrie-lots-map svg a[id] text {
    fill: rgba(255, 255, 255, 0) !important;
    font-weight: bold !important;
    transition: fill var(--lot-transition-duration) ease;
}

/* Hover highlight - show text */
.gowrie-lots-map__svg a[id]:hover text,
.gowrie-lots-map svg a[id]:hover text {
    fill: var(--lot-highlight-text-color) !important;
    transition: fill var(--lot-transition-duration) ease;
}

/* Selected/locked state - show text */
.gowrie-lots-map__svg a[id].lot-selected text,
.gowrie-lots-map svg a[id].lot-selected text {
    fill: var(--lot-highlight-text-color) !important;
}

/* Pointer cursor for interactive lots */
.gowrie-lots-map__svg a[id],
.gowrie-lots-map svg a[id] {
    cursor: pointer;
}

/* =================================
   STAGE 2 / INACTIVE LOTS
   Greyed out, no hover, no click, no selection.
   Driven by JS adding .lot-inactive based on the
   "Stage" field in lots.json.
   ================================= */
.gowrie-lots-map__svg a[id].lot-inactive,
.gowrie-lots-map svg a[id].lot-inactive {
    cursor: default;
    pointer-events: none;
}

.gowrie-lots-map__svg a[id].lot-inactive rect,
.gowrie-lots-map__svg a[id].lot-inactive path,
.gowrie-lots-map__svg a[id].lot-inactive polygon,
.gowrie-lots-map svg a[id].lot-inactive rect,
.gowrie-lots-map svg a[id].lot-inactive path,
.gowrie-lots-map svg a[id].lot-inactive polygon {
    fill: #35361B !important;
    stroke: none !important;
}

/* Belt-and-braces: also block hover/selected fills for inactive lots */
.gowrie-lots-map__svg a[id].lot-inactive:hover rect,
.gowrie-lots-map__svg a[id].lot-inactive:hover path,
.gowrie-lots-map__svg a[id].lot-inactive:hover polygon,
.gowrie-lots-map__svg a[id].lot-inactive.lot-selected rect,
.gowrie-lots-map__svg a[id].lot-inactive.lot-selected path,
.gowrie-lots-map__svg a[id].lot-inactive.lot-selected polygon,
.gowrie-lots-map svg a[id].lot-inactive:hover rect,
.gowrie-lots-map svg a[id].lot-inactive:hover path,
.gowrie-lots-map svg a[id].lot-inactive:hover polygon,
.gowrie-lots-map svg a[id].lot-inactive.lot-selected rect,
.gowrie-lots-map svg a[id].lot-inactive.lot-selected path,
.gowrie-lots-map svg a[id].lot-inactive.lot-selected polygon {
    fill: #35361B !important;
}

/* Inactive lots always show their lot number — warm off-white at 50% opacity
   so it reads as "dead/coming-soon" rather than active. */
.gowrie-lots-map__svg a[id].lot-inactive text,
.gowrie-lots-map__svg a[id].lot-inactive:hover text,
.gowrie-lots-map svg a[id].lot-inactive text,
.gowrie-lots-map svg a[id].lot-inactive:hover text {
    fill: rgba(249, 246, 241, 0.5) !important;
}

/* =================================
   LOT DETAILS PANEL - FIXED AT BOTTOM
   ================================= */
#lot-details {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
    z-index: 1000;
    max-width: 350px;
    width: calc(100% - 40px);
    border-radius: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Slide-in animation when showing */
#lot-details[style*="display: flex"] {
    animation: lotDetailsSlideIn 0.3s ease-out;
}

@keyframes lotDetailsSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    #lot-details {
        bottom: 10px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none;
        width: auto;
    }

    #formSection {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -20%) scale(0.1) !important;
        transform-origin: center center;
        width: calc(100% - 20px) !important;
        max-height: 90vh;
        overflow-y: auto;
        z-index: 1001;
    }

    #formSection.form-visible {
        transform: translate(-50%, -20%) scale(1) !important;
    }
}

/* =================================
   FORM SECTION ANIMATION
   ================================= */
#formSection {
    --form-animation-origin: bottom right;
    transform: scale(0.1) translate(0, 0);
    transform-origin: var(--form-animation-origin);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

#formSection.form-visible {
    transform: scale(1) translate(0, 0);
    opacity: 1;
}