/* Detail modal, image zoom, variants and prices */

.sample-note .sample-prices {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 12px;
        margin-top: 22px;
    }

.sample-prices div {
    background: rgba(0,0,0,.18);
    border-radius: 12px;
    padding: 13px;
    text-align: center;
}

.modal.hidden {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(7px);
}

.modal-panel {
    position: relative;
    width: min(1180px, calc(100% - 28px));
    max-height: calc(100vh - 34px);
    overflow: auto;
    margin: 17px auto;
    background: #f3f0e6;
    border-radius: 24px;
    box-shadow: 0 35px 90px rgba(0,0,0,.45);
    color: #111827;
}

.modal-close {
    position: sticky;
    top: 16px;
    float: right;
    margin: 16px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--gold);
    color: #111827;
    font-size: 28px;
    line-height: 1;
    z-index: 3;
}

.detail-layout {
    display: grid;
    grid-template-columns: 48% 52%;
    min-height: 640px;
}

.detail-images {
    padding: 34px;
    background: #e9e5d7;
}

.main-image {
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 22px;
    min-height: 360px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.main-image img {
        max-width: 100%;
        max-height: 520px;
        object-fit: contain;
        cursor: zoom-in;
    }

.thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.thumb {
    background: white;
    border: 2px solid #cbd5e1;
    border-radius: 16px;
    padding: 10px;
    text-align: left;
}

.thumb.active {
        border-color: #111827;
    }

.thumb span {
        display: block;
        font-weight: 800;
        color: #111827;
        font-size: 12px;
        margin-bottom: 6px;
    }

.thumb img {
        width: 100%;
        height: 90px;
        object-fit: contain;
    }

.detail-content {
    padding: 48px 44px;
    background: white;
}

.detail-content h1 {
        margin: 0 0 8px;
        color: #111827;
        font-size: 38px;
        letter-spacing: -.04em;
    }

.detail-meta {
    color: #64748b;
    margin-bottom: 24px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin: 22px 0;
}

.info-box {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px;
    background: #fafaf7;
}

.info-box span {
        display: block;
        color: #64748b;
        font-size: 12px;
        margin-bottom: 6px;
    }

.info-box b {
        color: #111827;
    }

.variant-list {
    display: grid;
    gap: 10px;
}

.variant-row {
    border: 1px solid #d7dce7;
    border-radius: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: 1.35fr .8fr 1.2fr;
    gap: 12px;
    align-items: center;
    background: #fbfbf8;
}

.sig-names {
    font-weight: 800;
    color: #111827;
    line-height: 1.45;
}

.sig-names span {
        display: inline-block;
        background: #eef2ff;
        border-radius: 999px;
        padding: 7px 10px;
        margin: 2px;
    }

.variant-meta {
    color: #64748b;
    font-size: 13px;
}

.rarity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 26px;
    border-radius: 999px;
    background: #e8eefb;
    color: #24439b;
    font-weight: 900;
    font-size: 12px;
    margin-left: 6px;
}

.rarity.RR {
        background: #fff4c7;
        color: #806300;
    }

.rarity.RRR {
        background: #ffe5cc;
        color: #9a4500;
    }

.rarity.UNIC {
        background: #fee2e2;
        color: #b91c1c;
    }

.prices {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}

.prices span {
        display: block;
        background: #111827;
        color: #fff;
        border-radius: 10px;
        padding: 9px;
        font-size: 12px;
        text-align: center;
        white-space: nowrap;
    }

.signature-mini {
    border: 1px solid #e2e8f0;
    background: #fafaf7;
    border-radius: 14px;
    padding: 10px;
}

.signature-mini img {
        width: 100%;
        height: 58px;
        object-fit: contain;
        background: white;
        border-radius: 10px;
    }

.signature-mini b {
        display: block;
        font-size: 12px;
        margin-top: 7px;
        color: #111827;
    }

.detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.variant-editor {
    display: grid;
    grid-template-columns: 1.4fr .6fr .6fr .7fr .7fr .7fr 44px;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    background: #0f172a;
    border: 1px solid #263347;
    margin-bottom: 8px;
}

.modal-panel {
    background: #f3f0e6;
}

.detail-layout {
    grid-template-columns: minmax(360px, 45%) minmax(0, 55%);
}

.detail-images {
    background: #e9e5d7;
}

.main-image {
    min-height: 330px;
}

