/* ══════════════════════════════════════
   HOME — INTERPRETER SECTION
   Theme shell wrapping [dream_interpreter].
   Also used by page-interpreter.php via
   .de-home-interpreter on the card body.
══════════════════════════════════════ */
.de-home-interpreter {
	padding: 72px 0;
}

/* App-window card */
.de-interpreter-card {
	background: var(--surface);
	border-radius: var(--r-xl);
	border: 1px solid var(--border-hi);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: background .35s, border-color .35s, box-shadow .35s;
}

/* macOS chrome bar */
.de-interpreter-card__bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 13px 20px;
	background: var(--surface2);
	border-bottom: 1px solid var(--border);
	transition: background .35s, border-color .35s;
}
.de-interpreter-card__dots { display: flex; gap: 7px; }
.de-interpreter-card__dot { width: 11px; height: 11px; border-radius: 50%; }
.de-interpreter-card__dot--r { background: #ff5f57; }
.de-interpreter-card__dot--y { background: #febc2e; }
.de-interpreter-card__dot--g { background: #28c840; }
.de-interpreter-card__label {
	font-size: 12.5px; font-weight: 700;
	color: var(--t3); letter-spacing: .07em;
	transition: color .35s;
}
.de-interpreter-card__status {
	display: flex; align-items: center; gap: 6px;
	font-size: 12px; color: var(--ocean); font-weight: 700;
	transition: color .35s;
}
.de-interpreter-card__pulse {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ocean);
	box-shadow: 0 0 7px var(--ocean);
	animation: de-pulse 2s ease-in-out infinite;
}
@keyframes de-pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.de-interpreter-card__body { padding: 36px 40px 44px; }

/* ──────────────────────────────────────
   Plugin output overrides
   .de-home-interpreter wraps the shortcode
   on both the homepage and interpreter page.

   IMPORTANT: These use theme vars (--surface2, --t1)
   NOT plugin inline vars (--rr-field-bg), so they
   respond correctly to data-theme toggle.
────────────────────────────────────── */

.de-home-interpreter .rr-wrap,
.de-home-interpreter .rr-app {
	width: 100%; max-width: 100%; margin: 0; padding: 0;
}

/* Hide plugin intro — theme provides context via section title / page H1 */
.de-home-interpreter .rr-app__intro {
	display: none;
}

/* Single-column form layout */
.de-home-interpreter .rr-app__inner {
	display: block;
	width: 100%; max-width: 100%;
}

.de-home-interpreter .rr-form-section,
.de-home-interpreter .rr-form-card {
	width: 100%; max-width: 100%;
	background: transparent;
	border: none; box-shadow: none;
	padding: 0; margin: 0;
}

/* ── Inputs: normal state ──
   Explicitly set background + color via THEME tokens
   so they override plugin inline --rr-field-bg var. */
.de-home-interpreter .rr-field textarea,
.de-home-interpreter .rr-field input[type="text"],
.de-home-interpreter .rr-field input[type="email"],
.de-home-interpreter .rr-field input[type="password"] {
	background: var(--surface2) !important;
	border: 1.5px solid var(--border-hi) !important;
	border-radius: var(--r) !important;
	color: var(--t1) !important;
	transition: background .35s, border-color .2s, box-shadow .2s, color .35s;
}

/* ── Inputs: focus state ──
   Must set background + color explicitly to beat
   plugin's `background: var(--rr-field-bg)` on focus. */
.de-home-interpreter .rr-field textarea:focus,
.de-home-interpreter .rr-field input[type="text"]:focus,
.de-home-interpreter .rr-field input[type="email"]:focus,
.de-home-interpreter .rr-field input[type="password"]:focus {
	background: var(--surface) !important;
	color: var(--t1) !important;
	border-color: var(--ocean-bdr) !important;
	box-shadow: 0 0 0 3px var(--ocean-dim) !important;
	transform: none;
}

.de-home-interpreter .rr-field select {
	background: var(--surface2) !important;
	border: 1.5px solid var(--border-hi) !important;
	border-radius: 50px !important;
	color: var(--t2) !important;
	transition: background .35s, border-color .2s, color .35s;
}
.de-home-interpreter .rr-field select:focus {
	background: var(--surface) !important;
	color: var(--t1) !important;
	border-color: var(--ocean-bdr) !important;
	box-shadow: 0 0 0 3px var(--ocean-dim) !important;
}

/* Submit button */
.de-home-interpreter .rr-button,
.de-home-interpreter button[type="submit"],
.de-home-interpreter input[type="submit"] {
	background: var(--gold) !important;
	color: var(--btn-text) !important;
	border-radius: 50px !important;
	border: none !important;
	transition: background .35s, color .35s, transform .22s var(--spring), box-shadow .22s;
}
.de-home-interpreter .rr-button:hover,
.de-home-interpreter button[type="submit"]:hover {
	background: var(--gold-lt) !important;
}

/* Result card */
.de-home-interpreter .rr-result-card {
	background: var(--surface2);
	border: 1px solid var(--ocean-bdr);
	border-radius: var(--r-xl);
}

/* Result blocks */
.de-home-interpreter .rr-symbol-item,
.de-home-interpreter .rr-reflection-box,
.de-home-interpreter .rr-result-copy,
.de-home-interpreter .rr-reminder {
	background: var(--surface);
	border-color: var(--border);
	color: var(--t2);
}

/* Hide plugin disclaimer */
.de-home-interpreter .rr-disclaimer { display: none; }

@media (max-width: 900px) {
	.de-interpreter-card__body { padding: 24px 20px 32px; }
	.de-home-interpreter .rr-field-row { grid-template-columns: 1fr; }
}