@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Roboto:wght@400;500&display=swap');

:root {
  --color-black: #222222;
  --color-red: #dd2c00;
  --color-gold: #ffab00;
  --color-light-gray: #f4f4f4;
  --color-dark-gray: #555555;
  --color-white: #ffffff;
}

.de-time-wrapper {
  width: 100%;
  max-width: auto;
  margin: 0 auto;
}

.de-time-container {
  font-family: 'Roboto', sans-serif;
  background: var(--color-light-gray);
  color: var(--color-black);
  padding: 40px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  transition: padding 0.3s ease;
}

/* Main Display: Two-Column Layout */
.de-time-main-display {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 40px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.de-time-digital-display {
  text-align: left;
}

/* UPDATED: Styles for the single-line digital clock */
.de-time-digital-clock {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  display: flex;
  align-items: baseline; /* Aligns AM/PM nicely */
  margin-bottom: 20px;
}

.de-time-separator {
  margin: 0 5px;
  animation: de-time-blink 1.5s infinite;
}
@keyframes de-time-blink { 50% { opacity: 0.2; } }

.de-time-period {
  font-size: 0.4em;
  font-weight: 700;
  margin-left: 10px;
}
/* END UPDATED STYLES */

.de-time-date-display {
  margin-bottom: 8px;
}
.de-time-day-name { font-size: 1.5rem; font-weight: 500; }
.de-time-date { font-size: 1.1rem; color: var(--color-dark-gray); }
.de-time-timezone-info { font-size: 0.9rem; color: var(--color-dark-gray); }

/* Analog Clock */
.de-time-analog-display {
  display: flex; justify-content: center; align-items: center;
}
.de-time-analog-clock { width: 220px; height: 220px; transition: width 0.3s ease, height 0.3s ease; }
.de-time-clock-face {
  width: 100%; height: 100%; border-radius: 50%;
  background-color: var(--color-white);
  border: 4px solid var(--color-black);
  position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* UPDATED: Styles for Analog Numbers */
.de-time-hour-numbers { font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 500; }
.de-time-hour-number { position: absolute; width: 30px; height: 30px; line-height: 30px; text-align: center; top: 50%; left: 50%; margin: -15px; }
.de-time-hour-number.n3, .de-time-hour-number.n6, .de-time-hour-number.n9, .de-time-hour-number.n12 {
  color: var(--color-gold); font-weight: 700; font-size: 1.1rem;
}
.de-time-hour-number.n1 { transform: rotate(30deg) translate(0, -90px) rotate(-30deg); }
.de-time-hour-number.n2 { transform: rotate(60deg) translate(0, -90px) rotate(-60deg); }
.de-time-hour-number.n3 { transform: rotate(90deg) translate(0, -90px) rotate(-90deg); }
.de-time-hour-number.n4 { transform: rotate(120deg) translate(0, -90px) rotate(-120deg); }
.de-time-hour-number.n5 { transform: rotate(150deg) translate(0, -90px) rotate(-150deg); }
.de-time-hour-number.n6 { transform: rotate(180deg) translate(0, -90px) rotate(-180deg); }
.de-time-hour-number.n7 { transform: rotate(210deg) translate(0, -90px) rotate(-210deg); }
.de-time-hour-number.n8 { transform: rotate(240deg) translate(0, -90px) rotate(-240deg); }
.de-time-hour-number.n9 { transform: rotate(270deg) translate(0, -90px) rotate(-270deg); }
.de-time-hour-number.n10 { transform: rotate(300deg) translate(0, -90px) rotate(-300deg); }
.de-time-hour-number.n11 { transform: rotate(330deg) translate(0, -90px) rotate(-330deg); }
.de-time-hour-number.n12 { transform: rotate(0deg) translate(0, -90px) rotate(0deg); }
/* END UPDATED STYLES */

/* Clock Hands */
.de-time-hour-hand, .de-time-minute-hand, .de-time-second-hand { position: absolute; border-radius: 5px; transform-origin: bottom center; left: 50%; bottom: 50%; }
.de-time-hour-hand { width: 6px; height: 50px; margin-left: -3px; background: var(--color-gold); z-index: 3; }
.de-time-minute-hand { width: 4px; height: 75px; margin-left: -2px; background: var(--color-black); z-index: 2; }
.de-time-second-hand { width: 2px; height: 85px; margin-left: -1px; background: var(--color-red); z-index: 4; }
.de-time-center-dot { position: absolute; width: 12px; height: 12px; background: var(--color-black); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; }

/* Controls */
.de-time-controls { display: flex; justify-content: center; margin-bottom: 50px; }
.de-time-toggle-group { display: flex; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; }
.de-time-btn {
  background: var(--color-white); border: none; color: var(--color-dark-gray); padding: 10px 20px; cursor: pointer;
  transition: all 0.2s ease; font-weight: 500; font-size: 0.9rem; border-left: 1px solid #ccc;
}
.de-time-toggle-group .de-time-btn:first-child { border-left: none; }
.de-time-btn:hover { background-color: #eee; }
.de-time-btn.de-time-active { background-color: var(--color-red); color: var(--color-white); font-weight: 500; }

/* Section Title */
.de-time-section-title { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 25px; color: var(--color-gold); }

/* Grid & Cards */
.de-time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.de-time-card { background: var(--color-white); border-radius: 8px; border: 1px solid #e0e0e0; transition: all 0.3s ease; }
.de-time-card:hover { border-color: var(--color-gold); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); }

.de-time-card-content, .de-time-sun-content { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-left: 5px solid var(--color-red); border-radius: 8px 0 0 8px; }
.de-time-sun-content { border-left-color: var(--color-gold); }

.de-time-city-name { font-size: 1.1rem; font-weight: 500; }
.de-time-city-time { font-family: 'Roboto', monospace; font-size: 1.2rem; font-weight: 500; color: var(--color-dark-gray); }

.de-time-sun-icon { font-size: 2rem; }
.de-time-sun-details { text-align: right; }
.de-time-sun-label { font-size: 0.9rem; color: var(--color-dark-gray); }
.de-time-sun-time { font-size: 1.1rem; font-weight: 500; }

.de-time-cities-section, .de-time-sun-section { margin-bottom: 40px; }

/* Format States */
.de-time-format-24 .de-time-period { display: none; }


/* --- RESPONSIVE STYLES --- */
@media (max-width: 992px) {
    .de-time-main-display { flex-direction: column; text-align: center; }
    .de-time-digital-display { text-align: center; order: 1; }
    .de-time-analog-display { order: 2; }
}

@media (max-width: 768px) {
  .de-time-container { padding: 20px; }
  .de-time-digital-clock { font-size: 3.5rem; }
  .de-time-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .de-time-container { padding: 15px; }
  .de-time-digital-clock { font-size: 2.5rem; }
  .de-time-day-name { font-size: 1.2rem; }
  .de-time-analog-clock { width: 180px; height: 180px; }
  .de-time-hour-number.n1 { transform: rotate(30deg) translate(0, -75px) rotate(-30deg); }
  .de-time-hour-number.n2 { transform: rotate(60deg) translate(0, -75px) rotate(-60deg); }
  .de-time-hour-number.n3 { transform: rotate(90deg) translate(0, -75px) rotate(-90deg); }
  .de-time-hour-number.n4 { transform: rotate(120deg) translate(0, -75px) rotate(-120deg); }
  .de-time-hour-number.n5 { transform: rotate(150deg) translate(0, -75px) rotate(-150deg); }
  .de-time-hour-number.n6 { transform: rotate(180deg) translate(0, -75px) rotate(-180deg); }
  .de-time-hour-number.n7 { transform: rotate(210deg) translate(0, -75px) rotate(-210deg); }
  .de-time-hour-number.n8 { transform: rotate(240deg) translate(0, -75px) rotate(-240deg); }
  .de-time-hour-number.n9 { transform: rotate(270deg) translate(0, -75px) rotate(-270deg); }
  .de-time-hour-number.n10 { transform: rotate(300deg) translate(0, -75px) rotate(-300deg); }
  .de-time-hour-number.n11 { transform: rotate(330deg) translate(0, -75px) rotate(-330deg); }
  .de-time-hour-number.n12 { transform: rotate(0deg) translate(0, -75px) rotate(0deg); }
  .de-time-hour-hand { height: 40px; }
  .de-time-minute-hand { height: 60px; }
  .de-time-second-hand { height: 70px; }
}

/* Hide unused sections */
.de-time-theme-section, .de-time-converter-section { display: none; }