/* Hide original dropdowns */
.variations select {
  display: none !important;
  visibility: hidden !important;
}

.variations td.label,
.variations th.label {
  display: block !important;
  float: none !important;
  width: 100% !important;
  border: none !important;
  padding: 0 0 4px 0 !important;
  margin: 10px 0 0px 0 !important;
}

.variations td.value {
  display: block !important;
  width: 100% !important;
}

/* SIZE pills */
.swui-size-group {
  display: flex;
  flex-wrap: wrap;
  margin: 8px 0;
}

.breadcrumbs a {
  color: #666666 !important;
}

.swui-size-btn {
  background: #e4e2de;
  color: #7e7e7e;
  font-family: neuville, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 18px 8px;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer;
  transition: all .2s ease;
  margin-right: 8px;
  margin-bottom: 6px;
}

.swui-size-btn:hover,
.swui-size-btn.is-selected {
  background: #d9d1c4;
}

/* COLOR swatches (same size as size buttons) */
.swui-color-group {
  display: flex;
  flex-wrap: wrap;
  margin: 8px 0;
  gap: 8px;
}
.swui-color-btn {
  width: 50px;
  height: 50px;
  border-radius: 8px !important;
  border: 0.5px solid #aaa !important;
  cursor: pointer;
  transition: all .2s ease;
  margin-right: 0px;
  margin-bottom: 0px;
}

.swui-color-btn.is-selected {
  border: 2px solid #111;
}
.swui-color-btn:hover {
  transform: scale(1.05);
}
.swui-color-btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Custom tooltip styling */
.swui-size-btn,
.swui-color-btn {
  position: relative;
}

.btn-tooltip {
  position: absolute;
  bottom: 120%; /* position tooltip above button */
  left: 50%;
  transform: translateX(-50%);
  background: #5b5b5b;  /* earthy Campking grey */
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  font-family: 'neuville', sans-serif;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 99;
}

/* Tooltip arrow */
.btn-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #5b5b5b transparent transparent transparent;
}

/* Show tooltip on hover */
.swui-size-btn:hover .btn-tooltip,
.swui-color-btn:hover .btn-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.swui-size-btn .btn-text {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 12px;
  line-height: 1.2;
}

.size-line {
  display: grid;
  grid-template-columns: auto 1fr; /* auto = shrink to content (L/W/H), 1fr = rest */
  width: 100%;
}

.size-line .dim-label {
  font-weight: 600;
  text-align: center;   /* still center inside its own (auto) box */
  min-width: 1.5em;     /* keeps L/W/H column consistent width */
}

.size-line .dim-value {
  font-weight: 400;
  text-align: left;    /* values flush right */
}

.size-area {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.swui-size-title {
  font-family: 'neuville', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #5b5b5b;
  margin: 10px 0 6px 0;
}

.swui-size-subtitle {
  font-weight: 400;
  margin: 10px 0 6px;
  color: #8f8f8e;
  font-family: neuville, sans-serif;
  font-size: 11px;
}

.swui-size-separator {
  border: 0;
  border-top: 1.5px dotted #000;
  margin: 12px 0;
}

/* Hide variation price under swatches */
.woocommerce-variation-price,
.single_variation .price {
  display: none !important;
}

/* Hide duplicate range price (the second/top one) */
.woocommerce-product-details__short-description + .price {
  display: none !important;
}

.swui-size-btn.is-selected,
.swui-color-btn.is-selected,
.swui-pod-btn.is-selected {
  outline: 3px solid #c9cab9;
  outline-offset: 1.5px;
}


.swui-size-btn.is-selected.animate,
.swui-color-btn.is-selected.animate {
  animation: pulse 0.4s ease;
}

@keyframes pulse {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Hide Flatsome's default variable range price */
.product-page-price {
  display: none !important;
}

.campking-main-price .price,
.campking-main-price .woocommerce-Price-amount {
  font-size: 24px !important;
  color: #82a5e4 !important;
  font-weight: 600;
}

/* Pod Type (specific changes only for Pod Type swatches) */
.swui-pod-group {
  display: flex;
  flex-wrap: wrap;
  margin: 8px 0;
  gap: 1px;
}

.swui-pod-btn {
  background: #e4e2de;
  color: #7e7e7e;
  font-family: neuville, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer;
  transition: all .2s ease;
}

.swui-pod-btn:hover,
.swui-pod-btn.is-selected {
  background: #d9d1c4;
}

/* Custom tooltip for Pod Type */
.swui-pod-btn .btn-tooltip {
  position: absolute;
  bottom: 120%; /* position tooltip above button */
  left: 50%;
  transform: translateX(-50%);
  background: #5b5b5b;  /* earthy Campking grey */
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  font-family: 'neuville', sans-serif;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 99;
}

.swui-pod-btn:hover .btn-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}


.swui-size-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  background: #f2f2f2;
}


.campking-main-price {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.campking-main-price .regular-price del {
  color: #999;
  font-size: 22px;
  text-decoration: line-through;
}

.campking-main-price .sale-price {
  color: #82a5e4;
  font-size: 26px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .campking-main-price .sale-price {
    font-size: 22px;
  }
}

