/*
 * Diagnóstico de Humedad con IA — Frontend Styles
 * All selectors use the `dh-ai-` prefix to prevent conflicts with any other plugin or theme.
 * NO global styles are modified.
 *
 * @package DiagnosticoHumedad
 */

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════════ */
.dh-ai-wrapper {
	--dh-primary:       #1e6fbf;
	--dh-primary-dark:  #155199;
	--dh-primary-light: #e8f1fb;
	--dh-accent:        #00b4d8;
	--dh-accent-dark:   #0077a8;
	--dh-success:       #22c55e;
	--dh-warning:       #f59e0b;
	--dh-danger:        #ef4444;
	--dh-sev-baja:      #22c55e;
	--dh-sev-media:     #f59e0b;
	--dh-sev-alta:      #ef4444;
	--dh-bg:            #ffffff;
	--dh-bg-soft:       #f4f7fc;
	--dh-border:        #dde4ef;
	--dh-border-focus:  #1e6fbf;
	--dh-text:          #1a2332;
	--dh-text-muted:    #64748b;
	--dh-radius:        12px;
	--dh-radius-sm:     8px;
	--dh-shadow:        0 4px 24px rgba(30, 111, 191, .10);
	--dh-shadow-lg:     0 8px 40px rgba(30, 111, 191, .15);
	--dh-font:          'Inter', 'Helvetica Neue', Arial, sans-serif;
	--dh-transition:    0.22s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   WRAPPER & RESET
═══════════════════════════════════════════════════════════════════ */
.dh-ai-wrapper {
	font-family:    var(--dh-font);
	color:          var(--dh-text);
	max-width:      680px;
	margin:         0 auto;
	background:     var(--dh-bg);
	border-radius:  var(--dh-radius);
	box-shadow:     var(--dh-shadow);
	padding:        0;
	overflow:       hidden;
	position:       relative;
}

.dh-ai-wrapper *,
.dh-ai-wrapper *::before,
.dh-ai-wrapper *::after {
	box-sizing: border-box;
}

.dh-ai-wrapper h2,
.dh-ai-wrapper h3,
.dh-ai-wrapper h4,
.dh-ai-wrapper p {
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════════ */
.dh-ai-header {
	background:  linear-gradient(135deg, #1a3a6b 0%, #1e6fbf 60%, #00b4d8 100%);
	color:       #fff;
	text-align:  center;
	padding:     40px 32px 32px;
	position:    relative;
	overflow:    hidden;
}

.dh-ai-header::before {
	content:       '';
	position:      absolute;
	top:           -60px;
	right:         -60px;
	width:         200px;
	height:        200px;
	border-radius: 50%;
	background:    rgba(255, 255, 255, .06);
}

.dh-ai-header-icon {
	font-size:     3rem;
	line-height:   1;
	margin-bottom: 12px;
	animation:     dh-ai-float 3s ease-in-out infinite;
}

@keyframes dh-ai-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-6px); }
}

.dh-ai-title {
	font-size:     1.5rem;
	font-weight:   700;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
	color:         #fff;
}

