/* =========================================
   BASE STYLES
========================================= */
*,
*::before,
*::after { box-sizing: border-box; min-width: 0; }
html, body { width: 100%; overflow-x: hidden; }

body {
  background-color: #000;
  color: #fff;
  font-family: 'Bank Gothic', Arial, sans-serif;
  margin: 0;
  padding: 20px;
}
h1 { text-align: center; margin-bottom: 20px; font-size: 1.2rem; }
#nftResult { width: 200px; max-width: 100%; margin: 0 auto; }

/* =========================================
   LOGO / HEADER
========================================= */
.logo-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 15px; margin: 0 10px 8px;
}
.brand-logo { height: 45px; width: auto; display: inline-block; }
.logo-header h1 { margin: 0 0 0 40px; color: #fff; font-size: 1.2rem; }
.soon-kickstarter { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: #fff; }

/* =========================================
   RIGHT SIDEBAR (INFO TAB STANDARD)
========================================= */
.info-tab-std {
  display: block; font-family: Arial, sans-serif;
  width: 100%; max-width: 300px;
  background-color: #000; color: #f0f0f0;
  padding: 1em; border-radius: 8px;
  box-shadow: 0 0 10px rgba(255,255,255,0.1);
}
.info-tab-std strong { font-size: 1.2em; display: block; margin: 15px 0 1em; color:#fff; }

/* Pannelli (sidebar) */
.info-tab-std details{
  background:#0f0f0f; border:1px solid #333; border-radius:8px;
  margin:10px 0; color:#fff;
}
.info-tab-std summary{
  list-style:none; padding:12px 14px; cursor:pointer; font-weight:700; color:#fff;
}
.info-tab-std summary::-webkit-details-marker{ display:none; }
.info-tab-std .content{ padding:10px 14px; animation: fadeIn .3s ease; }
.info-tab-std .content .value{ font-weight:600; }
.watch-back { max-width:200px; }
.centered-img { display:block; margin:20px auto; width:200px; opacity:.95; }
.content-img { display:flex; flex-direction:column; align-items:center; }
@keyframes fadeIn { from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:translateY(0)} }

/* =========================================
   PRELOADER
========================================= */
#pageLoader {
  position: fixed; inset:0; background:black; display:flex;
  align-items:center; justify-content:center; z-index:9999; transition:opacity .5s ease;
}
.loader-content { text-align:center; color:white; font-family:sans-serif; }
.spinner {
  border:6px solid rgba(255,255,255,.1); border-top:6px solid #fff;
  border-radius:50%; width:40px; height:40px; animation: spin 1s linear infinite; margin:0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================
   LAYOUT WRAPPERS
========================================= */
.main-wrapper {
  display:flex; justify-content:center; align-items:flex-start; gap:40px;
  max-width:1200px; margin:0 auto; flex-wrap:wrap;
}
.selectors {
  display:flex; flex-direction:column; gap:20px; width:300px; align-items:flex-start;
  padding:1em; border-radius:8px; box-shadow:0 0 10px rgba(255,255,255,0.1);
}
.watch-and-buttons { display:flex; flex-direction:column; align-items:center; gap:20px; }

/* =========================================
   WATCH DISPLAY AREA
========================================= */
.watch-container {
  position:relative; width:460px; height:460px; background:#000;
  display:flex; justify-content:center; align-items:center;
  border:1px solid #333; border-radius:8px; box-shadow:0 0 20px rgba(255,255,255,0.1);
}
#watchArea, .watch-container { z-index:2; pointer-events:auto; cursor:zoom-in; }
.watch-layer { position:absolute; max-width:100%; max-height:100%; user-select:none; pointer-events:none; }

/* =========================================
   SELECTORS + ICONS
========================================= */
.select-with-icon { display:flex; align-items:center; gap:12px; }
.select-icon { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.select-wrapper { position:relative; width:100%; margin-bottom:17px; }
select, .input-field, input[type="email"], .owner-field input {
  background:#111; border:1px solid #444; color:#eee; padding:10px; font-size:16px;
  border-radius:6px; cursor:pointer; width:100%; box-sizing:border-box;
}
.input-field, input[type="email"], .owner-field input { margin-bottom:10px; }
select:hover, .input-field:hover, input[type="email"]:hover, .owner-field input:hover { background:#1a1a1a; }

/* Tooltip piccolo sopra i select */
.tooltip {
  position:absolute; bottom:100%; left:44px; transform:translateY(-8px);
  background:#222; color:#fff; padding:6px 10px; border-radius:6px; white-space:nowrap;
  font-size:11px; line-height:1; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:20;
}
.tooltip::after{
  content:""; position:absolute; top:100%; left:16px;
  border-width:6px; border-style:solid; border-color:#222 transparent transparent transparent;
}
.select-wrapper:hover .tooltip, .select-wrapper:focus-within .tooltip { opacity:1; transform:translateY(-10px); }

/* Tooltip sull'immagine (riassunto configurazione) */
.watch-tooltip{
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,.85); color:#fff;
  font-size:12px; line-height:1.3;
  padding:8px 10px; border-radius:6px;
  max-width:220px; text-align:left;
  pointer-events:none; opacity:0; transition:opacity .15s ease;
  box-shadow:0 0 10px rgba(255,255,255,.08);
}
.watch-container:hover .watch-tooltip{ opacity:1; }

/* =========================================
   TOURBILLON HOVER OVERLAY
========================================= */
#tourbillonLayer {
  position:absolute; inset:0; width:100%; height:auto; z-index:60;
  pointer-events:none; opacity:0; transition:opacity .2s ease;
}
.watch-container:hover #tourbillonLayer { opacity:1; }
#tourbillonStaticLayer, #tourbillonLayer { top:0; left:0; width:100%; height:auto; transform:none; object-fit:unset; }

/* =========================================
   BUTTONS
========================================= */
.form-buttons { display:flex; flex-direction:row; gap:10px; width:100%; }
.form-buttons button,
#ActivationBtn {
  background:#222; border:1px solid #555; color:#eee; padding:8px 0; font-size:14px;
  border-radius:6px; cursor:pointer; transition:background-color .3s ease; text-align:center;
}
.form-buttons button { flex:1; }
.form-buttons button:hover, #ActivationBtn:hover { background:#555; }
#ActivationBtn { width:100%; margin:10px 0; }

/* Bottone "Available Dial Config" 
.available-box{ margin-top:10px; }
#availableBtn{
  width:100%; padding:12px 14px; border-radius:8px;
  background:#111; color:#fff; border:1px solid #444;
  font-weight:700; cursor:pointer;
}
#availableBtn:hover{ filter:brightness(1.08); }
*/
/* =========================================
   OWNER FIELDS
========================================= */
.owner-field { display:flex; align-items:center; margin-bottom:10px; }
.owner-field label { width:80px; font-weight:bold; }

/* =========================================
   OVERLAY & POPUP (screenshot modal)
========================================= */
#overlay{
  display:none; position:fixed; inset:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.55);
  z-index:2147483645; pointer-events:auto;
}
#popup{
  display:none; position:fixed; inset:0; background:#000; z-index:2147483646;
  align-items:center; justify-content:center; overflow:hidden;
}
#overlay.is-open { display:block; }
#popup.is-open { display:flex; }

