@font-face {
    font-family: 'GE SS Text Light';
    src: url('/realestate_plan_reservation/static/src/generate_contract_src/fonts/GE SS Text Light.woff') format("woff"),
         url('/realestate_plan_reservation/static/src/generate_contract_src/fonts/GE SS Text Light.woff2') format("woff2"),
         url('/realestate_plan_reservation/static/src/generate_contract_src/fonts/GE SS Text Light.ttf') format("truetype");
}

html, body {
    height: 100vh;
    background-color: #fafafa;
    margin: 0;
}

[v-cloak] {
    display: none !important;
}

/* =========================
   LANGUAGE
========================= */

#app.langEN {
    font-family: 'Roboto', sans-serif;
}

#app.langEN .EN_Text { display: initial; }
#app.langEN .AR_Text { display: none !important; }

#app.langAR {
    direction: rtl;
}

#app.langAR.v-application {
    font-family: "GE SS Text Light" !important;
}

#app.langAR .AR_Text { display: initial; }
#app.langAR .EN_Text { display: none !important; }

/* =========================
   LAYOUT
========================= */

.contract-page-container {
    background-color: white;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    border-radius: 4px;
    padding: 5% !important;
    max-width: 1000px;
    margin: 20px auto !important;
}

.pageTitle {
    text-align: center;
    margin: 15px;
}

.pageTitle div {
    display: inline-block;
    border: 1px groove #d72938;
    border-radius: 4px;
    padding: 10px;
    color: #fff;
    background-color: #ea6677;
}

.mirzaamLogo {
    width: 50%;
    max-width: 300px;
    margin: 20px auto;
}

.expo-date-badge {
    align-self: center;
    background-color: #ea6677;
    padding: 2px 10px;
    color: white;
    font-weight: bold;
    border-radius: 4px;
}

/* =========================
   SVG MAP
========================= */

#svg_Map {
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    overflow: auto;
    min-height: 900px;
}

.map-svg-holder svg {
    width: 100%;
    height: auto;
}

/* =========================
   BOOTH STATES (FINAL)
========================= */

.booth-overlay {
    fill: transparent !important;
    stroke: transparent !important;
    pointer-events: all;
}

/* base */
.SVG_Booth {
    fill: transparent !important;
    stroke: #999 !important;
    stroke-width: 1.2px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* hover */
.SVG_Booth:hover,
.hover-booth {
    fill: rgba(255, 0, 9, 0.15) !important;
    stroke: #cc4444 !important;
}

/* animation */
/* selected */
.SVG_Booth.selected-booth {
    fill: rgba(255, 0, 9, 0.15) !important;
    stroke: red !important;
    stroke-width: 1.5px !important;
}

/* reserved */
.SVG_Booth.reserved-booth {
    cursor: not-allowed !important;
    stroke: #888 !important;
}

/* X mark */
.reserved-mark line {
    stroke: #ea6677 !important;
    stroke-width: 2.5px !important;
}

/* =========================
   SUMMARY BOX
========================= */

.contract-summary-box {
    position: absolute;
    left: 24px;
    bottom: 24px;
    background: white;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

#app.langAR .contract-summary-box {
    right: 24px;
    left: auto;
}

/* =========================
   POPUP (PHP STYLE)
========================= */

.booth-popup-card {
    backdrop-filter: blur(10px);
}

.booth-popup-title {
    font-weight: bold;
}

.booth-popup-meta {
    background: #666;
    color: white;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 11px;
}

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

@media (max-width: 768px) {
    .contract-page-container {
        padding: 20px !important;
    }

    .contract-summary-box {
        position: static;
        margin-top: 15px;
    }
}

#svg_Map.map-capture-area {
    position: relative;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

#svg_Map.map-capture-area:active {
    cursor: grabbing;
}

.map-svg-holder {
    width: 100%;
    min-height: 900px;
    transform-origin: 0 0;
    will-change: transform;
}

.map-svg-holder svg {
    width: 100%;
    height: auto;
    display: block;
}

.map_zoom_controls {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 12px;
    padding: 10px 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

#app.langAR .map_zoom_controls {
    right: auto;
    left: 18px;
}

.map_zoom_controls .v-btn {
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
}