/**
 * Leftover Legends - Styles
 *
 * These are minimal base styles. The theme should override these
 * to match the LFHW brand.
 */

/* ==========================================================================
   Map
   ========================================================================== */
/* .page-content h2,
.page-content h3,
.page-content h4,
.page-content p,
.page-content img {
    margin: 0 0 0 !important;
} */

 .page-content .wpb_wrapper h3{
    text-align: center !important;
 }

/* Neutralise theme .page-content div styles for all plugin output. */
.page-content div[class*="leftover-legends"],
.page-content div[class*="leftover-legends"] div {
    font-size: initial;
    font-weight: initial;
    line-height: initial;
    max-width: none;
}

.leftover-legends-map-wrapper {
  width: 100%;
  position: relative;
}
.mapboxgl-popup-content {
    background-color: transparent !important;
}
.mapboxgl-popup{
    background-color: transparent !important;
}
.leftover-legends-popup__banner{
    position: relative;
}
.leftover-legends-popup__banner img{
    width: 161px;
    height: auto;
    margin: 0 auto !important;
}
.leftover-legends-popup__banner-img img{
    position: fixed;
    right: 67.6px;
    bottom: 0.3px;
    width: 40px;
    height: 40px !important;
    transform: translate(14%, 0);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    background: #33e617;
    z-index: 9;
}

/* ==========================================================================
   Counter
   ========================================================================== */

.leftover-legends-counter{
  position: relative;
}
.leftover-legends-counter__number {
  font-size: 68px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
}

.leftover-legends-counter__prefix,
.leftover-legends-counter__suffix {
  font-size: 0.6em;
  vertical-align: super;
}

.leftover-legends-counter__label {
  font-size: 18px;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .leftover-legends-counter__number {
    font-size: 36px;
  }

  .leftover-legends-counter__label {
    font-size: 14px;
  }

  .leftover-legends-map {
    min-height: 250px;
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Ensure focus is visible on map controls */
.mapboxgl-ctrl button:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .leftover-legends-counter__value {
    transition: none;
  }
}


/* ==========================================================================
   Map Plate Count
   ========================================================================== */
.leftover-legends-mapcount{
  display: flex;
  width: 393px;
  padding: 0 20px 30px 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 24px 24px 0 0;
  background: #2E4E29;
  color: #fff;
}
.leftover-legends-countBlock{
  display: flex;
  gap: 20px;
}
.leftover-legends-countBlock .leftover-legends-counter .leftover-legends-counter__number{
  color: #7AEE70;
  text-align: center;
  text-shadow: 0 0 6px #021500, 1px 1px 0 #021500;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #051F04;
  font-family: "futura-pt-bold", sans-serif !important;
}
.leftover-legends-counter .leftover-legends-counter__label {
  color: #7AEE70;
  text-align: center;
  text-shadow: 0 0 6px #021500, 1px 1px 0 #021500;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #051F04;
  font-family: "futura-pt-bold", sans-serif !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 23px;
  letter-spacing: 0.84px;
}

.leftover-legends-countBlock .leftover-legends-counts{
  display: flex;
  align-items: center;
  color: #7AEE70;
  text-align: center;
  text-shadow: 0 0 6px #021500, 1px 1px 0 #021500;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #051F04;
  font-family: "futura-pt-bold", sans-serif !important;
  font-style: normal;
}
.leftover-legends-countBlock .leftover-legends-counttext{
  color: #7AEE70;
  text-align: center;
  text-shadow: 0 0 6px #021500, 1px 1px 0 #021500;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #051F04;
  font-family: "futura-pt-bold", sans-serif !important;
  font-size: 12px;
  font-style: normal;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  display: flex;
  justify-content: center;
}
.leftover-legends-counts.leftover-legends-equals{
  color: #7AEE70;
  text-align: center;
  text-shadow: 0 0 6px #021500, 1px 1px 0 #021500;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #051F04;
  font-family: Futura;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 23px; /* 71.875% */
  letter-spacing: 2.24px;
}


/* Main button container with darker green background */
.add-plate-button-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    background: #64AA64; /* Dark green background from your image */
    border-radius: 116px;
}

/* Inner button container for diamond border ring */
.add-plate-button-container {
    position: relative;
    width: 100%;
    padding: 6px;
    background: transparent;
    border-radius: 70px;
}