.dh-ai-subtitle {
	font-size:   0.95rem;
	opacity:     0.85;
	line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   STEP INDICATOR
═══════════════════════════════════════════════════════════════════ */
.dh-ai-steps {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         24px 32px;
	background:      var(--dh-bg-soft);
	border-bottom:   1px solid var(--dh-border);
	gap:             0;
}

.dh-ai-step {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	flex:           0 0 auto;
}

.dh-ai-step-number {
	width:            36px;
	height:           36px;
	border-radius:    50%;
	background:       var(--dh-border);
	color:            var(--dh-text-muted);
	font-weight:      700;
	font-size:        0.9rem;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	transition:       background var(--dh-transition), color var(--dh-transition),
	                  transform var(--dh-transition), box-shadow var(--dh-transition);
}

.dh-ai-step--active .dh-ai-step-number {
	background:  var(--dh-primary);
	color:       #fff;
	box-shadow:  0 0 0 4px rgba(30, 111, 191, .2);
	transform:   scale(1.1);
}

.dh-ai-step--done .dh-ai-step-number {
	background: var(--dh-success);
	color:      #fff;
}

.dh-ai-step--done .dh-ai-step-number::after {
	content: '✓';
}

.dh-ai-step-label {
	font-size:   0.75rem;
	font-weight: 600;
	color:       var(--dh-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition:  color var(--dh-transition);
}

.dh-ai-step--active .dh-ai-step-label {
	color: var(--dh-primary);
}

.dh-ai-step-connector {
	flex:             1;
	height:           2px;
	background:       var(--dh-border);
	margin:           0 8px;
	margin-bottom:    20px;
	transition:       background var(--dh-transition);
	max-width:        60px;
}

.dh-ai-step-connector--done {
	background: var(--dh-success);
}

/* ═══════════════════════════════════════════════════════════════════
   FORM PANELS
═══════════════════════════════════════════════════════════════════ */
.dh-ai-form {
	padding: 32px;
}

.dh-ai-step-panel {
	animation: dh-ai-fade-in 0.3s ease;
}

@keyframes dh-ai-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.dh-ai-step-title {
	font-size:     1.15rem;
	font-weight:   700;
	margin-bottom: 6px;
	display:       flex;
	align-items:   center;
	gap:           8px;
	color:         var(--dh-text);
}

.dh-ai-step-icon {
	font-size: 1.3rem;
}

.dh-ai-step-description {
	font-size:     0.9rem;
	color:         var(--dh-text-muted);
	margin-bottom: 24px;
	line-height:   1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   UPLOAD AREA
═══════════════════════════════════════════════════════════════════ */
.dh-ai-file-input {
	display: none;
}

.dh-ai-upload-area {
	border:        2px dashed var(--dh-border);
	border-radius: var(--dh-radius);
	background:    var(--dh-bg-soft);
	cursor:        pointer;
	transition:    border-color var(--dh-transition), background var(--dh-transition),
	               transform var(--dh-transition);
	margin-bottom: 8px;
	min-height:    200px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	position:      relative;
	overflow:      hidden;
}

.dh-ai-upload-area:hover,
.dh-ai-upload-area:focus,
.dh-ai-upload-area--drag-over {
	border-color: var(--dh-primary);
	background:   var(--dh-primary-light);
	transform:    translateY(-2px);
}

.dh-ai-upload-placeholder {
	text-align:  center;
	padding:     32px 24px;
}

.dh-ai-upload-icon {
	font-size:     3rem;
	margin-bottom: 12px;
}

.dh-ai-upload-text {
	font-size:     1rem;
	font-weight:   600;
	color:         var(--dh-primary);
	margin-bottom: 6px;
	line-height:   1.4;
}

.dh-ai-upload-hint {
	font-weight: 400;
	color:       var(--dh-text-muted);
}

.dh-ai-upload-formats {
	font-size:  0.8rem;
	color:      var(--dh-text-muted);
	margin-top: 4px;
}

/* Preview */
.dh-ai-preview-container {
	width:    100%;
	height:   100%;
	position: relative;
}

.dh-ai-preview-container img {
	width:         100%;
	max-height:    280px;
	object-fit:    cover;
	border-radius: calc(var(--dh-radius) - 2px);
	display:       block;
}

.dh-ai-remove-image {
	position:      absolute;
	top:           10px;
	right:         10px;
	background:    rgba(0,0,0,.65);
	color:         #fff;
	border:        none;
	border-radius: 50%;
	width:         30px;
	height:        30px;
	cursor:        pointer;
	font-size:     0.9rem;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    background var(--dh-transition);
	z-index:       2;
}

.dh-ai-remove-image:hover {
	background: var(--dh-danger);
}

.dh-ai-preview-name {
	position:    absolute;
	bottom:      0;
	left:        0;
	right:       0;
	background:  rgba(0,0,0,.5);
	color:       #fff;
	font-size:   0.8rem;
	padding:     6px 12px;
	text-overflow: ellipsis;
	overflow:    hidden;
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   FORM FIELDS
═══════════════════════════════════════════════════════════════════ */
.dh-ai-field-group {
	margin-bottom: 20px;
}

.dh-ai-field-group fieldset {
	border:  none;
	padding: 0;
	margin:  0;
}

.dh-ai-label {
	display:       block;
	font-size:     0.9rem;
	font-weight:   600;
	margin-bottom: 8px;
	color:         var(--dh-text);
}

.dh-ai-required {
	color:       var(--dh-danger);
	margin-left: 3px;
}

.dh-ai-label-hint {
	font-weight:  400;
	font-size:    0.82rem;
	color:        var(--dh-text-muted);
	margin-left:  6px;
}

.dh-ai-select,
.dh-ai-input,
.dh-ai-textarea {
	width:         100%;
	padding:       10px 14px;
	border:        1.5px solid var(--dh-border);
	border-radius: var(--dh-radius-sm);
	font-family:   var(--dh-font);
	font-size:     0.95rem;
	color:         var(--dh-text);
	background:    var(--dh-bg);
	transition:    border-color var(--dh-transition), box-shadow var(--dh-transition);
	appearance:    none;
	outline:       none;
}

.dh-ai-select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 14px center;
	padding-right:       36px;
}

.dh-ai-select:focus,
.dh-ai-input:focus,
.dh-ai-textarea:focus {
	border-color: var(--dh-border-focus);
	box-shadow:   0 0 0 3px rgba(30, 111, 191, .15);
}

.dh-ai-select--invalid,
.dh-ai-input--invalid,
.dh-ai-textarea--invalid {
	border-color: var(--dh-danger);
	box-shadow:   0 0 0 3px rgba(239, 68, 68, .12);
}

.dh-ai-textarea {
	resize:     vertical;
	min-height: 100px;
	line-height: 1.5;
}

.dh-ai-char-count {
	text-align: right;
	font-size:  0.78rem;
	color:      var(--dh-text-muted);
	margin-top: 4px;
}

/* ─── Checkboxes ─────────────────────────────────────────────────── */
.dh-ai-checkbox-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap:                   10px;
	margin-top:            8px;
}

.dh-ai-checkbox-label {
	display:     flex;
	align-items: center;
	gap:         10px;
	cursor:      pointer;
	padding:     10px 14px;
	border:      1.5px solid var(--dh-border);
	border-radius: var(--dh-radius-sm);
	transition:  border-color var(--dh-transition), background var(--dh-transition);
	user-select: none;
}

.dh-ai-checkbox-label:hover {
	border-color: var(--dh-primary);
	background:   var(--dh-primary-light);
}

.dh-ai-checkbox {
	display: none;
}

.dh-ai-checkbox-custom {
	width:         18px;
	height:        18px;
	border:        2px solid var(--dh-border);
	border-radius: 4px;
	flex-shrink:   0;
	transition:    border-color var(--dh-transition), background var(--dh-transition);
	position:      relative;
}

.dh-ai-checkbox:checked + .dh-ai-checkbox-custom {
	background:    var(--dh-primary);
	border-color:  var(--dh-primary);
}

.dh-ai-checkbox:checked + .dh-ai-checkbox-custom::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);
}

