/*
 * OWFR Feedback Form — Styles
 * Loaded only on pages that contain the [owfr_feedback_form] shortcode.
 * All selectors use the owfr-fb- prefix to avoid conflicts with Divi.
 */

/* ── Box-sizing reset scoped to this component ─── */
.owfr-fb-wrap *,
.owfr-fb-wrap *::before,
.owfr-fb-wrap *::after { box-sizing: border-box; }

/* ── Override aggressive Divi element resets ───── */
.owfr-fb-wrap h2,
.owfr-fb-wrap h3,
.owfr-fb-wrap p,
.owfr-fb-wrap label {
	font-size:      inherit !important;
	font-weight:    inherit !important;
	line-height:    inherit !important;
	margin:         0       !important;
	padding:        0       !important;
	letter-spacing: normal  !important;
	text-transform: none    !important;
}

/* ── Design tokens ──────────────────────────────── */
.owfr-fb-wrap {
	--fb-green:       #006B3F;
	--fb-green-dark:  #005430;
	--fb-green-light: #eef6f1;
	--fb-text:        #1a2533;
	--fb-muted:       #5a6a7a;
	--fb-border:      #dce3ea;
	--fb-radius:      10px;
	font-family: inherit;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* ── Card shell ─────────────────────────────────── */
.owfr-fb-card {
	background:    #fff;
	border-radius: 18px;
	box-shadow:    0 4px 40px rgba(0, 107, 63, .09), 0 1px 3px rgba(0, 0, 0, .06);
	overflow:      hidden;
}

/* ── Header ─────────────────────────────────────── */
.owfr-fb-header {
	background: var(--fb-green);
	padding:    28px 36px 26px;
}
.owfr-fb-header h2 {
	font-size:   1.45rem !important;
	font-weight: 700     !important;
	color:       #fff    !important;
	margin:      0 0 8px !important;
	line-height: 1.2     !important;
}
.owfr-fb-header p {
	font-size:   0.93rem                 !important;
	color:       rgba(255, 255, 255, .88) !important;
	line-height: 1.55                    !important;
	margin:      0                       !important;
}

/* ── Body ───────────────────────────────────────── */
.owfr-fb-body {
	padding: 36px 36px 32px;
}

/* ── Two-column grid ────────────────────────────── */
.owfr-fb-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   20px 24px;
}
.owfr-fb-col-full {
	grid-column: 1 / -1;
}

/* ── Individual field wrapper ───────────────────── */
.owfr-fb-field {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}
.owfr-fb-field label {
	font-size:   0.875rem           !important;
	font-weight: 600                !important;
	color:       var(--fb-text)     !important;
	display:     flex               !important;
	align-items: center             !important;
	gap:         3px                !important;
}
.owfr-fb-req { color: var(--fb-green); font-weight: 700; }
.owfr-fb-opt { font-size: 0.8rem; font-weight: 400 !important; color: var(--fb-muted); }

/* ── Inputs / select / textarea ─────────────────── */
.owfr-fb-field input[type="text"],
.owfr-fb-field input[type="email"],
.owfr-fb-field select,
.owfr-fb-field textarea {
	border:        1.5px solid var(--fb-border);
	border-radius: var(--fb-radius);
	padding:       11px 14px;
	font-size:     0.95rem;
	font-family:   inherit;
	color:         var(--fb-text);
	background:    #fff;
	transition:    border-color .2s ease, box-shadow .2s ease;
	outline:       none;
	width:         100%;
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
}
.owfr-fb-field input::placeholder,
.owfr-fb-field textarea::placeholder { color: #9fb0be; }

.owfr-fb-field input:hover:not(:focus),
.owfr-fb-field select:hover:not(:focus),
.owfr-fb-field textarea:hover:not(:focus) { border-color: #b8c8d4; }

.owfr-fb-field input:focus,
.owfr-fb-field select:focus,
.owfr-fb-field textarea:focus {
	border-color: var(--fb-green);
	box-shadow:   0 0 0 3px rgba(0, 107, 63, .12);
}

.owfr-fb-field input.owfr-fb-invalid,
.owfr-fb-field select.owfr-fb-invalid,
.owfr-fb-field textarea.owfr-fb-invalid {
	border-color: #ef4444;
	background:   #fff8f8;
}

.owfr-fb-field textarea {
	resize:      vertical;
	min-height:  140px;
	line-height: 1.6;
}

/* Custom dropdown arrow */
.owfr-fb-field select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 12px center;
	background-size:     16px;
	padding-right:       38px;
	cursor:              pointer;
}

/* ── Honeypot ───────────────────────────────────── */
.owfr-fb-hp {
	position:       absolute;
	left:           -9999px;
	opacity:        0;
	height:         0;
	overflow:       hidden;
	pointer-events: none;
}

/* ── Form footer ────────────────────────────────── */
.owfr-fb-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      28px;
	flex-wrap:       wrap;
	gap:             12px;
}
.owfr-fb-req-note {
	font-size: 0.82rem      !important;
	color:     var(--fb-muted) !important;
}

