/* Minification failed. Returning unminified contents.
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(73,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(74,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(81,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(82,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(83,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(84,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(93,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(98,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(106,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(107,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(108,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(109,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(110,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(111,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(112,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(113,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(114,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(115,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(116,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(117,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(118,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(119,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(122,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(123,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(124,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(125,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(126,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(127,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(129,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(130,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(131,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(132,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(133,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(134,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(136,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(137,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(138,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(139,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(140,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(143,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(144,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(145,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(146,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(147,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(148,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(149,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(150,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(153,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(154,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(155,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(156,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(157,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(158,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(161,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(162,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(163,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(166,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(167,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(171,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-base'
(172,22): run-time error CSS1039: Token not allowed after unary operator: '-of-page-bg'
(173,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(182,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(183,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(184,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(185,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(186,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(194,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(195,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(196,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(197,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(206,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(207,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(208,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(209,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(218,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(219,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(220,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(221,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(230,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(231,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(232,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(233,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(242,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(243,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(244,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(245,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(263,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-base'
(264,22): run-time error CSS1039: Token not allowed after unary operator: '-of-page-bg'
(265,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(275,22): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(276,21): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(277,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(278,35): run-time error CSS1039: Token not allowed after unary operator: '-of-border-muted'
(281,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(283,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-weight-bold'
(286,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(288,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-weight-bold'
(296,21): run-time error CSS1039: Token not allowed after unary operator: '-of-page-max-width'
(298,19): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(310,40): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-columns'
(311,15): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-gap'
(324,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(325,28): run-time error CSS1039: Token not allowed after unary operator: '-of-border-muted'
(326,25): run-time error CSS1039: Token not allowed after unary operator: '-of-radius-lg'
(332,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-weight-bold'
(343,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-weight-bold'
(367,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(368,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(369,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(370,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(371,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(372,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(373,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(374,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(375,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(376,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(377,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(378,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(379,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(380,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(381,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(382,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(383,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(384,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(385,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(386,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(391,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(391,74): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(394,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(402,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(403,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-surface'
(410,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(413,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(418,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(424,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(440,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-width'
(447,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(448,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(457,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(458,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(479,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(480,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(487,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(488,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(498,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(499,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(505,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(506,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(512,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(518,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(520,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(528,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(529,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(551,15): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-action-gap'
(554,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-action-height'
(555,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-action-padding-x'
(556,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(557,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(564,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(565,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(573,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(574,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(578,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(580,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(585,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(586,18): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(587,20): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(622,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(625,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-card'
(636,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(638,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(657,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(658,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(676,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(693,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(698,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(699,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(700,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(710,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(711,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(730,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-height'
(732,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(735,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(736,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(748,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(760,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(761,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(786,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(794,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-text-muted'
(795,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(946,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-card'
(1068,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-height'
(1070,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1071,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1076,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(1077,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(1096,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(1103,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1108,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(1120,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1121,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(1126,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(1127,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(1133,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(1135,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(1144,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(1149,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-text-muted'
(1150,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(1159,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(1172,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(1173,18): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(1174,20): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(1184,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1191,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(1197,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1208,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1209,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(1215,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(1216,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(1222,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(1227,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(1229,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(1242,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1243,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1244,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1245,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1246,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1247,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1248,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1249,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1250,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1251,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1252,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1253,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1315,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-action-height'
(1431,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1432,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1472,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1517,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(1517,80): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1520,35): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(1520,68): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(1522,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(1534,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(1549,28): run-time error CSS1039: Token not allowed after unary operator: '-of-brand-logo-url'
(1562,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(1591,19): run-time error CSS1039: Token not allowed after unary operator: '-of-space-lg'
(1606,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-inverse'
(1607,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1613,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(1633,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(1634,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1635,21): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-step-title-size'
(1637,23): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-step-title-weight'
(1638,23): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-step-title-line-height'
(1639,26): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-step-title-letter-spacing'
(1646,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(1647,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(1648,21): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-form-label-size'
(1650,23): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-form-label-weight'
(1651,23): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-form-label-line-height'
(1654,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(1655,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-base'
(1661,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-subtle'
(1662,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-base'
(1667,17): run-time error CSS1039: Token not allowed after unary operator: '-of-error'
(1671,22): run-time error CSS1039: Token not allowed after unary operator: '-of-input-height'
(1673,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(1674,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(1677,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(1678,28): run-time error CSS1039: Token not allowed after unary operator: '-of-border'
(1679,25): run-time error CSS1039: Token not allowed after unary operator: '-of-radius-md'
(1684,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-subtle'
(1688,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(1690,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(1693,24): run-time error CSS1039: Token not allowed after unary operator: '-of-error'
(1707,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(1708,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1710,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-weight-semibold'
(1711,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(1712,28): run-time error CSS1039: Token not allowed after unary operator: '-of-border'
(1713,25): run-time error CSS1039: Token not allowed after unary operator: '-of-radius-sm'
(1730,22): run-time error CSS1039: Token not allowed after unary operator: '-of-button-height'
(1732,17): run-time error CSS1039: Token not allowed after unary operator: '-of-action-secondary-text'
(1733,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1736,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-weight-semibold'
(1739,22): run-time error CSS1039: Token not allowed after unary operator: '-of-action-secondary-bg'
(1740,28): run-time error CSS1039: Token not allowed after unary operator: '-of-action-secondary-border'
(1741,25): run-time error CSS1039: Token not allowed after unary operator: '-of-action-radius'
(1746,17): run-time error CSS1039: Token not allowed after unary operator: '-of-action-primary-text'
(1747,22): run-time error CSS1039: Token not allowed after unary operator: '-of-action-primary-bg'
(1748,24): run-time error CSS1039: Token not allowed after unary operator: '-of-action-primary-bg'
(1751,17): run-time error CSS1039: Token not allowed after unary operator: '-of-action-secondary-text'
(1752,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(1753,24): run-time error CSS1039: Token not allowed after unary operator: '-of-action-secondary-text'
(1766,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(1767,28): run-time error CSS1039: Token not allowed after unary operator: '-of-border'
(1768,25): run-time error CSS1039: Token not allowed after unary operator: '-of-radius-sm'
(1772,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(1779,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(1881,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(1882,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1907,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(1907,78): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1914,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(1915,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(1942,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(1949,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1950,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1959,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(1960,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(1975,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1976,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1988,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(1988,78): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(2057,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(2461,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(2923,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-height'
(2925,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(2928,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(2929,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(2937,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(2954,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(2959,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(3047,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(3048,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(3053,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(3107,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(3108,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(3121,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(3213,35): run-time error CSS1030: Expected identifier, found ':'
(3213,43): run-time error CSS1031: Expected selector, found ')'
(3213,43): run-time error CSS1025: Expected comma or open brace, found ')'
(3331,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(3337,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(3338,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(3339,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(3368,45): run-time error CSS1030: Expected identifier, found ':'
(3368,54): run-time error CSS1031: Expected selector, found ')'
(3368,54): run-time error CSS1025: Expected comma or open brace, found ')'
(3378,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-text-muted'
(3379,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(3394,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(3400,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(3405,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(3427,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(3428,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(3434,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(3435,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(3441,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(3446,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(3493,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(3494,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(3666,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(3700,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(3701,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(3707,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(3745,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(3760,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(3787,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(3788,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(3803,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3805,21): run-time error CSS1039: Token not allowed after unary operator: '-of-text-inverse'
(3806,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(3812,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(3856,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(3856,78): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3864,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(3865,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(3886,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3887,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3901,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(3902,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(3912,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3913,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(4176,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4178,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4180,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4197,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4233,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(4281,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4294,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4300,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4312,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4316,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4324,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4325,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4344,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4345,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4361,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4362,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4383,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(4395,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4396,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4433,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4435,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4437,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4448,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4449,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4466,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4652,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(4656,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4657,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(4666,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(4680,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(4690,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(4703,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4704,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4790,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4791,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4801,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4818,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4819,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4839,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4864,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4908,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4916,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4917,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4944,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4945,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4952,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4974,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4975,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4980,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4982,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4989,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(4992,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4997,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5056,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(5056,78): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(5063,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(5064,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(5086,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(5093,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(5094,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(5103,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(5104,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(5114,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(5115,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(5129,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(5279,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(5360,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(5453,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(5538,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(5542,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5543,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(5552,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(5566,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(5576,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(5589,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5590,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5652,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5665,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(5666,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(5673,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(5674,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5709,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5720,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5721,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5731,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5732,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5747,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(5764,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5765,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5783,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5784,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5798,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5799,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5827,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5836,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5837,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5856,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5857,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5869,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5874,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5875,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5887,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(5890,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5895,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6005,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6151,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(6194,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(6208,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(6220,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6232,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6238,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6245,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6282,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6293,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6441,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6524,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6542,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6553,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6568,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6569,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6618,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6639,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6640,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(6650,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6651,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(6670,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6671,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(6698,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6699,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(6714,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6717,38): run-time error CSS1030: Expected identifier, found ':'
(6717,46): run-time error CSS1031: Expected selector, found ')'
(6717,46): run-time error CSS1025: Expected comma or open brace, found ')'
(6723,38): run-time error CSS1030: Expected identifier, found ':'
(6723,46): run-time error CSS1031: Expected selector, found ')'
(6723,46): run-time error CSS1025: Expected comma or open brace, found ')'
(6743,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(6812,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6813,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6828,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6829,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6882,44): run-time error CSS1030: Expected identifier, found ':'
(6882,52): run-time error CSS1031: Expected selector, found ')'
(6882,52): run-time error CSS1025: Expected comma or open brace, found ')'
(6999,44): run-time error CSS1030: Expected identifier, found ':'
(6999,52): run-time error CSS1031: Expected selector, found ')'
(6999,52): run-time error CSS1025: Expected comma or open brace, found ')'
(7020,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7025,47): run-time error CSS1030: Expected identifier, found ':'
(7025,55): run-time error CSS1031: Expected selector, found ')'
(7025,55): run-time error CSS1025: Expected comma or open brace, found ')'
(7044,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7067,48): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7069,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7072,38): run-time error CSS1030: Expected identifier, found ':'
(7072,46): run-time error CSS1031: Expected selector, found ')'
(7072,46): run-time error CSS1025: Expected comma or open brace, found ')'
(7132,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7133,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7153,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7154,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7166,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7167,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7191,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7192,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7244,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7245,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7280,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7286,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7302,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7303,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7309,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7310,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7337,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7338,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7355,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7356,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7366,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7367,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7382,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7383,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7390,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7391,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7444,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7445,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7470,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7471,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7482,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7483,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7500,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7501,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7526,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7526,78): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7533,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7534,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7556,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(7563,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7564,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7651,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7652,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7667,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7668,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7676,38): run-time error CSS1030: Expected identifier, found '.'
(7676,71): run-time error CSS1031: Expected selector, found ')'
(7676,71): run-time error CSS1025: Expected comma or open brace, found ')'
(7681,38): run-time error CSS1030: Expected identifier, found '.'
(7681,71): run-time error CSS1031: Expected selector, found ')'
(7681,71): run-time error CSS1025: Expected comma or open brace, found ')'
(7687,44): run-time error CSS1030: Expected identifier, found ':'
(7687,52): run-time error CSS1031: Expected selector, found ')'
(7687,52): run-time error CSS1025: Expected comma or open brace, found ')'
(7697,16): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(7698,18): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(7701,35): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(7712,42): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(7795,36): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(7795,69): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(7878,36): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(7878,69): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(7922,36): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(7922,69): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(7966,36): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(7966,69): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(8032,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8033,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8036,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8037,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8039,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8040,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8041,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8043,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8044,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8045,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8046,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8047,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8049,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8050,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8051,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8052,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8053,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8054,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8055,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8057,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8058,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8059,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8060,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8061,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8063,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8064,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8065,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8066,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8067,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8068,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8069,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8070,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8071,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8072,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8073,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8075,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8076,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8077,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8078,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8079,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8080,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8081,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8082,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8085,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8086,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8088,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8089,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8090,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8091,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8092,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8093,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8095,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8096,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
/* Oficina Fácil token contract. */
/* This file defines semantic tokens used by views/components. */
/* Brand values are supplied by Styles/Themes/ayvens.css by default. */
/* Future white-label themes override only the necessary --of-* values. */

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap");

@font-face {
    font-family: "Chillax";
    src: url("/Fonts/Chillax/Chillax-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Chillax";
    src: url("/Fonts/Chillax/Chillax-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Chillax";
    src: url("/Fonts/Chillax/Chillax-Semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Chillax";
    src: url("/Fonts/Chillax/Chillax-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Brand identity defaults. Values are intentionally neutral fallbacks. */
    --of-brand-code: "ayvens";
    --of-brand-logo-url: none;
    --of-brand-primary: #00505c;
    --of-brand-secondary: #c8ff00;
    --of-brand-accent: #00a3a3;

    /* Velocity/Ayvens aliases used by exported design specs. */
    --ayvens-theme-brand-secondary-400: #0F3549;
    --ayvens-theme-brand-primary-400: #00505c;
    --ayvens-theme-neutral-neutral-100: #F6F6F6;
    --ayvens-theme-neutral-neutral-600: #757777;
    --ayvens-theme-neutral-neutral-white: #FFFFFF;

    /* Page and surfaces */
    --of-page-bg: #f4f6f8;
    --of-surface-bg: #ffffff;
    --of-surface-muted-bg: #f7f9fa;
    --of-surface-subtle-bg: #eef3f4;
    --of-map-bg: #e5ecef;

    /* Text */
    --of-text: #16212f;
    --of-text-strong: #001a33;
    --of-text-muted: #465564;
    --of-text-subtle: #6b7280;
    --of-text-inverse: #ffffff;
    --of-text-on-brand: #ffffff;
    --of-text-on-secondary: #001a33;

    /* Borders and focus */
    --of-border: #cdd4db;
    --of-border-muted: #dce3ea;
    --of-border-strong: #8aa0b5;
    --of-border-focus: var(--of-brand-primary);
    --of-focus-ring: 0 0 0 3px rgba(0, 80, 92, 0.18);

    /* States */
    --of-success: #007a3d;
    --of-success-bg: #e9f7ef;
    --of-warning: #946200;
    --of-warning-bg: #fff6dd;
    --of-error: #b42318;
    --of-error-bg: #fdebea;
    --of-info: var(--of-brand-primary);
    --of-info-bg: #e8f3f5;
    --of-disabled-bg: #f1f3f5;
    --of-disabled-text: #6b7280;
    --of-disabled-border: #d6dbe1;

    /* Actions */
    --of-action-primary-bg: var(--of-brand-primary);
    --of-action-primary-bg-hover: #003f49;
    --of-action-primary-bg-active: #00343c;
    --of-action-primary-text: var(--of-text-on-brand);
    --of-action-secondary-bg: transparent;
    --of-action-secondary-bg-hover: var(--of-surface-subtle-bg);
    --of-action-secondary-text: var(--of-brand-primary);
    --of-action-secondary-border: var(--of-border);
    --of-action-radius: 999px;

    /* Typography */
    --of-font-family-base: Arial, Helvetica, sans-serif;
    --of-font-family-brand: "Chillax", Arial, Helvetica, sans-serif;
    --of-font-family-form: "Source Sans 3", Arial, Helvetica, sans-serif;
    --of-font-size-xs: 12px;
    --of-font-size-sm: 14px;
    --of-font-size-md: 15px;
    --of-font-size-base: 16px;
    --of-font-size-lg: 18px;
    --of-font-size-xl: 20px;
    --of-font-size-2xl: 28px;
    --of-line-height-tight: 1.2;
    --of-line-height-base: 1.45;
    --of-line-height-relaxed: 1.6;
    --of-font-weight-regular: 400;
    --of-font-weight-medium: 500;
    --of-font-weight-semibold: 600;
    --of-font-weight-bold: 700;

    /* Semantic typography contracts. */
    --of-typography-step-title-family: var(--of-font-family-brand);
    --of-typography-step-title-size: 20px;
    --of-typography-step-title-weight: 600;
    --of-typography-step-title-line-height: normal;
    --of-typography-step-title-letter-spacing: 1px;
    --of-typography-step-title-color: var(--ayvens-theme-brand-secondary-400, #0F3549);

    --of-typography-step-description-family: var(--of-font-family-brand);
    --of-typography-step-description-size: 18px;
    --of-typography-step-description-weight: 500;
    --of-typography-step-description-line-height: normal;
    --of-typography-step-description-letter-spacing: 1px;
    --of-typography-step-description-color: var(--ayvens-theme-brand-secondary-400, #0F3549);

    --of-typography-form-label-family: var(--of-font-family-form);
    --of-typography-form-label-size: 14px;
    --of-typography-form-label-weight: 700;
    --of-typography-form-label-line-height: 20px;
    --of-typography-form-label-color: var(--ayvens-theme-brand-secondary-400, #0F3549);

    /* Spacing */
    --of-space-2xs: 4px;
    --of-space-xs: 8px;
    --of-space-sm: 12px;
    --of-space-md: 16px;
    --of-space-lg: 24px;
    --of-space-xl: 32px;
    --of-space-2xl: 40px;
    --of-space-3xl: 48px;

    /* Radius */
    --of-radius-xs: 4px;
    --of-radius-sm: 8px;
    --of-radius-md: 12px;
    --of-radius-lg: 16px;
    --of-radius-xl: 24px;
    --of-radius-pill: 999px;

    /* Component sizing */
    --of-input-height: 48px;
    --of-button-height: 48px;
    --of-button-height-sm: 40px;

    /* Shadows */
    --of-shadow-card: 0 12px 32px rgba(0, 0, 0, 0.08);
    --of-shadow-floating: 0 16px 48px rgba(0, 0, 0, 0.16);
}

body {
    font-family: var(--of-font-family-base);
    background: var(--of-page-bg);
    color: var(--of-text);
}

/* Shared layout foundation. */
/* Defines global spacing, shell layout, error page and the reusable Ayvens/Velocity responsive grid. */

/* Extra-small: 0 - 479px | 4 columns | 16px margin | 16px gutter. */

:root {
    --of-header-height: 64px;
    --of-layout-margin: 16px;
    --of-layout-gap: 16px;
    --of-layout-columns: 4;
    --of-page-max-width: none;
}


/* Small: 480 - 739px | 6 columns | 24px margin | 16px gutter. */

@media (min-width: 480px) {
    :root {
        --of-layout-margin: 24px;
        --of-layout-gap: 16px;
        --of-layout-columns: 6;
        --of-page-max-width: none;
    }
}


/* Medium: 740 - 959px | 6 columns | 32px margin | 24px gutter. */

@media (min-width: 740px) {
    :root {
        --of-layout-margin: 32px;
        --of-layout-gap: 24px;
        --of-layout-columns: 6;
        --of-page-max-width: none;
    }
}


/* Large: 960 - 1279px | 12 columns | 32px margin | 24px gutter. */

@media (min-width: 960px) {
    :root {
        --of-layout-margin: 32px;
        --of-layout-gap: 24px;
        --of-layout-columns: 12;
        --of-page-max-width: none;
    }
}


/* Extra-large: 1280 - 1599px | 12 columns | 48px margin | 24px gutter. */

@media (min-width: 1280px) {
    :root {
        --of-layout-margin: 48px;
        --of-layout-gap: 24px;
        --of-layout-columns: 12;
        --of-page-max-width: none;
    }
}


/* Extra-extra-large: 1600px and above | 12 columns | 64px margin | 24px gutter. */

@media (min-width: 1600px) {
    :root {
        --of-layout-margin: 64px;
        --of-layout-gap: 24px;
        --of-layout-columns: 12;
        --of-page-max-width: none;
    }
}


/* Base: shared defaults for all current layouts. */

html,
body {
    min-height: 100%;
    margin: 0;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    font-family: var(--of-font-family-base);
    background: var(--of-page-bg);
    color: var(--of-text);
}


/* Header: visible in the default WEB layout only. */

.of-header {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: var(--of-header-height);
    padding: 0 var(--of-layout-margin);
    background: var(--of-surface-bg);
    border-bottom: 1px solid var(--of-border-muted);
}
.of-header__brand {
    font-family: var(--of-font-family-brand);
    font-size: 24px;
    font-weight: var(--of-font-weight-bold);
}
.of-header__title {
    font-family: var(--of-font-family-brand);
    font-size: 18px;
    font-weight: var(--of-font-weight-bold);
}


/* Main: base content spacing for WEB and APP-DRIVER shells. */

.of-main {
    width: 100%;
    max-width: var(--of-page-max-width);
    margin: 0 auto;
    padding: var(--of-layout-margin);
}
.of-main--app-driver {
    max-width: none;
}


/* Page grid: reusable responsive column layout. */
/* Feature pages should use this class instead of creating isolated grid systems. */

.of-page-grid {
    display: grid;
    grid-template-columns: repeat(var(--of-layout-columns), minmax(0, 1fr));
    gap: var(--of-layout-gap);
    width: 100%;
}


/* Error page: controlled fallback for unexpected errors and critical integration failures. */

.of-error {
    max-width: 720px;
    margin: 0 auto;
}
.of-error-card {
    padding: 32px;
    background: var(--of-surface-bg);
    border: 1px solid var(--of-border-muted);
    border-radius: var(--of-radius-lg);
    text-align: center;
}
.of-error-code {
    margin-bottom: 16px;
    font-size: 48px;
    font-weight: var(--of-font-weight-bold);
}
.of-error-card h1 {
    margin: 0 0 12px;
    font-size: 28px;
}
.of-error-card p {
    margin: 0 0 24px;
}
.of-error-link {
    display: inline-block;
    font-weight: var(--of-font-weight-bold);
    color: inherit;
}


/* Responsive: Extra-small error spacing. */

@media (max-width: 479px) {
    .of-error-card {
        padding: 24px;
    }
    .of-error-code {
        font-size: 40px;
    }
    .of-error-card h1 {
        font-size: 24px;
    }
}

/* Oficina Fácil flow component foundation. */
/* Mobile-first components shared by the search flow, partner detail and future booking screens. */
/* Tablet and desktop must reuse these components and only adapt composition/layout. */

:root {
    --of-flow-mobile-width: 430px;
    --of-flow-header-height: 88px;
    --of-flow-footer-height: 88px;
    --of-flow-content-x: 35px;
    --of-flow-content-width: 360px;
    --of-flow-brand-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    --of-flow-surface: var(--ayvens-theme-neutral-neutral-white, #ffffff);
    --of-flow-page-bg: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
    --of-flow-border: var(--ayvens-theme-neutral-neutral-600, #757777);
    --of-flow-border-muted: #d7d7d7;
    --of-flow-text-muted: #9a9a9a;
    --of-flow-radius-pill: 999px;
    --of-flow-radius-card: 12px;
    --of-flow-list-item-height: 50px;
    --of-flow-list-item-radius: 4px;
    --of-flow-radius-field: 4px;
    --of-flow-action-height: 56px;
    --of-flow-action-gap: 8px;
    --of-flow-action-padding-x: 24px;
    --of-flow-chevron-size: 24px;
}

.of-flow-shell {
    display: grid;
    grid-template-rows: var(--of-flow-header-height) minmax(0, 1fr) var(--of-flow-footer-height);
    width: 100%;
    min-height: 100dvh;
    background: var(--of-flow-page-bg);
    overflow: hidden;
}

.of-flow-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--of-flow-header-height);
    background: var(--of-flow-surface);
}

.of-flow-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--of-flow-footer-height);
    padding: 14px 24px;
    color: #ffffff;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    background: var(--of-flow-brand-color);
    box-sizing: border-box;
}

.of-flow-body {
    min-height: 0;
    padding: 24px var(--of-flow-content-x);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.of-flow-body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.of-flow-content {
    display: grid;
    width: min(100%, var(--of-flow-content-width));
    margin: 0 auto;
    min-width: 0;
}

.of-flow-title {
    margin: 0;
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 1px;
}

.of-flow-text {
    margin: 0;
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 25.2px;
    letter-spacing: 1px;
}

.of-flow-field {
    display: grid;
    gap: 5px;
    width: 100%;
}

.of-flow-field__label-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 20px;
}

.of-flow-field__label {
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.of-flow-field__optional {
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.of-flow-input {
    width: 100%;
    min-height: 60px;
    padding: 14px 12px;
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 29px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.29px;
    background: #ffffff;
    border: 1px solid var(--of-flow-border);
    border-radius: var(--of-flow-list-item-radius);
    box-shadow: none;
    box-sizing: border-box;
}

.of-flow-input::placeholder {
    color: var(--of-flow-border);
    font: inherit;
    opacity: 0.55;
}

.of-flow-input:focus {
    border-color: var(--of-border-focus, #00505c);
    outline: none;
    box-shadow: var(--of-focus-ring, 0 0 0 3px rgba(0, 80, 92, 0.18));
}

.of-flow-message {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

.of-flow-message__icon {
    width: 27px;
    height: 27px;
    color: currentColor;
}

.of-flow-actions {
    display: grid;
    justify-items: center;
    gap: 18px;
}

.of-flow-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--of-flow-action-gap);
    width: auto;
    min-width: 0;
    min-height: var(--of-flow-action-height);
    padding: 12px var(--of-flow-action-padding-x);
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
    background: #ffffff;
    border: 2px solid var(--of-flow-brand-color);
    border-radius: var(--of-flow-radius-pill);
    box-sizing: border-box;
    box-shadow: none;
    cursor: pointer;
}

.of-flow-button--primary {
    color: #ffffff;
    background: var(--of-flow-brand-color);
    border-color: var(--of-flow-brand-color);
}

.of-flow-button--secondary {
    color: var(--of-flow-brand-color);
    background: #ffffff;
    border-color: var(--of-flow-brand-color);
}

.of-flow-button__icon,
.of-flow-button::after {
    width: var(--of-flow-chevron-size);
    height: var(--of-flow-chevron-size);
    flex: 0 0 var(--of-flow-chevron-size);
}

.of-flow-button--arrow::after {
    content: "";
    display: block;
    background-color: currentColor;
    clip-path: polygon(35% 16%, 45% 6%, 78% 50%, 45% 94%, 35% 84%, 58% 50%);
}

.of-flow-button--compact {
    padding-left: 33px;
    padding-right: 24px;
}

.of-flow-visually-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;
}

.of-flow-vehicle-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 80px;
    padding: 12px;
    color: var(--of-flow-brand-color);
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: var(--of-flow-radius-card);
    box-shadow: 0 1px 2px rgba(15, 53, 73, 0.06);
    box-sizing: border-box;
}

.of-flow-vehicle-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    color: var(--of-flow-brand-color);
    background: #70d4d2;
    border-radius: var(--of-flow-radius-pill);
}

.of-flow-vehicle-card__icon svg {
    display: block;
    width: 35px;
    height: 35px;
}

.of-flow-vehicle-card__content {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
}

.of-flow-vehicle-card__title {
    display: block;
    min-width: 0;
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0.2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.of-flow-vehicle-card__meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 27px;
    padding: 3px 8px;
    color: #4d6272;
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    background: #f3f5f6;
    border: 1px solid #cfd5da;
    border-radius: 4px;
}

.of-flow-change-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 40px;
    padding: 8px 18px;
    color: #ffffff;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    background: var(--of-flow-brand-color);
    border: 2px solid var(--of-flow-brand-color);
    border-radius: var(--of-flow-radius-pill);
    cursor: pointer;
}

.of-flow-list-section {
    display: grid;
    gap: 14px;
}

.of-flow-list-title {
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0.6px;
}

.of-flow-list {
    display: grid;
    gap: 4px;
}

.of-flow-list-item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: var(--of-flow-list-item-height);
    padding: 7px 12px 7px 8px;
    color: var(--of-flow-brand-color);
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--of-flow-border-muted);
    border-radius: var(--of-flow-list-item-radius);
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.of-flow-list-item::after {
    display: none;
}

.of-flow-list-item:hover,
.of-flow-list-item:focus-visible {
    border-color: var(--of-flow-brand-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 53, 73, 0.08);
}

.of-flow-list-item__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: var(--of-flow-brand-color);
    border-radius: var(--of-flow-radius-pill);
}

.of-flow-list-item__icon::before {
    display: block;
    width: 27px;
    height: 27px;
    content: "";
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.of-flow-list-item__content {
    display: grid;
    align-content: center;
    min-width: 0;
}

.of-flow-list-item__title {
    color: currentColor;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.2px;
}

.of-flow-list-item__description {
    color: var(--of-flow-text-muted);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
}

.of-flow-list-item__chevron {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    clip-path: polygon(35% 16%, 45% 6%, 78% 50%, 45% 94%, 35% 84%, 58% 50%);
}

.of-flow-icon--quick::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M16 4a12 12 0 1 0 12 12M16 8v8l5 3M24 5l3 3-3 3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M16 4a12 12 0 1 0 12 12M16 8v8l5 3M24 5l3 3-3 3'/%3E%3C/svg%3E");
}

.of-flow-icon--maintenance::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M20 5a7 7 0 0 0-8 8L5 20v5l5 2 7-7a7 7 0 0 0 8-8l-5 5-5-5 5-7Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M20 5a7 7 0 0 0-8 8L5 20v5l5 2 7-7a7 7 0 0 0 8-8l-5 5-5-5 5-7Z'/%3E%3C/svg%3E");
}