.dh-ai-checkbox:checked ~ .dh-ai-checkbox-text {
	color:       var(--dh-primary);
	font-weight: 600;
}

.dh-ai-checkbox-text {
	font-size:  0.9rem;
	transition: color var(--dh-transition);
}

.dh-ai-checkbox-label:has(.dh-ai-checkbox:checked) {
	border-color: var(--dh-primary);
	background:   var(--dh-primary-light);
}

/* ─── Radios ──────────────────────────────────────────────────────── */
.dh-ai-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

.dh-ai-radio-label {
	display:     flex;
	align-items: center;
	gap:         8px;
	cursor:      pointer;
	padding:     10px 20px;
	border:      1.5px solid var(--dh-border);
	border-radius: var(--dh-radius-sm);
	font-size:   0.9rem;
	transition:  border-color var(--dh-transition), background var(--dh-transition);
	user-select: none;
}

.dh-ai-radio-label:hover {
	border-color: var(--dh-primary);
	background:   var(--dh-primary-light);
}

.dh-ai-radio {
	display: none;
}

.dh-ai-radio-custom {
	width:         18px;
	height:        18px;
	border:        2px solid var(--dh-border);
	border-radius: 50%;
	flex-shrink:   0;
	transition:    border-color var(--dh-transition), background var(--dh-transition);
	position:      relative;
}

