/* changed color theme-color-earth background-color: #e7afa3 v #a3dbe7 

VIR: https://mimo.org/glossary/css/comment 
     https://www.color-hex.com/color/e7afa3
*/

/*.bg-main-color {
    background-color: #7bb6f7 !important;
}*/
button:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    font-weight: bold;
}

button:hover {
    color: black !important;
}

/* For native <button> elements */
button:disabled {
    color: #6c757d;  /*Bootstrap's secondary color */
    cursor: not-allowed;
}

/* For elements with 'disabled' class */
.btn.disabled,
.btn:disabled {
    color: #6c757d;
    pointer-events: none; /* Prevents click events */
    opacity: 0.65;  /*Optional: slight transparency */
}

/* For custom disabled states (like <a> tags) */
[aria-disabled="true"] {
    color: #6c757d !important;
    text-decoration: none;
}


/* Slika: */
.container button {
    background-image: url('../images/whitenoise-361x370.png');
}

/* Colors - 1: */
.product-grid__item:hover body.theme-color-earth .product-grid__item__name, .product-grid__item:hover body.theme-color-earth .product-grid__item__price, body.theme-color-earth .bg-main-color, body.theme-color-earth .button--border--solid, body.theme-color-earth .mobile-nav, body.theme-color-earth .product-grid__item:hover .product-grid__item__name, body.theme-color-earth .product-grid__item:hover .product-grid__item__price, body.theme-color-earth .section--themed {
    background-color: #a3dbe7;
    color: #000;
}

.hamburger.lines:hover.active body.theme-color-earth span:after, .hamburger.lines:hover.active body.theme-color-earth span:before, .hamburger body.theme-color-earth span, .hamburger body.theme-color-earth span:after, .hamburger body.theme-color-earth span:before, body.theme-color-earth .bg-secondary-color, body.theme-color-earth .hamburger.lines:hover.active span:after, body.theme-color-earth .hamburger.lines:hover.active span:before, body.theme-color-earth .hamburger span, body.theme-color-earth .hamburger span:after, body.theme-color-earth .hamburger span:before, body.theme-color-earth .nav-link--home__text:after {
    background-color: #000;
    color: #a3dbe7;
}

/* Colors - 2: Custom pastel blue header: 50px; -> 30px; */
header.header {
    background-color: #b3d8fd !important;
    padding-bottom: 30px;
}

/* Colors - 3: Custom pastel blue footer (darker) */
footer.section--themed {
    background-color: #7bb6f7 !important;
}

/* Make Sure #dateDisplay Is Not Forcing Line Breaks */
#dateDisplay {
    white-space: nowrap;
}

/* Style for server-side validation messages */
.validation-message-error {
    color: red;
    font-weight: bold; /* Optional: Make it bold */
    font-size: 0.9em; /* Optional: Adjust font size */
    margin-top: 5px; /* Optional: Add some spacing */
    display: block; /* Ensures it takes its own line if needed */
}

/* Style for client-side validation messages (usually added by jQuery Validation) */
.field-validation-error {
    color: red;
    font-weight: normal;
    font-size: 0.8em;
    margin-top: 1px;
    margin-bottom: 10px;
    display: block;
}

/* DEBUG: Usage: <div class="container"> <div class="row debug-row"> <div class="col-md-4 debug-col">col-md-4</div> */
.debug-row {
    border: 2px dashed red;
    margin-bottom: 1rem;
}

.debug-col {
    border: 1px solid blue;
    background-color: rgba(0, 0, 255, 0.05);
    /*text-align: center;*/
    padding: 10px;
}

/* DEBUG: */
/*button:disabled {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}*/

/* How to override class in .css from another file

Method 1: Load Order: The simplest way is to ensure your overriding CSS file loads after the original file in your HTML:

Method 2: More Specific Selectors Make your selectors more specific to increase their priority:
// In overrides.css
body .my-class { // More specific than just .my-class
  color: red;
}

Method 3: !important (Use Sparingly) Add !important to force override (not recommended for most cases):

Method 4: Inline Styles For specific elements, you can use inline styles (highest priority):
<div class="my-class" style="color: red;">Content</div>

Best Practices
 - Avoid excessive use of !important as it makes maintenance difficult
 - Use meaningful class names to prevent conflicts
 - Consider CSS methodologies like BEM to namespace your classes
 - If using preprocessors (SASS/LESS), leverage nesting for specificity

Remember that CSS follows the "cascade" - styles defined later or with higher specificity will override earlier/less specific ones.
*/