/* === Card 15 – Tide Dial (cleaned / theme-proof) === */

.mw-card.card-54{
  width: 450px;
  max-width: 100%;
  margin: 0 auto;

  /* Theme-safe: let card grow (prevents dial/background spill in TT5 etc.) */
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;

  background: #0a1a2f;
  color: #fff;

  padding: 1.2rem;
  padding-bottom: 44px !important; /* room for docked actions row */

  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

/* Keep theme margins from injecting weird gaps inside the card */
.mw-card.card-54 :is(h1,h2,h3,h4,h5,h6,p,ul,ol,li){
  margin: 0 !important;
}

.mw-card.card-54 .mw51-header{
  text-align: center;
  margin-bottom: 1rem;
}

/* =========================================================
   HARD typography sizing (theme-proof)
   (This is what made all themes match.)
   ========================================================= */

.mw-card.card-54{
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.mw-card.card-54 .mw51-location{
  font-size: 20px !important;
  font-weight: 700 !important;
}

.mw-card.card-54 .mw51-weather .mw51-temp{
  font-size: 64px !important;
  font-weight: 800 !important;
}

.mw-card.card-54 .mw51-hi-lo,
.mw-card.card-54 .mw51-pressure{
  font-size: 14px !important;
  color: #ccc;
}

/* Info column text */
.mw-card.card-54 .mw51-left,
.mw-card.card-54 .mw51-right,
.mw-card.card-54 .mw51-weather-details div,
.mw-card.card-54 .mw51-tide-stats div,
.mw-card.card-54 .mw51-marine div{
  font-size: 18px !important;  /* this matches your current final working state */
  line-height: 1.35 !important;
}

/* Keep number + unit together (stops "m" dropping to next line) */
.mw-card.card-54 .mw51-left div,
.mw-card.card-54 .mw51-right div{
  white-space: nowrap;
}

/* Re-assert Weather Icons font (card font is locked) */
.mw-card.card-54 i.wi,
.mw-card.card-54 i.wi::before{
  font-family: 'weathericons','WeatherIcons' !important;
  font-style: normal;
  font-weight: normal;
}

/* =========================================================
   Top-left icon
   ========================================================= */

.mw51-icon-topleft{
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  z-index: 9;
}

.mw-card.card-54 .mw51-icon-topleft i.wi{
  font-size: 96px !important;
}

/* =========================================================
   Layout blocks
   ========================================================= */

.mw51-data-columns{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 20px;
}

.mw51-left,
.mw51-right{
  flex: 1 1 50%;
  font-weight: 400;
}

.mw51-left{
  padding-right: 10px;
}

.mw51-right{
  padding-left: 10px;
  text-align: right;
}

.mw51-sun-block{
  text-align: right;
}

.mw51-sunrise,
.mw51-sunset{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.mw51-sunrise i,
.mw51-sunset i{
  font-size: 20px;
}

.mw51-weather-details div,
.mw51-sunrise,
.mw51-sunset{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

/* =========================================================
   DIAL
   ========================================================= */

.mw-card.card-54 .mw51-dial-wrapper{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  margin-top: -1.5rem; /* Pulls it up into the card */
  margin-bottom: 0;
}

.mw-card.card-54 img.mw51-dial{
  width: 310px;
  height: auto;
  max-width: 100%;
  display: inline-block;
  object-fit: contain;
}

/* The dial graphic */
.mw-card.card-54 .mw51-dial{
  width: 540px;
  height: auto;
  display: block;
  margin: 1rem auto;
}

/* Moon in the center */
.mw-card.card-54 .mw51-dial-moon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 160px;
  z-index: 11;
  overflow: hidden;
  pointer-events: none;
}

.mw-card.card-54 .mw51-moon-img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: auto;
  display: block;
}

/* Needle */
.mw51-dial-hand{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 85px;
  background: red;
  transform-origin: bottom center;
  transform: rotate(0deg);
  transition: transform 0.6s ease-in-out;
  z-index: 10;
  pointer-events: none;
}

/* Time overlay */
.mw51-dial-time-container{
  position: absolute;
  bottom: 65px;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

.mw-local-time{
  text-align: center;
  line-height: 1.2em;
}

.mw-local-time .mw-live-time{
  display: inline-block;
}

.mw-date-wrap{
  text-align: center;
}

/* =========================================================
   Bottom 3 buttons INSIDE the card (docked)
   ========================================================= */

.mw-card.card-54 .mwpl-actions-row{
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;

  margin: 0 !important;
  width: auto !important;

  z-index: 9999;
  pointer-events: none; /* row itself won't block dial */
}

.mw-card.card-54 .mwpl-actions-row > *{
  pointer-events: auto;
}

/* Shrink the two left buttons so they never overlap */
.mw-card.card-54 .mwpl-actions-row .mwpl-userloc-inline{
  gap: 4px !important;
  transform: scale(0.90);
  transform-origin: left bottom;
}

.mw-card.card-54 .mwpl-actions-row .mwpl-userloc-inline :is(button,a,input,[role="button"]){
  font-size: 10px !important;
  line-height: 1 !important;
  padding: 3px 6px !important;
  border-radius: 9px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.mw-card.card-54 .mwpl-actions-row .mwpl-userloc-inline :is(svg,i,.dashicons,img){
  width: 11px !important;
  height: 11px !important;
  font-size: 11px !important;
}

/* Card 15 – restore longer tide hand */
.mw-card.card-54 .mw51-dial-hand,
.mw-card.card-54 .mw51-dial-wrapper .mw51-dial-hand,
.mw-card.card-54 .mw51-dial-wrapper .mw51-dial-hand.mw51-dial-hand,
.mw-card.card-54 .mw51-dial-wrapper .mw51-dial-hand.mw51-dial-hand{
  height: 40% !important;   /* matches your original */
  width: 4px !important;
}
/* === Card 54 SKIN (restore original colors) === */
.mw-card.card-54{
  background: #11251a !important;
  color: #fff !important;
}
.mw-card.card-54 .mw51-hi-lo,
.mw-card.card-54 .mw51-pressure{
  color: #ccc !important;
}
.mw-card.card-54 .mw51-icon-topleft{
  color: #fff !important;
}