/*
 * OptionsGEX reusable mobile detail surface.
 *
 * <=760px  : bottom sheet
 * >760px   : right-side detail drawer
 */

.ogex-detail-layer{
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
  visibility:hidden;
}

.ogex-detail-layer.open{
  pointer-events:auto;
  visibility:visible;
}

.ogex-detail-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.66);
  opacity:0;
  transition:opacity .18s ease;
}

.ogex-detail-layer.open
.ogex-detail-backdrop{
  opacity:1;
}

.ogex-detail-panel{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(440px,92vw);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-left:1px solid #2a3a4d;
  background:#071018;
  color:#e5edf5;
  box-shadow:
    -18px 0 45px rgba(0,0,0,.40);
  transform:translateX(102%);
  transition:transform .20s ease;
}

.ogex-detail-layer.open
.ogex-detail-panel{
  transform:translateX(0);
}

.ogex-detail-handle{
  display:none;
}

.ogex-detail-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px;
  border-bottom:1px solid #243244;
}

.ogex-detail-subtitle{
  color:#7f90a5;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.35;
}

.ogex-detail-header h2{
  margin:3px 0 0;
  color:#f8fafc;
  font-size:21px;
  line-height:1.25;
}

.ogex-detail-close{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:1px solid #334155;
  border-radius:11px;
  background:#0f172a;
  color:#e5edf5;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}

.ogex-detail-body{
  flex:1 1 auto;
  min-height:0;
  padding:14px 16px 28px;
  overflow:auto;
  overscroll-behavior:contain;
}

.ogex-detail-actions{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:8px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid #243244;
  background:#071018;
}

.ogex-detail-action{
  min-height:46px;
  padding:9px 12px;
  border:1px solid #334155;
  border-radius:10px;
  background:#0f172a;
  color:#e2e8f0;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.ogex-detail-action.primary{
  border-color:#2563eb;
  background:#172554;
  color:#dbeafe;
}

.ogex-detail-section{
  margin-bottom:14px;
  padding:13px;
  border:1px solid #243244;
  border-radius:11px;
  background:#0b1420;
}

.ogex-detail-section:last-child{
  margin-bottom:0;
}

.ogex-detail-section h3{
  margin:0 0 10px;
  color:#f1f5f9;
  font-size:15px;
  line-height:1.3;
}

.ogex-detail-grid{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);
  gap:8px;
}

.ogex-detail-cell{
  min-width:0;
  padding:9px;
  border-radius:8px;
  background:#0f172a;
}

.ogex-detail-cell span{
  display:block;
  color:#7f90a5;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.3;
}

.ogex-detail-cell strong{
  display:block;
  margin-top:4px;
  color:#e5edf5;
  font-size:14px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.ogex-detail-note{
  padding:10px 11px;
  border-radius:8px;
  background:#0f172a;
  color:#a9b8c8;
  font-size:13px;
  line-height:1.5;
}

.ogex-detail-list{
  display:grid;
  gap:7px;
}

.ogex-detail-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 10px;
  border-radius:8px;
  background:#0f172a;
  color:#b8c5d3;
  font-size:13px;
  line-height:1.4;
}

.ogex-detail-row strong{
  color:#eef4fa;
  text-align:right;
}

body.ogex-detail-open{
  overflow:hidden;
}

@media(max-width:760px){

  .ogex-detail-panel{
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    max-height:min(82vh,760px);
    border-left:0;
    border-top:1px solid #334155;
    border-radius:18px 18px 0 0;
    box-shadow:
      0 -18px 45px rgba(0,0,0,.46);
    transform:translateY(103%);
  }

  .ogex-detail-layer.open
  .ogex-detail-panel{
    transform:translateY(0);
  }

  .ogex-detail-handle{
    display:block;
    width:42px;
    height:5px;
    margin:9px auto 0;
    border-radius:999px;
    background:#475569;
  }

  .ogex-detail-header{
    padding:12px 16px 13px;
  }

  .ogex-detail-header h2{
    font-size:20px;
  }

  .ogex-detail-body{
    padding:
      12px
      14px
      24px;
  }

  .ogex-detail-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .ogex-detail-cell span{
    font-size:12px;
  }

  .ogex-detail-cell strong{
    font-size:15px;
  }

  .ogex-detail-action{
    min-height:48px;
    font-size:15px;
  }
}

@media(max-width:430px){

  .ogex-detail-panel{
    max-height:86vh;
  }

  .ogex-detail-grid{
    grid-template-columns:
      1fr 1fr;
  }
}