/* ======================================= */
/* === STYLES FOR BTC DONATION SECTION === */
/* ======================================= */

.donation-container {
    display: flex;
    justify-content: center;
    margin-top: -15px;
    margin-bottom: 0px;
}

.donation-content {
    display: flex;
    align-items: center; 
    flex-wrap: nowrap;
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 6px 15px; /* Reduce Border */
    font-family: 'Roboto', sans-serif;
}

.btc-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    /* FIX #1: Reduce the space between the logo and the text */
    margin-right: 8px; 
}

.donation-text-wrapper {
    color: #FFFFFF;
    font-size: 14px;
    /* FIX #2: Add a tiny nudge upwards to the text for perfect visual alignment */
    /* This moves the text up slightly to match the visual center of the logo */
    position: relative;
    top: 1px;
    margin: 0 15px 0 0; /* Remove left margin, control spacing only from logo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#btc-address {
    font-family: 'Courier New', Courier, monospace;
    color: #cccccc;
}

#copy-button {
    background-color: #FFFFFF;
    color: #000000 !important; 
    border: none;
    padding: 1px 12px; /* Reduce Button */
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

#copy-button:hover {
    background-color: #dddddd;
}

.copy-feedback {
    display: none;
}

.u-section-2 .u-custom-html-1 {
  margin-top: -20px !important;
}

/* ==================================================================== */
/* === MOBILE RESPONSIVE FIX FOR DONATION BAR (767px and below) === */
/* ==================================================================== */

@media (max-width: 767px) {

  .u-section-1 .u-text-1 {
    text-align: center;
  }

  /* Allow the main donation bar to shrink and fit the screen */
  .donation-content {
    flex-wrap: wrap;
	justify-content: center;
    padding: 10px 15px;      
    min-width: 0;           /* Reset the desktop minimum width */
    width: 90%;             /* Make the bar take up 90% of the screen width */
  }

  /* Adjust the logo for the new stacked layout */
  .btc-logo {
    margin-right: 8;        /* Remove the horizontal space */
    margin-bottom: 0px;    /* Add some space below the logo */
  }

  /* Allow the text and address to wrap properly */
  .donation-text-wrapper {
    text-align: center;     /* Center the text on mobile */
    white-space: normal;    /* Allow the text to wrap onto multiple lines */
    word-break: break-all;  /* Force the long BTC address to break without overflowing */
    margin: 0 0 12px 0;   /* Slightly reduce space below the text */
  }

  /* Make the button bigger and easier to tap */
  #copy-button {
    margin-left: 0;         /* Remove the horizontal space from the desktop layout */
    width: 60%;            /* Make the button full-width */
    /* FIX: Reduce top/bottom padding to make the button shorter */
    padding-top: 5px;      
    padding-bottom: 5px;
  }
}