/*
Theme Name: StarMap Creations
Description: Theme for Stapmap Creations website
Version: 1.0.0
Author: 
Author URI: 
Theme URI: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: Divi
*/

/*MObile Overflow fix*/
@media screen and (max-width: 768px) {
    /* 1. Force the WooCommerce variations table to behave like a standard block layout */
    .variations_form table.variations,
    .variations_form table.variations tbody,
    .variations_form table.variations tr,
	.variations_form table#starmap-fields-table,
    .variations_form table#starmap-fields-table tbody,
    .variations_form table#starmap-fields-table tr{
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Stack the label (th) and the input selection cell (td) vertically */
    .variations_form table.variations th,
    .variations_form table.variations td,
	.variations_form table#starmap-fields-table th,
    .variations_form table#starmap-fields-table td{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important; /* Fixes label alignment when stacked */
        padding: 4px 0 !important;   /* Cleaner mobile spacing spacing */
    }

    /* 3. Give the Google Web Component a strict bounding box to adapt to */
    gmp-place-autocomplete#starmap-location-search {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/*---Starmap product variation selector styling ---*/
.starmap-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
}
.starmap-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.35em 0.75em;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.starmap-radio-option:has(input:checked) {
  border-color: #333;
  background: #f5f5f5;
}
.starmap-radio-option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.starmap-radio-option input[type="radio"],
.starmap-radio-option input[type="checkbox"] {
  margin: 0;
}
/*---END Starmap product variation selector styling ---*/

.input-container, .input-container div.autocomplete-icon{flex-wrap: wrap!important;}