/*!
 * OSS Control Center: RegistrationGuard phone field styles.
 *
 * The flag icon needs a positioned wrapper and room inside the input, or it sits
 * on top of the field's text. That is the whole job of this file.
 *
 * Front-end styles, so no admin design tokens are available here. The few values
 * below are deliberately neutral and inherit from the theme wherever they can.
 */

.occ-rg-phone-wrapper {
	position: relative;
	display: block;
}

.occ-rg-phone-wrapper input[type="text"],
.occ-rg-phone-wrapper input[type="tel"] {
	/* Room for the flag. Left padding only, so the theme keeps ownership of
	   everything else about the field. */
	padding-left: 44px;
}

/* The same declaration, one class deeper.

   `registration-guard-forms.css` sets `padding: 11px 13px` on
   `.occ-rg-field input[type="tel"]`, which is (0,2,1) and therefore exactly as
   specific as the rule above. Equal specificity means load order decides, and
   that sheet is enqueued later, so on our own forms the flag lost its room and
   sat on top of the visitor's phone number.

   The base rule is kept rather than simply deepened, because the phone script
   is site-wide: it also masks WP Job Board Pro's dashboard profile editor,
   where `.occ-rg-field` does not exist and the rule above is the only one that
   applies.

   Specificity rather than `!important`. An `!important` here would win today
   and start an escalation the next time the theme touches this field. */
.occ-rg-field .occ-rg-phone-wrapper input[type="text"],
.occ-rg-field .occ-rg-phone-wrapper input[type="tel"] {
	padding-left: 44px;
}

.occ-rg-flag-icon {
	position: absolute;
	top: 50%;
	left: 12px;
	width: 20px;
	height: auto;
	margin: 0;
	transform: translateY(-50%);
	pointer-events: none;

	/* Above the input's own background, below any focus ring the theme draws. */
	z-index: 1;
}

/* A right-to-left layout puts the flag on the other side, or it collides with
   the caret. Both depths, for the same reason as above. */
.rtl .occ-rg-phone-wrapper input[type="text"],
.rtl .occ-rg-phone-wrapper input[type="tel"],
.rtl .occ-rg-field .occ-rg-phone-wrapper input[type="text"],
.rtl .occ-rg-field .occ-rg-phone-wrapper input[type="tel"] {
	padding-right: 44px;
	padding-left: 13px;
}

.rtl .occ-rg-flag-icon {
	right: 12px;
	left: auto;
}