/* 1. THE GRID: Force .content to be a Row */
.content { 
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 25px !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  background: #121212 !important;
  padding: 30px 10px !important;
  border: none !important;
}

/* 2. THE CARD: Updated Height for Larger Text */
.paragraph--type--market-clock {
  background: #1e1e1e !important;
  border-radius: 15px !important;
  padding: 20px !important;
  width: 260px !important; /* Slightly wider for bigger fonts */
  height: 440px !important; /* Increased to fit larger labels */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 2px solid #333 !important;
  color: #fff !important;
  box-sizing: border-box !important;
  min-width: 260px !important;
  max-width: 260px !important;
  margin: 10px !important;
}

/* 3. ANALOG FACE & NUMBERS */
.clock-face {
  position: relative;
  width: 170px;
  height: 170px;
  border: 6px solid #444;
  border-radius: 50%;
  background: radial-gradient(circle, #222 0%, #000 100%);
  flex-shrink: 0;
}

.hour-mark {
  position: absolute;
  width: 100%; height: 100%;
  text-align: center; font-size: 13px; font-weight: bold; color: #666; padding: 5px;
}
.mark-1  { transform: rotate(30deg); }  .mark-1 span  { display:block; transform: rotate(-30deg); }
.mark-2  { transform: rotate(60deg); }  .mark-2 span  { display:block; transform: rotate(-60deg); }
.mark-3  { transform: rotate(90deg); }  .mark-3 span  { display:block; transform: rotate(-90deg); }
.mark-4  { transform: rotate(120deg); } .mark-4 span  { display:block; transform: rotate(-120deg); }
.mark-5  { transform: rotate(150deg); } .mark-5 span  { display:block; transform: rotate(-150deg); }
.mark-6  { transform: rotate(180deg); } .mark-6 span  { display:block; transform: rotate(-180deg); }
.mark-7  { transform: rotate(210deg); } .mark-7 span  { display:block; transform: rotate(-210deg); }
.mark-8  { transform: rotate(240deg); } .mark-8 span  { display:block; transform: rotate(-240deg); }
.mark-9  { transform: rotate(270deg); } .mark-9 span  { display:block; transform: rotate(-270deg); }
.mark-10 { transform: rotate(300deg); } .mark-10 span { display:block; transform: rotate(-300deg); }
.mark-11 { transform: rotate(330deg); } .mark-11 span { display:block; transform: rotate(-330deg); }
.mark-12 { transform: rotate(0deg); }   .mark-12 span { display:block; transform: rotate(0deg); }

.hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom; border-radius: 10px; }
.hand-hr { width: 5px; height: 45px; background: #fff; margin-left: -2.5px; }
.hand-min { width: 3px; height: 65px; background: #bbb; margin-left: -1.5px; }
.hand-sec { width: 2px; height: 75px; background: #ff4500; margin-left: -1px; }

/* 4. DIGITAL & COUNTDOWN (BIGGER FONTS) */
.digital-time {
  background: #000;
  font-family: monospace;
  font-size: 1.6rem; /* Increased from 1.4rem */
  padding: 8px 15px;
  border-radius: 5px;
  border: 1px solid #333;
  letter-spacing: 2px;
}

.countdown-timer {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem; /* Increased from 0.85rem */
  font-weight: bold;
  margin: 5px 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge { 
  font-weight: 900; 
  font-size: 1.1rem; /* Increased from 0.8rem */
  letter-spacing: 1.5px; 
  padding-bottom: 5px;
}

/* 5. DYNAMIC COLORS */
.is-open { border-color: #00ff88 !important; box-shadow: 0 0 15px rgba(0,255,136,0.3) !important; }
.is-open .digital-time, .is-open .status-text, .is-open .countdown-timer { color: #00ff88 !important; }

.is-closed { border-color: #ff3b3b !important; box-shadow: 0 0 15px rgba(255,59,59,0.3) !important; }
.is-closed .digital-time, .is-closed .status-text, .is-closed .countdown-timer { color: #ff3b3b !important; }

/* Hide text fields */
.field--name-field-timezone, .field--name-field-trading-hours { display: none !important; }
.field--name-field-market-name { font-weight: bold; font-size: 1.3rem; text-transform: uppercase; margin-bottom: 5px; }