.of-flow-icon--breakdown::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M16 4 29 27H3L16 4ZM16 12v7M16 23v.2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M16 4 29 27H3L16 4ZM16 12v7M16 23v.2'/%3E%3C/svg%3E");
}

.of-flow-icon--collision::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M6 18h8l3 4h6l3-4M7 18l2-6h8l3 6M5 24h22M10 25v2M23 25v2M21 6l2 3M16 5v4M27 8l-3 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M6 18h8l3 4h6l3-4M7 18l2-6h8l3 6M5 24h22M10 25v2M23 25v2M21 6l2 3M16 5v4M27 8l-3 2'/%3E%3C/svg%3E");
}

.of-flow-icon--tyres::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M16 6a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM16 11v10M11 16h10M10 10l12 12M22 10 10 22M8 26h16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M16 6a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM16 11v10M11 16h10M10 10l12 12M22 10 10 22M8 26h16'/%3E%3C/svg%3E");
}

.of-flow-icon--glass::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M7 8h18l-2 17H9L7 8ZM13 19l6-6M12 15l3-3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M7 8h18l-2 17H9L7 8ZM13 19l6-6M12 15l3-3'/%3E%3C/svg%3E");
}

.of-flow-icon--rent::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M4 19h9l3 4h6l3-4M5 19l2-5h8l3 5M7 24h16M10 25v2M22 25v2M21 8a3 3 0 1 0 6 0 3 3 0 0 0-6 0ZM18 14a6 6 0 0 1 12 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M4 19h9l3 4h6l3-4M5 19l2-5h8l3 5M7 24h16M10 25v2M22 25v2M21 8a3 3 0 1 0 6 0 3 3 0 0 0-6 0ZM18 14a6 6 0 0 1 12 0'/%3E%3C/svg%3E");
}

.of-flow-icon--inspection::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 20h10l3 4h6l3-4M6 20l2-6h8l3 6M8 25h17M11 26v2M23 26v2M22 6a5 5 0 1 1 0 10 5 5 0 0 1 0-10ZM20 11l1.5 1.5L25 9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 20h10l3 4h6l3-4M6 20l2-6h8l3 6M8 25h17M11 26v2M23 26v2M22 6a5 5 0 1 1 0 10 5 5 0 0 1 0-10ZM20 11l1.5 1.5L25 9'/%3E%3C/svg%3E");
}

.of-flow-icon--return::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 20h10l3 4h6l3-4M6 20l2-6h8l3 6M8 25h17M11 26v2M23 26v2M24 8h-8a5 5 0 0 0 0 10h2M21 5l4 3-4 3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 20h10l3 4h6l3-4M6 20l2-6h8l3 6M8 25h17M11 26v2M23 26v2M24 8h-8a5 5 0 0 0 0 10h2M21 5l4 3-4 3'/%3E%3C/svg%3E");
}

@media (max-width: 390px) {
    .of-flow-vehicle-card {
        grid-template-columns: 62px minmax(0, 1fr);
    }

    .of-flow-change-button {
        grid-column: 1 / -1;
        justify-self: end;
        min-height: 42px;
        font-size: 16px;
        line-height: 20px;
    }

    .of-flow-vehicle-card__icon {
        width: 52px;
        height: 52px;
    }

    .of-flow-vehicle-card__title {
        font-size: 23px;
        line-height: 29px;
    }
}

@media (min-width: 480px) {
    .of-flow-shell {
        min-height: 0;
    }

    .of-flow-header {
        min-height: 72px;
    }

    .of-flow-footer {
        display: none;
    }

    .of-flow-body {
        padding: 24px;
    }

    .of-flow-vehicle-card__title {
        font-size: 22px;
        line-height: 28px;
    }

    .of-flow-change-button {
        min-height: 42px;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 16px;
        line-height: 20px;
    }

    .of-flow-list-item__title {
        font-size: 16px;
        line-height: 22px;
    }
}


/* Service/list refinements extracted from the Figma T2 service frame. */
.of-flow-list-section {
    gap: 8px;
}

.of-flow-list {
    gap: 4px;
}

.of-flow-list-item {
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    gap: 8px;
}

.of-flow-list-item__title {
    font-size: 16px;
    line-height: 20px;
}

.of-flow-list-item__description {
    margin-top: 1px;
    font-size: 11px;
    line-height: 14px;
}

.of-flow-list-item__chevron {
    width: 24px;
    height: 20px;
}

.of-flow-vehicle-card {
    border-radius: var(--of-flow-radius-card);
}

