/* Top bar layout (height reduced ~20%) - STATIC positioning for natural scrolling */
.top-bar { display:flex; background:#ffffff; padding:5px 14px; align-items:center; gap:14px; border-bottom:1px solid #e2e2e2; position:static; box-shadow:0 2px 4px rgba(0,0,0,0.04); }
.top-bar-inner { display:flex; flex-wrap:wrap; width:100%; gap:14px; align-items:center; }
.top-bar-group { display:flex; align-items:center; gap:4px; }
.top-bar-group label { font-size:12px; font-weight:600; margin:0; }
.top-bar-group select { padding:3px 5px; border:1px solid #ccc; border-radius:4px; background:#fff; font-size:12px; }
.top-bar-group select:focus { outline:2px solid #2684ff; outline-offset:1px; }
.top-bar-messages { display:flex; gap:6px; font-size:11px; color:#b45309; font-weight:600; margin-left:auto; flex-wrap:wrap; }

@media (max-width: 900px) {
  .top-bar { position:static !important; flex-direction:column; align-items:stretch; padding:10px 12px; }
  .top-bar-inner { flex-direction:column; align-items:stretch; gap:8px; }
  .top-bar-group { width:100%; justify-content:space-between; }
  .top-bar-group select { flex:1; }
  .top-bar-messages { order:99; width:100%; margin-left:0; }
}

/* Landscape mobile: ensure topbar never sticks */
@media (max-width: 920px) and (orientation: landscape) {
  .top-bar { 
    position: static !important; /* Force static positioning in mobile landscape */
  }
}

/* Modal styling (added with mobile improvements) */
#doorStyleModal.modal { position:fixed; inset:0; background:rgba(0,0,0,0.55); display:none; align-items:flex-start; justify-content:center; padding:40px 30px 60px; overflow-y:auto; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); transition:opacity .18s ease; }
#doorStyleModal.modal[aria-hidden="true"] { display:none !important; }
#doorStyleModal .modal-content { max-width:1200px; width:100%; background:#fff; border-radius:10px; box-shadow:0 10px 28px -4px rgba(0,0,0,0.35); padding:18px 22px 32px; position:relative; animation:modalPop .25s ease; }
@keyframes modalPop { from { transform:translateY(18px); opacity:0;} to { transform:translateY(0); opacity:1;} }
#doorStyleModal .tab-container { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
#doorStyleModal .tab-button { background:#f1f3f5; border:1px solid #c9d1d9; padding:6px 14px; border-radius:20px; font-size:13px; cursor:pointer; font-weight:600; color:#374151; }
#doorStyleModal .tab-button.active { background:#007cba; color:#fff; border-color:#007cba; }
#doorStyleModal .tab-content { display:none; }
#doorStyleModal .tab-content.active { display:block; }
#doorStyleModal #doorStyleModalClose { position:absolute; top:8px; right:10px; font-size:28px; cursor:pointer; color:#666; line-height:1; }
#doorStyleModal #doorStyleModalClose:hover { color:#111; }
#doorStyleModal .detail-grid { display:grid; gap:20px; grid-template-columns:450px 1fr; align-items:start; }
@media (max-width:1100px){ #doorStyleModal .detail-grid { grid-template-columns:1fr; } }

/* Mobile modal improvements */
@media (max-width: 768px) {
  #doorStyleModal.modal { 
    padding: 10px; 
    align-items: flex-start;
  }
  #doorStyleModal .modal-content { 
    max-width: 100%; 
    width: 100%; 
    margin: 0;
    border-radius: 8px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    padding: 15px;
  }
  #doorStyleModal .tab-container { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 4px; 
    margin-bottom: 12px; 
  }
  #doorStyleModal .tab-button { 
    padding: 8px 12px; 
    font-size: 12px; 
    flex: 1; 
    min-width: 80px;
    text-align: center;
  }
  /* PDF content in mobile - ensure proper display */
  #doorStyleModal iframe,
  #doorStyleModal embed,
  #doorStyleModal object {
    width: 100% !important;
    min-height: 400px !important;
    max-height: 60vh !important;
  }
  #doorStyleModal .detail-grid { 
    grid-template-columns: 1fr; 
    gap: 15px; 
  }
}

/* Landscape mobile modal adjustments */
@media (max-width: 920px) and (orientation: landscape) {
  #doorStyleModal .modal-content {
    max-height: calc(100vh - 40px);
  }
  #doorStyleModal iframe,
  #doorStyleModal embed, 
  #doorStyleModal object {
    max-height: 50vh !important;
  }
}
img.detail-image { width:100%; max-width:400px; height:auto; border-radius:8px; border:2px solid #e5e7eb; background:#fafafa; display:block; margin:0 auto; object-fit:contain; }
.image-gallery { display:flex; gap:10px; flex-wrap:wrap; }
.image-gallery img { width:110px; height:110px; object-fit:cover; border-radius:6px; border:1px solid #e5e7eb; background:#fafafa; }
.selection-item { transition:box-shadow .15s, transform .15s; }
.selection-item:hover { box-shadow:0 4px 14px -4px rgba(0,0,0,0.25); transform:translateY(-2px); }
#doorStyleModal { z-index:10001; }