#popupFrame {
  position:relative; display:inline-block; background:#000; border-radius:10px;
  overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,.7); max-width:90vw; max-height:90vh;
}
#popupImage { display:block; width:auto; height:auto; max-width:92vw; max-height:80vh; margin:0 auto; }
#popupTourbillonGif { position:absolute; top:0; left:0; width:100%; height:auto; object-fit:unset; transform:translateZ(0); }
#popup-close {

  position:absolute;  top:8px;  left:8px;   /* ← Spostato a sinistra */
  z-index:4;  background:red;  color:white;  border:none;  border-radius:50%;  width:35px;  height:35px;  font-size:20px;  cursor:pointer;
  box-shadow:0 0 10px rgba(0,0,0,.4);

}
#popup-close:hover { background:#f00; }

body.modal-open { overflow:hidden; }

#availableBtn,
.form-buttons button {
  font-family: 'Bank Gothic', Arial, sans-serif;
  font-weight: 600; /* opzionale: bilancia il contrasto se uno sembra più sottile */
  letter-spacing: 0.3px; /* opzionale per uniformare la spaziatura */
}

/* infoTab (fade-in) */
#infoTab { opacity:0; transition:opacity .6s ease; display:none; }
#infoTab.show { display:block; opacity:1; }

/* Opzioni soft-disable visive */
select option.soft-disabled { color:#888; font-style:italic; pointer-events:none; background:#111; }
select option.soft-disabled::after { content:" ●"; color:red; font-weight:bold; }

/* =========================================
   AVAILABLE DIAL × INDEX POPUP (informativo)
========================================= */
#availOverlay{
  display:none; position:fixed; inset:0;
  z-index:2147483600;
  background:rgba(0,0,0,.8);
}
#availPopup{
  display:none; position:fixed; inset:0;
  z-index:2147483601;
  align-items:center; justify-content:center; padding:16px;
}
.avail-card{
  background:#0a0a0a; color:#fff; border-radius:12px; width:min(880px,94vw);
  box-shadow:0 0 20px rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.12);
  max-height:90vh; overflow:hidden;
}
.avail-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.1); color:#fff;
}
.avail-header h3{ margin:0; font-size:18px; color:#fff; }
.avail-close{
  background:#c0392b; color:#fff; border:none; border-radius:50%;
  width:34px; height:34px; font-size:18px; cursor:pointer;
}
.avail-body{ padding:10px 12px 14px; color:#fff; }

.combos-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr));
  gap:10px; max-height:66vh; overflow:auto; padding:4px;
}
.combo-item{
  border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:10px;
  background:#111; color:#fff; text-align:left; user-select:text;
}
.combo-title{ font-weight:700; margin:0 0 6px; color:#fff; }
.combo-sub{ opacity:.9; font-size:13px; margin:0; color:#fff; }

.select-title {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
}


/* =========================================
   DESKTOP TWEAKS (≥1200px)
========================================= */
@media (min-width:1200px){
  .main-wrapper { max-width:1260px; gap:20px; }
  .watch-container { width:540px; height:540px; }
  .info-tab-std { margin-left:14px; }
}

/* ===== 3 colonne compatte tra 1024px e 1199px ===== */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .main-wrapper{
    flex-wrap: nowrap;         /* non andare a capo */
    gap: 24px;
    align-items: flex-start;
  }
  .selectors{
    width: 220px;
    flex: 0 0 220px;
  }
  .watch-and-buttons{
    flex: 0 0 400px;
  }
  .watch-container{
    width: 400px;
    height: 400px;
  }
  .info-tab-std{
    width: 250px;
    max-width: 250px;
    flex: 0 0 250px;
    margin-left: 0;
  }
}

/* =========================================
   MOBILE (≤768px) – CONSOLIDATO
========================================= */
@media (max-width:768px){
  html,body{
    background:#000; color:#fff; font-family:'Bank Gothic',Arial,sans-serif;
    margin:0; padding:0; max-width:100%; overflow-x:hidden;
  }
  
   .available-box,
  .form-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #availableBtn,
  #resetBtn {
    width: 100%;
    margin: 6px 0; /* più spazio verticale tra i bottoni */
  }
  
  .watch-tooltip {
    font-size: 8px;        /* testo più piccolo */
    line-height: 1.2;       /* compatto */
    padding: 5px 7px;       /* meno margine interno */
    max-width: 160px;       /* box più stretto */
    right: 5px;             /* spostato un po' a sinistra */
    top: 5px;               /* più vicino al bordo */
  }

  .logo-header{ justify-content:center; gap:6px; margin:4px 0; flex-wrap: wrap; }
  .logo-header > * { min-width:0; }
  .brand-logo{ height:35px; }
  .logo-header h1{ font-size:.5rem; margin:6px 0; }
  .prometheus-text{ display:none; }
  .soon-kickstarter{ font-size:.7rem; gap:4px; display:flex; align-items:center; flex: 1 1 100%; justify-content:center; max-width:100%; }
  .soon-kickstarter img{ height:14px; max-width:100%; }

  .main-wrapper{ flex-direction:column; align-items:center; gap:10px; padding:8px 12px; width:100% !important; max-width:100% !important; }
  .selectors{ gap:0; }
  .select-wrapper{ width:100%; }
  .selectors, .info-tab-std{ width:100% !important; max-width:100% !important; margin:0 auto !important; }

  .watch-container{ width:min(92vw, 320px) !important; height:min(92vw, 320px) !important; margin:0 auto; }

  select, .input-field, input[type="email"], .owner-field input { font-size:14px; padding:8px; }
  .form-buttons{ justify-content:center; gap:8px; }
  .form-buttons button, #ActivationBtn { font-size:12px; padding:8px 12px; }

  .tooltip{ display:none !important; }
  #popupImage{ max-width:92vw; max-height:80vh; }
  
#popup-close {

  position:absolute;  top:8px;  left:8px;   /* ← Spostato a sinistra */

  z-index:4;  background:red;  color:white;  border:none;  border-radius:50%;  width:35px;  height:35px;  font-size:20px;  cursor:pointer;

  box-shadow:0 0 10px rgba(0,0,0,.4);

}


}