@media (max-width: 390px) {
    .of-flow-vehicle-card {
        grid-template-columns: 60px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .of-flow-change-button {
        grid-column: auto;
        justify-self: end;
        min-height: 40px;
        padding-left: 14px;
        padding-right: 14px;
        font-size: 13px;
        line-height: 16px;
    }

    .of-flow-vehicle-card__icon {
        width: 54px;
        height: 54px;
    }

    .of-flow-vehicle-card__title {
        font-size: 18px;
        line-height: 24px;
    }
}

/* Ayvens exported SVG icon assets. */
/* These override the temporary CSS-drawn masks used while the Figma icons were not available. */

.of-flow-vehicle-card__icon svg {
    display: none;
}

.of-flow-vehicle-card__icon img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.of-flow-list-item__icon::before,
.of-flow-list-item__chevron {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.of-flow-list-item__chevron {
    width: 24px;
    height: 20px;
    background-color: currentColor;
    clip-path: none;
    -webkit-mask-image: url("/Images/Flow/Icons/chevron-right.svg");
    mask-image: url("/Images/Flow/Icons/chevron-right.svg");
}

.of-flow-icon--quick::before {
    -webkit-mask-image: url("/Images/Flow/Icons/time.svg");
    mask-image: url("/Images/Flow/Icons/time.svg");
}

.of-flow-icon--maintenance::before {
    -webkit-mask-image: url("/Images/Flow/Icons/maintenance.svg");
    mask-image: url("/Images/Flow/Icons/maintenance.svg");
}

.of-flow-icon--breakdown::before {
    -webkit-mask-image: url("/Images/Flow/Icons/warning.svg");
    mask-image: url("/Images/Flow/Icons/warning.svg");
}

.of-flow-icon--collision::before {
    -webkit-mask-image: url("/Images/Flow/Icons/car-damage.svg");
    mask-image: url("/Images/Flow/Icons/car-damage.svg");
}

.of-flow-icon--tyres::before {
    -webkit-mask-image: url("/Images/Flow/Icons/tyres.svg");
    mask-image: url("/Images/Flow/Icons/tyres.svg");
}

.of-flow-icon--glass::before {
    -webkit-mask-image: url("/Images/Flow/Icons/glass.svg");
    mask-image: url("/Images/Flow/Icons/glass.svg");
}

.of-flow-icon--rent::before {
    -webkit-mask-image: url("/Images/Flow/Icons/car-drivers.svg");
    mask-image: url("/Images/Flow/Icons/car-drivers.svg");
}

.of-flow-icon--inspection::before {
    -webkit-mask-image: url("/Images/Flow/Icons/car-check.svg");
    mask-image: url("/Images/Flow/Icons/car-check.svg");
}

.of-flow-icon--return::before {
    -webkit-mask-image: url("/Images/Flow/Icons/car-return.svg");
    mask-image: url("/Images/Flow/Icons/car-return.svg");
}

/* Flow choice cards and textarea fields. */
.of-flow-choice-group {
    display: grid;
    gap: 4px;
    width: 100%;
}

.of-flow-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: var(--of-flow-list-item-height);
    padding: 7px 12px 7px 16px;
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    background: #ffffff;
    border: 1px solid var(--of-flow-border-muted);
    border-radius: var(--of-flow-list-item-radius);
    box-sizing: border-box;
    cursor: pointer;
}

.of-flow-choice-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.of-flow-choice-card__radio {
    width: 14px;
    height: 14px;
    border: 1px solid var(--of-flow-border);
    border-radius: 999px;
    background: #ffffff;
    box-sizing: border-box;
}

.of-flow-choice-card input:checked + .of-flow-choice-card__radio {
    border: 4px solid var(--of-flow-brand-color);
}

.of-flow-choice-card:focus-within,
.of-flow-choice-card:hover {
    border-color: var(--of-border-focus, #0065ff);
    box-shadow: 0 0 0 2px rgba(0, 101, 255, 0.16);
}

.of-flow-choice-card__text {
    min-width: 0;
}

.of-flow-textarea {
    width: 100%;
    min-height: 116px;
    padding: 12px 14px;
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    background: #ffffff;
    border: 1px solid var(--of-flow-border);
    border-radius: var(--of-flow-list-item-radius);
    box-sizing: border-box;
    resize: vertical;
}

.of-flow-textarea:focus {
    border-color: var(--of-border-focus, #0065ff);
    outline: none;
    box-shadow: var(--of-focus-ring, 0 0 0 2px rgba(0, 101, 255, 0.22));
}

.of-flow-field--invalid .of-flow-choice-card,
.of-flow-field--invalid .of-flow-textarea {
    border-color: #d92d20;
}

.of-flow-field--invalid .of-flow-textarea:focus {
    border-color: var(--of-border-focus, #0065ff);
}

.of-flow-counter {
    justify-self: end;
    color: var(--of-flow-text-muted);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.of-flow-validation-message {
    display: none;
    color: #d92d20;
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.of-flow-field--invalid .of-flow-validation-message {
    display: block;
}

/* Compact field, divider and icon helpers reused by mobile flow steps. */
.of-flow-button__svg {
    display: block;
    width: var(--of-flow-chevron-size);
    height: var(--of-flow-chevron-size);
    flex: 0 0 var(--of-flow-chevron-size);
}

.of-flow-divider {
    display: grid;
    grid-template-columns: minmax(0, 110px) auto minmax(0, 101px);
    align-items: center;
    justify-content: center;
    gap: 48px;
    width: 100%;
    color: var(--of-flow-brand-color);
}

.of-flow-divider span {
    display: block;
    min-width: 0;
    height: 1px;
    background: var(--of-flow-border-muted);
}

.of-flow-divider strong {
    display: block;
    color: currentColor;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 1.4px;
}

.of-flow-text-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    color: var(--of-flow-brand-color);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    background: #ffffff;
    border: 1px solid var(--of-flow-border);
    border-radius: var(--of-flow-list-item-radius);
    box-shadow: none;
    box-sizing: border-box;
}

.of-flow-text-input::placeholder {
    color: var(--of-flow-border);
    opacity: 1;
}

.of-flow-text-input:focus {
    border-color: var(--of-border-focus, #0065ff);
    outline: none;
    box-shadow: var(--of-focus-ring, 0 0 0 2px rgba(0, 101, 255, 0.22));
}

.of-flow-field--invalid .of-flow-text-input,
.of-search-field--invalid .of-flow-text-input {
    border-color: #d92d20;
}


/* iPhone 12 mini / very narrow viewport structural density.
   Structural flow tokens live here; theme/white-label CSS remains brand-only. */
@media (max-width: 390px) {
    body.of-body {
        --of-flow-header-height: 60px;
        --of-flow-footer-height: 52px;
        --of-flow-content-x: 24px;
        --of-flow-content-width: 312px;
        --of-flow-list-item-height: 44px;
        --of-flow-action-height: 44px;
        --of-flow-action-gap: 5px;
        --of-flow-action-padding-x: 18px;
        --of-flow-chevron-size: 18px;
        --of-typography-step-title-size: 18px;
        --of-typography-step-title-line-height: 23px;
        --of-typography-step-title-letter-spacing: 0.7px;
    }

    .of-flow-title,
    .of-search-section__title {
        font-size: 18px !important;
        line-height: 23px !important;
        letter-spacing: 0.7px !important;
    }

    .of-flow-text {
        font-size: 15.5px !important;
        line-height: 21px !important;
        letter-spacing: 0.6px !important;
    }

    .of-flow-field__label,
    .of-search-field__label {
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .of-flow-input {
        min-height: 46px !important;
        padding: 10px 40px 10px 11px !important;
        font-size: 20px !important;
        line-height: 22px !important;
        border-radius: 10px !important;
    }

    .of-flow-text-input,
    .of-search-input:not(.of-flow-input),
    .of-booking__input,
    .of-booking__select,
    .of-booking__textarea {
        min-height: 40px !important;
        padding: 9px 11px !important;
        font-size: 15px !important;
        line-height: 20px !important;
    }

    .of-flow-message {
        grid-template-columns: 22px minmax(0, 1fr) !important;
        gap: 6px !important;
        font-size: 12px !important;
        line-height: 16px !important;
    }

    .of-flow-message__icon {
        width: 22px !important;
        height: 22px !important;
    }

    .of-flow-actions,
    .of-search-actions {
        gap: 10px !important;
    }

    .of-flow-button,
    .of-search-action,
    .of-partner-detail__action,
    .of-booking__action {
        min-height: var(--of-flow-action-height) !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        font-size: 15px !important;
        line-height: 20px !important;
    }

    .of-flow-button--compact {
        padding-left: 26px !important;
        padding-right: 20px !important;
    }

    .of-flow-list-section {
        gap: 8px !important;
    }

    .of-flow-list-title {
        font-size: 17px !important;
        line-height: 22px !important;
    }

    .of-flow-list {
        gap: 5px !important;
    }

    .of-flow-list-item {
        grid-template-columns: 42px minmax(0, 1fr) 20px !important;
        gap: 10px !important;
        min-height: 48px !important;
        padding: 6px 10px 6px 8px !important;
    }

    .of-flow-list-item__icon {
        width: 30px !important;
        height: 30px !important;
    }

    .of-flow-list-item__icon::before {
        width: 23px !important;
        height: 23px !important;
    }

    .of-flow-list-item__title {
        font-size: 15px !important;
        line-height: 18px !important;
    }

    .of-flow-list-item__description,
    .of-search-service__description.of-flow-list-item__description {
        font-size: 11px !important;
        line-height: 13px !important;
    }

    .of-flow-list-item__chevron {
        width: 20px !important;
        height: 20px !important;
    }

    .of-flow-choice-group {
        gap: 5px !important;
    }

    .of-flow-choice-card {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-height: 48px !important;
        padding: 6px 10px 6px 16px !important;
        font-size: 15px !important;
        line-height: 18px !important;
        background: #ffffff !important;
    }

    .of-flow-vehicle-card {
        grid-template-columns: 56px minmax(0, 1fr) auto !important;
        gap: 10px !important;
        min-height: 66px !important;
        padding: 10px !important;
        border-radius: 9px !important;
    }

    .of-flow-vehicle-card__icon {
        width: 48px !important;
        height: 48px !important;
    }

    .of-flow-vehicle-card__icon svg {
        width: 29px !important;
        height: 29px !important;
    }

    .of-flow-vehicle-card__content {
        gap: 4px !important;
    }

    .of-flow-vehicle-card__title {
        font-size: 18px !important;
        line-height: 22px !important;
    }

    .of-flow-vehicle-card__meta {
        min-height: 24px !important;
        padding: 2px 7px !important;
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .of-flow-change-button {
        min-height: 38px !important;
        padding: 7px 14px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    body.of-body {
        --of-flow-header-height: 54px;
        --of-flow-footer-height: 46px;
    }

    .of-flow-title,
    .of-search-section__title {
        font-size: 17px !important;
        line-height: 22px !important;
    }

    .of-flow-text {
        font-size: 15px !important;
        line-height: 20px !important;
    }

    .of-flow-actions,
    .of-search-actions {
        gap: 8px !important;
    }
}

/* Transversal footer alignment.
   Keep footer text alignment in one shared place, even when each screen exposes its own shell footer class. */
.of-flow-footer,
.of-search-shell__footer,
.of-results-shell__footer,
.of-partner-detail__footer,
.of-booking__footer {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Transversal footer typography/wrapping normalization.
   Keep legal footer copy visually identical across search, results, partner detail and booking shells. */
body.of-body .of-flow-footer,
body.of-body .of-search-shell__footer,
body.of-body .of-results-shell__footer,
body.of-body .of-partner-detail__footer,
body.of-body .of-booking__footer {
    justify-content: flex-start !important;
    text-align: left !important;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
}

body.of-body .of-flow-footer > span,
body.of-body .of-search-shell__footer > span,
body.of-body .of-results-shell__footer > span,
body.of-body .of-partner-detail__footer > span,
body.of-body .of-booking__footer > span {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
}

@media (max-width: 390px) {
    body.of-body .of-flow-footer,
    body.of-body .of-search-shell__footer,
    body.of-body .of-results-shell__footer,
    body.of-body .of-partner-detail__footer,
    body.of-body .of-booking__footer {
        padding: 5px 14px !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    body.of-body .of-flow-footer,
    body.of-body .of-search-shell__footer,
    body.of-body .of-results-shell__footer,
    body.of-body .of-partner-detail__footer,
    body.of-body .of-booking__footer {
        padding: 3px 10px !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
    }
}

/* Search panel. */
/* Shared responsive shell: WEB mobile is the visual base and opens into tablet/desktop. */

.of-home__search {
    display: grid;
    grid-template-rows: var(--of-flow-header-height, 88px) minmax(0, 1fr) var(--of-flow-footer-height, 88px);
    align-content: stretch;
    gap: 0;
    min-height: calc(100vh - var(--of-header-height, 64px) - (var(--of-layout-margin, 16px) * 2));
    overflow: hidden;
    background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
    border: 0;
    border-radius: 32px;
    box-sizing: border-box;
}
.of-search-shell__header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    width: 100%;
    min-height: 88px;
    padding: 0 24px;
    background: var(--ayvens-theme-neutral-neutral-white, #ffffff);
    box-sizing: border-box;
}
.of-search-shell__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 168px;
    height: 34px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    background-image: var(--of-brand-logo-url, url("/Images/ayvens-logo.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.of-search-shell__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
.of-search-shell__back span {
    display: block;
    width: 18px;
    height: 24px;
    background-color: currentColor;
    clip-path: polygon(66% 0, 78% 12%, 42% 50%, 78% 88%, 66% 100%, 18% 50%);
}
.of-search-shell__header-spacer {
    justify-self: end;
    width: 34px;
    height: 34px;
}
#of-home-ctn[data-current-step="plate"] .of-search-shell__back {
    visibility: hidden;
    pointer-events: none;
}
.of-search-shell > .of-wireframe-title {
    display: none;
}
.of-search-shell__body {
    display: grid;
    align-content: start;
    min-height: 0;
    padding: var(--of-space-lg, 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
}
.of-search-shell__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 88px;
    padding: 14px 24px;
    color: var(--of-text-inverse, #ffffff);
    font-family: var(--of-font-family-brand);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    background: var(--ayvens-theme-brand-secondary-400, #0f3549);
    box-sizing: border-box;
}
.of-search-flow {
    display: grid;
    gap: 0;
    width: 100%;
    min-height: 0;
}
.of-search-step {
    display: none;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    animation: of-search-step-enter 160ms ease-out both;
}
.of-search-section__title {
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    font-family: var(--of-font-family-brand);
    font-size: var(--of-typography-step-title-size, 20px);
    font-style: normal;
    font-weight: var(--of-typography-step-title-weight, 600);
    line-height: var(--of-typography-step-title-line-height, normal);
    letter-spacing: var(--of-typography-step-title-letter-spacing, 1px);
}
.of-search-field {
    display: grid;
    gap: 6px;
}
.of-search-field__label {
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: var(--of-typography-form-label-size, 14px);
    font-style: normal;
    font-weight: var(--of-typography-form-label-weight, 700);
    line-height: var(--of-typography-form-label-line-height, 20px);
}
.of-search-field__value {
    color: var(--of-text, #16212f);
    font-family: var(--of-font-family-base);
    font-size: 15px;
    overflow-wrap: anywhere;
}
.of-search-field__message {
    display: none;
    color: var(--of-text-subtle, #6b7280);
    font-family: var(--of-font-family-base);
    font-size: 12px;
}
.of-search-field--invalid .of-search-field__message {
    display: block;
    color: var(--of-error, #b42318);
}
.of-search-input {
    width: 100%;
    min-height: var(--of-input-height, 48px);
    padding: 12px 14px;
    color: var(--of-text, #16212f);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 600;
    background: var(--of-surface-bg, #ffffff);
    border: 1px solid var(--of-border, #cdd4db);
    border-radius: var(--of-radius-md, 12px);
    box-sizing: border-box;
    box-shadow: none;
}
.of-search-input::placeholder {
    color: var(--of-text-subtle, #6b7280);
    font-weight: 400;
}
.of-search-input:focus {
    border-color: var(--of-border-focus, #00505c);
    outline: none;
    box-shadow: var(--of-focus-ring, 0 0 0 3px rgba(0, 80, 92, 0.18));
}
.of-search-field--invalid .of-search-input {
    border-color: var(--of-error, #b42318);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}
.of-search-choice-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.of-search-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--of-text, #16212f);
    font-family: var(--of-font-family-brand);
    font-size: 15px;
    font-weight: var(--of-font-weight-semibold, 600);
    background: var(--of-surface-bg, #ffffff);
    border: 1px solid var(--of-border, #cdd4db);
    border-radius: var(--of-radius-sm, 8px);
    box-sizing: border-box;
    cursor: pointer;
}
.of-search-choice input {
    margin: 0;
}
.of-search-actions {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin-top: 4px;
}
.of-search-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--of-button-height, 48px);
    padding: 12px 24px;
    color: var(--of-action-secondary-text, #00505c);
    font-family: var(--of-font-family-brand);
    font-size: 17px;
    font-style: normal;
    font-weight: var(--of-font-weight-semibold, 600);
    line-height: 24px;
    text-align: center;
    background: var(--of-action-secondary-bg, transparent);
    border: 1px solid var(--of-action-secondary-border, #cdd4db);
    border-radius: var(--of-action-radius, 999px);
    cursor: pointer;
    box-sizing: border-box;
}
.of-search-action--primary {
    color: var(--of-action-primary-text, #ffffff);
    background: var(--of-action-primary-bg, #00505c);
    border-color: var(--of-action-primary-bg, #00505c);
}
.of-search-action--secondary {
    color: var(--of-action-secondary-text, #00505c);
    background: var(--of-surface-bg, #ffffff);
    border-color: var(--of-action-secondary-text, #00505c);
}
.of-wireframe-lines {
    display: grid;
    align-content: start;
    gap: 14px;
}
.of-wireframe-line {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 86px;
    padding: 14px;
    background: var(--of-surface-bg, #ffffff);
    border: 1px solid var(--of-border, #cdd4db);
    border-radius: var(--of-radius-sm, 8px);
    box-sizing: border-box;
}
.of-wireframe-line__label {
    color: var(--of-text-muted, #465564);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.of-wireframe-line__value {
    color: var(--of-text, #16212f);
    font-size: 16px;
    overflow-wrap: anywhere;
}

@media (max-width: 479px) {
    html,
    body {
        width: 100%;
        min-height: 100dvh;
        overflow-x: hidden;
    }
    .of-header {
        display: none;
    }
    .of-main {
        width: 100%;
        min-height: 100dvh;
        padding: 0;
    }
    .of-home {
        width: 100%;
        min-height: 100dvh;
    }
    .of-home__search {
        position: fixed;
        inset: 0;
        z-index: 20;
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        grid-template-rows: 88px minmax(0, 1fr) 88px;
        border-radius: 0;
    }
    .of-search-shell__header,
    .of-search-shell__body,
    .of-search-shell__footer {
        width: 100%;
        min-width: 0;
    }
    .of-search-shell__body {
        min-height: 0;
        padding: 24px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .of-search-shell__footer {
        min-height: 88px;
        flex-shrink: 0;
    }
}

@media (min-width: 480px) {
    .of-home__search {
        grid-template-rows: auto minmax(0, 1fr);
        border-radius: 32px;
    }
    .of-search-shell__header {
        min-height: 72px;
    }
    .of-search-shell__footer {
        display: none;
    }
    .of-search-shell__body {
        padding: 24px;
    }
}


@media (min-width: 480px) {
    .of-home__search,
    .of-search-shell__body {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
}

/* 4C.1: keep the search panel scrollable but hide the browser scrollbar. */
.of-search-shell__body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.of-search-shell__body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.of-home__search {
    overflow: hidden !important;
}

/* Header can switch from logo to step title when the active step declares data-flow-title. */
.of-search-shell--step-title .of-search-shell__logo {
    width: auto;
    min-width: 0;
    height: auto;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.4px;
    text-indent: 0;
    background-image: none;
}


/* iPhone 12 mini / very narrow viewport shell density for T1-T4. */
@media (max-width: 390px) {
    html,
    body {
        width: 100%;
        min-height: 100dvh;
        overflow-x: hidden;
    }

    .of-main,
    .of-home {
        min-height: 100dvh;
    }

    .of-home__search {
        grid-template-rows: var(--of-flow-header-height) minmax(0, 1fr) var(--of-flow-footer-height) !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .of-search-shell__header {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        min-height: var(--of-flow-header-height) !important;
        height: var(--of-flow-header-height) !important;
        padding: 0 18px !important;
    }

    .of-search-shell__logo {
        width: 128px !important;
        height: 26px !important;
    }

    .of-search-shell--step-title .of-search-shell__logo {
        font-size: 17px !important;
        line-height: 22px !important;
        letter-spacing: 0.25px !important;
    }

    .of-search-shell__back,
    .of-search-shell__header-spacer {
        width: 28px !important;
        height: 28px !important;
    }

    .of-search-shell__back span {
        width: 15px !important;
        height: 20px !important;
    }

    .of-search-shell__body {
        padding: 16px var(--of-flow-content-x) !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .of-search-shell__footer {
        min-height: var(--of-flow-footer-height) !important;
        height: var(--of-flow-footer-height) !important;
        padding: 5px 14px !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    .of-search-shell__header {
        min-height: var(--of-flow-header-height) !important;
        height: var(--of-flow-header-height) !important;
    }

    .of-search-shell__logo {
        width: 120px !important;
        height: 24px !important;
    }

    .of-search-shell--step-title .of-search-shell__logo {
        font-size: 16px !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
    }

    .of-search-shell__footer {
        min-height: var(--of-flow-footer-height) !important;
        height: var(--of-flow-footer-height) !important;
        padding: 3px 10px !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
    }

    .of-search-shell__body {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .of-home__search {
        grid-template-rows: var(--of-flow-header-height) minmax(0, 1fr) var(--of-flow-footer-height) !important;
    }
}

/* iPhone 12 mini / very narrow viewport: keep dynamic header step titles on one line.
   The generic compact logo width must not constrain textual step titles. */
@media (max-width: 390px) {
    .of-search-shell--step-title .of-search-shell__logo {
        width: 100% !important;
        max-width: 260px !important;
        min-width: 0 !important;
        height: auto !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        justify-self: center !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    .of-search-shell--step-title .of-search-shell__logo {
        width: 100% !important;
        max-width: 260px !important;
        min-width: 0 !important;
        height: auto !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 15.5px !important;
        line-height: 19px !important;
        letter-spacing: 0.15px !important;
    }
}

/* Plate step. */
/* T1 is the first consumer of the reusable mobile-first flow components. */
/* The classes remain compatible with the existing JavaScript and future tablet/desktop adaptations. */

#of-home-ctn[data-current-step="plate"] #of-search-plate-step {
    display: grid;
}

.of-search-plate-step {
    align-content: start;
    padding: 0;
}

.of-search-plate-content {
    gap: 0;
}

.of-search-plate-intro {
    display: grid;
    gap: 15px;
    margin-bottom: 38px;
}

.of-search-plate__title,
.of-search-plate__description {
    max-width: 360px;
}

.of-search-plate-field {
    margin-bottom: 20px;
}

.of-search-plate-field__optional {
    display: inline-flex;
    min-width: 0;
    color: var(--of-flow-brand-color, #0f3549);
}

.of-search-plate-field .of-search-field__message {
    display: none;
}

.of-search-plate-status {
    display: none;
}

.of-search-plate-info {
    width: 100%;
    max-width: 360px;
    margin-bottom: 51px;
}

.of-search-plate-actions {
    justify-items: center;
}

.of-search-plate-action {
    width: auto;
    min-width: 0;
    margin: 0;
}

.of-search-plate-action--primary {
    min-width: 155px;
}

.of-search-plate-action--secondary {
    min-width: 261.5px;
}

@media (max-width: 479px) {
    .of-search-plate-step {
        min-height: 0;
    }

    .of-search-plate-content {
        width: 100%;
        max-width: 360px;
    }
}

@media (min-width: 480px) {
    .of-search-plate-content {
        max-width: 360px;
    }

    .of-search-plate-intro {
        margin-bottom: 28px;
    }

    .of-search-plate-field {
        margin-bottom: 16px;
    }

    .of-search-plate-info {
        margin-bottom: 32px;
    }
}

/* Plate validation: use normal flow so the error text appears only when active. */
#of-search-plate-step .of-search-plate-field .of-flow-field__validation-message {
    display: none !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    font-size: 13px;
    line-height: 18px;
    visibility: visible !important;
}

#of-search-plate-step .of-search-plate-field.of-search-field--invalid .of-flow-field__validation-message,
#of-search-plate-step .of-search-plate-field[data-validation-state="invalid"] .of-flow-field__validation-message {
    display: block !important;
    margin-top: 6px !important;
    color: #d92d20;
}

#of-search-plate-step .of-search-plate-field.of-search-field--valid .of-flow-field__validation-message,
#of-search-plate-step .of-search-plate-field[data-validation-state="valid"] .of-flow-field__validation-message {
    display: none !important;
    min-height: 0 !important;
    margin-top: 0 !important;
}

/* Plate validation icon: the input is 60px high in the Figma-based T1 field. */
#of-search-plate-step .of-search-plate-field.of-search-field--invalid::after,
#of-search-plate-step .of-search-plate-field.of-search-field--valid::after,
#of-search-plate-step .of-search-plate-field[data-validation-state="invalid"]::after,
#of-search-plate-step .of-search-plate-field[data-validation-state="valid"]::after,
#of-search-plate-step .of-search-plate-field.of-search-field--invalid::before,
#of-search-plate-step .of-search-plate-field[data-validation-state="invalid"]::before {
    top: 50px;
}

/* Plate input focus must override invalid/success borders after search.panel.css. */
#of-search-plate-step .of-search-plate-field .of-flow-input:focus,
#of-search-plate-step .of-search-plate-field .of-search-input:focus,
#of-search-plate-step .of-search-plate-field.of-search-field--invalid .of-flow-input:focus,
#of-search-plate-step .of-search-plate-field.of-search-field--invalid .of-search-input:focus,
#of-search-plate-step .of-search-plate-field.of-search-field--valid .of-flow-input:focus,
#of-search-plate-step .of-search-plate-field.of-search-field--valid .of-search-input:focus,
#of-search-plate-step .of-search-plate-field[data-validation-state="invalid"] .of-flow-input:focus,
#of-search-plate-step .of-search-plate-field[data-validation-state="invalid"] .of-search-input:focus,
#of-search-plate-step .of-search-plate-field[data-validation-state="valid"] .of-flow-input:focus,
#of-search-plate-step .of-search-plate-field[data-validation-state="valid"] .of-search-input:focus {
    border-color: #0065ff !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 101, 255, 0.22) !important;
}

/* Plate validation icon: use the real Ayvens/Figma SVG asset. */
/* Keep validation messages in normal flow; only the icon rendering is overridden. */
#of-search-plate-step .of-search-plate-field {
    position: relative;
}

#of-search-plate-step .of-search-plate-field.of-search-field--invalid::before,
#of-search-plate-step .of-search-plate-field[data-validation-state="invalid"]::before {
    display: none !important;
}

#of-search-plate-step .of-search-plate-field.of-search-field--invalid::after,
#of-search-plate-step .of-search-plate-field[data-validation-state="invalid"]::after {
    top: 50px !important;
    right: 14px !important;
    width: 20px !important;
    height: 20px !important;
    content: "" !important;
    background-color: transparent !important;
    background-image: url("/Images/Flow/Icons/error-circle-filled.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    border-radius: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: translateY(-50%) !important;
}

#of-search-plate-step .of-search-plate-field.of-search-field--valid::after,
#of-search-plate-step .of-search-plate-field[data-validation-state="valid"]::after {
    top: 50px !important;
    right: 14px !important;
    width: 20px !important;
    height: 20px !important;
    content: "" !important;
    background-color: transparent !important;
    background-image: url("/Images/Flow/Icons/check-circle-filled.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    border-radius: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: translateY(-50%) !important;
}


/* Final T1 validation refinement: show only error text; success is represented by the check icon inside the input. */
#of-search-plate-step #of-search-plate-field[data-validation-state="valid"] #of-search-plate-validation,
#of-search-plate-step .of-search-plate-field[data-validation-state="valid"] .of-flow-field__validation-message,
#of-search-plate-step .of-search-plate-field.of-search-field--valid .of-flow-field__validation-message {
    display: none !important;
    min-height: 0 !important;
    margin-top: 0 !important;
}

#of-search-plate-step #of-search-plate-field[data-validation-state="invalid"] #of-search-plate-validation,
#of-search-plate-step .of-search-plate-field[data-validation-state="invalid"] .of-flow-field__validation-message,
#of-search-plate-step .of-search-plate-field.of-search-field--invalid .of-flow-field__validation-message {
    display: block !important;
    margin-top: 6px !important;
    color: #d92d20 !important;
}

#of-search-plate-step .of-search-plate-field.of-search-field--valid::after,
#of-search-plate-step .of-search-plate-field[data-validation-state="valid"]::after {
    background-image: url("/Images/Flow/Icons/check-circle-filled.svg") !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    right: 14px !important;
    top: 50px !important;
    width: 20px !important;
    height: 20px !important;
    transform: translateY(-50%) !important;
}

/* Final T1 validation icon placement. */
/* The icon belongs inside the input, while validation text stays in normal flow below it. */
#of-search-plate-step #of-search-plate-field {
    position: relative !important;
}

#of-search-plate-step #of-search-plate-field::before {
    display: none !important;
    content: none !important;
}

#of-search-plate-step #of-search-plate-field::after {
    display: none !important;
    position: absolute !important;
    top: 50px !important;
    right: 14px !important;
    left: auto !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    content: "" !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

#of-search-plate-step #of-search-plate-field.of-search-field--invalid::after,
#of-search-plate-step #of-search-plate-field[data-validation-state="invalid"]::after {
    display: block !important;
    background-image: url("/Images/Flow/Icons/error-circle-filled.svg") !important;
}

#of-search-plate-step #of-search-plate-field.of-search-field--valid::after,
#of-search-plate-step #of-search-plate-field[data-validation-state="valid"]::after {
    display: block !important;
    background-image: url("/Images/Flow/Icons/check-circle-filled.svg") !important;
}

#of-search-plate-step #of-search-plate-field[data-validation-state="valid"] #of-search-plate-validation,
#of-search-plate-step #of-search-plate-field.of-search-field--valid #of-search-plate-validation,
#of-search-plate-step #of-search-plate-field[data-validation-state="valid"] .of-flow-field__validation-message,
#of-search-plate-step #of-search-plate-field.of-search-field--valid .of-flow-field__validation-message {
    display: none !important;
    min-height: 0 !important;
    margin-top: 0 !important;
}

#of-search-plate-step #of-search-plate-field[data-validation-state="invalid"] #of-search-plate-validation,
#of-search-plate-step #of-search-plate-field.of-search-field--invalid #of-search-plate-validation,
#of-search-plate-step #of-search-plate-field[data-validation-state="invalid"] .of-flow-field__validation-message,
#of-search-plate-step #of-search-plate-field.of-search-field--invalid .of-flow-field__validation-message {
    display: block !important;
    margin-top: 6px !important;
    color: #d92d20 !important;
}


/* iPhone 12 mini / very narrow viewport: T1 plate compact spacing and icon alignment. */
@media (max-width: 390px) {
    #of-home-ctn[data-current-step="plate"] .of-search-shell__body {
        padding-top: 22px !important;
    }

    #of-home-ctn[data-current-step="plate"] .of-search-plate-intro {
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    #of-home-ctn[data-current-step="plate"] .of-search-plate-field {
        margin-bottom: 12px !important;
    }

    #of-home-ctn[data-current-step="plate"] .of-search-plate-info {
        margin-bottom: 18px !important;
    }

    #of-home-ctn[data-current-step="plate"] .of-search-plate-action--primary {
        min-width: 136px !important;
    }

    #of-home-ctn[data-current-step="plate"] .of-search-plate-action--secondary {
        min-width: 220px !important;
    }

    #of-search-plate-step #of-search-plate-field::after {
        top: 49px !important;
        right: 12px !important;
        width: 18px !important;
        height: 18px !important;
        background-size: 18px 18px !important;
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    #of-home-ctn[data-current-step="plate"] .of-search-shell__body {
        padding-top: 18px !important;
    }

    #of-home-ctn[data-current-step="plate"] .of-search-plate-intro {
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    #of-home-ctn[data-current-step="plate"] .of-search-plate-field,
    #of-home-ctn[data-current-step="plate"] .of-search-plate-info {
        margin-bottom: 12px !important;
    }
}

/* v7: validation icon belongs to the input background, not to the field pseudo-element. */
/* This removes the fragile label+input top offset and keeps the icon vertically centered in the input. */
#of-search-plate-step #of-search-plate-field::after,
#of-search-plate-step #of-search-plate-field::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

#of-search-plate-step #of-search-plate-field.of-search-field--valid .of-search-plate-input,
#of-search-plate-step #of-search-plate-field[data-validation-state="valid"] .of-search-plate-input,
#of-search-plate-step #of-search-plate-field.of-search-field--invalid .of-search-plate-input,
#of-search-plate-step #of-search-plate-field[data-validation-state="invalid"] .of-search-plate-input {
    padding-right: 44px !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px 18px !important;
}

#of-search-plate-step #of-search-plate-field.of-search-field--valid .of-search-plate-input,
#of-search-plate-step #of-search-plate-field[data-validation-state="valid"] .of-search-plate-input {
    background-image: url("/Images/Flow/Icons/check-circle-filled.svg") !important;
}

#of-search-plate-step #of-search-plate-field.of-search-field--invalid .of-search-plate-input,
#of-search-plate-step #of-search-plate-field[data-validation-state="invalid"] .of-search-plate-input {
    background-image: url("/Images/Flow/Icons/error-circle-filled.svg") !important;
}

/* Service step. */
/* Screen-specific rules only. Reusable cards, lists, icons and buttons live in flow.components.css. */

#of-home-ctn[data-current-step="service"] #of-search-service-step {
    display: grid;
}

.of-search-service-step {
    align-content: start;
}

.of-search-service-content {
    gap: 24px;
}

.of-search-service-intro {
    display: grid;
    gap: 12px;
}

.of-search-service__title {
    font-size: 20px;
    line-height: 31px;
    letter-spacing: 1.4px;
}

.of-search-service__description {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 1.4px;
}

.of-search-services {
    display: grid;
    gap: 24px;
}

#of-search-panel[data-has-plate="false"][data-has-vehicle-data="false"] .of-search-service__description--with-vehicle,
#of-search-panel[data-has-plate="false"][data-has-vehicle-data="false"] .of-search-service-vehicle-summary {
    display: none;
}


#of-search-panel[data-has-plate="false"][data-has-vehicle-data="false"] .of-search-service__description--with-vehicle,
#of-search-panel[data-has-plate="false"][data-has-vehicle-data="false"] .of-search-service-vehicle-summary {
    display: none;
}

#of-search-panel[data-has-plate="true"] .of-search-service__description--with-vehicle,
#of-search-panel[data-has-vehicle-data="true"] .of-search-service__description--with-vehicle,
#of-search-panel[data-has-plate="true"] .of-search-service-vehicle-summary,
#of-search-panel[data-has-vehicle-data="true"] .of-search-service-vehicle-summary {
    display: block;
}

.of-search-service-group[hidden] {
    display: none !important;
}

.of-search-service--selected {
    border-color: var(--of-flow-brand-color, #0f3549);
    box-shadow: 0 0 0 3px rgba(15, 53, 73, 0.12);
}

.of-search-service--disabled {
    color: #64748b;
    background: #f4f6f8;
    border-color: #d6dbe1;
    cursor: not-allowed;
    opacity: 0.78;
}

.of-search-service--disabled .of-flow-list-item__description,
.of-search-service--disabled .of-search-service__disabled-reason {
    color: #64748b;
}

.of-search-service__description.of-flow-list-item__description {
    font-size: 12px;
    line-height: 14px;
}

@media (max-width: 479px) {
    .of-search-service-content {
        padding-bottom: 24px;
    }
}

@media (min-width: 480px) {
    .of-search-services {
        gap: 22px;
    }
}

/* Header back is used on this screen; suppress the generated in-body back button. */
.of-search-service-step > .of-search-actions {
    display: none !important;
}

@media (max-width: 390px) {
    .of-search-service-content {
        gap: 22px;
    }

    .of-search-service-intro {
        gap: 10px;
    }

    .of-search-service__title {
        font-size: 20px;
        line-height: 30px;
    }

    .of-search-service__description {
        font-size: 17px;
        line-height: 25px;
        letter-spacing: 1.2px;
    }
}


/* iPhone 12 mini / very narrow viewport: T2 service step compact spacing. */
@media (max-width: 390px) {
    #of-home-ctn[data-current-step="service"] .of-search-shell__body {
        padding-top: 14px !important;
        padding-bottom: 10px !important;
    }

    .of-search-service-content {
        gap: 14px !important;
        padding-bottom: 8px !important;
    }

    .of-search-service-intro {
        gap: 6px !important;
    }

    .of-search-service__title {
        font-size: 18px !important;
        line-height: 23px !important;
        letter-spacing: 0.7px !important;
    }

    .of-search-service__description {
        font-size: 15px !important;
        line-height: 20px !important;
        letter-spacing: 0.6px !important;
    }

    .of-search-services {
        gap: 8px !important;
    }
}

/* Mandatory plate step. */
/* Used when a no-plate search selects a service that requires a valid plate. */

#of-home-ctn[data-current-step="mandatory-plate"] #of-search-mandatory-plate-step {
    display: grid;
}

.of-search-mandatory-plate-step {
    align-content: start;
    padding: 0;
}

.of-search-mandatory-plate-content {
    gap: 0;
}

.of-search-mandatory-plate-intro {
    display: grid;
    gap: 32px;
    margin-bottom: 54px;
}

.of-search-mandatory-plate__title {
    max-width: 360px;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 1px;
}

.of-search-mandatory-plate__description {
    max-width: 340px;
    font-size: 18px;
    font-weight: 500;
    line-height: 25.2px;
    letter-spacing: 1px;
}

.of-search-mandatory-plate-field {
    margin-bottom: 132px;
    position: relative;
}

.of-search-mandatory-plate__input {
    padding-right: 44px;
    text-transform: uppercase;
}

.of-search-mandatory-plate__input::placeholder {
    text-transform: uppercase;
}

.of-search-mandatory-plate-actions {
    justify-items: center;
}

.of-search-mandatory-plate__continue {
    min-width: 155px;
    min-height: 56px;
    font-weight: 500;
}

.of-search-mandatory-plate__continue:disabled,
.of-search-mandatory-plate__continue[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.45;
}

#of-search-mandatory-plate-step .of-search-mandatory-plate-field .of-flow-field__validation-message {
    display: none !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    font-size: 13px;
    line-height: 18px;
    visibility: visible !important;
}

#of-search-mandatory-plate-step .of-search-mandatory-plate-field.of-search-field--invalid .of-flow-field__validation-message,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field[data-validation-state="invalid"] .of-flow-field__validation-message {
    display: block !important;
    margin-top: 6px !important;
    color: #d92d20 !important;
}

#of-search-mandatory-plate-step .of-search-mandatory-plate-field.of-search-field--valid .of-flow-field__validation-message,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field[data-validation-state="valid"] .of-flow-field__validation-message {
    display: none !important;
    min-height: 0 !important;
    margin-top: 0 !important;
}

#of-search-mandatory-plate-step .of-search-mandatory-plate-field.of-search-field--invalid .of-search-mandatory-plate__input,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field[data-validation-state="invalid"] .of-search-mandatory-plate__input {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

#of-search-mandatory-plate-step .of-search-mandatory-plate-field.of-search-field--valid .of-search-mandatory-plate__input,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field[data-validation-state="valid"] .of-search-mandatory-plate__input {
    border-color: #00857a;
    box-shadow: 0 0 0 3px rgba(0, 133, 122, 0.12);
}

#of-search-mandatory-plate-step .of-search-mandatory-plate-field .of-flow-input:focus,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field .of-search-input:focus,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field.of-search-field--invalid .of-flow-input:focus,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field.of-search-field--invalid .of-search-input:focus,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field.of-search-field--valid .of-flow-input:focus,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field.of-search-field--valid .of-search-input:focus,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field[data-validation-state="invalid"] .of-flow-input:focus,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field[data-validation-state="invalid"] .of-search-input:focus,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field[data-validation-state="valid"] .of-flow-input:focus,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field[data-validation-state="valid"] .of-search-input:focus {
    border-color: #0065ff !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 101, 255, 0.22) !important;
}

#of-search-mandatory-plate-step .of-search-mandatory-plate-field::before {
    display: none !important;
    content: none !important;
}

#of-search-mandatory-plate-step .of-search-mandatory-plate-field.of-search-field--invalid::after,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field[data-validation-state="invalid"]::after {
    top: 50px !important;
    right: 14px !important;
    width: 20px !important;
    height: 20px !important;
    content: "" !important;
    background-color: transparent !important;
    background-image: url("/Images/Flow/Icons/error-circle-filled.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    border-radius: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: translateY(-50%) !important;
}

#of-search-mandatory-plate-step .of-search-mandatory-plate-field.of-search-field--valid::after,
#of-search-mandatory-plate-step .of-search-mandatory-plate-field[data-validation-state="valid"]::after {
    top: 50px !important;
    right: 14px !important;
    width: 20px !important;
    height: 20px !important;
    content: "" !important;
    background-color: transparent !important;
    background-image: url("/Images/Flow/Icons/check-circle-filled.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    border-radius: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: translateY(-50%) !important;
}

/* Header back is used on this screen; suppress the generated in-body back button. */
.of-search-mandatory-plate-step .of-search-actions .of-search-back-btn {
    display: none !important;
}

@media (max-width: 479px) {
    .of-search-mandatory-plate-content {
        width: 100%;
        max-width: 360px;
    }
}

@media (max-width: 390px) {
    .of-search-mandatory-plate-intro {
        gap: 28px;
        margin-bottom: 48px;
    }

    .of-search-mandatory-plate__description {
        font-size: 17px;
        line-height: 24px;
    }

    .of-search-mandatory-plate-field {
        margin-bottom: 112px;
    }
}

/* Final mandatory plate validation alignment. */
/* This screen must use the same input/icon geometry as T1 Plate. */
#of-search-mandatory-plate-step #of-search-mandatory-plate-field {
    position: relative !important;
    width: 100%;
    max-width: 360px;
}

#of-search-mandatory-plate-step #of-search-mandatory-plate {
    padding-right: 44px;
    text-transform: uppercase;
}

#of-search-mandatory-plate-step #of-search-mandatory-plate-field::before {
    display: none !important;
    content: none !important;
}

#of-search-mandatory-plate-step #of-search-mandatory-plate-field::after {
    display: none !important;
    position: absolute !important;
    top: 50px !important;
    right: 14px !important;
    left: auto !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    content: "" !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

#of-search-mandatory-plate-step #of-search-mandatory-plate-field.of-search-field--invalid::after,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field[data-validation-state="invalid"]::after {
    display: block !important;
    background-image: url("/Images/Flow/Icons/error-circle-filled.svg") !important;
}

#of-search-mandatory-plate-step #of-search-mandatory-plate-field.of-search-field--valid::after,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field[data-validation-state="valid"]::after {
    display: block !important;
    background-image: url("/Images/Flow/Icons/check-circle-filled.svg") !important;
}

