@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//www.rentals.haulingmissdaisy.com/wp-content/themes/woodmart/fonts/woodmart-font-3-300.woff2") format("woff2");
}

.wd-popup.wd-promo-popup{
	background-color:#111111;
	background-image: none;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:left center;
}

.page-title-default{
	background-color:rgb(141,46,255);
	background-image: none;
	background-size:cover;
	background-position:center center;
}

.footer-container{
	background-image: url(https://www.rentals.haulingmissdaisy.com/wp-content/uploads/2019/03/camping-footer-bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center bottom;
}

:root{
--wd-text-font:"Barlow", Arial, Helvetica, sans-serif;
--wd-text-font-weight:400;
--wd-text-color:rgb(0,0,0);
--wd-text-font-size:16px;
}
:root{
--wd-title-font:"Barlow Condensed", Arial, Helvetica, sans-serif;
--wd-title-font-weight:400;
--wd-title-color:rgb(0,0,0);
}
:root{
--wd-entities-title-font:"Barlow Condensed", Arial, Helvetica, sans-serif;
--wd-entities-title-font-weight:400;
--wd-entities-title-color:rgb(0,0,0);
--wd-entities-title-color-hover:rgb(51 51 51 / 65%);
}
:root{
--wd-alternative-font:"Barlow", Arial, Helvetica, sans-serif;
}
:root{
--wd-widget-title-font:"Barlow", Arial, Helvetica, sans-serif;
--wd-widget-title-font-weight:400;
--wd-widget-title-transform:uppercase;
--wd-widget-title-color:rgb(0,0,0);
--wd-widget-title-font-size:16px;
}
:root{
--wd-header-el-font:"Barlow Condensed", Arial, Helvetica, sans-serif;
--wd-header-el-font-weight:700;
--wd-header-el-transform:capitalize;
--wd-header-el-font-size:14px;
}
html .main-page-wrapper .product-grid-item .product-wrapper .wd-entities-title{
	font-family: "Barlow Condensed", Arial, Helvetica, sans-serif;font-weight: 600;font-size: 16px;line-height: 32px;text-transform: uppercase;color: rgb(0,0,0);
}

:root{
--wd-primary-color:rgb(0,0,0);
}
:root{
--wd-alternative-color:rgb(253,212,58);
}
:root{
--wd-link-color:#333333;
--wd-link-color-hover:#242424;
}
body{
	background-color:rgb(255,255,255);
	background-image: none;
}

.page .main-page-wrapper{
	background-color:rgb(255,255,255);
	background-image: none;
}

.woodmart-archive-shop .main-page-wrapper{
	background-color:rgb(255,255,255);
	background-image: none;
}

.single-product .main-page-wrapper{
	background-color:rgb(255,255,255);
	background-image: none;
}

.woodmart-archive-blog .main-page-wrapper{
	background-color:rgb(255,255,255);
	background-image: none;
}

.single-post .main-page-wrapper{
	background-color:rgb(255,255,255);
	background-image: none;
}

:root{
--btn-default-bgcolor:rgb(0,0,0);
}
:root{
--btn-default-bgcolor-hover:rgb(0,0,0);
}
:root{
--btn-accented-bgcolor:rgb(0,0,0);
}
:root{
--btn-accented-bgcolor-hover:rgb(0,0,0);
}
:root{
--notices-success-bg:#459647;
}
:root{
--notices-success-color:#fff;
}
:root{
--notices-warning-bg:#E0B252;
}
:root{
--notices-warning-color:#fff;
}
	:root{
					
			
							--wd-form-brd-radius: 0px;
					
					--wd-form-brd-width: 1px;
		
					--btn-default-color: #fff;
		
					--btn-default-color-hover: #fff;
		
					--btn-accented-color: #fff;
		
					--btn-accented-color-hover: #fff;
		
					
			
							--btn-default-brd-radius: 35px;
				--btn-default-box-shadow: none;
				--btn-default-box-shadow-hover: none;
			
					
					
			
							--btn-accented-brd-radius: 35px;
				--btn-accented-box-shadow: none;
				--btn-accented-box-shadow-hover: none;
			
					
							
					--wd-brd-radius: 0px;
			}

	
	
			@media (min-width: 1025px) {
			.whb-boxed:not(.whb-sticked):not(.whb-full-width) .whb-main-header {
				max-width: 1185px;
			}
		}

		.container {
			max-width: 1215px;
		}

		:root{
			--wd-container-width: 1215px;
		}
	
			.elementor-section.wd-section-stretch > .elementor-column-gap-no {
			max-width: 1185px;
		}
		.elementor-section.wd-section-stretch > .elementor-column-gap-narrow {
			max-width: 1195px;
		}
		.elementor-section.wd-section-stretch > .elementor-column-gap-default {
			max-width: 1205px;
		}
		.elementor-section.wd-section-stretch > .elementor-column-gap-extended {
			max-width: 1215px;
		}
		.elementor-section.wd-section-stretch > .elementor-column-gap-wide {
			max-width: 1225px;
		}
		.elementor-section.wd-section-stretch > .elementor-column-gap-wider {
			max-width: 1245px;
		}
		@media (min-width: 1232px) {
			.platform-Windows .wd-section-stretch > .elementor-container {
				margin-left: auto;
				margin-right: auto;
			}
		}
		@media (min-width: 1215px) {
			html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
				margin-left: auto;
				margin-right: auto;
			}
		}
	
	
	
	
	
			.woodmart-woocommerce-layered-nav .wd-scroll-content {
			max-height: 280px;
		}
	
	
	body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {

									--wd-form-color: rgb(132,132,132);
					
							
									--wd-form-brd-color: rgb(217,217,217);
					
							
									--wd-form-bg: rgb(255,255,255);
						}
