/**
 * Clock7 Clock Widgets - Widget Renderer (inside iframe)
 * RESPONSIVE VERSION - Numbers scale with clock size
 */
:root{
  --cw-bg:#ffffff;
  --cw-border:#e5e7eb;
  --cw-accent:#111827;
  --cw-accent2:#2563eb;
  --cw-text:#111827;
  --cw-muted:#6b7280;
  --cw-radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:transparent;
}
.cw{
  width:100%;
  height:100%;
  background:var(--cw-bg);
  color:var(--cw-text);
  border:1px solid var(--cw-border);
  border-radius:var(--cw-radius);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cw-inner{
  width:100%;
  height:100%;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Analog Clock */
.cw-analog{
  position:relative;
  width:100%;
  height:100%;
  max-width:min(100%, 100vh);
  max-height:min(100%, 100vw);
  aspect-ratio: 1 / 1;
}

/* Clock dial */
.dial{
  position:absolute;
  inset:0;
  border-radius:999px;
  border:min(10px, 3%) solid var(--cw-border);
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(circle at 30% 20%, rgba(0,0,0,.06), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.03), transparent);
  box-shadow: 
    inset 0 2px 4px rgba(0,0,0,.08),
    0 4px 12px rgba(0,0,0,.15);
}
.dial::after{
  content:"";
  position:absolute;
  inset:6%;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.05);
}



/* Clock numbers - RESPONSIVE with percentages */
.clock-number {
  position: absolute;
  left: 50%;
  top: 50%;
  font-weight: 700;
  font-size: clamp(12px, 5.5%, 28px);
  color: var(--cw-accent);
  transform-origin: 50% 50%;
  user-select: none;
  opacity: 0.85;
  text-shadow: 0 1px 2px rgba(0,0,0,.1);
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Position using PERCENTAGES - scales with clock */
.clock-number[data-number="12"] { transform: translate(-50%, -50%) translate(0, -36%); }
.clock-number[data-number="1"] { transform: translate(-50%, -50%) translate(18%, -31%); }
.clock-number[data-number="2"] { transform: translate(-50%, -50%) translate(31%, -18%); }
.clock-number[data-number="3"] { transform: translate(-50%, -50%) translate(36%, 0); }
.clock-number[data-number="4"] { transform: translate(-50%, -50%) translate(31%, 18%); }
.clock-number[data-number="5"] { transform: translate(-50%, -50%) translate(18%, 31%); }
.clock-number[data-number="6"] { transform: translate(-50%, -50%) translate(0, 36%); }
.clock-number[data-number="7"] { transform: translate(-50%, -50%) translate(-18%, 31%); }
.clock-number[data-number="8"] { transform: translate(-50%, -50%) translate(-31%, 18%); }
.clock-number[data-number="9"] { transform: translate(-50%, -50%) translate(-36%, 0); }
.clock-number[data-number="10"] { transform: translate(-50%, -50%) translate(-31%, -18%); }
.clock-number[data-number="11"] { transform: translate(-50%, -50%) translate(-18%, -31%); }

/* Center dot */
.center{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(10px, 3.5%, 18px);
  height:clamp(10px, 3.5%, 18px);
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:var(--cw-accent2);
  box-shadow:0 0 0 clamp(3px, 1.5%, 7px) rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.2);
  z-index: 10;
}

/* Clock hands */
.hand{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin: 50% 100%;
  transform:translate(-50%,-100%) rotate(0deg);
  border-radius:999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.hand.hour{
  width:clamp(6px, 2.5%, 12px);
  height:30%;
  background:var(--cw-accent);
  opacity:.92;
  z-index: 3;
}
.hand.min{
  width:clamp(4px, 1.8%, 9px);
  height:40%;
  background:var(--cw-accent);
  opacity:.82;
  z-index: 4;
}
.hand.sec{
  width:clamp(1.5px, 0.6%, 3px);
  height:46%;
  background:var(--cw-accent2);
  z-index: 5;
}

/* Digital Clock */
.cw-digital{
  width:100%;
  max-width:520px;
  position:relative;
}
.digital-card{
  width:100%;
  padding:clamp(12px, 4%, 20px) clamp(14px, 5%, 24px);
  border-radius:16px;
  border:1px solid rgba(0,0,0,.05);
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(700px 220px at 80% 0%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.03));
}
.time{
  font-weight:800;
  letter-spacing:-.02em;
  font-size: clamp(24px, 7vw, 56px);
  line-height:1.1;
}
.time .sec{
  font-weight:700;
  font-size: .55em;
  color:var(--cw-accent2);
}
.meta{
  margin-top:clamp(6px, 2%, 12px);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--cw-muted);
  font-size:clamp(11px, 3vw, 14px);
}
.badge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.12);
  color:var(--cw-muted);
}

/* Label */
.cw-label{
  position:absolute;
  top:clamp(8px, 3%, 14px);
  right:clamp(8px, 3%, 14px);
  font-size:clamp(10px, 3.5%, 13px);
  color:var(--cw-muted);
  z-index:5;
  text-align:right;
}

/* Dark themes */
.cw[data-dark="1"] .tick{background:rgba(255,255,255,.35)}
.cw[data-dark="1"] .clock-number{
  color:var(--cw-text); 
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.cw[data-dark="1"] .dial{
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  box-shadow: 
    inset 0 2px 4px rgba(255,255,255,.08),
    0 4px 12px rgba(0,0,0,.3);
}
.cw[data-dark="1"] .digital-card{border-color: rgba(255,255,255,.10)}
.cw[data-dark="1"] .badge{border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.06)}