/* =========================================
   XS EXTRA (≤365px)
========================================= */
@media (max-width:365px){
  .main-wrapper{ padding:6px 8px; }
  .soon-kickstarter{ font-size:.72rem; }
  .soon-kickstarter img{ height:12px; }
  .select-with-icon{ gap:8px; }
  .select-icon{ width:20px; height:20px; flex-shrink:0; }
  .watch-container{ width:min(90vw, 300px) !important; height:min(90vw, 300px) !important; }
}

/* =========================================
   XXS (≤320px)
========================================= */
@media (max-width:320px){
  .soon-kickstarter{ font-size:.68rem; }
  .soon-kickstarter img{ height:11px; }
  select, .input-field, input[type="email"], .owner-field input { font-size:13px; padding:7px; }
  .watch-container{ width:min(88vw, 280px) !important; height:min(88vw, 280px) !important; }
}

/* Tooltip over the watch: iPad fix (toggle .show via JS) */
.watch-tooltip{
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,.85); color:#fff;
  font-size:12px; line-height:1.3;
  padding:8px 10px; border-radius:6px;
  max-width:220px; text-align:left;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
  box-shadow:0 0 10px rgba(255,255,255,.08);
  z-index: 70; /* sopra i layer della watch */
}
.watch-container:hover .watch-tooltip{ opacity:1; }
.watch-tooltip.show { opacity:1; }