/* Diamond border ring - repeating around entire perimeter */
.add-plate-button-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 70px;
    border: 6px solid transparent;
    background: 
        linear-gradient(#3d5a45, #3d5a45) padding-box,
        url('../img/greenbtn-diamond.png') border-box;
    background-size: auto, 15px 15px;
    background-repeat: no-repeat, repeat;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* The actual button */
.add-plate-button {
  width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 0; 
    background: #399539;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: 1px;
    text-decoration: none;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Active state */
.add-plate-button:active {
    transform: translateY(-1px);
    box-shadow: 
        inset 0 2px 15px rgba(255, 255, 255, 0.3),
        inset 0 -1px 8px rgba(0, 0, 0, 0.25),
        0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Focus state for accessibility */
.add-plate-button:focus {
    outline: 3px solid rgba(124, 189, 63, 0.6);
    outline-offset: 6px;
}

/* Responsive */
@media (max-width: 768px) {
    .leftover-legends-mapcount{
        width: 100%;
    }
    .add-plate-button {
        font-size: 24px;
        padding: 18px 100px;
    }
    .add-plate-button-container::before {
        background-size: auto, 16px 16px;
    }
}

@media (max-width: 480px) {
    .add-plate-button {
        font-size: 14px;
        padding: 11px 0px;
    }
    .add-plate-button-wrapper {
        padding: 0;
    }
    .add-plate-button-container::before {
        background-size: auto, 14px 14px;
    }
}



/* ===================================
   Leftover Legends Counter - PNG Digits
   =================================== */

.leftover-legends-counter__number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Counter value container */
.leftover-legends-counter__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    vertical-align: middle;
    min-height: 1em;
}

/* Individual digit images */
.digit-img {
    display: inline-block;
    height: 1em;
    width: auto;
    vertical-align: middle;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Specific digit styling */
.digit-img[data-digit] {
    height: 1em;
    min-width: 0.6em;
    margin: 0;
}

/* Comma separator (for 1,234) */
.digit-comma {
    height: 0.4em;
    width: 0.3em;
    margin: 0 2px;
    opacity: 0.8;
}

/* Decimal point (if needed) */
.digit-dot {
    height: 0.3em;
    width: 0.3em;
    margin: 0 2px;
}

/* Prefix and suffix (if used) */
.leftover-legends-counter__prefix,
.leftover-legends-counter__suffix {
    font-size: 0.8em;
    font-weight: 600;
    margin: 0 5px;
}

/* Counter label */
.leftover-legends-counter__label {
    font-size: 0.85em;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Size variations for different contexts */
.leftover-legends-counts .leftover-legends-counter__value {
    font-size: 2.5em;
}

/* Loading state */
.leftover-legends-counter__value.loading .digit-img {
    opacity: 0.5;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Smooth fade-in when counter appears */
.leftover-legends-counter__value {
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Responsive sizing */
@media (max-width: 768px) {
    .leftover-legends-counts .leftover-legends-counter__value {
        font-size: 1.8em;
    }
    
    .digit-img {
        gap: 1px;
    }
}

@media (max-width: 480px) {
    .leftover-legends-counts .leftover-legends-counter__value {
        font-size: 1.5em;
    }
    
    .leftover-legends-counter__label {
        font-size: 0.75em;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .digit-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}



/* ===================================
   Digit & Unit Image Counter Styling
   =================================== */

.leftover-legends-counter__value,
.leftover-legends-co2-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    vertical-align: middle;
}

/* Individual digit images (0-9) */
.digit-img {
    display: inline-block;
    height: 1em; /* Scales with parent font-size */
    width: auto;
    vertical-align: middle;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Specific digit styling */
.digit-img[data-digit] {
  height: 1em;
  min-width: 68px;
  margin: 0 -22px;
  text-align: center;
}

/* Unit letter images (K, G, T) */
.unit-img[data-letter] {
    display: inline-block;
    height: 68px;
    width: auto;
    vertical-align: middle;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    margin: 0 -19px;
}

/* Unit wrapper styling */
.leftover-legends-co2-unit {
    display: inline-flex;
    align-items: center;
}

/* Counter container sizing */
.leftover-legends-counts .leftover-legends-counter__value,
.leftover-legends-counts .leftover-legends-co2-value {
    font-size: 68px;
}

/* Smooth transitions during animation */
.digit-img,
.unit-img {
    transition: opacity 0.1s ease;
}

/* Loading state */
.leftover-legends-counter__value.loading .digit-img,
.leftover-legends-counter__value.loading .unit-img,
.leftover-legends-co2-value.loading .digit-img,
.leftover-legends-co2-unit.loading .unit-img {
    opacity: 0.5;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Responsive sizing */
@media (max-width: 768px) {
    .digit-img,
    .unit-img {
        gap: 2px;
    } 
    .unit-img {
        margin-left: 4px;
    }
}

@media (max-width: 480px) {
    .unit-img {
        height: 0.75em;
        margin-left: 3px;
    }
}

/* Ensure images don't break layout */
.leftover-legends-countBlock {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.leftover-legends-co2-wrapper{
  position: relative;
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .digit-img,
    .unit-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Photo overlay on pins (visible without clicking) */
.ll-pin-photo {
    pointer-events: none;
}

.ll-pin-photo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    background: #33e617;
    display: block;
}

/* MAP STYLING */
#leftover-legends-map {
  width: 100%;
  height: 500px; 
  background-image: url('../img/map-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Onclick START */
.leftover-legends-popup {
  max-width: 280px;
  font-family: inherit;
}

/* Banner wrapper */
.leftover-legends-popup__banner {
  position: relative;
  width: 100%;
  margin-bottom: 6px;
}

/* Speech-bubble image */
.leftover-legends-popup__banner-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* Text positioned on top of the speech bubble */
.leftover-legends-popup__banner-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 20px 65px;
  text-align: center;
  color: #ffffff;               
  pointer-events: none;
  font-size: 14px;
  color: #7CC763;
  letter-spacing: -0.14px;        
}

.leftover-legends-popup__banner-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.14px; 
}

.leftover-legends-popup__banner-subtitle {
  font-size: 12px;
  margin-top: 2px;
}

/* Existing content */
.leftover-legends-popup__image {
  width: 100%;
  display: block;
  border-radius: 4px;
}
.leftover-legends-popup__content {
  margin-top: 6px;
}
.mapboxgl-popup-content{
  box-shadow: none;
  margin: 0 auto !important;
}
 .mapboxgl-popup {
  min-width: 300px;
  margin-left: -68px !important;
  background-color: white;
}
/* END */

/* Gravity Form Custom Style START */
body .gform_wrapper{
  padding: 0;
}
body .gform_wrapper .gform_body {
  position: relative;
}
body .gform_wrapper .gform_body .gfield_label,
body .gform_wrapper .gform_body .gform-field-label{
  color: #2E4E29;
  font-weight: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
}

/* Input Height , border changes */
body .gform_wrapper .gform_body input[type="text"],
body .gform_wrapper .gform_body input[type="email"] {
  display: flex;
  padding: 21.018px 20.158px 11.729px 19.781px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 55px;
  border-radius: 6.182px;
  border: 1.236px solid #DBDBDB;
  background: #FFF;
}

body .gform_wrapper .gform_body .gfield_select{
  display: flex;
  padding: 13.018px 12px 13.982px 19.781px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 55px;
  border-radius: 6.182px;
  border: 1.236px solid #DBDBDB;
  background: #FFF;

  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.15px;
}

/* Hide the default file input (we’ll style the wrapper) */
body .gform_wrapper .gform_body input[type="file"] {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 2;
}

/* Style the outer dropzone area */
body .gform_wrapper .gform_body .ginput_container_fileupload {
  border-radius: 6.18px;
  border: 1px dashed #5AB24C;
  padding: 30px 20px;
  text-align: center;
  position: relative;
  margin: 40px 0;
}

/* Custom inner text (we’ll inject via :before / :after) */
body .gform_wrapper .gform_body .ginput_container_fileupload::before {
  content: "Upload a pic of the plate you saved!";
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: rgba(90, 178, 76, 1);
  line-height: 140%;
  margin: 12px 0 0;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%235AB24C' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17v3h16v-3M12 3v14M6 9l6-6 6 6'/%3E%3C/svg%3E");
}

/* File type hint */
body .gform_wrapper .gform_body .ginput_container_fileupload::after {
  content: "PNG, JPG, or HEIC";
  display: block;
  font-size: 15px;
  font-weight: 400;
  opacity: 0.7;
  color: rgba(46, 78, 41, 1);
}

/* Add a simple upload icon above the text (optional, emoji or background-img) */
body .gform_wrapper .gform_body .ginput_container_fileupload span.gf-custom-upload-icon {
  display: block;
  font-size: 30px;
  margin-bottom: 12px;
  color: #50b848;
}

/* Hover state */
body .gform_wrapper .custom-upload-dropzone .ginput_container_fileupload:hover {
  background-color: #f2ffea;
  border-color: #3fa03a;
}
.gform-theme--framework .gfield:where(.gfield--type-fileupload,.gfield--input-type-fileupload) .ginput_preview .gfield_fileupload_progressbar_progress{
  left: 0;
}


/* Custom Button styling START */
.greensolid-btn, .greenoutline-btn{
  display: block;
  position: relative;
}
.greensolid-btn::before, .greenoutline-btn::before{
  content: '';
  position: absolute;
  top: -7px;
  left: -7px;
  right: -7px;
  bottom: -7px;
  border-radius: 58px;
  background-color: #64AA64;
  background-image: url(../img/green-diamond.svg);
  background-repeat: space;
  background-size: 10px 10px;
  background-position: center;
  mask-composite: exclude;
  padding: 6px;
  pointer-events: none;
  z-index: 0;
}
.greensolid-btn button, .greensolid-btn a{
  position: relative;
  padding: 13px 56px !important;
  font-size: 13px !important;
  height: auto !important;
  font-weight: 700;
  color: #ffffff !important;
  background-color: #399539 !important;
  border-color:#64AA64 !important;
  border-radius: 116px;
  cursor: pointer;
  text-transform: capitalize;
  z-index: 1;
}
.greenoutline-btn button, .greenoutline-btn a{
  position: relative;
  padding: 13px 56px !important;
  font-size: 13px !important;
  height: auto !important;
  font-weight: 700;
  color: #399539 !important;
  background-color: #ffffff !important;
  border-color:#ffffff !important;
  border-radius: 116px;
  cursor: pointer;
  text-transform: capitalize;
  z-index: 1;
}
.greensolid-btn button:hover,
.greensolid-btn a:hover, 
.greenoutline-btn button:hover,
.greenoutline-btn a:hover{
  color: rgba(255, 255, 255, 1) !important;
  background-color: #2E4E29 !important;
  border-color:#2E4E29 !important;
}
/* END */

/* LOGO SLIDER SCROLL START */
.sliderlogo-custom .slider_scroll .slider_scroll__slide_image{
  height: 100%;
}
.sliderlogo-custom .slider_scroll__slide_image img.object-fit-cover{
  object-fit: contain;
  height: auto;
}
/* END */

/* Submit button START */
body .gform_wrapper .gform-footer{
  position: relative;
  display: inline-block;
}
body .gform_wrapper .gform-footer{
  position: relative;
  display: inline-block;
  margin-top: 40px;
}
body .gform_wrapper .gform-footer::before {
  content: '';
  position: absolute;
  top: -7px;
  left: -7px;
  right: -7px;
  bottom: -9px;
  border-radius: 58px;
  background-color: #64AA64;
  background-image: url(../img/green-diamond.svg);
  background-repeat: space;
  background-size: 10px 10px;
  background-position: center;
  mask-composite: exclude;
  padding: 6px;
  pointer-events: none;
  z-index: 0;
}

body .gform_wrapper .gform-footer .gform_button.button{
  position: relative;
  padding: 13px 56px;
  font-size: 13px;
  height: auto !important;
  font-weight: 700;
  color: #ffffff;
  background: #399539;
  border: none;
  border-radius: 116px;
  cursor: pointer;
  text-transform: capitalize;
  z-index: 1;
}
body .gform_wrapper .gform-footer .gform_button.button:hover{
  color: rgba(255, 255, 255, 1);
  background: #2E4E29;
}
body .gform_wrapper .gform-footer .gform_button.button:active{
  box-shadow: 0 2px 5px rgba(90, 150, 87, 0.3);
  border: none;
}

@media (max-width: 768px){
  body .gform_wrapper .gform-footer .gform_button.button{
    width: 100% !important;
  }
  body .gform_wrapper .gform-footer {
    width: 100%;
  }
}
/* Remove spinner on submit button */
body .gform_wrapper .gform_footer input[type="submit"].gform_button_waiting,
body .gform_wrapper .gform_footer input[type="submit"]:disabled,
.gform_wrapper input.gform_button_waiting {
    background-image: none !important;
    background: transparent !important;
    padding-right: inherit !important;
}
/* Remove blue border/outline on submit button */
body .gform_wrapper input[type="submit"],
body .gform_wrapper input[type="submit"]:focus,
body .gform_wrapper input[type="submit"]:active,
body .gform_wrapper input[type="submit"]:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
/* Optional: Prevent button from looking disabled during submission */
body .gform_wrapper input[type="submit"]:disabled {
    opacity: 1 !important;
    cursor: wait !important;
}

.gform-theme--foundation .gform-loader{
    display: none !important;
}
/* END */

.center-heading .col{
    width: 100%;
}
.center-heading h2{
    width: 100%;
    text-align: center;
}
.post_display_cards .card-info-section h3{
    text-align: left !important;
}