.woocommerce.cart-content-wrapper.row .datespophtmlwrap{
	flex: 0 0 100%; 
}
.product-label.featured {
	background-color: #e88637;
}
.product-label.new{
		background-color: #577c80;
}
.page-title-default {
	background: rgba(0,0,0,0.35);
	background-size:cover;
	padding:50px;
}
span.tab-label{
color:#fff;
}
#order_data .order_data_column div.address[style*="display: none"] + div.edit_address {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#billing_phone_field, #shipping_phone_field, #shipping_country_field{
	clear:none!important;
}
#billing_company_field, #shipping_company_field {
    display: flow-root!important;
}
#billing_postcode_field label, #billing_first_name_field label, #billing_last_name_field label, #billing_company_field label, #billing_address_1_field label, #billing_city_field label, #billing_state_field label, #billing_phone_field label, #billing_email_field label{
	display:none;
}
#customer_details .woocommerce-billing-fields h3,#order_review_heading, #customer_details .woocommerce-additional-fields h3{
	font-size:18px!important;
	color:#545454;
	text-transform:capitalize;
}
#bb_dates_panel_before .bb_dates_panel{
	margin-bottom:20px;
}
#bb_dates_panel_before .bb_dates_panel div{
	font-size:13px;
}
.buy_now_price {
    display: none;
}
/* =========================================================
   WoodMart header — styled to match the reference header
   Paste into: Theme Settings > Custom CSS (Global)
   or Appearance > Customize > Additional CSS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root {
  --hmd-yellow: #F0D830;
  --hmd-ink: #110F0C;
  --hmd-nav: #413F3C;
  --hmd-active-bg: #F2F0EA;
  --hmd-header-bg: #FEFDFC;
  --hmd-border: #DFDED8;
  --hmd-font-heading: 'Barlow Condensed', 'Barlow', ui-sans-serif, sans-serif;
  --hmd-font-body: 'Barlow', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Header bar ---------- */
.whb-header .whb-general-header,
.whb-header .whb-main-header .whb-general-header {
  background-color: var(--hmd-header-bg) !important;
  border-bottom: 1px solid var(--hmd-border) !important;
}
/* Content width (the reference uses a 1216px container) */
.whb-general-header .container {
  max-width: 1216px;
  padding-left: 20px;
  padding-right: 20px;
}

/* ---------- Logo (Text/HTML element) ----------
   Tailwind classes from the original markup, converted:
   gap-2.5 = 10px | h-11 w-11 = 44px | text-lg = 18px | sm:text-xl = 20px
   leading-none = 1 | font-display = Barlow Condensed | truncate */
.hmd-logo {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none !important;
  color: var(--hmd-ink) !important;
}
.hmd-logo img {
  display: block;
  width: 44px !important;
  height: 44px !important;
  max-width: none !important;
  flex-shrink: 0;
  object-fit: contain;
}
.hmd-logo span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--hmd-font-heading) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--hmd-ink) !important;
}
@media (min-width: 640px) {
  .hmd-logo span { font-size: 20px !important; }
}
.hmd-logo:hover,
.hmd-logo:hover span { color: var(--hmd-ink) !important; opacity: 1; }

