/* RAW3A Order Manager — order form.
 * Everything is scoped under .raw3a-of and uses element+class selectors so
 * common theme resets (e.g. [type=button]:hover) do not override it.
 * Colors and sizes come from the form's Design settings as CSS variables. */

.raw3a-of {
	--r3-bg: #fffdf9; --r3-text: #51382e; --r3-muted: #847165; --r3-primary: #87639a; --r3-primary-text: #fff;
	--r3-primary-shadow: #ddcde6; --r3-accent: #f4edf8; --r3-border: #e0cde9; --r3-input-border: #dacdbb;
	--r3-input-bg: #fffdf9; --r3-error: #b3261e; --r3-btn-radius: 30px; --r3-radius: 12px; --r3-card-radius: 26px;
	--r3-font: 14px; --r3-label: 13px; --r3-width: 640px; --r3-gap: 14px;
	direction: rtl; text-align: right; color: var(--r3-text); font-size: var(--r3-font); line-height: 1.6;
	max-width: var(--r3-width); width: 100%; margin-inline: auto; box-sizing: border-box;
	font-family: inherit;
	position: relative; /* keeps absolutely positioned parts (honeypot) inside the form */
	min-width: 0;
	overflow-wrap: anywhere; /* long addresses/emails never push the page wider */
}
.raw3a-of *, .raw3a-of *::before, .raw3a-of *::after { box-sizing: border-box; }
.raw3a-of [hidden] { display: none !important; }
.raw3a-of--card { background: var(--r3-bg); border: 1.5px solid var(--r3-border); border-radius: var(--r3-card-radius); padding: 26px; box-shadow: 0 10px 30px rgba(80, 50, 94, .03); }
.raw3a-of__boot { min-height: 120px; opacity: .4; text-align: center; }

.raw3a-of form.raw3a-of__form { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.raw3a-of .raw3a-of__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 12px; row-gap: var(--r3-gap); }
.raw3a-of .raw3a-of__field { grid-column: span 6; min-width: 0; margin: 0; }
.raw3a-of--desktop-grid .raw3a-of__field[data-width="half"] { grid-column: span 3; }
.raw3a-of--desktop-grid .raw3a-of__field[data-width="third"] { grid-column: span 2; }
@media (max-width: 600px) {
	.raw3a-of--card { padding: 20px 16px; }
	.raw3a-of--mobile-stacked .raw3a-of__field[data-width] { grid-column: span 6; }
	.raw3a-of--mobile-grid .raw3a-of__field[data-width="half"] { grid-column: span 3; }
	.raw3a-of--mobile-grid .raw3a-of__field[data-width="third"] { grid-column: span 2; }
}

.raw3a-of .raw3a-of__label { display: block; font-size: var(--r3-label); font-weight: 700; margin: 0 0 8px; color: var(--r3-text); padding: 0; }
.raw3a-of .raw3a-of__req { color: var(--r3-primary); }
.raw3a-of .raw3a-of__desc { font-size: 11px; color: var(--r3-muted); margin: 6px 0 0; }
.raw3a-of .raw3a-of__error { color: var(--r3-error); font-size: 12px; margin: 6px 0 0; font-weight: 600; }