.dh-ai-radio:checked + .dh-ai-radio-custom {
	border-color: var(--dh-primary);
}

.dh-ai-radio:checked + .dh-ai-radio-custom::after {
	content:       '';
	position:      absolute;
	top:           3px;
	left:          3px;
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--dh-primary);
}

.dh-ai-radio-label:has(.dh-ai-radio:checked) {
	border-color: var(--dh-primary);
	background:   var(--dh-primary-light);
	font-weight:  600;
	color:        var(--dh-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════════════════════════════════ */
.dh-ai-contact-section {
	background:    var(--dh-bg-soft);
	border:        1px solid var(--dh-border);
	border-radius: var(--dh-radius);
	padding:       20px;
	margin-top:    8px;
}

.dh-ai-contact-title {
	font-size:     0.95rem;
	font-weight:   700;
	margin-bottom: 4px;
}

.dh-ai-contact-hint {
	font-size:     0.85rem;
	color:         var(--dh-text-muted);
	margin-bottom: 16px;
}

.dh-ai-fields-row {
	display: flex;
	gap:     16px;
}

.dh-ai-field-group--half {
	flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   FIELD ERRORS
═══════════════════════════════════════════════════════════════════ */
.dh-ai-field-error {
	font-size:  0.82rem;
	color:      var(--dh-danger);
	margin-top: 5px;
	min-height: 0;
	transition: all var(--dh-transition);
}

.dh-ai-form-error {
	background:    rgba(239, 68, 68, .08);
	border:        1px solid rgba(239, 68, 68, .3);
	border-radius: var(--dh-radius-sm);
	color:         var(--dh-danger);
	padding:       12px 16px;
	font-size:     0.9rem;
	margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION BUTTONS
═══════════════════════════════════════════════════════════════════ */
.dh-ai-nav {
	display:    flex;
	margin-top: 28px;
}

.dh-ai-nav--right {
	justify-content: flex-end;
}

.dh-ai-nav--split {
	justify-content: space-between;
}

.dh-ai-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           8px;
	padding:       12px 28px;
	border-radius: var(--dh-radius-sm);
	font-family:   var(--dh-font);
	font-size:     0.95rem;
	font-weight:   600;
	cursor:        pointer;
	border:        none;
	outline:       none;
	transition:    all var(--dh-transition);
}

.dh-ai-btn--primary {
	background:  var(--dh-primary);
	color:       #fff;
	box-shadow:  0 4px 14px rgba(30, 111, 191, .3);
}

.dh-ai-btn--primary:hover {
	background:  var(--dh-primary-dark);
	transform:   translateY(-2px);
	box-shadow:  0 6px 20px rgba(30, 111, 191, .4);
}

.dh-ai-btn--primary:active {
	transform: translateY(0);
}

.dh-ai-btn--secondary {
	background:   transparent;
	color:        var(--dh-text-muted);
	border:       1.5px solid var(--dh-border);
}

.dh-ai-btn--secondary:hover {
	border-color: var(--dh-primary);
	color:        var(--dh-primary);
	background:   var(--dh-primary-light);
}

.dh-ai-btn--submit {
	background: linear-gradient(135deg, #1e6fbf, #00b4d8);
	padding:    14px 36px;
	font-size:  1rem;
	box-shadow: 0 4px 18px rgba(30, 111, 191, .35);
}

.dh-ai-btn--submit:hover {
	background: linear-gradient(135deg, #155199, #0095b3);
	transform:  translateY(-2px);
	box-shadow: 0 6px 24px rgba(30, 111, 191, .45);
}

.dh-ai-btn--submit:disabled,
.dh-ai-btn--primary:disabled {
	opacity:    0.65;
	cursor:     not-allowed;
	transform:  none;
	box-shadow: none;
}

.dh-ai-btn-arrow {
	font-size:  1rem;
	transition: transform var(--dh-transition);
}

.dh-ai-btn:hover .dh-ai-btn-arrow {
	transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════════════
   LOADER
═══════════════════════════════════════════════════════════════════ */
.dh-ai-loader {
	display:         flex;
	align-items:     center;
	justify-content: center;
	min-height:      320px;
	padding:         32px;
}

.dh-ai-loader-inner {
	text-align: center;
}

.dh-ai-spinner {
	position: relative;
	width:    80px;
	height:   80px;
	margin:   0 auto 24px;
}

.dh-ai-spinner-ring {
	position:      absolute;
	inset:         0;
	border:        4px solid var(--dh-primary-light);
	border-top:    4px solid var(--dh-primary);
	border-radius: 50%;
	animation:     dh-ai-spin 1s linear infinite;
}

@keyframes dh-ai-spin {
	to { transform: rotate(360deg); }
}

.dh-ai-spinner-drop {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       2rem;
	animation:       dh-ai-pulse 1.5s ease-in-out infinite;
}

@keyframes dh-ai-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%       { opacity: 0.7; transform: scale(0.9); }
}

.dh-ai-loader-message {
	font-size:   1.05rem;
	font-weight: 600;
	color:       var(--dh-primary);
	margin-bottom: 6px;
}

.dh-ai-loader-sub {
	font-size: 0.88rem;
	color:     var(--dh-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   RESULT
═══════════════════════════════════════════════════════════════════ */
.dh-ai-result {
	padding:   32px;
	animation: dh-ai-fade-in 0.4s ease;
}

.dh-ai-result-header {
	text-align:    center;
	margin-bottom: 28px;
}

.dh-ai-result-icon {
	font-size:     3.5rem;
	margin-bottom: 12px;
}

.dh-ai-result-type {
	font-size:     1.4rem;
	font-weight:   700;
	color:         var(--dh-text);
	margin-bottom: 16px;
}

/* Confidence meter */
.dh-ai-confidence-wrap {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	margin-bottom:   24px;
}

.dh-ai-confidence-label {
	font-size:     0.82rem;
	font-weight:   600;
	color:         var(--dh-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}

.dh-ai-confidence-bar-wrap {
	width:         100%;
	max-width:     360px;
}

.dh-ai-confidence-track {
	height:        10px;
	background:    var(--dh-border);
	border-radius: 99px;
	overflow:      hidden;
	margin-bottom: 6px;
}

.dh-ai-confidence-fill {
	height:        100%;
	border-radius: 99px;
	background:    linear-gradient(90deg, var(--dh-primary), var(--dh-accent));
	transition:    width 1s ease;
}

.dh-ai-confidence-value {
	font-size:   0.85rem;
	color:       var(--dh-text-muted);
	text-align:  center;
}

/* Severity badge */
.dh-ai-result-severity {
	display:         flex;
	justify-content: center;
	margin-bottom:   24px;
}

.dh-ai-sev-badge {
	padding:       6px 20px;
	border-radius: 99px;
	font-size:     0.88rem;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dh-ai-sev-badge--baja  { background: rgba(34, 197, 94, .12);  color: #15803d; }
.dh-ai-sev-badge--media { background: rgba(245, 158, 11, .12); color: #b45309; }
.dh-ai-sev-badge--alta  { background: rgba(239, 68, 68, .12);  color: #b91c1c; }

/* Result sections */
.dh-ai-result-section {
	background:    var(--dh-bg-soft);
	border:        1px solid var(--dh-border);
	border-radius: var(--dh-radius);
	padding:       18px 20px;
	margin-bottom: 14px;
}

.dh-ai-result-section-title {
	font-size:     0.82rem;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color:         var(--dh-primary);
	margin-bottom: 12px;
}

.dh-ai-result-list {
	list-style: none;
	padding:    0;
	margin:     0;
}

.dh-ai-result-list li {
	padding:     7px 0;
	font-size:   0.92rem;
	border-bottom: 1px solid var(--dh-border);
	display:     flex;
	gap:         8px;
	align-items: flex-start;
	line-height: 1.4;
}

.dh-ai-result-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.dh-ai-result-recomendacion {
	background: linear-gradient(135deg, rgba(30,111,191,.07), rgba(0,180,216,.07));
	border:     1px solid rgba(30,111,191,.2);
}

.dh-ai-result-recomendacion .dh-ai-result-section-title {
	color: var(--dh-accent-dark);
}

/* Disclaimer */
.dh-ai-disclaimer {
	background:    rgba(245, 158, 11, .08);
	border:        1px solid rgba(245, 158, 11, .25);
	border-radius: var(--dh-radius-sm);
	padding:       12px 16px;
	font-size:     0.82rem;
	color:         var(--dh-text-muted);
	line-height:   1.5;
	margin-bottom: 20px;
}

.dh-ai-disclaimer strong {
	color: #b45309;
}

/* CTA button */
.dh-ai-cta-wrap {
	text-align:  center;
	margin-top:  8px;
}

.dh-ai-btn-cta {
	display:       inline-flex;
	align-items:   center;
	gap:           8px;
	padding:       14px 32px;
	background:    linear-gradient(135deg, #1e6fbf, #00b4d8);
	color:         #fff;
	border-radius: var(--dh-radius-sm);
	font-family:   var(--dh-font);
	font-size:     0.95rem;
	font-weight:   600;
	border:        none;
	cursor:        pointer;
	text-decoration: none;
	transition:    all var(--dh-transition);
	box-shadow:    0 4px 14px rgba(30, 111, 191, .3);
}

.dh-ai-btn-cta:hover {
	transform:  translateY(-2px);
	box-shadow: 0 6px 20px rgba(30, 111, 191, .4);
	color:      #fff;
}

/* Limit message */
.dh-ai-limit-reached {
	padding:    32px;
}

.dh-ai-limit-message {
	text-align:    center;
	padding:       32px;
	background:    rgba(245, 158, 11, .08);
	border:        1px solid rgba(245, 158, 11, .25);
	border-radius: var(--dh-radius);
}

.dh-ai-limit-icon {
	font-size:     2.5rem;
	display:       block;
	margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
	.dh-ai-form {
		padding: 20px 18px;
	}

	.dh-ai-header {
		padding: 28px 20px 24px;
	}

	.dh-ai-steps {
		padding: 16px 20px;
	}

	.dh-ai-step-connector {
		max-width: 30px;
	}

	.dh-ai-checkbox-grid {
		grid-template-columns: 1fr;
	}

	.dh-ai-fields-row {
		flex-direction: column;
	}

	.dh-ai-radio-group {
		flex-direction: column;
	}

	.dh-ai-result {
		padding: 20px 18px;
	}

	.dh-ai-nav--split {
		flex-direction: column-reverse;
		gap: 10px;
	}

	.dh-ai-btn {
		justify-content: center;
		width: 100%;
	}
}