/* ---------- Main navigation ---------- */
.whb-header .wd-nav-main,
.whb-header .wd-header-nav .wd-nav {
  gap: 4px;
}
.whb-header .wd-nav-main > li > a,
.whb-header .wd-header-nav .wd-nav > li > a {
  font-family: var(--hmd-font-heading) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--hmd-nav) !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 4px;
  transition: background-color .15s, color .15s;
}
/* Hover + active page: light warm pill */
.whb-header .wd-nav-main > li > a:hover,
.whb-header .wd-header-nav .wd-nav > li > a:hover,
.whb-header .wd-nav-main > li.current-menu-item > a,
.whb-header .wd-nav-main > li.current-menu-ancestor > a,
.whb-header .wd-header-nav .wd-nav > li.current-menu-item > a {
  background-color: var(--hmd-active-bg) !important;
  color: var(--hmd-ink) !important;
}
/* Remove WoodMart's default underline / hover decorations */
.whb-header .wd-nav[class*="wd-style-"] > li > a:after,
.whb-header .wd-nav[class*="wd-style-"] > li > a:before {
  display: none !important;
}

/* ---------- Phone button (yellow) ----------
   Use the header builder "Button" element, text "(352) 890-2790",
   link "tel:3528902790", and add the CSS class "hmd-phone-btn". */
.whb-header .hmd-phone-btn .btn,
.whb-header .hmd-phone-btn a.btn,
.whb-header a.hmd-phone-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  margin-left: 12px;
  background-color: var(--hmd-yellow) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--hmd-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--hmd-ink) !important;
  transition: filter .15s;
}
.whb-header .hmd-phone-btn .btn:hover,
.whb-header a.hmd-phone-btn:hover {
  filter: brightness(.95);
  color: var(--hmd-ink) !important;
}
/* Phone icon before the number (inline SVG, inherits text color) */
.whb-header .hmd-phone-btn .btn::before,
.whb-header a.hmd-phone-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Mobile header ---------- */
@media (max-width: 1024px) {
}

/* ---------- Mobile menu (side panel) ---------- */
.mobile-nav .wd-nav-mobile > li > a {
  font-family: var(--hmd-font-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--hmd-nav) !important;
}
.mobile-nav .wd-nav-mobile > li.current-menu-item > a {
  background-color: var(--hmd-active-bg) !important;
  color: var(--hmd-ink) !important;
}
/* =========================================================
   Reliant Dumpsters — 2. Booking calendar (date fields)

   Applies to every single product page, not one category.
   Standalone: paste on its own or alongside the zip code and add-on files.

   Step numbers count themselves. Each card increments a shared
   counter in page order, so if this is the only card it shows 1,
   and if the zip card is missing the calendar becomes 1.
   ========================================================= */

/* ---------- Theme colors ----------
   Every color below reads a Woodmart theme option first and falls back
   to a fixed value only if that option is missing, so changing the
   theme's colors changes these cards too. To pin a color regardless of
   the theme, replace the whole var(...) with a plain value.

   Tints and shades are derived from the accent with color-mix(), so
   changing the theme color changes the chips and prices with it. */
