/* ============================================
   Webrato Forms — Frontend Styles
   FIX 4: WordPress system font stack
   ============================================ */

:root {
	/* FIX 4: Match WordPress / theme system fonts exactly */
	--wrf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
	            Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--wrf-primary:    #7c3aed;
	--wrf-primary-dk: #6d28d9;
	--wrf-primary-lt: #ede9fe;
	--wrf-danger:     #dc2626;
	--wrf-success:    #16a34a;
	--wrf-text:       #1e293b;
	--wrf-muted:      #64748b;
	--wrf-border:     #cbd5e1;
	--wrf-bg:         #f8fafc;
	--wrf-white:      #ffffff;
	--wrf-radius:     6px;
}

/* ---- Wrapper ---- */
.wrf-form-wrap,
.wrf-form-wrap *,
.wrf-form-wrap input,
.wrf-form-wrap textarea,
.wrf-form-wrap select,
.wrf-form-wrap button {
	font-family: var(--wrf-font);
	box-sizing: border-box;
}

.wrf-form-title       { font-size: 1.6em; font-weight: 700; margin-bottom: 6px; color: var(--wrf-text); font-family: var(--wrf-font); }
.wrf-form-description { font-size: 14px; color: var(--wrf-muted); margin-bottom: 20px; }

/* ---- Messages ---- */
.wrf-form-messages { margin-bottom: 16px; }
.wrf-alert { padding: 14px 18px; border-radius: var(--wrf-radius); font-size: 14px; margin-bottom: 12px; border-left: 4px solid transparent; font-family: var(--wrf-font); }
.wrf-alert-success { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.wrf-alert-error   { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }

/* ---- Field Container ---- */
.wrf-field-container  { margin-bottom: 20px; position: relative; }
.wrf-field-size-large  { width: 100%; }
.wrf-field-size-medium { width: 65%; }
.wrf-field-size-small  { width: 35%; }

/* ---- Labels ---- */
.wrf-field-label {
	display: block; font-size: 14px; font-weight: 600; color: var(--wrf-text);
	margin-bottom: 6px; line-height: 1.4; font-family: var(--wrf-font);
}
/* Labels always hidden — only placeholder text visible. Kept for accessibility. */
.wrf-field-label,
.wrf-label-hidden {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0,0,0,0) !important;
	white-space: nowrap !important; border: 0 !important;
}
.wrf-required { color: var(--wrf-danger); margin-left: 2px; }

.wrf-field-description { font-size: 12px; color: var(--wrf-muted); margin-bottom: 6px; line-height: 1.5; }