/* Boxed fields (e.g. second piece) merge into one panel when consecutive. */
.raw3a-of .raw3a-of__field--boxed { background: var(--r3-accent); padding: 12px 14px; border-radius: 14px; }
.raw3a-of .raw3a-of__field--boxed + .raw3a-of__field--boxed { margin-top: calc(-1 * var(--r3-gap)); border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 4px; }
.raw3a-of .raw3a-of__field--boxed:has(+ .raw3a-of__field--boxed:not([hidden])) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Inputs */
.raw3a-of .raw3a-of__input {
	display: block; width: 100%; min-height: 46px; margin: 0; padding: 11px 12px; font: inherit; font-size: var(--r3-font);
	color: var(--r3-text); background: var(--r3-input-bg); border: 1px solid var(--r3-input-border); border-radius: var(--r3-radius);
	box-shadow: none; outline: none; transition: border-color .15s, box-shadow .15s; text-align: right;
}
.raw3a-of .raw3a-of__input[dir="ltr"] { text-align: left; }
.raw3a-of .raw3a-of__input::placeholder { color: var(--r3-muted); opacity: .7; }
.raw3a-of .raw3a-of__input:focus { border-color: var(--r3-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--r3-primary) 18%, transparent); }
.raw3a-of .raw3a-of__textarea { min-height: 70px; resize: vertical; }
.raw3a-of select.raw3a-of__select { appearance: none; -webkit-appearance: none; padding-left: 34px; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: 16px 50%, 21px 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.raw3a-of .has-error .raw3a-of__input, .raw3a-of .has-error .raw3a-of__chips, .raw3a-of .has-error .raw3a-of__offers { border-color: var(--r3-error); }
.raw3a-of .raw3a-of__other-city { margin-top: 8px; }
@media (max-width: 760px) { .raw3a-of .raw3a-of__input { font-size: 16px; } } /* prevents iOS zoom */

/* Offer headline + cards */
.raw3a-of .raw3a-of__headline { padding: 0 0 14px; margin-bottom: 16px; border-bottom: 1px solid var(--r3-border); }
.raw3a-of .raw3a-of__price { display: block; font-size: 36px; line-height: 1.3; color: var(--r3-primary); font-weight: 800; }
.raw3a-of .raw3a-of__price small { font-size: 15px; }
.raw3a-of .raw3a-of__price-line { font-size: 12px; color: var(--r3-muted); }
.raw3a-of .raw3a-of__offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; padding-top: 12px; border-radius: 15px; }
.raw3a-of button.raw3a-of__offer {
	position: relative; display: block; width: 100%; min-height: 76px; margin: 0; padding: 20px 10px 14px; text-align: center;
	font: inherit; color: var(--r3-text); background: #fff; border: 1.5px solid var(--r3-border); border-radius: 15px;
	cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; transition: background .15s, border-color .15s;
}
.raw3a-of button.raw3a-of__offer:hover, .raw3a-of button.raw3a-of__offer:focus { background: #fff; color: var(--r3-text); border-color: var(--r3-primary); }
.raw3a-of button.raw3a-of__offer:focus-visible { outline: 2px solid var(--r3-primary); outline-offset: 2px; }
.raw3a-of button.raw3a-of__offer.is-selected, .raw3a-of button.raw3a-of__offer.is-selected:hover, .raw3a-of button.raw3a-of__offer.is-selected:focus {
	background: var(--r3-accent); border-color: var(--r3-primary); box-shadow: 0 0 0 1px var(--r3-primary);
}
.raw3a-of .raw3a-of__offer b, .raw3a-of .raw3a-of__offer strong { display: block; font-size: 14px; }
.raw3a-of .raw3a-of__offer strong { color: var(--r3-primary); margin-top: 4px; }
.raw3a-of .raw3a-of__badge { position: absolute; top: -12px; right: 12px; left: 12px; background: var(--r3-primary); color: var(--r3-primary-text); border-radius: 15px; font-size: 10px; padding: 3px 5px; line-height: 1.5; }

/* Chips (colors, sizes, radio) */
.raw3a-of .raw3a-of__chips { display: flex; flex-wrap: wrap; gap: 7px; border: 1px solid transparent; border-radius: var(--r3-radius); }
.raw3a-of button.raw3a-of__chip {
	display: inline-flex; align-items: center; gap: 7px; flex: 1 1 auto; justify-content: center; min-height: 44px; margin: 0;
	padding: 10px 14px; font: inherit; font-size: 12px; color: var(--r3-text); background: transparent;
	border: 1px solid var(--r3-input-border); border-radius: var(--r3-radius); cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal;
}
.raw3a-of button.raw3a-of__chip:hover, .raw3a-of button.raw3a-of__chip:focus { background: var(--r3-accent); color: var(--r3-text); border-color: var(--r3-primary); }
.raw3a-of button.raw3a-of__chip:focus-visible { outline: 2px solid var(--r3-primary); outline-offset: 2px; }
.raw3a-of button.raw3a-of__chip.is-selected, .raw3a-of button.raw3a-of__chip.is-selected:hover, .raw3a-of button.raw3a-of__chip.is-selected:focus {
	background: var(--r3-primary); color: var(--r3-primary-text); border-color: var(--r3-primary);
}
.raw3a-of .raw3a-of__swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); flex: none; }

.raw3a-of .raw3a-of__checks { display: grid; gap: 6px; }
.raw3a-of .raw3a-of__check { display: flex; align-items: center; gap: 8px; font-size: var(--r3-font); cursor: pointer; margin: 0; }
.raw3a-of .raw3a-of__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--r3-primary); }

/* Quantity */
.raw3a-of .raw3a-of__qty { display: inline-flex; align-items: stretch; gap: 6px; direction: ltr; }
.raw3a-of .raw3a-of__qty .raw3a-of__qty-input { width: 64px; text-align: center; }
.raw3a-of button.raw3a-of__qty-btn { width: 46px; min-height: 46px; margin: 0; padding: 0; font-size: 20px; color: var(--r3-text); background: var(--r3-accent); border: 1px solid var(--r3-input-border); border-radius: var(--r3-radius); cursor: pointer; }
.raw3a-of button.raw3a-of__qty-btn:hover, .raw3a-of button.raw3a-of__qty-btn:focus { background: var(--r3-border); color: var(--r3-text); }