.single-product-page {
  /* Accent = Woodmart's ALTERNATIVE color (your yellow). It carries the
     highlights: step badges, the selected add-on row, prices.
     Secondary = Woodmart's PRIMARY color (your blue). It carries the
     actions: the Apply button, focus rings, the Reset link.
     To swap the two roles, swap the two var() names below and swap the
     --rd-on-* values with them (dark text on yellow, white on blue). */
  --rd-accent: var(--wd-alternative-color, #F5B400);
  --rd-on-accent: #1c1f26;
  --rd-secondary: var(--wd-primary-color, #0043CA);
  --rd-on-secondary: #fff;

  --rd-ink: var(--wd-title-color, #1c1f26);
  --rd-text: var(--wd-text-color, #6b707a);

  /* Derived shades. The plain value on the first line is a fallback for
     very old browsers; the color-mix line below replaces it everywhere
     color-mix is supported (all current browsers). The mix percentages
     are set so the price text stays readable (about 5:1) even with a
     light accent such as yellow. */
  --rd-accent-soft: #FFF4D6;
  --rd-accent-soft: color-mix(in srgb, var(--rd-accent) 14%, #fff);
  --rd-accent-tint: #FFFBEF;
  --rd-accent-tint: color-mix(in srgb, var(--rd-accent) 7%, #fff);
  --rd-accent-text: #8a6100;
  --rd-accent-text: color-mix(in srgb, var(--rd-accent) 50%, #000);
  --rd-muted: #7c828d;
  --rd-muted: color-mix(in srgb, var(--rd-text) 92%, #fff);

  --rd-card-bg: var(--wd-main-bgcolor, #fff);
  --rd-line: var(--wd-border-color, #e6e8ec);
  --rd-field: var(--wd-form-brd-color, var(--wd-border-color, #d9dce2));
  --rd-field-hover: #b9bec8;
  --rd-field-hover: color-mix(in srgb, var(--rd-field) 55%, #000);

  --rd-radius: 14px;
  --rd-field-radius: var(--wd-form-brd-radius, 10px);
}

/* Step numbering. Each section increments a shared counter, so the
   numbers follow whichever cards are actually on the page: drop this
   file and the others renumber themselves. */
.single-product-page form.cart {
  counter-reset: rd-step;
  display: block;
}
/* ---------- Card shell + step title ----------
   The plugin gives this section no heading, so the title text
   below is added by CSS. Edit it in `content:` to rename the step. */
.single-product-page #tm-extra-product-options #tm-epo-field-0 {
  counter-increment: rd-step;
  position: relative;
  background: var(--rd-card-bg) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius) !important;
  box-shadow: none !important;
  padding: 20px 22px;
  margin: 0 0 14px !important;
}
.single-product-page #tm-extra-product-options #tm-epo-field-0::before {
  content: "Pick your dates";
  position: absolute;
  top: 20px;
  left: 58px;
  line-height: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-ink);
  margin: 0;
}
.single-product-page #tm-extra-product-options #tm-epo-field-0::after {
  content: counter(rd-step);
  position: absolute;
  top: 20px;
  left: 22px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rd-accent);
  color: var(--rd-on-accent);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Two columns ----------
   Another rule on the page (li#tm-epo-field-0) sets a 4-column grid
   of `0px 1fr 0px 1fr`, which pushes the end date onto its own row.
   These rules override it with two equal columns. */
.single-product-page #tm-extra-product-options #tm-extra-product-options-fields {
  margin: 0;
  padding: 0;
  list-style: none;
}
.single-product-page #tm-extra-product-options #tm-epo-field-0 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-top: 62px !important;  /* room for the step title */
}
.single-product-page #tm-extra-product-options #tm-epo-field-0 > .calendar_single_popup {
  grid-column: 1 / -1 !important;
}
.single-product-page #tm-extra-product-options #tm-epo-field-0 .cpfclear {
  display: none !important;
}
.single-product-page #tm-extra-product-options #tm-epo-field-0 > .start_end_panel {
  display: block !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  float: none !important;
  position: static !important;   /* keeps Reset pinned to the card */
  padding: 0 !important;
  margin: 0 !important;
  font-size: 15px;
}
.single-product-page #tm-extra-product-options #tm-epo-field-0 .start_end_panel > .tm-cell {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Keep the plugin's hidden duplicate date fields hidden.
   Without this, "Start Date" and "End Date" appear as extra boxes. */
.single-product-page #tm-extra-product-options .start_end_panel .start_datetime_id-div,
.single-product-page #tm-extra-product-options .start_end_panel .end_datetime_id-div,
.single-product-page #tm-extra-product-options .start_end_panel > .tm-cell[style*="display: none"],
.single-product-page #tm-extra-product-options .start_end_panel > .tm-cell[style*="display:none"] {
  display: none !important;
}

/* ---------- Field labels ---------- */
.single-product-page #tm-extra-product-options .start_end_panel .tm-epo-field-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--rd-muted);
  margin: 0 0 6px !important;
  padding: 0 !important;
}
.single-product-page #tm-extra-product-options .start_end_panel .tm-extra-product-options-container,
.single-product-page #tm-extra-product-options .start_end_panel .tmcp-ul-wrap,
.single-product-page #tm-extra-product-options .start_end_panel .tmcp-field-wrap {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  list-style: none;
}
.single-product-page #tm-extra-product-options .start_end_panel .tmcp-field-wrap,
.single-product-page #tm-extra-product-options .start_end_panel .tmcp-field-wrap label {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ---------- Date field + calendar icon ----------
   The field itself; the icon is drawn just below so it can follow
   the theme color. */
.single-product-page #tm-extra-product-options .start_end_panel input.flatpickr-input {
  display: block !important;
  box-sizing: border-box !important;   /* keeps the field inside its column */
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  border: 1px solid var(--rd-field) !important;
  border-radius: var(--rd-field-radius) !important;
  box-shadow: none !important;
  background: var(--rd-card-bg) !important;
  padding: 0 44px 0 14px !important;
  font-size: 15px;
  color: var(--rd-ink);
  cursor: pointer;
}
.single-product-page #tm-extra-product-options .start_end_panel label:hover input.flatpickr-input {
  border-color: var(--rd-field-hover) !important;
}
.single-product-page #tm-extra-product-options .start_end_panel input.flatpickr-input.active,
.single-product-page #tm-extra-product-options .start_end_panel input.flatpickr-input:focus {
  border-color: var(--rd-secondary) !important;
}

