div.sitenear-show-thumb {
    position: absolute;
    top: 0;
    left: 15px;
    border: 1px solid black;
    display: none !important;
}

div.sitenear-show-thumb img {
    padding: 0;
}

div.sitenear-image-upload-area {
    position: relative;
}

.inner-upload {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    display: table-cell;
    max-width: 100%;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 150px;
}

.custom-fileupload .inner-upload img {
    height: auto;
    width: auto;
    max-height: 128px;
    max-width: 250px;
}

div.sitenear-image-upload-area.custom-fileupload .inner-upload img {
    padding: 0.5rem;
    width: 100% !important;
    height: auto !important;
}

form.addnew .custom-fileupload .inner-upload input {
    top: 0;
    width: 100%;
}

/* when deleting images, the trash can icon should be in the corner of the image, this is done by having the image in a parent to position the trashcan*/
div.sitenear-thumb-and-trash-holder {
    position: relative;
    width: fit-content;
    height: fit-content;
    display: inline-block;
}

div.sitenear-thumb-and-trash-holder a .glyphicon.glyphicon-trash.delete {
    right: 0;
    top: 0;
}

/* cropping dialog shows up on many pages, so styles are here*/

div.sitenear-cropping-dialog div.sitenear-cropping-upper-buttons {
    text-align: center;
    margin-bottom: 0.5em;
}

div.sitenear-cropping-dialog div.sitenear-cropping-upper-buttons button
{
    font-size: 1.25em;
    font-family: "Montserrat-SemiBold", serif;
    margin: 0;
}

.tingle-modal.sitenear-cropper-modal.tingle-modal--visible {
    z-index: 2000;
}

.tingle-modal.sitenear-cropper-modal.tingle-modal--visible .tingle-modal-box__content {
    padding: 2rem 2rem;

}

div.sitenear-cropping-dialog .sitenear-cropping-image-from {
    max-width: 70vw;
    max-height: 70vh;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

div.sitenear-cropping-dialog .sitenear-zoom-control-area  {
    margin-top: 0.5rem;

}

div.sitenear-cropping-dialog .sitenear-zoom-control-area > div {
    padding-left: 3rem ;
    padding-right: 3rem;
}

div.sitenear-cropping-dialog .sitenear-zoom-control-area span.sitenear-zoom-label {
    display: block;
    color: black;
    margin-left: -1.5rem;
}

button.sitenear-big-outlined-button {
    border: 2px solid #14440b;

    margin-left: auto;
    margin-right: auto;
    font-family: "Montserrat-SemiBold", serif;
    border-radius: 4px;
    font-size: 20px;
    text-transform: uppercase;
    background: #fff none repeat scroll 0 0;
    color: #1f6b12;
    width: 100% ;
}

button.btn.sitenear-big-outlined-button:hover,
button.btn.sitenear-big-outlined-button:focus
{
    background: #fff none repeat scroll 0 0 !important;
    color: #1f6b12 !important;
    border: 2px solid #14440b !important;
    outline-color: rgba(57, 146, 25, 0.75);
}

/* Using Flexbox */
.sitenear-new-icon {
    color: #1f6b12; /* This is a text color, not an image color */
    background-color: transparent;
    width: 34px; /* Fixed width */
    height: auto; /* Auto height to maintain aspect ratio */
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
}


.sitenear-new-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.sitenear-user-name {
    color: #1f6b12;
    background-color: transparent;
    cursor: pointer;
    display: block;
    font-family: "Montserrat-Regular", serif;
    word-break: normal;
    font-size:0.7em;
    text-align: center;
    overflow-x: hidden;
}



/* header placement on small screen */

div#sitenear-top-navbar {
    display: flex;
}

div#sitenear-top-navbar a.navbar-brand img {
    margin-top: 0.5rem;
    float: none;
}

div#sitenear-top-navbar button.navbar-toggle {
    margin-left: 1rem;
}

.sign-in-nav div#sitenear-top-navbar button.navbar-toggle {
    display: none;
}

div#sitenear-top-navbar div.map-icon {
    position: relative;
    display: block;
}

div#sitenear-top-navbar div.map-icon img {
    width: 5rem;
    height: 5rem;
}


#sitenear-locator-top-page {
    color: #1f6b12;
    padding-right: 0;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    font-size: 12px;
    pointer-events: none;
}