#of-search-mandatory-plate-step #of-search-mandatory-plate-field[data-validation-state="valid"] #of-search-mandatory-plate-status,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field.of-search-field--valid #of-search-mandatory-plate-status,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field[data-validation-state="valid"] .of-flow-field__validation-message,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field.of-search-field--valid .of-flow-field__validation-message {
    display: none !important;
    min-height: 0 !important;
    margin-top: 0 !important;
}

#of-search-mandatory-plate-step #of-search-mandatory-plate-field[data-validation-state="invalid"] #of-search-mandatory-plate-status,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field.of-search-field--invalid #of-search-mandatory-plate-status,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field[data-validation-state="invalid"] .of-flow-field__validation-message,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field.of-search-field--invalid .of-flow-field__validation-message {
    display: block !important;
    margin-top: 6px !important;
    color: #d92d20 !important;
}


/* iPhone 12 mini / very narrow viewport: mandatory plate follows T1 geometry. */
@media (max-width: 390px) {
    .of-search-mandatory-plate-intro {
        gap: 18px !important;
        margin-bottom: 28px !important;
    }

    .of-search-mandatory-plate__title {
        font-size: 18px !important;
        line-height: 23px !important;
    }

    .of-search-mandatory-plate__description {
        font-size: 15.5px !important;
        line-height: 21px !important;
    }

    .of-search-mandatory-plate-field {
        margin-bottom: 34px !important;
    }

    #of-search-mandatory-plate-step #of-search-mandatory-plate-field::after {
        top: 46px !important;
        right: 12px !important;
        width: 18px !important;
        height: 18px !important;
        background-size: 18px 18px !important;
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 390px) {
    #of-search-mandatory-plate-step #of-search-mandatory-plate-field::after {
        top: 49px !important;
        right: 12px !important;
        width: 18px !important;
        height: 18px !important;
        background-size: 18px 18px !important;
        transform: translateY(-50%) !important;
    }
}

/* v7: mandatory plate validation icon also belongs to the input background. */
#of-search-mandatory-plate-step #of-search-mandatory-plate-field::after,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

#of-search-mandatory-plate-step #of-search-mandatory-plate-field.of-search-field--valid .of-search-mandatory-plate__input,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field[data-validation-state="valid"] .of-search-mandatory-plate__input,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field.of-search-field--invalid .of-search-mandatory-plate__input,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field[data-validation-state="invalid"] .of-search-mandatory-plate__input {
    padding-right: 44px !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px 18px !important;
}

#of-search-mandatory-plate-step #of-search-mandatory-plate-field.of-search-field--valid .of-search-mandatory-plate__input,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field[data-validation-state="valid"] .of-search-mandatory-plate__input {
    background-image: url("/Images/Flow/Icons/check-circle-filled.svg") !important;
}

#of-search-mandatory-plate-step #of-search-mandatory-plate-field.of-search-field--invalid .of-search-mandatory-plate__input,
#of-search-mandatory-plate-step #of-search-mandatory-plate-field[data-validation-state="invalid"] .of-search-mandatory-plate__input {
    background-image: url("/Images/Flow/Icons/error-circle-filled.svg") !important;
}

/* Fuel type step. */
/* Screen-specific rules only. Shared buttons and shell styles live in flow.components.css/search.panel.css. */

#of-home-ctn[data-current-step="fuel-type"] #of-search-fuel-type-step {
    display: grid;
}

.of-search-fuel-type-step {
    align-content: start;
}

.of-search-fuel-type-content {
    gap: 28px;
}

.of-search-fuel-type__intro {
    max-width: 310px;
    font-size: 18px;
    font-weight: 500;
    line-height: 25.2px;
    letter-spacing: 1.1px;
}

.of-search-fuel-types {
    display: grid;
    gap: 4px;
    width: 100%;
}

.of-search-fuel-type {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 17px;
    width: 100%;
    min-height: var(--of-flow-list-item-height, 50px);
    padding: 7px 12px 7px 24px;
    color: var(--of-flow-brand-color, #0f3549);
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--of-flow-border-muted, #d7d7d7);
    border-radius: var(--of-flow-list-item-radius, 4px);
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.of-search-fuel-type:hover,
.of-search-fuel-type--selected {
    border-color: var(--of-flow-brand-color, #0f3549);
}

.of-search-fuel-type--selected {
    box-shadow: 0 0 0 3px rgba(15, 53, 73, 0.10);
}

.of-search-fuel-type__radio {
    width: 16px;
    height: 16px;
    border: 1px solid #8d989f;
    border-radius: 999px;
    box-sizing: border-box;
    background: #ffffff;
}

.of-search-fuel-type--selected .of-search-fuel-type__radio {
    border: 5px solid var(--of-flow-brand-color, #0f3549);
}

.of-search-fuel-type__name {
    color: inherit;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.2px;
}

.of-search-fuel-type__actions {
    justify-items: center;
    margin-top: 96px;
}

.of-search-fuel-type__continue {
    min-width: 143px;
    min-height: 56px;
    font-weight: 500;
}

.of-search-fuel-type__continue:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Header back is used on this screen; suppress the generated in-body back button. */
.of-search-fuel-type-step .of-search-actions .of-search-back-btn {
    display: none !important;
}

@media (max-width: 390px) {
    .of-search-fuel-type-content {
        gap: 24px;
    }

    .of-search-fuel-type__intro {
        font-size: 17px;
        line-height: 24px;
    }

    .of-search-fuel-types {
        gap: 4px;
    }

    .of-search-fuel-type {
        min-height: 50px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .of-search-fuel-type__actions {
        margin-top: 52px;
    }
}

/* Brand step. */
/* Screen-specific rules only. Shared buttons and shell styles live in flow.components.css/search.panel.css. */

#of-home-ctn[data-current-step="brand"] #of-search-brand-step {
    display: grid;
}

.of-search-brand-step {
    align-content: start;
}

.of-search-brand-content {
    gap: 0;
}

.of-search-brand__intro {
    max-width: 316px;
    margin-bottom: 57px;
    font-size: 18px;
    font-weight: 500;
    line-height: 25.2px;
    letter-spacing: 1.1px;
}

.of-search-brand-picker {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
}

.of-search-brand__input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    background: #ffffff;
    border: 1px solid var(--of-flow-border-muted, #d7d7d7);
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}

.of-search-brand__input::placeholder {
    color: #6f7d86;
    opacity: 1;
}

.of-search-brand__input:focus {
    border-color: #0065ff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 101, 255, 0.22);
}

.of-search-brand-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    display: grid;
    width: 100%;
    max-height: 326px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 16px rgba(15, 53, 73, 0.08);
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.of-search-brand-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.of-search-brand-list[hidden] {
    display: none !important;
}

.of-search-brand-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    background: #ffffff;
    border: 0;
    cursor: pointer;
}

.of-search-brand-option:hover,
.of-search-brand-option:focus,
.of-search-brand-option--selected {
    color: var(--of-flow-brand-color, #0f3549);
    background: #f3f6f8;
    outline: none;
}

.of-search-brand-option[hidden] {
    display: none !important;
}

.of-search-brand__actions {
    position: relative;
    z-index: 1;
    justify-items: center;
    margin-top: 167px;
}

.of-search-brand__continue {
    min-width: 155px;
    min-height: 56px;
    font-weight: 500;
}

.of-search-brand__continue:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Header back is used on this screen; suppress the generated in-body back button. */
.of-search-brand-step .of-search-actions .of-search-back-btn {
    display: none !important;
}

@media (max-width: 390px) {
    .of-search-brand__intro {
        margin-bottom: 54px;
        font-size: 17px;
        line-height: 24px;
    }

    .of-search-brand-list {
        max-height: 300px;
    }

    .of-search-brand-option {
        min-height: 46px;
        font-size: 17px;
        line-height: 23px;
    }

    .of-search-brand__actions {
        margin-top: 132px;
    }
}

/* Revision damage step. */

#of-home-ctn[data-current-step="damage"] #of-search-damage-step {
    display: grid;
}

.of-search-damage-step {
    min-height: 100%;
}

.of-search-damage-content {
    align-content: start;
    gap: 24px;
}

.of-search-damage-intro {
    display: grid;
    gap: 12px;
}

.of-search-damage__title {
    margin: 0;
}

.of-search-damage__text {
    max-width: 330px;
    margin: 0;
}

.of-search-damage-field,
.of-search-damage-description-field {
    gap: 8px;
}

.of-search-damage-choice {
    min-height: 50px;
}

.of-search-damage-choice:has(input:checked) {
    border-color: var(--of-flow-brand-color);
    box-shadow: 0 0 0 2px rgba(15, 53, 73, 0.08);
}

.of-search-damage-description {
    min-height: 112px;
}

.of-search-damage-actions {
    padding-top: 6px;
}

/* Keep the textarea counter and validation message on the same meta row. */
.of-search-damage-description-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 4px;
}

.of-search-damage-description-field .of-flow-field__label,
.of-search-damage-description-field .of-flow-label,
.of-search-damage-description-field label,
.of-search-damage-description-field textarea {
    grid-column: 1 / -1;
}

.of-search-damage-description-field .of-flow-validation-message {
    grid-column: 1 / 2;
    grid-row: 3;
    align-self: start;
    margin: 0 !important;
    padding: 0;
}

.of-search-damage-description-field .of-flow-counter {
    grid-column: 2 / 3;
    grid-row: 3;
    align-self: start;
    justify-self: end;
    margin: 0 !important;
    padding: 0;
    line-height: 16px;
    text-align: right;
}

/* The generic flow field has author styles, so force the native hidden state for the conditional damage description field. */
#of-search-damage-description-field[hidden] {
    display: none !important;
}

/* Back navigation belongs to the shell header in this mobile flow step. */
#of-search-damage-step .of-search-back-btn,
#of-search-damage-step [data-search-back="true"] {
    display: none !important;
}

