/* ==========================================================================
   DFX Custom Order — Mobile Overflow Fix
   Scope: every selector below starts with .dfx-custom-order-form — this is
   the exact class used only by the Custom Order page's form. It cannot
   affect any other page, form, or plugin on the site.
   ==========================================================================

   ROOT CAUSE (confirmed on the live site, 375px mobile viewport):
   The form's own <style> block (inline on the /custom-order/ page) never
   gives its inputs, selects, or textarea an explicit width. Left alone,
   a <select> sizes itself to fit its LONGEST <option> text — e.g. the
   Destination Country dropdown has to fit "🇦🇪 United Arab Emirates" — and
   that oversized box sits inside a flex column (.dfx-custom-order-form__field)
   and, for two-up rows, a CSS grid (.dfx-custom-order-form__row). Flex/grid
   items default to min-width:auto, meaning they refuse to shrink below their
   own content's width. So the widest field forces itself, and the whole page,
   wider than the phone screen — that's the sideways scroll Dee saw ("kolom
   kemana-mana"). box-sizing:border-box was already set globally by the theme,
   so that was NOT the cause here — this is a missing-width bug, not a
   fixed-px-width bug.
   ========================================================================== */

.dfx-custom-order-form,
.dfx-custom-order-form *,
.dfx-custom-order-form *::before,
.dfx-custom-order-form *::after {
	box-sizing: border-box;
}

/* Let the field wrapper (flex column) and the 2-column row (grid) shrink to
   fit the space they actually have, instead of stretching to fit whichever
   child inside them is widest. */
.dfx-custom-order-form__field,
.dfx-custom-order-form__row {
	min-width: 0;
}

/* The actual fix: force every input control to fill its parent's width
   instead of sizing itself from its own content. This is what stops the
   "What are you looking for?" and "Destination country" dropdowns (and
   every text / email / tel / number / date / file field + textarea) from
   overflowing. */
.dfx-custom-order-form input[type="text"],
.dfx-custom-order-form input[type="email"],
.dfx-custom-order-form input[type="tel"],
.dfx-custom-order-form input[type="number"],
.dfx-custom-order-form input[type="date"],
.dfx-custom-order-form input[type="file"],
.dfx-custom-order-form select,
.dfx-custom-order-form textarea {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* A little extra breathing room on the smallest phones (iPhone SE and
   similar ~375px-or-narrower screens) so the card's own 32px padding
   doesn't eat too much of an already-tight width. Cosmetic, not required
   for the fix itself. */
@media (max-width: 480px) {
	.dfx-custom-order-form__form {
		padding: 24px 18px;
	}
}