/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
    HRDLOG.net — Donation Meter
    Zone geometry (left/width) is calculated server-side from
    GROW_THRESHOLD and BAR_MAX constants in HrdLog.master.cs
    and applied as inline styles — do not add left/width here.
*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#DivDonate {
    position:     fixed;
    left:         0;
    bottom:       0;
    width:        100%;
    height:       5px;
    background:   #27ae60;
    border-top:   2px solid #1e8449;
    overflow:     hidden;
    z-index:      9998;
    box-sizing:   border-box;
}

.dm-inner {
    background:   #1e2a38;
    padding:      8px 18px;
    font-family:  Arial, sans-serif;
    font-size:    12px;
    color:        #ecf0f1;
}

/* ── Header: title + status badge ── */

.dm-header {
    margin-bottom: 5px;
}

.dm-title {
    font-size:   13px;
    font-weight: bold;
    color:       #ffffff;
}

.dm-status-badge {
    display:       inline-block;
    padding:       1px 8px;
    border-radius: 3px;
    font-size:     11px;
    font-weight:   bold;
    color:         #ffffff;
}

.dm-badge-critical    { background: #c0392b; }
.dm-badge-operational { background: #e67e22; }
.dm-badge-growth      { background: #148a14; }

/* ── Explanatory text ── */

.dm-description {
    margin-bottom: 6px;
    color:         #95a5a6;
    font-size:     11px;
    line-height:   1.4;
}

/* ── Progress bar ── */

.dm-bar-wrap {
    position:      relative;
    margin-bottom: 12px;   /* extra space for the marker arrow below the bar */
}

.dm-bar {
    height:        20px;
    border-radius: 4px;
    overflow:      hidden;
    position:      relative;
}

.dm-zone {
    position:    absolute;
    top:         0;
    height:      20px;
    text-align:  center;
    line-height: 20px;
    font-size:   10px;
    white-space: nowrap;
    overflow:    hidden;
}

.dm-zone-critical {
    left:  0;               /* always starts at 0 */
    /* width: set inline (server-side) */
    color: #ffffff;
}

.dm-zone-operational {
    /* left, width: set inline (server-side) */
    color: #ffffff;
}

.dm-zone-growth {
    /* left, width: set inline (server-side) */
    color: #ffffff;
}

/* Marker: upward triangle (▲) overlapping the bar bottom.
   left % is set inline (server-side dynamic value).
   Triangle width = border-left + border-right = 9+9 = 18px → margin-left: -9px to center. */
.dm-marker {
    position:     absolute;
    top:          14px;       /* overlaps bar by 6px from bottom */
    width:        0;
    height:       0;
    border-left:  9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 10px solid #ffffff;
    margin-left:  -9px;
    filter:       drop-shadow(0 -1px 2px rgba(0,0,0,0.55));
}

/* ── PayPal column ── */

.dm-paypal-cell {
    width:          140px;
    text-align:     center;
    vertical-align: middle;
}