.signature-mini {
    background: #fff;
    border-color: #d7dce7;
}

.signature-mini b {
    text-align: center;
}

.grade-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 22px;
}

.grade-legend b {
        color: #111827;
        margin-right: 4px;
    }

.grade-legend span {
        background: #111827;
        color: #fff;
        border-radius: 999px;
        padding: 7px 11px;
        font-size: 12px;
        font-weight: 800;
    }

.variant-list {
    gap: 12px;
}

.variant-row {
    border: 1px solid #d7dce7;
    border-radius: 18px;
    padding: 16px;
    background: #ffffff;
    display: grid;
    grid-template-columns: minmax(230px, 1.55fr) 120px minmax(260px, 1.1fr);
    gap: 16px;
    align-items: center;
}

.sig-names {
    font-weight: 700;
    color: #111827;
    line-height: 1.55;
}

.sig-names span {
        background: #f1f5f9;
        border: 1px solid #dbe3ea;
        color: #111827;
        border-radius: 999px;
        padding: 7px 12px;
        margin: 3px;
        font-size: 13px;
        font-weight: 650;
    }

.sig-names em {
        color: #94a3b8;
        font-style: normal;
        font-weight: 800;
        margin: 0 2px;
    }

.variant-meta {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.variant-meta span {
        display: block;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: 11px;
        color: #94a3b8;
        margin-bottom: 3px;
    }

.variant-meta b {
        display: inline-block;
        color: #111827;
        font-size: 15px;
    }

.variant-meta .rarity {
        margin-left: 6px;
        font-style: normal;
    }

.prices {
    display: grid;
    grid-template-columns: repeat(3, minmax(74px, 1fr));
    gap: 8px;
}

.prices span {
        min-height: 45px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: #111827;
        color: #fff;
        border-radius: 11px;
        padding: 8px 9px;
        font-size: 12px;
        text-align: center;
        white-space: nowrap;
    }

.prices span b {
            color: #f5a400;
            font-size: 11px;
            line-height: 1;
        }

.modal-panel {
    width: min(1500px, calc(100vw - 20px)) !important;
    max-height: calc(100vh - 20px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 10px auto !important;
    background: #f3f0e6 !important;
}

.detail-layout {
    grid-template-columns: minmax(430px, 45%) minmax(0, 55%) !important;
}

.detail-content,
.detail-images,
.variant-list,
.variant-row {
    min-width: 0 !important;
}

.variant-list {
    width: 100% !important;
    overflow-x: hidden !important;
    gap: 12px !important;
}

.variant-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.25fr) 88px minmax(270px, 1.35fr) !important;
    gap: 14px !important;
    align-items: center !important;
    overflow: visible !important;
    border: 1px solid #d7dce7 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
}

.sig-names {
    min-width: 0 !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.sig-names span {
    display: inline !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sig-names em {
    display: inline !important;
    margin: 0 6px !important;
}

.variant-meta {
    min-width: 0 !important;
    text-align: center !important;
}

.prices {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(74px, 1fr)) !important;
    gap: 8px !important;
}

.prices span {
    min-width: 0 !important;
    white-space: nowrap !important;
}

/* Lightbox */

.lightbox.hidden {
    display: none !important;
}

.lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
}

.lightbox-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(3, 7, 18, .88) !important;
    backdrop-filter: blur(6px) !important;
}

.lightbox-panel {
    position: relative !important;
    z-index: 2 !important;
    width: min(1280px, 96vw) !important;
    height: min(88vh, 900px) !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

.lightbox-panel img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.45) !important;
    cursor: zoom-in !important;
    user-select: none !important;
    touch-action: none !important;
    will-change: transform !important;
}

.lightbox-panel img.zoomed {
    cursor: grab !important;
}

.lightbox-panel img.zoomed:active {
    cursor: grabbing !important;
}

.lightbox-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 3 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: #f5a400 !important;
    color: #111827 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.main-image {
    position: relative !important;
}

.image-side-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(17, 24, 39, .85) !important;
    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    z-index: 5 !important;
}

.image-side-arrow:hover {
    background: #f5a400 !important;
    color: #111827 !important;
}


/* Lightbox front/back gallery arrows */
.lightbox-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(17, 24, 39, .86) !important;
    color: #ffffff !important;
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    z-index: 5 !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
}

.lightbox-nav:hover {
    background: #f5a400 !important;
    color: #111827 !important;
}

.lightbox-prev {
    left: 18px !important;
}