/* Location step. */
/* Screen-specific rules only. Reusable flow typography, fields and buttons live in flow.components.css. */

#of-home-ctn[data-current-step="location"] #of-search-location-step {
    display: grid;
}

.of-search-location-step {
    min-height: 100%;
}

.of-search-location-content {
    align-content: start;
    gap: 0;
}

.of-search-location-intro {
    display: grid;
    gap: 15px;
    margin-bottom: 54px;
}

.of-search-location__title,
.of-search-location__text {
    max-width: 360px;
    margin: 0;
}

.of-search-location__title {
    font-size: 20px;
    line-height: 31px;
    letter-spacing: 1.4px;
}

.of-search-location__text {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 1.4px;
}

.of-search-location-current-field,
.of-search-location-address-field {
    gap: 8px;
}

.of-search-location-current-field {
    justify-items: center;
    margin-bottom: 30px;
}

.of-search-location-current-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto;
    min-width: 294px;
    min-height: 50px;
    padding: 12px 24px;
    color: #ffffff;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
    background: var(--of-flow-brand-color, #0f3549);
    border: 2px solid var(--of-flow-brand-color, #0f3549);
    border-radius: var(--of-flow-radius-pill, 999px);
    box-sizing: border-box;
    box-shadow: none;
    cursor: pointer;
}

.of-search-location-current-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.of-search-location-current-button__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.of-search-location-current-button:focus-within,
.of-search-location-current-button:hover {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 53, 73, 0.16);
}

.of-search-location-current-button:has(input:disabled) {
    color: #ffffff;
    background: #6f818c;
    border-color: #6f818c;
    cursor: not-allowed;
    opacity: 0.72;
}