/* ---------- Calendar icon ----------
   Drawn as a masked shape rather than a colored image, so it takes its
   color from the theme instead of a fixed gray. It ignores clicks, so
   the click target below still covers the whole field. */
.single-product-page #tm-extra-product-options .start_end_panel .tmcp-field-wrap label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-color: var(--rd-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  pointer-events: none;
  z-index: 1;
}
.single-product-page #tm-extra-product-options .start_end_panel .tmcp-field-wrap label:hover::after {
  background-color: var(--rd-ink);
}

/* ---------- Click target ----------
   The plugin opens the calendar only from its own link, not the input.
   Stretching that link over the whole field makes a click anywhere on
   the date box open the calendar. It is invisible; the icon above shows. */
.single-product-page #tm-extra-product-options .start_end_panel a.bb-cal-toggle {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
  z-index: 2;
  cursor: pointer;
}
.single-product-page #tm-extra-product-options .start_end_panel a.bb-cal-toggle i,
.single-product-page #tm-extra-product-options .start_end_panel a.bb-cal-toggle svg {
  opacity: 0 !important;
}
.single-product-page #tm-extra-product-options .start_end_panel a.bb-cal-toggle:focus {
  outline: none !important;
}
.single-product-page #tm-extra-product-options .start_end_panel a.bb-cal-toggle:focus-visible {
  outline: 2px solid var(--rd-secondary) !important;
  outline-offset: 2px;
  border-radius: var(--rd-field-radius) !important;
}

/* ---------- Reset link ---------- */
.single-product-page #tm-extra-product-options #tm-epo-field-0 .clear_all_div {
  position: absolute !important;
  top: 24px;
  right: 22px;
  line-height: 18px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3;
}
.single-product-page #tm-extra-product-options #tm-epo-field-0 .bb-clear-all-button {
  font-size: 13px;
  color: var(--rd-secondary);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Mobile: dates stack ---------- */
@media (max-width: 768px) {
  .single-product-page #tm-extra-product-options #tm-epo-field-0 {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 12px !important;
  }
  .single-product-page #tm-extra-product-options #tm-epo-field-0 > .calendar_single_popup {
    margin-bottom: -12px !important;
  }
}
/* =========================================================
   Reliant Dumpsters — 3. Add-ons

   Applies to every single product page, not one category.
   Standalone: paste on its own or alongside the zip code and calendar files.

   Step numbers count themselves. Each card increments a shared
   counter in page order, so if this is the only card it shows 1,
   and if the zip card is missing the calendar becomes 1.
   ========================================================= */

/* ---------- Theme colors ----------
   Every color below reads a Woodmart theme option first and falls back
   to a fixed value only if that option is missing, so changing the
   theme's colors changes these cards too. To pin a color regardless of
   the theme, replace the whole var(...) with a plain value.

   Tints and shades are derived from the accent with color-mix(), so
   changing the theme color changes the chips and prices with it. */