.lightbox-next {
    right: 18px !important;
}

.lightbox-nav.hidden {
    display: none !important;
}

/* UNIFIED LIGHTBOX GALLERY V12 - centered full image no crop */
.lightbox{position:fixed!important;inset:0!important;z-index:999999!important}
.lightbox.hidden{display:none!important}
.lightbox-backdrop{position:absolute!important;inset:0!important;background:rgba(2,6,23,.88)!important}
.lightbox-panel{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;display:block!important;overflow:hidden!important;background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
#lightboxImage{position:fixed!important;left:50%!important;top:50%!important;width:auto!important;height:auto!important;max-width:calc(100vw - 170px)!important;max-height:calc(100vh - 150px)!important;object-fit:contain!important;object-position:center center!important;display:block!important;margin:0!important;padding:10px!important;background:#fff!important;border-radius:18px!important;box-shadow:0 28px 90px rgba(0,0,0,.45)!important;transform-origin:center center!important;user-select:none!important;touch-action:none!important;cursor:zoom-in!important}
#lightboxImage.zoomed{cursor:grab!important}
.lightbox-close{position:fixed!important;top:22px!important;right:28px!important;z-index:1000001!important;width:48px!important;height:48px!important;border:0!important;border-radius:50%!important;background:#f5a400!important;color:#0f172a!important;font-size:28px!important;font-weight:1000!important;line-height:1!important}
.lightbox-nav{position:fixed!important;top:50%!important;transform:translateY(-50%)!important;z-index:1000001!important;width:58px!important;height:58px!important;border:0!important;border-radius:50%!important;background:rgba(15,23,42,.94)!important;color:#fff!important;font-size:46px!important;font-weight:900!important;line-height:1!important;display:grid!important;place-items:center!important;cursor:pointer!important}
.lightbox-prev{left:28px!important}.lightbox-next{right:28px!important}
.lightbox-counter{position:fixed!important;left:50%!important;bottom:22px!important;transform:translateX(-50%)!important;z-index:1000001!important;background:rgba(15,23,42,.92)!important;color:#fff!important;border-radius:999px!important;padding:8px 14px!important;font-weight:900!important}
@media(max-width:700px){#lightboxImage{max-width:calc(100vw - 36px)!important;max-height:calc(100vh - 92px)!important;padding:8px!important;border-radius:14px!important}.lightbox-nav{width:44px!important;height:44px!important;font-size:34px!important}.lightbox-prev{left:12px!important}.lightbox-next{right:12px!important}.lightbox-close{top:10px!important;right:12px!important;width:42px!important;height:42px!important}}

/* Variant row numbering: show 1, 2, 3... before each signature line */
.sig-names {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.variant-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

/* FIX: Give variant number more space from signer names */
.variant-row .sig-names {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}

.variant-row .sig-names .variant-number {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin-right: 8px !important;
}

.variant-row .sig-names span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 780px) {
    .variant-row .sig-names {
        gap: 14px !important;
    }
    .variant-row .sig-names .variant-number {
        flex-basis: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        margin-right: 6px !important;
    }
}


/* =========================================================
   DETAIL MODAL MOBILE FIX — ChatGPT patch
   Fixes: right empty strip / modal not filling mobile screen
========================================================= */
@media (max-width: 860px){

  .modal{
    inset:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    overflow:hidden !important;
  }

  .modal-panel{
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    max-height:100dvh !important;
    height:100dvh !important;
    margin:0 !important;
    border-radius:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:#f3f0e6 !important;
  }

  .detail-layout{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
  }

  .detail-images,
  .detail-content{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding:18px !important;
    overflow:hidden !important;
  }

  .detail-images{
    background:#e9e5d7 !important;
  }

  .main-image{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:230px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .main-image img,
  #mainBanknoteImage,
  #mainCoinImage{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:320px !important;
    object-fit:contain !important;
    display:block !important;
  }

  .thumbs{
    grid-template-columns:1fr 1fr !important;
    width:100% !important;
    max-width:100% !important;
  }

  .thumb{
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .thumb img{
    max-width:100% !important;
    object-fit:contain !important;
  }

  .signature-strip,
  .signature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    max-width:100% !important;
  }

  .signature-mini{
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .modal-close{
    position:fixed !important;
    top:12px !important;
    right:12px !important;
    z-index:100010 !important;
  }

  .image-side-arrow{
    width:42px !important;
    height:42px !important;
    font-size:34px !important;
  }

  .image-side-prev{left:8px !important;}
  .image-side-next{right:8px !important;}
}

@media (max-width: 860px){
  .lightbox-panel{
    width:100vw !important;
    height:100dvh !important;
    max-width:100vw !important;
    max-height:100dvh !important;
    padding:0 !important;
    border-radius:0 !important;
  }

  #lightboxImage{
    max-width:calc(100vw - 30px) !important;
    max-height:calc(100dvh - 120px) !important;
    padding:6px !important;
    border-radius:12px !important;
  }

  .lightbox-prev{left:10px !important;}
  .lightbox-next{right:10px !important;}

  .lightbox-nav{
    width:46px !important;
    height:46px !important;
    font-size:34px !important;
  }
}


/* =========================================================
   STABLE V1 DETAIL MODAL MOBILE FIX
   - full-width detail modal on mobile
   - removes right empty/beige strip
========================================================= */
@media (max-width:860px){
  .modal{inset:0!important;width:100vw!important;max-width:100vw!important;overflow:hidden!important}
  .modal-panel{
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:#f3f0e6!important;
  }
  .detail-layout{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
  }
  .detail-images,.detail-content{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:18px!important;
    overflow:hidden!important;
  }
  .main-image{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:230px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .main-image img,#mainBanknoteImage,#mainCoinImage{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:320px!important;
    object-fit:contain!important;
    display:block!important;
  }
  .thumbs{grid-template-columns:1fr 1fr!important;width:100%!important;max-width:100%!important}
  .thumb{min-width:0!important;box-sizing:border-box!important}
  .thumb img{max-width:100%!important;object-fit:contain!important}
  .modal-close{position:fixed!important;top:12px!important;right:12px!important;z-index:100010!important}
  .image-side-prev{left:8px!important}
  .image-side-next{right:8px!important}
}

@media (max-width:860px){
  .lightbox-panel{width:100vw!important;height:100dvh!important;max-width:100vw!important;max-height:100dvh!important;padding:0!important;border-radius:0!important}
  #lightboxImage{max-width:calc(100vw - 30px)!important;max-height:calc(100dvh - 120px)!important;padding:6px!important;border-radius:12px!important}
  .lightbox-prev{left:10px!important}
  .lightbox-next{right:10px!important}
  .lightbox-nav{width:46px!important;height:46px!important;font-size:34px!important}
}


/* =========================================================
   V2.4 DETAIL MODAL STACKING FIX
   Detail windows must appear above sticky header.
========================================================= */
.detail-modal,
.note-detail-modal,
.coin-detail-modal,
.market-detail-modal,
.modal.detail-modal,
.modal.note-detail-modal,
.modal.coin-detail-modal,
.modal.market-detail-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:200000 !important;
  padding-top:92px !important;
  align-items:flex-start !important;
}

.detail-modal .modal-panel,
.note-detail-modal .modal-panel,
.coin-detail-modal .modal-panel,
.market-detail-modal .modal-panel,
.detail-modal .detail-panel,
.note-detail-modal .note-detail-panel,
.coin-detail-modal .coin-detail-panel,
.market-detail-modal .market-detail-box,
.coin-detail-modal .coin-detail-shell,
.note-detail-modal .note-detail-shell{
  position:relative !important;
  z-index:200001 !important;
  margin-top:0 !important;
  max-height:calc(100vh - 110px) !important;
  overflow:auto !important;
}

.site-header{
  z-index:10000 !important;
}

/* Lightbox still above detail windows */
#unifiedLightbox{
  z-index:2147483000 !important;
}


/* =========================================================
   V2.5 ACTUAL DETAIL MODAL FIX
   The real element is #detailModal.modal, so target it directly.
========================================================= */
#detailModal:not(.hidden){
  position:fixed !important;
  inset:0 !important;
  z-index:2147482000 !important;
  display:block !important;
  overflow:auto !important;
  padding:92px 14px 24px !important;
}

#detailModal:not(.hidden) .modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
}

#detailModal:not(.hidden) .modal-panel{
  position:relative !important;
  z-index:1 !important;
  margin:0 auto !important;
  max-height:calc(100vh - 116px) !important;
  overflow:auto !important;
}

body.detail-modal-open .site-header{
  z-index:1 !important;
}

#unifiedLightbox{
  z-index:2147483000 !important;
}