/* =============================================================
 * PlayCortex - Unified Form System
 * Shared by: auth popup (signin/signup/forgot), profile page,
 * submit story, password reset, etc.
 *
 * Markup pattern:
 *   <div class="pc-fld">
 *     <label class="pc-fld__label" for="x">Label<span class="pc-fld__req">*</span></label>
 *     <div class="pc-fld__row">
 *       <span class="pc-fld__icon">[svg]</span>
 *       <input class="pc-fld__control" id="x" ...>
 *       <button class="pc-fld__icon pc-fld__icon--end pc-fld__btn" ...>[svg]</button>
 *     </div>
 *     <p class="pc-fld__hint">Helper text</p>
 *     <p class="pc-fld__error" hidden>Error message</p>
 *   </div>
 *
 * Modifiers:
 *   .pc-fld--readonly  - non-editable styling
 *   .pc-fld--invalid   - red border + error visible
 *   .pc-fld--full      - full width (default is grid auto)
 *
 * Layout helper:
 *   .pc-fld-grid       - 2-col responsive grid (collapses to 1-col on mobile)
 * ============================================================= */

:root {
	--pc-fld-bg: #fff;
	--pc-fld-border: rgba(28, 28, 25, 0.18);
	--pc-fld-border-hover: rgba(28, 28, 25, 0.32);
	--pc-fld-border-focus: #ff6a00;
	--pc-fld-border-error: #d4521a;
	--pc-fld-text: #1c1c19;
	--pc-fld-placeholder: #a8a6a5;
	--pc-fld-icon: #746a66;
	--pc-fld-icon-focus: #ff6a00;
	--pc-fld-label: #1c1c19;
	--pc-fld-hint: #746a66;
	--pc-fld-radius: 8px;
	--pc-fld-pad-y: 12px;
	--pc-fld-pad-x: 14px;
	--pc-fld-icon-gap: 10px;
	--pc-fld-font: var(--pc-font, 'Montserrat', sans-serif);
}

.pc-fld {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.pc-fld__label {
	font-family: var(--pc-fld-font);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pc-fld-label);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.pc-fld__req {
	color: #ff6a00;
	font-weight: 700;
	margin-left: 2px;
}
.pc-fld__label-meta {
	margin-left: auto;
	font-weight: 400;
	font-size: 12px;
	color: var(--pc-fld-hint);
}

.pc-fld__row {
	display: flex;
	align-items: center;
	gap: var(--pc-fld-icon-gap);
	background: var(--pc-fld-bg);
	border: 1px solid var(--pc-fld-border);
	border-radius: var(--pc-fld-radius);
	padding: 0 var(--pc-fld-pad-x);
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
	min-height: 46px;
}
.pc-fld__row:hover { border-color: var(--pc-fld-border-hover); }
.pc-fld__row:focus-within {
	border-color: var(--pc-fld-border-focus);
	box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12);
}

.pc-fld__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--pc-fld-icon);
	width: 20px;
	height: 20px;
}
.pc-fld__row:focus-within .pc-fld__icon { color: var(--pc-fld-icon-focus); }

.pc-fld__icon--end {
	margin-left: auto;
}