#sitenear-locator-top-page a,
#sitenear-locator-top-page .location {
    pointer-events: auto;
}

@media (min-width: 768px) {
    #sitenear-locator-top-page {

    }
}

#sitenear-locator-top-page .location {
    background-position: 0 0;
}


/* footer placement on small screen*/



.footer-nav.sitenear-footer {
    display: block;
    width: 100%;
    float: none;
    padding-top: 1px;
    clear: both;
    position:fixed;
    z-index: 99;
}

@media only screen and (max-width:991px){
    .footer-nav.sitenear-footer {
        display: block;
        width: 100%;
        float: none;
        padding: 0;
        clear: both;
        bottom: 0;
        border: 1px solid transparent;
        border-bottom: 1px solid transparent;
        position: fixed;
        z-index: 99;
        /* Fixed height + safe-area for notched phones */
        height: calc(50px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background-color: #fff;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }
}


.footer-nav.sitenear-footer .fl-language-dropdown {
    margin-top: 4px;
}

.footer-nav.sitenear-footer #sitenear-mobile-language-target .fl-language-dropdown {
    padding: 3px 16px;
    display: block;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}



.footer-nav.sitenear-footer .mobile-footer {
    width: 100%;
    display: block;
    clear: both;
    padding: 0;
    margin: 0;
}

.footer-nav.sitenear-footer .mobile-footer > div {
    padding: 0;
    margin: 0;
}

.footer-nav.sitenear-footer .navbar-mobile {
    border-color: white ;
    margin:0 ;
    min-height: revert;
    background-color: transparent;
}

.footer-nav.sitenear-footer .mobile-footer nav.navbar {
    margin-left: 0.75em
}

.footer-nav.sitenear-footer .mobile-footer nav.navbar button {
    margin: 5px;
    padding: 5px 10px;
}

.footer-nav.sitenear-footer  #sitenear-large-languge-target {
    float:right;
    margin-right: 0.75em
}

.footer-nav.sitenear-footer #sitenear-mobile-footer-custom {
    min-height: 1em;
    max-height: 5em;
    overflow: hidden;
    overscroll-behavior: none;
    text-overflow: initial;
}

/* Simplified mobile footer action icons */
@media (max-width: 991px) {
    .sitenear-mobile-footer-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        padding: 0 4px;
    }

    .sitenear-footer-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: #1f6b12;
        background: transparent;
        border: none;
        font-size: 20px;
        text-decoration: none;
        transition: background-color 0.2s ease;
        cursor: pointer;
        /* Fallback for gap - use margin instead */
        margin-left: 2px;
    }

    .sitenear-footer-icon:hover,
    .sitenear-footer-icon:focus {
        background-color: rgba(71, 173, 34, 0.1);
        color: #1f6b12;
        text-decoration: none;
    }

    .sitenear-footer-icon:active {
        background-color: rgba(71, 173, 34, 0.2);
    }

    .sitenear-footer-more {
        position: relative;
        display: inline-flex;
    }

    .sitenear-footer-more-btn {
        padding: 0;
        outline: none;
    }

    .sitenear-footer-dropdown {
        min-width: 220px;
        padding: 8px 0;
        border-radius: 8px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
        border: 1px solid #eee;
        /* Ensure dropdown opens above footer */
        bottom: 100%;
        top: auto;
        margin-bottom: 8px;
    }

    .sitenear-footer-dropdown li a {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        color: #333;
        font-size: 14px;
    }

    .sitenear-footer-dropdown li a i {
        width: 20px;
        margin-right: 10px;
        text-align: center;
        color: #1f6b12;
    }

    .sitenear-footer-dropdown li a:hover {
        background-color: #f5f5f5;
        text-decoration: none;
    }

    .sitenear-footer-dropdown li.divider {
        margin: 6px 0;
        height: 0;
        border-top: 1px solid #eee;
        background: transparent;
    }
}

@media (max-width: 1100px) {
    .footer-nav.sitenear-footer #sitenear-mobile-language-target .fl-language-dropdown {
        padding-right: 4px;
    }
}