/* testo info prezzo */
    .price-teaser { margin: 0 0 14px 0; }
    .price-teaser .msrp { font-size: 20px; font-weight: 700; }
    .ks-teaser a { color:#fff; text-decoration: underline; }

    /* popup screenshot (già presente nel tuo CSS principale, qui solo base di sicurezza) */
    #overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:999; }
    #popup{ display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:16px; background:transparent; }
    #popupFrame{ position:relative; background:#000; color:#fff; border-radius:10px; box-shadow:0 0 20px rgba(255,255,255,0.3); overflow:hidden; max-width:90vw; max-height:90vh; }
    #popupImage{ display:block; width:auto; height:auto; max-width:90vw; max-height:90vh; }
    #popupTourbillonGif{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; z-index:3; }
    #popup-close{ position:absolute; top:8px; right:8px; z-index:4; background:red; color:white; border:none; border-radius:50%; width:35px; height:35px; font-size:20px; cursor:pointer; box-shadow:0 0 10px rgba(0,0,0,.4); }

    /* Popup "Available Dial × Index" (informativo) – testi bianchi */
    #availOverlay{ display:none; position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.8); }
    #availPopup{ display:none; position:fixed; inset:0; z-index:1210; align-items:center; justify-content:center; padding:16px; }
    .avail-card{ background:#0a0a0a; color:#fff; border-radius:12px; width:min(880px,94vw); box-shadow:0 0 20px rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.12); max-height:90vh; overflow:hidden; }
    .avail-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.1); }
    .avail-header h3{ margin:0; font-size:18px; color:#fff; }
    .avail-close{ background:#c0392b; color:#fff; border:none; border-radius:50%; width:34px; height:34px; font-size:18px; cursor:pointer; }
    .avail-body{ padding:10px 12px 14px; color:#fff; }
    .combos-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:10px; max-height:66vh; overflow:auto; padding:4px; }
    .combo-item{ border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:10px; background:#111; color:#fff; text-align:left; user-select:text; }
    .combo-title{ font-weight:700; margin:0 0 6px; color:#fff; }
    .combo-sub{ opacity:.9; font-size:13px; margin:0; color:#fff; }

    /* Bottone nero sotto reset 
    .available-box{ margin-top:10px; }
    #availableBtn{ width:100%; padding:12px 14px; border-radius:8px; background:#111; color:#fff; border:1px solid #444; font-weight:700; cursor:pointer; }
    #availableBtn:hover{ filter:brightness(1.08); } */

/* Bottone "Available configurations" — stesso stile del reset */
.available-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 10px;
}

#availableBtn {
  flex: 1;
  background: #222;
  border: 1px solid #555;
  color: #eee;
  padding: 8px 0;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .3s ease;
  text-align: center;
}

#availableBtn:hover {
  background: #555;
}