/* --- General Layout Styles --- */
.selling_plan_widget_integration {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 20px;
}

.selling_plan_widget_integration p {
  line-height: normal;
  margin: 0;
}

.selling_plan_widget_integration--hidden {
  display: none;
}

#subscription-widget p.purchase-option-title {
  color: var(--purchase-title-color);
  font-size: var(--purchase-title-font-size);
}

/* --- Radio Styles --- */
#subscription-widget .radio {
  display: block;
  padding: var(--content-padding);
  border: var(--content-border-thickness) solid transparent;
  border-radius: var(--content-border-radius);
  background-color: var(--background-color);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

#subscription-widget .radio.square, 
#subscription-widget .subscription-features.squared {
  border-radius: 0;
}

#subscription-widget .radio.rounded,
#subscription-widget .subscription-features.rounded {
  border-radius: var(--content-border-radius);
}

#subscription-widget .radio.selected {
  border-color: var(--selected-border-color);
}

/* --- Radio Content --- */
#subscription-widget .radio-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#subscription-widget .radio-content .title-price {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

#subscription-widget .title-with-radio {
  display: flex;
  align-items: center;
  gap: 8px;
}

#subscription-widget .title-with-radio input {
  margin: 0;
}

#subscription-widget h6, 
#subscription-widget .plan-price {
  font-size: var(--content-heading-font-size);
  margin: 0;
  line-height: normal;
  font-weight: var(--content-heading-font-weight);
  color: var(--content-font-color);
}

#subscription-widget p, 
#subscription-widget ul li,
#subscription-widget .frequency-radio span {
  font-size: var(--content-font-size);
  color: var(--content-font-color);
}

#subscription-widget .radio-header p,
#subscription-widget .radio-content p {
  margin: 0;
}

/* --- Price Styles --- */
#subscription-widget .price {
  font-size: 18px;
  font-weight: bold;
}

#subscription-widget .old-price {
  text-decoration: line-through;
  color: #777;
}

/* --- One-Time Purchase and Subscription Radios --- */
#subscription-widget .one-time-radio, 
#subscription-widget .subscription-radio {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Features Section --- */
#subscription-widget .features {
  margin-top: 8px;
  width: 100%;
  text-align: var(--text-alignment);
}

#subscription-widget .features ul {
  list-style-type: disc;
  margin: 0;
  padding-left: 30px;
}

/* --- Selling Plan Options --- */
#subscription-widget .selling-plan-options {
  margin-top: 8px;
  width: 100%;
}

#subscription-widget .selling-plan-options select,
#subscription-widget .selling-plan-options .frequency-radio {
  width: 100%;
}

#subscription-widget .selling-plan-options .frequency-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

#subscription-widget .selling-plan-options .frequency-radio input {
  margin: 0;
}

/* --- Frequency Radio Layout --- */
#subscription-widget .frequency-radios.stacked .frequency-radio {
  display: block;
}

#subscription-widget .frequency-radios.flex {
  display: flex;
  gap: 16px;
}

/* --- Dropdown Customization --- */
#subscription-widget .selling-plan-options select {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-family: inherit;
  color: inherit;
  font-size: inherit;
}

#subscription-widget .dropdown-label {
  font-size: var(--content-font-size);
  margin-bottom: 5px;
  color: var(--content-font-color);
}

/* --- Frequency Buttons --- */
#subscription-widget .frequency-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#subscription-widget .frequency-button {
  position: relative;
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#subscription-widget .frequency-button input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

#subscription-widget .frequency-button span {
  display: block;
}

#subscription-widget .frequency-button input[type="radio"]:checked + span {
  font-weight: bold;
}

#subscription-widget .frequency-button:hover,
#subscription-widget .frequency-button input[type="radio"]:checked + span {
  background-color: #f0f0f0;
  border-color: #999;
}

/* --- Radio Button Styles --- */
#subscription-widget input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--radio-button-size);
  height: var(--radio-button-size);
  border: 2px solid var(--radio-button-color);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  position: relative;
  transition: all 0.2s ease-in-out;
}

#subscription-widget input[type="radio"]:checked {
  background-color: transparent;
}

#subscription-widget input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--radio-button-size) / 2);
  height: calc(var(--radio-button-size) / 2);
  background-color: var(--radio-button-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease-in-out;
}

/* --- Focus Styles --- */
#subscription-widget select:focus-visible {
  outline: none;
  box-shadow: none;
  outline-offset: unset;
}

/* --- Tile Styles --- */
#subscription-widget .style-pill .pill-container .pill-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  width: 100%;
}

#subscription-widget .style-pill .pill, 
#subscription-widget .style-pill .pill-content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#subscription-widget .style-pill .pill input[type="radio"] {
  opacity: 0;
  display: none;
}

#subscription-widget .style-pill .pill:hover {
  border-color: var(--selected-border-color);
}

#subscription-widget .subscription-delivery {
  margin: 15px 0 5px 0;
}

#subscription-widget .subscription-features {
  padding: var(--content-padding);
  background-color: var(--background-color);
  margin-top: 15px;
}

#subscription-widget .subscription-features ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 30px;
}

.shopify_subscriptions_warning_banner {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid;
}

.shopify_subscriptions_warning_banner_text {
  margin: 0;
}