/* ---- Inputs ---- */
.wrf-field-input {
	display: block; width: 100%; padding: 10px 14px;
	font-size: 15px; color: var(--wrf-text);
	font-family: var(--wrf-font);
	background: var(--wrf-white); border: 1px solid var(--wrf-border);
	border-radius: var(--wrf-radius); outline: none;
	transition: border-color .15s, box-shadow .15s;
	line-height: 1.5; -webkit-appearance: none; appearance: none;
}
.wrf-field-input:focus { border-color: var(--wrf-primary); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.wrf-field-input::placeholder { color: #94a3b8; }
.wrf-field-input.wrf-field-error-state { border-color: var(--wrf-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

textarea.wrf-field-input { resize: vertical; min-height: 100px; }

.wrf-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='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer;
}

/* ---- Phone field — intl-tel-input v23 overrides ---- */
.wrf-phone-wrap { position: relative; width: 100%; }
.wrf-phone-wrap .iti { display: block; width: 100%; }

/* The input itself */
.wrf-phone-wrap .iti input.wrf-phone-input,
.wrf-phone-wrap .iti input[type="tel"] {
	width: 100%;
	font-size: 15px;
	color: var(--wrf-text);
	font-family: var(--wrf-font);
	background: var(--wrf-white);
	border: 1px solid var(--wrf-border);
	border-radius: var(--wrf-radius);
	outline: none;
	padding: 10px 14px;
	line-height: 1.5;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s, box-shadow .15s;
}
.wrf-phone-wrap .iti input.wrf-phone-input:focus,
.wrf-phone-wrap .iti input[type="tel"]:focus {
	border-color: var(--wrf-primary);
	box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

/* Flag button — the clickable area with flag + dial code */
.wrf-phone-wrap .iti__flag-container,
.wrf-phone-wrap .iti__selected-flag {
	background: var(--wrf-bg);
	border-right: 1px solid var(--wrf-border);
	border-radius: var(--wrf-radius) 0 0 var(--wrf-radius);
}
.wrf-phone-wrap .iti__selected-flag:hover,
.wrf-phone-wrap .iti__selected-flag:focus {
	background: #ede9fe;
}
.wrf-phone-wrap .iti__selected-dial-code {
	font-size: 13px;
	font-weight: 600;
	color: var(--wrf-primary);
	font-family: var(--wrf-font);
	margin-left: 4px;
}

/* Country dropdown */
.wrf-phone-wrap .iti__dropdown-content,
.wrf-phone-wrap .iti__country-list {
	z-index: 9999 !important;
	font-family: var(--wrf-font);
	font-size: 13px;
	border: 1px solid var(--wrf-border);
	border-radius: var(--wrf-radius);
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.wrf-phone-wrap .iti__country.iti__highlight,
.wrf-phone-wrap .iti__country:hover { background: var(--wrf-primary-lt); }
.wrf-phone-wrap .iti__search-input {
	font-family: var(--wrf-font);
	font-size: 13px;
	border: 1px solid var(--wrf-border);
	border-radius: 4px;
	padding: 6px 10px;
}

/* ---- Radio & Checkbox ---- */
.wrf-radio-group, .wrf-checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.wrf-choice-label {
	display: flex; align-items: center; gap: 10px;
	font-size: 15px; color: var(--wrf-text); cursor: pointer; font-family: var(--wrf-font);
	padding: 8px 12px; border-radius: var(--wrf-radius);
	border: 1px solid var(--wrf-border); background: var(--wrf-white); transition: all .15s;
}
.wrf-choice-label:hover { border-color: var(--wrf-primary); background: #faf5ff; }
.wrf-choice-label input[type="radio"],
.wrf-choice-label input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--wrf-primary); cursor: pointer; flex-shrink: 0; }

/* ---- Name ---- */
.wrf-name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wrf-name-part { position: relative; }
.wrf-sub-label { display: block; font-size: 11px; color: var(--wrf-muted); margin-top: 4px; font-weight: 500; }

/* ---- Address ---- */
.wrf-address-fields { display: flex; flex-direction: column; gap: 8px; }
.wrf-address-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* ---- File Upload ---- */
.wrf-file-upload-wrap { position: relative; }
.wrf-field-file { opacity: 0; position: absolute; top: 0; left: 0; width: 0; height: 0; }
.wrf-file-label {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 18px; background: var(--wrf-bg); border: 2px dashed var(--wrf-border);
	border-radius: var(--wrf-radius); cursor: pointer; font-size: 14px; color: var(--wrf-muted);
	font-family: var(--wrf-font); transition: all .15s;
}
.wrf-file-label:hover { border-color: var(--wrf-primary); color: var(--wrf-primary); background: #faf5ff; }
.wrf-file-name { margin-left: 12px; font-size: 13px; color: var(--wrf-primary); font-weight: 500; }
.wrf-file-info { font-size: 11px; color: var(--wrf-muted); margin-top: 4px; }

/* ---- Rating ---- */
.wrf-rating-field { display: flex; flex-direction: row-reverse; gap: 4px; justify-content: flex-end; }
.wrf-rating-input { display: none; }
.wrf-rating-star { font-size: 28px; width: 28px; height: 28px; cursor: pointer; color: #cbd5e1; transition: color .15s; }
.wrf-rating-field:hover .wrf-rating-star { color: #f59e0b; }
.wrf-rating-field .wrf-rating-star:hover ~ .wrf-rating-star { color: #cbd5e1; }
.wrf-rating-input:checked ~ .wrf-rating-star { color: #f59e0b; }

/* ---- Range ---- */
.wrf-range-wrap { display: flex; align-items: center; gap: 12px; }
.wrf-range-input { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; background: var(--wrf-border); border-radius: 3px; outline: none; }
.wrf-range-input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var(--wrf-primary); border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.wrf-range-value { font-size: 14px; font-weight: 700; color: var(--wrf-primary); min-width: 36px; text-align: center; background: var(--wrf-primary-lt); padding: 2px 8px; border-radius: 4px; }

/* ---- Likert ---- */
.wrf-likert-wrap { overflow-x: auto; }
.wrf-likert-table { border-collapse: collapse; width: 100%; font-size: 13px; font-family: var(--wrf-font); }
.wrf-likert-table th { background: var(--wrf-bg); padding: 8px 10px; text-align: center; font-weight: 600; font-size: 11px; color: var(--wrf-muted); border: 1px solid var(--wrf-border); }
.wrf-likert-table td { padding: 8px 10px; border: 1px solid var(--wrf-border); text-align: center; }
.wrf-likert-row-label { text-align: left; font-weight: 500; background: var(--wrf-bg); }
.wrf-likert-cell input { accent-color: var(--wrf-primary); width: 18px; height: 18px; cursor: pointer; }

/* ---- Signature ---- */
.wrf-signature-wrap { border: 2px solid var(--wrf-border); border-radius: var(--wrf-radius); overflow: hidden; display: inline-block; }
.wrf-signature-canvas { display: block; cursor: crosshair; background: #fff; }
.wrf-signature-clear { display: block; width: 100%; padding: 6px; background: var(--wrf-bg); border: none; border-top: 1px solid var(--wrf-border); font-size: 12px; color: var(--wrf-muted); cursor: pointer; font-family: var(--wrf-font); transition: all .15s; }
.wrf-signature-clear:hover { background: #fee2e2; color: var(--wrf-danger); }

/* ---- Section / Divider ---- */
.wrf-field-section { padding: 8px 0; }
.wrf-section-divider { border: none; border-top: 2px solid var(--wrf-border); margin: 0 0 12px; }
.wrf-section-title { font-size: 1.1em; font-weight: 700; color: var(--wrf-text); margin: 0 0 6px; font-family: var(--wrf-font); }
.wrf-section-description { font-size: 13px; color: var(--wrf-muted); margin: 0; }

/* ---- reCAPTCHA ---- */
.wrf-captcha-wrap { margin-bottom: 20px; }

/* ---- Submit Button ---- */
.wrf-submit-wrap { margin-top: 24px; }
.wrf-submit-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 32px; font-size: 16px; font-weight: 700;
	font-family: var(--wrf-font);
	background: var(--wrf-primary); color: #fff;
	border: 2px solid var(--wrf-primary); border-radius: var(--wrf-radius);
	cursor: pointer; letter-spacing: .2px;
	transition: background .15s, transform .1s, box-shadow .15s;
	box-shadow: 0 4px 12px rgba(124,58,237,.35);
}
.wrf-submit-btn:hover  { background: var(--wrf-primary-dk); border-color: var(--wrf-primary-dk); box-shadow: 0 6px 18px rgba(124,58,237,.45); transform: translateY(-1px); }
.wrf-submit-btn:active { transform: translateY(0); }
.wrf-submit-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }

/* ---- Spinner ---- */
.wrf-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: wrf-spin .6s linear infinite; }
@keyframes wrf-spin { to { transform: rotate(360deg); } }

/* ---- Errors ---- */
.wrf-field-error { display: block; font-size: 12px; color: var(--wrf-danger); font-weight: 500; margin-top: 4px; font-family: var(--wrf-font); }

/* ---- Multi-page ---- */
.wrf-page-indicator { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; color: var(--wrf-muted); font-family: var(--wrf-font); }
.wrf-page-indicator .wrf-page-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wrf-border); }
.wrf-page-indicator .wrf-page-dot.active { background: var(--wrf-primary); }
.wrf-page-nav { display: flex; gap: 10px; margin-top: 16px; }
.wrf-btn { padding: 9px 20px; font-size: 14px; font-weight: 600; border-radius: var(--wrf-radius); cursor: pointer; border: none; transition: all .15s; font-family: var(--wrf-font); }
.wrf-btn-next { background: var(--wrf-primary); color: #fff; }
.wrf-btn-next:hover { background: var(--wrf-primary-dk); }
.wrf-btn-prev { background: var(--wrf-bg); color: var(--wrf-text); border: 1px solid var(--wrf-border); }
.wrf-btn-prev:hover { background: var(--wrf-border); }

/* ---- Honeypot ---- */
.wrf-hp-field { position: absolute; left: -9999px; opacity: 0; }

/* ---- Form Style Themes ---- */
.wrf-style-rounded .wrf-field-input  { border-radius: 24px; }
.wrf-style-rounded .wrf-submit-btn   { border-radius: 24px; }
.wrf-style-rounded .wrf-choice-label { border-radius: 24px; }

.wrf-style-minimal .wrf-field-input  { border: none; border-bottom: 2px solid var(--wrf-border); border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; }
.wrf-style-minimal .wrf-field-input:focus { border-bottom-color: var(--wrf-primary); box-shadow: none; }

.wrf-style-bold .wrf-field-input     { border-width: 2px; }

/* ---- Two column layout ---- */
.wrf-layout-two-column .wrf-field-container:not(.wrf-field-type-section):not(.wrf-field-type-html):not(.wrf-field-type-pagebreak):not(.wrf-field-type-textarea) { width: 48%; display: inline-block; vertical-align: top; margin-right: 2%; }

/* ---- Notice ---- */
.wrf-notice { padding: 12px 16px; border-left: 4px solid; border-radius: var(--wrf-radius); margin-bottom: 12px; font-size: 13px; font-family: var(--wrf-font); }
.wrf-notice-error { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.wrf-name-fields      { grid-template-columns: 1fr; }
	.wrf-address-row      { grid-template-columns: 1fr; }
	.wrf-field-size-medium,
	.wrf-field-size-small { width: 100%; }
	.wrf-layout-two-column .wrf-field-container { width: 100% !important; display: block !important; }
	.wrf-submit-btn       { width: 100%; justify-content: center; }
}

/* ---- Dropdown placeholder option — greyed hint ---- */
.wrf-select option[disabled][selected][hidden],
.wrf-select option:disabled {
	color: #94a3b8;
}
/* When nothing selected yet, make the select text grey */
.wrf-select:invalid,
.wrf-select.wrf-placeholder-shown {
	color: #94a3b8;
}
/* Style the select grey until a real option is chosen */
.wrf-select option[value=""] { color: #94a3b8; }
.wrf-select option:not([value=""]) { color: var(--wrf-text); }

/* Radio/checkbox placeholder hint text */
.wrf-choice-placeholder {
	font-size: 13px;
	color: #94a3b8;
	margin: 0 0 8px 0;
	font-style: italic;
}