.single-product-page {
  /* Accent = Woodmart's ALTERNATIVE color (your yellow). It carries the
     highlights: step badges, the selected add-on row, prices.
     Secondary = Woodmart's PRIMARY color (your blue). It carries the
     actions: the Apply button, focus rings, the Reset link.
     To swap the two roles, swap the two var() names below and swap the
     --rd-on-* values with them (dark text on yellow, white on blue). */
  --rd-accent: var(--wd-alternative-color, #F5B400);
  --rd-on-accent: #1c1f26;
  --rd-secondary: var(--wd-primary-color, #0043CA);
  --rd-on-secondary: #fff;

  --rd-ink: var(--wd-title-color, #1c1f26);
  --rd-text: var(--wd-text-color, #6b707a);

  /* Derived shades. The plain value on the first line is a fallback for
     very old browsers; the color-mix line below replaces it everywhere
     color-mix is supported (all current browsers). The mix percentages
     are set so the price text stays readable (about 5:1) even with a
     light accent such as yellow. */
  --rd-accent-soft: #FFF4D6;
  --rd-accent-soft: color-mix(in srgb, var(--rd-accent) 14%, #fff);
  --rd-accent-tint: #FFFBEF;
  --rd-accent-tint: color-mix(in srgb, var(--rd-accent) 7%, #fff);
  --rd-accent-text: #8a6100;
  --rd-accent-text: color-mix(in srgb, var(--rd-accent) 50%, #000);
  --rd-muted: #7c828d;
  --rd-muted: color-mix(in srgb, var(--rd-text) 92%, #fff);

  --rd-card-bg: var(--wd-main-bgcolor, #fff);
  --rd-line: var(--wd-border-color, #e6e8ec);
  --rd-field: var(--wd-form-brd-color, var(--wd-border-color, #d9dce2));
  --rd-field-hover: #b9bec8;
  --rd-field-hover: color-mix(in srgb, var(--rd-field) 55%, #000);

  --rd-radius: 14px;
  --rd-field-radius: var(--wd-form-brd-radius, 10px);
}

/* Step numbering. Each section increments a shared counter, so the
   numbers follow whichever cards are actually on the page: drop this
   file and the others renumber themselves. */
.single-product-page form.cart {
  counter-reset: rd-step;
  display: block;
}
/* ---------- Card shell + step title ---------- */

/* Card shell */
.single-product-page #tm-epo-field-1 .tm-box {
  position: relative;
  box-sizing: border-box;
  display: block !important;
  width: 100% !important;
  background: var(--rd-card-bg) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius) !important;
  box-shadow: none !important;
  padding: 20px 22px;
  margin: 0 0 14px !important;
}

/* Step title + yellow number badge */
.single-product-page #tm-epo-field-1 {
  counter-increment: rd-step;
}
.single-product-page #tm-epo-field-1 .cpf-type-checkbox > .tm-epo-field-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-ink);
  margin: 0 0 14px;
}
.single-product-page #tm-epo-field-1 .cpf-type-checkbox > .tm-epo-field-label::before {
  content: counter(rd-step);
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rd-accent);
  color: var(--rd-on-accent);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Strip the plugin's own spacing ---------- */
.single-product-page #tm-epo-field-1 > .cpf-section,
.single-product-page #tm-epo-field-1 .cpf-type-checkbox {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0;
  margin: 0;
}
.single-product-page #tm-epo-field-1 .tm_padding {
  display: none;
}
.single-product-page #tm-epo-field-1 .tmcp-ul-wrap {
  margin: 0;
  padding: 0;
}

/* ---------- Option row ---------- */
.single-product-page #tm-epo-field-1 .tmcp-field-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  border: 1.5px solid var(--rd-line);
  border-radius: 10px;
  padding: 14px;
  margin: 0;
  transition: border-color 0.15s, background-color 0.15s;
}
.single-product-page #tm-epo-field-1 .tmcp-field-wrap + .tmcp-field-wrap {
  margin-top: 10px;
}
/* Selected row turns yellow */
.single-product-page #tm-epo-field-1 .tmcp-field-wrap:has(input:checked) {
  border-color: var(--rd-accent);
  background: var(--rd-accent-tint);
}
.single-product-page #tm-epo-field-1 .tmcp-field-wrap > label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  flex: 1;
  cursor: pointer;
}
.single-product-page #tm-epo-field-1 .tm-label {
  font-weight: 600;
  color: var(--rd-ink);
}

/* Keyboard focus ring, in the theme's primary color */
.single-product-page #tm-epo-field-1 .tmcp-field-wrap:focus-within {
  outline: 2px solid var(--rd-secondary);
  outline-offset: 2px;
}

/* ---------- Checkbox ---------- */
.single-product-page #tm-epo-field-1 .tm-epo-style.round {
  border-radius: 6px !important;
  border-color: var(--rd-field) !important;
}
.single-product-page #tm-epo-field-1 input:checked + .tm-epo-style.round {
  background: var(--rd-accent) !important;
  border-color: var(--rd-accent) !important;
}

/* ---------- Price ---------- */
.single-product-page #tm-epo-field-1 .tc-price {
  font-weight: 700;
  color: var(--rd-accent-text);
  white-space: nowrap;
}
.single-product-page #tm-epo-field-1 .tc-price .amount::before {
  content: "+";
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .single-product-page #tm-epo-field-1 .tmcp-field-wrap {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
.tm-linked-product-thumb {
    width: 32px;
    margin-left: 15px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}