/* ANCHOR: clock_widget_styles */
/* REUSED: Clock widget specific styles extracted from Figma specifications */
/* SCALED FOR: Professional analog clock with Moscow timezone */

/* ANCHOR: clock_widget */
.clock-widget {
  width: 160px;
  height: 160px;
}

.clock-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* UPDATED COMMENTS: Shadow moved to .clock-face for consistency with other widgets */
}

/* ANCHOR: clock_face */
.clock-face {
  position: relative;
  width: 140px;
  height: 140px;
  background: #0B0B0B; /* CRITICAL: Dark background as specified */
  border: 1px solid rgba(255, 255, 255, 0.15); /* REUSED: Thin white outline for contrast on dark desktop background */
  border-radius: 14px; /* CRITICAL: 14px border radius as specified */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px; /* CRITICAL: 8px padding as specified */
  /* CRITICAL: Apply shadows to clock face like other widgets */
  box-shadow: var(--widget-shadow-default);
  /* CRITICAL: Shadow transitions moved to shared styles/components.css */
  /* CRITICAL: Optimize for transform performance */
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ANCHOR: clock_background */
.clock-background {
  position: absolute;
  width: 124px;
  height: 124px;
  background: #FFFFFF;
  opacity: 0.07; /* CRITICAL: White overlay with 7% opacity */
  border-radius: 50%; /* UPDATED COMMENTS: Perfect circle without borders */
  top: 8px;
  left: 8px;
  border: none; /* CRITICAL: No borders as specified */
}

/* ANCHOR: hour_markers */
.hour-markers {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hour-marker {
  position: absolute;
  width: 1px; /* CRITICAL: All markers have uniform 1px width */
  height: 8px; /* CRITICAL: All markers have uniform 8px height */
  background: #FFFFFF;
  left: calc(50% - 0.5px);
  top: 8px; /* UPDATED COMMENTS: 8px from edge matching padding */
  transform-origin: 0.5px 62px; /* CRITICAL: Transform origin at clock center */
}

/* CRITICAL: Main hour markers (12, 3, 6, 9) - full white, same size as others */
.hour-marker--main {
  opacity: 0.7; /* UPDATED COMMENTS: Full opacity white for main hours only */
  background: #FFFFFF;
}

/* CRITICAL: Regular hour markers (1,2,4,5,7,8,10,11) - same as minute markers */
.hour-marker--regular {
  opacity: 0.2; /* UPDATED COMMENTS: 20% opacity white, same as minute markers */
  background: #FFFFFF;
}

/* CRITICAL: Minute markers - same styling as regular hour markers */
.minute-marker {
  opacity: 0.2; /* UPDATED COMMENTS: 20% opacity white, same as regular hours */
  background: #FFFFFF;
}

/* ANCHOR: clock_numbers */
.clock-numbers {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* CRITICAL: Isolate text layer from parent transforms */
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.clock-number {
  position: absolute;
  width: 20px;
  height: 20px;
  font-family: var(--font-family-primary);
  font-style: normal;
  font-weight: 300; /* UPDATED: Thinner font weight */
  font-size: 10px;
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FFFFFF;
  /* CRITICAL: Fix font smoothing during transforms */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* CRITICAL: Hardware acceleration for stable text rendering */
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* CRITICAL: Integer pixel positioning to prevent subpixel jitter */
.clock-number--12 {
  left: 60px;  /* was calc(50% - 10px) = 60px */
  top: 18px;   /* was 12px, moved down +6px more */
}

.clock-number--1 {
  left: 82px;  /* was calc(50% - 10px + 22px) = 82px */
  top: 23px;   /* was 17px, moved down +6px more */
}

.clock-number--2 {
  left: 99px;  /* was 100px, moved left -1px */
  top: 39px;   /* was 33px, moved down +6px more */
}

.clock-number--3 {
  left: 104px; /* was calc(50% - 10px + 44px) = 104px */
  top: 61px;   /* was 55px, moved down +6px more */
}

.clock-number--4 {
  left: 99px;  /* was 100px, moved left -1px */
  top: 83px;   /* was 77px, moved down +6px more */
}

.clock-number--5 {
  left: 84px;  /* was calc(50% - 10px + 24px) = 84px */
  top: 99px;   /* was 100px, moved up -1px */
}

.clock-number--6 {
  left: 60px;  /* was calc(50% - 10px) = 60px */
  top: 104px;  /* was 98px, moved down +6px more */
}

.clock-number--7 {
  left: 38px;  /* was calc(50% - 10px - 22px) = 38px */
  top: 99px;   /* was 100px, moved up -1px */
}

.clock-number--8 {
  left: 21px;  /* was 20px, moved right +1px */
  top: 83px;   /* was 77px, moved down +6px more */
}

.clock-number--9 {
  left: 16px;  /* was calc(50% - 10px - 44px) = 16px */
  top: 61px;   /* was 55px, moved down +6px more */
}

.clock-number--10 {
  left: 21px;  /* was 20px, moved right +1px */
  top: 39px;   /* was 33px, moved down +6px more */
}

.clock-number--11 {
  left: 38px;  /* was calc(50% - 10px - 22px) = 38px */
  top: 23px;   /* was 17px, moved down +6px more */
}

/* ANCHOR: clock_hands */
.clock-hands {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* CRITICAL: Hour hand container - hardware accelerated, no transitions */
.hour-hand {
  position: absolute;
  width: 3px;
  height: 24px;
  left: calc(50% - 1.5px);
  top: calc(50% - 24px); /* CRITICAL: Start 3px from center, extend 24px upward */
  transform-origin: 1.5px calc(24px); /* CRITICAL: Origin at clock center (3px below SVG start) */
  /* UPDATED COMMENTS: No transitions - instant movement for accurate time display */
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.hour-hand img {
  width: 100%;
  height: 100%;
  display: block;
}

/* CRITICAL: Minute hand container - hardware accelerated, no transitions */
.minute-hand {
  position: absolute;
  width: 3px;
  height: 55px;
  left: calc(50% - 1.5px);
  top: calc(50% - 55px); /* CRITICAL: Start 3px from center, extend 55px upward */
  transform-origin: 1.5px calc(55px); /* CRITICAL: Origin at clock center (3px below SVG start) */
  /* UPDATED COMMENTS: No transitions - instant movement for accurate time display */
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.minute-hand img {
  width: 100%;
  height: 100%;
  display: block;
}

/* CRITICAL: Second hand - hardware accelerated, no transitions */
.second-hand {
  position: absolute;
  width: 1px;
  height: 31px;
  background: #FF8D28; /* UPDATED COMMENTS: Orange color as per Figma */
  left: calc(50% - 0.5px);
  top: calc(50% - 3px - 31px); /* CRITICAL: Start 3px from center, extend 31px upward */
  transform-origin: 0.5px calc(31px + 3px); /* CRITICAL: Origin at clock center (3px below hand start) */
  /* UPDATED COMMENTS: No transitions - instant movement for smooth second ticking */
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ANCHOR: center_dot */
.center-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #FFFFFF;
  border-radius: 50%;
  left: calc(50% - 2.5px);
  top: calc(50% - 2.5px);
  z-index: 10; /* CRITICAL: Above all hands */
}

/* ANCHOR: timezone_label */
.timezone-label {
  position: absolute;
  width: 27px;
  height: 14px;
  left: 55px;  /* was 47px, moved right +8px */
  top: 81px;   /* was 75px, moved down +6px more */
  font-family: var(--font-family-primary);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  color: #FFFFFF;
  opacity: 0.5; /* CRITICAL: 50% opacity as per Figma */
  /* CRITICAL: Fix font smoothing during transforms */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* CRITICAL: Hardware acceleration for stable text rendering */
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ANCHOR: clock_interaction_shadows */
/* CRITICAL: Shadow states moved to shared styles/components.css for reusability */