.of-search-location-current-status {
    display: none;
    color: var(--of-flow-text-muted, #9a9a9a);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

.of-search-location-separator {
    display: grid;
    grid-template-columns: minmax(0, 110px) auto minmax(0, 101px);
    align-items: center;
    justify-content: center;
    gap: 48px;
    width: 100%;
    margin-bottom: 28px;
    color: var(--of-flow-brand-color, #0f3549);
}

.of-search-location-separator span {
    display: block;
    height: 1px;
    background: var(--of-flow-border-muted, #d7d7d7);
}

.of-search-location-separator strong {
    display: block;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 1.4px;
}

.of-search-location-address-field {
    width: 294px;
    justify-self: center;
    margin-bottom: 18px;
}

.of-search-location-address-field .of-flow-field__label {
    font-size: 14px;
    line-height: 20px;
}

.of-search-location-address-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    background: #ffffff;
    border: 1px solid var(--of-flow-border, #757777);
    border-radius: var(--of-flow-list-item-radius, 4px);
    box-shadow: none;
    box-sizing: border-box;
}

.of-search-location-address-input::placeholder {
    color: var(--of-flow-border, #757777);
    opacity: 1;
}

.of-search-location-address-input:focus {
    border-color: var(--of-border-focus, #0065ff);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 101, 255, 0.22);
}

.of-search-location-actions {
    justify-items: center;
    padding-top: 8px;
    padding-bottom: 24px;
}

.of-search-location-confirm-button {
    min-width: 200px;
    min-height: 48px;
    padding: 12px 24px;
}

.of-search-location-confirm-button:disabled {
    cursor: wait;
    opacity: 0.78;
}

.of-search-input--places-hidden,
.of-search-location-hidden-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.of-search-place-autocomplete,
gmp-place-autocomplete {
    display: block;
    width: 100%;
    min-height: 42px;
    color-scheme: light;
}

.of-search-location-address-field .of-search-place-autocomplete,
.of-search-location-address-field gmp-place-autocomplete {
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

.of-search-location-current-field.of-search-field--invalid,
.of-search-location-address-field.of-search-field--invalid,
.of-search-location-current-field.of-flow-field--invalid,
.of-search-location-address-field.of-flow-field--invalid {
    color: #d92d20;
}

.of-search-location-current-field.of-search-field--invalid .of-flow-validation-message,
.of-search-location-address-field.of-search-field--invalid .of-flow-validation-message,
.of-search-location-current-field.of-flow-field--invalid .of-flow-validation-message,
.of-search-location-address-field.of-flow-field--invalid .of-flow-validation-message {
    display: block;
}

.of-search-location-address-field.of-search-field--invalid .of-search-location-address-input,
.of-search-location-address-field.of-flow-field--invalid .of-search-location-address-input {
    border-color: #d92d20;
}

/* Back navigation belongs to the shell header in this mobile flow step. */
#of-search-location-step .of-search-back-btn,
#of-search-location-step [data-search-back="true"] {
    display: none !important;
}

@media (max-width: 390px) {
    .of-search-location-intro {
        margin-bottom: 54px;
    }

    .of-search-location-current-field {
        margin-bottom: 30px;
    }

    .of-search-location-current-button {
        min-width: 280px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 16px;
    }

    .of-search-location-separator {
        gap: 28px;
    }

    .of-search-location-address-field {
        width: 294px;
        max-width: 100%;
        margin-bottom: 18px;
    }
}

@media (min-width: 480px) {
    .of-search-location-content {
        max-width: 360px;
    }

    .of-search-location-intro {
        margin-bottom: 54px;
    }

    .of-search-location-current-field {
        margin-bottom: 30px;
    }

    .of-search-location-address-field {
        margin-bottom: 18px;
    }
}


/* iPhone 12 mini / very narrow viewport: T4 location compact spacing. */
@media (max-width: 390px) {
    #of-home-ctn[data-current-step="location"] .of-search-shell__body {
        padding-top: 16px !important;
        padding-bottom: 10px !important;
    }

    .of-search-location-intro {
        gap: 8px !important;
        margin-bottom: 28px !important;
    }

    .of-search-location__title {
        font-size: 18px !important;
        line-height: 23px !important;
        letter-spacing: 0.7px !important;
    }

    .of-search-location__text {
        font-size: 15.5px !important;
        line-height: 21px !important;
        letter-spacing: 0.6px !important;
    }

    .of-search-location-current-field {
        margin-bottom: 18px !important;
    }

    .of-search-location-current-button {
        min-width: 276px !important;
        min-height: 46px !important;
        padding: 10px 18px !important;
        font-size: 15px !important;
        line-height: 20px !important;
    }

    .of-search-location-current-button__icon {
        width: 21px !important;
        height: 21px !important;
        flex-basis: 21px !important;
    }

    .of-search-location-separator {
        grid-template-columns: minmax(0, 94px) auto minmax(0, 94px) !important;
        gap: 20px !important;
        margin-bottom: 16px !important;
    }

    .of-search-location-separator strong {
        font-size: 17px !important;
        line-height: 22px !important;
    }

    .of-search-location-address-field {
        width: 276px !important;
        margin-bottom: 12px !important;
    }

    .of-search-location-actions {
        padding-top: 4px !important;
        padding-bottom: 10px !important;
    }
}

/* Vehicle summary. */
/* Vehicle card structure is defined in flow.components.css. */
/* This file keeps only search-specific compatibility aliases. */

.of-search-vehicle-summary[hidden] {
    display: none !important;
}

.of-search-vehicle-summary__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;
}

/* Results panel. */
/* Mobile T5 follows the Figma result/map composition: header, full map, location CTA, cards rail and footer. */
/* Tablet and desktop keep the existing results surface without the mobile shell chrome. */

.of-home__results {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    min-width: 0;
    min-height: 0;
    background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.of-results-shell__header,
.of-results-shell__footer {
    display: none;
}

.of-results-shell__body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.of-results-shell__change-location {
    position: absolute;
    left: 50%;
    z-index: 18;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 18px;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    font-family: var(--of-font-family-brand);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--ayvens-theme-brand-secondary-400, #0f3549);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(15, 53, 73, 0.14);
    transform: translateX(-50%);
    cursor: pointer;
}

.of-results-shell__change-location-icon {
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 18.2c-.4 0-.8-.2-1-.5-3.2-4-4.8-7-4.8-9.1A5.8 5.8 0 0 1 10 2.8a5.8 5.8 0 0 1 5.8 5.8c0 2.1-1.6 5.1-4.8 9.1-.2.3-.6.5-1 .5Zm0-8a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Zm0 5.6c2.5-3.3 3.8-5.7 3.8-7.2A3.8 3.8 0 0 0 10 4.8a3.8 3.8 0 0 0-3.8 3.8c0 1.5 1.3 3.9 3.8 7.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 18.2c-.4 0-.8-.2-1-.5-3.2-4-4.8-7-4.8-9.1A5.8 5.8 0 0 1 10 2.8a5.8 5.8 0 0 1 5.8 5.8c0 2.1-1.6 5.1-4.8 9.1-.2.3-.6.5-1 .5Zm0-8a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Zm0 5.6c2.5-3.3 3.8-5.7 3.8-7.2A3.8 3.8 0 0 0 10 4.8a3.8 3.8 0 0 0-3.8 3.8c0 1.5 1.3 3.9 3.8 7.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.of-results-message {
    display: none !important;
}

@media (max-width: 479px) {
    .of-home__results {
        grid-template-rows: 88px minmax(0, 1fr) 88px;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        border-radius: 0;
    }

    .of-results-shell__header {
        position: relative;
        z-index: 22;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        width: 100%;
        min-height: 88px;
        padding: 0 24px;
        background: var(--ayvens-theme-neutral-neutral-white, #ffffff);
        border: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    .of-results-shell__back {
        display: inline-flex;
        grid-column: 1;
        align-items: center;
        justify-content: center;
        justify-self: start;
        width: 34px;
        height: 34px;
        padding: 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: transparent;
        border: 0;
        border-radius: 999px;
        cursor: pointer;
    }

    .of-results-shell__back span {
        display: block;
        width: 18px;
        height: 24px;
        background-color: currentColor;
        clip-path: polygon(66% 0, 78% 12%, 42% 50%, 78% 88%, 66% 100%, 18% 50%);
    }

    .of-results-shell__heading {
        grid-column: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        text-align: center;
    }

    .of-results-shell__title {
        min-width: 0;
        max-width: 100%;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
        font-size: 20px;
        font-weight: 700;
        line-height: 26px;
        letter-spacing: 0.4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .of-results-shell__footer {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--of-flow-footer-height, 88px);
        padding: 14px 24px;
        color: var(--of-text-inverse, #ffffff);
        font-family: var(--of-font-family-brand);
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        background: var(--ayvens-theme-brand-secondary-400, #0f3549);
        box-sizing: border-box;
    }

    .of-results-shell__change-location {
        bottom: 176px;
        display: inline-flex;
    }

    #of-home-ctn[data-results-state="empty"] .of-results-shell__change-location {
        bottom: 24px;
    }
}

@media (min-width: 480px) {
    .of-home__results {
        position: relative;
        grid-template-rows: minmax(0, 1fr) !important;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .of-results-shell__header,
    .of-results-shell__footer {
        display: none !important;
    }

    .of-results-shell__body {
        position: absolute;
        inset: 0;
        display: block;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }
}


/* iPhone 12 mini / very narrow viewport: T5 results shell compact header/footer. */
@media (max-width: 390px) {
    .of-home__results {
        grid-template-rows: var(--of-flow-header-height) minmax(0, 1fr) var(--of-flow-footer-height) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .of-results-shell__header {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        min-height: var(--of-flow-header-height) !important;
        height: var(--of-flow-header-height) !important;
        padding: 0 18px !important;
    }

    .of-results-shell__back {
        width: 28px !important;
        height: 28px !important;
    }

    .of-results-shell__back span {
        width: 15px !important;
        height: 20px !important;
    }

    .of-results-shell__title {
        font-size: 17px !important;
        line-height: 22px !important;
        letter-spacing: 0.25px !important;
    }

    .of-results-shell__footer {
        min-height: var(--of-flow-footer-height) !important;
        height: var(--of-flow-footer-height) !important;
        padding: 5px 14px !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
    }

    .of-results-shell__footer span {
        display: block !important;
        max-width: 320px !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    .of-results-shell__header {
        min-height: var(--of-flow-header-height) !important;
        height: var(--of-flow-header-height) !important;
    }

    .of-results-shell__title {
        font-size: 16px !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
    }

    .of-results-shell__footer {
        min-height: var(--of-flow-footer-height) !important;
        height: var(--of-flow-footer-height) !important;
        padding: 3px 10px !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
    }
}

/* Map panel. */
/* The map is the dominant results surface across tablet and desktop. */
/* Mobile lets the map run to the footer while cards float above it. */

.of-home__results-map {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    background: transparent;
    overflow: hidden;
}

.of-home__results-map > .of-wireframe-title,
.of-home__results-map > .of-wireframe-footer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.of-map-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #e5ecef;
    border: 0;
    border-radius: 18px;
}

.of-map-canvas {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 360px;
}

.of-map-status {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    text-align: center;
    color: #00505c;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 80, 92, 0.16);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

.of-map-status--loading,
.of-map-status--unavailable {
    inset: 0;
    padding: 24px;
    background: rgba(229, 236, 239, 0.92);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#of-results-map-panel[data-map-state="initial"] .of-map-status--initial,
#of-results-map-panel[data-map-state="loading"] .of-map-status--loading,
#of-results-map-panel[data-map-state="empty"] .of-map-status--empty,
#of-results-map-panel[data-map-state="unavailable"] .of-map-status--unavailable,
#of-results-map-panel[data-map-state="error"] .of-map-status--unavailable {
    display: flex;
}

#of-results-map-panel[data-map-state="ready"] .of-map-status {
    display: none;
}

.of-map-info-window {
    display: grid;
    gap: 6px;
    min-width: 180px;
    color: #001a33;
}

.of-map-info-window__meta {
    display: flex;
    gap: 12px;
    color: #465564;
    white-space: nowrap;
}

.of-map-marker {
    position: relative;
    width: 38px;
    height: 49px;
    cursor: pointer;
    transform-origin: center bottom;
    transition: transform 160ms ease;
}

.of-map-marker--image {
    width: 62px;
    height: 62px;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
}

.of-map-marker--image img {
    display: block;
    width: 62px;
    height: 62px;
    object-fit: contain;
    pointer-events: none;
}

.of-map-marker--image::before,
.of-map-marker--image::after {
    display: none;
}

.of-map-marker--image.of-map-marker--selected {
    transform: scale(1.24);
    filter: drop-shadow(0 14px 22px rgba(0, 80, 92, 0.42));
}

.of-map-marker::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 31px;
    height: 31px;
    content: "";
    background: #df3b2f;
    border: 3px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    transform: translateX(-50%) rotate(-45deg);
}

.of-map-marker::after {
    position: absolute;
    top: 11px;
    left: 50%;
    width: 9px;
    height: 9px;
    content: "";
    background: #ffffff;
    border-radius: 50%;
    transform: translateX(-50%);
}

.of-map-marker--selected::before {
    background: #00505c;
    box-shadow: 0 10px 24px rgba(0, 80, 92, 0.42);
    transform: translateX(-50%) rotate(-45deg) scale(1.12);
}

.of-classification--premium::before { background: #2c517f; }
.of-classification--green::before { background: #1f8f5f; }
.of-classification--yellow::before { background: #f3c84b; }
.of-classification--orange::before { background: #df7f26; }
.of-classification--red::before { background: #c83a32; }
.of-classification--black::before { background: #1f2933; }
.of-classification--brown::before { background: #8a5a32; }
.of-classification--cyan::before { background: #42b8d8; }
.of-classification--unknown::before { background: #7b8794; }

.of-map-marker--search::before {
    background: #111827;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.42);
}

.of-map-marker--search::after {
    background: #ffffff;
}

.of-map-marker--bouncing {
    animation: of-map-marker-bounce 700ms ease-in-out infinite;
}

@keyframes of-map-marker-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@media (max-width: 479px) {
    .of-map-shell {
        border-radius: 0;
    }

    .of-map-status {
        bottom: 92px;
    }
}


@media (max-width: 479px) {
    .of-home__results-map,
    .of-map-shell,
    .of-map-canvas {
        min-height: 0;
    }
}

@media (min-width: 480px) {
    .of-map-shell,
    .of-map-canvas {
        min-height: 360px;
    }
}

/* 4A.6: make the map consume the full results body instead of falling back to its 360px minimum. */
@media (min-width: 480px) {
    .of-home__results-map {
        position: absolute;
        inset: 0;
        display: block;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0 !important;
    }

    .of-map-shell,
    .of-map-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0 !important;
    }
}

/* T5 mobile marker/card linking. */
.of-map-marker__index {
    position: absolute;
    top: 5px;
    left: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    background: #ffffff;
    border: 2px solid var(--ayvens-theme-brand-secondary-400, #0f3549);
    border-radius: 999px;
    font-family: var(--of-font-family-brand, Arial, sans-serif);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    transform: translateX(-50%);
    pointer-events: none;
}

.of-map-marker--image .of-map-marker__index {
    top: 10px;
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.of-map-marker--selected .of-map-marker__index {
    color: #ffffff;
    background: var(--ayvens-theme-brand-secondary-400, #0f3549);
}

.of-map-marker--image.of-map-marker--selected::before {
    position: absolute;
    top: 2px;
    left: 50%;
    z-index: -1;
    display: block;
    width: 68px;
    height: 68px;
    content: "";
    background: rgba(0, 80, 92, 0.16);
    border: 2px solid rgba(0, 80, 92, 0.26);
    border-radius: 999px;
    transform: translateX(-50%);
}


/* T5 selected marker: remove the translucent halo around image markers. */
.of-map-marker--image.of-map-marker--selected::before {
    display: none !important;
    content: none !important;
}

/* Partners panel. */
/* Cards float over the map and follow the responsive wireframe. */
/* Mobile and tablet use a horizontal rail. Desktop uses a vertical overlay rail. */

.of-home__results-partners {
    z-index: 20;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: var(--of-text, #16212f);
    background: transparent;
    pointer-events: none;
}

.of-home__results-partners > .of-wireframe-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.of-home__results-partners > .of-wireframe-footer {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    pointer-events: auto;
}

.of-results-message {
    display: none !important;
}

.of-results-partners-list {
    min-width: 0;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.of-results-partners-list::-webkit-scrollbar,
.of-search-shell__body::-webkit-scrollbar,
.of-home__search::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.of-results-partner-card {
    position: relative;
    display: grid;
    min-width: 0;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(15, 53, 73, 0.12);
    border-radius: 5px;
    box-shadow: 0 4px 14px rgba(15, 53, 73, 0.14);
    cursor: pointer;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.of-results-partner-card:hover,
.of-results-partner-card:focus-visible,
.of-results-partner-card--map-hover {
    border-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    box-shadow: 0 8px 18px rgba(15, 53, 73, 0.18);
    transform: translateY(-1px);
}

.of-results-partner-card--selected {
    border-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    box-shadow: 0 0 0 2px rgba(15, 53, 73, 0.12), 0 8px 18px rgba(15, 53, 73, 0.18);
}

.of-results-partner-card__index {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    background: #ffffff;
    border: 1px solid rgba(15, 53, 73, 0.22);
    border-radius: 999px;
    font-family: var(--of-font-family-brand, Arial, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

.of-results-partner-card--selected .of-results-partner-card__index {
    color: #ffffff;
    background: var(--ayvens-theme-brand-secondary-400, #0f3549);
    border-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
}

.of-results-partner-card__main {
    display: grid;
    min-width: 0;
}

.of-results-partner-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    min-width: 0;
}

.of-results-partner-card__name {
    display: block;
    min-width: 0;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    font-family: var(--of-font-family-brand, Arial, sans-serif);
    font-weight: 600;
    letter-spacing: 0.2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.of-results-partner-card__classification {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 35px;
    height: 12px;
    padding: 0 4px;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    font-family: var(--of-font-family-brand, Arial, sans-serif);
    font-size: 6px;
    font-weight: 500;
    line-height: 8px;
    border-radius: 2px;
    box-shadow: none;
}

.of-classification--premium { background: #ffd24d; }
.of-classification--green { color: #ffffff; background: #008578; }
.of-classification--yellow { color: #16212f; background: #f3c84b; }
.of-classification--orange { color: #ffffff; background: #df7f26; }
.of-classification--red { color: #ffffff; background: #c83a32; }
.of-classification--black { color: #ffffff; background: #1f2933; }
.of-classification--brown { color: #ffffff; background: #8a5a32; }
.of-classification--cyan { color: #16212f; background: #42b8d8; }
.of-classification--unknown { color: #ffffff; background: #7b8794; }

.of-results-partner-card__address {
    display: -webkit-box;
    overflow: hidden;
    color: var(--of-text-muted, #465564);
    font-size: 12px;
    line-height: 18px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.of-results-partner-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    font-family: var(--of-font-family-brand, Arial, sans-serif);
    font-size: 12px;
    line-height: 16px;
}

.of-results-partner-card__distance,
.of-results-partner-card__phone {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f7f9fa;
    border: 1px solid rgba(15, 53, 73, 0.08);
    white-space: nowrap;
}

.of-results-partner-card__distance::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    margin-right: 4px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 18.2c-.4 0-.8-.2-1-.5-3.2-4-4.8-7-4.8-9.1A5.8 5.8 0 0 1 10 2.8a5.8 5.8 0 0 1 5.8 5.8c0 2.1-1.6 5.1-4.8 9.1-.2.3-.6.5-1 .5Zm0-8a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Zm0 5.6c2.5-3.3 3.8-5.7 3.8-7.2A3.8 3.8 0 0 0 10 4.8a3.8 3.8 0 0 0-3.8 3.8c0 1.5 1.3 3.9 3.8 7.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M10 18.2c-.4 0-.8-.2-1-.5-3.2-4-4.8-7-4.8-9.1A5.8 5.8 0 0 1 10 2.8a5.8 5.8 0 0 1 5.8 5.8c0 2.1-1.6 5.1-4.8 9.1-.2.3-.6.5-1 .5Zm0-8a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6Zm0 5.6c2.5-3.3 3.8-5.7 3.8-7.2A3.8 3.8 0 0 0 10 4.8a3.8 3.8 0 0 0-3.8 3.8c0 1.5 1.3 3.9 3.8 7.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}


.of-results-partner-card__select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 28px;
    padding: 6px 12px;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    background: #ffffff;
    border: 1px solid var(--ayvens-theme-brand-secondary-400, #0f3549);
    border-radius: 999px;
    font-family: var(--of-font-family-brand, Arial, sans-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    cursor: pointer;
}



.of-results-partner-card--selected .of-results-partner-card__select {
    color: #ffffff;
    background: var(--ayvens-theme-brand-secondary-400, #0f3549);
    border-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
}

.of-results-partner-card__select::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5.8 13.3 4.7 12.2 8.9 8 4.7 3.8 5.8 2.7 11.1 8z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5.8 13.3 4.7 12.2 8.9 8 4.7 3.8 5.8 2.7 11.1 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.of-results-partner-card__phone::before {
    content: "Tel. ";
    font-weight: 600;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
}

@media (max-width: 1199px) {
    .of-results-partners-list {
        display: flex;
        align-items: stretch;
        gap: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
    }

    .of-results-partner-card {
        flex: 0 0 min(220px, 62vw);
        scroll-snap-align: start;
    }
}

@media (max-width: 479px) {
    .of-home__results-partners {
        position: absolute;
        right: 0;
        bottom: 24px;
        left: 0;
        height: 146px;
        min-height: 146px;
    }

    .of-home__results-partners > .of-wireframe-footer {
        overflow: visible;
    }

    .of-results-partners-list {
        gap: 15px;
        height: 146px;
        min-height: 146px;
        padding: 0 0 0 12px;
    }

    .of-results-partner-card {
        grid-template-rows: 1fr;
        flex: 0 0 178px;
        width: 178px;
        height: 146px;
        min-height: 146px;
        padding: 32px 12px 52px 16px;
        gap: 0;
        border-radius: 5px;
    }

    .of-results-partner-card__index {
        top: 9px;
        left: 9px;
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .of-results-partner-card__main {
        display: contents;
    }

    .of-results-partner-card__header {
        display: block;
        min-width: 0;
    }

    .of-results-partner-card__name {
        max-width: 100%;
        font-size: 13px;
        font-weight: 600;
        line-height: 17px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    .of-results-partner-card__classification {
        position: absolute;
        top: 7px;
        right: 7px;
        z-index: 2;
        min-width: 66px;
        height: 16px;
        padding: 0 5px;
        font-size: 7px;
        line-height: 9px;
    }

    .of-results-partner-card__address,
    .of-results-partner-card__phone {
        display: none !important;
    }

    .of-results-partner-card__meta {
        display: block;
        margin-top: 6px;
        min-width: 0;
        font-size: 12px;
        line-height: 20px;
    }

    .of-results-partner-card__distance {
        min-height: 25px;
        padding: 0;
        background: transparent;
        border: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
    }

    .of-results-partner-card__select {
        position: absolute;
        right: 12px;
        bottom: 8px;
        left: 12px;
        display: inline-flex;
        min-height: 28px;
        padding: 5px 12px;
        font-size: 11px;
        line-height: 13px;
        width: auto;
    }


}

@media (min-width: 480px) and (max-width: 1199px) {
    .of-results-partner-card {
        flex-basis: min(248px, 36vw);
        padding: 12px 14px;
        border-radius: 14px;
    }
}

@media (min-width: 1200px) {
    .of-results-partners-list {
        display: grid;
        align-content: start;
        gap: 10px;
        height: 100%;
        padding: 2px;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .of-results-partner-card {
        grid-template-rows: minmax(0, auto) auto;
        gap: 8px;
        padding: 12px 14px;
        border-radius: 14px;
    }
}

.of-results-partners-list {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.of-results-partners-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

@media (max-width: 1199px) {
    .of-results-partners-list {
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
}

/* Partner detail panel. */
/* Dedicated T6 screen: full-screen mobile detail, no map background. */

.of-partner-detail[hidden] {
    display: none !important;
}

.of-partner-detail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: var(--of-flow-header-height, 88px) minmax(0, 1fr) auto;
    width: 100% !important;
    max-width: none !important;
    min-height: 100%;
    color: var(--of-flow-brand-color, #0f3549);
    background: var(--of-flow-page-bg, #f6f6f6);
    box-sizing: border-box;
    overflow: hidden;
}

.of-partner-detail__header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: var(--of-flow-header-height, 88px);
    padding: 0 24px;
    background: #ffffff;
    box-sizing: border-box;
}

.of-partner-detail__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.of-partner-detail__back:focus-visible,
.of-partner-detail__action:focus-visible {
    outline: none;
    box-shadow: var(--of-focus-ring, 0 0 0 3px rgba(0, 80, 92, 0.18));
}

.of-partner-detail__back-icon {
    display: block;
    width: 18px;
    height: 24px;
    background-color: currentColor;
    clip-path: polygon(66% 0, 78% 12%, 42% 50%, 78% 88%, 66% 100%, 18% 50%);
}

.of-partner-detail__title {
    min-width: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.of-partner-detail__header-spacer {
    width: 34px;
    height: 34px;
}

.of-partner-detail__body {
    min-height: 0;
    padding: 20px 29px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
}

.of-partner-detail__body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.of-partner-detail > .of-wireframe-title,
.of-partner-detail__body > .of-wireframe-title {
    display: none;
}

.of-partner-detail__empty {
    display: none;
    width: min(100%, 326px);
    margin: 0 auto;
    padding: 24px;
    color: #6b7280;
    font-size: 14px;
    box-sizing: border-box;
}

.of-partner-detail[data-partner-detail-state="empty"] .of-partner-detail__empty {
    display: block;
}

.of-partner-detail[data-partner-detail-state="empty"] .of-partner-detail__card {
    display: none;
}

.of-partner-detail[data-partner-detail-state="empty"] .of-partner-detail__actions {
    display: none;
}

.of-partner-detail__card {
    display: grid;
    align-content: start;
    gap: 26px;
    width: min(100%, 326px);
    margin: 0 auto;
    box-sizing: border-box;
}

.of-partner-detail__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    min-width: 0;
}

.of-partner-detail__heading-main {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-top: 0;
}

.of-partner-detail__name {
    display: block;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.6px;
    overflow-wrap: anywhere;
}

.of-partner-detail__service {
    color: #7b8d99;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.5px;
}

.of-partner-detail__classification {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    margin-top: -6px;
    margin-bottom: -2px;
    min-height: 24px;
    max-width: 132px;
    padding: 4px 7px;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 17px;
    text-align: center;
    background: #ffd83d;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.of-partner-detail__classification[hidden],
.of-partner-detail__distance[hidden] {
    display: none !important;
}

.of-partner-detail__classification.of-classification--premium,
.of-partner-detail__classification.of-classification--green,
.of-partner-detail__classification.of-classification--yellow {
    color: var(--of-flow-brand-color, #0f3549);
    background: #ffd83d;
}

.of-partner-detail__classification.of-classification--orange {
    color: #ffffff;
    background: #df7f26;
}

.of-partner-detail__classification.of-classification--red {
    color: #ffffff;
    background: #c83a32;
}

.of-partner-detail__classification.of-classification--black {
    color: #ffffff;
    background: #1f2933;
}

.of-partner-detail__classification.of-classification--brown {
    color: #ffffff;
    background: #8a5a32;
}

.of-partner-detail__classification.of-classification--cyan {
    color: var(--of-flow-brand-color, #0f3549);
    background: #42b8d8;
}

.of-partner-detail__classification.of-classification--unknown {
    color: #ffffff;
    background: #7b8794;
}

.of-partner-detail__info-list {
    display: grid;
    gap: 16px;
}

.of-partner-detail__info-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 64px;
    padding: 9px 14px;
    background: #ffffff;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(15, 53, 73, 0.03);
    box-sizing: border-box;
}

.of-partner-detail__info-icon {
    display: block;
    width: 40px;
    height: 40px;
    justify-self: center;
    object-fit: contain;
}

.of-partner-detail__info-content {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.of-partner-detail__info-label {
    color: #7b8d99;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.4px;
}

.of-partner-detail__info-value {
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.4px;
    overflow-wrap: anywhere;
}

.of-partner-detail__distance {
    display: none;
}

.of-partner-detail__actions {
    display: grid;
    justify-items: center;
    gap: 22px;
    width: min(100%, 326px);
    margin: 12px auto 0;
}

.of-partner-detail__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 18px;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    background: #ffffff;
    border: 1.5px solid var(--of-flow-brand-color, #0f3549);
    border-radius: 999px;
    box-sizing: border-box;
    cursor: pointer;
}

.of-partner-detail__action:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.of-partner-detail__action-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: contain;
}

.of-partner-detail__action--primary {
    min-width: 104px;
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
    border-color: var(--of-flow-brand-color, #0f3549);
}

.of-partner-detail__action--secondary {
    min-width: 166px;
    color: var(--of-flow-brand-color, #0f3549);
    background: #ffffff;
    border-color: var(--of-flow-brand-color, #0f3549);
}

.of-partner-detail__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--of-flow-footer-height, 88px);
    padding: 14px 24px;
    color: #ffffff;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.3px;
    background: var(--of-flow-brand-color, #0f3549);
    box-sizing: border-box;
}

@media (max-width: 479px) {
    #of-home-ctn[data-current-stage="partner-detail"] {
        min-height: 100dvh;
    }

    .of-partner-detail {
        height: 100dvh;
        min-height: 100dvh;
    }
}

@media (max-width: 380px) {
    .of-partner-detail__body {
        padding: 20px 30px 20px;
    }

    .of-partner-detail__card {
        gap: 26px;
    }

    .of-partner-detail__name {
        font-size: 20px;
        line-height: 26px;
    }

    .of-partner-detail__info-list {
        gap: 16px;
    }

    .of-partner-detail__actions {
        gap: 24px;
        margin-top: 14px;
    }
}

@media (min-width: 480px) {
    .of-partner-detail {
        width: 430px !important;
        max-width: 430px !important;
        height: 844px;
        min-height: 844px;
        margin: 0 auto;
        border-radius: 28px;
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
    }

    .of-partner-detail__footer {
        border-radius: 0 0 28px 28px;
    }
}


/* iPhone 12 mini / very narrow viewport: T6 partner detail shell density. */
@media (max-width: 390px) {
    .of-partner-detail {
        grid-template-rows: var(--of-flow-header-height) minmax(0, 1fr) var(--of-flow-footer-height) !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .of-partner-detail__header {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        min-height: var(--of-flow-header-height) !important;
        height: var(--of-flow-header-height) !important;
        padding: 0 18px !important;
    }

    .of-partner-detail__title {
        font-size: 17px !important;
        line-height: 22px !important;
        letter-spacing: 0.25px !important;
    }

    .of-partner-detail__back,
    .of-partner-detail__header-spacer {
        width: 28px !important;
        height: 28px !important;
    }

    .of-partner-detail__back-icon {
        width: 15px !important;
        height: 20px !important;
    }

    .of-partner-detail__body {
        padding: 16px var(--of-flow-content-x) !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .of-partner-detail__footer {
        min-height: var(--of-flow-footer-height) !important;
        height: var(--of-flow-footer-height) !important;
        padding: 5px 14px !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    .of-partner-detail__header {
        min-height: var(--of-flow-header-height) !important;
        height: var(--of-flow-header-height) !important;
    }

    .of-partner-detail__title {
        font-size: 16px !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
    }

    .of-partner-detail__footer {
        min-height: var(--of-flow-footer-height) !important;
        height: var(--of-flow-footer-height) !important;
        padding: 3px 10px !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
    }
}


/* T6 partner detail: Figma card layout for very narrow screens. */
@media (max-width: 390px) {
    .of-partner-detail__body {
        display: grid !important;
        align-content: start !important;
        padding: 18px 29px 12px !important;
        background: var(--of-flow-page-bg, #f6f6f6) !important;
    }

    .of-partner-detail__card {
        position: relative !important;
        display: grid !important;
        align-content: start !important;
        gap: 24px !important;
        width: min(100%, 304px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 58px 23px 26px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 2px !important;
        box-shadow: none !important;
    }

    .of-partner-detail__classification {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        margin: 0 !important;
        min-height: 24px !important;
        padding: 3px 7px !important;
        font-size: 13px !important;
        line-height: 18px !important;
        font-weight: 600 !important;
        border-radius: 2px !important;
    }

    .of-partner-detail__heading {
        display: grid !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .of-partner-detail__heading-main {
        gap: 2px !important;
    }

    .of-partner-detail__name {
        font-size: 20px !important;
        line-height: 26px !important;
        letter-spacing: 0.6px !important;
    }

    .of-partner-detail__service {
        font-size: 14px !important;
        line-height: 20px !important;
        letter-spacing: 0.45px !important;
    }

    .of-partner-detail__info-list {
        gap: 24px !important;
    }

    .of-partner-detail__info-row {
        grid-template-columns: 24px minmax(0, 1fr) !important;
        gap: 16px !important;
        align-items: start !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .of-partner-detail__info-icon {
        width: 22px !important;
        height: 22px !important;
        justify-self: start !important;
        margin-top: 3px !important;
    }

    .of-partner-detail__info-content {
        gap: 1px !important;
    }

    .of-partner-detail__info-label {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
        letter-spacing: 0.4px !important;
    }

    .of-partner-detail__info-value {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
        letter-spacing: 0.35px !important;
    }

    .of-partner-detail__actions {
        justify-items: center !important;
        width: min(100%, 304px) !important;
        margin: 18px auto 24px !important;
        gap: 0 !important;
    }

    .of-partner-detail__action {
        min-height: 40px !important;
        padding: 8px 17px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 600 !important;
    }

    .of-partner-detail__action-icon {
        width: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
    }


    .of-partner-detail__action--secondary {
        display: none !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    .of-partner-detail__body {
        padding-top: 14px !important;
    }

    .of-partner-detail__card {
        min-height: 0 !important;
        padding-top: 46px !important;
        padding-bottom: 22px !important;
        gap: 20px !important;
    }

    .of-partner-detail__info-list {
        gap: 18px !important;
    }

    .of-partner-detail__actions {
        margin-top: 16px !important;
        margin-bottom: 20px !important;
    }
}


/* T6 final layout correction: white card and Agendar button are separate blocks. */
@media (max-width: 390px) {
    .of-partner-detail__body {
        display: block !important;
        padding: 18px 29px 20px !important;
        background: var(--of-flow-page-bg, #f6f6f6) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .of-partner-detail__card {
        position: relative !important;
        display: grid !important;
        align-content: start !important;
        gap: 24px !important;
        width: min(100%, 304px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 58px 23px 34px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 2px !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .of-partner-detail__info-list {
        gap: 24px !important;
        margin-bottom: 0 !important;
    }

    .of-partner-detail__info-row--address {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .of-partner-detail__actions {
        display: grid !important;
        justify-items: center !important;
        width: min(100%, 304px) !important;
        margin: 22px auto 28px !important;
        gap: 0 !important;
        position: static !important;
        transform: none !important;
        z-index: auto !important;
    }

    .of-partner-detail__action--primary {
        position: static !important;
        transform: none !important;
        z-index: auto !important;
    }

    .of-partner-detail__action--secondary {
        display: none !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    .of-partner-detail__body {
        padding-top: 14px !important;
        padding-bottom: 16px !important;
    }

    .of-partner-detail__card {
        padding-top: 46px !important;
        padding-bottom: 30px !important;
        gap: 20px !important;
    }

    .of-partner-detail__info-list {
        gap: 18px !important;
    }

    .of-partner-detail__actions {
        margin-top: 20px !important;
        margin-bottom: 24px !important;
    }
}


/* T6 visible Agendar button final override: compact card + external button. */
@media (max-width: 390px) {
    .of-partner-detail__body {
        display: block !important;
        padding: 14px 29px 0 !important;
        background: var(--of-flow-page-bg, #f6f6f6) !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    .of-partner-detail__card {
        width: min(100%, 304px) !important;
        margin: 0 auto !important;
        padding: 44px 23px 18px !important;
        gap: 16px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    .of-partner-detail__classification {
        top: 10px !important;
        right: 10px !important;
    }

    .of-partner-detail__heading-main {
        gap: 2px !important;
    }

    .of-partner-detail__info-list {
        gap: 15px !important;
        margin: 0 !important;
    }

    .of-partner-detail__info-row {
        min-height: 0 !important;
    }

    .of-partner-detail__info-row--address {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .of-partner-detail__actions {
        display: grid !important;
        justify-items: center !important;
        width: min(100%, 304px) !important;
        margin: 14px auto 12px !important;
        gap: 0 !important;
        position: static !important;
        transform: none !important;
        z-index: auto !important;
    }

    .of-partner-detail__action--primary {
        display: inline-flex !important;
        position: static !important;
        transform: none !important;
        z-index: auto !important;
        min-height: 40px !important;
    }

    .of-partner-detail__action--secondary {
        display: none !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    .of-partner-detail__body {
        padding-top: 12px !important;
    }

    .of-partner-detail__card {
        padding-top: 42px !important;
        padding-bottom: 16px !important;
        gap: 15px !important;
    }

    .of-partner-detail__info-list {
        gap: 14px !important;
    }

    .of-partner-detail__actions {
        margin-top: 12px !important;
        margin-bottom: 10px !important;
    }
}


/* T6 definitive fix: Agendar remains visible through body scroll. */
@media (max-width: 390px) {
    .of-partner-detail {
        overflow: hidden !important;
    }

    .of-partner-detail__body {
        display: block !important;
        min-height: 0 !important;
        padding: 14px 29px 18px !important;
        background: var(--of-flow-page-bg, #f6f6f6) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .of-partner-detail__card {
        width: min(100%, 304px) !important;
        margin: 0 auto !important;
        padding: 44px 23px 28px !important;
        gap: 16px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    .of-partner-detail__info-list {
        gap: 15px !important;
        margin: 0 !important;
    }

    .of-partner-detail__info-row--address {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .of-partner-detail__actions {
        display: grid !important;
        justify-items: center !important;
        width: min(100%, 304px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 18px auto 24px !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        z-index: auto !important;
        background: transparent !important;
    }

    .of-partner-detail__action--primary {
        display: inline-flex !important;
        position: static !important;
        transform: none !important;
        z-index: auto !important;
        min-height: 40px !important;
    }

    .of-partner-detail__action--secondary {
        display: none !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    .of-partner-detail__body {
        padding-top: 12px !important;
        padding-bottom: 16px !important;
        overflow-y: auto !important;
    }

    .of-partner-detail__card {
        padding-top: 42px !important;
        padding-bottom: 24px !important;
        gap: 14px !important;
    }

    .of-partner-detail__info-list {
        gap: 14px !important;
    }

    .of-partner-detail__actions {
        margin-top: 14px !important;
        margin-bottom: 22px !important;
    }
}

/* Booking panel. */
/* T7 schedule-first screen shown after T6 partner detail. */

.of-booking[hidden] {
    display: none !important;
}

.of-booking {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: var(--of-flow-header-height, 88px) minmax(0, 1fr) auto;
    width: 100% !important;
    max-width: none !important;
    min-height: 100%;
    color: var(--of-flow-brand-color, #0f3549);
    background: var(--of-flow-page-bg, #f6f6f6);
    box-sizing: border-box;
    overflow: hidden;
}

.of-booking__header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: var(--of-flow-header-height, 88px);
    padding: 0 24px;
    background: #ffffff;
    box-sizing: border-box;
}

.of-booking__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.of-booking__back:focus-visible,
.of-booking button:focus-visible {
    outline: none;
    box-shadow: var(--of-focus-ring, 0 0 0 3px rgba(0, 80, 92, 0.18));
}

.of-booking__back-icon {
    display: block;
    width: 18px;
    height: 24px;
    background-color: currentColor;
    clip-path: polygon(66% 0, 78% 12%, 42% 50%, 78% 88%, 66% 100%, 18% 50%);
}

.of-booking__title {
    min-width: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.of-booking__header-spacer {
    width: 34px;
    height: 34px;
}

.of-booking__body {
    min-height: 0;
    padding: 26px 29px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
}

.of-booking__body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.of-booking > .of-wireframe-title,
.of-booking__body > .of-wireframe-title {
    display: none;
}

.of-booking__empty {
    display: none;
    width: min(100%, 326px);
    margin: 0 auto;
    padding: 24px;
    color: #6b7280;
    font-size: 14px;
    box-sizing: border-box;
}

.of-booking[data-booking-state="empty"] .of-booking__empty {
    display: block;
}

.of-booking[data-booking-state="empty"] .of-booking__content {
    display: none !important;
}

.of-booking__content {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: none;
    padding: 0;
    color: var(--of-flow-brand-color, #0f3549);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
}

.of-booking__summary {
    display: grid;
    gap: 6px;
}

.of-booking__label {
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    font-family: var(--of-font-family-form, Arial, Helvetica, sans-serif);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.of-booking__value {
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}

.of-booking__form {
    display: grid;
    gap: 12px;
}

.of-booking__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.of-booking__actions button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.of-booking__actions--schedule {
    margin-top: 22px;
}

#of-booking-schedule-back-btn {
    display: none;
}

.of-booking__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--of-flow-brand-color, #0f3549);
    font-size: 14px;
}

.of-booking-schedule__intro {
    display: grid;
    gap: 12px;
}

.of-booking-schedule__title {
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.4px;
}

.of-booking-schedule__lead {
    max-width: 270px;
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.4px;
}

.of-booking-schedule {
    display: grid;
    gap: 18px;
}

.of-booking-schedule__status {
    min-height: 18px;
    color: #8393a0;
    font-family: var(--of-font-family-form, Arial, Helvetica, sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.of-booking-calendar {
    display: grid;
    gap: 10px;
    width: 100%;
}

.of-booking-calendar__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
}

.of-booking-calendar__month,
.of-booking-calendar__year {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.of-booking-calendar__weekdays,
.of-booking-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.of-booking-calendar__weekdays span {
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.of-booking-calendar__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
    padding: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-sizing: border-box;
}

.of-booking-calendar__day--empty {
    visibility: hidden;
}

.of-booking-calendar__day--available {
    cursor: pointer;
}

.of-booking-calendar__day--available:hover {
    background: rgba(15, 53, 73, 0.08);
}

.of-booking-calendar__day--unavailable {
    color: #a2adb6;
}

.of-booking-calendar__day--selected {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
}

.of-booking-schedule__section {
    display: grid;
    gap: 10px;
}

.of-booking-schedule__section-title {
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.of-booking-schedule__hours {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.of-booking-schedule-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 32px;
    padding: 6px 10px;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    background: #ffffff;
    border: 1px solid #d7dde1;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
}

.of-booking-schedule-item:hover {
    border-color: var(--of-flow-brand-color, #0f3549);
}

.of-booking-schedule-item--selected {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
    border-color: var(--of-flow-brand-color, #0f3549);
}

.of-booking-schedule-item__weekday,
.of-booking-schedule-item__date {
    display: none;
}

.of-booking__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--of-flow-footer-height, 88px);
    padding: 14px 24px;
    color: #ffffff;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.3px;
    background: var(--of-flow-brand-color, #0f3549);
    box-sizing: border-box;
}

@media (max-width: 479px) {
    #of-home-ctn[data-current-stage="booking"] {
        min-height: 100dvh;
    }

    .of-booking {
        height: 100dvh;
        min-height: 100dvh;
    }
}

@media (max-width: 380px) {
    .of-booking__body {
        padding: 26px 30px 22px;
    }

    .of-booking-schedule__title {
        font-size: 21px;
        line-height: 27px;
    }

    .of-booking-schedule__lead {
        font-size: 15px;
        line-height: 21px;
    }

    .of-booking-calendar__weekdays,
    .of-booking-calendar__days {
        gap: 4px;
    }

    .of-booking-calendar__day {
        min-height: 28px;
        font-size: 12px;
    }
}

@media (min-width: 480px) {
    .of-booking {
        width: 430px !important;
        max-width: 430px !important;
        height: 844px;
        min-height: 844px;
        margin: 0 auto;
        border-radius: 28px;
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
    }

    .of-booking__footer {
        border-radius: 0 0 28px 28px;
    }
}

/* T7 schedule mock refinement. */
.of-booking__content--schedule {
    gap: 14px;
}

.of-booking-schedule__intro {
    gap: 8px;
}

.of-booking-schedule__title {
    font-size: 20px;
    line-height: 25px;
}

.of-booking-schedule__lead {
    max-width: 252px;
    font-size: 14px;
    line-height: 19px;
}

.of-booking-schedule__status {
    min-height: 14px;
    font-size: 10px;
    line-height: 14px;
}

.of-booking-schedule {
    gap: 12px;
}

.of-booking-calendar {
    gap: 8px;
}

.of-booking-calendar__header {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 8px;
}

.of-booking-calendar__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.of-booking-calendar__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--of-flow-brand-color, #0f3549);
    background: #ffffff;
    border: 1px solid #d7dde1;
    border-radius: 999px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.of-booking-calendar__month,
.of-booking-calendar__year {
    font-size: 13px;
    line-height: 18px;
}

.of-booking-calendar__weekdays,
.of-booking-calendar__days {
    gap: 3px;
}

.of-booking-calendar__weekdays span {
    font-size: 11px;
    line-height: 15px;
}

.of-booking-calendar__day {
    min-height: 27px;
    font-size: 12px;
    line-height: 16px;
}

.of-booking-schedule__section {
    gap: 8px;
}

.of-booking-schedule__section-title {
    font-size: 14px;
    line-height: 18px;
}

.of-booking-schedule__hours {
    gap: 8px;
    min-height: 34px;
}

.of-booking-schedule-item {
    min-width: 50px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 17px;
}

.of-booking__actions--schedule {
    margin-top: 10px;
}

@media (max-width: 380px) {
    .of-booking__body {
        padding-top: 24px;
    }

    .of-booking-schedule__title {
        font-size: 20px;
        line-height: 25px;
    }

    .of-booking-schedule__lead {
        font-size: 14px;
        line-height: 19px;
    }
}

/* T7 calendar Figma alignment. */
.of-booking__content--schedule {
    gap: 24px;
}

.of-booking-schedule__intro {
    gap: 14px;
}

.of-booking-schedule__title {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: 0.6px;
}

.of-booking-schedule__lead {
    max-width: 292px;
    font-size: 17px;
    line-height: 25px;
    letter-spacing: 0.7px;
}

.of-booking-schedule__status {
    display: none;
}

.of-booking-schedule {
    gap: 22px;
}

.of-booking-calendar {
    gap: 18px;
    padding: 22px 16px 24px;
    background: #ffffff;
    box-sizing: border-box;
}

.of-booking-calendar__header {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 10px;
    align-items: center;
}

.of-booking-calendar__nav-btn {
    width: 30px;
    height: 42px;
    color: #4b5560;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 42px;
    font-weight: 500;
    line-height: 1;
}

.of-booking-calendar__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 6px;
    align-items: center;
}

.of-booking-calendar__select {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0 34px 0 14px;
    color: #2f3033;
    font-family: var(--of-font-family-form, Arial, Helvetica, sans-serif);
    font-size: 19px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    background: #ffffff;
    border: 1px solid #7f858a;
    border-radius: 5px;
    cursor: default;
    box-sizing: border-box;
}

.of-booking-calendar__select::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 13px;
    height: 13px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: translateY(-68%) rotate(45deg);
    box-sizing: border-box;
}

.of-booking-calendar__select--year {
    min-width: 92px;
}

.of-booking-calendar__month,
.of-booking-calendar__year {
    font-size: inherit;
    line-height: inherit;
}

.of-booking-calendar__weekdays,
.of-booking-calendar__days {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px 7px;
}

.of-booking-calendar__weekdays span {
    color: #62676b;
    font-family: var(--of-font-family-form, Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.of-booking-calendar__day {
    position: relative;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    justify-self: center;
    color: #2f3033;
    font-family: var(--of-font-family-form, Arial, Helvetica, sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    border-radius: 6px;
}

.of-booking-calendar__day--unavailable {
    color: #969b9f;
}

.of-booking-calendar__day--available {
    color: var(--of-flow-brand-color, #0f3549);
    font-weight: 700;
    cursor: pointer;
}

.of-booking-calendar__day--available::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 5px;
    height: 5px;
    background: var(--of-flow-brand-color, #0f3549);
    border-radius: 999px;
    transform: translateX(-50%);
}

.of-booking-calendar__day--today {
    color: var(--of-flow-brand-color, #0f3549);
    background: rgba(0, 120, 128, 0.12);
}

.of-booking-calendar__day--selected,
.of-booking-calendar__day--today.of-booking-calendar__day--selected {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
    font-weight: 700;
}

.of-booking-calendar__day--selected::after {
    display: none;
}

.of-booking-schedule__section {
    gap: 14px;
}

.of-booking-schedule__section-title {
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 1px;
}

.of-booking-schedule__hours {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 44px;
    margin-right: -29px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.of-booking-schedule__hours::-webkit-scrollbar {
    display: none;
}

.of-booking-schedule-item {
    min-width: 72px;
    min-height: 40px;
    padding: 7px 14px;
    color: var(--of-flow-brand-color, #0f3549);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    background: #ffffff;
    border: 1px solid #bde7e9;
    border-radius: 5px;
    flex: 0 0 auto;
}

.of-booking-schedule-item--selected {
    color: var(--of-flow-brand-color, #0f3549);
    background: #dff4f3;
    border-color: #dff4f3;
}

.of-booking__actions--schedule {
    margin-top: 12px;
}

#of-booking-schedule-continue-btn {
    font-weight: 500;
}

@media (max-width: 380px) {
    .of-booking-calendar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .of-booking-calendar__heading {
        grid-template-columns: minmax(0, 1fr) 86px;
    }

    .of-booking-calendar__select {
        min-height: 42px;
        font-size: 17px;
    }

    .of-booking-calendar__weekdays,
    .of-booking-calendar__days {
        gap: 8px 5px;
    }

    .of-booking-calendar__day {
        width: 31px;
        min-width: 31px;
        height: 31px;
        min-height: 31px;
        font-size: 16px;
    }
}


/* T7 compact validated schedule adjustments. */
.of-booking__content--schedule {
    gap: 14px;
}

.of-booking-schedule__intro {
    gap: 8px;
}

.of-booking-schedule__title {
    font-size: 20px;
    line-height: 25px;
}

.of-booking-schedule__lead {
    max-width: 284px;
    font-size: 15px;
    line-height: 21px;
    letter-spacing: 0.5px;
}

.of-booking-schedule {
    gap: 12px;
}

.of-booking-calendar {
    gap: 10px;
    padding: 14px 14px 16px;
}

.of-booking-calendar__header {
    grid-template-columns: 26px minmax(0, 1fr) 26px;
    gap: 7px;
}

.of-booking-calendar__nav-btn {
    width: 26px;
    height: 34px;
    font-size: 34px;
}

.of-booking-calendar__heading {
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 6px;
}

.of-booking-calendar__select {
    min-height: 36px;
    padding-right: 30px;
    padding-left: 12px;
    font-size: 15px;
    line-height: 20px;
}

.of-booking-calendar__select::after {
    right: 11px;
    width: 10px;
    height: 10px;
    border-right-width: 2px;
    border-bottom-width: 2px;
}

.of-booking-calendar__weekdays,
.of-booking-calendar__days {
    gap: 6px 5px;
}

.of-booking-calendar__weekdays span {
    font-size: 13px;
    line-height: 18px;
}

.of-booking-calendar__day {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    font-size: 14px;
    line-height: 18px;
}

.of-booking-calendar__day--available {
    color: #006c5b;
}

.of-booking-calendar__day--available::after {
    bottom: -3px;
    width: 5px;
    height: 5px;
    background: #006c5b;
}

.of-booking-calendar__day--today {
    color: #ffffff;
    background: #006c5b;
    font-weight: 700;
}

.of-booking-calendar__day--today::after {
    display: none;
}

.of-booking-calendar__day--selected,
.of-booking-calendar__day--today.of-booking-calendar__day--selected {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
}

.of-booking-schedule__section {
    gap: 9px;
}

.of-booking-schedule__section-title {
    font-size: 18px;
    line-height: 23px;
    letter-spacing: 0.6px;
}

.of-booking-schedule__hours {
    min-height: 36px;
}

.of-booking-schedule-item {
    min-width: 66px;
    min-height: 36px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 21px;
}

.of-booking__actions--schedule {
    margin-top: 4px;
}

#of-booking-schedule-continue-btn:disabled {
    opacity: 0.55;
}

@media (max-width: 380px) {
    .of-booking__body {
        padding-top: 22px;
        padding-bottom: 18px;
    }

    .of-booking__content--schedule {
        gap: 12px;
    }

    .of-booking-schedule__title {
        font-size: 19px;
        line-height: 24px;
    }

    .of-booking-schedule__lead {
        font-size: 14px;
        line-height: 19px;
    }

    .of-booking-calendar {
        padding: 12px 12px 14px;
    }

    .of-booking-calendar__day {
        width: 27px;
        min-width: 27px;
        height: 27px;
        min-height: 27px;
        font-size: 13px;
    }

    .of-booking-schedule-item {
        min-width: 62px;
        min-height: 34px;
        font-size: 15px;
    }
}

/* T7 validated calendar color and touch-spacing adjustments. */
.of-booking-calendar__header {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 12px;
}

.of-booking-calendar__nav-btn {
    width: 38px;
    min-width: 38px;
    height: 44px;
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    touch-action: manipulation;
}

.of-booking-calendar__heading {
    gap: 8px;
}

.of-booking-calendar__day--available {
    color: #006c5b;
}

.of-booking-calendar__day--available::after {
    background: #006c5b;
}

.of-booking-calendar__day--today {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
    font-weight: 700;
}

.of-booking-calendar__day--today::after {
    display: none;
}

.of-booking-calendar__day--selected,
.of-booking-calendar__day--today.of-booking-calendar__day--selected {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
    font-weight: 700;
}

.of-booking-schedule__hours {
    margin-bottom: 4px;
}

.of-booking__actions--schedule {
    margin-top: 12px;
}

#of-booking-schedule-continue-btn,
#of-booking-schedule-continue-btn:disabled {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
    border-color: var(--of-flow-brand-color, #0f3549);
    font-weight: 500;
}

#of-booking-schedule-continue-btn:disabled {
    opacity: 0.55;
}

@media (max-width: 380px) {
    .of-booking-calendar__header {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        gap: 10px;
    }

    .of-booking-calendar__nav-btn {
        width: 36px;
        min-width: 36px;
    }

    .of-booking__actions--schedule {
        margin-top: 10px;
    }
}

/* T7 available-days stronger highlight refinement. */
.of-booking-calendar__day--available {
    color: #ffffff;
    background: #00796b;
    font-weight: 700;
}

.of-booking-calendar__day--available:hover {
    background: #00695d;
}

.of-booking-calendar__day--available::after,
.of-booking-calendar__day--today::after {
    display: none;
}

.of-booking-calendar__day--today {
    color: #ffffff;
    background: #00796b;
    font-weight: 700;
}

.of-booking-calendar__day--selected,
.of-booking-calendar__day--today.of-booking-calendar__day--selected {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
    font-weight: 700;
}


/* T8 booking details screen after schedule selection. */
.of-booking__content--details {
    gap: 16px;
}

.of-booking__content--details > .of-booking__summary {
    display: none;
}

.of-booking-details__intro {
    display: grid;
    gap: 8px;
}

.of-booking-details__title {
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.4px;
}

.of-booking-details__lead {
    max-width: 284px;
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0.4px;
}

.of-booking-details__form {
    display: grid;
    gap: 16px;
}

.of-booking-details__section {
    display: grid;
    gap: 10px;
}

.of-booking-details__section-title {
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.of-booking-details__field-block {
    display: grid;
    gap: 7px;
}

.of-booking-details__split {
    display: grid;
    gap: 10px;
}

.of-booking-details__choice-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.of-booking-details__choice {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    background: #ffffff;
    border: 1px solid #d7dde1;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
}

.of-booking-details__choice input {
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
    accent-color: var(--of-flow-brand-color, #0f3549);
}

.of-booking-details__choice:has(input:checked) {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
    border-color: var(--of-flow-brand-color, #0f3549);
}

.of-booking-details__choice:has(input:checked) input {
    accent-color: #ffffff;
}

.of-booking-details__textarea-wrap {
    position: relative;
    display: grid;
}

.of-booking-details__textarea {
    min-height: 86px;
    padding-bottom: 28px;
    resize: none;
}

.of-booking-details__counter {
    position: absolute;
    right: 13px;
    bottom: 9px;
    color: #8393a0;
    font-family: var(--of-font-family-form, Arial, Helvetica, sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.of-booking__actions--details {
    margin-top: 6px;
}

.of-booking__actions--details .of-search-action--secondary {
    display: none;
}

#of-booking-continue-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.of-search-input--readonly {
    color: #637381;
    background: #eef2f4;
}

@media (max-width: 479px) {
    .of-booking__content--details {
        gap: 14px;
    }

    .of-booking-details__title {
        font-size: 20px;
        line-height: 25px;
    }

    .of-booking-details__form {
        gap: 14px;
    }

    .of-booking-details__section {
        gap: 9px;
    }

    .of-booking-details__choice {
        min-height: 40px;
    }
}

@media (max-width: 380px) {
    .of-booking-details__lead {
        font-size: 14px;
        line-height: 20px;
    }

    .of-booking-details__choice-group {
        gap: 8px;
    }
}

/* T8 details validation and primary CTA consistency. */
.of-booking__actions--details .of-search-action--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 150px;
    min-height: 48px;
    padding: 10px 20px;
    color: #ffffff;
    font-weight: 500;
    background: var(--of-flow-brand-color, #0f3549);
    border-color: var(--of-flow-brand-color, #0f3549);
}

.of-booking__actions--details .of-search-action--primary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    box-sizing: border-box;
}

.of-booking__actions--details .of-search-action--primary:disabled {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
    border-color: var(--of-flow-brand-color, #0f3549);
    opacity: 0.45;
}

.of-booking-details__section .of-search-field,
.of-booking-details__field-block {
    position: relative;
}

.of-booking-details__section .of-search-input {
    padding-right: 42px;
}

.of-booking-details__valid::after,
.of-booking-details__invalid::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 34px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    pointer-events: none;
    box-sizing: border-box;
}

.of-booking-details__field-block.of-booking-details__valid::after,
.of-booking-details__field-block.of-booking-details__invalid::after {
    top: 2px;
}

.of-booking-details__valid::after {
    background-color: #00843d;
    background-image: linear-gradient(45deg, transparent 42%, #ffffff 42%, #ffffff 58%, transparent 58%), linear-gradient(-45deg, transparent 54%, #ffffff 54%, #ffffff 70%, transparent 70%);
    transform: rotate(-12deg);
}

.of-booking-details__invalid::after {
    background-color: #c62828;
    background-image: linear-gradient(45deg, transparent 43%, #ffffff 43%, #ffffff 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #ffffff 43%, #ffffff 57%, transparent 57%);
}

.of-booking-details__section .of-search-input--valid {
    border-color: #00843d;
}

.of-booking-details__section .of-search-input--invalid {
    border-color: #c62828;
}

.of-booking-details__choice-group:has(input:checked) {
    padding-right: 30px;
}


/* T8 validation icon refinement: reuse the same SVG assets as the first plate step. */
.of-booking-details__valid::after,
.of-booking-details__invalid::after {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
}

.of-booking-details__valid::after {
    background-image: url("/Images/Flow/Icons/check-circle-filled.svg") !important;
}

.of-booking-details__invalid::after {
    background-image: url("/Images/Flow/Icons/error-circle-filled.svg") !important;
}

.of-booking-details__section .of-search-input--valid {
    border-color: #00843d;
}

.of-booking-details__section .of-search-input--invalid {
    border-color: #d92d20;
}

/* T8 validation icon alignment refinement. */
.of-booking-details .of-search-field::after {
    top: auto;
    right: 12px;
    bottom: 15px;
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
    transform: none;
    pointer-events: none;
}

.of-booking-details .of-search-field:has(textarea)::after {
    bottom: 18px;
}

.of-booking-details .of-search-input,
.of-booking-details textarea.of-search-input {
    padding-right: 44px;
}

/* T8 final refinement: Figma input radius, exact validation assets and mobility sub-options. */
.of-booking-details__section .of-search-input,
.of-booking-details__textarea,
.of-booking-details__choice {
    border-radius: 5px !important;
}

.of-booking-details__section .of-search-field,
.of-booking-details__field-block {
    position: relative !important;
}

.of-booking-details__section .of-search-input,
.of-booking-details textarea.of-search-input {
    padding-right: 52px !important;
}

.of-booking-details__valid::after,
.of-booking-details__invalid::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    top: auto !important;
    bottom: 14px !important;
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
    pointer-events: none !important;
    box-sizing: content-box !important;
}

.of-booking-details__valid::after {
    background-image: url("/Images/Flow/Icons/check-circle-filled.svg") !important;
}

.of-booking-details__invalid::after {
    background-image: url("/Images/Flow/Icons/error-circle-filled.svg") !important;
}

.of-booking-details__field-block.of-booking-details__valid::after,
.of-booking-details__field-block.of-booking-details__invalid::after {
    top: 28px !important;
    right: 10px !important;
    bottom: auto !important;
}

.of-booking-details__textarea-wrap.of-booking-details__valid::after,
.of-booking-details__textarea-wrap.of-booking-details__invalid::after {
    top: 14px !important;
    right: 14px !important;
    bottom: auto !important;
}

.of-booking-details__choice-group:has(input:checked) {
    padding-right: 0 !important;
}

.of-booking-details__mobility-options[hidden] {
    display: none !important;
}

.of-booking-details__mobility-options {
    display: grid;
    gap: 12px;
    margin-top: 8px;
    padding-left: 24px;
}

.of-booking-details__choice--stacked {
    display: grid;
    align-items: start;
    gap: 8px;
    min-height: auto;
    padding: 0;
    color: var(--of-flow-brand-color, #0f3549);
    background: transparent;
    border: 0;
}

.of-booking-details__choice--stacked:has(input:checked) {
    color: var(--of-flow-brand-color, #0f3549);
    background: transparent;
    border-color: transparent;
}

.of-booking-details__choice--stacked input {
    margin-right: 12px;
}

.of-booking-details__choice-main {
    display: flex;
    align-items: center;
}

.of-booking-details__choice-help {
    display: block;
    margin-left: 28px;
    color: #767b80;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.2px;
}

/* T8 mobility radio alignment and selected-dot refinement. */
.of-booking-details__choice input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
    background: #ffffff;
    border: 1.5px solid #7f858a;
    border-radius: 999px;
    box-sizing: border-box;
}

.of-booking-details__choice input[type="radio"]:checked {
    background:
        radial-gradient(circle at center, var(--of-flow-brand-color, #0f3549) 0 5px, transparent 5.5px),
        #ffffff;
    border-color: var(--of-flow-brand-color, #0f3549);
}

.of-booking-details__choice:has(input:checked) input[type="radio"] {
    background:
        radial-gradient(circle at center, var(--of-flow-brand-color, #0f3549) 0 5px, transparent 5.5px),
        #ffffff;
    border-color: #ffffff;
}

.of-booking-details__choice--stacked {
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
}

.of-booking-details__choice--stacked > input[type="radio"] {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

.of-booking-details__choice--stacked > span:not(.of-booking-details__choice-main):not(.of-booking-details__choice-help) {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

.of-booking-details__choice--stacked .of-booking-details__choice-main {
    display: contents;
}

.of-booking-details__choice--stacked .of-booking-details__choice-main > input[type="radio"] {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

.of-booking-details__choice--stacked .of-booking-details__choice-main > span {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

.of-booking-details__choice-help {
    grid-column: 2;
    margin-left: 0;
}


/* T9 booking summary screen. */
.of-booking__content--summary {
    gap: 18px;
}

.of-booking-summary__intro {
    display: grid;
    gap: 8px;
}

.of-booking-summary__title {
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.4px;
}

.of-booking-summary {
    display: grid;
    gap: 18px;
}

.of-booking-summary__section {
    display: grid;
    gap: 13px;
}

.of-booking-summary__section-title,
.of-booking-summary__label {
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.of-booking-summary__item {
    display: grid;
    gap: 4px;
}

.of-booking-summary__value {
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0.2px;
    white-space: pre-line;
}

.of-booking-summary__contact-list {
    display: grid;
    gap: 7px;
    margin: 0;
}

.of-booking-summary__contact-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.of-booking-summary__contact-row dt,
.of-booking-summary__contact-row dd {
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 15px;
    line-height: 21px;
    letter-spacing: 0.2px;
}

.of-booking-summary__contact-row dt {
    font-weight: 700;
}

.of-booking-summary__contact-row dd {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.of-booking__actions--summary {
    margin-top: 4px;
    justify-content: center;
}

.of-booking__actions--summary #of-booking-summary-back-btn {
    display: none;
}

#of-booking-summary-confirm-btn {
    min-width: 230px;
    font-weight: 500;
}

@media (max-width: 380px) {
    .of-booking-summary__title {
        font-size: 21px;
        line-height: 27px;
    }

    .of-booking-summary__contact-row {
        grid-template-columns: 86px minmax(0, 1fr);
    }
}

/* T9 summary card layout refinement. */
.of-booking-summary__intro {
    gap: 10px;
}

.of-booking-summary__plate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 24px;
    padding: 3px 10px;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    background: #ffffff;
    border: 1px solid #d7dde1;
    border-radius: 4px;
    box-sizing: border-box;
}

.of-booking-summary__card {
    display: grid;
    gap: 22px;
    padding: 18px 16px 20px;
    background: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
}

.of-booking-summary__card--contact {
    gap: 12px;
}

.of-booking-summary__section {
    gap: 18px;
}

.of-booking-summary__section-title,
.of-booking-summary__label,
.of-booking-summary__contact-row dt {
    color: #8393a0;
    font-weight: 500;
}

.of-booking-summary__section-title {
    color: var(--of-flow-brand-color, #0f3549);
    font-weight: 700;
}

.of-booking-summary__value,
.of-booking-summary__contact-row dd {
    color: var(--of-flow-brand-color, #0f3549);
    font-weight: 700;
}

.of-booking-summary__contact-row {
    grid-template-columns: 92px minmax(0, 1fr);
}

#of-booking-summary-confirm-btn {
    min-width: 250px;
}


/* T9 summary final color correction. */
#of-booking-summary-confirm-btn {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549) !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
}

#of-booking-summary-confirm-btn:hover,
#of-booking-summary-confirm-btn:focus-visible {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549) !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
}

/* T10 final confirmation screen. */
.of-booking__content--confirmation {
    align-content: start;
    gap: 34px;
    min-height: 100%;
    padding-top: 42px;
}

.of-booking-confirmation {
    display: grid;
    justify-items: center;
    gap: 24px;
    text-align: center;
}

.of-booking-confirmation__icon {
    display: block;
    width: 84px;
    height: 84px;
}

.of-booking-confirmation__title {
    max-width: 300px;
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: 0.4px;
}

.of-booking-confirmation__next {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 300px;
    margin-top: 2px;
}

.of-booking-confirmation__subtitle {
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: 0.3px;
}

.of-booking-confirmation__text {
    max-width: 286px;
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0.3px;
}

.of-booking__actions--confirmation {
    justify-content: center;
    margin-top: 4px;
}

#of-booking-confirmation-back-btn {
    min-width: 118px;
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549) !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
    font-weight: 500;
}

#of-booking-confirmation-back-btn:hover,
#of-booking-confirmation-back-btn:focus-visible {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549) !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
}

@media (max-width: 380px) {
    .of-booking__content--confirmation {
        gap: 28px;
        padding-top: 34px;
    }

    .of-booking-confirmation__icon {
        width: 76px;
        height: 76px;
    }

    .of-booking-confirmation__title {
        font-size: 19px;
        line-height: 26px;
    }
}

/* T10 final confirmation Figma alignment refinement. */
.of-booking[data-booking-state="confirmed"] .of-booking__back {
    visibility: hidden;
    pointer-events: none;
}

.of-booking__content--confirmation {
    align-content: start;
    gap: 132px;
    min-height: 100%;
    padding-top: 74px;
}

.of-booking-confirmation {
    display: grid;
    justify-items: stretch;
    gap: 28px;
    width: 100%;
    text-align: left;
}

.of-booking-confirmation__icon {
    display: block;
    justify-self: center;
    width: 116px !important;
    height: 116px !important;
    object-fit: contain;
}

.of-booking-confirmation__title {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0.4px;
    text-align: left;
}

.of-booking-confirmation__next {
    display: grid;
    justify-items: start;
    gap: 12px;
    width: 100%;
    max-width: 300px;
    margin: 10px auto 0;
    padding: 18px 18px 16px;
    text-align: left;
    background: #ffffff;
    border: 1px solid #d7dde1;
    border-radius: 5px;
    box-sizing: border-box;
}

.of-booking-confirmation__subtitle {
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: 0.3px;
    text-align: left;
}

.of-booking-confirmation__text {
    max-width: none;
    margin: 0;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.3px;
    text-align: left;
}

.of-booking__actions--confirmation {
    justify-content: center;
    margin-top: 0;
}

#of-booking-confirmation-back-btn {
    min-width: 116px;
    min-height: 42px;
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549) !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
    font-weight: 500;
}

@media (max-width: 380px) {
    .of-booking__content--confirmation {
        gap: 112px;
        padding-top: 62px;
    }

    .of-booking-confirmation__icon {
        width: 106px !important;
        height: 106px !important;
    }

    .of-booking-confirmation__title,
    .of-booking-confirmation__next {
        max-width: 286px;
    }
}


/* iPhone 12 mini / very narrow viewport: booking shell and T7-T10 form density. */
@media (max-width: 390px) {
    .of-booking {
        grid-template-rows: var(--of-flow-header-height) minmax(0, 1fr) var(--of-flow-footer-height) !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .of-booking__header {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        min-height: var(--of-flow-header-height) !important;
        height: var(--of-flow-header-height) !important;
        padding: 0 18px !important;
    }

    .of-booking__title {
        font-size: 17px !important;
        line-height: 22px !important;
        letter-spacing: 0.25px !important;
    }

    .of-booking__back,
    .of-booking__header-spacer {
        width: 28px !important;
        height: 28px !important;
    }

    .of-booking__back-icon {
        width: 15px !important;
        height: 20px !important;
    }

    .of-booking__body {
        padding: 16px var(--of-flow-content-x) !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .of-booking__footer {
        min-height: var(--of-flow-footer-height) !important;
        height: var(--of-flow-footer-height) !important;
        padding: 5px 14px !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
    }

    .of-booking__content,
    .of-booking__content--details {
        gap: 12px !important;
    }

    .of-booking-details__intro {
        gap: 6px !important;
    }

    .of-booking-details__title,
    .of-booking-schedule__title {
        font-size: 18px !important;
        line-height: 23px !important;
    }

    .of-booking-details__lead,
    .of-booking-schedule__lead {
        font-size: 14px !important;
        line-height: 19px !important;
    }

    .of-booking-details__form {
        gap: 10px !important;
    }

    .of-booking-details__section {
        gap: 7px !important;
    }

    .of-booking-details__section-title {
        font-size: 15px !important;
        line-height: 20px !important;
    }

    .of-booking-details__split,
    .of-booking-details__choice-group {
        gap: 8px !important;
    }

    .of-booking-details__choice {
        min-height: 40px !important;
        padding: 0 12px !important;
        font-size: 15px !important;
        line-height: 20px !important;
    }

    .of-booking-details__section .of-search-input,
    .of-booking-details textarea.of-search-input {
        min-height: 40px !important;
        padding: 9px 42px 9px 11px !important;
        font-size: 15px !important;
        line-height: 20px !important;
    }

    .of-booking-details__valid::after,
    .of-booking-details__invalid::after {
        right: 14px !important;
        top: auto !important;
        bottom: 11px !important;
        width: 18px !important;
        height: 18px !important;
        background-size: 18px 18px !important;
    }

    .of-booking-details__field-block.of-booking-details__valid::after,
    .of-booking-details__field-block.of-booking-details__invalid::after {
        top: 31px !important;
        right: 10px !important;
        bottom: auto !important;
    }

    .of-booking-details__textarea-wrap.of-booking-details__valid::after,
    .of-booking-details__textarea-wrap.of-booking-details__invalid::after {
        top: 13px !important;
        right: 13px !important;
        bottom: auto !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    .of-booking__header {
        min-height: var(--of-flow-header-height) !important;
        height: var(--of-flow-header-height) !important;
    }

    .of-booking__title {
        font-size: 16px !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
    }

    .of-booking__body {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .of-booking__footer {
        min-height: var(--of-flow-footer-height) !important;
        height: var(--of-flow-footer-height) !important;
        padding: 3px 10px !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
    }
}

/* T8 choice groups: radio selections must not show validation check icons. */
.of-booking-details__field-block:has(.of-booking-details__choice-group)::after {
    display: none !important;
    content: none !important;
}

.of-booking-details__field-block:has(.of-booking-details__choice-group).of-booking-details__valid::after,
.of-booking-details__field-block:has(.of-booking-details__choice-group).of-booking-details__invalid::after {
    display: none !important;
    content: none !important;
}

.of-booking-details__choice-group:has(input:checked) {
    padding-right: 0 !important;
}

/* Debug details. */
/* Fixed development helper that does not affect the responsive layout height. */
/* Collapsed state stays compact so it does not cover map/results content. */

.of-debug-details {
    position: fixed;
    left: var(--of-layout-margin, 16px);
    bottom: var(--of-layout-margin, 16px);
    z-index: 20;
    width: auto;
    max-width: calc(100vw - (var(--of-layout-margin, 16px) * 2));
    max-height: 70vh;
    padding: 12px 16px;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #dce3ea;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(22, 33, 47, 0.18);
    box-sizing: border-box;
}
.of-debug-details[open] {
    width: min(420px, calc(100vw - (var(--of-layout-margin, 16px) * 2)));
}
.of-debug-details summary {
    cursor: pointer;
    font-weight: 700;
}
.of-debug-details dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px 20px;
    margin: 16px 0 0;
}
.of-debug-details dt {
    font-weight: 700;
}
.of-debug-details dd {
    margin: 0;
}

@media (max-width: 739px) {
    .of-debug-details {
        left: 16px;
        bottom: 16px;
        max-width: calc(100vw - 32px);
    }
    .of-debug-details[open] {
        width: calc(100vw - 32px);
    }
    .of-debug-details dl {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }
    .of-debug-details dt {
        margin-top: 12px;
    }
}
/* Visual validation: hide the technical debug card on mobile-sized flows. */
@media (max-width: 739px) {
    .of-debug-details {
        display: none !important;
    }
}

/* Home responsive shell. */
/* Search and results share one responsive structure. */
/* Mobile shows either search or result map. Tablet keeps a horizontal results rail. Desktop keeps a vertical overlay rail. */

.of-home {
    position: relative;
    display: grid;
    width: 100%;
    max-width: none;
    margin: 0;
    min-width: 0;
    min-height: 0;
}

.of-home__search,
.of-home__results {
    min-width: 0;
    min-height: 0;
}

.of-wireframe-title {
    max-width: 100%;
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.of-wireframe-footer {
    max-width: 100%;
    font-size: 15px;
    color: #364152;
    overflow-wrap: anywhere;
}

#of-home-ctn[data-current-stage="partner-detail"],
#of-home-ctn[data-current-stage="booking"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-height: calc(100dvh - var(--of-header-height, 64px) - (var(--of-layout-margin, 16px) * 2));
}

#of-home-ctn[data-current-stage="partner-detail"] > .of-home__search,
#of-home-ctn[data-current-stage="partner-detail"] > .of-home__results,
#of-home-ctn[data-current-stage="partner-detail"] > .of-booking,
#of-home-ctn[data-current-stage="booking"] > .of-home__search,
#of-home-ctn[data-current-stage="booking"] > .of-home__results,
#of-home-ctn[data-current-stage="booking"] > .of-partner-detail {
    display: none !important;
}

#of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail,
#of-home-ctn[data-current-stage="booking"] > .of-booking {
    display: grid !important;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100% !important;
    max-width: none !important;
}

@media (max-width: 479px) {
    .of-main {
        padding: 0;
    }

    .of-home {
        grid-template-columns: minmax(0, 1fr);
        min-height: 100dvh;
    }

    .of-home__search {
        grid-column: 1;
        min-height: 100dvh;
    }

    #of-home-ctn:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-home__results,
    #of-home-ctn[data-results-state="initial"] .of-home__results {
        display: none !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__search,
    #of-home-ctn[data-results-state="empty"] .of-home__search {
        display: none !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results,
    #of-home-ctn[data-results-state="empty"] .of-home__results {
        display: grid !important;
        grid-column: 1;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
    }

    .of-home__results-map {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    .of-home__results-partners {
        position: absolute;
        right: 12px;
        bottom: 14px;
        left: 12px;
        z-index: 20;
        display: grid;
        height: auto;
        max-height: 112px;
    }

    #of-home-ctn:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-home__results-partners,
    #of-home-ctn[data-results-state="initial"] .of-home__results-partners {
        display: none !important;
    }
}

@media (min-width: 480px) and (max-width: 1199px) {
    .of-home {
        grid-template-columns: minmax(252px, 32vw) minmax(0, 1fr);
        column-gap: 12px;
        height: calc(100dvh - var(--of-header-height, 64px) - (var(--of-layout-margin, 24px) * 2));
        min-height: 560px;
    }

    .of-home__search {
        grid-column: 1;
        grid-row: 1;
        height: 100%;
    }

    .of-home__results {
        grid-column: 2;
        grid-row: 1;
        height: 100%;
    }

    .of-home__results-map {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    .of-home__results-partners {
        position: absolute;
        right: 14px;
        bottom: 14px;
        left: 14px;
        z-index: 20;
        display: grid;
        height: auto;
        max-height: 124px;
    }

    #of-home-ctn:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-home__results-partners,
    #of-home-ctn[data-results-state="initial"] .of-home__results-partners {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .of-home {
        grid-template-columns: minmax(304px, 340px) minmax(0, 1fr);
        column-gap: 16px;
        height: calc(100dvh - var(--of-header-height, 64px) - (var(--of-layout-margin, 32px) * 2));
        min-height: 620px;
    }

    .of-home__search {
        grid-column: 1;
        grid-row: 1;
        height: 100%;
    }

    .of-home__results {
        grid-column: 2;
        grid-row: 1;
        height: 100%;
    }

    .of-home__results-map {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    .of-home__results-partners {
        position: absolute;
        top: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 20;
        display: grid;
        width: min(300px, 28vw);
        min-width: 0;
    }

    #of-home-ctn:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-home__results-partners,
    #of-home-ctn[data-results-state="initial"] .of-home__results-partners {
        display: none !important;
    }
}

@media (min-width: 1600px) {
    .of-home {
        grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
        column-gap: 18px;
        height: calc(100dvh - var(--of-header-height, 64px) - (var(--of-layout-margin, 64px) * 2));
    }

    .of-home__results-partners {
        width: 312px;
    }
}

/* 4A.6: hard-lock the results area height so the map always fills the full available right side. */
@media (min-width: 480px) {
    .of-home {
        grid-auto-rows: minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
    }

    .of-home__results {
        align-self: stretch;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
}

/* 4C.1: stage visibility must always win over responsive result-state rules. */
#of-home-ctn[data-current-stage="partner-detail"] > .of-home__search,
#of-home-ctn[data-current-stage="partner-detail"] > .of-home__results,
#of-home-ctn[data-current-stage="partner-detail"] > .of-booking,
#of-home-ctn[data-current-stage="booking"] > .of-home__search,
#of-home-ctn[data-current-stage="booking"] > .of-home__results,
#of-home-ctn[data-current-stage="booking"] > .of-partner-detail {
    display: none !important;
}

#of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail,
#of-home-ctn[data-current-stage="booking"] > .of-booking {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
}

@media (max-width: 479px) {
    #of-home-ctn[data-current-stage="partner-detail"],
    #of-home-ctn[data-current-stage="booking"] {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail,
    #of-home-ctn[data-current-stage="booking"] > .of-booking {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
    }
}

/* Oficina Fácil default brand theme: Ayvens. */
/* Ayvens is the base/default branding. */
/* White-label partner themes must be loaded after the main bundle and override only necessary tokens. */

:root,
[data-of-brand="ayvens"] {
    --of-brand-code: "ayvens";
    --of-brand-logo-url: url("/Images/ayvens-logo.svg");

    /* Velocity/Ayvens aliases kept here to make Figma handoff easier. */
    --ayvens-theme-brand-secondary-400: #0f3549;
    --ayvens-theme-brand-primary-400: #00505c;

    --of-brand-primary: #00505c;
    --of-brand-secondary: #c8ff00;
    --of-brand-accent: #00a3a3;

    --of-page-bg: #f4f6f8;
    --of-surface-bg: #ffffff;
    --of-surface-muted-bg: #f7f9fa;
    --of-surface-subtle-bg: #eef3f4;
    --of-map-bg: #e5ecef;

    --of-text: #16212f;
    --of-text-strong: #001a33;
    --of-text-muted: #465564;
    --of-text-subtle: #6b7280;
    --of-text-inverse: #ffffff;
    --of-text-on-brand: #ffffff;
    --of-text-on-secondary: #001a33;

    --of-border: #cdd4db;
    --of-border-muted: #dce3ea;
    --of-border-strong: #8aa0b5;
    --of-border-focus: var(--of-brand-primary);
    --of-focus-ring: 0 0 0 3px rgba(0, 80, 92, 0.18);

    --of-success: #007a3d;
    --of-success-bg: #e9f7ef;
    --of-warning: #946200;
    --of-warning-bg: #fff6dd;
    --of-error: #b42318;
    --of-error-bg: #fdebea;
    --of-info: var(--of-brand-primary);
    --of-info-bg: #e8f3f5;
    --of-disabled-bg: #f1f3f5;
    --of-disabled-text: #6b7280;
    --of-disabled-border: #d6dbe1;

    --of-action-primary-bg: var(--of-brand-primary);
    --of-action-primary-bg-hover: #003f49;
    --of-action-primary-bg-active: #00343c;
    --of-action-primary-text: var(--of-text-on-brand);
    --of-action-secondary-bg: transparent;
    --of-action-secondary-bg-hover: var(--of-surface-subtle-bg);
    --of-action-secondary-text: var(--of-brand-primary);
    --of-action-secondary-border: var(--of-border);

    /* Keep the body/wireframe base neutral; use Chillax through brand/semantic tokens. */
    --of-font-family-base: Arial, Helvetica, sans-serif;
    --of-font-family-brand: "Chillax", Arial, Helvetica, sans-serif;

    --of-typography-step-title-family: var(--of-font-family-brand);
    --of-typography-step-title-size: 20px;
    --of-typography-step-title-weight: 600;
    --of-typography-step-title-line-height: normal;
    --of-typography-step-title-letter-spacing: 1px;
    --of-typography-step-title-color: var(--ayvens-theme-brand-secondary-400);

    --of-shadow-card: 0 12px 32px rgba(0, 0, 0, 0.08);
    --of-shadow-floating: 0 16px 48px rgba(0, 0, 0, 0.16);
}