/* Summary */
.raw3a-of .raw3a-of__summary { margin-top: 20px; padding: 13px 15px; background: var(--r3-accent); border-radius: 12px; font-size: 12px; line-height: 2.1; }
.raw3a-of .raw3a-of__sum-items { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px dashed var(--r3-border); }
.raw3a-of .raw3a-of__sum-offer { color: var(--r3-muted); }
.raw3a-of dl.raw3a-of__sum-rows { margin: 0; padding: 0; }
.raw3a-of .raw3a-of__sum-row { display: flex; justify-content: space-between; gap: 10px; }
.raw3a-of .raw3a-of__sum-row dt, .raw3a-of .raw3a-of__sum-row dd { margin: 0; padding: 0; font-weight: 400; }
.raw3a-of .raw3a-of__sum-row.is-discount dd { color: #2e7d32; }
.raw3a-of .raw3a-of__sum-row.is-pending dd { color: var(--r3-muted); font-size: 11px; }
.raw3a-of .raw3a-of__sum-row.is-total { font-size: 15px; font-weight: 800; border-top: 1px solid var(--r3-border); margin-top: 4px; padding-top: 4px; }
.raw3a-of .raw3a-of__sum-row.is-total dt, .raw3a-of .raw3a-of__sum-row.is-total dd { font-weight: 800; }

.raw3a-of .raw3a-of__trust { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 10px; padding: 16px 0 0; color: var(--r3-muted); }

/* Submit */
.raw3a-of button.raw3a-of__submit {
	display: block; width: 100%; min-height: 52px; margin: 17px 0 0; padding: 15px 30px; font: inherit; font-size: 16px; font-weight: 700;
	color: var(--r3-primary-text); background: var(--r3-primary); border: 0; border-radius: var(--r3-btn-radius);
	box-shadow: 0 5px 0 var(--r3-primary-shadow); cursor: pointer; text-transform: none; letter-spacing: normal; transition: transform .2s, opacity .2s;
}
.raw3a-of button.raw3a-of__submit:hover, .raw3a-of button.raw3a-of__submit:focus { color: var(--r3-primary-text); background: var(--r3-primary); transform: translateY(-2px); }
.raw3a-of button.raw3a-of__submit:focus-visible { outline: 2px solid var(--r3-text); outline-offset: 3px; }
.raw3a-of button.raw3a-of__submit[disabled] { opacity: .75; cursor: progress; transform: none; animation: none; }
.raw3a-of button.raw3a-of__submit.is-loading .raw3a-of__submit-text::before {
	content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: raw3aSpin .7s linear infinite;
}
@keyframes raw3aSpin { to { transform: rotate(360deg); } }
@keyframes raw3aPop { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.055); } 60% { transform: scale(.99); } 80% { transform: scale(1.02); } }
.raw3a-of--animate button.raw3a-of__submit:not([disabled]) { animation: raw3aPop 1s ease-in-out infinite; }
.raw3a-of--animate button.raw3a-of__offer--highlight:not(.is-selected) { animation: raw3aPop 1s ease-in-out infinite; }
.raw3a-of--animate button.raw3a-of__submit:hover, .raw3a-of--animate button.raw3a-of__offer:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .raw3a-of--animate button.raw3a-of__submit, .raw3a-of--animate button.raw3a-of__offer--highlight { animation: none !important; } }

.raw3a-of .raw3a-of__result { margin-top: 14px; padding: 14px 16px; border-radius: 10px; font-size: 13px; line-height: 1.9; }
.raw3a-of .raw3a-of__result--error { background: #fdecea; color: var(--r3-error); }
.raw3a-of .raw3a-of__result--info { background: var(--r3-accent); }

/* Honeypot: invisible without moving it off-screen. A large negative "left" creates a
   huge sideways scroll on RTL (Arabic) sites, where the page can scroll to the left. */
.raw3a-of .raw3a-of__hp { position: absolute !important; top: 0; right: 0; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap; border: 0 !important; opacity: 0; pointer-events: none; }

/* Success */
.raw3a-of .raw3a-of__success { text-align: center; padding: 18px 6px; outline: none; }
.raw3a-of .raw3a-of__success-icon { width: 64px; height: 64px; line-height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--r3-accent); color: var(--r3-primary); font-size: 30px; }
.raw3a-of .raw3a-of__success h3 { font-size: 22px; margin: 6px 0 8px; color: var(--r3-text); font-family: inherit; }
.raw3a-of .raw3a-of__success p { margin: 0 0 10px; line-height: 1.9; }
.raw3a-of .raw3a-of__order-no { font-size: 26px; color: var(--r3-primary); direction: ltr; }
.raw3a-of .raw3a-of__success .raw3a-of__sum-rows { text-align: right; background: var(--r3-accent); border-radius: 12px; padding: 12px 15px; margin-top: 10px; }