/* style.css */
/* confst- UI skin for Shoptet split variants + surcharge parameters (Venus/standard)
   Scope: product detail only. Native inputs remain for Shoptet logic.
*/

:root{
  --confst-border:#d0d0d0;
  --confst-border-strong:#000;
  --confst-text:#111;
  --confst-bg:#fff;
  --confst-focus:#111;
  --confst-gap:12px;
  --confst-row-h:54px;
}

/* Keep styles tightly scoped to product detail parameters table */
body .p-info-wrapper .detail-parameters th{
  font-weight:700;
  color:var(--confst-text);
}

/* Hide native selects but keep them in DOM */
body .p-info-wrapper .detail-parameters select.confst-hidden-native{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* Ensure consistent box sizing for our UI */
body .p-info-wrapper .detail-parameters .confst-stone,
body .p-info-wrapper .detail-parameters .confst-gold,
body .p-info-wrapper .detail-parameters .confst-stone__option,
body .p-info-wrapper .detail-parameters .confst-gold__card,
body .p-info-wrapper .detail-parameters select.confst-size-select{
  box-sizing:border-box;
}

/* Velikost (native select, but match width of custom controls) */
body .p-info-wrapper .detail-parameters td select.confst-size-select{
  width:100% !important;
  max-width:none !important;
  display:block !important;
  height:var(--confst-row-h);
  border:1px solid var(--confst-border);
  border-radius:0;
  background:var(--confst-bg);
  color:var(--confst-text);
  padding:0 44px 0 16px;
  font-size:24px;
  line-height:1;
  box-shadow:none !important;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  /* simple caret */
  background-image:
    linear-gradient(45deg, transparent 50%, #333 50%),
    linear-gradient(135deg, #333 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 14px) 50%;
  background-size:8px 8px, 8px 8px;
  background-repeat:no-repeat;
}
body .p-info-wrapper .detail-parameters td select.confst-size-select:focus{
  outline:3px solid var(--confst-focus);
  outline-offset:2px;
}

/* Druh kamene - rows (radiogroup) */
body .p-info-wrapper .detail-parameters .confst-stone{
  display:flex;
  flex-direction:column;
  gap:var(--confst-gap);
  width:100%;
}
body .p-info-wrapper .detail-parameters .confst-stone__option{
  width:100%;
  min-height:var(--confst-row-h);
  border:1px solid var(--confst-border);
  border-radius:0;
  background:var(--confst-bg);
  color:var(--confst-text);
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 16px;
  cursor:pointer;
  user-select:none;
}
body .p-info-wrapper .detail-parameters .confst-stone__option:hover{
  border-color:#b5b5b5;
}
body .p-info-wrapper .detail-parameters .confst-stone__option[aria-checked="true"]{
  border-color:#999;
}
body .p-info-wrapper .detail-parameters .confst-stone__box{
  width:24px;
  height:24px;
  border:1px solid #6f7aa0;
  background:#fff;
  flex:0 0 auto;
}
body .p-info-wrapper .detail-parameters .confst-stone__option[aria-checked="true"] .confst-stone__box{
  background:#111;
  box-shadow:inset 0 0 0 6px #fff;
}
body .p-info-wrapper .detail-parameters .confst-stone__label{
  font-size:28px;
  line-height:1.1;
}
body .p-info-wrapper .detail-parameters .confst-stone__option:focus{
  outline:3px solid var(--confst-focus);
  outline-offset:2px;
}

/* Barva zlata - cards */
body .p-info-wrapper .detail-parameters .confst-gold{
  display:grid;
  grid-template-columns:repeat(var(--confst-cols, 3), minmax(0,1fr));
  gap:var(--confst-gap);
  width:100%;
}
body .p-info-wrapper .detail-parameters .confst-gold__card{
  width:100%;
  min-height:52px;
  border:1px solid var(--confst-border);
  border-radius:0;
  color:#111;
  font-weight:700;
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  background:#eee;
}
body .p-info-wrapper .detail-parameters .confst-gold__card:hover{
  border-color:#b5b5b5;
}
body .p-info-wrapper .detail-parameters .confst-gold__card[aria-checked="true"]{
  outline:3px solid var(--confst-border-strong);
  outline-offset:0;
  border-color:transparent;
}
body .p-info-wrapper .detail-parameters .confst-gold__card:focus{
  outline:3px solid var(--confst-focus);
  outline-offset:2px;
}

/* Glossy diagonal gradients (use !important to beat theme button styles) */
body .p-info-wrapper .detail-parameters .confst-gold__card[data-gold="red"]{
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.90), rgba(255,255,255,0) 45%),
    linear-gradient(45deg, #ffd1d1 0%, #e07a73 35%, #b64a44 60%, #ffe2dc 100%) !important;
}
body .p-info-wrapper .detail-parameters .confst-gold__card[data-gold="white"]{
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.98), rgba(255,255,255,0) 50%),
    linear-gradient(45deg, #ffffff 0%, #e9effa 35%, #aebddb 60%, #ffffff 100%) !important;
}
body .p-info-wrapper .detail-parameters .confst-gold__card[data-gold="yellow"]{
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.92), rgba(255,255,255,0) 50%),
    linear-gradient(45deg, #ffe9b3 0%, #f0c85a 35%, #c58c13 60%, #fff1c8 100%) !important;
}

/* Fallback: if mapping didn't detect, still show something nice for 1st/2nd/3rd cards */
body .p-info-wrapper .detail-parameters .confst-gold__card[data-gold="unknown"]{
  background: linear-gradient(45deg, #f2f2f2 0%, #dcdcdc 50%, #f7f7f7 100%) !important;
}

@media (max-width: 480px){
  body .p-info-wrapper .detail-parameters .confst-gold__card{ font-size:22px; }
  body .p-info-wrapper .detail-parameters .confst-stone__label{ font-size:22px; }
  body .p-info-wrapper .detail-parameters td select.confst-size-select{ font-size:20px; }
}