/**
 * Public Styles
 */

/* Common */
.jdc-check-form,
.jdc-balance {
    max-width: 800px;
    margin: 40px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.jdc-form-container, .jdc-balance-container {
    background: linear-gradient(135deg, rgb(245 245 245), rgb(255 255 255 / 51%));
    border-radius: 12px;
    box-shadow: 5px 2px 20px 18px rgba(0, 0, 0, 0.03);
    padding: 30px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Balance Display */
.jdc-balance-details {
    margin: 30px 0;
}

.jdc-balance-info {
    margin-bottom: 20px;
}

.jdc-balance-info p {
    margin: 8px 0;
    font-size: 16px;
}

.jdc-balance-stats {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.jdc-data-box {
    flex: 1;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
    margin: 0 10px;
    min-width: 0; /* Prevent overflow issues with flex items */
}

.jdc-data-box:first-child {
    margin-left: 0;
}

.jdc-data-box:last-child {
    margin-right: 0;
}

.jdc-data-label {
    font-size: 14px;
    margin-bottom: 10px;
    color: #fff;
}

.jdc-data-value {
    font-size: 24px;
    font-weight: 700;
}

.jdc-total {
    background: #1a8de2;
    color: #eeeeee !important;
}

.jdc-used {
    background: #e24074;
    color: #eeeeee !important;
}

.jdc-remaining {
    background: #34b1b9;
    color: #eeeeee !important;
}

.jdc-progress-bar {
    height: 20px;
    background: #f1f1f1;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
}

.jdc-progress {
    height: 100%;
    background: linear-gradient(to right, #4caf50, #8bc34a);
}

.jdc-last-updated {
    text-align: left;
    color: #333;
    font-size: 15px;
}

.jdc-balance-actions {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
}

.jdc-back-button,
.jdc-check-another {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    color: #eeeeee !important;
}

.jdc-back-button {
    background: #f1f1f1;
    color: #333 !important;
    border: 1px solid #ddd;
}

.jdc-check-another {
    background: #373642;
    color: #fff !important;
    box-shadow: 1px 1px 8px 0px #233040;
}

.jdc-check-button {
    background: #373642;
    color: #fff !important;
    box-shadow: 1px 1px 8px 0px #233040;
}

.jdc-form-btn-check-row {
    padding-top: 25px;
}

.jdc-exceeded-box {
    background-color: #ffffff;
    color: #e24074;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    display: block; /* Changed from ruby-text to block for better compatibility */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .jdc-balance-stats {
        flex-direction: column; /* Stack boxes vertically on smaller screens */
    }

    .jdc-data-box {
        margin: 10px 0; /* Adjust margins for vertical stacking */
        flex: none; /* Remove flex: 1 to allow natural sizing */
        width: 100%; /* Full width on smaller screens */
    }

    .jdc-data-box:first-child {
        margin-top: 0;
    }

    .jdc-data-box:last-child {
        margin-bottom: 0;
    }

    .jdc-balance-actions {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center;
    }

    .jdc-back-button,
    .jdc-check-another {
        width: 100%; /* Full width for buttons */
        margin: 5px 0; /* Add spacing between stacked buttons */
    }
}

@media (max-width: 480px) {
    .jdc-data-value {
        font-size: 20px; /* Reduce font size for smaller screens */
    }

    .jdc-data-label {
        font-size: 12px; /* Adjust label size */
    }

    .jdc-balance-container {
        padding: 20px; /* Reduce padding on very small screens */
    }
}

.js-message {
  font-size: 0; /* Hide the original text */
  position: relative; /* Needed for absolute positioning of pseudo-elements */
}

.js-message::before {
  content: "Please wait ...";
  position: absolute; /* Changed from relative to absolute */
  background: #58845a !important;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap; /* Keeps text on one line */
  
  /* Width animation */
  animation: loading-width 2s infinite ease-in-out, 
             background-pulse 2s infinite ease-in-out;
}

/* Width animation */
@keyframes loading-width {
  0% { width: 30%; }
  50% { width: 100%; }
  100% { width: 30%; }
}

/* Background pulsing */
@keyframes background-pulse {
  0% { background-color: #509f25; }
  50% { background-color: #60bf2c; }
  100% { background-color: #509f25; }
}

/* Shimmer effect stays isolated to the pseudo-element */
.js-message::before {
  position: relative;
  overflow: hidden;
}

.js-message::before::after { /* Target the after of the before */
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
              transparent,
              rgba(255, 255, 255, 0.2),
              transparent);
  animation: message-shine 1.5s infinite;
}

@keyframes message-shine {
  100% { left: 100%; }
}

.js-message-error { 
    background: #c23642 !important; 
    color: #fff; 
    padding: 10px; 
    border-radius: 10px; 
    font-size: 13px; 
}