@media (max-width: 991px) {
    .footer-nav.sitenear-footer .navbar-toggle {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .sitenear-user-name {
        font-size:0.6em;
    }
}

/**
        fixing by friend 5.24
*/
@media (max-width: 991px) {

    div.sitenear-full-screen-tingle div.tingle-modal-box__content {
        overflow-y: hidden;
        border: 0px solid #888;
        width: 100%;
        height: 100%;
    }

}


@media (min-width: 992px)  {
    div.sitenear-full-screen-tingle.tingle-modal--overflow  {
        overflow-y: hidden !important;
    }
}

    /* Pagination styles for history modal */
    .history-pagination {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    
    .history-pagination .page-item {
        margin: 0 3px;
    }
    
    .history-pagination .page-link {
        padding: 5px 10px;
        border-radius: 3px;
        border: 1px solid #ddd;
        color: #1f6b12;
        background-color: #fff;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    
    .history-pagination .page-link:hover {
        background-color: #f0f7fd;
        border-color: #1f6b12;
    }
    
    .history-pagination .page-item.active .page-link {
        background-color: #1f6b12;
        border-color: #1f6b12;
        color: white;
    }
    
    .history-pagination .page-item.disabled .page-link {
        color: #aaa;
        cursor: not-allowed;
        background-color: #f8f8f8;
    }
    
    /* Mobile specific pagination styles */
    @media (max-width: 767px) {
        .history-pagination {
            flex-wrap: wrap;
        }
        
        .history-pagination .page-item {
            margin: 2px;
        }
        
        .history-pagination .page-link {
            padding: 4px 8px;
            font-size: 0.9em;
        }
    }
    
    .tingle-modal__close {
        top: 1% !important;
        right: 5% !important;
    }

    /* Position the close button on the right side next to the scrollbar */
    .tingle-modal__close {
        position: fixed !important;
        right: 40px !important;
        top: 10px !important;
        background-color: transparent !important;
        color: #333 !important;
        font-size: 2rem !important;
        z-index: 1001 !important;
    }
    
    /* Remove the footer if it's only containing the close button */
    .tingle-modal-box__footer:empty {
        display: none !important;
        padding: 0 !important;
        border-top: none !important;
    }
    
    
    /* Make modal footer more compact or hidden when not needed */
    .tingle-modal-box__footer {
        padding: 0 !important;
        min-height: 0 !important;
    }


/* css for tingle model in small screen*/
div.sitenear-full-screen-tingle .tingle-modal-box {
    width: revert;
}



div.sitenear-full-screen-tingle .tingle-modal-box  div.tingle-modal-box__content {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow-y: scroll;
}

div.tingle-modal--visible {
    background-color: white;
    z-index: 1300;
    padding-top:0px;
}

span.tingle-modal__closeIcon{
    color: gray;
}

/* GLOBAL FIX: Ensure SweetAlert appears above ALL tingle modals (max z-index: 2000 for cropper, 1300 for regular modals) */
.swal2-container.swal2-backdrop-show,
.swal2-container {
    z-index: 10500 !important;
}

div.sitenear-full-screen-tingle #sitenear-post-slides {
    width: 100vw;
}

.tingle-modal.sitenear-full-screen-tingle {
    background: revert;
    background-color: transparent;
    /*padding-top: 20px;*/
    padding-top: 0px;
    /*right: -5px;*/ /* hides scrollbar */
}

.tingle-modal.sitenear-full-screen-tingle .tingle-modal__close {
    background-color: transparent;
    width:8vw;
    top:3vh;
    left: unset;
    height: auto;
}

.tingle-modal.sitenear-full-screen-tingle .sitenear-full-screen-tingle-new-close {
    color: #333!important;
}

.tingle-modal.sitenear-full-screen-tingle .sitenear-full-screen-tingle-close {
    color: #333;
    background-color: transparent;
    cursor: pointer;
    font-family: "Montserrat-SemiBold", serif;
    word-break: normal;
    width: fit-content;
    height: fit-content;
    padding: 0;
    font-size: max(4vh, 4vw);
/*    float: right;
    display: inline-block;
    margin-top: 0em;
    margin-right: 2em;*/
    position: absolute;
    top:1vh;
    right: 1vw;
    z-index: 9999;
}


iframe.sitenear-full-size-map-iframe {
    width: 100%;
    height: 100%;
}

.sitenear-max-one-third-screen {
    display: block;
    max-width: 33vw;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

#sitenear-big-map {
    height: calc(90vh - 25px);
    margin-left: 5px;
    position: relative;
    /* Fallback background - shows if Leaflet fails to initialize */
    background: #f5f1e8;
    background-image:
        linear-gradient(to right, rgba(180, 170, 150, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(180, 170, 150, 0.12) 1px, transparent 1px),
        radial-gradient(ellipse at center, #f8f5ed 0%, #ebe5d6 70%, #ddd5c3 100%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
    background-position: 0 0, 0 0, center center;
    background-repeat: repeat, repeat, no-repeat;
}

/* Map fallback styling - shows when tiles cannot load */
/* Applied to both main map and location modal map */
.site-location-map {
    background: #f5f1e8;
    background-image:
        linear-gradient(to right, rgba(180, 170, 150, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(180, 170, 150, 0.12) 1px, transparent 1px),
        radial-gradient(ellipse at center, #f8f5ed 0%, #ebe5d6 70%, #ddd5c3 100%);
    background-size: 40px 40px, 40px 40px, 100% 100%;
    background-position: 0 0, 0 0, center center;
    background-repeat: repeat, repeat, no-repeat;
}

.leaflet-container {
    /* Soft parchment/map background color */
    background: #f5f1e8 !important;

    /* Grid pattern */
    background-image:
        linear-gradient(to right, rgba(180, 170, 150, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(180, 170, 150, 0.12) 1px, transparent 1px),
        radial-gradient(ellipse at center, #f8f5ed 0%, #ebe5d6 70%, #ddd5c3 100%);

    background-size:
        40px 40px,
        40px 40px,
        100% 100%;

    background-position: 0 0, 0 0, center center;
    background-repeat: repeat, repeat, no-repeat;
}

/* Compass element - added via JavaScript when no tiles */
.sitenear-compass-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    z-index: 1; /* Very low - below all map panes so markers are always on top */
    pointer-events: none;
    opacity: 0.35;
}

/* Hide tile pane when no tiles loaded (China/network error) - compass shows through */
.leaflet-container.sitenear-no-tiles .leaflet-tile-pane {
    display: none !important;
}

/* Hide attribution when no tiles (OSM attribution doesn't apply) */
.leaflet-container.sitenear-no-tiles .leaflet-control-attribution {
    display: none !important;
}

/* Make failed/errored tiles transparent so compass shows through */
.leaflet-tile-container img.leaflet-tile {
    background: transparent !important;
}

/* When tile fails to load, hide the broken image */
.leaflet-tile-container img.leaflet-tile-loaded[src=""],
.leaflet-tile-container img.leaflet-tile:not([src]),
.leaflet-tile-container img.leaflet-tile[src="data:,"] {
    opacity: 0 !important;
}

/* search area */
div#sitenear-search-result-area {
    height: calc(100vh - 180px);
    width: 80%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    clear: both;
    margin: auto;
}

@media (max-width: 991px) {
    div#sitenear-search-result-area {
        width: 100%;
    }
}

 div.sitenear-search-site-item .sitenear-goto-location-map.sitenear-goto-location-home {

}

 div.sitenear-search-site-item img.sitenear-search-site-thumb {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}


h2.sitenear-side-bar-header {
    text-align: center;
    background: #fff;
    color: #1f6b12;
    font-family: "Montserrat-SemiBold", serif;
    font-size: 1.8em;
    min-height: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    text-transform: uppercase;

    border-bottom: 1px solid #eee;

}

body.tingle-enabled.modal-open >  div.modal-backdrop.fade.in {
    z-index: 999;
}

.sitenear-redirect-to-refill-when-clicked {
    cursor: pointer;
}

/** Pagination override */


ul.pagination li span, ul.pagination li a, ul.pagination li a span  {
    color: #1f6b12 ;
    cursor: pointer;
}

ul.pagination> li.active >a,
ul.pagination> li.active >a:focus,
ul.pagination> li.active >a:hover,
ul.pagination> li.active >span,
ul.pagination> li.active >span:focus,
ul.pagination> li.active >span:hover
{
    background-color: #1f6b12;
    border-color: #14440b;

}


/* Fix horizontal scrolling on mobile */
@media (max-width: 991px) {
    .wrapper {
      overflow-x: hidden !important;
    }
    
    /* Also fix the modal popups */
    .tingle-modal-box {
      max-width: 100% !important;
      width: 100% !important;
      border-radius: 0;
    }
    
    /* Position close button inside the popup */
    .tingle-modal.sitenear-full-screen-tingle .tingle-modal__close {
      position: absolute !important;
      right: 15px !important;
      top: 15px !important;
      z-index: 1001;
    }
    
    .tingle-modal.sitenear-full-screen-tingle .sitenear-full-screen-tingle-new-close {
      width: min(10vw,10vh) !important;
      height: min(10vw,10vh) !important;
    }
  }


a.view-user-display  {
    color: #1f6b12;
    font-size: 0.8em;
}

a.view-user-display:hover {
    color: #378d1b;
}

/*office hours dialog box */
.sitenear-show-office-hours {
    cursor: pointer;
}

@media (min-width: 992px) {
    div.tingle-modal.sitenear-popup-public-time  .tingle-modal-box {
        width: 30vw;
    }

}

#wait-div .sitenear-wait-words {
    display: block;
    color: aliceblue;
    position: relative;
    top: calc(55% + 60px);
    font-size: 4rem;
    font-weight: bold;

}

header input.sitenear-top-nav-searchbar
{
    padding-left: 10px;
    width: calc(100% - 80px);
}

.no-padding {
    padding: 0 !important;
}

/* advertisements when displayed*/



.sitenear-advertisment {
    cursor: pointer;
}

.sitenear-advertisment div.sitenear-ad-column.sitenear-ad-title-holder {
    text-align: center;
}



.sitenear-advertisment div.sitenear-ad-column.sitenear-ad-image-holder,
.sitenear-advertisment div.sitenear-ad-column.sitenear-ad-description-holder
{
    text-align: left;
}

.sitenear-advertisment div.sitenear-ad-column.sitenear-ad-image-holder .sitenear-ad-image {
    max-width: 100%;
    height: auto;
}

.sitenear-advertisment div.sitenear-ad-column.sitenear-ad-title-holder .sitenear-advertisment .sitenear-ad-title {

}

.sitenear-advertisment .sitenear-advertisment div.sitenear-ad-column.sitenear-ad-description-holder .sitenear-ad-description {
 white-space: pre-line;
}

/* feed ads */

.sitenear-advertisment.sitenear-feed-ad
{
    border-bottom: 1px solid #f0f0f0;
    padding: 0.75rem 1rem;
    position: relative;
    width: 100%;
    margin: 0;
    float: left;
}

.sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-column {
    padding: 0;

}

.sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-column.sitenear-ad-image-column {
    text-align: left;
}

.sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-image-holder {
    display: inline-block;
    width: fit-content;
    vertical-align: top;
}


.sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-image-holder img.sitenear-search-site-thumb {
    width: 120px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-words-holder {
    display: grid;
    margin-left: 0.5rem;
    vertical-align: top;
    width: 100%;
}

.sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-words-holder h3 {
    min-height: 2rem;
    margin-top: 0;
    margin-bottom: 0.25rem;
    font-size: 19px;
}

.sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-words-holder .sitenear-ad-start {
    font-weight: bold;
    margin-right: 0.25rem;
    font-size: 0.5em;
    display: inline-block;
    vertical-align: super;
}

.sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-words-holder .sitenear-ad-description {
    display: inline-block;
    margin-left: 2rem;
}

.sitenear-advertisment.sitenear-feed-ad .sitenear-ad-url {
    display: block;
    color: lightgray;
    font-size: 1.2em;
    font-weight: bold;
    overflow: hidden;
    width: 100%;
    height: 1.2em;
    text-overflow: ellipsis;
    text-align: center;
}

@media (max-width: 767px) {
    .sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-image-holder {
        display: block;
        width: 100%;
        text-align: center;
    }

    .sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-words-holder {
        width: 100%;
        text-align: center;
    }

    .sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-words-holder h3 {
        text-align: center;
        margin: auto;
    }

    .sitenear-advertisment.sitenear-feed-ad div.sitenear-ad-words-holder .sitenear-ad-description {
        margin-left: 0;

    }
}

img.sitenear-user-icon {
    margin-bottom: 0.5em;
    width:70px;
    height:auto;
    object-fit: contain;
    border-radius:5px
}

.sitenear-advertisment.sitenear-feed-ad .sitenear-invisible-impression-guid {
    color: #F5F5F5;
    font-size: 2px;
    display: inline;
    word-break: break-all;
}

/* uploaded batches common styles */
div.sitenear-batch-progress-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

div.sitenear-batch-progress-area div.sitenear-batch-info {

}

div.sitenear-batch-progress-area div.sitenear-batch-info .sitenear-batch-spinner {
    font-size: 0.8em;
    display: inline-block;
}

div.sitenear-batch-progress-area div.sitenear-batch-info .sitenear-batch-spinner.first-third {
    color: purple;
}

div.sitenear-batch-progress-area div.sitenear-batch-info .sitenear-batch-spinner.second-third {
    color: blue;
}

div.sitenear-batch-progress-area div.sitenear-batch-info .sitenear-batch-spinner.final-third {
    color: green;
}

div.sitenear-batch-progress-area div.sitenear-batch-info .sitenear-batch-percentage {
    font-size: 0.8em;
    display: inline-block;
}

.sitenear-batch-warnings {

}

/* ── Max page width: full-screen up to 1920px (all standard desktops/laptops),
       centred with side margins on QHD/4K/ultra-wide screens ── */
.wrapper {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

/* .footer-nav is position:fixed with an explicit left:0 (style.css) — that pins the
   box to the left edge, so margin:auto (which works fine for the in-flow .wrapper
   above) silently has no effect here. Without this, above ~1920px width the footer
   hugs the left edge while the header/content float centered above it. left:50% +
   translateX(-50%) is the standard centering technique for a fixed-position,
   width-capped element. */
.footer-nav.sitenear-footer {
    max-width: 1920px;
    left: 50%;
    transform: translateX(-50%);
}

/* ════════════════════════════════════════════════════════════════════════════
   BRAND COLOR TOKENS - Single source of truth for the SiteNear green
   Same values already used on the domains page (resources/views/frontend/
   domain/buy-domain.blade.php). --sn-accent-light preserves the old #1f6b12
   as the lightest step of the ramp, so anywhere that used to look "brighter"
   (hovers, secondary icons) can still reach for that shade deliberately
   instead of it being the default everywhere.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    --sn-accent:       #1f6b12;  /* primary buttons, links, active states */
    --sn-accent-deep:  #14440b;  /* hover/pressed, headings-on-accent */
    --sn-accent-light: #1f6b12;  /* legacy brand green, kept as the lightest ramp step */
    --sn-accent-soft:  #e3f3da;  /* tinted backgrounds, badges, focus rings */
    --sn-ink:          #14231a;  /* headings and body text on the brand palette */
    --sn-muted:        #56655a;  /* secondary / helper text on the brand palette */
    --sn-line:         #dbe6d3;  /* borders, dividers on the brand palette */
    --sn-paper:        #f6f8f3;  /* page background on the brand palette */
}

/* ════════════════════════════════════════════════════════════════════════════
   BOOTSTRAP .btn-primary OVERRIDE - closes the stock-blue leak
   bootstrap.min.css loads AFTER this file (via common-style-includes.blade.php),
   so a same-specificity ".btn-primary" rule here would lose the cascade to
   Bootstrap's own #337ab7. Using the two-class ".btn.btn-primary" selector
   keeps this rule higher-specificity than Bootstrap's regardless of load
   order, so every plain .btn-primary in the app (not just the handful of
   pages that used to carry their own narrow override) now resolves to the
   brand accent instead of stock Bootstrap blue.
   ════════════════════════════════════════════════════════════════════════════ */
.btn.btn-primary {
    background-color: var(--sn-accent, #1f6b12);
    border-color: var(--sn-accent, #1f6b12);
    color: #fff;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
    background-color: var(--sn-accent-deep, #14440b);
    border-color: var(--sn-accent-deep, #14440b);
    color: #fff;
}
.btn.btn-primary.disabled,
.btn.btn-primary:disabled {
    background-color: var(--sn-accent-light, #1f6b12);
    border-color: var(--sn-accent-light, #1f6b12);
    opacity: .65;
}

/* ════════════════════════════════════════════════════════════════════════════
   UNIFIED PAGE LAYOUT - Body-level scrollbar + consistent spacing
   Applied to: settings, wallet, my_sites, favourite, contacts pages
   ════════════════════════════════════════════════════════════════════════════ */

/* Single source of truth for the "unified content" page width. Referenced by
   .sitenear-unified-content/.sitenear-no-map-content below and by the
   per-page CSS files for wallet, contacts, my_sites, favourite, settings, and
   the site-detail settings takeover panel — change it here to change it
   everywhere. Fluid between 1024–1280px instead of a hard-coded value. */
:root {
    --sn-unified-max-width: clamp(1024px, 95vw, 1920px);
}

/* Enable body scrollbar for unified pages (overrides default overflow:hidden) */
body:has(section.sitenear-unified-body-scroll) {
    overflow: auto !important;
}
body:has(section.sitenear-unified-body-scroll)::-webkit-scrollbar {
    display: block;
    width: 8px;
    background-color: #e8e8e8;
}
body:has(section.sitenear-unified-body-scroll)::-webkit-scrollbar-track {
    background-color: #e8e8e8;
    box-shadow: none;
    border-radius: 0;
}
body:has(section.sitenear-unified-body-scroll)::-webkit-scrollbar-thumb {
    background-color: #aaaaaa;
    border-radius: 4px;
}
body:has(section.sitenear-unified-body-scroll)::-webkit-scrollbar-thumb:hover {
    background-color: #1f6b12;
}
body:has(section.sitenear-unified-body-scroll) .wrapper {
    overflow: visible !important;
}

/* On unified pages, also align the header nav bar and footer to the same
   fluid content width, so the whole page — not just the content column —
   shares the same side margins. Both bars already have a plain white
   background matching the page background, so narrowing them is purely a
   content-alignment change with no visible "band" to lose. Left untouched
   on all other pages (home, site detail, etc.), which still use the full
   ~1920px .wrapper width via the rule above — those pages' own content
   isn't width-capped yet, so a narrower header/footer there would create
   the opposite mismatch. */
body:has(section.sitenear-unified-body-scroll) nav.navbar.navbar-default {
    max-width: var(--sn-unified-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* menu.css shows a few extra nav items (Favorite/Contacts/Web Wallet/Setting,
   class .sitenear-menu-item-only-sometimes) once the VIEWPORT reaches 1400px,
   on the assumption that the nav bar's own width equals the viewport width.
   On unified pages that's no longer true — the bar above is capped by
   --sn-unified-max-width (fluid 1024-1440px), so at viewport widths from
   1400px up to ~1516px (where 95vw first reaches the 1440px ceiling) the bar
   is still narrower than 1400px and doesn't have room for those items,
   wrapping the nav to a second line. Keep them hidden across that gap;
   normal service resumes once the bar hits its full 1440px width. */
@media (min-width: 1400px) and (max-width: 1520px) {
    body:has(section.sitenear-unified-body-scroll) li.sitenear-menu-item-only-sometimes {
        display: none !important;
    }
}

/* Even once the bar reaches its full 1440px ceiling, the complete always+sometimes
   item set is still too wide to fit on one line (confirmed at a 1704px window) —
   so on unified pages, keep Setting folded into the avatar dropdown from 1400px
   up, regardless of how wide the window gets. */
@media (min-width: 1400px) {
    body:has(section.sitenear-unified-body-scroll) li.sitenear-menu-item-setting {
        display: none !important;
    }
}

/* In the 768–1400px band, menu.css already hides the "sometimes" items, but on
   unified pages even the remaining always-shown items don't all fit at some
   widths in that band (confirmed at an 817px window) — drop News there too. */
@media (min-width: 768px) and (max-width: 1400px) {
    body:has(section.sitenear-unified-body-scroll) li.sitenear-menu-item-news {
        display: none !important;
    }
}

/* .footer-nav is position:fixed with an explicit left:0 (style.css) — that pins the box,
   so margin:auto (which works fine for the in-flow navbar above) has no effect here.
   left:50% + translateX(-50%) is the standard centering technique for a fixed-position,
   width-capped element. */
body:has(section.sitenear-unified-body-scroll) .footer-nav.sitenear-footer {
    max-width: var(--sn-unified-max-width);
    left: 50%;
    transform: translateX(-50%);
}

/* Unified content container: fluid max-width (see --sn-unified-max-width above), 40px side padding.
   NOTE: .sitenear-unified-content itself is not currently referenced by any page's markup —
   .sitenear-no-map-content below is the class actually used by wallet/contacts/addcontact.
   Kept in sync here in case a page adopts it later. */
.sitenear-unified-content,
.sitenear-no-map-content {
    max-width: var(--sn-unified-max-width);
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .sitenear-unified-content,
    .sitenear-no-map-content {
        padding: 0 16px;
    }
}