/* ==========================================================================
   DELUCKS Testimonials — Frontend Styles
   ========================================================================== */

/* ── CSS Custom Properties ─────────────────────────────────────────────── */
:root {
	--dpc-tmn-star-color:         #f5a623;
	--dpc-tmn-star-empty-color:   #ddd;
	--dpc-tmn-count-color:        inherit;
	--dpc-tmn-count-font-size:    inherit;
	--dpc-tmn-card-bg:            #fff;
	--dpc-tmn-card-text-color:    inherit;
	--dpc-tmn-card-radius:        8px;
	--dpc-tmn-card-shadow:        none;    /* set via Elementor/block if desired */
	--dpc-tmn-card-border-width:  0px;
	--dpc-tmn-card-border-color:  #ddd;
	--dpc-tmn-card-padding:       20px;
	--dpc-tmn-columns:            3;
	--dpc-tmn-gap:                1.25rem;
	--dpc-tmn-avatar-size:        48px;
	--dpc-tmn-score-color:        #333;
	/* Form-specific */
	--dpc-tmn-form-star-size:     2rem;
	--dpc-tmn-form-text-color:    inherit;
	--dpc-tmn-form-text-size:     1rem;
	--dpc-tmn-btn-bg:             #333;
	--dpc-tmn-btn-color:          #fff;
	--dpc-tmn-btn-radius:         4px;
	/* Question text */
	--dpc-tmn-question-size:      1.15em;
	--dpc-tmn-question-weight:    600;
	--dpc-tmn-question-color:     inherit;
	/* Checkbox active */
	--dpc-tmn-checkbox-active-color: #f5a623;
}