/* ── Submit button ──────────────────────────────── */
.owfr-fb-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	background:      var(--fb-green);
	color:           #fff;
	border:          none;
	border-radius:   var(--fb-radius);
	padding:         13px 30px;
	font-size:       0.97rem;
	font-weight:     700;
	font-family:     inherit;
	cursor:          pointer;
	transition:      background .2s ease, box-shadow .2s ease, transform .1s ease;
	box-shadow:      0 2px 8px rgba(0, 107, 63, .25);
	min-width:       180px;
	justify-content: center;
	text-decoration: none;
}
.owfr-fb-btn:hover    { background: var(--fb-green-dark); box-shadow: 0 4px 16px rgba(0, 107, 63, .32); }
.owfr-fb-btn:active   { transform: scale(.98); }
.owfr-fb-btn:disabled { opacity: .72; cursor: not-allowed; transform: none; }

.owfr-fb-spinner {
	width:            17px;
	height:           17px;
	border:           2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius:    50%;
	animation:        owfrFbSpin .7s linear infinite;
	flex-shrink:      0;
}
@keyframes owfrFbSpin { to { transform: rotate(360deg); } }

/* ── Error banner ───────────────────────────────── */
.owfr-fb-error {
	display:       none;
	background:    #fff5f5;
	border:        1.5px solid #fca5a5;
	border-radius: 8px;
	padding:       12px 16px;
	color:         #b91c1c;
	font-size:     0.9rem !important;
	line-height:   1.5    !important;
	margin-top:    20px;
}

/* ── Success modal ──────────────────────────────── */
.owfr-fb-overlay {
	display:         none;
	position:        fixed;
	inset:           0;
	background:      rgba(10, 20, 30, .62);
	z-index:         999999;
	align-items:     center;
	justify-content: center;
	padding:         20px;
	backdrop-filter: blur(3px);
}
.owfr-fb-overlay.is-open { display: flex; }

.owfr-fb-modal {
	background:    #fff;
	border-radius: 20px;
	padding:       48px 40px 40px;
	max-width:     440px;
	width:         100%;
	text-align:    center;
	box-shadow:    0 24px 80px rgba(0, 0, 0, .22);
	animation:     owfrFbModalIn .32s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes owfrFbModalIn {
	from { opacity: 0; transform: scale(.88) translateY(20px); }
	to   { opacity: 1; transform: none; }
}

.owfr-fb-modal-icon {
	width:           72px;
	height:          72px;
	background:      var(--fb-green-light);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto 22px;
}
.owfr-fb-modal-icon svg { width: 34px; height: 34px; color: var(--fb-green); }

.owfr-fb-modal h3 {
	font-size:   1.5rem           !important;
	font-weight: 700              !important;
	color:       var(--fb-text)   !important;
	margin:      0 0 10px         !important;
	line-height: 1.2              !important;
}
.owfr-fb-modal p {
	font-size:   0.95rem          !important;
	color:       var(--fb-muted)  !important;
	line-height: 1.65             !important;
	margin:      0 0 28px         !important;
}
.owfr-fb-modal-close {
	background:    var(--fb-green);
	color:         #fff;
	border:        none;
	border-radius: var(--fb-radius);
	padding:       12px 40px;
	font-size:     1rem;
	font-weight:   700;
	font-family:   inherit;
	cursor:        pointer;
	transition:    background .2s ease;
	box-shadow:    0 2px 8px rgba(0, 107, 63, .25);
}
.owfr-fb-modal-close:hover { background: var(--fb-green-dark); }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 600px) {
	.owfr-fb-grid                       { grid-template-columns: 1fr; }
	.owfr-fb-header                     { padding: 22px 20px; }
	.owfr-fb-body                       { padding: 24px 20px 20px; }
	.owfr-fb-footer                     { flex-direction: column-reverse; align-items: stretch; }
	.owfr-fb-btn                        { width: 100%; min-width: 0; }
	.owfr-fb-modal                      { padding: 36px 24px 28px; }
}

/* ── Side-by-side forms layout ──────────────────── */
.owfr-forms-side-by-side {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   32px;
	align-items:           start;
}
.owfr-forms-side-by-side .owfr-fb-wrap {
	margin: 0;
}

@media (max-width: 900px) {
	.owfr-forms-side-by-side {
		grid-template-columns: 1fr;
	}
}