.pc-fld__btn {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	color: var(--pc-fld-icon);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pc-fld__btn:hover { color: var(--pc-fld-text); background: rgba(28, 28, 25, 0.06); }
.pc-fld__btn:focus-visible { outline: 2px solid var(--pc-fld-border-focus); outline-offset: 1px; }

.pc-fld__control {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 22px;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 0;
	margin: var(--pc-fld-pad-y) 0;
	font-family: var(--pc-fld-font);
	font-weight: 500;
	/* 16px minimum on mobile to prevent iOS / Android auto-zoom on focus. */
	font-size: 16px;
	line-height: 22px;
	color: var(--pc-fld-text);
	vertical-align: middle;
}
@media (min-width: 768px) {
	.pc-fld__control { font-size: 15px; }
}
.pc-fld__control::placeholder {
	color: var(--pc-fld-placeholder);
	font-style: italic;
	font-weight: 400;
}
/* Password fields - bigger bullets, vertically centered with lock icon */
.pc-fld__control[type="password"] {
	font-size: 18px;
	letter-spacing: 3px;
	line-height: 22px;
}
.pc-fld__control[type="password"]::placeholder {
	font-style: normal;
	font-size: 22px;
	letter-spacing: 3px;
	color: var(--pc-fld-placeholder);
	line-height: 22px;
}
.pc-fld__control:focus { outline: 0; }

/* Number - kill spinner */
.pc-fld__control[type="number"]::-webkit-outer-spin-button,
.pc-fld__control[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pc-fld__control[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Autofill kill */
.pc-fld__control:-webkit-autofill,
.pc-fld__control:-webkit-autofill:hover,
.pc-fld__control:-webkit-autofill:focus,
.pc-fld__control:-webkit-autofill:active {
	-webkit-text-fill-color: var(--pc-fld-text);
	-webkit-box-shadow: 0 0 0 1000px var(--pc-fld-bg) inset;
	transition: background-color 9999s ease-out;
}

/* Textarea - multi-line variant */
.pc-fld__row--textarea {
	align-items: flex-start;
	padding-top: 4px;
	padding-bottom: 4px;
}
.pc-fld__row--textarea .pc-fld__icon { padding-top: var(--pc-fld-pad-y); }
.pc-fld__control--textarea {
	min-height: 200px;
	resize: vertical;
	padding-top: var(--pc-fld-pad-y);
	padding-bottom: var(--pc-fld-pad-y);
	line-height: 1.55;
}

/* Select - native */
.pc-fld__control--select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	padding-right: 28px;
}
.pc-fld__row--select {
	position: relative;
}
.pc-fld__row--select::after {
	content: '';
	position: absolute;
	right: var(--pc-fld-pad-x);
	top: 50%;
	width: 10px;
	height: 10px;
	pointer-events: none;
	transform: translateY(-65%) rotate(45deg);
	border-right: 2px solid var(--pc-fld-icon);
	border-bottom: 2px solid var(--pc-fld-icon);
}

/* Hint + error */
.pc-fld__hint {
	font-family: var(--pc-fld-font);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: var(--pc-fld-hint);
	margin: 0;
}
.pc-fld__error {
	font-family: var(--pc-fld-font);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.5;
	color: var(--pc-fld-border-error);
	margin: 0;
}
.pc-fld__error[hidden] { display: none; }

/* States */
.pc-fld--readonly .pc-fld__row {
	background: #faf8f5;
	border-color: rgba(116, 106, 102, 0.2);
}
.pc-fld--readonly .pc-fld__row:focus-within {
	box-shadow: none;
	border-color: rgba(116, 106, 102, 0.2);
}
.pc-fld--readonly .pc-fld__control {
	color: var(--pc-fld-hint);
	cursor: default;
}

.pc-fld--invalid .pc-fld__row,
.pc-fld__row.is-invalid {
	border-color: var(--pc-fld-border-error);
}
.pc-fld--invalid .pc-fld__row:focus-within,
.pc-fld__row.is-invalid:focus-within {
	box-shadow: 0 0 0 3px rgba(212, 82, 26, 0.12);
}

.pc-fld--full { width: 100%; }

/* Layout grid - 2-col on desktop, 1-col on mobile */
.pc-fld-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}
.pc-fld-grid > .pc-fld--full { grid-column: 1 / -1; }

@media (max-width: 640px) {
	.pc-fld-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Checkbox row helper - uniform orange checkbox across site */
.pc-fld-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--pc-fld-font);
	font-weight: 500;
	font-size: 14px;
	color: var(--pc-fld-label);
	cursor: pointer;
	user-select: none;
}
.pc-fld-check input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid rgba(28, 28, 25, 0.3);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0;
	transition: background 160ms ease, border-color 160ms ease;
	position: relative;
}
.pc-fld-check input[type="checkbox"]:hover {
	border-color: #ff6a00;
}
.pc-fld-check input[type="checkbox"]:checked {
	background: #ff6a00;
	border-color: #ff6a00;
}
.pc-fld-check input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) translate(-1px, -1px);
}
.pc-fld-check input[type="checkbox"]:focus-visible {
	outline: 2px solid #ff6a00;
	outline-offset: 2px;
}

/* Sitewide checkbox normalization - applies to any frontend checkbox so the
   tick mark + colour stay consistent across popup, profile page, submit story,
   newsletter, etc. Uses the same orange brand fill. Bypassed inside wp-admin. */
