/* ==========================================================================
   1. Global Variables
   ========================================================================== */

:root {
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-popup: rgba(0, 0, 0, 0.9);
    --bg-btn: rgba(255, 255, 255, 0.2);
    --bg-btn-hover: rgba(255, 255, 255, 0.4);

    --text-light: white;
    --text-liked: red;

    --border-light: 1px solid rgba(255, 255, 255, 0.3);
    --border-btn: 1px solid rgba(255, 255, 255, 0.5);

    --radius-container: 15px;
    --radius-btn: 5px;
}

/* ==========================================================================
   2. Main Layout Components
   ========================================================================== */

#permanent-overlay {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 900px;
    background-color: var(--bg-overlay);
    border: var(--border-light);
    border-radius: var(--radius-container);
    color: var(--text-light);
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    z-index: 20;
}

#help-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 600px;
    background-color: var(--bg-popup);
    border: var(--border-light);
    border-radius: var(--radius-container);
    color: var(--text-light);
    padding: 30px;
    text-align: center;
    z-index: 30;
}

/* ==========================================================================
   3. Component Sections & Containers
   ========================================================================== */

.overlay-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    border-right: var(--border-light);
    text-align: center;
}

.overlay-section:last-child {
    border-right: none;
}

.overlay-section p {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.nav-buttons,
.action-buttons,
.language-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-buttons,
.language-buttons {
    gap: 10px;
}

.action-buttons {
    margin-top: 10px;
}

.language-buttons {
    margin-bottom: 20px;
}

.help-content {
    margin: 20px 0;
    line-height: 1.6;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

/* Shared styles for all standard buttons */
.nav-button,
.help-button,
.lang-button,
.close-button,
.action-button {
    background-color: var(--bg-btn);
    border: var(--border-btn);
    border-radius: var(--radius-btn);
    color: var(--text-light);
    cursor: pointer;
    text-align: center;
}

/* Shared hover/active state */
.nav-button:hover,
.help-button:hover,
.close-button:hover,
.action-button:hover,
.lang-button.active {
    background-color: var(--bg-btn-hover);
}

/* Individual button tweaks */
.nav-button {
    padding: 5px 10px;
    margin: 0 5px;
    font-size: 18px;
}

.help-button,
.lang-button,
.action-button {
    padding: 8px 15px;
}

.close-button {
    padding: 8px 20px;
    margin-top: 20px;
}

/* Special button styles (icon-style) */
.like-button {
    color: var(--text-light);
}

.like-button.liked {
    color: var(--text-liked);
}

/* ==========================================================================
   5. Content Toggling
   ========================================================================== */

.help-image {
    max-width: 150px; /* Adjust as needed */
    height: auto;
    display: inline-block; /* Change to inline-block to allow images to sit next to text */
    vertical-align: middle;
    margin: 0 5px; /* Adjust margin for better spacing */
}

.desktop-image {
    display: block;
}


.help-text {
    display: none;
}

.help-text.active {
    display: block;
}

/* ==========================================================================
   6. Media Queries (Mobile First approach would be better, but preserving structure)
   ========================================================================== */

@media screen and (max-width: 600px) {
    #permanent-overlay {
        width: 100%;
        bottom: 10px;
        padding: 8px;
        border-radius: 0;
    }

    .overlay-section {
        padding: 0 4px;
    }

    .overlay-section p {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .action-button {
        min-height: 60px;
        gap: 4px;
    }

    .nav-button,
    .help-button,
    .action-button {
        font-size: 16px;
    }

    .help-image {
        max-width: 50px; /* Adjust as needed */
    }

    #help-popup {
        width: 90%;
        padding: 20px;
        max-height: 80vh;
    }
}
/* BVQY175 exhibition customisation */
#permanent-overlay{max-width:1040px;background:rgba(5,20,31,.88);border-color:rgba(84,224,174,.28);backdrop-filter:blur(14px);font-family:Inter,Arial,sans-serif;}
#artwork-section{flex:2.2;align-items:flex-start;text-align:left;}
#artwork-info{white-space:pre-line;font-size:14px!important;line-height:1.42;color:#dbe8ec;min-height:42px;margin:0!important;}
.overlay-label{font-size:10px!important;font-weight:800;letter-spacing:.13em;color:#54e0ae;margin:0 0 6px!important;}
.help-button,.nav-button,.close-button{border-color:rgba(84,224,174,.45);background:rgba(84,224,174,.08);color:#eef9f5;font-weight:700;}
.plaque-toggle{display:flex;align-items:center;gap:.4rem;margin-top:.5rem;cursor:pointer;font-size:.72rem;color:#b8cbd2}.plaque-toggle input{accent-color:#54e0ae}
#help-popup{font-family:Inter,Arial,sans-serif;text-align:left;background:rgba(4,15,23,.96);border-color:rgba(84,224,174,.35)}#help-popup h2{color:#54e0ae;margin-top:0;text-align:center}.help-content p{font-size:14px}.close-button{display:block;margin:18px auto 0}
@media(max-width:700px){#permanent-overlay{width:calc(100% - 16px);bottom:8px;border-radius:12px;padding:8px;gap:4px}.overlay-section{padding:0 7px}.overlay-label{font-size:8px!important}#artwork-info{font-size:11px!important;min-height:34px}#navigation-section{flex:.8}#help-section{flex:.7}.help-button{font-size:11px;padding:7px}.plaque-toggle{display:none}}
/* v1.4 interactive media */
.media-open-button{margin-top:8px;border:1px solid #59e2b8;background:#39c997;color:#03231f;font-weight:900;padding:8px 12px;border-radius:9px;cursor:pointer;letter-spacing:.03em}.media-open-button[hidden]{display:none!important}
#media-modal{display:none;position:fixed;inset:0;z-index:80;background:rgba(1,10,16,.88);backdrop-filter:blur(18px);padding:28px;align-items:center;justify-content:center;font-family:Inter,Arial,sans-serif}#media-modal.show{display:flex}.media-dialog{width:min(1180px,96vw);max-height:94vh;overflow:auto;background:#061c27;border:1px solid rgba(89,226,184,.45);border-radius:20px;box-shadow:0 28px 100px #000c;padding:16px}.media-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.media-head>div{display:block!important}.media-head span{display:inline-block;color:#04231e;background:#5ce3ba;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.1em}.media-head h2{margin:8px 0 0;color:#f1fbf8;font-size:clamp(20px,3vw,34px)}.media-head button{width:43px;height:43px;border-radius:50%;border:1px solid #5ce3ba;background:#0b3a47;color:white;font-size:29px;cursor:pointer}#media-description{color:#b8d3cd;line-height:1.5;margin:9px 0 13px}#media-stage{position:relative;background:#01090d;border-radius:14px;overflow:hidden;min-height:min(65vh,680px);display:grid;place-items:center}#media-stage .media-player,#media-stage .media-frame{display:block;width:100%;height:min(68vh,720px);border:0;background:#000;object-fit:contain}.media-original-link{position:absolute;right:12px;bottom:12px;background:#051c27dc;border:1px solid #59e2b8;color:#7df0c8;padding:8px 10px;border-radius:9px;text-decoration:none;font-weight:800}.media-foot{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:12px;padding-top:12px;color:#9ebbb4;font-size:12px}.media-foot button{border:1px solid #5ce3ba;background:#0c4a55;color:white;border-radius:9px;padding:9px 13px;font-weight:800;cursor:pointer}@media(max-width:700px){#media-modal{padding:6px}.media-dialog{width:100%;max-height:98vh;padding:10px;border-radius:13px}#media-stage{min-height:60vh}#media-stage .media-player,#media-stage .media-frame{height:65vh}.media-foot span{display:none}.media-head h2{font-size:19px}}

/* v1.5 scrollable HTML/application monitor */
#media-stage{position:relative}.media-frame-wrap{position:absolute;inset:48px 0 0;overflow:hidden;background:#06121d}.media-frame{width:100%;height:100%;border:0;background:white}.media-web-toolbar{position:absolute;left:0;right:0;top:0;height:48px;display:flex;gap:7px;align-items:center;padding:7px 10px;background:#061722;border-bottom:1px solid #2f786f;z-index:5}.media-web-toolbar span{margin-right:auto;color:#7cebd6;font-size:12px;font-weight:800}.media-web-toolbar button{border:1px solid #287b70;background:#0a2a36;color:#dffff8;border-radius:8px;padding:7px 10px;cursor:pointer;font-weight:700}@media(max-width:700px){.media-web-toolbar button:nth-of-type(2),.media-web-toolbar button:nth-of-type(3),.media-web-toolbar button:nth-of-type(4){display:none}.media-web-toolbar{overflow-x:auto}.media-frame-wrap{inset:48px 0 0}}

/* v1.8.2 · room 11 external training systems */
#media-modal.external-max{padding:8px}
#media-modal.external-max .media-dialog{width:calc(100vw - 16px);height:calc(100vh - 16px);max-height:none;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;padding:10px}
#media-modal.external-max #media-description{margin:5px 0 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#media-modal.external-max #media-stage{flex:1;min-height:0;height:auto;display:block}
#media-modal.external-max .media-frame-wrap{height:auto;inset:48px 0 0}
#media-modal.external-max .media-frame{height:100%}
#media-modal.external-max .media-foot{padding-top:7px}
.media-web-toolbar .primary-external{background:#25c995;color:#031d19;border-color:#59e2b8}
.external-load-notice{position:absolute;inset:48px 0 0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(145deg,#04141f,#0b2d3a);color:#e8fff8;text-align:center;padding:28px;transition:opacity .35s,visibility .35s}
.external-load-notice.loaded{opacity:0;visibility:hidden;pointer-events:none}.external-load-notice.timeout{background:linear-gradient(145deg,#24190a,#0b2d3a)}
.external-load-notice span{max-width:720px;color:#a8c9c2;word-break:break-all}.external-load-notice button,.external-fallback button{border:1px solid #5ce3ba;background:#39c997;color:#03231f;border-radius:10px;padding:11px 16px;font-weight:900;cursor:pointer}
.external-spinner{width:46px;height:46px;border:4px solid #244d57;border-top-color:#61e8bf;border-radius:50%;animation:externalSpin .8s linear infinite}@keyframes externalSpin{to{transform:rotate(360deg)}}
.external-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;padding:30px;color:#eafff8;background:radial-gradient(circle at 50% 30%,#0e3b48,#03121c 70%)}.external-fallback h3{font-size:clamp(22px,3vw,38px);margin:0}.external-fallback p{max-width:760px;color:#b9d3cd;line-height:1.55}.external-fallback code{max-width:90%;padding:10px 14px;border:1px solid #285b64;background:#061e29;border-radius:8px;color:#72e8c5;word-break:break-all}
@media(max-width:700px){#media-modal.external-max .media-head h2{font-size:16px}#media-modal.external-max #media-description{display:none}#media-modal.external-max .media-foot{display:none!important}}

/* v2.7 synchronized technical overlay */
#permanent-overlay{background:linear-gradient(135deg,rgba(4,20,31,.92),rgba(7,35,48,.82))!important;border:1px solid rgba(82,229,181,.3)!important;box-shadow:0 18px 48px rgba(0,0,0,.32)!important;backdrop-filter:blur(16px)!important}
.overlay-label{color:#69e7bd!important;letter-spacing:.12em!important}.nav-button,.help-button,.media-open-button{border-color:rgba(86,226,182,.35)!important}.nav-button:hover,.help-button:hover,.media-open-button:hover{background:#43d5a3!important;color:#041820!important}.media-dialog{border-color:rgba(84,229,184,.35)!important;background:linear-gradient(145deg,#061925,#092a38)!important}

/* v2.8.0 · stable mobile viewport, compact overlay and explicit movement controls */
html,body{height:var(--app-height,100dvh);min-height:var(--app-height,100dvh);overscroll-behavior:none}
#permanent-overlay{bottom:calc(20px + var(--safe-bottom));left:calc(50% + (var(--safe-left) - var(--safe-right))/2)}
#help-popup{max-height:calc(var(--app-height,100dvh) - 32px - var(--safe-top) - var(--safe-bottom));overflow:auto}
#media-modal{height:var(--app-height,100dvh);padding-top:calc(28px + var(--safe-top));padding-right:calc(28px + var(--safe-right));padding-bottom:calc(28px + var(--safe-bottom));padding-left:calc(28px + var(--safe-left))}
#map-modal{height:var(--app-height,100dvh);padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}
#mobile-camera-controls{display:none;position:fixed;z-index:22;left:calc(10px + var(--safe-left));bottom:calc(112px + var(--safe-bottom));width:126px;padding:7px;border:1px solid rgba(91,231,187,.3);border-radius:14px;background:rgba(4,22,32,.82);backdrop-filter:blur(14px);box-shadow:0 14px 38px rgba(0,0,0,.3);font-family:Inter,Arial,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none}
.is-touch #mobile-camera-controls{display:block}
#mobile-camera-controls>p{margin:0 0 5px;color:#80b1bc;font-size:7px;font-weight:850;letter-spacing:.08em;text-align:center}
.mobile-move-pad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:3px;justify-content:center}
.mobile-move-pad button{width:34px;height:34px;padding:0;border:1px solid rgba(91,229,184,.34);border-radius:9px;background:rgba(8,45,57,.92);color:#dffff8;font:900 14px/1 Inter,Arial,sans-serif;touch-action:none;-webkit-tap-highlight-color:transparent}
.mobile-move-pad button:active,.mobile-move-pad button.is-active{background:#45d7a6;color:#041b1f;transform:scale(.96)}
.mobile-move-pad [data-camera-move="forward"]{grid-column:2;grid-row:1}.mobile-move-pad [data-camera-move="left"]{grid-column:1;grid-row:2}.mobile-move-pad [data-camera-reset]{grid-column:2;grid-row:2}.mobile-move-pad [data-camera-move="right"]{grid-column:3;grid-row:2}.mobile-move-pad [data-camera-move="backward"]{grid-column:2;grid-row:3}

@media(max-width:760px) and (orientation:portrait){
  #permanent-overlay{left:calc(6px + var(--safe-left));right:calc(6px + var(--safe-right));bottom:calc(6px + var(--safe-bottom));transform:none;width:auto;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 82px;align-items:center;padding:7px 6px;border-radius:12px;gap:3px}
  .overlay-section{min-width:0;padding:0 7px;border-right:1px solid rgba(255,255,255,.18)}
  #artwork-section{display:block;overflow:hidden}#artwork-section .overlay-label{margin-bottom:3px!important}
  #artwork-info{display:-webkit-box;min-height:30px!important;max-height:34px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:10px!important;line-height:1.35!important}
  #navigation-section{padding:0 4px}.nav-buttons{gap:2px}.nav-button{min-width:31px;min-height:34px;margin:0 2px;padding:4px 7px;font-size:13px!important}
  #help-section{display:none}
  .media-open-button{margin-top:4px;padding:5px 7px;border-radius:7px;font-size:8px}
  #mobile-camera-controls{left:calc(7px + var(--safe-left));bottom:calc(91px + var(--safe-bottom));width:112px;padding:5px;border-radius:12px}
  #mobile-camera-controls>p{display:none}.mobile-move-pad{grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:2px}.mobile-move-pad button{width:30px;height:30px;border-radius:8px;font-size:12px}
  #help-popup{top:calc(50% + var(--safe-top)/2 - var(--safe-bottom)/2);width:calc(100% - 20px);padding:18px 16px}.help-content{margin:10px 0}.help-content p{font-size:12px!important;line-height:1.5}.help-image{max-width:62px}
  #media-modal{padding:calc(5px + var(--safe-top)) calc(5px + var(--safe-right)) calc(5px + var(--safe-bottom)) calc(5px + var(--safe-left))}
  .media-dialog{height:calc(var(--app-height,100dvh) - 10px - var(--safe-top) - var(--safe-bottom));max-height:none;display:flex;flex-direction:column;overflow:hidden}
  #media-description{max-height:42px;overflow:auto;font-size:11px;margin:5px 0 7px}.media-head h2{font-size:16px!important}.media-head button{width:37px;height:37px;font-size:24px}
  #media-stage{flex:1;min-height:0}.media-frame-wrap{height:auto}.media-foot{padding-top:6px}.media-foot button{padding:7px 9px;font-size:10px}
}

@media(max-width:1000px) and (max-height:560px) and (orientation:landscape){
  #permanent-overlay{left:50%;bottom:calc(5px + var(--safe-bottom));width:min(690px,72vw);padding:5px 8px;border-radius:11px}
  .overlay-section{padding:0 7px}.overlay-label{font-size:7px!important;margin-bottom:2px!important}#artwork-info{font-size:9px!important;min-height:24px;max-height:28px;overflow:hidden}.nav-button,.help-button{font-size:10px!important;padding:5px 7px}.plaque-toggle{display:none}.media-open-button{margin-top:3px;padding:4px 7px;font-size:7px}
  #mobile-camera-controls{left:auto;right:calc(7px + var(--safe-right));bottom:calc(7px + var(--safe-bottom));width:105px;padding:4px;border-radius:11px}
  #mobile-camera-controls>p{display:none}.mobile-move-pad{grid-template-columns:repeat(3,28px);grid-template-rows:repeat(3,28px);gap:2px}.mobile-move-pad button{width:28px;height:28px;font-size:11px;border-radius:7px}
  #help-popup{width:min(640px,88vw);max-height:calc(var(--app-height) - 16px);padding:14px}.help-content{margin:7px 0}.help-content p{font-size:11px!important;margin:5px 0}.help-image{max-width:50px}.close-button{margin-top:8px;padding:6px 12px}
  #media-modal{padding:calc(4px + var(--safe-top)) calc(4px + var(--safe-right)) calc(4px + var(--safe-bottom)) calc(4px + var(--safe-left))}.media-dialog{height:calc(var(--app-height) - 8px - var(--safe-top) - var(--safe-bottom));max-height:none;display:flex;flex-direction:column;overflow:hidden}.media-head h2{font-size:14px!important;margin-top:3px}.media-head button{width:34px;height:34px;font-size:22px}#media-description{display:none}#media-stage{flex:1;min-height:0}.media-foot{padding-top:4px}.media-foot span{display:none}.media-foot button{padding:5px 9px;font-size:9px}
}