/**
 * Rebillia Subscribe & Save — Subscription Selector
 *
 * Variables mirror WooCommerce's own CSS custom-property names where they
 * exist so the selector inherits the active theme's brand colours automatically.
 * Hard-coded fallbacks ensure it looks great on any theme that does not yet
 * define those properties.
 *
 * @package Rebillia_WooCommerce
 */

/* -------------------------------------------------------------------------
 * Custom properties (scoped to the component)
 * ---------------------------------------------------------------------- */
.rebillia-subscription-selector {
	--rb-accent:        var( --wp--preset--color--primary, #7f54b3 );
	--rb-accent-light:  color-mix( in srgb, var( --rb-accent ) 10%, transparent );
	--rb-border:        #d8d8d8;
	--rb-border-radius: 6px;
	--rb-bg:            #ffffff;
	--rb-text:          var( --wp--preset--color--contrast, #3c3c3c );
	--rb-text-muted:    #717171;
	--rb-trial-bg:      #e8f5e9;
	--rb-trial-color:   #2e7d32;
	--rb-gap:           0.5rem;
	--rb-transition:    0.15s ease;

	margin-bottom: 1.25em;
	font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
 * Section title
 * ---------------------------------------------------------------------- */
.rebillia-subscription-selector__title {
	margin: 0 0 0.6em;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var( --rb-text );
	letter-spacing: 0.01em;
}

/* -------------------------------------------------------------------------
 * Options wrapper — vertical stack, tight on mobile
 * ---------------------------------------------------------------------- */
.rebillia-subscription-selector__options {
	display: flex;
	flex-direction: column;
	gap: var( --rb-gap );
}

/* -------------------------------------------------------------------------
 * Individual option card
 * ---------------------------------------------------------------------- */
.rebillia-option {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.75em 1em;
	border: 1.5px solid var( --rb-border );
	border-radius: var( --rb-border-radius );
	background: var( --rb-bg );
	cursor: pointer;
	transition:
		border-color var( --rb-transition ),
		background   var( --rb-transition ),
		box-shadow   var( --rb-transition );
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.rebillia-option:hover {
	border-color: var( --rb-accent );
	box-shadow: 0 0 0 3px var( --rb-accent-light );
}

/* Selected state */
.rebillia-option.is-selected {
	border-color: var( --rb-accent );
	background: var( --rb-accent-light );
	box-shadow: 0 0 0 3px var( --rb-accent-light );
}

/* -------------------------------------------------------------------------
 * Native radio — hidden, replaced by custom indicator
 * ---------------------------------------------------------------------- */
.rebillia-option__radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Custom radio dot */
.rebillia-option::before {
	content: '';
	flex-shrink: 0;
	width: 1.125em;
	height: 1.125em;
	border: 2px solid var( --rb-border );
	border-radius: 50%;
	background: #fff;
	transition:
		border-color var( --rb-transition ),
		background   var( --rb-transition );
	box-sizing: border-box;
}

.rebillia-option:hover::before,
.rebillia-option.is-selected::before {
	border-color: var( --rb-accent );
}

.rebillia-option.is-selected::before {
	background: radial-gradient( circle, var( --rb-accent ) 45%, #fff 46% );
}

/* -------------------------------------------------------------------------
 * Content area (label row + price row)
 * ---------------------------------------------------------------------- */
.rebillia-option__content {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	flex-wrap: wrap;
}

/* Label (left side) */
.rebillia-option__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
	font-weight: 500;
	color: var( --rb-text );
	line-height: 1.35;
}

/* Price (right side) */
.rebillia-option__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	color: var( --rb-text );
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.3;
}

.rebillia-option__period {
	font-weight: 400;
	font-size: 0.8125em;
	color: var( --rb-text-muted );
}

/* -------------------------------------------------------------------------
 * Trial badge
 * ---------------------------------------------------------------------- */
.rebillia-option__trial {
	display: inline-flex;
	align-items: center;
	padding: 0.15em 0.55em;
	border-radius: 100px;
	background: var( --rb-trial-bg );
	color: var( --rb-trial-color );
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Signup fee note
 * ---------------------------------------------------------------------- */
.rebillia-option__signup-fee {
	font-size: 0.75em;
	font-weight: 400;
	color: var( --rb-text-muted );
}

/* -------------------------------------------------------------------------
 * Period suffix injected by JS into the main WC price display
 * ---------------------------------------------------------------------- */
.rebillia-main-period {
	font-size: 0.8125em;
	font-weight: 400;
	color: var( --rb-text-muted );
	margin-left: 0.2em;
}

/* -------------------------------------------------------------------------
 * Mobile — stack price below label when viewport is narrow
 * ---------------------------------------------------------------------- */
@media ( max-width: 480px ) {
	.rebillia-option__content {
		flex-direction: column;
		align-items: flex-start;
	}

	.rebillia-option__price {
		align-items: flex-start;
		text-align: left;
	}
}

/* -------------------------------------------------------------------------
 * Cart / checkout subscription notices
 * ---------------------------------------------------------------------- */
.rebillia-recurring-notice-cell {
	padding-top: 0 !important;
	border-top: none !important;
}

.rebillia-recurring-notice {
	margin: 0.75em 0 0;
}

.rebillia-subscription-terms {
	margin: 1em 0 0;
	font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
 * My Account → Add Payment Method (hosted fields only)
 * ---------------------------------------------------------------------- */
.woocommerce-add-payment-method #payment .payment_box {
	padding: 1em 0;
}

.woocommerce-add-payment-method #rebillia-hosted-fields-container {
	margin: 0;
}