input[type="checkbox"]:not([class*="admin"]):not(.wp-toggle) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid rgba(28, 28, 25, 0.3);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	vertical-align: middle;
	transition: background 160ms ease, border-color 160ms ease;
	position: relative;
}
input[type="checkbox"]:not([class*="admin"]):not(.wp-toggle):hover { border-color: #ff6a00; }
input[type="checkbox"]:not([class*="admin"]):not(.wp-toggle):checked {
	background: #ff6a00;
	border-color: #ff6a00;
}
input[type="checkbox"]:not([class*="admin"]):not(.wp-toggle):checked::after {
	content: '';
	position: absolute;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) translate(-1px, -1px);
}
input[type="checkbox"]:not([class*="admin"]):not(.wp-toggle):focus-visible {
	outline: 2px solid #ff6a00;
	outline-offset: 2px;
}

/* Phone row - flag pill flush to left edge. Plugin's selected-country
   button owns its own internal left padding to align flag glyph with
   text-field icons. */
.pc-fld__row--phone {
	padding: 0;
}
/* Force flex layout so country-container sits in normal flow next to input
   instead of overlapping (lib defaults to position:absolute). */
.pc-fld__row--phone .iti {
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	align-items: stretch;
}
.pc-fld__row--phone .iti__country-container {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto;
}
.pc-fld__row--phone .iti__tel-input,
.pc-fld__row--phone .iti input[type="tel"] {
	flex: 1 1 auto;
	width: auto;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	font-family: var(--pc-fld-font);
	/* 16px minimum on mobile to prevent iOS / Android auto-zoom on focus. */
	font-size: 16px;
	color: var(--pc-fld-text);
	box-shadow: none !important;
	padding-top: var(--pc-fld-pad-y) !important;
	padding-bottom: var(--pc-fld-pad-y) !important;
	padding-right: var(--pc-fld-pad-x) !important;
	padding-left: 6px !important;
}
@media (min-width: 768px) {
	.pc-fld__row--phone .iti__tel-input,
	.pc-fld__row--phone .iti input[type="tel"] { font-size: 15px; }
}
/* Kill plugin's nested border/shadow + hover bg on the inner flag pill so
   only our pc-fld__row outer border shows. Pad left so flag aligns with
   other field icons (~14px from row edge). */
.pc-fld__row--phone .iti__selected-flag {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
/* Hover/focus state - only on flag+caret (primary), not on full button which
   includes dial code. Keeps +91 background clean. */
.pc-fld__row--phone .iti__selected-country,
.pc-fld__row--phone button.iti__selected-country,
.pc-fld__row--phone .iti__selected-country:hover,
.pc-fld__row--phone .iti__selected-country:focus,
.pc-fld__row--phone button.iti__selected-country:hover,
.pc-fld__row--phone button.iti__selected-country:focus,
.pc-fld__row--phone .iti__selected-country.iti__highlight {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}
.pc-fld__row--phone .iti__selected-country-primary {
	border-radius: 6px;
	padding: 4px 2px 4px 4px !important;
	margin: 0 0 0 6px !important;
	transition: background-color 160ms ease;
}
.pc-fld__row--phone .iti__selected-country:hover .iti__selected-country-primary,
.pc-fld__row--phone .iti__selected-country:focus .iti__selected-country-primary {
	background: rgba(28, 28, 25, 0.05);
}

/* Kill outer dropdown scrollbar - only inner country list should scroll. */
.iti__dropdown-content {
	overflow: visible !important;
}

/* intl-tel-input - font + tame search input + tidy country list */
.iti__country-list,
.iti__search-input,
.iti__country-name,
.iti__dial-code {
	font-family: var(--pc-fld-font);
}
/* Search input - soft border, no orange focus ring */
.iti__search-input {
	font-size: 14px !important;
	padding: 10px 14px !important;
	margin: 8px !important;
	width: calc(100% - 16px) !important;
	border: 1px solid rgba(28, 28, 25, 0.12) !important;
	border-radius: 8px !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: #fff !important;
	color: var(--pc-fld-text) !important;
	box-sizing: border-box !important;
}
.iti__search-input:focus {
	border-color: rgba(28, 28, 25, 0.25) !important;
	box-shadow: none !important;
}
/* Country rows - consistent left padding so flag + name don't hug edge */
.iti__country {
	padding: 10px 14px !important;
}
.iti__country.iti__highlight,
.iti__country:hover {
	background: rgba(255, 106, 0, 0.06) !important;
}