/* ── Stars ─────────────────────────────────────────────────────────────── */
.dpc-tmn-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	line-height: 1;
}
.dpc-tmn-star {
	font-style: normal;
	font-size: 1.1em;
}
.dpc-tmn-star--filled {
	color: var(--dpc-tmn-star-color, gold);
}
.dpc-tmn-star--empty {
	color: var(--dpc-tmn-star-empty-color, #ccc);
}
/* Half star: right half shows empty color, left half shows filled color via ::before */
.dpc-tmn-star--half {
	position: relative;
	display: inline-block;
	color: var(--dpc-tmn-star-empty-color, #ccc); /* full star in empty color = right half */
}
.dpc-tmn-star--half::before {
	content: '\2605'; /* ★ */
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	overflow: hidden;
	color: var(--dpc-tmn-star-color, gold); /* left half in filled color */
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.dpc-tmn-card {
	background-color: var(--dpc-tmn-card-bg);
	color:            var(--dpc-tmn-card-text-color);
	border-radius:    var(--dpc-tmn-card-radius);
	box-shadow:       var(--dpc-tmn-card-shadow);
	border:           var(--dpc-tmn-card-border-width) solid var(--dpc-tmn-card-border-color);
	padding:          var(--dpc-tmn-card-padding);
	display:          flex;
	flex-direction:   column;
	gap:              16px;
	height:           100%;
	box-sizing:       border-box;
}
/* Custom link wrapper — resets link styling so card appearance is unchanged */
.dpc-tmn-card-link {
	display:         block;
	text-decoration: none;
	color:           inherit;
	height:          100%;
}
.dpc-tmn-card__stars { margin-bottom: 0.25rem; }
.dpc-tmn-content {
	flex: 1;
	margin: 0;
	padding: 0;
	font-style: italic;
	line-height: 1.6;
}
/* Quotation marks removed — layout uses card padding only */
.dpc-tmn-content::before,
.dpc-tmn-content::after { content: ''; display: none; }
.dpc-tmn-content blockquote { margin: 0; padding: 0; }

/* ── Author ────────────────────────────────────────────────────────────── */
.dpc-tmn-author {
	display:     flex;
	align-items: center;
	gap:         0.75rem;
	margin-top:  auto;
}
.dpc-tmn-avatar {
	width:          var(--dpc-tmn-avatar-size);
	height:         var(--dpc-tmn-avatar-size);
	border-radius:  50%;
	object-fit:     cover;
	flex-shrink:    0;
	overflow:       hidden;
}
.dpc-tmn-avatar--initials {
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #6c757d;
	color:           #fff;
	font-weight:     700;
	font-size:       1.1rem;
}
/* Author info: Name → Company → Date stacked */
.dpc-tmn-author-info {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            2px;
}
.dpc-tmn-author-name {
	display:     block;
	font-weight: 700;
	font-size:   0.95em;
	line-height: 1.3;
	color:       inherit;
}
a.dpc-tmn-author-name {
	text-decoration: none;
}
a.dpc-tmn-author-name:hover {
	text-decoration: underline;
}
.dpc-tmn-author-company {
	display:     block;
	font-size:   0.82em;
	color:       #666;
	font-weight: 400;
	line-height: 1.3;
}
.dpc-tmn-date {
	display:     block;
	font-size:   0.78em;
	color:       #888;
	line-height: 1.3;
}
/* Verified badge not rendered */
.dpc-tmn-verified { display: none; }

/* ── Grid ──────────────────────────────────────────────────────────────── */
.dpc-tmn-grid {
	display: grid;
	gap:     var(--dpc-tmn-gap);
	/* Default (no modifier class): 3 columns */
	grid-template-columns: repeat(3, 1fr);
}

/* Explicit column classes — generated by the shortcode/block */
.dpc-tmn-grid--1col { grid-template-columns: 1fr; }
.dpc-tmn-grid--2col { grid-template-columns: repeat(2, 1fr); }
.dpc-tmn-grid--3col { grid-template-columns: repeat(3, 1fr); }
.dpc-tmn-grid--4col { grid-template-columns: repeat(4, 1fr); }
.dpc-tmn-grid--5col { grid-template-columns: repeat(5, 1fr); }
.dpc-tmn-grid--6col { grid-template-columns: repeat(6, 1fr); }

/* Tablet: max 2 columns */
@media (min-width: 769px) and (max-width: 1024px) {
	.dpc-tmn-grid--3col,
	.dpc-tmn-grid--4col,
	.dpc-tmn-grid--5col,
	.dpc-tmn-grid--6col { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: always 1 column */
@media (max-width: 768px) {
	.dpc-tmn-grid,
	.dpc-tmn-grid--2col,
	.dpc-tmn-grid--3col,
	.dpc-tmn-grid--4col,
	.dpc-tmn-grid--5col,
	.dpc-tmn-grid--6col { grid-template-columns: 1fr; }
}

/* ── Carousel — lightweight ────────────────────────────────────────────── */

/*
 * Wrap: negative horizontal margins so the SVG chevrons sit outside the
 * card area without pushing the layout. The matching padding restores the
 * inner alignment. Reduce to -24px if the theme container is narrow.
 */
.dpc-tmn-carousel-wrap {
	position:   relative;
	overflow:   visible;           /* allow absolutely-positioned chevrons to show */
	margin-left:  -40px;
	margin-right: -40px;
	padding-left:  40px;
	padding-right: 40px;
	box-sizing:    border-box;
}
.dpc-tmn-carousel {
	overflow: hidden;
	width:    100%;
}
.dpc-tmn-carousel__track {
	display:     flex;
	width:       100%;     /* ← critical: gives flex children a % reference */
	transition:  transform 0.35s ease;
	will-change: transform;
}
.dpc-tmn-carousel__slide {
	/* Width is set by JS (responsive-aware). CSS just prevents shrinking. */
	flex-shrink: 0;
	min-width:   0;
	padding:     0 calc( var(--dpc-tmn-gap) / 2 );
	box-sizing:  border-box;
}

/* Original ←/→ buttons: hidden, kept in DOM as click targets for the JS */
.dpc-tmn-carousel__prev,
.dpc-tmn-carousel__next { display: none !important; }

/* Controls row: only dots visible */
.dpc-tmn-carousel__controls {
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-top:      16px;
}
.dpc-tmn-carousel__dots {
	display:     flex;
	gap:         6px;
	align-items: center;
}
.dpc-tmn-carousel__dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    #ccc;
	border:        none;
	cursor:        pointer;
	padding:       0;
	transition:    background 0.2s;
}
.dpc-tmn-carousel__dot.is-active { background: #333; }

/* SVG Chevron buttons injected by JS — sit outside the track, vertically
   centered on the slide area (above the dots row). */
.dpc-arrow-left,
.dpc-arrow-right {
	position:        absolute;
	top:             0;
	bottom:          40px; /* clears the dots row */
	width:           36px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      transparent;
	border:          none;
	color:           rgba(0,0,0,.4);
	cursor:          pointer;
	padding:         0;
	transition:      color 0.2s;
	z-index:         20;
}
.dpc-arrow-left  { left: 0; }
.dpc-arrow-right { right: 0; }
.dpc-arrow-left:hover,
.dpc-arrow-right:hover { color: rgba(0,0,0,.85); }
.dpc-arrow-left svg,
.dpc-arrow-right svg { display: block; }

/* ── Swiper overrides ──────────────────────────────────────────────────── */
.dpc-tmn-swiper.swiper { overflow: hidden; }
.dpc-tmn-swiper .swiper-slide { height: auto; }

/* ── Score / Aggregate ─────────────────────────────────────────────────── */
.dpc-tmn-score {
	display:     inline-flex;
	align-items: center;
	gap:         0.5rem;
	color:       var(--dpc-tmn-score-color);
}
.dpc-tmn-score--badge {
	flex-direction:  column;
	text-align:      center;
	background:      var(--dpc-tmn-card-bg);
	border-radius:   var(--dpc-tmn-card-radius);
	box-shadow:      var(--dpc-tmn-card-shadow);
	padding:         1rem 1.5rem;
	display:         inline-flex;
	gap:             0.25rem;
}
.dpc-tmn-score__value {
	font-weight: 700;
	font-size:   1.5em;
}
.dpc-tmn-score__count {
	font-size: var(--dpc-tmn-count-font-size, 0.85em);
	color:     var(--dpc-tmn-count-color, #666);
}
.dpc-tmn-score-wrap--left   { text-align: left; }
.dpc-tmn-score-wrap--center { text-align: center; }
.dpc-tmn-score-wrap--right  { text-align: right; }
/* Score custom-link wrapper — keeps the score unstyled as a block link */
.dpc-tmn-score-link {
	display:         inline-block;
	text-decoration: none;
	color:           inherit;
}

/* ── Form ──────────────────────────────────────────────────────────────── */
.dpc-tmn-form-wrap {
	max-width:  640px;
	margin:     0 auto;
	padding:    1.5rem;
	background: var(--dpc-tmn-card-bg);
	border-radius: var(--dpc-tmn-card-radius);
	box-shadow: var(--dpc-tmn-card-shadow);
	color:      var(--dpc-tmn-form-text-color, inherit);
	font-size:  var(--dpc-tmn-form-text-size, 1rem);
	/* Star inactive color — customisable per form instance via inline CSS */
	--dpc-tmn-form-star-empty: var(--dpc-tmn-form-star-empty-custom, #ddd);
	/* Prevent browser scroll-anchoring from causing jumps when step heights change */
	overflow-anchor: none;
}

/* Progress bar */
.dpc-tmn-progress {
	height:        6px;
	background:    #eee;
	border-radius: 3px;
	overflow:      hidden;
	margin-bottom: 1.5rem;
}
.dpc-tmn-progress__bar {
	height:     100%;
	background: var(--dpc-tmn-star-color);
	transition: width 0.3s ease;
	border-radius: 3px;
}

/* Steps */
.dpc-tmn-step__header { margin-bottom: 1rem; }
.dpc-tmn-step__counter { font-size: 0.8em; color: #999; }
.dpc-tmn-step__question {
	margin:      0.25rem 0 0;
	font-size:   var( --dpc-tmn-question-size, 1.15em );
	font-weight: var( --dpc-tmn-question-weight, 600 );
	color:       var( --dpc-tmn-question-color, inherit );
}
.dpc-tmn-step__field { margin-bottom: 1.25rem; }
.dpc-tmn-step__nav {
	display:     flex;
	gap:         0.75rem;
	align-items: center;
}

/* Inputs */
.dpc-tmn-input,
.dpc-tmn-textarea {
	width:         100%;
	padding:       0.6rem 0.8rem;
	border:        1px solid #ddd;
	border-radius: 4px;
	font-size:     1rem;
	line-height:   1.5;
	box-sizing:    border-box;
	transition:    border-color 0.2s;
}
.dpc-tmn-input:focus,
.dpc-tmn-textarea:focus {
	outline:      none;
	border-color: #999;
}
.dpc-tmn-textarea { resize: vertical; min-height: 100px; }

/* Star input */
.dpc-tmn-star-input {
	display:  flex;
	gap:      4px;
	font-size: var(--dpc-tmn-form-star-size, 2rem);
}
.dpc-tmn-star-btn {
	display:     inline-block;
	background:  none;
	border:      none;
	cursor:      pointer;
	color:       var(--dpc-tmn-form-star-empty, var(--dpc-tmn-star-empty-color, #ddd));
	padding:     0;
	line-height: 1;
	transition:  color 0.15s;
	user-select: none;
	/* Inherit so the parent .dpc-tmn-star-input's font-size
	   (controlled via --dpc-tmn-form-star-size) is respected for both
	   button and span elements. */
	font-size:   inherit;
}
.dpc-tmn-star-btn.is-active,
.dpc-tmn-star-btn.is-hover {
	color: var(--dpc-tmn-star-color);
}

/* Validation error state for rating widgets (stars, thumbs, likert, scale) */
.dpc-tmn-star-input.dpc-tmn-invalid,
.dpc-tmn-thumbs-input.dpc-tmn-invalid,
.dpc-tmn-likert.dpc-tmn-invalid,
.dpc-tmn-scale.dpc-tmn-invalid {
	outline:       2px solid #e53e3e;
	border-radius: 4px;
	padding:       4px;
	animation:     dpc-tmn-shake 0.3s ease;
}
@keyframes dpc-tmn-shake {
	0%, 100% { transform: translateX(0); }
	25%       { transform: translateX(-4px); }
	75%       { transform: translateX(4px); }
}

/* Thumbs rating */
.dpc-tmn-thumbs-input {
	display: flex;
	gap:     12px;
}
.dpc-tmn-thumbs-btn {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	padding:        12px 20px;
	background:     #f8f8f8;
	border:         2px solid #eee;
	border-radius:  8px;
	cursor:         pointer;
	font-size:      1rem;
	transition:     background 0.15s, border-color 0.15s;
	min-width:      72px;
}
.dpc-tmn-thumbs-btn:hover {
	border-color: #999;
	background:   #f0f0f0;
}
.dpc-tmn-thumbs-btn.is-active {
	border-color: var(--dpc-tmn-star-color);
	background:   #fff8ec;
}
.dpc-tmn-thumbs-icon { font-size: 1.8rem; line-height: 1; }
.dpc-tmn-thumbs-label { font-size: 0.78em; color: #666; }

/* Likert scale (7-step) */
.dpc-tmn-likert { }
.dpc-tmn-likert__labels {
	display:         flex;
	justify-content: space-between;
	font-size:       0.8em;
	color:           #999;
	margin-bottom:   0.5rem;
}
.dpc-tmn-likert__buttons { display: flex; gap: 4px; flex-wrap: wrap; }
.dpc-tmn-likert-btn {
	width:           40px;
	height:          40px;
	border:          1px solid #ddd;
	border-radius:   50%;
	background:      #f8f8f8;
	cursor:          pointer;
	font-size:       0.9rem;
	transition:      background 0.15s, border-color 0.15s;
}
.dpc-tmn-likert-btn.is-active {
	background:   var(--dpc-tmn-star-color);
	border-color: var(--dpc-tmn-star-color);
	color:        #fff;
}

/* Checkbox group */
.dpc-tmn-checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; }
.dpc-tmn-checkbox-label {
	display:       flex;
	align-items:   center;
	gap:           0.5rem;
	cursor:        pointer;
	padding:       0.4rem 0.6rem;
	border-radius: 4px;
	transition:    background 0.15s;
}
.dpc-tmn-checkbox-label:hover {
	background: rgba( 0, 0, 0, 0.04 );
}
/* Custom checkbox appearance */
.dpc-tmn-checkbox-item {
	appearance:    none;
	-webkit-appearance: none;
	width:         18px;
	height:        18px;
	border:        2px solid #ccc;
	border-radius: 3px;
	flex-shrink:   0;
	cursor:        pointer;
	background:    #fff;
	transition:    border-color 0.15s, background 0.15s;
	position:      relative;
}
.dpc-tmn-checkbox-item:checked {
	background:    var( --dpc-tmn-checkbox-active-color, #f5a623 );
	border-color:  var( --dpc-tmn-checkbox-active-color, #f5a623 );
}
.dpc-tmn-checkbox-item:checked::after {
	content:     '';
	position:    absolute;
	left:        4px;
	top:         1px;
	width:       6px;
	height:      10px;
	border:      2px solid #fff;
	border-top:  none;
	border-left: none;
	transform:   rotate( 45deg );
}
.dpc-tmn-checkbox-item:focus {
	outline:       2px solid var( --dpc-tmn-checkbox-active-color, #f5a623 );
	outline-offset: 1px;
}
/* Checked label highlight */
.dpc-tmn-checkbox-label:has( .dpc-tmn-checkbox-item:checked ) {
	background: rgba( 245, 166, 35, 0.08 );
}
.dpc-tmn-checkbox-text { line-height: 1.4; }

/* Radio */
.dpc-tmn-radio-group { display: flex; flex-direction: column; gap: 0.5rem; }
.dpc-tmn-radio-label {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	cursor:      pointer;
}
.dpc-tmn-radio-text { line-height: 1.4; }

/* Scale */
.dpc-tmn-scale { }
.dpc-tmn-scale__labels {
	display:         flex;
	justify-content: space-between;
	font-size:       0.8em;
	color:           #999;
	margin-bottom:   0.5rem;
}
.dpc-tmn-scale__buttons { display: flex; gap: 4px; flex-wrap: wrap; }
.dpc-tmn-scale-btn {
	width:           36px;
	height:          36px;
	border:          1px solid #ddd;
	border-radius:   4px;
	background:      #f8f8f8;
	cursor:          pointer;
	font-size:       0.9rem;
	transition:      background 0.15s, border-color 0.15s;
}
.dpc-tmn-scale-btn.is-active {
	background:   var(--dpc-tmn-star-color);
	border-color: var(--dpc-tmn-star-color);
	color:        #fff;
}

/* Name fields */
.dpc-tmn-name-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.dpc-tmn-field-row { display: flex; flex-direction: column; gap: 0.3rem; }
.dpc-tmn-field-row label { font-weight: 600; font-size: 0.9em; }

/* Buttons */
.dpc-tmn-btn {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	padding:       0.55rem 1.25rem;
	border:        none;
	border-radius: var(--dpc-tmn-btn-radius, 4px);
	cursor:        pointer;
	font-size:     1rem;
	font-weight:   600;
	transition:    background 0.2s, opacity 0.2s;
}
.dpc-tmn-btn--next,
.dpc-tmn-btn--submit {
	background: var(--dpc-tmn-btn-bg, #333);
	color:      var(--dpc-tmn-btn-color, #fff);
	margin-left: auto;
}
.dpc-tmn-btn--next:hover,
.dpc-tmn-btn--submit:hover { opacity: 0.85; }
.dpc-tmn-btn--ai {
	background: #6e45e2;
	color:      #fff;
	margin-left: auto;
}
.dpc-tmn-btn--ai:hover { background: #5636c4; }
.dpc-tmn-btn--back,
.dpc-tmn-btn--back-to-steps {
	background: transparent;
	color:      #666;
	border:     1px solid #ddd;
}
.dpc-tmn-btn--back:hover,
.dpc-tmn-btn--back-to-steps:hover { background: #f5f5f5; }

/* Quick submit — subtle, lower visual weight than the main CTA */
.dpc-tmn-btn--quick-submit {
	background:  transparent;
	color:       #aaa;
	border:      none;
	font-size:   0.8rem;
	font-weight: 400;
	padding:     0.3rem 0.5rem;
	margin-left: auto;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.dpc-tmn-btn--quick-submit:hover { color: #666; }

/* Step nav: wrap when many buttons */
.dpc-tmn-step__nav { flex-wrap: wrap; }

/* AI step */
.dpc-tmn-ai-hint {
	background:    #f0ebff;
	border-left:   3px solid #6e45e2;
	padding:       0.6rem 0.8rem;
	border-radius: 0 4px 4px 0;
	font-size:     0.9em;
	margin-bottom: 0.75rem;
	color:         #5636c4;
}
.dpc-tmn-ai-loading {
	display:         flex;
	align-items:     center;
	gap:             0.5rem;
	color:           #999;
	font-size:       0.9em;
	margin-bottom:   0.5rem;
}
.dpc-tmn-spinner {
	display:       inline-block;
	width:         18px;
	height:        18px;
	border:        2px solid #ddd;
	border-top-color: #6e45e2;
	border-radius: 50%;
	animation:     dpc-spin 0.7s linear infinite;
}
@keyframes dpc-spin { to { transform: rotate(360deg); } }

/* Success / Error */
.dpc-tmn-success {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	padding:         2rem;
	gap:             0.75rem;
}
.dpc-tmn-success__icon {
	width:           48px;
	height:          48px;
	background:      #28a745;
	color:           #fff;
	border-radius:   50%;
	font-size:       1.5rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
}
.dpc-tmn-success__msg {
	font-size:   1.1em;
	font-weight: 600;
	margin:      0;
}
.dpc-tmn-error {
	color:         #dc3545;
	background:    #fff5f5;
	border-left:   3px solid #dc3545;
	padding:       0.6rem 0.8rem;
	border-radius: 0 4px 4px 0;
	font-size:     0.9em;
}

/* ── Misc ──────────────────────────────────────────────────────────────── */
.dpc-tmn-empty { color: #999; padding: 1rem 0; }
.dpc-tmn-notice {
	padding:       0.5rem 0.75rem;
	border-radius: 4px;
	font-size:     0.9em;
}

/* ==========================================================================
   Typeform-style Form
   Full-screen per-step layout, smooth slide-up transitions
   ========================================================================== */

.dpc-tmn-form-wrap.dpc-tmn-form--typeform {
	max-width:       100%;
	min-height:      0;     /* auto height — no forced full-screen */
	padding:         0;
	background:      var(--dpc-tmn-card-bg);
	border-radius:   0;
	box-shadow:      none;
	display:         flex;
	flex-direction:  column;
	position:        relative;
	overflow:        hidden;
}

/* Progress bar — fixed at top */
.dpc-tmn-form--typeform .dpc-tmn-progress {
	position: fixed;
	top:      0;
	left:     0;
	right:    0;
	height:   4px;
	z-index:  100;
	border-radius: 0;
	margin:   0;
}

/* Step: centered, full-height, slide-up animation */
.dpc-tmn-form--typeform .dpc-tmn-step {
	position:         absolute;
	inset:            0;
	display:          flex;
	flex-direction:   column;
	align-items:      center;
	justify-content:  center;
	padding:          2rem 1.5rem;
	text-align:       center;
	opacity:          0;
	transform:        translateY(40px);
	transition:       opacity 0.35s ease, transform 0.35s ease;
	pointer-events:   none;
}
.dpc-tmn-form--typeform .dpc-tmn-step.is-active {
	position:       relative;
	opacity:        1;
	transform:      translateY(0);
	pointer-events: auto;
}
.dpc-tmn-form--typeform .dpc-tmn-step.is-leaving {
	position:  absolute; /* remove from flow immediately so the form height tracks the entering step */
	inset:     0;
	opacity:   0;
	transform: translateY(-30px);
}

/* Question text */
.dpc-tmn-form--typeform .dpc-tmn-step__question {
	font-size:     2rem;
	font-weight:   700;
	max-width:     640px;
	margin:        0 auto 0.5rem;
	line-height:   1.25;
}
@media (max-width: 600px) {
	.dpc-tmn-form--typeform .dpc-tmn-step__question { font-size: 1.4rem; }
}

.dpc-tmn-form--typeform .dpc-tmn-step__counter {
	font-size: 0.9em;
	opacity:   0.5;
	margin-bottom: 0.25rem;
}

/* Field area */
.dpc-tmn-form--typeform .dpc-tmn-step__field {
	width:     100%;
	max-width: 480px;
	margin:    1.5rem auto 0;
	text-align: left;
}

/* Inputs */
.dpc-tmn-form--typeform .dpc-tmn-input,
.dpc-tmn-form--typeform .dpc-tmn-textarea {
	border:        none;
	border-bottom: 2px solid #ccc;
	border-radius: 0;
	background:    transparent;
	padding:       0.5rem 0;
	font-size:     1.25rem;
	transition:    border-color 0.2s;
}
.dpc-tmn-form--typeform .dpc-tmn-input:focus,
.dpc-tmn-form--typeform .dpc-tmn-textarea:focus {
	border-bottom-color: var(--dpc-tmn-star-color);
	outline: none;
	box-shadow: none;
}

/* Star input — larger in typeform mode (still respects custom size if set) */
.dpc-tmn-form--typeform .dpc-tmn-star-input {
	justify-content: center;
	font-size:       var(--dpc-tmn-form-star-size, 3rem);
	gap:             8px;
}

/* Scale buttons — full row */
.dpc-tmn-form--typeform .dpc-tmn-scale__buttons {
	justify-content: center;
	gap:             6px;
}
.dpc-tmn-form--typeform .dpc-tmn-scale-btn {
	width:           48px;
	height:          48px;
	font-size:       1rem;
	border-radius:   6px;
}

/* Radio — card style */
.dpc-tmn-form--typeform .dpc-tmn-radio-label {
	border:        1px solid #ddd;
	border-radius: 6px;
	padding:       0.6rem 1rem;
	transition:    background 0.15s, border-color 0.15s;
}
.dpc-tmn-form--typeform .dpc-tmn-radio-label:has(input:checked) {
	background:    #f0f8ff;
	border-color:  var(--dpc-tmn-star-color);
}

/* Nav buttons — centered, large */
.dpc-tmn-form--typeform .dpc-tmn-step__nav {
	justify-content: center;
	margin-top:      2rem;
	gap:             1rem;
}
.dpc-tmn-form--typeform .dpc-tmn-btn--next,
.dpc-tmn-form--typeform .dpc-tmn-btn--submit,
.dpc-tmn-form--typeform .dpc-tmn-btn--ai {
	min-width:     140px;
	padding:       0.75rem 2rem;
	font-size:     1.1rem;
	border-radius: 30px;
	margin-left:   0;
}
.dpc-tmn-form--typeform .dpc-tmn-btn--back,
.dpc-tmn-form--typeform .dpc-tmn-btn--back-to-steps {
	background:  transparent;
	border:      none;
	font-size:   0.9rem;
	opacity:     0.5;
}

/* Press Enter hint */
.dpc-tmn-form--typeform .dpc-tmn-enter-hint {
	font-size: 0.8em;
	opacity:   0.4;
	margin-top: 0.5rem;
	display:    block;
}

/* AI step */
.dpc-tmn-form--typeform .dpc-tmn-step--ai .dpc-tmn-testimonial-text,
.dpc-tmn-form--typeform .dpc-tmn-step--final .dpc-tmn-testimonial-text {
	font-size:     1.1rem;
	border-bottom: 2px solid #ccc;
	border-radius: 0;
	background:    transparent;
}

/* Success screen */
.dpc-tmn-form--typeform .dpc-tmn-success {
	min-height: 0;
	padding:    3rem 1.5rem;
}

/* ── Score breakdown modal ──────────────────────────────────────────────── */
.dpc-tmn-score {
	position: relative; /* anchor for the popup */
}
.dpc-tmn-score-info-btn {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	background:     none;
	border:         1px solid currentColor;
	border-radius:  50%;
	width:          18px;
	height:         18px;
	font-size:      11px;
	line-height:    1;
	cursor:         pointer;
	opacity:        0.55;
	color:          inherit;
	padding:        0;
	vertical-align: middle;
	margin-left:    5px;
	transition:     opacity 0.15s;
}
.dpc-tmn-score-info-btn:hover,
.dpc-tmn-score-info-btn[aria-expanded="true"] {
	opacity: 1;
}
.dpc-tmn-score-breakdown {
	position:      absolute;
	z-index:       9999;
	bottom:        calc(100% + 8px);
	left:          50%;
	transform:     translateX(-50%);
	min-width:     320px;
	max-width:     min(90vw, 520px);
	background:    #fff;
	border:        1px solid #ddd;
	border-radius: 8px;
	box-shadow:    0 8px 32px rgba(0,0,0,.18);
}
.dpc-tmn-score-breakdown__inner {
	padding: 16px;
	position: relative;
}
.dpc-tmn-score-breakdown__close {
	position:   absolute;
	top:        10px;
	right:      12px;
	background: none;
	border:     none;
	cursor:     pointer;
	font-size:  18px;
	color:      #888;
	line-height: 1;
	padding:    0;
}
.dpc-tmn-score-breakdown__close:hover { color: #333; }
.dpc-tmn-score-breakdown__title {
	font-weight: 700;
	font-size:   0.9em;
	margin:      0 0 12px;
	padding-right: 20px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #555;
}
.dpc-tmn-score-breakdown__table {
	width:           100%;
	border-collapse: collapse;
	font-size:       0.85em;
}
.dpc-tmn-score-breakdown__table th {
	text-align:    left;
	padding:       4px 8px 6px 0;
	border-bottom: 2px solid #eee;
	color:         #888;
	font-size:     0.85em;
	font-weight:   600;
	text-transform: uppercase;
}
.dpc-tmn-score-breakdown__table td {
	padding:       6px 8px 6px 0;
	border-bottom: 1px solid #f5f5f5;
	vertical-align: middle;
}
.dpc-tmn-score-breakdown__table td a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.dpc-tmn-score-breakdown__total td {
	border-top:    2px solid #eee;
	border-bottom: none;
	padding-top:   8px;
}
/* Arrow — default: points down (popup is above the button) */
.dpc-tmn-score-breakdown::after {
	content:       '';
	position:      absolute;
	bottom:        -7px;
	top:           auto;
	left:          50%;
	transform:     translateX(-50%);
	border-left:   7px solid transparent;
	border-right:  7px solid transparent;
	border-top:    7px solid #fff;
	border-bottom: none;
	filter:        drop-shadow(0 2px 2px rgba(0,0,0,.1));
}
/* Arrow — flipped: points up (popup is below the button) */
.dpc-tmn-score-breakdown--below::after {
	bottom:        auto;
	top:           -7px;
	border-top:    none;
	border-bottom: 7px solid #fff;
	filter:        drop-shadow(0 -2px 2px rgba(0,0,0,.1));
}
@media (max-width: 480px) {
	.dpc-tmn-score-breakdown {
		position:  fixed;
		bottom:    0;
		left:      0;
		right:     0;
		top:       auto;
		transform: none;
		min-width: 0;
		max-width: 100%;
		border-radius: 12px 12px 0 0;
	}
	.dpc-tmn-score-breakdown::after { display: none; }
}